/* Community portal: original layout and motion system, using the existing theme palettes. */
:root {
    --radius: 8px;
    --radius-sm: 5px;
    --sidebar-w: 340px;
    --sidebar-max: 380px;
    --tr: .2s cubic-bezier(.2, .7, .3, 1);
    --portal-width: none;
    --portal-gutter: clamp(18px, 3.2vw, 56px);
    --portal-header-h: 88px;
    --theme-tr: 0s;
}

[data-mode="dark"] {
    color-scheme: dark;
    --portal-shadow: 0 14px 60px rgba(0, 0, 0, .22);
    --portal-modal-shadow: 0 30px 100px rgba(0, 0, 0, .55);
    --portal-accent: color-mix(in srgb, var(--accent) 65%, white);
    --portal-action: color-mix(in srgb, var(--accent) 65%, white);
    --portal-action-text: #101827;
    --green: #68dca8;
    --orange: #f7b778;
    --yellow: #f2d478;
    --red: #ff8d9b;
    --purple: #bea9fc;
    --blue: #94bdff;
}

[data-mode="light"] {
    color-scheme: light;
    --portal-shadow: 0 14px 50px rgba(20, 32, 54, .065);
    --portal-modal-shadow: 0 30px 100px rgba(20, 32, 54, .2);
    --portal-accent: color-mix(in srgb, var(--accent) 40%, #0b1320);
    --portal-action: color-mix(in srgb, var(--accent) 40%, #0b1320);
    --portal-action-text: white;
    --green: #167747;
    --orange: #a25519;
    --yellow: #896700;
    --red: #b93446;
    --purple: #7350b5;
    --blue: #2862bc;
}

html[data-theme] {
    --portal-line: color-mix(in srgb, var(--border) 82%, var(--text));
    --portal-soft-line: color-mix(in srgb, var(--border) 72%, transparent);
    --portal-muted: color-mix(in srgb, var(--text) 72%, var(--bg));
    --portal-subtle: color-mix(in srgb, var(--text) 64%, var(--bg));
    --portal-tint: color-mix(in srgb, var(--accent) 7%, var(--card));
    --portal-display: "Rajdhani", "Inter", "Segoe UI", system-ui, sans-serif;
}

[data-theme="default"][data-mode="dark"] {
    --bg: #0c1016;
    --bg-2: #121923;
    --bg-3: #202a37;
    --card: #151e2a;
    --border: #2a3748;
    --text: #ecf2fa;
    --text-dim: #a9b9cd;
    --text-mut: #8093ab;
}

[data-theme="default"][data-mode="light"] {
    --bg: #ccd3d9;
    --bg-2: #dce2e7;
    --bg-3: #c2cdd5;
    --card: #d5dde3;
    --border: #929fa9;
    --text: #1e2b35;
    --text-dim: #344652;
    --text-mut: #425360;
}

html, body {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body { background: var(--bg); }
button, input, select, textarea { font: inherit; }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.1; }
::selection { background: var(--portal-action); color: var(--portal-action-text); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--portal-accent);
    outline-offset: 4px;
}

html[data-theme] .theme-fx { opacity: var(--theme-fx-opacity, .22); }
html[data-theme="terminal-green"] { --portal-display: "IBM Plex Mono", Consolas, monospace; }
html[data-theme="terminal-green"] .portal-brand strong::after { content: "_"; animation: terminalCursor 1.1s steps(1) infinite; }
html[data-theme="terminal-green"] .card-title::before { content: "> "; color: var(--portal-accent); }
html[data-theme] .portal-app { display: block; min-height: 100dvh; }
html[data-theme] .main { min-height: 100dvh; width: 100%; overflow: visible; padding-top: var(--portal-header-h); }

html[data-theme][data-mode] .portal-header {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 36px);
    min-height: var(--portal-header-h);
    height: var(--portal-header-h);
    padding: 14px var(--portal-gutter);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    border-bottom: 1px solid var(--portal-line);
    background: var(--bg-2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
    box-shadow: none;
}

.topbar-heading { flex: 0 1 auto; min-width: 0; }
.portal-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--text);
}
.portal-brand img { width: 42px; height: 42px; flex: none; object-fit: contain; }
.portal-brand span { min-width: 0; }
.portal-brand strong {
    display: block;
    font-family: var(--portal-display);
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-brand small {
    display: block;
    margin-top: 6px;
    color: var(--portal-subtle);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.portal-primary { display: flex; align-items: center; align-self: stretch; gap: 26px; }
.portal-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 0;
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .065em;
    white-space: nowrap;
}
.portal-nav-link::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--portal-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
}
.portal-nav-link:hover, .portal-nav-link.active { color: var(--text); }
.portal-nav-link:hover::after, .portal-nav-link.active::after { transform: scaleX(1); }
html[data-theme] .topbar-actions { margin-left: auto; gap: 12px; flex: none; }
html[data-theme] .topbar-actions > * { animation: none; }
html[data-theme] .topbar-clock {
    background: none;
    border: 0;
    border-left: 1px solid var(--portal-line);
    border-radius: 0;
    padding: 0 0 0 15px;
    min-width: 60px;
    gap: 4px;
}
html[data-theme] .clock-date { color: var(--portal-subtle); font-size: 9px; }
html[data-theme] .clock-time { font-family: var(--portal-display); font-size: 15px; }
html[data-theme] .user-chip {
    background: transparent;
    border: 1px solid var(--portal-line);
    border-radius: 5px;
    padding: 6px 7px 6px 12px;
    gap: 12px;
}
html[data-theme] .user-chip img { border-radius: 3px; width: 32px; height: 32px; }
html[data-theme] .user-chip .role { color: var(--portal-subtle); font-size: 10px; }
html[data-theme] .topbar-links { gap: 6px; }
html[data-theme] .topbar-link {
    border-radius: 5px;
    padding: 9px;
    min-height: 38px;
    background: none;
    border-color: var(--portal-line);
}
html[data-theme] .topbar-link span { display: none; }
html[data-theme][data-mode] .portal-menu.menu-toggle { display: inline-flex !important; gap: 9px; }

html[data-theme][data-mode] .portal-drawer {
    position: fixed;
    left: 18px;
    top: calc(var(--portal-header-h) + 18px);
    bottom: 18px;
    height: auto;
    max-height: none;
    width: var(--sidebar-w);
    padding: 24px 17px;
    display: flex;
    gap: 3px;
    border: 1px solid var(--portal-line);
    border-radius: 8px;
    background: var(--bg-2);
    z-index: 95;
    box-shadow: var(--portal-modal-shadow);
    transform: translateX(calc(-100% - 36px));
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), width var(--sidebar-tr);
}
html[data-theme][data-mode] .portal-drawer.open { transform: translateX(0); }
html[data-theme] .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(4, 10, 18, .58);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
html[data-theme] .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
.portal-drawer-open { overflow: hidden; }
html[data-theme] .brand { animation: none; margin-bottom: 12px; padding: 0 4px 19px; border-bottom-color: var(--portal-line); }
html[data-theme] .brand img { animation: none; width: 40px; height: 40px; border-radius: 4px; }
html[data-theme] .brand:hover img { transform: none; }
html[data-theme] .brand .name { font-family: var(--portal-display); letter-spacing: .025em; }
.brand-caption { margin-top: 3px; color: var(--portal-subtle); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.drawer-caption { padding: 0 12px 9px; color: var(--portal-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
html[data-theme] .nav-section { margin-top: 13px; }
html[data-theme] .nav-label { animation: none; color: var(--portal-subtle); font-size: 10px; font-weight: 650; letter-spacing: .1em; }
html[data-theme][data-mode] .nav-item {
    min-height: 41px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    color: var(--portal-muted);
    animation: none;
}
html[data-theme] .nav-item svg { width: 17px; height: 17px; stroke-width: 1.7; }
html[data-theme][data-mode] .nav-item:hover {
    background: var(--portal-tint);
    color: var(--text);
    border-color: var(--portal-soft-line);
}
html[data-theme][data-mode] .nav-item.active {
    background: var(--portal-tint);
    color: var(--text);
    box-shadow: inset 3px 0 var(--portal-accent);
    border-color: var(--portal-line);
}
html[data-theme] .nav-item.active svg { color: var(--portal-accent); }
html[data-theme] .nav-item:hover svg { transform: none; }

.portal-page-heading {
    width: 100%;
    max-width: var(--portal-width);
    margin: 0 auto;
    padding: 46px var(--portal-gutter) 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.portal-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--portal-muted);
    font: 600 10px/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.portal-page-heading h1 {
    margin-top: 10px;
    font-family: var(--portal-display);
    font-size: clamp(32px, 4.3vw, 64px);
    font-weight: 700;
    line-height: 1;
    overflow-wrap: anywhere;
}
.portal-page-stamp {
    flex: none;
    font-family: var(--portal-display);
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, var(--text) 12%, transparent);
    letter-spacing: -.06em;
}
.portal-page-stamp span { color: color-mix(in srgb, var(--accent) 25%, transparent); }
html[data-theme] .content {
    width: 100%;
    max-width: var(--portal-width);
    margin: 0 auto;
    padding: 0 var(--portal-gutter) 76px;
}
html[data-theme] .portal-home .content { padding-top: 38px; }
html[data-theme] .page-enter > * { animation: none; }
html[data-theme] .grid { gap: 24px; }

html[data-theme][data-mode] :is(.card, .contest-card, .store-card, .skins-main, .skins-sidebar) {
    background: var(--card);
    border: 1px solid var(--portal-line);
    border-radius: 8px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
}
html[data-theme] .card { padding: 26px; }
html[data-theme] .content > .card + .card { margin-top: 20px; }
html[data-theme][data-mode] :is(.card, .contest-card, .store-card, .server-card, .pkg-group, .err-entry):hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--portal-line));
    box-shadow: none;
    transform: none;
}
html[data-theme] .card-title {
    color: var(--text);
    font-family: var(--portal-display);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 21px;
    width: auto;
    text-transform: uppercase;
    letter-spacing: .015em;
}
html[data-theme] .card-title::after { content: none; }
html[data-theme] .muted, html[data-theme] .hint { color: var(--portal-muted); text-shadow: none; font-weight: 400; }
html[data-theme] .mono { color: var(--portal-muted); font-size: 12px; }

