@font-face {
    font-family: "Ubuntu";
    src: url("../fonts/ubuntu-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Ubuntu";
    src: url("../fonts/ubuntu-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Ubuntu";
    src: url("../fonts/ubuntu-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Ubuntu";
    src: url("../fonts/ubuntu-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;

    --bg: #141414;
    --nav: #1b1b1b;
    --surface-1: #181818;
    --surface-2: #222222;
    --surface-3: #2c2c2c;
    --line: #393939;
    --line-soft: #2c2c2c;
    --outline: rgba(0, 0, 0, 0.6);

    --fg: #ffffff;
    --fg-1: #d9d9d9;
    --fg-2: #a8a8a8;
    --fg-3: #6b6b6b;

    --accent: #ffcc02;
    --accent-top: #ffe46b;
    --accent-bottom: #d99000;
    --accent-press: #f5c000;
    --accent-soft: rgba(255, 204, 2, 0.12);
    --accent-line: rgba(255, 204, 2, 0.45);
    --accent-text: #ffcc02;
    --on-accent: #1a1200;

    --go: #2f9a18;
    --go-top: #4cc22c;
    --go-bottom: #1f6e0e;
    --go-press: #2a8a15;
    --on-go: #ffffff;

    --taler: #e9b124;
    --taler-top: #f8ef2b;
    --taler-bottom: #b16d17;
    --taler-text: #e9b124;
    --taler-soft: rgba(233, 177, 36, 0.2);
    --on-taler: #3d2504;

    --ducket: #d967c6;
    --ducket-top: #e99bdc;
    --ducket-bottom: #812278;
    --ducket-text: #e99bdc;
    --ducket-soft: rgba(217, 103, 198, 0.2);
    --on-ducket: #3a0c34;

    --green: #5bd13a;
    --green-soft: rgba(91, 209, 58, 0.14);
    --red: #d93a2b;
    --red-soft: rgba(217, 58, 43, 0.14);
    --discord: #5865f2;

    --gold: #ffcc02;
    --silver: #cfcfcf;
    --bronze: #c97b3a;

    --radius-sm: 12px;
    --radius: 16px;
    --radius-lg: 24px;
    --pill-h: 56px;

    --rail: 140px;
    --content: 1200px;
}

* { box-sizing: border-box; }

html {
    color-scheme: dark;
    scrollbar-color: var(--line) var(--bg);
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > main { flex: 1 0 auto; }

a { color: inherit; text-decoration: none; }

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}
button {
    cursor: pointer;
    border: 0;
    background: none;
    padding: 0;
}

:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 3px;
}

::selection { background: var(--accent); color: var(--on-accent); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sidenav {
    position: fixed;
    top: 32px;
    left: 32px;
    bottom: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 50;
    background: var(--nav);
    border: 1px solid var(--line-soft);
    border-radius: 22px;
    padding: 14px 10px;
}

.brand-mark {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    color: var(--accent);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand-mark:hover { transform: rotate(-8deg); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-mark path { stroke: var(--on-accent); }

.nav-item {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: var(--fg-2);
    border-radius: var(--radius);
    transition: color 0.18s ease, background 0.18s ease;
}
.nav-item:hover {
    color: var(--fg);
    background: var(--surface-3);
}
.nav-item.active {
    color: var(--on-accent);
    background: var(--accent);
    box-shadow: inset 0 2px 0 var(--accent-top), inset 0 -4px 0 var(--accent-bottom), 0 0 0 1px var(--outline);
}
.nav-item.nav-logout:hover {
    color: var(--red);
    background: var(--red-soft);
}
.nav-item.nav-discord:hover {
    color: var(--discord);
    background: rgba(88, 101, 242, 0.12);
}
.nav-item.nav-admin:hover {
    color: var(--accent-text);
    background: var(--accent-soft);
}
.nav-item svg { width: 24px; height: 24px; }

.sidenav-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding-top: 16px;
    position: relative;
}
.sidenav-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: var(--line);
}

.page {
    width: 100%;
    max-width: calc(var(--content) + var(--rail) * 2);
    margin: 0 auto;
    padding: 88px var(--rail);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    z-index: 1;
}
.page > :last-child { margin-bottom: 0; }

.hero {
    position: relative;
    display: grid;
    grid-template-columns: 264px 1fr;
    column-gap: 56px;
    align-items: center;
    margin-bottom: 88px;
}
.hero .online-counter {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}

.greeting {
    margin: 0 0 -6px;
    font-size: 20px;
    font-weight: 500;
    color: var(--fg-2);
}

.avatar-frame {
    position: relative;
    width: 264px;
    height: 264px;
}
.avatar-circle {
    position: absolute;
    inset: 0;
    background: var(--surface-2);
    border: 4px solid var(--accent);
    border-radius: 50%;
}
.avatar-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 352px;
    width: auto;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

.hero-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.online-counter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    padding: 9px 18px 9px 16px;
    background: var(--surface-2);
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    color: var(--fg-1);
    margin-bottom: 4px;
}
.online-counter b {
    color: var(--green);
    font-weight: 700;
}
.online-text { white-space: nowrap; }

.online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(91, 209, 58, 0.2);
    animation: pulse-dot 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 4px rgba(91, 209, 58, 0.2); }
    50%      { box-shadow: 0 0 0 7px rgba(91, 209, 58, 0.06); }
}

.name {
    font-weight: 700;
    font-size: 72px;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1;
}
.motto {
    color: var(--fg-1);
    font-size: 17px;
    margin: 0;
    font-style: italic;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}
.currencies {
    display: flex;
    align-items: center;
    gap: 12px;
}
.coin {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: var(--pill-h);
    min-width: 210px;
    padding: 0 26px 0 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 17px;
    color: var(--fg);
}
.coin.taler {
    background: var(--taler);
    box-shadow: inset 0 2px 0 var(--taler-top), inset 0 -4px 0 var(--taler-bottom), 0 0 0 1px var(--outline);
}
.coin.ducket {
    background: var(--ducket);
    box-shadow: inset 0 2px 0 var(--ducket-top), inset 0 -4px 0 var(--ducket-bottom), 0 0 0 1px var(--outline);
}
.coin-icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.coin-icon img {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}
.coin-amount {
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.cta {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--go);
    color: var(--on-go);
    min-height: var(--pill-h);
    padding: 0 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 17px;
    min-width: 0;
    box-shadow: inset 0 2px 0 var(--go-top), inset 0 -4px 0 var(--go-bottom), 0 0 0 1px var(--outline);
    transition: transform 0.18s ease, background 0.18s ease;
}
.cta:hover { transform: translateY(-2px); }
.cta:active {
    transform: translateY(0);
    background: var(--go-press);
}
.cta svg { width: 18px; height: 18px; }
.cta .arrow { transition: transform 0.18s ease; }
.cta:hover .arrow { transform: translateX(3px); }

.modules { width: 100%; }

.section {
    width: 100%;
    margin-bottom: 80px;
}
.section:last-child { margin-bottom: 0; }

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 24px 0;
}
.section-title {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-2);
    margin: 0;
}