html[data-theme] .toolbar {
    padding: 17px 20px;
    margin-bottom: 24px;
    border: 1px solid var(--portal-line);
    border-left: 3px solid var(--portal-accent);
    border-radius: 4px;
    background: var(--bg-2);
    gap: 14px;
}
html[data-theme] .toolbar form { align-items: center; }
html[data-theme][data-mode] .table-wrap {
    border: 1px solid var(--portal-line);
    border-radius: 6px;
    background: var(--card);
    box-shadow: none;
}
html[data-theme] .card .table-wrap { border-color: var(--portal-soft-line); }
html[data-theme] table { background: var(--card); font-size: 13px; }
html[data-theme] thead { background: var(--bg-2); }
html[data-theme] thead th {
    padding: 17px 20px;
    color: var(--portal-muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .1em;
    border-bottom-color: var(--portal-line);
}
html[data-theme] tbody td { padding: 18px 20px; border-bottom-color: var(--portal-soft-line); }
html[data-theme] .table-wrap tbody tr { animation: none; }
.live-search-feedback { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; color: var(--text-dim); font-size: 12px; }
.live-search-feedback[hidden] { display: none; }
.live-search-feedback[data-state="error"] { color: var(--red); }
.live-search-results { scroll-margin-top: calc(var(--portal-header-h) + 16px); }
.live-search-results[inert] { opacity: .65; }
.credits-overview { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.credits-overview > .btn { margin-left: auto; flex: none; }
.bulk-select-cell { width: 46px; text-align: center; }
.bulk-select-cell input { width: 17px; height: 17px; accent-color: var(--portal-accent); cursor: pointer; }
html[data-theme][data-mode] .table-wrap tbody tr.bulk-row-selected,
html[data-theme][data-mode] .table-wrap tbody tr.bulk-row-selected > td {
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
}
.bulk-selection-heading { margin: 0 0 10px; color: var(--text); }
.bulk-selection-list { max-height: 150px; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 10px 30px; margin: 0 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); }
.bulk-selection-list li { overflow-wrap: anywhere; padding: 3px 0; color: var(--text-dim); font-size: 12px; }
.bulk-edit-field { padding: 14px; margin: 12px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); }
.bulk-edit-field > .inline-check { margin-bottom: 10px; color: var(--text); }
.bulk-edit-field .hint { margin: 8px 0 0; }
.bulk-edit-confirm { margin-top: 18px; align-items: flex-start; }
.bulk-form-error { margin: 12px 0 0; color: var(--red); }
.chat-log-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; align-items: end; }
.chat-log-filters .field { min-width: 0; margin: 0; }
.chat-log-filter-actions { display: flex; gap: 10px; flex-wrap: wrap; grid-column: 1 / -1; }
.chat-log-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0 12px; }
.chat-log-summary .hint { margin: 0; }
html[data-theme] .chat-log-results { padding: 0; overflow: hidden; }
.chat-log-results .table-wrap { border: 0; }
.chat-log-table { table-layout: fixed; min-width: 900px; }
.chat-log-table th:nth-child(1) { width: 16%; }
.chat-log-table th:nth-child(2) { width: 21%; }
.chat-log-table th:nth-child(3) { width: 17%; }
.chat-log-table th:nth-child(4) { width: 15%; }
.chat-log-table td { overflow-wrap: anywhere; }
.chat-log-player a, .chat-log-player strong { font-weight: 650; }
.chat-log-player .mono, .chat-log-source > span { display: block; margin-top: 5px; }
.chat-log-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-log-text { max-height: 200px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; overscroll-behavior: contain; }
html[data-theme] tbody tr:hover { background: var(--portal-tint); }
html[data-theme] .player-cell { gap: 12px; }
html[data-theme] .player-avatar { width: 34px; height: 34px; border-radius: 4px; border: 1px solid var(--portal-line); }
html[data-theme] .player-cell:hover .player-avatar { transform: rotate(-3deg) scale(1.08); box-shadow: none; }
html[data-theme] .badge {
    border-radius: 3px;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 650;
    animation: none;
}
html[data-theme] .badge-perm, html[data-theme] .badge-role-root { color: var(--portal-accent); background: var(--portal-tint); }
html[data-theme] .badge-warn { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, var(--card)); }
html[data-theme] :is(.badge, .tag, .cc-chip, .store-type):hover { transform: none; filter: none; }
html[data-theme] .tag, html[data-theme] .cc-chip { border-radius: 3px; color: var(--portal-muted); }

html[data-theme][data-mode] .btn {
    min-height: 43px;
    padding: 11px 18px;
    gap: 9px;
    background: var(--bg-2);
    border: 1px solid var(--portal-line);
    border-radius: 4px;
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
    box-shadow: none;
    filter: none;
    transition: transform .25s var(--ease), background var(--tr), border-color var(--tr), box-shadow var(--tr);
}
html[data-theme][data-mode] .btn:hover { transform: translateY(-2px); border-color: var(--portal-accent); background: var(--portal-tint); color: var(--text); filter: none; }
html[data-theme][data-mode] .btn:active { transform: translateY(0) scale(.98); }
html[data-theme][data-mode] .btn-primary { background: var(--portal-action); color: var(--portal-action-text); border-color: transparent; }
html[data-theme][data-mode] .btn-primary:hover { background: var(--portal-action); color: var(--portal-action-text); border-color: transparent; box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 24%, transparent); }
html[data-theme][data-mode] .btn-danger { color: var(--red); background: color-mix(in srgb, var(--red) 7%, var(--card)); border-color: color-mix(in srgb, var(--red) 30%, var(--border)); }
html[data-theme][data-mode] .btn-danger:hover { color: var(--red); border-color: var(--red); }
html[data-theme][data-mode] .btn-ghost { background: transparent; }
html[data-theme][data-mode] .btn-sm { min-height: 34px; padding: 7px 11px; font-size: 11px; }
html[data-theme][data-mode] .btn-icon { width: 41px; min-height: 41px; padding: 10px; flex: none; }
html[data-theme] .btn::after { content: none; }
html[data-theme] .btn:hover svg { transform: none; }
html[data-theme][data-mode] .btn:disabled, html[data-theme][data-mode] .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .5; transform: none; box-shadow: none; }

html[data-theme] .field { gap: 8px; margin-bottom: 20px; min-width: 0; }
html[data-theme] .field label { font-size: 11px; font-weight: 600; letter-spacing: .025em; color: var(--portal-muted); }
html[data-theme] .field:focus-within label { transform: none; color: var(--portal-accent); }
html[data-theme] input:is([type="text"], [type="number"], [type="password"], [type="url"], [type="file"], [type="email"], [type="search"], [type="date"], [type="time"], [type="datetime-local"]),
html[data-theme] select, html[data-theme] textarea {
    min-height: 45px;
    padding: 12px 14px;
    border: 1px solid var(--portal-line);
    border-radius: 4px;
    background: var(--bg-2);
    color: var(--text);
    font-size: 13px;
}
html[data-theme] textarea { resize: vertical; line-height: 1.7; }
html[data-theme] input::placeholder, html[data-theme] textarea::placeholder { color: var(--portal-subtle); opacity: .85; }
html[data-theme] input:focus, html[data-theme] select:focus, html[data-theme] textarea:focus { transform: none; border-color: var(--portal-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
html[data-theme] .form-row { gap: 20px; }
html[data-theme] .section-title { font-family: var(--portal-display); font-size: 20px; margin: 28px 0 18px; padding-bottom: 12px; border-bottom-color: var(--portal-line); }
html[data-theme] input::-webkit-calendar-picker-indicator, html[data-theme] input::-webkit-inner-spin-button, html[data-theme] input::-webkit-outer-spin-button { filter: none; }
html[data-theme] .file-btn { background: var(--bg-2); border-color: var(--portal-line); border-radius: 4px; min-height: 43px; }
html[data-theme] .file-name { color: var(--portal-muted); }
html[data-theme] .req, html[data-theme] .flag-group-title { color: var(--portal-accent); }

html[data-theme] .dropdown-menu { background: var(--bg-2); border-color: var(--portal-line); border-radius: 6px; padding: 7px; box-shadow: var(--portal-modal-shadow); }
html[data-theme] #user-dd .dropdown-menu { min-width: 170px; }
html[data-theme] .dropdown-item { min-height: 39px; font-size: 12px; color: var(--portal-muted); border-radius: 3px; }
html[data-theme] .dropdown-item:hover { background: var(--portal-tint); color: var(--text); }
html[data-theme] .modal-overlay { z-index: 160; background: rgba(3, 9, 17, .7); backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); padding: 24px; }
html[data-theme][data-mode] .modal {
    background: var(--bg-2);
    border: 1px solid var(--portal-line);
    border-top: 3px solid var(--portal-accent);
    border-radius: 7px;
    max-height: calc(100dvh - 48px);
    box-shadow: var(--portal-modal-shadow);
    animation: portalModal .35s cubic-bezier(.2, .8, .2, 1) both !important;
}
html[data-theme] .modal-head { padding: 24px 26px; border-bottom-color: var(--portal-line); gap: 15px; }
html[data-theme] .modal-head h3 { font-family: var(--portal-display); font-size: 25px; text-transform: uppercase; }
html[data-theme] .modal-body { padding: 26px; }
html[data-theme] .modal-foot { padding: 19px 26px; border-top-color: var(--portal-line); background: var(--portal-tint); gap: 10px; }
html[data-theme] .modal-head .modal-close { width: 32px; height: 32px; border: 1px solid var(--portal-line); border-radius: 3px; display: grid; place-items: center; background: var(--card); color: var(--portal-muted); }
html[data-theme] .profile-avatar { border-radius: 6px; }
html[data-theme] .profile-modal .modal-foot { background: transparent; box-shadow: none; padding: 12px 0 0; border: 0; }
html[data-theme] .flash { border-radius: 4px; font-size: 13px; padding: 15px 18px; }
html[data-theme] .empty { padding: 48px 20px; color: var(--portal-muted); font-size: 12px; text-shadow: none; font-weight: 400; }
html[data-theme] .empty::before {
    content: "";
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 18px;
    background: var(--portal-subtle);
    opacity: .6;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25'%3E%3Cpath d='M4 4h16v16H4zM4 14h5l2 3h2l2-3h5M8 8h8M8 11h5'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25'%3E%3Cpath d='M4 4h16v16H4zM4 14h5l2 3h2l2-3h5M8 8h8M8 11h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-theme] .pagination { gap: 7px; margin-top: 24px; }
html[data-theme] .pagination :is(a, span) { min-height: 36px; min-width: 36px; display: grid; place-items: center; border-color: var(--portal-line); border-radius: 3px; font-size: 12px; }
html[data-theme] .pagination .current { background: var(--portal-action); border-color: transparent; color: var(--portal-action-text); }
html[data-theme] .pagination a:hover { background: var(--portal-tint); transform: translateY(-2px); box-shadow: none; }

html[data-theme] .tabs, html[data-theme] .subtabs {
    padding: 5px;
    gap: 4px;
    background: var(--bg-2);
    border-color: var(--portal-line);
    border-radius: 4px;
}
html[data-theme] .tabs [data-tab], html[data-theme] .subtab { min-height: 39px; padding: 9px 14px; color: var(--portal-muted); border-radius: 3px; font-size: 12px; font-weight: 550; }
html[data-theme] .tabs [data-tab].active, html[data-theme] .subtab.active { color: var(--portal-accent); background: var(--portal-tint); box-shadow: inset 0 -2px var(--portal-accent); animation: none; }
html[data-theme] .settings-tabgroups { gap: 15px 28px; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--portal-line); }
html[data-theme] .settings-tabgroup-label { font-size: 9px; color: var(--portal-subtle); letter-spacing: .12em; }
html[data-theme] .settings-tabgroups .tabs [data-tab] { min-height: 36px; font-size: 11px; padding: 8px 12px; }

.portal-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    align-items: center;
    gap: 32px;
    min-height: 520px;
    padding: 52px 48px 76px;
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 9px;
    background: var(--bg-2);
    isolation: isolate;
    --portal-x: 50%;
    --portal-y: 50%;
}
.portal-hero-art {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../img/panel-loadout.svg") 70% center / cover no-repeat;
    opacity: .54;
    animation: portalArena 22s ease-in-out infinite alternate;
    will-change: transform;
}
.portal-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--bg-2) 0%, color-mix(in srgb, var(--bg-2) 88%, transparent) 38%, color-mix(in srgb, var(--bg-2) 20%, transparent) 72%);
}
.portal-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--portal-x) var(--portal-y), color-mix(in srgb, var(--accent) 10%, transparent), transparent 75%);
}
.portal-hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .32;
    background-image: linear-gradient(var(--portal-soft-line) 1px, transparent 1px), linear-gradient(90deg, var(--portal-soft-line) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(90deg, transparent, #000 55%, transparent);
}
.portal-hero-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 15%, transparent), transparent);
    height: 18%;
    animation: portalScan 9s linear infinite;
}
.portal-hero-copy { position: relative; min-width: 0; z-index: 1; max-width: 710px; }
.portal-hero-copy h1 {
    margin: 25px 0 12px;
    color: var(--text);
    font-family: var(--portal-display);
    font-size: clamp(58px, 7.5vw, 116px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.055em;
    line-height: .92;
    white-space: nowrap;
    overflow-wrap: normal;
}
.portal-hero-lead { color: var(--portal-accent); font-family: var(--portal-display); font-weight: 650; font-size: clamp(22px, 2.8vw, 39px); line-height: 1.1; max-width: 520px; }
.portal-hero-description { color: var(--portal-muted); max-width: 440px; margin: 22px 0 30px; font-size: 13px; line-height: 1.8; }
.portal-signal { width: 7px; height: 7px; background: var(--portal-accent); flex: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent); animation: portalSignal 3s ease-in-out infinite; }
.portal-hero-actions { display: flex; align-items: center; gap: 27px; flex-wrap: wrap; }
html[data-theme][data-mode] .portal-cta { min-height: 52px; min-width: 215px; justify-content: space-between; padding: 15px 20px; border-radius: 2px; }
.portal-cta span { margin-left: 18px; font-size: 22px; line-height: 1; transition: transform .25s; }
.portal-cta:hover span { transform: translateX(5px); }
.portal-text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 17px; color: var(--portal-accent); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; }
.portal-text-link span { font-size: 19px; transition: transform .25s; }
.portal-text-link:hover span { transform: translate(3px, -2px); }
.portal-hero-note {
    position: relative;
    z-index: 1;
    padding: 27px;
    align-self: center;
    border: 1px solid var(--portal-line);
    border-top: 3px solid var(--portal-accent);
    background: color-mix(in srgb, var(--card) 94%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--portal-shadow);
    border-radius: 6px;
    animation: portalFloat 7s ease-in-out infinite;
}
.portal-network-number { display: flex; align-items: flex-end; gap: 15px; margin: 25px 0; }
.portal-network-number strong { font-family: var(--portal-display); font-size: 72px; font-weight: 700; line-height: .9; color: var(--text); }
.portal-network-number span { color: var(--portal-muted); font-size: 11px; margin-bottom: 4px; }
.portal-hero-note p { margin: 20px 0 24px; color: var(--portal-muted); font-size: 12px; }
.portal-hero-note .portal-text-link { width: 100%; border-top: 1px solid var(--portal-line); padding-top: 18px; }
.portal-network-lines { height: 32px; display: flex; align-items: flex-end; gap: 6px; }
.portal-network-lines i { flex: 1; height: 45%; background: var(--portal-accent); opacity: .35; animation: portalEqualizer 2.4s ease-in-out infinite alternate; }
.portal-network-lines i:nth-child(2n) { height: 80%; animation-delay: -.6s; }
.portal-network-lines i:nth-child(3n) { height: 60%; animation-delay: -1.3s; }
.portal-network-lines i:nth-child(5n) { height: 95%; animation-delay: -.9s; }
.portal-hero-footer { position: absolute; left: 48px; right: 48px; bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--portal-subtle); font: 9px/1.4 ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; }
.portal-section-heading { display: flex; align-items: center; gap: 22px; margin: 43px 0 23px; padding-top: 22px; border-top: 1px solid var(--portal-line); }
.portal-section-number { font-family: var(--portal-display); font-size: 58px; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--text) 22%, var(--bg)); flex: none; }
.portal-section-heading h2 { font-family: var(--portal-display); font-size: clamp(25px, 2.8vw, 40px); text-transform: uppercase; font-weight: 700; margin-top: 4px; }

html[data-theme] .dashboard-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 23px 0; border-top: 1px solid var(--portal-line); border-bottom: 1px solid var(--portal-line); }
html[data-theme][data-mode] .dashboard-stats .stat {
    min-height: 95px;
    padding: 8px 23px;
    border: 0;
    border-right: 1px solid var(--portal-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    gap: 12px;
    overflow: visible;
    animation: none;
}
html[data-theme] .dashboard-stats .stat:last-child { border-right: 0; }
html[data-theme] .stat::before, html[data-theme] .stat::after { content: none; }
html[data-theme] .stat .value { color: var(--text); font-family: var(--portal-display); font-size: 49px; font-weight: 700; letter-spacing: -.045em; line-height: .95; font-variant-numeric: tabular-nums; }
html[data-theme] .stat .label { color: var(--portal-muted); font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
html[data-theme] .portal-activity-layout { grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); }
html[data-theme] .portal-moderation-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html[data-theme] .activity-card { min-height: 350px; position: relative; }
html[data-theme] .activity-chart { min-height: 235px; padding-top: 13px; gap: 14px; }
html[data-theme] .activity-grid { stroke: var(--portal-soft-line); stroke-dasharray: 3 6; }
html[data-theme] .activity-yaxis, html[data-theme] .activity-xaxis { color: var(--portal-subtle); font-size: 10px; }
html[data-theme] .portal-recent-players { background: var(--bg-2); border-top: 3px solid var(--portal-accent); }

html[data-theme] .server-grid, html[data-theme] .contest-grid, html[data-theme] .benefits-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 325px), 1fr)); gap: 24px; }
html[data-theme] .server-card { overflow: hidden; }
html[data-theme] .server-banner { height: 190px; transform: none; transition: filter .3s; }
html[data-theme] .server-card:hover .server-banner { transform: none; filter: saturate(1.25); }
html[data-theme] .server-status { top: 15px; left: 15px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 3px; font-size: 10px; }
html[data-theme] .server-map-tag { right: 15px; bottom: 15px; border-radius: 3px; }
html[data-theme] .server-name { font-family: var(--portal-display); font-size: 25px; font-weight: 700; }
html[data-theme] .server-stat { background: var(--bg-2); border-color: var(--portal-line); border-radius: 3px; padding: 11px; }
html[data-theme] .server-stat .k { font-size: 9px; color: var(--portal-subtle); }
html[data-theme] .server-stat .v { font-size: 13px; }
html[data-theme] .rcon-out, html[data-theme] .err-trace { border-radius: 4px; border-color: var(--portal-line); background: color-mix(in srgb, var(--bg) 90%, black); }
html[data-theme] .contest-card { padding: 26px; gap: 16px; border-top: 3px solid var(--portal-accent); }
html[data-theme] .contest-card .cc-title { font-family: var(--portal-display); font-size: 25px; font-weight: 700; line-height: 1.15; }
html[data-theme] .contest-section-title, html[data-theme] .store-section-title { font-family: var(--portal-display); font-size: 25px; color: var(--text); letter-spacing: .025em; margin-bottom: 20px; }
html[data-theme] .cc-label { font-size: 10px; color: var(--portal-muted); }
html[data-theme] .cc-chip-warn, html[data-theme] .cart-warn { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 25%, var(--border)); background: color-mix(in srgb, var(--yellow) 7%, var(--card)); }
html[data-theme] .store-track { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 24px; }
html[data-theme] .store-card { padding: 30px; position: relative; overflow: hidden; }
html[data-theme] .store-card .store-discount-badge {
    position: absolute;
    top: 16px;
    right: -34px;
    z-index: 2;
    width: 138px;
    margin: 0;
    padding: 6px 0;
    border-radius: 0;
    background: linear-gradient(135deg, #26ee71, #12c856);
    color: #05240f;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: .04em;
    text-align: center;
    transform: rotate(45deg);
    box-shadow: 0 3px 7px rgba(0, 0, 0, .28);
    pointer-events: none;
}
html[data-theme] .store-card::before { content: ""; height: 3px; position: absolute; inset: 0 0 auto; background: var(--portal-accent); transform: scaleX(.25); transform-origin: left; transition: transform .4s; }
html[data-theme] .store-card:hover::before { transform: scaleX(1); }
html[data-theme] .store-card .store-name { font-family: var(--portal-display); font-size: 29px; font-weight: 700; }
html[data-theme] .store-card .store-price { margin-top: 28px; padding-top: 23px; border-top: 1px solid var(--portal-line); }
html[data-theme] .store-card .store-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--portal-display); font-size: 43px; font-weight: 700; letter-spacing: -.035em; }
html[data-theme] .store-card .store-current-price { white-space: nowrap; }
html[data-theme] .store-card .store-old-price { margin-right: 0; }
html[data-theme] .store-type { border-radius: 3px; color: var(--portal-accent); background: var(--portal-tint); padding: 5px 9px; font-size: 10px; }
html[data-theme] .store-card-discounted .store-type {
    position: relative;
    z-index: 3;
    background: linear-gradient(45deg, var(--portal-tint) calc(100% - 15px), transparent 0);
    text-shadow: 0 1px 2px #000;
}
html[data-theme] .store-benefits-btn { color: var(--portal-accent); border-color: var(--portal-line); border-radius: 3px; min-height: 39px; }
html[data-theme] .mini-cart-panel { background: var(--bg-2); border-color: var(--portal-line); border-radius: 6px; box-shadow: var(--portal-modal-shadow); }
html[data-theme] .benefits-card { padding: 33px; text-align: left; align-items: stretch; }
html[data-theme] .benefits-card-icon { display: flex; align-items: center; min-height: 90px; margin-bottom: 25px; }
html[data-theme] .benefits-card-title { font-family: var(--portal-display); font-size: 32px; margin-bottom: 24px; }
html[data-theme] .bp-row { padding: 13px 0; border-bottom-color: var(--portal-line); }
html[data-theme] .bp-val.bp-num { color: var(--portal-accent); }
html[data-theme] .bp-yes { color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--card)); border-color: color-mix(in srgb, var(--green) 25%, var(--border)); }
html[data-theme] .bp-no { color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--card)); border-color: color-mix(in srgb, var(--red) 25%, var(--border)); }

html[data-theme] .skins-topbar { background: var(--bg-2); padding: 17px; border: 1px solid var(--portal-line); border-radius: 5px; }
html[data-theme] .skins-tabs { gap: 4px; }
html[data-theme] .skins-tab { min-height: 40px; background: transparent; border-color: transparent; border-radius: 3px; padding: 10px 13px; color: var(--portal-muted); font-size: 11px; }
html[data-theme] .skins-tab.active { color: var(--portal-accent); background: var(--portal-tint); border-color: var(--portal-line); }
html[data-theme] .skins-sidebar { padding: 18px 12px; }
html[data-theme] .skins-main { padding: 23px; }
html[data-theme] .skins-card { border-radius: 5px; background: var(--bg-2); border-color: var(--portal-line); box-shadow: none; transition: border-color .25s, transform .25s; }
html[data-theme] .skins-card:hover { transform: translateY(-3px); border-color: var(--portal-accent); box-shadow: none; }
html[data-theme] .skins-card-img { background: radial-gradient(ellipse at center, var(--portal-tint), transparent), var(--bg-3); }
html[data-theme] .skins-card-sub { color: var(--portal-muted); font-size: 11px; }
html[data-theme] .skins-nav-btn, html[data-theme] .skins-nav-overview { border-radius: 3px; min-height: 38px; }
html[data-theme] .skins-nav-btn.active { background: var(--portal-tint); color: var(--text); border-color: var(--portal-line); }
html[data-theme] .skins-team-btn.active { background: var(--portal-action); color: var(--portal-action-text); border-color: transparent; }