.friends-wrap {
    --friends-per-page: 8;
    --friends-gap: 18px;
    --friend-size: calc((100% - (var(--friends-per-page) - 1) * var(--friends-gap)) / var(--friends-per-page));
    position: relative;
    width: 100%;
}

.slider-arrow {
    position: absolute;
    top: 0;
    margin-top: calc(var(--friend-size) / 2);
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--fg);
    display: grid;
    place-items: center;
    z-index: 10;
    box-shadow: 0 0 0 6px var(--bg);
    transition: background 0.18s ease, color 0.18s ease;
}
.slider-arrow:hover {
    background: var(--accent);
    color: var(--on-accent);
}
.slider-arrow.prev { left: -24px; }
.slider-arrow.next { right: -24px; }
.slider-arrow svg { width: 20px; height: 20px; }
.slider-arrow:disabled,
.slider-arrow.is-disabled {
    opacity: 0;
    pointer-events: none;
}

.friends {
    display: flex;
    gap: var(--friends-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
    -webkit-user-select: none;
}
.friends.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}
.friends::-webkit-scrollbar { display: none; }

.friend {
    flex: 0 0 var(--friend-size);
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.friends.is-dragging .friend,
.friends.is-dragging .friend * {
    pointer-events: none;
}

.friend-avatar {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}
.friend-circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--surface-2);
    border: 3px solid var(--surface-3);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.friend-circle.online {
    background: var(--surface-3);
    border-color: var(--accent);
}
.friend-circle img {
    width: auto;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    margin-bottom: -73px;
    pointer-events: none;
}

.friend-status {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--fg-3);
    border: 4px solid var(--bg);
    z-index: 20;
}
.friend-status.on { background: var(--green); }

.friend-idle {
    position: absolute;
    top: 5px;
    right: 15px;
    width: 8px;
    height: 22px;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    z-index: 21;
    pointer-events: none;
}

.friend-name {
    max-width: 100%;
    font-weight: 500;
    font-size: 14px;
    color: var(--fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.friend.offline .friend-name { color: var(--fg-2); }

.friend.empty {
    pointer-events: none;
    cursor: default;
}

.news {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 220px;
    gap: 14px;
}
.news-item {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.25s ease;
    color: var(--fg);
    background-color: var(--surface-2);
    background-size: cover;
}
.news-item:hover { transform: translateY(-4px); }
.news-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 12, 0.55);
    pointer-events: none;
}
.news-item > * { position: relative; z-index: 1; }

.news-tag {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    margin-bottom: auto;
}

.news-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    margin: 14px 0 6px 0;
    color: inherit;
}

.news-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-1);
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 56px;
    flex-wrap: wrap;
    gap: 16px;
}
.page-title {
    font-weight: 700;
    font-size: 44px;
    letter-spacing: -0.015em;
    margin: 0;
    line-height: 1.05;
}

.plus-hero {
    display: grid;
    grid-template-columns: 264px 1fr;
    grid-template-rows: auto auto;
    column-gap: 56px;
    row-gap: 18px;
    align-items: center;
    margin-bottom: 80px;
}
.plus-hero .plus-tag     { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; }
.plus-hero .plus-visual  { grid-column: 1; grid-row: 1 / span 2; }
.plus-hero .plus-content { grid-column: 2; grid-row: 2; align-self: start; }

.plus-visual {
    position: relative;
    width: 264px;
    height: 264px;
}
.plus-bg {
    position: absolute;
    inset: 0;
    background: var(--surface-2);
    border: 4px solid var(--accent);
    border-radius: 50%;
}
.plus-crown {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2;
}
.plus-crown img {
    width: 122px;
    height: 189px;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

.plus-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--surface-3);
    border: 6px solid var(--bg);
    display: grid;
    place-items: center;
    z-index: 3;
}

.plus-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.plus-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 12px;
    background: var(--accent-soft);
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    color: var(--accent-text);
    letter-spacing: 0.02em;
}
.plus-tag-icon {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 50%;
}
.plus-tag-icon svg { width: 12px; height: 12px; }

.plus-title {
    font-weight: 700;
    font-size: 72px;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
}
.plus-title .plus { color: var(--accent-text); }

.plus-desc {
    color: var(--fg-1);
    font-size: 17px;
    margin: 0;
    line-height: 1.6;
    max-width: 620px;
}

.plus-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 6px;
}
.perk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    background: var(--surface-2);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fg-1);
}
.perk svg {
    width: 14px;
    height: 14px;
    color: var(--accent-text);
}

.plus-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.plus-cta-row form { display: contents; }

.plus-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: var(--pill-h);
    padding: 0 28px 0 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 17px;
    transition: transform 0.18s ease;
    cursor: pointer;
    border: 0;
}
.plus-cta:hover { transform: translateY(-2px); }
.plus-cta-ducket {
    background: var(--ducket);
    color: var(--on-ducket);
    box-shadow: inset 0 2px 0 var(--ducket-top), inset 0 -4px 0 var(--ducket-bottom), 0 0 0 1px var(--outline);
}