html[data-theme] .theme-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: 21px; }
html[data-theme][data-mode] .theme-card { border: 1px solid var(--portal-line); border-radius: 6px; background: var(--bg-2); box-shadow: none; }
html[data-theme] .theme-card:hover { transform: translateY(-4px); border-color: var(--portal-accent); box-shadow: var(--portal-shadow); }
html[data-theme][data-mode] .theme-card.active { border-color: var(--portal-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
html[data-theme] .theme-preview.split, html[data-theme] .theme-preview.anim { height: 116px; border-bottom: 1px solid var(--portal-line); }
html[data-theme] .theme-meta { padding: 15px; gap: 8px; align-items: flex-start; }
html[data-theme] .theme-name { font-family: var(--portal-display); font-size: 17px; font-weight: 650; }
html[data-theme] .theme-tag { color: var(--portal-muted); font-size: 8px; }
html[data-theme] .theme-check { background: var(--portal-action); color: var(--portal-action-text); border-radius: 3px; }
html[data-theme] .theme-card:focus-within .theme-actions { opacity: 1; }
html[data-theme] .ct-mode { padding: 21px; background: var(--bg-2); border: 1px solid var(--portal-line); border-radius: 5px; }
html[data-theme] .ct-mode-title, html[data-theme] .ct-sw { color: var(--portal-muted); }
html[data-theme] .code-copy .code-line { border-color: var(--portal-line); border-radius: 4px; background: var(--bg); }
html[data-theme] :is(.admin-group-details, .pkg-editor, .pkg-group, .ben-row, .err-entry) { border-color: var(--portal-line); border-radius: 5px; }
html[data-theme] :is(.pkg-editor-head, .pkg-group-head, .pkg-summary, .admin-group-summary, .ben-row-head, .err-head) { background: var(--bg-2); }
html[data-theme] .update-hero, html[data-theme] .license-settings-card { background: var(--portal-tint); border-color: var(--portal-line); border-radius: 7px; }
html[data-theme] .update-hud-box, html[data-theme] .popup { border-color: var(--portal-line); border-radius: 7px; box-shadow: var(--portal-modal-shadow); }
html[data-theme] .app-footer {
    width: 100%;
    max-width: var(--portal-width);
    margin: auto auto 0;
    padding: 26px var(--portal-gutter);
    border-top-color: var(--portal-line);
    justify-content: flex-start;
    color: var(--portal-subtle);
    font-size: 11px;
}
html[data-theme] .app-footer a, html[data-theme] .auth-credit a { color: var(--portal-accent); }
html[data-theme] .app-footer .footer-logo { width: 20px; height: 20px; }

html[data-theme] .auth-wrap {
    min-height: 100dvh;
    padding: 40px;
    background: radial-gradient(ellipse at 15% 20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--bg);
}
.portal-auth {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(350px, .9fr);
    width: min(1180px, 100%);
    min-height: 640px;
    border: 1px solid var(--portal-line);
    border-radius: 9px;
    box-shadow: var(--portal-shadow);
    overflow: hidden;
}
.auth-scene {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding: 37px;
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-2);
    border-right: 1px solid var(--portal-line);
}
.auth-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../img/panel-loadout.svg") 70% center / auto 100% no-repeat;
    opacity: .52;
    animation: portalArena 24s ease-in-out infinite alternate;
}
.auth-scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 15%, transparent), var(--bg-2)); }
.auth-scene-brand { display: flex; align-items: center; gap: 12px; color: var(--portal-muted); font: 600 10px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .06em; }
.auth-scene-brand img { width: 34px; height: 34px; }
.auth-scene-art { flex: 1; min-height: 200px; }
.auth-scene-message { max-width: 420px; margin-bottom: 25px; }
.auth-scene-message strong { display: block; font-family: var(--portal-display); font-size: clamp(35px, 5vw, 62px); font-weight: 700; line-height: 1; color: var(--text); margin-top: 13px; text-transform: uppercase; }
.auth-scene-features { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-scene-features span { border: 1px solid var(--portal-line); padding: 7px 10px; border-radius: 3px; color: var(--portal-muted); font-size: 10px; background: var(--bg-2); }
html[data-theme][data-mode] .auth-card { background: var(--card); border-color: var(--portal-line); border-radius: 8px; box-shadow: var(--portal-modal-shadow); padding: 42px; }
html[data-theme][data-mode] .auth-login-card { display: flex; flex-direction: column; justify-content: center; align-items: stretch; max-width: none; border: 0; border-radius: 0; box-shadow: none; text-align: left; padding: 46px; animation: none; }
html[data-theme] .auth-login-card img.logo { width: 57px; height: 57px; margin-bottom: 32px; }
.auth-eyebrow { color: var(--portal-subtle); font: 600 9px/1.5 ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .13em; }
html[data-theme] .auth-login-card h2 { font-family: var(--portal-display); font-size: 43px; text-transform: uppercase; font-weight: 700; margin: 12px 0 17px; overflow-wrap: anywhere; }
.portal-auth-description { color: var(--portal-muted); font-size: 12px; line-height: 1.8; margin-bottom: 29px; }
html[data-theme] .btn-steam, html[data-theme] .btn-guest { min-height: 49px; padding: 14px 16px; border-radius: 4px; font-size: 12px; font-weight: 650; }
html[data-theme] .btn-steam { background: #1b3448; border-color: #35566f; color: white; }
html[data-theme] .btn-guest { background: transparent; border-color: var(--portal-line); color: var(--text); }
html[data-theme] .auth-credit { margin-top: 29px; padding-top: 23px; border-top: 1px solid var(--portal-line); color: var(--portal-muted); font-size: 10px; }
html[data-theme] .license-block-status { background: var(--portal-tint); border-color: var(--portal-line); border-radius: 5px; padding: 22px; }
html[data-theme] .license-block-status h1 { font-family: var(--portal-display); font-size: 29px; }
html[data-theme] .license-block-status-icon { color: var(--portal-accent); border-radius: 4px; }
html[data-theme] .license-block-support { color: var(--portal-muted); border-top-color: var(--portal-line); }

html[data-theme] .install-split { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.1fr); }
html[data-theme] .install-hero {
    padding: 65px clamp(30px, 5vw, 80px);
    border-right-color: var(--portal-line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 15%, transparent), var(--bg-2)), url("../img/panel-loadout.svg") 65% center / auto 100% no-repeat, var(--bg-2);
}
html[data-theme] .install-logo { animation: none; width: 64px; height: 64px; margin-bottom: 30px; }
html[data-theme] .install-hero h1 { font-family: var(--portal-display); font-size: clamp(42px, 5vw, 74px); text-transform: uppercase; line-height: 1; }
html[data-theme] .install-hero p, html[data-theme] .install-features li { color: var(--portal-muted); }
html[data-theme] .install-features li { font-size: 12px; }
html[data-theme] .install-topbar { min-height: 78px; border-bottom-color: var(--portal-line); }
html[data-theme] .install-form-scroll { padding: 38px clamp(24px, 4vw, 60px) 50px; }
html[data-theme] .install-form-scroll h2 { font-family: var(--portal-display); font-size: 37px; text-transform: uppercase; margin-bottom: 30px; }
html[data-theme] .install-credit { left: clamp(30px, 5vw, 80px); color: var(--portal-muted); font-size: 10px; }
html[data-theme] .install-submit { min-height: 49px; margin-top: 22px; }
html[data-theme] .req-note { color: var(--portal-muted); }

.portal-scroll-progress { position: fixed; left: 0; top: 0; width: 100%; height: 2px; z-index: 200; background: var(--portal-accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Dimensional surfaces are derived from each selected palette, including custom themes. */
html[data-theme][data-mode] {
    --panel-highlight: color-mix(in srgb, var(--text) 9%, transparent);
    --panel-surface-top: color-mix(in srgb, var(--card) 94%, var(--text));
    --panel-surface-bottom: color-mix(in srgb, var(--card) 92%, var(--bg));
    --panel-surface: linear-gradient(145deg, var(--panel-surface-top), var(--card) 48%, var(--panel-surface-bottom));
    --panel-inset: inset 0 1px 0 var(--panel-highlight), inset 0 -1px 0 color-mix(in srgb, var(--bg) 35%, transparent);
}
html[data-theme][data-mode="dark"] { --panel-elevation: 0 16px 40px rgba(0, 0, 0, .2), 0 3px 10px rgba(0, 0, 0, .12); }
html[data-theme][data-mode="light"] { --panel-elevation: 0 16px 40px rgba(27, 43, 65, .075), 0 3px 10px rgba(27, 43, 65, .035); }
html[data-theme][data-mode] :is(.card, .contest-card, .store-card, .skins-main, .skins-sidebar, .auth-card, .theme-card, .popup, .update-hud-box) {
    background: var(--panel-surface);
    border-color: var(--portal-line);
    border-radius: 15px;
    box-shadow: var(--panel-inset), var(--panel-elevation);
    transition: border-color .3s, box-shadow .3s, transform .3s, opacity .6s;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-theme][data-mode] :is(.table-wrap, .modal, .tabs, .user-chip, .badge, .topbar-link, input, select, textarea),
html[data-theme][data-mode] .portal-drawer::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-theme][data-mode] .panel-live-hero :is(.panel-hud-card, .portal-hero-note) {
    background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-theme] .theme-preview { contain: paint; }
html[data-theme][data-mode] :is(.card, .contest-card, .store-card, .server-card):hover {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--portal-line));
    box-shadow: var(--panel-inset), var(--panel-elevation), 0 0 24px color-mix(in srgb, var(--accent) 5%, transparent);
}
html[data-theme][data-mode] .table-wrap { border-radius: 12px; box-shadow: var(--panel-inset), 0 8px 25px color-mix(in srgb, var(--bg) 12%, transparent); }
html[data-theme] thead { background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); }
html[data-theme] tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-3) 18%, transparent); }
html[data-theme] tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
html[data-theme][data-mode] .toolbar { border-radius: 12px; background: var(--panel-surface); box-shadow: var(--panel-inset), 0 9px 24px color-mix(in srgb, var(--bg) 12%, transparent); }
html[data-theme][data-mode] .btn { border-radius: 8px; box-shadow: inset 0 1px 0 var(--panel-highlight), 0 3px 8px color-mix(in srgb, var(--bg) 16%, transparent); }
html[data-theme][data-mode] .btn-primary { background: linear-gradient(130deg, var(--portal-action), color-mix(in srgb, var(--portal-action) 93%, var(--portal-action-text))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 7px 20px color-mix(in srgb, var(--accent) 16%, transparent); }
html[data-theme][data-mode] .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 9px 26px color-mix(in srgb, var(--accent) 28%, transparent); }
html[data-theme] input:is([type="text"], [type="number"], [type="password"], [type="url"], [type="email"], [type="search"], [type="date"], [type="time"], [type="datetime-local"]), html[data-theme] select, html[data-theme] textarea {
    border-radius: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 22%, var(--bg-2)), var(--bg-2));
    box-shadow: inset 0 2px 4px color-mix(in srgb, var(--bg) 20%, transparent), 0 1px 0 var(--panel-highlight);
}
html[data-theme] select { background-color: var(--bg-2); }
html[data-theme] select option, html[data-theme] select optgroup { background-color: var(--bg-2); color: var(--text); }
html[data-theme][data-mode] .modal { background: var(--panel-surface); border-radius: 16px; box-shadow: var(--panel-inset), var(--portal-modal-shadow); }
html[data-theme] .tabs, html[data-theme] .subtabs { border-radius: 10px; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); box-shadow: var(--panel-inset); }
html[data-theme] .tabs [data-tab].active, html[data-theme] .subtab.active { background: var(--panel-surface); border-radius: 6px; box-shadow: inset 0 -2px var(--portal-accent), 0 3px 9px color-mix(in srgb, var(--bg) 16%, transparent); }
html[data-theme] .theme-preview { box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
html[data-theme] .theme-card .theme-meta { background: var(--panel-surface); }
html[data-theme] .ct-mode, html[data-theme] .code-copy .code-line { border-radius: 10px; box-shadow: var(--panel-inset); }
html[data-theme] .portal-header { box-shadow: 0 6px 25px color-mix(in srgb, var(--bg) 18%, transparent); }
html[data-theme] .portal-hero { border-radius: 18px; box-shadow: var(--panel-inset), var(--panel-elevation); }
html[data-theme] .portal-hero-copy h1 { margin-bottom: 38px; }
html[data-theme] body.theme-anim,
html[data-theme] body.theme-anim *,
html[data-theme] body.theme-anim *::before,
html[data-theme] body.theme-anim *::after {
    transition: none !important;
}
html[data-theme] .portal-hero-note { background: var(--panel-surface); border-radius: 16px; box-shadow: var(--panel-inset), var(--portal-modal-shadow); }
html[data-theme] .dashboard-stats { border: 0; padding: 0; gap: 14px; }
html[data-theme][data-mode] .dashboard-stats .stat {
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    background: var(--panel-surface);
    box-shadow: var(--panel-inset), 0 7px 20px color-mix(in srgb, var(--bg) 14%, transparent);
    padding: 23px 20px;
    min-height: 130px;
}
html[data-theme] .stat .value { font-size: 43px; }
html[data-theme] .stat .label { font-size: 10px; letter-spacing: .01em; }
html[data-theme] .skins-card { background: var(--panel-surface); border-radius: 11px; box-shadow: var(--panel-inset), 0 4px 12px color-mix(in srgb, var(--bg) 15%, transparent); }
html[data-theme] .skins-card-img { background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 76%), linear-gradient(155deg, var(--bg-3), var(--bg-2)); }
html[data-theme] .server-banner { height: 208px; }
html[data-theme] .server-banner::after { background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.65)); }
html[data-theme] .server-stat { box-shadow: inset 0 1px 0 var(--panel-highlight); border-radius: 8px; }
html[data-theme] .contest-card .cc-prizes-list { padding: 13px; border: 1px solid var(--portal-soft-line); border-radius: 10px; background: var(--portal-tint); }
html[data-theme] :is(.cc-prize-line .badge, .cc-prize-chip .cc-chip-prize, .contest-prize-value .badge) { white-space: normal; overflow-wrap: anywhere; }
.contest-prize-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.contest-prize-status form { margin: 0; }
html[data-theme] .store-card .store-price { border-top-color: var(--portal-line); border-radius: 8px; }
html[data-theme] .benefits-card-icon { filter: drop-shadow(0 7px 14px color-mix(in srgb, var(--accent) 12%, transparent)); }
html[data-theme] .err-entry, html[data-theme] .pkg-editor, html[data-theme] .pkg-group, html[data-theme] .ben-row { box-shadow: var(--panel-inset), 0 4px 14px color-mix(in srgb, var(--bg) 12%, transparent); border-radius: 10px; }