.cta-coin-icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
}
.cta-coin-icon img {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

.plus-lifetime {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: var(--fg-2);
}
.plus-lifetime b {
    color: var(--accent-text);
    font-weight: 700;
}

.plus-active {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--pill-h);
    padding: 0 26px 0 20px;
    background: var(--green-soft);
    color: var(--green);
    border-radius: 999px;
    font-weight: 700;
    font-size: 16px;
    margin-top: 6px;
    align-self: flex-start;
}
.plus-active svg { width: 20px; height: 20px; }

.voucher {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 28px 32px;
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    margin-bottom: 80px;
}
.voucher-info {
    display: flex;
    align-items: center;
    gap: 18px;
}
.voucher-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: var(--ducket);
    box-shadow: inset 0 2px 0 var(--ducket-top), inset 0 -4px 0 var(--ducket-bottom), 0 0 0 1px var(--outline);
    border-radius: var(--radius);
    flex-shrink: 0;
}
.voucher-icon img {
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}
.voucher-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.voucher-text h3 {
    margin: 0;
    font-weight: 700;
    font-size: 19px;
    color: var(--fg);
}
.voucher-text p {
    margin: 0;
    font-size: 15px;
    color: var(--fg-2);
}
.voucher-form {
    display: flex;
    align-items: center;
    gap: 10px;
}
.voucher-input {
    background: var(--surface-1);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    height: 52px;
    padding: 0 22px;
    font-weight: 700;
    font-size: 15px;
    color: var(--fg);
    width: 240px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    outline: none;
}
.voucher-input::placeholder {
    color: var(--fg-2);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.voucher-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.badges-section { margin-bottom: 80px; }

.badges-form { margin: 0; }

.badges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.badge {
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    padding: 28px 20px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease, background 0.2s ease;
    cursor: pointer;
    position: relative;
    width: 100%;
    border: 0;
    color: inherit;
}
.badge:not([disabled]):hover {
    transform: translateY(-4px);
    background: var(--surface-3);
}
.badge.owned,
.badge[disabled] { cursor: default; }

.badge-art {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--surface-3);
    border: 3px solid var(--accent);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    overflow: hidden;
}
.badge.owned .badge-art { border-color: var(--line); }
.badge-art img {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.badge:not([disabled]):hover .badge-art img { transform: rotate(-6deg) scale(1.08); }

.badge-name {
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 14px 0;
    color: var(--fg);
}
.badge-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 16px 7px 10px;
    border-radius: 999px;
    background: var(--ducket-soft);
    color: var(--ducket-text);
    font-weight: 700;
    font-size: 15px;
    transition: background 0.18s ease, color 0.18s ease;
}
.badge:not([disabled]):hover .badge-buy {
    background: var(--ducket);
    color: var(--on-ducket);
}
.badge-buy .price-icon {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}
.badge-buy .price-icon img {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

.badge-buy.badge-owned {
    background: var(--green-soft);
    color: var(--green);
    padding: 8px 16px;
}
.badge-buy.badge-owned svg {
    width: 14px;
    height: 14px;
}

.badges-empty {
    grid-column: 1 / -1;
    color: var(--fg-2);
    font-size: 15px;
    padding: 20px 0;
}

.rank-section {
    margin-bottom: 80px;
}

.rank-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}
.rank-badge {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--accent);
}
.rank-badge img {
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

.rank-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.rank-head .rank-name {
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--fg);
    line-height: 1.05;
}
.rank-count {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-2);
}

.staff {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}
.staff-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px 20px 20px;
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    min-width: 0;
}

.staff-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}
.staff-circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--surface-3);
    border: 3px solid var(--line-soft);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.staff-card.online .staff-circle { border-color: var(--accent); }
.staff-circle img {
    width: auto;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    margin-bottom: -80px;
    pointer-events: none;
}

.staff-status {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--fg-3);
    border: 4px solid var(--surface-2);
    z-index: 5;
}
.staff-status.on { background: var(--green); }

.staff-idle {
    position: absolute;
    top: 5px;
    right: 15px;
    width: 8px;
    height: 22px;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    z-index: 6;
    pointer-events: none;
}

.staff-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.staff-name {
    font-weight: 700;
    font-size: 20px;
    color: var(--fg);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.staff-motto {
    font-size: 15px;
    color: var(--fg-2);
    font-style: italic;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.staff-empty {
    min-height: 160px;
    padding: 24px;
    background: transparent;
    border: 2px dashed var(--line);
    border-radius: var(--radius-lg);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.staff-empty p {
    margin: 0;
    color: var(--fg-2);
    font-size: 15px;
    font-style: italic;
}

.news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.featured {
    background: var(--surface-2);
    color: var(--fg);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 44px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.featured-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    background: var(--accent);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--on-accent);
    margin-bottom: 24px;
}
.featured-tag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--on-accent);
}

.featured-title {
    font-weight: 700;
    font-size: 46px;
    letter-spacing: -0.015em;
    line-height: 1.1;
    margin: 0 0 24px 0;
}

.featured-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 26px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--line);
}
.author-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--surface-3);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
}
.author-avatar img {
    position: relative;
    left: -1px;
    height: auto;
    width: auto;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    margin-bottom: -44px;
}
.byline-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.byline-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--fg);
}
.byline-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--fg-2);
}

.featured-body {
    color: var(--fg-1);
    font-size: 17px;
    line-height: 1.7;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.featured-body p { margin: 0 0 16px 0; }
.featured-body p:last-child { margin-bottom: 0; }
.featured-body a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.featured-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 8px 0;
    display: block;
}

.list-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.search-wrap {
    position: relative;
    width: 100%;
}
.search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--fg-2);
    pointer-events: none;
}
.search-input {
    width: 100%;
    background: var(--surface-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    height: 54px;
    padding: 0 18px 0 48px;
    font-weight: 500;
    font-size: 16px;
    color: var(--fg);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.search-input::placeholder { color: var(--fg-2); font-weight: 400; }
.search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.filter-pill {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--fg-1);
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.filter-pill:hover {
    background: var(--surface-3);
    color: var(--fg);
}
.filter-pill.active {
    background: var(--accent);
    color: var(--on-accent);
}

.articles {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.article-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.25s ease;
    color: var(--fg);
    background-color: var(--surface-2);
    background-size: cover;
}
a.article-item:hover { transform: translateY(-3px); }
.article-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 12, 0.62);
    pointer-events: none;
}
.article-item > * { position: relative; z-index: 1; }

.article-tag {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(240, 240, 245, 0.14);
    color: var(--fg);
}

.article-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    color: inherit;
}
.article-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-2);
}

.article-item.active {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
.article-item.active .article-tag {
    background: var(--accent);
    color: var(--on-accent);
}

.articles-empty {
    padding: 28px 22px;
    border: 2px dashed var(--line);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--fg-2);
    font-size: 15px;
    font-style: italic;
    display: none;
    margin-top: 12px;
}
.articles-empty.show { display: block; }

.filter-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    background: var(--surface-2);
    border-radius: 999px;
}
.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px 11px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    color: var(--fg-2);
    transition: color 0.18s ease, background 0.18s ease;
    cursor: pointer;
    white-space: nowrap;
}
.filter-tab:hover { color: var(--fg); }
.filter-tab.active {
    background: var(--surface-3);
    color: var(--fg);
}
.filter-tab.active.is-taler {
    color: var(--on-taler);
    background: var(--taler);
    box-shadow: inset 0 2px 0 var(--taler-top), inset 0 -4px 0 var(--taler-bottom), 0 0 0 1px var(--outline);
}
.filter-tab.active.is-ducket {
    color: var(--on-ducket);
    background: var(--ducket);
    box-shadow: inset 0 2px 0 var(--ducket-top), inset 0 -4px 0 var(--ducket-bottom), 0 0 0 1px var(--outline);
}
.filter-tab img {
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

.podium {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: end;
    margin-bottom: 36px;
}
.podium-spot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: inherit;
}
.podium-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.podium-avatar img {
    width: auto;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    margin-bottom: -77px;
    pointer-events: none;
}
.podium-info {
    text-align: center;
    margin-top: -2px;
}
.podium-name {
    font-weight: 700;
    font-size: 19px;
    color: var(--fg);
    margin-bottom: 2px;
}
.podium-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 19px;
    font-variant-numeric: tabular-nums;
}
.podium-value .val-icon,
.rank-value .val-icon,
.self-banner-value .val-icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.podium-value .val-icon img,
.rank-value .val-icon img,
.self-banner-value .val-icon img {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}
.podium-step {
    width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 60px;
    color: rgba(0, 0, 0, 0.28);
}

.podium-spot.gold { order: 2; }
.podium-spot.gold .podium-avatar { background: var(--gold); }
.podium-spot.gold .podium-value { color: var(--gold); }
.podium-spot.gold .podium-step { background: var(--gold); height: 172px; }

.podium-spot.silver { order: 1; }
.podium-spot.silver .podium-avatar { background: var(--silver); }
.podium-spot.silver .podium-value { color: var(--silver); }
.podium-spot.silver .podium-step { background: var(--silver); height: 124px; }

.podium-spot.bronze { order: 3; }
.podium-spot.bronze .podium-avatar { background: var(--bronze); }
.podium-spot.bronze .podium-value { color: var(--bronze); }
.podium-spot.bronze .podium-step { background: var(--bronze); height: 88px; }

.rank-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 36px;
}
.rank-row {
    display: grid;
    grid-template-columns: 48px 64px 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 12px 26px 12px 18px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    color: inherit;
}
.rank-number {
    font-weight: 700;
    font-size: 19px;
    color: var(--fg-2);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.rank-avatar {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--surface-3);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.rank-avatar img {
    width: auto;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    margin-bottom: -41px;
    pointer-events: none;
}
.rank-row .rank-name {
    font-weight: 700;
    font-size: 18px;
    color: var(--fg);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-value {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 18px;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rank-row.is-you {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.rank-row.is-you .rank-name,
.rank-row.is-you .rank-number { color: var(--accent-text); }

.self-banner {
    margin-top: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 26px 16px 18px;
    background: var(--accent-soft);
    border: 2px dashed var(--accent-line);
    border-radius: var(--radius-lg);
}
.self-banner-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.self-banner-rank {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    font-size: 15px;
}
.self-banner-text {
    font-size: 16px;
    color: var(--fg-1);
}
.self-banner-text b { color: var(--fg); font-weight: 700; }
.self-banner-value {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 18px;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: stretch;
}
.settings-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.settings-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.settings-form .block-footer { margin-top: auto; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}
.form-grid .field-full { grid-column: 1 / -1; }

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.field-label {
    font-weight: 500;
    font-size: 14px;
    color: var(--fg-1);
    padding-left: 4px;
}
.field-input {
    width: 100%;
    background: var(--surface-1);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    height: 56px;
    padding: 0 20px;
    font-weight: 500;
    font-size: 16px;
    color: var(--fg);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    outline: none;
}
.field-input::placeholder {
    color: var(--fg-2);
    font-weight: 400;
}
.field-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-input.is-readonly {
    background: transparent;
    border-color: var(--surface-3);
    color: var(--fg-2);
    cursor: default;
}
.field-input.is-readonly:focus { box-shadow: none; border-color: var(--surface-3); }

.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--fg);
    -webkit-box-shadow: 0 0 0 100px var(--surface-1) inset;
    caret-color: var(--fg);
}

.block-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.btn-primary,
.save-btn,
.voucher-submit,
.login-btn,
.signup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    font-weight: 700;
    font-size: 16px;
    border: 0;
    cursor: pointer;
    box-shadow: inset 0 2px 0 var(--accent-top), inset 0 -4px 0 var(--accent-bottom), 0 0 0 1px var(--outline);
    transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.btn-primary:hover,
.save-btn:hover,
.voucher-submit:hover,
.login-btn:hover,
.signup-btn:hover {
    transform: translateY(-2px);
}
.btn-primary:active,
.save-btn:active,
.voucher-submit:active,
.login-btn:active,
.signup-btn:active {
    transform: translateY(0);
    background: var(--accent-press);
}
.btn-primary svg,
.save-btn svg,
.voucher-submit svg,
.login-btn svg,
.signup-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.18s ease;
}
.login-btn:hover svg,
.signup-btn:hover svg { transform: translateX(3px); }

.signup-btn {
    background: var(--go);
    color: var(--on-go);
    box-shadow: inset 0 2px 0 var(--go-top), inset 0 -4px 0 var(--go-bottom), 0 0 0 1px var(--outline);
}
.signup-btn:active { background: var(--go-press); }

.login-btn,
.signup-btn {
    width: 100%;
    min-height: 56px;
    margin-top: 6px;
    font-size: 17px;
}

.field-code:not(:placeholder-shown) {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.signup-btn:disabled {
    background: var(--surface-2);
    color: var(--fg-3);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}
.signup-btn:disabled svg { transform: none; }

.toast-stack {
    position: fixed;
    top: 32px;
    right: 32px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 400px;
    width: calc(100% - 64px);
}
.toast {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 16px 16px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    animation: toast-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast.removing { animation: toast-out 0.25s ease forwards; }
@keyframes toast-in {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toast-out {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}

.toast-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--fg);
}
.toast-icon svg { width: 20px; height: 20px; }

.toast-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 1px;
}
.toast-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--fg);
    line-height: 1.25;
}
.toast-message {
    font-size: 14px;
    color: var(--fg-1);
    line-height: 1.45;
}