.panel-nav-section { position: relative; display: flex; align-items: center; }
.panel-nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    background: none;
    border: 0;
    color: var(--portal-muted);
    cursor: pointer;
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.panel-nav-trigger svg { width: 12px; height: 12px; transition: rotate .25s; }
.panel-nav-section.active .panel-nav-trigger, .panel-nav-trigger:hover, .panel-nav-trigger[aria-expanded="true"] { color: var(--portal-accent); }
.panel-nav-trigger[aria-expanded="true"] svg { rotate: 180deg; }
.panel-nav-panel {
    position: absolute;
    left: -20px;
    top: calc(100% + 5px);
    z-index: 100;
    width: 258px;
    padding: 13px;
    border: 1px solid var(--portal-line);
    border-top: 2px solid var(--portal-accent);
    border-radius: 13px;
    background: var(--panel-surface);
    box-shadow: var(--panel-inset), var(--portal-modal-shadow);
}
.panel-nav-panel[hidden] { display: none; }
.panel-nav-panel:not([hidden]) { animation: panelDropdown .25s var(--ease) both; }
.panel-nav-heading { display: block; padding: 5px 10px 12px; color: var(--portal-subtle); font: 600 9px/1.4 ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .1em; }
.panel-nav-item { display: flex; align-items: center; gap: 11px; padding: 11px 10px; border-radius: 7px; color: var(--portal-muted); font-size: 12px; transition: background .2s, color .2s; }
.panel-nav-item svg { width: 17px; height: 17px; flex: none; }
.panel-nav-item:hover, .panel-nav-item.active { color: var(--text); background: var(--portal-tint); }
.panel-nav-item.active svg { color: var(--portal-accent); }
.panel-nav-item .tab-badge { margin-left: auto; }
.panel-rank-placeholder { width: 100px; height: 100px; margin: 24px auto 18px; display: block; stroke: var(--portal-accent); stroke-width: 2; fill: var(--portal-tint); filter: drop-shadow(0 5px 15px color-mix(in srgb, var(--accent) 20%, transparent)); }
.panel-rank-emblem { display: grid; place-items: center; min-height: 115px; padding: 25px 0 16px; }
.panel-rank-emblem :is(img, .rank-img) { max-width: 100%; max-height: 96px; width: 128px; height: auto; }
.panel-ranked-name { display: block; text-align: center; font-family: var(--portal-display); font-size: 24px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-hero.panel-hero-no-rank { grid-template-columns: minmax(0, 1fr); }
.panel-hero-no-rank .portal-hero-copy { max-width: 100%; }
html[data-theme] table .rank-premier-img .cs2rating { height: 32px; }
html[data-theme] .rank-premier-img .rank-premier-val {
    top: 3px;
    bottom: 3px;
    left: 22%;
    right: 8%;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    -webkit-text-stroke: .5px #111318;
    paint-order: stroke fill;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
html[data-theme] .panel-rank-emblem .rank-premier-val { color: #ffffff; font-size: 18px; font-weight: 900; text-shadow: 0 1px 2px #000, 0 0 5px #000; }
.panel-rank-score { display: flex; justify-content: center; align-items: baseline; gap: 9px; margin: 15px 0 25px; }
.panel-rank-score strong { color: var(--portal-accent); font-family: var(--portal-display); font-size: 34px; font-weight: 700; }
.panel-rank-score span { color: var(--portal-muted); font-size: 10px; }
.panel-ranks-heading .portal-text-link { margin-left: auto; }
.panel-ranking-card { overflow: hidden; }
.panel-rank-position { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: var(--portal-tint); color: var(--portal-accent); font-weight: 650; }
.panel-ranking-card tr:first-child .panel-rank-position { background: color-mix(in srgb, var(--yellow) 12%, var(--card)); color: var(--yellow); }
.panel-chart-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.panel-chart-header .card-title { margin-bottom: 12px; }
.panel-chart-total { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.panel-chart-total strong { font-family: var(--portal-display); font-size: 44px; font-weight: 700; line-height: .95; color: var(--portal-accent); }
.panel-chart-total span { color: var(--portal-muted); font-size: 10px; margin-top: 6px; }
.panel-chart-line { filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--accent) 28%, transparent)); }
.panel-chart-area { opacity: .7; }
.panel-chart-point { cursor: help; transition: r .2s, opacity .2s; }
.panel-chart-point:hover { r: 2.4; opacity: .8; }
.panel-chart-animate .panel-chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: panelChartLine 1.7s cubic-bezier(.2, .7, .3, 1) forwards; }
.panel-chart-animate .panel-chart-area { animation: panelChartArea 1.4s ease both; }
.panel-chart-animate .panel-chart-point { animation: panelChartArea .5s .9s ease both; }
.panel-chart-header .activity-sub { margin: 0; }
.panel-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 21px; flex-wrap: wrap; }
html[data-theme] .panel-card-header .card-title { margin-bottom: 0; }
html[data-theme] .panel-card-header .portal-text-link { flex: none; font-size: 9.5px; font-weight: 600; gap: 8px; letter-spacing: .02em; }
html[data-theme] .panel-card-header .portal-text-link span { font-size: 13px; line-height: 1; }
html[data-theme] .panel-gsap-motion .portal-reveal { transition: none; }
.panel-spotlight-card { position: relative; --panel-spotlight-x: 0; --panel-spotlight-y: 0; --panel-spotlight-presence: 0; }
html[data-theme][data-mode] .panel-spotlight-card::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: var(--panel-spotlight-presence);
    background: radial-gradient(220px circle at calc(var(--panel-spotlight-x) * 1px) calc(var(--panel-spotlight-y) * 1px), var(--portal-accent), transparent 75%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
@media (prefers-reduced-motion: reduce), (max-width: 900px), (hover: none), (pointer: coarse) {
    html[data-theme][data-mode] .panel-spotlight-card::after { opacity: 0; }
}
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: panelPageExit .22s ease both; }
::view-transition-new(root) { animation: panelPageEnter .38s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes panelPageExit { to { opacity: 0; translate: 0 -10px; filter: blur(2px); } }
@keyframes panelPageEnter { from { opacity: 0; translate: 0 18px; filter: blur(3px); } to { opacity: 1; translate: 0 0; filter: none; } }
@keyframes panelDropdown { from { opacity: 0; translate: 0 9px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes panelChartLine { to { stroke-dashoffset: 0; } }
@keyframes panelChartArea { from { opacity: 0; } to { opacity: .7; } }
@media (max-width: 1280px) {
    .portal-primary { gap: 17px; }
    .portal-brand strong { max-width: 165px; }
    .panel-nav-trigger { font-size: 9px; gap: 5px; }
    .portal-menu span { display: none; }
}
@media (max-width: 1100px) {
    .panel-nav-section:last-child .panel-nav-panel { left: auto; right: 0; }
}
@media (max-width: 900px) {
    .panel-nav-section { display: none; }
}
@media (max-width: 720px) {
    .portal-hero-note.panel-rank-spotlight { display: block; text-align: left; }
    .panel-rank-emblem, .panel-rank-placeholder { margin-top: 15px; }
    .panel-chart-header { gap: 12px; }
}
@media (max-width: 620px) {
    html[data-theme][data-mode] .dashboard-stats .stat { border: 1px solid var(--portal-line); padding: 20px 16px; min-height: 119px; }
    html[data-theme] .dashboard-stats { gap: 12px; }
    html[data-theme] .dashboard-stats .stat:nth-child(3n) { border-right: 1px solid var(--portal-line); }
    html[data-theme] .dashboard-stats .stat:nth-child(2n) { border-right: 1px solid var(--portal-line); }
    .panel-ranks-heading { flex-wrap: wrap; }
    .panel-ranks-heading .portal-text-link { margin-left: 0; width: 100%; justify-content: flex-end; }
    .panel-chart-total strong { font-size: 37px; }
    .panel-chart-total span { max-width: 92px; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    .panel-chart-line { stroke-dasharray: none; stroke-dashoffset: 0; }
}
.portal-reveal { transition: opacity .65s var(--ease) var(--portal-delay, 0ms), transform .65s var(--ease) var(--portal-delay, 0ms); }
html[data-theme][data-mode] .portal-motion-ready .portal-reveal:not(.portal-visible) { opacity: 0; transform: translateY(24px); }
.portal-motion-ready .portal-reveal.portal-visible { opacity: 1; transform: none; }
@keyframes portalArena { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.08) translateX(-1.2%); } }
@keyframes portalScan { from { transform: translateY(-100%); } to { transform: translateY(700%); } }
@keyframes portalFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes portalSignal { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 3%, transparent); } }
@keyframes portalEqualizer { from { transform: scaleY(.6); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
@keyframes portalModal { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }

@media (min-width: 901px) {
    html[data-theme][data-mode] .portal-menu.menu-toggle { display: none !important; }
    html[data-theme][data-mode].sidebar-collapsed .portal-drawer { padding-right: 9px; padding-left: 9px; }
    html[data-theme][data-mode].sidebar-collapsed .brand { padding-right: 0; padding-left: 0; }
    html[data-theme][data-mode].sidebar-collapsed .nav-item { font-size: 0; justify-content: center; padding: 10px; gap: 0; }
    html[data-theme][data-mode].sidebar-collapsed .nav-item svg { width: 20px; height: 20px; }
    html.sidebar-collapsed .drawer-caption { display: none; }
}
@media (max-width: 1280px) {
    .portal-primary { gap: 18px; }
    html[data-theme] .portal-header { gap: 20px; }
    html[data-theme] .topbar-clock { display: none; }
    .portal-brand strong { max-width: 180px; }
    .portal-hero { grid-template-columns: minmax(0, 1fr) 250px; padding: 40px 36px 72px; gap: 23px; }
    .portal-hero-note { padding: 23px; }
    .portal-hero-footer { left: 36px; right: 36px; }
}
@media (max-width: 1100px) {
    .portal-primary .portal-nav-link:nth-child(n + 3) { display: none; }
    html[data-theme] .topbar-links { display: none; }
    html[data-theme] .dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 27px; }
    html[data-theme] .dashboard-stats .stat:nth-child(3n) { border-right: 0; }
    .portal-auth { grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr); }
    html[data-theme] .auth-login-card { padding: 34px; }
}
@media (max-width: 980px) {
    html[data-theme] .install-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    :root { --portal-header-h: 76px; --portal-gutter: 24px; }
    .portal-primary { display: none; }
    html[data-theme][data-mode] .portal-header { gap: 15px; }
    html[data-theme] .user-chip { padding: 5px; gap: 0; }
    html[data-theme] .portal-drawer { left: 12px; top: calc(var(--portal-header-h) + 12px); bottom: 12px; width: min(340px, calc(100vw - 24px)); }
    .portal-page-heading { padding-top: 34px; padding-bottom: 27px; }
    .portal-page-stamp { font-size: 53px; }
    html[data-theme] .portal-home .content { padding-top: 24px; }
    .portal-hero { min-height: 510px; grid-template-columns: minmax(0, 1fr) 215px; padding: 35px 29px 70px; gap: 22px; }
    .portal-hero-copy h1 { font-size: clamp(52px, 8vw, 76px); }
    .portal-hero-lead { font-size: 28px; }
    .portal-hero-note { padding: 20px; }
    .portal-network-number strong { font-size: 62px; }
    html[data-theme] .portal-activity-layout { grid-template-columns: minmax(0, 1fr); }
    html[data-theme] .skins-search { margin-left: 0; max-width: none; }
}
@media (max-width: 720px) {
    .portal-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 35px 27px 63px; }
    .portal-hero-copy h1 { font-size: clamp(58px, 11vw, 85px); max-width: 570px; }
    .portal-hero-description { max-width: 400px; }
    .portal-hero-note { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; align-items: center; margin-top: 18px; animation: none; }
    .portal-hero-note > .portal-kicker { grid-column: 1 / -1; }
    .portal-network-number { margin: 6px 0; }
    .portal-hero-note p { margin: 0; font-size: 11px; }
    .portal-hero-note .portal-text-link { grid-column: 1 / -1; }
    .portal-network-lines { display: none; }
    .portal-hero-footer { left: 27px; right: 27px; font-size: 8px; }
    .portal-hero-footer span:first-child { display: none; }
    .portal-auth { grid-template-columns: minmax(0, 1fr); max-width: 520px; min-height: 0; }
    .auth-scene { min-height: 255px; padding: 26px; border-right: 0; border-bottom: 1px solid var(--portal-line); }
    .auth-scene-art { min-height: 55px; }
    .auth-scene-message { margin: 24px 0; max-width: 320px; }
    .auth-scene-message strong { font-size: 36px; }
    .auth-scene-features { display: none; }
}
@media (max-width: 620px) {
    :root { --portal-gutter: 16px; --portal-header-h: 72px; }
    html[data-theme][data-mode] .portal-header { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
    .portal-brand { gap: 8px; }
    .portal-brand img { width: 32px; height: 32px; }
    .portal-brand strong { font-size: 18px; max-width: 142px; }
    .portal-brand small { font-size: 7px; letter-spacing: .08em; margin-top: 4px; }
    html[data-theme] .topbar-actions { gap: 7px; }
    html[data-theme][data-mode] .portal-menu { width: 37px; min-height: 37px; padding: 9px; }
    .portal-menu span { display: none; }
    html[data-theme][data-mode] .theme-toggle { width: 37px; min-height: 37px; padding: 9px; }
    html[data-theme] .user-chip img { width: 27px; height: 27px; }
    .portal-page-heading { padding-top: 27px; padding-bottom: 22px; gap: 13px; }
    .portal-page-heading h1 { font-size: 38px; }
    .portal-page-stamp { font-size: 43px; }
    .portal-page-heading .portal-kicker { font-size: 8px; gap: 6px; }
    html[data-theme] .content { padding-bottom: 44px; }
    html[data-theme] .card { padding: 21px; }
    html[data-theme] .grid { gap: 18px; }
    html[data-theme] .toolbar { padding: 13px; gap: 10px; }
    html[data-theme] .toolbar input, html[data-theme] .toolbar select { min-width: 0; }
    html[data-theme] .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 23px; }
    html[data-theme][data-mode] .dashboard-stats .stat { padding: 7px 15px; min-height: 89px; }
    html[data-theme] .dashboard-stats .stat:nth-child(3n) { border-right: 1px solid var(--portal-line); }
    html[data-theme] .dashboard-stats .stat:nth-child(2n) { border-right: 0; }
    html[data-theme] .stat .value { font-size: 43px; }
    html[data-theme] .stat .label { font-size: 9px; letter-spacing: .015em; }
    .portal-section-heading { gap: 16px; margin-top: 29px; padding-top: 19px; }
    .portal-section-number { font-size: 45px; }
    .portal-section-heading h2 { font-size: 29px; }
    .portal-section-heading .portal-kicker { font-size: 8px; }
    .portal-hero { padding: 29px 23px 60px; }
    .portal-hero-copy h1 { margin-top: 23px; font-size: 65px; }
    .portal-hero-copy .portal-kicker { font-size: 8px; gap: 8px; }
    .portal-hero-lead { font-size: 29px; }
    .portal-hero-description { font-size: 12px; margin: 19px 0 25px; }
    .portal-hero-actions { gap: 20px; }
    html[data-theme][data-mode] .portal-cta { min-width: 0; width: 100%; min-height: 48px; }
    .portal-hero-note { padding: 19px; }
    .portal-hero-footer { left: 23px; right: 23px; }
    html[data-theme] .portal-moderation-layout { grid-template-columns: minmax(0, 1fr); }
    html[data-theme] .activity-card { min-height: 315px; }
    html[data-theme] .activity-chart { min-height: 220px; }
    html[data-theme] thead th { padding: 13px 15px; }
    html[data-theme] tbody td { padding: 15px; }
    html[data-theme][data-mode] .btn-sm { min-height: 37px; }
    html[data-theme] .modal-overlay { padding: 12px; }
    html[data-theme] .modal { width: 100%; margin: 0; max-height: calc(100dvh - 24px); border-radius: 6px; }
    html[data-theme] .modal-head, html[data-theme] .modal-foot { padding: 19px; }
    html[data-theme] .modal-body { padding: 23px 19px; }
    html[data-theme] .modal-foot { flex-wrap: wrap; }
    html[data-theme] .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    html[data-theme] .settings-tabgroup { width: 100%; }
    html[data-theme] .settings-tabgroups .tabs { display: flex; width: 100%; flex-wrap: wrap; }
    html[data-theme] .settings-tabgroups .tabs [data-tab] { flex: 1 1 auto; min-height: 39px; }
    html[data-theme] .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
    html[data-theme] .theme-meta { flex-direction: column; gap: 3px; padding: 12px; }
    html[data-theme] .theme-name { font-size: 16px; }
    html[data-theme] .theme-preview.split, html[data-theme] .theme-preview.anim { height: 96px; }
    html[data-theme] .ct-row { flex-wrap: wrap; }
    html[data-theme] .skins-topbar { padding: 11px; }
    html[data-theme] .skins-main { padding: 15px; }
    html[data-theme] .auth-wrap { padding: 24px 16px; }
    html[data-theme][data-mode] .auth-login-card { padding: 31px 26px; }
    html[data-theme] .auth-login-card h2 { font-size: 38px; }
    html[data-theme] .auth-card.license-block-card { padding: 27px 21px; }
    html[data-theme] .install-form-scroll { padding: 29px 21px 42px; }
    html[data-theme] .install-form-scroll h2 { font-size: 31px; }
    html[data-theme] .app-footer { justify-content: center; }
}
@media (max-width: 359px) {
    .portal-brand strong { max-width: 105px; }
    .portal-brand small { display: none; }
    .portal-hero-copy h1 { font-size: 55px; }
    .portal-hero-lead { font-size: 25px; }
    .portal-hero-note { gap: 10px; padding: 15px; }
    .portal-network-number { gap: 10px; }
    .portal-network-number strong { font-size: 54px; }
    html[data-theme] .theme-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { animation: none !important; transition: none !important; }
    html[data-theme][data-mode] .portal-motion-ready .portal-reveal:not(.portal-visible) { opacity: 1; transform: none; }
    html[data-theme] .theme-fx canvas { visibility: hidden; }
}

.portal-hero.panel-live-hero { min-height: 440px; padding: 42px 48px 62px; gap: 30px; }
.portal-hero.panel-live-hero.panel-hero-no-rank { grid-template-columns: minmax(0, 1fr); }
.panel-live-hero::before { display: none; }
.panel-live-hero::after { z-index: 0; }
.panel-server-viewport { position: absolute; inset: 0; z-index: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; outline-offset: -4px; }
.panel-server-viewport::-webkit-scrollbar { display: none; }
.panel-server-slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.panel-server-map { position: absolute; inset: 0 0 0 auto; width: 76%; height: 100%; object-fit: cover; object-position: center; opacity: .85; }
.panel-server-map[hidden] { display: none; }
.panel-server-slide::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--bg-2) 1%, color-mix(in srgb, var(--bg-2) 95%, transparent) 29%, color-mix(in srgb, var(--bg-2) 62%, transparent) 54%, color-mix(in srgb, var(--bg-2) 10%, transparent)), linear-gradient(0deg, color-mix(in srgb, var(--bg-2) 75%, transparent), transparent 45%); pointer-events: none; }
.panel-server-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 48%, color-mix(in srgb, var(--accent) 22%, transparent)); mix-blend-mode: color; pointer-events: none; }
.panel-server-terrain { position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, var(--portal-tint), transparent 65%); }
.panel-live-hero .portal-hero-grid { z-index: 1; background-image: radial-gradient(var(--portal-line) 1px, transparent 1px); background-size: 20px 20px; opacity: .28; }
.panel-live-hero .portal-hero-grid::after { display: none; }
.panel-live-hero .portal-hero-copy { max-width: 700px; padding-right: 18px; }
html[data-theme] .panel-live-hero .portal-hero-copy h1 { margin: 22px 0 16px; font-size: clamp(42px, 5.5vw, 88px); letter-spacing: -.035em; }
.panel-live-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 19px; }
.panel-live-chips > span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--portal-line); border-radius: 999px; background: color-mix(in srgb, var(--bg-2) 86%, transparent); color: var(--portal-muted); font-size: 10px; font-weight: 600; }
.panel-live-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--portal-subtle); }
.panel-live-hero[data-server-state="online"] .panel-live-status { color: var(--green); border-color: color-mix(in srgb, var(--green) 25%, var(--portal-line)); }
.panel-live-hero[data-server-state="online"] .panel-live-status::before { background: var(--green); box-shadow: 0 0 9px color-mix(in srgb, var(--green) 45%, transparent); }
.panel-live-hero[data-server-state="unavailable"] .panel-live-status { color: var(--yellow); }
.panel-live-map { max-width: 100%; }
.panel-live-map strong { min-width: 0; max-width: 220px; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.panel-current-server { color: var(--portal-muted); font-size: 13px; line-height: 1.5; margin-bottom: 25px; min-height: 20px; overflow-wrap: anywhere; }
.panel-live-hero .portal-hero-actions { gap: 10px; }
html[data-theme][data-mode] .panel-live-hero .portal-cta, html[data-theme][data-mode] .panel-live-hero .panel-leaderboard-link { min-width: 0; width: auto; min-height: 46px; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 12px; font-size: 11px; font-weight: 750; text-transform: uppercase; }
html[data-theme][data-mode] .panel-live-hero .portal-cta { color: var(--portal-accent); background: color-mix(in srgb, var(--bg-2) 92%, transparent); border-color: color-mix(in srgb, var(--accent) 70%, var(--portal-line)); box-shadow: 0 0 23px color-mix(in srgb, var(--accent) 15%, transparent), inset 0 1px 0 var(--panel-highlight); }
.panel-live-hero .portal-cta[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.panel-live-hero .panel-leaderboard-link { background: color-mix(in srgb, var(--bg-2) 88%, transparent); }
.panel-live-hero .portal-hero-actions svg { width: 17px; height: 17px; flex: none; }
html[data-theme][data-mode] .panel-live-hero .panel-hero-social { width: 46px; height: 46px; padding: 0; border-radius: 12px; background: color-mix(in srgb, var(--bg-2) 88%, transparent); }
.panel-server-hud { position: absolute; width: clamp(280px, 25vw, 410px); height: 300px; top: 50%; right: 300px; translate: 0 -50%; z-index: 2; pointer-events: none; }
.panel-hero-no-rank .panel-server-hud { right: 9%; width: min(34vw, 450px); }
.panel-hud-card { position: absolute; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--portal-line)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--card) 84%, transparent), color-mix(in srgb, var(--card) 55%, transparent)); backdrop-filter: blur(6px); box-shadow: 0 15px 40px rgba(0, 0, 0, .12), inset 0 1px 0 var(--panel-highlight); animation: panelHudFloat 8s ease-in-out infinite; }
.panel-hud-card span { color: var(--portal-muted); font-size: 10px; }
.panel-hud-card strong { display: block; max-width: 190px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--portal-display); color: var(--text); font-size: 25px; font-weight: 700; }
.panel-hud-players { left: 0; top: 34px; min-width: 165px; transform: rotate(-9deg); }
.panel-hud-map { right: 0; top: 0; min-width: 176px; transform: rotate(-7deg); animation-delay: -3s; }
.panel-hud-icon, .panel-hud-reticle { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--portal-line); border-radius: 50%; }
.panel-hud-icon svg { width: 21px; height: 21px; color: var(--portal-accent); }
.panel-hud-reticle { border: 3px solid color-mix(in srgb, var(--accent) 22%, var(--portal-line)); box-shadow: inset 0 0 0 5px var(--card); background: var(--portal-accent); }
.panel-hud-chart { display: block; left: 25px; bottom: 13px; width: 77%; height: 169px; transform: rotate(-6deg); animation-delay: -5s; }
.panel-hud-chart-head { display: flex; align-items: center; justify-content: space-between; }
.panel-hud-chart-head strong { color: var(--portal-accent); font-size: 19px; }
.panel-hud-sparkline { width: 100%; height: 80px; margin-top: 9px; color: var(--portal-accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 45%, transparent)); }
.panel-hud-bars { display: flex; align-items: flex-end; gap: 7px; height: 14px; margin-top: 3px; }
.panel-hud-bars i { width: 20%; height: var(--bar-height); border-radius: 3px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
html[data-theme] .panel-live-hero .portal-hero-note { background: color-mix(in srgb, var(--card) 78%, transparent); backdrop-filter: blur(8px); border-top-width: 1px; border-radius: 18px; animation: none; padding: 22px; }
.panel-live-hero .panel-rank-emblem { min-height: 78px; padding: 12px 0; }
.panel-live-hero .panel-rank-score { margin: 10px 0 17px; }
.panel-live-hero .panel-ranked-name { font-size: 22px; }
.panel-live-hero .portal-hero-footer { z-index: 2; bottom: 20px; }
.panel-server-dots { position: absolute; right: 14px; top: 50%; translate: 0 -50%; z-index: 4; display: flex; flex-direction: column; gap: 4px; }
.panel-server-dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.panel-server-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--portal-subtle); transition: height .2s, background .2s; }
.panel-server-dots button[aria-current="true"]::before { height: 20px; background: var(--portal-accent); border-radius: 5px; box-shadow: 0 0 12px var(--portal-tint); }
@keyframes panelHudFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@media (max-width: 1280px) {
    .portal-hero.panel-live-hero { padding: 34px 38px 60px; }
    .panel-server-hud { right: 230px; opacity: .65; width: 300px; }
}
@media (max-width: 900px) {
    .portal-hero.panel-live-hero { grid-template-columns: minmax(0, 1fr) 215px; padding: 30px 29px 58px; gap: 20px; }
    .panel-server-hud { right: 190px; opacity: .35; }
    .panel-live-hero .portal-hero-copy { padding-right: 0; }
}
@media (max-width: 720px) {
    .portal-hero.panel-live-hero { grid-template-columns: minmax(0, 1fr); padding: 28px 25px 56px; gap: 24px; }
    .panel-server-map { width: 100%; opacity: .52; }
    .panel-server-slide::before { background: linear-gradient(90deg, color-mix(in srgb, var(--bg-2) 94%, transparent), color-mix(in srgb, var(--bg-2) 62%, transparent)), linear-gradient(0deg, var(--bg-2), transparent); }
    .panel-server-hud, .panel-hero-no-rank .panel-server-hud { width: 230px; right: 18px; top: 140px; opacity: .25; }
    .panel-hud-players { display: none; }
    .panel-live-hero .portal-hero-copy { padding-right: 8px; }
    html[data-theme] .panel-live-hero .portal-hero-copy h1 { font-size: 54px; }
    .panel-live-hero .portal-hero-note { margin-right: 8px; }
    .panel-live-hero .portal-hero-footer { left: 25px; right: 25px; font-size: 8px; }
    .panel-server-dots { right: 4px; }
}