.toast-close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--fg-2);
    border-radius: 10px;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}
.toast-close:hover {
    color: var(--fg);
    background: var(--surface-3);
}
.toast-close svg { width: 14px; height: 14px; }

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: left;
    animation: toast-progress 5s linear forwards;
}
@keyframes toast-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

.toast.success .toast-icon     { background: var(--go); color: var(--on-go); }
.toast.success .toast-progress { background: var(--green); }
.toast.error   .toast-icon     { background: var(--red); }
.toast.error   .toast-progress { background: var(--red); }
.toast.info    .toast-icon     { background: var(--accent); color: var(--on-accent); }
.toast.info    .toast-progress { background: var(--accent); }
.toast.ducket  .toast-icon     { background: var(--ducket); color: var(--on-ducket); }
.toast.ducket  .toast-progress { background: var(--ducket-text); }

.shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 24px 56px;
    position: relative;
}
.stage {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shell .online-counter {
    align-self: auto;
    margin-bottom: 36px;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}
.wordmark {
    font-weight: 700;
    font-size: 56px;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
}

.login,
.signup {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.field-group {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.18s ease;
}
.field-group:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-group .field {
    gap: 0;
    position: relative;
}
.field-group .field + .field {
    border-top: 1px solid var(--line);
}
.field-group .field-input {
    background: transparent;
    border: 0;
    border-radius: 0;
    height: 54px;
    padding: 0 18px;
    font-weight: 500;
    box-shadow: none;
}
.field-group .field-input:focus {
    box-shadow: none;
    background: var(--surface-3);
}
.field-group .field-input:-webkit-autofill,
.field-group .field-input:-webkit-autofill:hover,
.field-group .field-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px var(--surface-2) inset;
}

.stage.stage-centered { text-align: center; }
.stage.stage-centered .field { text-align: left; }
.brand.brand-tight { margin-bottom: 28px; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px 9px 14px;
    background: var(--surface-2);
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    color: var(--fg-1);
    margin-bottom: 36px;
    transition: background 0.18s ease, color 0.18s ease;
}
.back-link:hover {
    color: var(--fg);
    background: var(--surface-3);
}
.back-link svg {
    width: 15px;
    height: 15px;
    transition: transform 0.18s ease;
}
.back-link:hover svg { transform: translateX(-3px); }

.headline {
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 10px;
}
.subline {
    font-size: 16px;
    color: var(--fg-2);
    margin: 0 0 36px;
    max-width: 360px;
}
.subline b { color: var(--fg-1); font-weight: 500; }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 16px;
    background: var(--accent-soft);
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    color: var(--accent-text);
    margin-bottom: 36px;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 204, 2, 0.2);
    animation: pulse-dot-accent 2s ease-in-out infinite;
}
@keyframes pulse-dot-accent {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 204, 2, 0.2); }
    50%      { box-shadow: 0 0 0 7px rgba(255, 204, 2, 0.05); }
}

.divider {
    width: 100%;
    height: 1px;
    background: var(--line);
    margin: 36px 0 28px;
}

.team-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-2);
    margin-bottom: 2px;
}
.team-eyebrow svg { width: 14px; height: 14px; }

.field-input-wrap {
    position: relative;
}
.field-aside {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 500;
    font-size: 14px;
    color: var(--fg-2);
    transition: color 0.15s ease;
    z-index: 2;
}
.field-aside:hover { color: var(--accent-text); }
.field-input.has-aside { padding-right: 110px; }

.register-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 0;
    text-align: center;
    font-size: 15px;
    color: var(--fg-2);
    transition: color 0.18s ease;
}
.register-btn b {
    color: var(--fg-1);
    font-weight: 500;
    transition: color 0.18s ease;
}
.register-btn:hover b { color: var(--accent); }

.index-banned-box {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 22px 24px;
    background: var(--red-soft);
    border: 1px solid rgba(217, 58, 43, 0.3);
    border-radius: var(--radius-lg);
}
.index-banned-box svg {
    width: 34px;
    height: 34px;
    color: var(--red);
    flex-shrink: 0;
}
.index-banned-title {
    font-weight: 700;
    font-size: 17px;
    color: var(--fg);
    margin-bottom: 2px;
}
.index-banned-text {
    font-size: 15px;
    color: var(--fg-1);
}

.site-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 16px;
    margin-top: 48px;
    background: var(--nav);
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--fg-2);
    text-align: center;
}
.foot-copy { margin: 0; }
.foot-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
}
.foot-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--fg-2);
    transition: color 0.18s ease;
}
.foot-links a:hover { color: var(--fg); }
.foot-links .foot-discord:hover { color: var(--discord); }
.foot-discord svg { width: 16px; height: 16px; }
.foot-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--fg-3);
}