/* Matte grey-paper surfaces keep Light readable across every theme. */
html:root[data-theme][data-mode="light"] {
    --bg: color-mix(in srgb, var(--accent) 2%, #ccd3d9);
    --bg-2: color-mix(in srgb, var(--accent) 1.5%, #dce2e7);
    --bg-3: color-mix(in srgb, var(--accent) 2%, #c2cdd5);
    --card: color-mix(in srgb, var(--accent) 1.5%, #d5dde3);
    --border: #929fa9;
    --text: #1e2b35;
    --text-dim: #344652;
    --text-mut: #425360;
    --portal-muted: var(--text-dim);
    --portal-subtle: var(--text-mut);
    --portal-accent: color-mix(in srgb, var(--accent) 24%, #15232d);
    --portal-action: var(--portal-accent);
    --portal-action-text: #f1f3f5;
    --green: #185636;
    --orange: #773d12;
    --yellow: #624909;
    --red: #942b3c;
    --purple: #56367f;
    --blue: #214d80;
    --shadow: 0 8px 22px rgba(28, 43, 56, .07);
    --portal-shadow: 0 12px 34px rgba(28, 43, 56, .07);
    --portal-modal-shadow: 0 24px 70px rgba(28, 43, 56, .18);
    --panel-highlight: rgba(237, 241, 244, .35);
    --panel-surface-top: var(--bg-2);
    --panel-surface-bottom: color-mix(in srgb, var(--card) 92%, var(--bg-3));
    --panel-inset: inset 0 1px 0 var(--panel-highlight), inset 0 -1px 0 rgba(28, 43, 56, .05);
    --panel-elevation: 0 10px 28px rgba(28, 43, 56, .055), 0 2px 5px rgba(28, 43, 56, .04);
    --scroll: rgba(47, 64, 78, .32);
    --scroll-hover: rgba(47, 64, 78, .48);
}

/* These inherit resolved colors from html, avoiding a custom-property cycle. */
html[data-theme][data-mode="light"] body {
    --accent: var(--portal-accent);
    --accent-2: var(--portal-accent);
    --glow: 0 0 0 1px color-mix(in srgb, var(--portal-accent) 24%, transparent), 0 6px 16px rgba(28, 43, 56, .08);
}
html[data-theme][data-mode="light"] .theme-fx { opacity: var(--theme-fx-light-opacity, .1); }
html[data-theme][data-mode="light"] input:is([type="text"], [type="number"], [type="password"], [type="url"], [type="file"], [type="email"], [type="search"], [type="date"], [type="time"], [type="datetime-local"]),
html[data-theme][data-mode="light"] select, html[data-theme][data-mode="light"] textarea { border-color: #788792; }
html[data-theme][data-mode="light"] input::placeholder, html[data-theme][data-mode="light"] textarea::placeholder { opacity: 1; }
html[data-theme][data-mode="light"] :is(.store-old-price, .store-fee-part, .store-auto-desc + .store-desc) { color: var(--text-dim); opacity: 1; }
html[data-theme][data-mode="light"] .btn-primary:hover { color: var(--portal-action-text); background: color-mix(in srgb, var(--portal-action) 92%, #172634); border-color: var(--portal-action); }
html[data-theme][data-mode="light"] .dropdown-menu,
html[data-theme][data-mode="light"] .mini-cart-panel { background: var(--bg-2); color: var(--text); }
html[data-theme][data-mode="light"] .panel-server-map { opacity: .48; }
html:root[data-theme][data-mode="light"] .badge {
    color: var(--light-badge-ink, var(--text-dim));
    background: color-mix(in srgb, var(--light-badge-ink, var(--text-dim)) 9%, var(--card));
    box-shadow: none;
    animation: none;
}
html[data-theme][data-mode="light"] :is(.badge-active, .badge-online) { --light-badge-ink: var(--green); }
html[data-theme][data-mode="light"] :is(.badge-unbanned, .badge-unmuted, .badge-role-admin) { --light-badge-ink: var(--blue); }
html[data-theme][data-mode="light"] :is(.badge-perm, .badge-role-root) { --light-badge-ink: var(--portal-accent); }
html[data-theme][data-mode="light"] .badge-gag { --light-badge-ink: var(--orange); }
html[data-theme][data-mode="light"] .badge-mute { --light-badge-ink: var(--purple); }
html[data-theme][data-mode="light"] .badge-warn { --light-badge-ink: var(--yellow); }
html[data-theme][data-mode="light"] .badge-silence { --light-badge-ink: var(--red); }

html[data-theme][data-mode="light"] :is(.hint, .muted, .cc-label, .stat .label, .portal-kicker, .panel-current-server, .portal-hero-footer) {
    color: var(--text-dim);
    text-shadow: none;
}
html[data-theme][data-mode="light"] :is(.card-title, .stat .value, .panel-activity-total > strong, .panel-hud-card strong) { color: var(--text); }
html[data-theme][data-mode="light"] .stat.accent .value { color: var(--portal-accent); }
html[data-theme][data-mode="light"] .stat.orange .value { color: var(--orange); }
html[data-theme][data-mode="light"] .stat.green .value { color: var(--green); }
html[data-theme][data-mode="light"] .stat.purple .value { color: var(--purple); }
html[data-theme][data-mode="light"] .panel-live-hero :is(.panel-hud-card, .portal-hero-note) {
    background: var(--card);
    border-color: var(--portal-line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-theme][data-mode="light"] :is(.card, .contest-card, .store-card, .modal, .auth-card, .popup, .update-hud-box, .panel-nav-panel, .dropdown-menu, .mini-cart-panel) {
    background: var(--panel-surface);
    border-color: var(--portal-line);
    box-shadow: var(--panel-inset), var(--panel-elevation);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-theme][data-mode="light"] :is(.portal-header, .portal-drawer, .user-chip) {
    background: var(--bg-2);
    border-color: var(--portal-line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-theme][data-mode="light"] .portal-drawer::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-theme][data-mode="light"] .table-wrap { backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme][data-mode="light"] :is(input, select, textarea) { backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme][data-mode="light"] :is(.store-type-vip, .store-type-both) { color: var(--purple); }
html[data-theme][data-mode="light"] .store-type-admin { color: var(--blue); }
html[data-theme][data-mode="light"] .panel-hud-card span { color: var(--text-dim); }
html[data-theme][data-mode="light"] .panel-hud-sparkline,
html[data-theme][data-mode="light"] .panel-chart-line { filter: none; }
html[data-theme][data-mode="light"] .activity-grid { stroke: color-mix(in srgb, var(--text-dim) 28%, transparent); }
html[data-theme][data-mode="light"] .panel-activity-track { background: color-mix(in srgb, var(--portal-accent) 9%, var(--card)); }
html[data-theme][data-mode="light"] .panel-activity-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--portal-accent) 64%, var(--card)), color-mix(in srgb, var(--portal-accent) 24%, var(--card))); }
html[data-theme][data-mode="light"] .panel-activity-column.is-peak .panel-activity-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--portal-accent) 82%, var(--card)), color-mix(in srgb, var(--portal-accent) 35%, var(--card))); }
html[data-theme][data-mode="light"] .tabs [data-tab].active,
html[data-theme][data-mode="light"] .subtab.active { color: var(--portal-accent); }
html[data-theme][data-mode="light"] .modal-overlay { background: rgba(23, 37, 48, .48); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme][data-mode="light"] :is(.bp-yes, .code-copy .btn.copied) { color: var(--green); background: color-mix(in srgb, var(--green) 9%, var(--card)); }
html[data-theme][data-mode="light"] :is(.bp-no, .cart-toast.is-error) { color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--card)); }
html[data-theme][data-mode="light"] :is(.cart-timer.is-urgent, .cart-warn, .pkg-sum-off, .store-block-icon) { color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, var(--card)); }
html[data-theme][data-mode="light"] .rank-badge {
    color: var(--rank-ink, var(--text));
    background: color-mix(in srgb, var(--rank-ink, var(--text)) 9%, var(--card));
    border-color: color-mix(in srgb, var(--rank-ink, var(--text)) 38%, var(--border));
}
html[data-theme][data-mode="light"] .rank-silver { --rank-ink: #435260; }
html[data-theme][data-mode="light"] .rank-gold { --rank-ink: #634900; }
html[data-theme][data-mode="light"] .rank-green { --rank-ink: var(--green); }
html[data-theme][data-mode="light"] .rank-blue { --rank-ink: var(--blue); }
html[data-theme][data-mode="light"] .rank-purple { --rank-ink: var(--purple); }
html[data-theme][data-mode="light"] .rank-red { --rank-ink: var(--red); }

html[data-theme] .panel-activity-card { padding: 28px; min-height: 380px; }
.panel-activity-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.panel-activity-total { display: flex; flex-direction: column; gap: 7px; }
.panel-activity-total > strong { color: var(--text); font: 700 58px/.95 var(--portal-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.panel-activity-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.panel-activity-highlights > div { padding-left: 15px; border-left: 1px solid var(--portal-line); display: flex; flex-direction: column; gap: 3px; }
.panel-activity-highlights > div > span { color: var(--portal-muted); font-size: 10px; }
.panel-activity-highlights strong { color: var(--portal-accent); font: 700 26px/1.1 var(--portal-display); font-variant-numeric: tabular-nums; }
.panel-activity-highlights small { color: var(--portal-muted); font-size: 11px; }
html[data-theme] .panel-activity-chart { display: block; padding: 0; min-height: 250px; }
.panel-activity-plot { position: relative; height: 220px; border-radius: 12px; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--portal-accent) 6%, transparent), transparent 75%); }
.panel-activity-trend { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1; }
.panel-activity-trend .activity-grid { stroke-dasharray: 2 7; }
.panel-activity-columns, .panel-activity-hours { display: grid; grid-template-columns: repeat(var(--activity-columns), minmax(0, 1fr)); }
.panel-activity-columns { position: absolute; inset: 0; }
.panel-activity-column { position: relative; min-width: 0; border: 0; padding: 0; background: none; color: var(--text); cursor: pointer; border-radius: 9px; }
.panel-activity-column:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--portal-accent) 5%, transparent); z-index: 3; }
.panel-activity-column:focus-visible { outline-offset: -2px; }
.panel-activity-track { position: absolute; top: 12%; bottom: 6%; width: 42%; min-width: 16px; max-width: 48px; left: 50%; translate: -50% 0; border-radius: 8px 8px 3px 3px; background: color-mix(in srgb, var(--portal-accent) 4%, transparent); overflow: hidden; }
.panel-activity-fill { position: absolute; bottom: 0; left: 0; right: 0; height: var(--bar-height); border-radius: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--portal-accent) 54%, transparent), color-mix(in srgb, var(--portal-accent) 10%, transparent)); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--portal-accent) 62%, transparent); transform-origin: bottom; }
.panel-activity-column.is-peak .panel-activity-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--portal-accent) 80%, transparent), color-mix(in srgb, var(--portal-accent) 14%, transparent)); }
.panel-chart-animate .panel-activity-fill { animation: panelActivityBar .85s var(--bar-delay) cubic-bezier(.2, .7, .3, 1) both; }
.panel-activity-value { position: absolute; top: calc(var(--point-y) - 27px); left: 50%; translate: -50% 0; max-width: calc(100% - 6px); padding: 3px 6px; border-radius: 5px; background: var(--bg-2); color: var(--text); font-size: 12px; font-weight: 650; line-height: 1.4; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); }
.panel-activity-column.is-peak .panel-activity-value { color: var(--portal-accent); }
.panel-activity-hours { margin-top: 10px; color: var(--portal-muted); font: 10px/1.4 ui-monospace, Consolas, monospace; text-align: center; }
.panel-activity-tooltip { position: absolute; left: 50%; bottom: calc(100% - var(--point-y) + 17px); translate: -50% 4px; width: 142px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid var(--portal-line); border-radius: 10px; background: var(--bg-2); box-shadow: var(--portal-shadow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, translate .18s; }
.panel-activity-tooltip > small, .panel-activity-tooltip > span { color: var(--portal-muted); font-size: 10px; }
.panel-activity-tooltip > strong { color: var(--text); font: 700 30px/1 var(--portal-display); font-variant-numeric: tabular-nums; }
.panel-activity-column:first-child .panel-activity-tooltip { left: 4px; translate: 0 4px; }
.panel-activity-column:last-child .panel-activity-tooltip { left: auto; right: 4px; translate: 0 4px; }
.panel-activity-column:is(:hover, :focus-visible) .panel-activity-tooltip { opacity: 1; visibility: visible; translate: -50% 0; }
.panel-activity-column:is(:first-child, :last-child):is(:hover, :focus-visible) .panel-activity-tooltip { translate: 0 0; }
.panel-activity-column:is(:hover, :focus-visible) .panel-activity-value { opacity: 0; }
.panel-activity-empty { position: absolute; left: 12px; right: 12px; top: 38%; text-align: center; color: var(--portal-muted); font-size: 12px; pointer-events: none; }
html[data-theme] .panel-activity-recent { border-top: 1px solid var(--portal-line); padding: 24px; }
.panel-activity-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
html[data-theme] .panel-activity-recent-head .card-title { margin: 0; }
.panel-recent-count { display: grid; place-items: center; min-width: 27px; height: 27px; padding: 0 6px; color: var(--portal-accent); background: var(--portal-tint); border-radius: 8px; font-size: 11px; font-weight: 650; }
.panel-recent-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.panel-recent-player { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border: 1px solid transparent; border-radius: 11px; transition: background .2s, border-color .2s; }
.panel-recent-player:hover { background: var(--portal-tint); border-color: var(--portal-soft-line); color: var(--text); }
html[data-theme] .panel-recent-player .player-avatar { width: 41px; height: 41px; border-radius: 11px; flex: none; }
.panel-recent-info { min-width: 0; flex: 1; }
.panel-recent-info .pname { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13px; font-weight: 600; }
.panel-recent-info > span { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; color: var(--portal-muted); font-size: 10px; line-height: 1.4; }
.panel-recent-marker { width: 4px; height: 4px; border-radius: 50%; background: var(--portal-subtle); margin-right: 1px; }
.panel-recent-player > svg { width: 16px; height: 16px; flex: none; color: var(--portal-subtle); }
@keyframes panelActivityBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 620px) {
    html[data-theme] .panel-activity-card, html[data-theme] .panel-activity-recent { padding: 20px; }
    .panel-activity-header { align-items: flex-start; flex-wrap: wrap; gap: 19px; }
    .panel-activity-highlights { gap: 18px; }
    .panel-activity-total > strong { font-size: 49px; }
    .panel-activity-plot { height: 200px; }
    html[data-theme] .panel-activity-chart { min-height: 230px; }
    .panel-activity-value { padding: 3px 4px; font-size: 11px; }
    .panel-activity-hours { font-size: 9px; }
}