.agb {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 4px;
    padding: 0 4px;
    cursor: pointer;
    user-select: none;
    text-align: left;
}
.agb input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.agb-box {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin-top: 1px;
}
.agb-box svg {
    width: 13px;
    height: 13px;
    color: var(--on-accent);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.agb input:checked + .agb-box {
    background: var(--accent);
    border-color: var(--accent);
}
.agb input:checked + .agb-box svg {
    opacity: 1;
    transform: scale(1);
}
.agb input:focus-visible + .agb-box {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}
.agb-text {
    font-size: 14px;
    color: var(--fg-2);
    line-height: 1.5;
}
.agb-text a {
    color: var(--fg-1);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}
.agb-text a:hover { color: var(--accent-text); }

.fab-checkin {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    height: 72px;
    background: var(--go);
    color: var(--on-go);
    border-radius: 999px;
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
    box-shadow: inset 0 2px 0 var(--go-top), inset 0 -4px 0 var(--go-bottom), 0 0 0 1px var(--outline), 0 14px 36px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fab-checkin:hover { transform: translateY(-3px); }
.fab-checkin:active { transform: translateY(-1px); }

.fab-label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    padding: 0;
    line-height: 1;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.fab-checkin:hover .fab-label,
.fab-checkin:focus-visible .fab-label {
    max-width: 220px;
    opacity: 1;
    padding: 0 6px 0 26px;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease 0.1s,
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.fab-icon img {
    width: 42px;
    height: 40px;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.fab-checkin:hover .fab-icon img { transform: translateX(3px); }

body.client-page {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
#nitro-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.client-button-container {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px;
    background: var(--nav);
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.client-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 12px;
    background: transparent;
    color: var(--fg-2);
    border-radius: 14px;
    font-weight: 500;
    font-size: 15px;
    transition: background 0.18s ease, color 0.18s ease;
}
.client-button:hover {
    color: var(--fg);
    background: var(--surface-3);
}
.client-button-online {
    cursor: default;
    padding: 0 16px;
    color: var(--fg-1);
}
.client-button-online:hover {
    color: var(--fg-1);
    background: transparent;
}
.client-button-online span {
    color: var(--green);
    font-weight: 700;
}

.conflict-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background: var(--bg);
}
.conflict-box {
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    padding: 44px 40px;
    text-align: center;
    max-width: 460px;
}
.conflict-box h2 {
    color: var(--fg);
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
}
.conflict-box p {
    color: var(--fg-2);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 28px;
}
.conflict-timer {
    color: var(--fg-2);
    font-size: 14px;
    margin-top: 20px;
}
.conflict-box .conflict-timer { margin: 20px 0 0; font-size: 14px; }

@media (max-width: 1100px) {
    .friends-wrap { --friends-per-page: 6; }
    .friend.empty:nth-child(n+7) { display: none; }
    :root { --rail: 48px; }
    .page { padding-left: 140px; }
    .hero { grid-template-columns: 224px 1fr; column-gap: 40px; }
    .avatar-frame { width: 224px; height: 224px; }
    .avatar-img { height: 300px; }
    .name { font-size: 60px; }
    .hero-actions { flex-wrap: wrap; }
    .cta { flex: 1 1 100%; }
    .plus-hero { grid-template-columns: 224px 1fr; column-gap: 40px; }
    .plus-visual { width: 224px; height: 224px; }
    .plus-title { font-size: 60px; }
    .news-layout { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; gap: 64px; }
    .voucher { grid-template-columns: 1fr; }
    .voucher-form { width: 100%; }
    .voucher-input { flex: 1; width: auto; }
}

@media (max-width: 720px) {
    .sidenav {
        top: auto;
        bottom: 16px;
        left: 16px;
        right: 16px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        padding: 8px;
        background: rgba(27, 27, 27, 0.96);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid var(--line);
        border-radius: 22px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    .sidenav::-webkit-scrollbar { display: none; }
    .brand-mark { display: none; }
    .nav-item {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        flex-shrink: 0;
    }
    .nav-item svg { width: 22px; height: 22px; }
    .sidenav-bottom {
        flex-direction: row;
        margin-top: 0;
        margin-left: 8px;
        gap: 4px;
        padding-left: 8px;
        padding-top: 0;
        flex-shrink: 0;
    }
    .sidenav-bottom::before {
        top: 12px;
        bottom: 12px;
        left: 0;
        right: auto;
        width: 1px;
        height: auto;
    }
    .nav-item.nav-logout svg { color: var(--red); }

    .page {
        padding: 36px 20px 48px;
        max-width: 100%;
    }
    .page + .site-foot { padding-bottom: 120px; margin-top: 24px; }
    .foot-sep { display: none; }

    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 22px;
        margin-bottom: 56px;
    }
    .hero .avatar-frame {
        width: 208px;
        height: 208px;
        margin: 48px auto 0;
    }
    .avatar-img { height: 288px; }
    .hero .hero-info {
        align-items: center;
        gap: 12px;
        width: 100%;
    }
    .hero .online-counter {
        position: static;
        align-self: center;
    }
    .greeting { font-size: 17px; margin-bottom: -4px; }
    .name { font-size: 46px; }
    .motto { font-size: 16px; }
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 360px;
        gap: 10px;
        margin: 8px auto 0;
    }
    .currencies {
        justify-content: center;
        gap: 10px;
        width: 100%;
    }
    .coin {
        flex: 1;
        justify-content: center;
        padding: 0 16px;
        font-size: 17px;
        min-width: 0;
    }
    .cta {
        flex: none;
        justify-content: center;
        padding: 0 20px;
    }

    .section { margin-bottom: 56px; }

    .friends-wrap { --friends-per-page: 4; --friends-gap: 14px; }
    .friend.empty:nth-child(n+5) { display: none; }
    .friend-circle img { height: 132px; }
    .friend-status {
        width: 20px;
        height: 20px;
        bottom: 2px;
        right: 2px;
        border-width: 3px;
    }
    .friend-name { font-size: 13px; }
    .slider-arrow { width: 40px; height: 40px; }
    .slider-arrow.prev { left: -8px; }
    .slider-arrow.next { right: -8px; }

    .news {
        grid-template-columns: 1fr;
        grid-auto-rows: 180px;
        gap: 12px;
    }
    .news-item { padding: 20px; }
    .news-title { font-size: 20px; }

    .page-header {
        margin-bottom: 32px;
        flex-direction: column;
        align-items: flex-start;
    }
    .page-title { font-size: 34px; }

    .plus-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 22px;
        margin-bottom: 56px;
    }
    .plus-visual { width: 208px; height: 208px; }
    .plus-badge {
        width: 76px;
        height: 76px;
        bottom: -4px;
        right: -4px;
        border-width: 5px;
    }
    .plus-content { align-items: center; }
    .plus-title { font-size: 48px; }
    .plus-desc { font-size: 16px; }
    .plus-perks { justify-content: center; }
    .plus-cta-row {
        justify-content: center;
        width: 100%;
    }
    .plus-cta {
        flex: 1;
        justify-content: center;
    }
    .plus-active { align-self: center; }
    .section-head { flex-direction: column; align-items: flex-start; }

    .voucher {
        gap: 18px;
        padding: 22px;
        margin-bottom: 56px;
    }
    .voucher-info { gap: 14px; align-items: flex-start; }
    .voucher-icon { width: 46px; height: 46px; border-radius: 14px; }
    .voucher-text h3 { font-size: 17px; }
    .voucher-text p { font-size: 14px; line-height: 1.45; }
    .voucher-form {
        flex-direction: column;
        align-items: stretch;
    }
    .voucher-input {
        width: 100%;
        flex: none;
        text-align: center;
        letter-spacing: 0.12em;
    }
    .voucher-submit { width: 100%; }

    .badges { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .badge { padding: 22px 12px 18px; }
    .badge-art { width: 80px; height: 80px; }
    .badge-name { font-size: 15px; }
    .badges-section { margin-bottom: 56px; }

    .news-layout { gap: 24px; }
    .featured {
        padding: 26px 24px;
        border-radius: 22px;
    }
    .featured-title {
        font-size: 30px;
        margin-bottom: 18px;
    }
    .featured-byline {
        padding-bottom: 20px;
        margin-bottom: 22px;
    }
    .author-avatar { width: 42px; height: 42px; }
    .featured-body { font-size: 16px; }

    .rank-section { margin-bottom: 56px; }
    .rank-head { gap: 14px; margin-bottom: 22px; }
    .rank-badge {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }
    .rank-head .rank-name { font-size: 24px; }
    .staff { grid-template-columns: 1fr; gap: 10px; }
    .staff-card { padding: 16px 18px 16px 16px; gap: 16px; }
    .staff-avatar { width: 96px; height: 96px; }
    .staff-circle img { height: 132px; }
    .staff-status { width: 20px; height: 20px; bottom: 2px; right: 2px; border-width: 3px; }
    .staff-name { font-size: 18px; }
    .staff-motto { font-size: 14px; }

    .filter-tabs { width: 100%; }
    .filter-tab { flex: 1; justify-content: center; padding: 11px 12px; }

    .podium { gap: 8px; }
    .podium-avatar { width: 90px; height: 90px; }
    .podium-name { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .podium-info { max-width: 100%; }
    .podium-value { font-size: 15px; gap: 6px; }
    .podium-value .val-icon { display: none; }
    .podium-step { font-size: 38px; }
    .podium-spot.gold .podium-step   { height: 108px; }
    .podium-spot.silver .podium-step { height: 78px; }
    .podium-spot.bronze .podium-step { height: 56px; }

    .rank-row {
        grid-template-columns: 30px 48px 1fr auto;
        gap: 12px;
        padding: 10px 16px 10px 12px;
        border-radius: 18px;
    }
    .rank-number { font-size: 16px; }
    .rank-avatar { width: 48px; height: 48px; }
    .rank-row .rank-name { font-size: 16px; }
    .rank-value { font-size: 15px; gap: 6px; }

    .self-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }

    .form-grid { grid-template-columns: 1fr; gap: 14px; }
    .block-footer { justify-content: stretch; }
    .save-btn { width: 100%; min-height: 56px; }

    .toast-stack {
        top: auto;
        bottom: 96px;
        left: 16px;
        right: 16px;
        max-width: 100%;
        width: auto;
    }
    @keyframes toast-in {
        from { transform: translateY(120%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }
    @keyframes toast-out {
        from { transform: translateY(0);    opacity: 1; }
        to   { transform: translateY(120%); opacity: 0; }
    }

    .shell { padding: 52px 20px 48px; }
    .shell .online-counter { margin-bottom: 28px; }
    .brand { margin-bottom: 32px; }
    .brand.brand-tight { margin-bottom: 24px; }
    .wordmark { font-size: 46px; }
    .stage { max-width: 100%; }
    .back-link { margin-bottom: 28px; }
    .headline { font-size: 24px; }
    .subline { margin-bottom: 28px; font-size: 15px; }
    .status-pill { margin-bottom: 28px; }
    .divider { margin: 28px 0 24px; }

    .fab-checkin {
        bottom: 96px;
        right: 20px;
        height: 64px;
    }
    .fab-icon { width: 64px; height: 64px; }

    .conflict-box { padding: 32px 24px; }
}

@media (max-width: 420px) {
    .friends-wrap { --friends-per-page: 3; }
    .friend.empty:nth-child(n+4) { display: none; }
    .name { font-size: 40px; }
    .nav-item { width: 40px; height: 40px; }
    .nav-item svg { width: 20px; height: 20px; }
    .coin { font-size: 16px; padding: 0 14px; gap: 8px; }
}

@media (hover: hover) and (min-width: 721px) {
    .nav-item {
        position: relative;
        --tip-bg: var(--surface-3);
        --tip-top: rgba(255, 255, 255, 0.08);
        --tip-bottom: rgba(0, 0, 0, 0.35);
        --tip-fg: var(--fg);
    }
    .nav-item.nav-logout  { --tip-bg: var(--red);     --tip-top: #f0705f; --tip-bottom: #9e2418; }
    .nav-item.nav-discord { --tip-bg: var(--discord); --tip-top: #7f8cff; --tip-bottom: #3a43b8; }
    .nav-item.nav-admin   { --tip-bg: var(--accent);  --tip-top: var(--accent-top); --tip-bottom: var(--accent-bottom); --tip-fg: var(--on-accent); }
    .nav-item::after {
        content: attr(aria-label);
        position: absolute; left: calc(100% + 14px); top: 50%;
        transform: translate(-4px, -50%);
        padding: 7px 12px 9px; border-radius: 10px;
        background: var(--tip-bg); color: var(--tip-fg);
        font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
        box-shadow: inset 0 2px 0 var(--tip-top), inset 0 -3px 0 var(--tip-bottom), 0 0 0 1px var(--outline), 0 6px 16px rgba(0, 0, 0, 0.45);
        opacity: 0; visibility: hidden; pointer-events: none; z-index: 61;
        transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
    }
    .nav-item::before {
        content: "";
        position: absolute; left: calc(100% + 9px); top: 50%;
        width: 10px; height: 10px; border-radius: 2px;
        background: var(--tip-bg); box-shadow: 0 0 0 1px var(--outline);
        transform: translate(-4px, -50%) rotate(45deg);
        opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
        transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
    }
    .nav-item:hover::after, .nav-item:focus-visible::after {
        opacity: 1; visibility: visible; transform: translate(0, -50%);
    }
    .nav-item:hover::before, .nav-item:focus-visible::before {
        opacity: 1; visibility: visible; transform: translate(0, -50%) rotate(45deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .nav-item::after, .nav-item::before { transition: none; }
}

@media (max-width: 720px) {
    .sidenav { gap: 2px; justify-content: space-between; }
    .sidenav-bottom { display: contents; }
    .sidenav-bottom::before {
        position: static;
        flex: 0 0 1px;
        width: 1px;
        height: 26px;
        margin: 0 4px;
        align-self: center;
    }
    .sidenav .nav-item { flex: 1 1 0; width: auto; min-width: 38px; max-width: 46px; }
}
@media (max-width: 420px) {
    .sidenav { left: 8px; right: 8px; padding: 6px; gap: 0; }
    .sidenav-bottom::before { margin: 0 2px; }
    .sidenav .nav-item { min-width: 36px; height: 44px; }
}
@media (max-width: 359px) {
    .sidenav .nav-item { min-width: 28px; }
    .sidenav .nav-icon { width: 18px; height: 18px; }
}

/* ── Navigation: inaktive Icons grau, aktives (und Maus-Hover am PC) farbig ── */
.nav-item .nav-icon {
    filter: grayscale(1) brightness(1.25) contrast(0.9);
    opacity: 0.7;
    transition: filter 0.15s ease, opacity 0.15s ease;
}
.nav-item.active .nav-icon,
.nav-item:focus-visible .nav-icon {
    filter: none;
    opacity: 1;
}
@media (hover: hover) {
    .nav-item:hover .nav-icon { filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-item .nav-icon { transition: none; }
}

/* ── Tooltip aktive Seite gelb, Administration sonst grau ── */
@media (hover: hover) and (min-width: 721px) {
    .nav-item.nav-admin {
        --tip-bg: var(--surface-3);
        --tip-top: rgba(255, 255, 255, 0.08);
        --tip-bottom: rgba(0, 0, 0, 0.35);
        --tip-fg: var(--fg);
    }
    .nav-item.active {
        --tip-bg: var(--accent);
        --tip-top: var(--accent-top);
        --tip-bottom: var(--accent-bottom);
        --tip-fg: var(--on-accent);
    }
}

/* ── Hably Grafiken: Nav-Icon, Logo, Footer ── */
.brand-mark img { display: block; width: 52px; height: 52px; }
.wordmark { display: flex; justify-content: center; }
.wordmark picture { display: block; }
.wordmark img { display: block; max-width: 100%; height: auto; }

.site-foot {
    align-items: stretch;
    padding: 22px 16px;
    text-align: left;
}
.foot-inner {
    width: 100%;
    max-width: calc(var(--content) + var(--rail) * 2);
    margin: 0 auto;
    padding: 0 var(--rail);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
}
.foot-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.foot-mark { flex-shrink: 0; display: block; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.foot-mark:hover { transform: rotate(-8deg); }
.foot-mark img { display: block; width: 36px; height: 36px; }
.foot-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.foot-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--fg); }
.site-foot .foot-copy { margin: 0; font-size: 13px; color: var(--fg-2); }
.site-foot .foot-links { flex-shrink: 0; justify-content: flex-end; gap: 8px 22px; }

/* Platz für den Einchecken-Knopf rechts unten */
@media (max-width: 1100px) {
    .page + .site-foot .foot-inner { padding-left: 140px; padding-right: 140px; flex-direction: column; align-items: flex-start; }
    .page + .site-foot .foot-links { justify-content: flex-start; }
}
@media (max-width: 860px) {
    .foot-inner { flex-direction: column; align-items: flex-start; }
    .site-foot .foot-links { justify-content: flex-start; }
}
@media (max-width: 720px) {
    .site-foot { text-align: center; }
    .foot-inner,
    .page + .site-foot .foot-inner { align-items: center; padding: 0 4px; gap: 16px; }
    .foot-brand { flex-direction: column; gap: 10px; }
    .foot-text { align-items: center; }
    .site-foot .foot-links { justify-content: center; gap: 8px 18px; }
    .page + .site-foot { padding-bottom: 184px; }
}

/* ── Online-Anzeige: rot, wenn das Hotel offline ist ── */
.online-counter.is-offline b { color: var(--red); }
.online-counter.is-offline .online-dot {
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(217, 58, 43, 0.2);
    animation: none;
}