html[data-theme] .steam-required::before { content: none; }
.auth-live-scene::before, .auth-live-scene::after { content: none; }
.auth-live-scene { min-width: 0; gap: 28px; padding: 38px; }
.auth-live-scene .panel-server-map { width: 100%; opacity: .78; object-position: center; }
.auth-live-scene .panel-server-slide::before { background: linear-gradient(0deg, var(--bg-2), color-mix(in srgb, var(--bg-2) 94%, transparent) 26%, color-mix(in srgb, var(--bg-2) 55%, transparent) 55%, color-mix(in srgb, var(--bg-2) 12%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--bg-2) 40%, transparent), transparent 80%); }
.auth-live-scene .auth-scene-brand { position: relative; z-index: 2; align-self: flex-start; padding: 8px 12px; border: 1px solid var(--portal-line); border-radius: 11px; background: color-mix(in srgb, var(--bg-2) 82%, transparent); }
.auth-live-copy { position: relative; z-index: 2; min-width: 0; margin-top: auto; padding-top: 150px; padding-right: 8px; }
.auth-live-copy .panel-live-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--portal-line); border-radius: 999px; background: var(--bg-2); color: var(--portal-muted); font-size: 10px; font-weight: 600; }
.auth-live-copy h1 { color: var(--text); font: 700 clamp(30px, 3.9vw, 54px)/1.06 var(--portal-display); letter-spacing: -.025em; margin: 18px 0 24px; overflow-wrap: anywhere; }
.auth-live-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.auth-live-details > div { padding: 13px 15px; border: 1px solid var(--portal-line); border-radius: 11px; background: color-mix(in srgb, var(--bg-2) 86%, transparent); }
.auth-live-details dt { color: var(--portal-muted); font-size: 10px; margin-bottom: 5px; }
.auth-live-details dd { margin: 0; color: var(--text); font: 650 20px/1.2 var(--portal-display); overflow-wrap: anywhere; }
.auth-live-details .auth-live-address { grid-column: 1 / -1; }
.auth-live-details .auth-live-address dd { font: 12px/1.4 ui-monospace, Consolas, monospace; }
html[data-theme][data-mode] .auth-live-scene .portal-cta { width: auto; min-height: 43px; }
.auth-live-scene .portal-cta svg { width: 15px; height: 15px; }
html[data-theme][data-mode="light"] .auth-live-scene .panel-server-map { opacity: .48; }
@media (max-width: 900px) {
    .auth-live-scene { min-height: 430px; padding: 26px; }
    .auth-live-copy { padding-top: 85px; }
    .auth-live-copy h1 { font-size: 35px; }
}

html[data-theme][data-mode] .effects-toggle {
    flex: none;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    background: var(--bg-2);
    color: var(--text-dim);
    border: 1px solid var(--border);
    font: 700 10px/1 ui-monospace, Consolas, monospace;
}
html[data-theme][data-mode] .effects-toggle[data-effective="reduced"] {
    color: var(--text);
    border-color: var(--portal-accent);
}
.effects-tools { position: fixed; top: 16px; right: 16px; z-index: 80; }

html.effects-page-hidden *, html.effects-page-hidden *::before, html.effects-page-hidden *::after {
    animation-play-state: paused !important;
}
html[data-effects="reduced"] *, html[data-effects="reduced"] *::before, html[data-effects="reduced"] *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
}
html[data-effects="reduced"] { scroll-behavior: auto !important; }
html[data-effects="reduced"] .theme-fx,
html[data-effects="reduced"] .panel-spotlight-card::after,
html[data-effects="reduced"] .theme-preview::before,
html[data-effects="reduced"] .theme-preview::after { display: none !important; }
html[data-effects="reduced"] :is(
    .portal-hero-note, .panel-hud-card, .portal-signal, .portal-network-lines i,
    .brand img, .nav-item.active, .badge-active, .badge-perm, .tab-badge,
    .nav-dot, .tabs [data-tab].active, .server-status .dot, .install-logo,
    .theme-preview, .theme-preview *
) { animation: none !important; }
html[data-effects="reduced"] .portal-hero::before,
html[data-effects="reduced"] .portal-hero-grid::after,
html[data-effects="reduced"] .auth-scene::before { animation: none !important; }
html[data-effects="reduced"] :is(
    .portal-reveal, .modal, .auth-card, .panel-hud-sparkline, .panel-chart-line,
    .panel-rank-placeholder, .benefits-card-icon
) { filter: none !important; }
html[data-effects="reduced"][data-theme] :is(
    .panel-hud-card, .portal-hero-note, .dropdown-menu, .popup, .mini-cart-panel
) {
    background: var(--card) !important;
    box-shadow: none !important;
}
html[data-effects="reduced"] .panel-server-slide::after { mix-blend-mode: normal; }
html[data-effects="reduced"]::view-transition-old(root),
html[data-effects="reduced"]::view-transition-new(root) { filter: none !important; }

html[data-effects="reduced"]:is([data-theme="starfield"], [data-theme="carbon-hud"], [data-theme="terminal-green"], [data-theme="cyber-grid"], [data-theme="nord"]) .theme-fx { display: block !important; }
html[data-effects="reduced"] .theme-fx::before,
html[data-effects="reduced"] .theme-fx::after,
html[data-effects="reduced"] .theme-terminal * {
    animation: none !important;
    filter: none !important;
    clip-path: none !important;
}
body:has(.skins-app) .theme-terminal { display: none !important; }