/* Outbreak UI v6 — global themes, responsive polish and admin modal workflow */
:root,
html[data-theme="dark"] {
    --bg: #080b0d;
    --bg-deep: #040607;
    --bg-soft: #0d1215;
    --surface: rgba(18, 24, 28, .88);
    --surface-solid: #12181c;
    --surface-2: #182025;
    --surface-3: #202a30;
    --text: #f6f8f8;
    --text-soft: #cbd2d4;
    --muted: #909ca1;
    --line: rgba(255,255,255,.10);
    --line-strong: rgba(255,255,255,.18);
    --input-bg: rgba(255,255,255,.045);
    --card-bg: linear-gradient(180deg, rgba(22,29,34,.92), rgba(12,16,19,.94));
    --header-bg: rgba(8,11,13,.88);
    --nav-bg: rgba(8,11,13,.98);
    --modal-bg: #11181d;
    --shadow: 0 24px 72px rgba(0,0,0,.36);
    --shadow-soft: 0 14px 38px rgba(0,0,0,.22);
}

html[data-theme="light"] {
    --bg: #f4f1eb;
    --bg-deep: #e9e4dc;
    --bg-soft: #fbfaf7;
    --surface: rgba(255,255,255,.88);
    --surface-solid: #ffffff;
    --surface-2: #f7f4ef;
    --surface-3: #eee9e1;
    --text: #192126;
    --text-soft: #3f4a50;
    --muted: #6e797e;
    --line: rgba(31,43,49,.12);
    --line-strong: rgba(31,43,49,.21);
    --input-bg: rgba(255,255,255,.92);
    --card-bg: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,247,242,.96));
    --header-bg: rgba(250,248,244,.91);
    --nav-bg: rgba(250,248,244,.98);
    --modal-bg: #fffefb;
    --shadow: 0 24px 64px rgba(47,39,30,.14);
    --shadow-soft: 0 12px 34px rgba(47,39,30,.09);
    --accent-dark: #9d2027;
    --accent-glow: rgba(229,45,53,.15);
}

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
html, body { background-color: var(--bg); }
body {
    color: var(--text);
    background:
        radial-gradient(circle at 78% 5%, rgba(229,45,53,.075), transparent 28%),
        radial-gradient(circle at 6% 56%, rgba(39,134,105,.04), transparent 26%),
        var(--bg) !important;
    transition: color .22s ease, background-color .22s ease;
}

html[data-theme="light"] .noise { opacity: .012; mix-blend-mode: multiply; }
html[data-theme="light"] .ambient { opacity: .075; }
html[data-theme="light"] ::selection { color:#fff; }
html[data-theme="light"] ::-webkit-scrollbar-track { background:#ece8e1; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { border-color:#ece8e1; background:#b8b3ab; }

/* Universal interactive controls */
.btn,
.theme-toggle,
.nav-toggle,
.modal-close,
.admin-modal-close,
.drag-handle,
.admin-tabs button,
.store-tabs button,
.lang-btn {
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover,
.theme-toggle:hover,
.admin-tabs button:hover,
.store-tabs button:hover { transform: translateY(-1px); }
.btn:active,
.theme-toggle:active { transform: translateY(0) scale(.98); }
:where(button,a,input,select,textarea):focus-visible {
    outline: 3px solid rgba(229,45,53,.26);
    outline-offset: 3px;
}
.btn-icon { width:52px; min-width:52px; padding:0; }

.theme-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:46px;
    padding:0 15px;
    border:1px solid var(--line);
    border-radius:14px;
    color:var(--text-soft);
    background:var(--input-bg);
    font:inherit;
    font-size:.78rem;
    font-weight:850;
    white-space:nowrap;
    cursor:pointer;
    box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.theme-toggle:hover { color:var(--text); border-color:var(--line-strong); box-shadow:var(--shadow-soft); }
.theme-toggle svg { width:16px; height:16px; color:var(--warning); }

/* Header and navigation */
.site-header,
.site-header.scrolled {
    border-color:var(--line);
    background:var(--header-bg) !important;
    box-shadow:0 10px 32px rgba(0,0,0,.10);
    backdrop-filter:blur(20px) saturate(130%);
}
html[data-theme="light"] .site-header,
html[data-theme="light"] .site-header.scrolled { box-shadow:0 9px 28px rgba(47,39,30,.08); }
.main-nav a { color:var(--text-soft); }
.main-nav a:hover { color:var(--text); background:var(--input-bg); }
.brand-mark { border-color:var(--line); background:var(--input-bg); }
.mini-status { border-color:var(--line); background:var(--input-bg); }

/* Main surfaces */
:is(.panel,.auth-card,.hero-command,.queue-card-preview,.feature-card,.world-card,.journey-step,.about-columns article,
.rule-category,.dashboard-card,.identity-card,.character-card,.order-card,.ticket-create-card,.ticket-list-card,
.profile-preview-card,.profile-editor-form,.store-card,.cart-panel,.checkout-card,.admin-stat-card,.admin-product-card,
.admin-user-table,.admin-ticket-card,.admin-ticket-toolbar,.admin-user-toolbar,.admin-user-overview article,
.admin-ticket-stats article,.user-overview-grid article,.user-info-list>div,.payment-toolbar-v49,.payment-table-v49,
.payment-user-card-v49,.payment-items-card-v49,.payment-actions-v49,.payment-receipt-v49,.bank-detection-preview) {
    border-color:var(--line) !important;
    color:var(--text);
    background:var(--card-bg) !important;
    box-shadow:var(--shadow-soft);
}

:is(.field input,.field textarea,.field select,.admin-search input,.admin-user-search input,.admin-ticket-toolbar input,
.admin-ticket-toolbar select,.admin-user-toolbar select,.payment-search-v49 input,.payment-actions-v49 textarea,
input[type="search"],input[type="email"],input[type="password"],input[type="number"],input[type="text"],select,textarea) {
    border-color:var(--line) !important;
    color:var(--text) !important;
    background:var(--input-bg) !important;
    box-shadow:none !important;
}
:is(input,textarea)::placeholder { color:var(--muted); opacity:.78; }
select option { color:var(--text); background:var(--surface-solid); }
.field>span,.field>label,.panel-head p,.admin-section-toolbar p { color:var(--text-soft); }
.field small,.panel small,.empty-copy { color:var(--muted); }
.upload-field { border-color:var(--line) !important; color:var(--text-soft); background:var(--input-bg) !important; }
.upload-field:hover { border-color:var(--accent) !important; }

html[data-theme="light"] :is(.hero-command,.queue-card-preview,.auth-card,.panel,.store-card,.rule-category,.admin-product-card) {
    backdrop-filter:blur(16px) saturate(115%);
}
html[data-theme="light"] :is(.hero-vignette,.queue-backdrop::after,.final-bg::after,.auth-visual::after) { opacity:.78; }
html[data-theme="light"] .hero-copy,
html[data-theme="light"] .auth-visual-copy,
html[data-theme="light"] .final-cta-copy { color:#fff; }

/* Footer */
.site-footer { border-color:var(--line); color:var(--text-soft); background:var(--bg-soft) !important; }
.footer-main,.footer-bottom { border-color:var(--line); }
.footer-links a:hover { color:var(--text); background:var(--input-bg); }

/* License rows: value only, platform-independent */
.account-license-list-block>div {
    justify-content:flex-start;
    border-color:var(--line) !important;
    background:var(--input-bg) !important;
}
.account-license-list-block code { width:100%; color:var(--text); }
.account-license-list-block small { display:none !important; }

/* Admin shell */
.admin-layout { color:var(--text); background:var(--bg) !important; }
.admin-sidebar {
    border-color:var(--line) !important;
    background:linear-gradient(180deg,var(--surface-solid),var(--bg-soft)) !important;
    box-shadow:-8px 0 28px rgba(0,0,0,.08);
}
.admin-brand,.admin-profile,.admin-back { border-color:var(--line) !important; }
.admin-profile,.admin-back { background:var(--input-bg) !important; }
.admin-nav a { color:var(--muted); border:1px solid transparent; }
.admin-nav a:hover,.admin-nav a.active {
    color:var(--text) !important;
    border-color:rgba(229,45,53,.22) !important;
    background:linear-gradient(90deg,rgba(229,45,53,.16),rgba(229,45,53,.035)) !important;
}
.admin-main { min-width:0; }
.admin-top-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.admin-tabs {
    display:flex;
    gap:8px;
    padding:6px;
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:17px;
    background:var(--input-bg);
    scrollbar-width:none;
}
.admin-tabs::-webkit-scrollbar { display:none; }
.admin-tabs button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex:0 0 auto;
    min-height:45px;
    padding:0 18px;
    border:0;
    border-radius:12px;
    color:var(--muted);
    background:transparent;
    font:inherit;
    font-size:.82rem;
    font-weight:900;
    cursor:pointer;
}
.admin-tabs button.active { color:#fff; background:var(--accent); box-shadow:0 9px 24px var(--accent-glow); }
.admin-section-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:16px;
    padding:22px 24px;
}
.admin-section-toolbar h2 { margin:3px 0 2px; }
.admin-section-toolbar p { margin:0; font-size:.82rem; }
.admin-product-list { gap:12px; }
.admin-product-card { grid-template-columns:72px minmax(0,1fr) auto; }
.admin-product-copy { min-width:0; }
.admin-product-copy h3,.admin-product-copy p,.admin-product-copy span { overflow-wrap:anywhere; }
.admin-card-actions form { margin:0; }
.drag-handle {
    display:inline-grid;
    place-items:center;
    width:48px;
    height:48px;
    border:1px solid var(--line);
    border-radius:14px;
    color:var(--muted);
    background:var(--input-bg);
    cursor:grab;
}
.drag-handle:active { cursor:grabbing; }
.sortable-ghost { opacity:.35; }
.sortable-chosen { border-color:rgba(229,45,53,.45) !important; }

/* Admin form modals */
.admin-form-modal[hidden] { display:none !important; }
.admin-form-modal {
    position:fixed;
    z-index:12000;
    inset:0;
    display:grid;
    place-items:center;
    padding:24px;
}
.admin-form-modal-backdrop {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:rgba(2,5,7,.76);
    backdrop-filter:blur(10px);
    cursor:default;
}
html[data-theme="light"] .admin-form-modal-backdrop { background:rgba(44,39,32,.48); }
.admin-form-dialog {
    position:relative;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    width:min(880px,calc(100vw - 32px));
    max-height:min(92vh,900px);
    overflow:hidden;
    border:1px solid var(--line-strong);
    border-radius:26px;
    color:var(--text);
    background:var(--modal-bg);
    box-shadow:0 34px 110px rgba(0,0,0,.44);
    animation:adminModalIn .2s ease both;
}
.admin-form-dialog-small { width:min(600px,calc(100vw - 32px)); }
.admin-form-dialog>header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:20px 22px;
    border-bottom:1px solid var(--line);
    background:var(--surface-2);
}
.admin-form-dialog>header h2 { margin:3px 0 0; font-size:1.18rem; }
.admin-modal-form { overflow:auto; padding:22px; }
.admin-modal-actions {
    position:sticky;
    bottom:-22px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin:6px -22px -22px;
    padding:16px 22px;
    border-top:1px solid var(--line);
    background:var(--modal-bg);
}
@keyframes adminModalIn { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:none; } }

/* Existing user/payment modals */
.user-modal-backdrop,.payment-modal-backdrop-v49 { background:rgba(2,5,7,.76) !important; }
.user-modal-card,.payment-dialog-v49 {
    border-color:var(--line-strong) !important;
    color:var(--text) !important;
    background:var(--modal-bg) !important;
    box-shadow:0 34px 110px rgba(0,0,0,.42) !important;
}
.user-modal-head,.user-modal-tabs,.user-modal-footer,.payment-dialog-v49>header { border-color:var(--line) !important; background:var(--surface-2) !important; }
.user-modal-tabs button { color:var(--muted); }
.user-modal-tabs button.active { color:var(--text); background:var(--input-bg); }
.payment-table-head-v49 { color:var(--muted) !important; background:var(--surface-2) !important; }
.payment-table-row-v49 { color:var(--text) !important; border-color:var(--line) !important; }
.payment-table-row-v49:hover { background:var(--input-bg) !important; }
.payment-order-v49 small,.payment-product-v49 small,.payment-user-v49 small,
.payment-dialog-v49>header p,.payment-user-card-v49>div>small,.payment-user-card-v49 dt,.payment-items-card-v49 article small { color:var(--muted) !important; }
.payment-user-card-v49 dd,.payment-items-card-v49 article b,.payment-items-card-v49 article strong { color:var(--text) !important; }
.payment-items-card-v49 article,.payment-user-card-v49 dl>div { background:var(--input-bg) !important; }
.payment-receipt-v49>a { background:var(--bg-deep) !important; }

/* Date picker in both themes */
.datepicker-container { z-index:13050 !important; font-family:var(--font) !important; }
html[data-theme="dark"] .datepicker-container .datepicker-plot-area {
    border-color:var(--line-strong) !important;
    color:var(--text) !important;
    background:#ffffff !important;
    box-shadow:var(--shadow) !important;
}
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-day-view .table-days td span,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-year-view .year-item,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-month-view .month-item { color:#000000 !important; }
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-day-view .table-days td span:hover,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-year-view .year-item:hover,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-month-view .month-item:hover { color:#fff !important; background:var(--accent) !important; }

/* Public/auth/dashboard adaptive text */
html[data-theme="light"] :is(.auth-panel,.dashboard-content,.profile-editor,.ticket-shell,.ticket-thread-shell,.store-shell,.orders-shell,.rules-shell,.about-shell) { color:var(--text); }
html[data-theme="light"] :is(.dashboard-sidebar,.store-sidebar,.rules-nav) { border-color:var(--line); background:var(--surface-solid) !important; }
html[data-theme="light"] :is(.dashboard-nav a,.rules-nav a,.store-tabs button) { color:var(--muted); }
html[data-theme="light"] :is(.dashboard-nav a:hover,.dashboard-nav a.active,.rules-nav a:hover,.rules-nav a.active) { color:var(--text); background:var(--input-bg) !important; }
html[data-theme="light"] .auth-panel { background:var(--bg) !important; }
html[data-theme="light"] .auth-card { color:var(--text); }
html[data-theme="light"] .auth-card h1,
html[data-theme="light"] .panel h2,
html[data-theme="light"] .panel h3 { color:var(--text); }
html[data-theme="light"] .rule-category li { color:var(--text-soft); background:var(--input-bg) !important; }
html[data-theme="light"] .admin-code-block { color:#27333a; background:#eeebe5 !important; border-color:var(--line); }

/* Tables and long content */
:where(table) { width:100%; border-collapse:collapse; }
:where(th,td) { border-color:var(--line) !important; }
:where(code,pre) { max-width:100%; overflow-wrap:anywhere; }
.admin-user-table,.payment-table-v49,.admin-orders-list { overflow:hidden; }

/* Large screens */
@media (min-width:1600px) {
    :root { --container:min(1640px,calc(100vw - 96px)); --container-narrow:min(1380px,calc(100vw - 96px)); }
    .admin-main { padding:40px clamp(36px,3.2vw,62px); }
    .admin-product-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .admin-product-list>.empty-state { grid-column:1/-1; }
}

/* Tablet and compact desktop */
@media (max-width:1100px) {
    .header-actions { gap:8px; }
    .theme-toggle span { display:none; }
    .theme-toggle { width:46px; min-width:46px; padding:0; }
    .admin-section-toolbar { align-items:flex-start; }
    .admin-product-card { grid-template-columns:64px minmax(0,1fr); }
    .admin-product-icon { width:64px; height:64px; }
    .admin-card-actions { grid-column:1/-1; justify-content:flex-end; }
}

/* Mobile */
@media (max-width:760px) {
    :root { --header-h:76px; --container:min(100% - 24px,720px); --container-narrow:min(100% - 24px,720px); }
    body { font-size:15px; }
    .site-header,.site-header.scrolled { grid-template-columns:auto minmax(0,1fr) auto; gap:8px; padding-inline:12px; }
    .brand { grid-column:1; }
    .nav-toggle { grid-column:3; }
    .header-actions {
        grid-column:2;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:flex-end;
        gap:6px;
        min-width:0;
    }
    .header-actions .mini-status { display:none; }
    .header-actions .btn,
    .header-actions .theme-toggle {
        flex:0 1 auto;
        width:auto !important;
        min-width:42px;
        min-height:42px;
        padding-inline:11px;
        border-radius:12px;
    }
    .header-actions .btn span,.header-actions .theme-toggle span { display:none; }
    .main-nav { background:var(--nav-bg) !important; }
    .main-nav a { background:var(--input-bg) !important; }

    .admin-main { padding:18px 12px 90px !important; }
    .admin-topbar { gap:13px; margin-bottom:18px; }
    .admin-top-actions { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .admin-top-actions:has(> :only-child) { grid-template-columns:1fr; }
    .admin-top-actions .btn,.admin-top-actions .theme-toggle { width:100%; }
    .admin-theme-toggle { min-width:0; }
    .admin-theme-toggle span { display:inline; }
    .admin-sidebar {
        height:76px !important;
        background:var(--header-bg) !important;
    }
    .admin-nav { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
    .admin-nav a { min-width:0; padding:0 2px !important; }
    .admin-nav a span { overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; font-size:.58rem !important; }

    .admin-tabs { margin-bottom:14px; }
    .admin-tabs button { min-height:42px; padding-inline:14px; }
    .admin-section-toolbar { align-items:stretch; flex-direction:column; padding:18px; }
    .admin-section-toolbar .btn { width:100%; }
    .admin-product-card { grid-template-columns:54px minmax(0,1fr); gap:11px; padding:13px; }
    .admin-product-icon { width:54px; height:54px; border-radius:14px; }
    .admin-card-actions { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; width:100%; }
    .admin-card-actions .btn { width:100%; min-width:0; }
    .admin-card-actions form { width:100%; }
    .admin-card-actions form .btn { width:100%; }

    .admin-form-modal { align-items:end; padding:0; }
    .admin-form-dialog,.admin-form-dialog-small {
        width:100%;
        max-height:94svh;
        border-right:0;
        border-bottom:0;
        border-left:0;
        border-radius:24px 24px 0 0;
    }
    .admin-form-dialog>header { padding:16px; }
    .admin-modal-form { padding:16px; }
    .admin-modal-actions { bottom:-16px; margin:4px -16px -16px; padding:13px 16px calc(13px + env(safe-area-inset-bottom)); }
    .admin-modal-actions .btn { flex:1; min-width:0; }

    .user-modal { align-items:end !important; padding:0 !important; }
    .user-modal-card { width:100% !important; max-height:95svh !important; border-radius:24px 24px 0 0 !important; }
    .user-modal-tabs { overflow-x:auto; flex-wrap:nowrap !important; }
    .user-modal-tabs button { flex:0 0 auto; }
    .payment-modal-v49 { align-items:end; }

    .field-grid { grid-template-columns:1fr !important; }
    .btn:not(.header-actions .btn):not(.admin-card-actions .btn):not(.admin-modal-actions .btn) { max-width:100%; }
}

@media (max-width:430px) {
    .site-header,.site-header.scrolled { padding-inline:8px; }
    .brand-mark { width:42px; height:42px; border-radius:13px; }
    .header-actions .btn,.header-actions .theme-toggle,.nav-toggle { min-width:40px; width:40px !important; padding:0; }
    .header-actions { gap:4px; }
    .admin-top-actions { grid-template-columns:1fr; }
    .admin-product-copy span { font-size:.68rem; }
    .admin-product-copy h3 { font-size:.95rem; }
    .admin-card-actions { grid-template-columns:44px minmax(0,1fr) 44px; }
    .drag-handle,.admin-card-actions .btn { min-height:44px; height:44px; }
    .admin-nav a span { font-size:.52rem !important; }
}

@media (prefers-reduced-motion:reduce) {
    .admin-form-dialog { animation:none; }
}
.theme-toggle .theme-icon-moon { display:none; }
html[data-theme="light"] .theme-toggle .theme-icon-sun { display:none; }
html[data-theme="light"] .theme-toggle .theme-icon-moon { display:block; color:#43515a; }

/* Discord shortcuts */
.discord-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:46px;
    padding:0 14px;
    border:1px solid color-mix(in srgb,#5865f2 34%,var(--line));
    border-radius:14px;
    color:var(--text-soft);
    background:color-mix(in srgb,#5865f2 9%,var(--input-bg));
    font-size:.78rem;
    font-weight:850;
    white-space:nowrap;
    transition:transform .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.discord-link svg { width:17px; height:17px; color:#8f99ff; }
.discord-link:hover {
    color:var(--text);
    border-color:color-mix(in srgb,#5865f2 66%,var(--line));
    background:color-mix(in srgb,#5865f2 16%,var(--input-bg));
    box-shadow:0 12px 30px rgba(88,101,242,.16);
    transform:translateY(-1px);
}
.discord-link:active { transform:translateY(0) scale(.98); }
.footer-links .discord-link-footer { border-color:color-mix(in srgb,#5865f2 35%,var(--line)); }
.admin-discord-link { min-height:46px; }

/* Theme completion for page-specific surfaces */
:is(.status-banner,.queue-access-panel,.sidebar-server,.profile-summary,.dashboard-ticket-list>a,.dashboard-order-list>div,
.public-profile-card,.profile-since,.privacy-notice,.queue-license-help,.queue-license-locked,.account-recovery-warning,
.cart-drawer,.cart-item,.cart-total,.payment-card-display,.receipt-tracking-alert,.tracking-confirm,.admin-note,
.entitlement-grid article,.ticket-hero,.ticket-thread-header,.ticket-message-body,.ticket-reply-box,.ticket-closed-note,
.admin-compact-stats article,.admin-table-title,.admin-user-row,.admin-user-card-v2,.admin-user-kpis span,
.admin-user-quick-info>div,.admin-user-edit-form fieldset,.admin-list-row,.admin-code-block,.ticket-user-card,
.admin-ticket-reply,.admin-ticket-detail-head,.admin-ticket-conversation,.admin-ticket-sidebar>*,.pagination a,
.auth-switch,.checkbox-pill,.queue-register-notice,.identity-section,.store-tabs,.cart-button,.lang-switch) {
    border-color:var(--line) !important;
}

html[data-theme="light"] :is(.status-banner,.queue-access-panel,.sidebar-server,.profile-summary,.dashboard-ticket-list>a,.dashboard-order-list>div,
.public-profile-card,.profile-since,.privacy-notice,.queue-license-help,.queue-license-locked,.account-recovery-warning,
.cart-drawer,.cart-item,.cart-total,.payment-card-display,.receipt-tracking-alert,.tracking-confirm,.admin-note,
.entitlement-grid article,.ticket-hero,.ticket-thread-header,.ticket-list-card,.ticket-message-body,.ticket-reply-box,.ticket-closed-note,
.admin-compact-stats article,.admin-table-title,.admin-user-row,.admin-user-card-v2,.admin-user-kpis span,
.admin-user-quick-info>div,.admin-user-edit-form fieldset,.admin-list-row,.ticket-user-card,.admin-ticket-reply,
.admin-ticket-detail-head,.admin-ticket-conversation,.admin-ticket-sidebar>*,.pagination a,.auth-switch,.checkbox-pill,
.queue-register-notice,.identity-section,.cart-button,.lang-switch) {
    color:var(--text) !important;
    background:var(--card-bg) !important;
    box-shadow:var(--shadow-soft);
}
html[data-theme="light"] :is(.dashboard-sidebar,.cart-drawer,.admin-sidebar,.user-modal-card,.payment-dialog-v49,.admin-form-dialog) {
    color:var(--text) !important;
    background:var(--surface-solid) !important;
}
html[data-theme="light"] :is(.dashboard-nav a,.sidebar-logout,.profile-summary small,.ticket-list-card small,
.ticket-message-body header small,.admin-user-row-head,.admin-user-cell small,.admin-user-primary small,.admin-user-kpis small,
.admin-user-quick-info span,.admin-user-quick-info small,.admin-list-row small,.cart-item small,.payment-card-display small) {
    color:var(--muted) !important;
}
html[data-theme="light"] :is(.dashboard-nav a.active,.dashboard-nav a:hover,.sidebar-logout:hover,.profile-summary:hover,
.admin-user-row:hover,.pagination a:hover,.store-tabs button:hover,.lang-btn:hover) {
    color:var(--text) !important;
    background:var(--input-bg) !important;
}
html[data-theme="light"] :is(.store-price strong,.admin-user-primary p b,.admin-user-edit-form legend,.ticket-message-body strong,
.cart-item strong,.payment-card-display strong,.public-profile-card h1,.profile-preview-card h2) { color:var(--text) !important; }
html[data-theme="light"] .cart-overlay { background:rgba(28,24,20,.42); }
html[data-theme="light"] .cart-drawer>header>button,
html[data-theme="light"] :is(.cart-quantity button,.cart-remove,.modal-close,.admin-modal-close,.jalali-field-row button) {
    color:var(--text) !important;
    background:var(--input-bg) !important;
    border-color:var(--line) !important;
}
html[data-theme="light"] .payment-card-display { background:linear-gradient(135deg,#f7f3ed,#e9e3da) !important; }
html[data-theme="light"] .admin-code-block { background:#ede9e2 !important; }
html[data-theme="light"] .admin-user-row-head,
html[data-theme="light"] .payment-table-head-v49 { background:var(--surface-2) !important; }
html[data-theme="light"] .admin-user-row:nth-child(odd):not(.admin-user-row-head) { background:rgba(255,255,255,.68) !important; }
html[data-theme="light"] .admin-user-card-v2[open] { box-shadow:0 20px 58px rgba(47,39,30,.13) !important; }
html[data-theme="light"] .upload-progress>div { background:#ded9d1 !important; }
html[data-theme="light"] .datepicker-container .datepicker-plot-area {
    border-color:var(--line-strong) !important;
    color:var(--text) !important;
    background:var(--surface-solid) !important;
    box-shadow:var(--shadow) !important;
}
html[data-theme="light"] .datepicker-container .datepicker-plot-area :is(.datepicker-day-view .table-days td span,.datepicker-year-view .year-item,.datepicker-month-view .month-item) { color:#000000 !important; }
html[data-theme="light"] .datepicker-container .datepicker-plot-area :is(.datepicker-day-view .table-days td span:hover,.datepicker-year-view .year-item:hover,.datepicker-month-view .month-item:hover) { color:#fff !important; background:var(--accent) !important; }

/* Better page rhythm and width handling */
main,section,article,aside,form,nav,header,footer,div { min-width:0; }
:is(.panel,.auth-card,.store-card,.admin-product-card,.admin-stat-card,.ticket-list-card,.order-card) { overflow-wrap:anywhere; }
:is(.btn,.theme-toggle,.discord-link) { line-height:1.25; }
:is(.btn,.theme-toggle,.discord-link) svg { flex:0 0 auto; }

@media (max-width:1100px) {
    .discord-link-header span { display:none; }
    .discord-link-header { width:46px; min-width:46px; padding:0; }
    .admin-discord-link span { display:none; }
    .admin-discord-link { width:46px; min-width:46px; padding:0; }
}

@media (max-width:760px) {
    .header-actions .discord-link {
        flex:0 1 auto;
        width:auto !important;
        min-width:42px;
        min-height:42px;
        padding-inline:11px;
        border-radius:12px;
    }
    .header-actions .discord-link span { display:none; }
    .admin-top-actions .admin-discord-link { width:100%; min-width:0; }
    .admin-top-actions .admin-discord-link span { display:inline; }
    .footer-main { align-items:flex-start; }
    .footer-links { width:100%; }
    .footer-links a { flex:1 1 130px; justify-content:center; }
    .footer-status { width:100%; min-width:0; }
    .dashboard-topbar,.store-topbar,.rules-toolbar,.ticket-list-head { align-items:stretch; }
    .dashboard-topbar>.btn,.store-top-actions,.cart-button { width:100%; }
    .store-top-actions { justify-content:stretch; }
    .store-top-actions>* { flex:1; }
    .ticket-message-body { width:calc(100% - 48px); }
}

@media (max-width:430px) {
    .header-actions .discord-link { min-width:40px; width:40px !important; padding:0; }
    .footer-links a { flex-basis:100%; }
    .admin-top-actions .admin-discord-link { width:100% !important; }
}

/* Keep photographic hero copy readable when the surrounding UI is light. */
html[data-theme="light"] .hero-copy :is(h1,h2,p,.hero-trust span),
html[data-theme="light"] .final-content :is(h2,p),
html[data-theme="light"] .auth-visual-copy :is(h1,p,li,strong,small) { color:#f7f9fa !important; }
html[data-theme="light"] .hero-copy .hero-kicker,
html[data-theme="light"] .final-content .eyebrow { color:#ff4d57 !important; }
html[data-theme="light"] .hero-copy .btn-ghost,
html[data-theme="light"] .final-content .btn-ghost {
    color:#fff !important;
    border-color:rgba(255,255,255,.24) !important;
    background:rgba(5,8,10,.56) !important;
    box-shadow:0 14px 36px rgba(0,0,0,.18);
}
html[data-theme="light"] .hero-copy .btn-ghost:hover,
html[data-theme="light"] .final-content .btn-ghost:hover { background:rgba(5,8,10,.78) !important; }

/* v6.2 — ultrawide scaling + rebuilt features section */
.features {
    position: relative;
    overflow: hidden;
}
.features::before,
.features::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .18;
}
.features::before {
    top: 90px;
    right: -70px;
    width: 240px;
    height: 240px;
    background: rgba(76, 201, 240, .20);
}
.features::after {
    bottom: 50px;
    left: -85px;
    width: 250px;
    height: 250px;
    background: rgba(173, 133, 255, .18);
}
.feature-heading {
    position: relative;
    z-index: 1;
}
.feature-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(340px, .9fr) minmax(0, 1.25fr);
    gap: 26px;
    margin-top: 26px;
    align-items: stretch;
}
.feature-highlight,
.feature-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 30px;
    box-shadow: var(--shadow-soft);
}
.feature-highlight {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 34px;
    background:
        radial-gradient(circle at 14% 18%, rgba(76, 201, 240, .18), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(173, 133, 255, .13), transparent 28%),
        linear-gradient(160deg, rgba(13, 19, 24, .98), rgba(10, 14, 18, .94) 52%, rgba(15, 20, 26, .97));
}
html[data-theme="light"] .feature-highlight {
    background:
        radial-gradient(circle at 14% 18%, rgba(76, 201, 240, .16), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(173, 133, 255, .11), transparent 28%),
        linear-gradient(160deg, rgba(255,255,255,.98), rgba(247,244,239,.98) 55%, rgba(241,236,228,.98));
}
.feature-highlight::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, rgba(255,255,255,.045), transparent 32%, transparent 70%, rgba(255,255,255,.03));
    pointer-events: none;
}
.feature-highlight-top,
.feature-meta,
.feature-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.feature-highlight-badge,
.feature-highlight-index,
.feature-meta span,
.feature-card .feature-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    white-space: nowrap;
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .08em;
}
.feature-highlight-badge {
    color: #a4ecff;
    background: rgba(76, 201, 240, .12);
    border-color: rgba(76, 201, 240, .20);
}
.feature-highlight-index {
    color: #d9c8ff;
    background: rgba(173, 133, 255, .10);
    border-color: rgba(173, 133, 255, .18);
}
html[data-theme="light"] .feature-highlight-badge {
    color: #0f6880;
    background: rgba(76, 201, 240, .11);
    border-color: rgba(15, 104, 128, .15);
}
html[data-theme="light"] .feature-highlight-index {
    color: #6940b5;
    background: rgba(173, 133, 255, .09);
    border-color: rgba(105, 64, 181, .14);
}
.feature-highlight h3 {
    margin: 26px 0 14px;
    max-width: 560px;
    font-size: clamp(1.75rem, 2.3vw, 2.5rem);
    line-height: 1.35;
    letter-spacing: -.035em;
}
.feature-highlight p {
    margin: 0;
    max-width: 620px;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 2;
}
.feature-points {
    display: grid;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.feature-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text);
}
.feature-points i {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 4px;
    border-radius: 999px;
    color: #72f0b8;
    background: rgba(66, 211, 146, .12);
    font-size: .76rem;
    flex: 0 0 24px;
}
.feature-highlight-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: auto;
    padding-top: 28px;
}
.feature-highlight-strip span {
    display: grid;
    gap: 4px;
    padding: 16px 17px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
}
html[data-theme="light"] .feature-highlight-strip span { background: rgba(255,255,255,.72); }
.feature-highlight-strip strong {
    font-size: 1.05rem;
    line-height: 1.2;
}
.feature-highlight-strip small {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.65;
}
.features .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 0;
}
.features .feature-card {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 28px;
    background:
        linear-gradient(160deg, rgba(17, 24, 30, .98), rgba(10, 14, 18, .94) 58%, rgba(14, 20, 26, .97));
}
html[data-theme="light"] .features .feature-card {
    background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(249,246,241,.98) 60%, rgba(242,237,229,.98));
}
.features .feature-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--feature-color, #4cc9f0), transparent);
    opacity: .85;
}
.features .feature-card::after {
    content: "";
    position: absolute;
    left: -58px;
    bottom: -72px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--feature-color, #4cc9f0);
    opacity: .11;
    filter: blur(75px);
}
.features .feature-card:nth-child(1) { --feature-color:#4cc9f0; }
.features .feature-card:nth-child(2) { --feature-color:#f5bd4f; }
.features .feature-card:nth-child(3) { --feature-color:#52d69a; }
.features .feature-card:nth-child(4) { --feature-color:#ad85ff; }
.features .feature-icon {
    display: inline-grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 20px;
    color: var(--feature-color, #4cc9f0);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: none;
}
html[data-theme="light"] .features .feature-icon {
    background: rgba(255,255,255,.78);
    border-color: rgba(31,43,49,.11);
}
.features .feature-icon i,
.features .feature-icon svg { width: 26px; height: 26px; }
.features .feature-card .feature-index {
    color: var(--feature-color, #4cc9f0);
    background: rgba(255,255,255,.04);
}
.features .feature-card h3 {
    margin: 52px 0 12px;
    font-size: clamp(1.2rem, 1.65vw, 1.6rem);
    line-height: 1.5;
    letter-spacing: -.025em;
}
.features .feature-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: .95rem;
    line-height: 1.9;
}
.feature-meta {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
}
.feature-meta span {
    color: var(--muted);
    font-size: .68rem;
    letter-spacing: .05em;
    background: rgba(255,255,255,.028);
}
html[data-theme="light"] .feature-meta span,
html[data-theme="light"] .features .feature-card .feature-index {
    background: rgba(255,255,255,.74);
}

/* Better scale for 21:9 and large desktop widths */
@media (min-width: 1700px) {
    :root {
        --container: min(1640px, calc(100vw - 132px));
        --container-narrow: min(1300px, calc(100vw - 132px));
    }
    body { font-size: 17.5px; }
    .site-header {
        padding-inline: max(38px, calc((100vw - 1760px) / 2));
        gap: 34px;
    }
    .section { padding-block: 158px; }
    .hero-layout { gap: clamp(52px, 5vw, 100px); }
    .hero-copy h1 { font-size: clamp(4.7rem, 5vw, 6.6rem); }
    .hero-copy > p { max-width: 840px; font-size: 1.12rem; }
    .section-heading h2 { font-size: clamp(2.25rem, 2.4vw, 3.4rem); }
    .section-heading > p { font-size: 1rem; }
    .world-grid { gap: 24px; }
}

@media (min-width: 2200px) {
    :root {
        --container: min(1820px, calc(100vw - 168px));
        --container-narrow: min(1440px, calc(100vw - 168px));
    }
    body { font-size: 18.25px; }
    .site-header {
        padding-inline: max(48px, calc((100vw - 1940px) / 2));
        gap: 38px;
    }
    .section { padding-block: 166px; }
    .hero-layout {
        grid-template-columns: minmax(0, 1.38fr) minmax(390px, .62fr);
        gap: clamp(64px, 5vw, 110px);
    }
    .hero-copy h1 { font-size: clamp(5rem, 4.8vw, 7.2rem); }
    .hero-copy > p { max-width: 900px; font-size: 1.16rem; }
    .hero-command { padding: 32px; }
    .command-number strong { font-size: clamp(4.8rem, 4.7vw, 6.4rem); }
    .feature-layout { grid-template-columns: minmax(420px, .92fr) minmax(0, 1.28fr); }
    .features .feature-card { min-height: 310px; padding: 31px; }
    .features .feature-card h3 { font-size: clamp(1.28rem, 1.4vw, 1.72rem); }
}

@media (min-width: 2200px) and (max-height: 1160px) {
    .hero-layout { padding-block: calc(var(--header-h) + 62px) 88px; }
    .section { padding-block: 118px; }
    .feature-highlight { padding: 30px; }
    .features .feature-card { min-height: 286px; }
}

@media (max-width: 1180px) {
    .feature-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .features .feature-grid {
        grid-template-columns: 1fr;
    }
    .feature-highlight-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .feature-layout { gap: 18px; }
    .feature-highlight,
    .features .feature-card {
        padding: 22px;
        border-radius: 22px;
    }
    .feature-highlight h3 {
        margin-top: 18px;
        font-size: 1.45rem;
        line-height: 1.5;
    }
    .feature-highlight p,
    .features .feature-card p { font-size: .92rem; }
    .feature-highlight-strip {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .features .feature-card {
        min-height: 0;
        padding: 24px;
    }
    .features .feature-card h3 {
        margin-top: 42px;
        font-size: 1.28rem;
    }
    .features .feature-icon {
        width: 56px;
        height: 56px;
        border-radius: 17px;
    }
    .feature-highlight-top,
    .feature-top { align-items: flex-start; }
}

/* v6.3 — default dark, themed hero media, visible light buttons and live characters */
[data-theme-image] {
    transition: opacity .28s ease, filter .28s ease;
}
[data-theme-image].theme-media-loading { opacity:.72; }
[data-theme-background] {
    background-image: var(--theme-background-image) !important;
    background-position:center !important;
    background-size:cover !important;
    transition:opacity .28s ease;
}

.discord-link-header,
.admin-discord-link {
    width:46px;
    min-width:46px;
    padding:0;
}
.discord-link-header svg,
.admin-discord-link svg { width:19px; height:19px; }

html[data-theme="light"] .btn-primary,
html[data-theme="light"] button.btn-primary,
html[data-theme="light"] a.btn-primary {
    color:#fff !important;
    border-color:rgba(137,22,30,.18) !important;
    background:linear-gradient(135deg,#ff4b55,#e52d35 62%,#b61e27) !important;
    box-shadow:0 13px 30px rgba(195,37,46,.22),inset 0 1px rgba(255,255,255,.22) !important;
    text-shadow:0 1px 1px rgba(90,0,6,.18);
}
html[data-theme="light"] .btn-primary:hover {
    background:linear-gradient(135deg,#ff5962,#ed3540 62%,#c6222b) !important;
    box-shadow:0 17px 38px rgba(195,37,46,.30),inset 0 1px rgba(255,255,255,.25) !important;
}
html[data-theme="light"] .auth-card .btn-primary,
html[data-theme="light"] .store-card .btn-primary,
html[data-theme="light"] .header-actions .btn-primary { color:#fff !important; }
html[data-theme="light"] .header-actions .btn-ghost {
    color:#20292e !important;
    border-color:rgba(31,43,49,.22) !important;
    background:rgba(255,255,255,.82) !important;
}
html[data-theme="light"] .header-actions .btn-ghost:hover { background:#fff !important; }

html[data-theme="light"] .hero-media img {
    filter:saturate(.78) contrast(1.02) brightness(.88) !important;
}
html[data-theme="light"] .hero-vignette {
    background:
        linear-gradient(90deg,rgba(25,30,31,.94) 0%,rgba(25,30,31,.72) 34%,rgba(25,30,31,.18) 69%,rgba(25,30,31,.40) 100%),
        linear-gradient(0deg,var(--bg) 0%,transparent 34%,rgba(18,22,23,.24) 100%),
        radial-gradient(circle at 70% 42%,transparent 0,rgba(26,31,31,.08) 42%,rgba(26,31,31,.38) 100%) !important;
}
html[data-theme="light"] .auth-cover { filter:saturate(.82) contrast(1.03) brightness(.86); }
html[data-theme="light"] .auth-visual-overlay {
    background:linear-gradient(90deg,rgba(19,23,25,.82),rgba(19,23,25,.30)),linear-gradient(0deg,rgba(19,23,25,.58),transparent 55%) !important;
}
html[data-theme="light"] .final-bg img { filter:saturate(.78) brightness(.82); }
html[data-theme="light"] .inner-hero-bg::after {
    background:linear-gradient(180deg,rgba(28,32,33,.18),rgba(28,32,33,.76)) !important;
}

.dashboard-grid {
    grid-template-columns:minmax(290px,.72fr) minmax(0,1.45fr);
    align-items:start;
}
.character-sync-panel { min-width:0; }
.character-sync-panel .panel-head { align-items:flex-start; }
.character-sync-panel .panel-head p { margin:5px 0 0; max-width:640px; color:var(--muted); font-size:.78rem; }
.character-sync-list { display:grid; gap:18px; }
.game-character-card {
    --presence:#7b8790;
    position:relative;
    overflow:hidden;
    padding:22px;
    border:1px solid var(--line);
    border-radius:22px;
    background:
        radial-gradient(circle at 90% 0,color-mix(in srgb,var(--presence) 11%,transparent),transparent 26%),
        linear-gradient(145deg,rgba(19,27,33,.96),rgba(9,14,18,.98));
    box-shadow:0 18px 44px rgba(0,0,0,.18);
}
.game-character-card.is-online { --presence:#42d392; }
html[data-theme="light"] .game-character-card {
    background:
        radial-gradient(circle at 90% 0,color-mix(in srgb,var(--presence) 10%,transparent),transparent 28%),
        linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,244,239,.98));
}
.game-character-card::before {
    content:"";
    position:absolute;
    top:0;
    right:22px;
    left:22px;
    height:3px;
    border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,transparent,var(--presence),transparent);
}
.game-character-head { display:flex; align-items:center; gap:14px; }
.game-character-avatar {
    position:relative;
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    flex:0 0 58px;
    border:1px solid color-mix(in srgb,var(--presence) 28%,var(--line));
    border-radius:18px;
    color:var(--presence);
    background:color-mix(in srgb,var(--presence) 10%,var(--input-bg));
}
.game-character-avatar svg { width:24px; height:24px; }
.character-presence {
    position:absolute;
    left:-2px;
    bottom:-2px;
    width:14px;
    height:14px;
    border:3px solid var(--surface-solid);
    border-radius:50%;
    background:var(--presence);
    box-shadow:0 0 14px color-mix(in srgb,var(--presence) 55%,transparent);
}
.game-character-title { min-width:0; flex:1; }
.game-character-title>div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.game-character-title h3 { margin:0; font-size:1.14rem; }
.character-online-label {
    padding:5px 10px;
    border:1px solid color-mix(in srgb,var(--presence) 25%,var(--line));
    border-radius:999px;
    color:var(--presence);
    background:color-mix(in srgb,var(--presence) 9%,transparent);
    font-size:.68rem;
    font-weight:900;
}
.game-character-title p { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:5px 0 0; color:var(--muted); font-size:.72rem; }
.game-character-title p span { display:inline-flex; align-items:center; gap:7px; }
.game-character-title code { max-width:180px; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.character-vitals-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px 18px;
    margin-top:24px;
}
.character-vital>div { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.character-vital>div span { display:inline-flex; align-items:center; gap:8px; color:var(--text-soft); font-size:.76rem; }
.character-vital>div span svg { color:var(--vital-color); }
.character-vital>div b { color:var(--text); font-size:.73rem; }
.character-vital-track { display:block; height:7px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--text) 9%,transparent); }
.character-vital-track i { display:block; width:var(--vital-value); height:100%; border-radius:inherit; background:linear-gradient(90deg,color-mix(in srgb,var(--vital-color) 75%,#fff),var(--vital-color)); box-shadow:0 0 12px color-mix(in srgb,var(--vital-color) 35%,transparent); }
.character-medical-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:20px;
}
.character-medical-grid>div {
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:9px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--input-bg);
}
.character-medical-grid i { grid-row:1/3; align-self:center; color:#75c7ff; }
.character-medical-grid span { color:var(--muted); font-size:.66rem; }
.character-medical-grid b { overflow:hidden; text-overflow:ellipsis; font-size:.75rem; white-space:nowrap; }
.character-medical-grid .is-danger i,.character-medical-grid .is-danger b { color:#ff6972; }
.character-medical-grid .is-good i { color:#42d392; }
.game-character-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:18px;
    padding-top:15px;
    border-top:1px solid var(--line);
}
.character-diseases { display:flex; flex-wrap:wrap; gap:8px; }
.disease-chip,.healthy-chip {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    font-size:.66rem;
    font-weight:800;
}
.disease-chip { color:#ff8c92; border:1px solid rgba(255,76,85,.18); background:rgba(255,76,85,.07); }
.healthy-chip { color:#55dba0; border:1px solid rgba(66,211,146,.18); background:rgba(66,211,146,.07); }
.game-character-footer small { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:.66rem; white-space:nowrap; }
.character-empty-state { min-height:340px; }

@media (max-width:1280px) {
    .dashboard-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
    .character-vitals-grid { grid-template-columns:1fr; }
    .character-medical-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .game-character-footer { align-items:flex-start; flex-direction:column; }
    .game-character-footer small { white-space:normal; }
}
@media (max-width:480px) {
    .game-character-card { padding:18px; border-radius:19px; }
    .game-character-title>div,.game-character-title p { align-items:flex-start; flex-direction:column; }
    .character-medical-grid { grid-template-columns:1fr; }
}

/* v6.4 — Windows/native select readability and auth action contrast */
html[data-theme="light"] select,
html[data-theme="light"] .field select,
html[data-theme="light"] .admin-search select,
html[data-theme="light"] .admin-user-toolbar select,
html[data-theme="light"] .admin-ticket-toolbar select,
html[data-theme="light"] .payment-toolbar-v49 select {
    color:#1b252a !important;
    -webkit-text-fill-color:#1b252a !important;
    background-color:#fff !important;
    border-color:rgba(31,43,49,.17) !important;
    color-scheme:light !important;
}
html[data-theme="light"] select option,
html[data-theme="light"] select optgroup {
    color:#1b252a !important;
    -webkit-text-fill-color:#1b252a !important;
    background:#fff !important;
}
html[data-theme="light"] select option:disabled {
    color:#7a858a !important;
    -webkit-text-fill-color:#7a858a !important;
}
html[data-theme="light"] .auth-card button[type="submit"],
html[data-theme="light"] .auth-card .btn-primary,
html[data-theme="light"] .ticket-create-card button[type="submit"] {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}
html[data-theme="light"] .auth-card button[type="submit"] svg,
html[data-theme="light"] .auth-card .btn-primary svg { color:#fff !important; }

.character-summary-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}
.character-summary-grid>div {
    display:grid;
    grid-template-columns:26px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:8px;
    padding:11px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--input-bg);
}
.character-summary-grid i { grid-row:1/3; align-self:center; color:#f3b844; }
.character-summary-grid span { color:var(--muted); font-size:.64rem; }
.character-summary-grid b { overflow:hidden; color:var(--text); font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:860px) { .character-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px) { .character-summary-grid { grid-template-columns:1fr; } }

/* Brighter photographic treatment for the dedicated daytime assets. */
html[data-theme="light"] .hero-media img {
    filter:saturate(.92) contrast(.98) brightness(1.04) !important;
}
html[data-theme="light"] .hero-vignette {
    background:
        linear-gradient(90deg,rgba(22,27,29,.82) 0%,rgba(22,27,29,.56) 34%,rgba(22,27,29,.10) 70%,rgba(22,27,29,.22) 100%),
        linear-gradient(0deg,var(--bg) 0%,transparent 30%,rgba(23,27,29,.13) 100%),
        radial-gradient(circle at 70% 42%,transparent 0,rgba(23,27,29,.04) 48%,rgba(23,27,29,.22) 100%) !important;
}
html[data-theme="light"] .auth-cover { filter:saturate(.92) contrast(.99) brightness(1.03) !important; }
html[data-theme="light"] .final-bg img { filter:saturate(.9) contrast(.98) brightness(1.02) !important; }

/* v6.5 — final theme polish, role workflow and rebuilt server-systems section */

/* Feature section: neutral in light mode, deep in dark mode, consistent spacing */
.features.section {
    width: var(--container);
    padding-block: clamp(76px, 7vw, 124px);
}
.feature-showcase {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 3.2vw, 46px);
    border: 1px solid var(--line);
    border-radius: clamp(26px, 2.6vw, 40px);
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0, rgba(229,45,53,.08), transparent 27%),
        radial-gradient(circle at 0 100%, rgba(76,201,240,.07), transparent 30%),
        var(--card-bg);
    box-shadow: var(--shadow);
}
html[data-theme="light"] .feature-showcase {
    background:
        radial-gradient(circle at 100% 0, rgba(229,45,53,.07), transparent 27%),
        radial-gradient(circle at 0 100%, rgba(28,138,175,.06), transparent 30%),
        linear-gradient(145deg, #ffffff, #f7f4ee 72%, #f0ece5);
    box-shadow: 0 24px 70px rgba(47,39,30,.11);
}
.feature-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(135deg, #000, transparent 72%);
    opacity: .55;
}
html[data-theme="light"] .feature-showcase::before {
    background-image:
        linear-gradient(rgba(31,43,49,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,43,49,.035) 1px, transparent 1px);
    opacity: .7;
}
.feature-heading {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(26px, 5vw, 82px);
    margin: 0 0 clamp(24px, 3vw, 38px);
    padding: 0 0 clamp(24px, 2.7vw, 36px);
    border-bottom: 1px solid var(--line);
    color: var(--text);
    background: transparent !important;
    box-shadow: none !important;
}
.feature-heading::after { display: none !important; }
.feature-heading-copy { max-width: 880px; }
.feature-heading h2 {
    margin: 13px 0 12px;
    color: var(--text);
    font-size: clamp(2rem, 3.6vw, 4.4rem);
    font-weight: 950;
    letter-spacing: -.052em;
    line-height: 1.16;
    text-wrap: balance;
}
.feature-heading p {
    max-width: 840px;
    margin: 0;
    color: var(--text-soft);
    font-size: clamp(.94rem, 1vw, 1.08rem);
    line-height: 2;
}
.feature-heading-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    gap: 10px;
}
.feature-heading-summary > span {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 96px;
    padding: 15px 13px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--input-bg);
    text-align: center;
}
.feature-heading-summary b {
    color: var(--accent-bright);
    font-size: 1.34rem;
    line-height: 1;
}
.feature-heading-summary small {
    color: var(--muted);
    font-size: .67rem;
    white-space: nowrap;
}
.feature-cycle {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(24px, 3vw, 38px);
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--input-bg);
}
.feature-cycle-step {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 11px 12px;
    border-radius: 16px;
}
.feature-cycle-step > span {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(229,45,53,.19);
    border-radius: 14px;
    color: var(--accent-bright);
    background: rgba(229,45,53,.09);
}
.feature-cycle-step > div { display: grid; min-width: 0; }
.feature-cycle-step b { color: var(--text); font-size: .83rem; }
.feature-cycle-step small { color: var(--muted); font-size: .66rem; white-space: nowrap; }
.feature-cycle-arrow { color: var(--muted); opacity: .55; font-size: .78rem; }
.features .feature-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.5vw, 22px);
    margin: 0;
}
.features .feature-card {
    --feature-color: #4cc9f0;
    display: flex;
    flex-direction: column;
    min-height: 330px;
    padding: clamp(22px, 2vw, 29px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 24px;
    color: var(--text);
    background: linear-gradient(155deg, color-mix(in srgb, var(--feature-color) 8%, var(--surface-solid)), var(--surface-solid) 48%, var(--bg-soft));
    box-shadow: 0 18px 45px rgba(0,0,0,.16);
    transition: transform .24s var(--ease), border-color .24s ease, box-shadow .24s ease;
}
html[data-theme="light"] .features .feature-card {
    background: linear-gradient(155deg, color-mix(in srgb, var(--feature-color) 7%, #fff), #fff 48%, #f5f1ea);
    box-shadow: 0 16px 40px rgba(47,39,30,.08);
}
.features .feature-card:nth-child(1) { --feature-color: #4cc9f0; }
.features .feature-card:nth-child(2) { --feature-color: #f5bd4f; }
.features .feature-card:nth-child(3) { --feature-color: #52d69a; }
.features .feature-card:nth-child(4) { --feature-color: #ff6470; }
.features .feature-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--feature-color) 45%, var(--line));
    box-shadow: 0 24px 58px rgba(0,0,0,.22);
}
.features .feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 26px;
    left: 26px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, var(--feature-color), transparent);
    opacity: .9;
}
.features .feature-card::after {
    content: "";
    position: absolute;
    left: -58px;
    bottom: -82px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: var(--feature-color);
    filter: blur(72px);
    opacity: .09;
    pointer-events: none;
}
.feature-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.features .feature-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid color-mix(in srgb, var(--feature-color) 30%, var(--line));
    border-radius: 18px;
    color: var(--feature-color);
    background: color-mix(in srgb, var(--feature-color) 10%, var(--input-bg));
    box-shadow: none;
}
.features .feature-icon svg,
.features .feature-icon i { width: 24px; height: 24px; }
.features .feature-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 30px;
    padding-inline: 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--feature-color);
    background: var(--input-bg);
    font-size: .72rem;
    font-weight: 900;
}
.feature-card-copy { margin-top: clamp(32px, 3vw, 48px); }
.features .feature-card h3 {
    margin: 0 0 11px;
    color: var(--text);
    font-size: clamp(1.14rem, 1.28vw, 1.46rem);
    line-height: 1.55;
    letter-spacing: -.022em;
}
.features .feature-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: .88rem;
    line-height: 1.95;
}
.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 22px;
}
.feature-tags span {
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--input-bg);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .035em;
}

/* Theme-safe admin topbar */
.admin-topbar {
    margin: 0 0 24px !important;
    padding: 20px 22px !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    color: var(--text) !important;
    background: linear-gradient(135deg, rgba(26,39,49,.88), rgba(13,19,24,.94)) !important;
    box-shadow: var(--shadow-soft) !important;
}
.admin-topbar h1 { color: var(--text) !important; }
.admin-topbar .eyebrow { color: #76c7ff !important; }
html[data-theme="light"] .admin-topbar {
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,242,235,.98)) !important;
    box-shadow: 0 14px 36px rgba(47,39,30,.08) !important;
}
html[data-theme="light"] .admin-topbar .eyebrow { color: #246f9a !important; }
html[data-theme="light"] .admin-topbar h1 { color: #182126 !important; }

/* Inner hero remains readable over both daytime and nighttime photography */
.inner-hero-content,
html[data-theme="light"] .inner-hero-content { color: #fff !important; }
.inner-hero-content h1,
html[data-theme="light"] .inner-hero-content h1 { color: #fff !important; text-shadow: 0 3px 24px rgba(0,0,0,.46); }
.inner-hero-content p,
html[data-theme="light"] .inner-hero-content p { color: rgba(255,255,255,.86) !important; text-shadow: 0 2px 14px rgba(0,0,0,.42); }
.inner-hero-content .eyebrow,
html[data-theme="light"] .inner-hero-content .eyebrow { color: #ff6d75 !important; text-shadow: 0 2px 12px rgba(0,0,0,.38); }

/* Connected licenses always stack below their title */
.identity-list .identity-licenses {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
}
.identity-list .identity-licenses dt,
.identity-list .identity-licenses dd {
    width: 100% !important;
    max-width: none !important;
}
.identity-list .identity-licenses dd { text-align: right !important; }
.identity-list .identity-licenses .account-license-list-block { width: 100%; }
.identity-list .identity-licenses .account-license-list-block > div {
    width: 100%;
    justify-content: flex-start;
}

/* Dedicated role update control */
.role-quick-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 10px;
}
.role-quick-row select { min-width: 0; }
.role-save-btn {
    min-width: 126px;
    min-height: 48px;
    padding-inline: 16px;
    white-space: nowrap;
}
.role-save-help {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: .67rem;
    line-height: 1.7;
}

/* Toasts follow the active theme */
.toast {
    color: var(--text) !important;
    background: rgba(15,19,22,.96) !important;
    border-color: var(--line-strong) !important;
}
html[data-theme="light"] .toast {
    color: #1d272c !important;
    background: rgba(255,255,255,.97) !important;
    border-color: rgba(31,43,49,.15) !important;
    box-shadow: 0 18px 48px rgba(47,39,30,.14) !important;
}
html[data-theme="light"] .toast button {
    color: #566168 !important;
    background: #f1eee8 !important;
}
html[data-theme="light"] .toast-success { border-right: 4px solid #2ea873 !important; }
html[data-theme="light"] .toast-error { border-right: 4px solid #e23b45 !important; }
html[data-theme="light"] .toast-warning { border-right: 4px solid #d99c27 !important; }
html[data-theme="light"] .toast-info { border-right: 4px solid #2d88b8 !important; }

/* Two remaining command rows after removing platform */
.command-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.command-info div {
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--input-bg);
}

@media (max-width: 1280px) {
    .features .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature-heading { grid-template-columns: 1fr; align-items: start; }
    .feature-heading-summary { width: min(100%, 430px); }
}
@media (max-width: 900px) {
    .feature-cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature-cycle-arrow { display: none; }
    .feature-cycle-step { border: 1px solid var(--line); background: var(--surface); }
}
@media (max-width: 700px) {
    .features.section { padding-block: 62px; }
    .feature-showcase { padding: 20px; border-radius: 24px; }
    .feature-heading { margin-bottom: 20px; padding-bottom: 22px; }
    .feature-heading h2 { font-size: clamp(1.72rem, 9vw, 2.35rem); }
    .feature-heading-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .feature-heading-summary > span { min-width: 0; padding: 12px 8px; }
    .feature-heading-summary small { white-space: normal; }
    .features .feature-grid { grid-template-columns: 1fr; }
    .features .feature-card { min-height: 0; }
    .feature-cycle { grid-template-columns: 1fr; }
    .role-quick-row { grid-template-columns: 1fr; }
    .role-save-btn { width: 100%; }
    .command-info { grid-template-columns: 1fr; }
}

/* v6.6 — character fallback without Snapshot */
.game-character-card.no-snapshot {
    --presence: #f3b844;
}
.game-character-card.no-snapshot .game-character-avatar {
    color: #f3b844;
    border-color: color-mix(in srgb, #f3b844 30%, var(--line));
    background: color-mix(in srgb, #f3b844 10%, var(--input-bg));
}
.game-character-card.no-snapshot .character-presence {
    background: #f3b844;
    box-shadow: 0 0 14px rgba(243,184,68,.36);
}
.game-character-card.no-snapshot .character-online-label {
    color: #f3b844;
    border-color: color-mix(in srgb, #f3b844 26%, var(--line));
    background: color-mix(in srgb, #f3b844 9%, transparent);
}

/* v6.7 — live character polling, compact cards and stacked identity details */
.identity-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.identity-list > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
}
.identity-list dt,
.identity-list dd {
    width: 100% !important;
    max-width: none !important;
}
.identity-list dd {
    text-align: right !important;
}
.identity-list dd[dir="ltr"] {
    text-align: left !important;
}
.identity-list .account-license-list-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.character-sync-panel .connection-pill.live {
    color: #42d392 !important;
    border-color: rgba(66,211,146,.24) !important;
    background: rgba(66,211,146,.09) !important;
}
.character-sync-panel .connection-pill.stored {
    color: #f3b844 !important;
    border-color: rgba(243,184,68,.24) !important;
    background: rgba(243,184,68,.09) !important;
}

.game-character-card {
    padding-top: 24px;
}
.game-character-card.is-online {
    box-shadow: 0 18px 48px rgba(0,0,0,.20), 0 0 0 1px rgba(66,211,146,.06);
}
.game-character-card.is-offline {
    opacity: 1;
}
.character-vitals-grid {
    margin-top: 0 !important;
}

/* Hunger and thirst must never share the same visual language. */
.character-vital.vital-hunger {
    --vital-color: #f59e0b !important;
}
.character-vital.vital-thirst {
    --vital-color: #0ea5e9 !important;
}
.character-vital.vital-hunger .character-vital-track {
    background: rgba(245,158,11,.14) !important;
}
.character-vital.vital-thirst .character-vital-track {
    background: rgba(14,165,233,.14) !important;
}
.character-vital.vital-hunger .character-vital-track i {
    background: linear-gradient(90deg,#fbbf24,#f59e0b) !important;
    box-shadow: 0 0 14px rgba(245,158,11,.34) !important;
}
.character-vital.vital-thirst .character-vital-track i {
    background: linear-gradient(90deg,#38bdf8,#0284c7) !important;
    box-shadow: 0 0 14px rgba(14,165,233,.36) !important;
}
.character-vital.vital-hunger > div span svg,
.character-vital.vital-hunger > div span i { color:#f59e0b !important; }
.character-vital.vital-thirst > div span svg,
.character-vital.vital-thirst > div span i { color:#0ea5e9 !important; }

.character-disease-card {
    grid-column: 1 / -1 !important;
    grid-template-columns: 28px minmax(110px,.34fr) minmax(0,1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    min-height: 62px;
}
.character-disease-card > i,
.character-disease-card > svg {
    grid-row: auto !important;
}
.character-disease-card .character-diseases {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}
.character-disease-card .disease-chip,
.character-disease-card .healthy-chip {
    border-radius: 12px;
    padding: 7px 10px;
    line-height: 1.5;
}
.character-disease-card.is-danger > i,
.character-disease-card.is-danger > svg { color:#ff6972 !important; }
.character-disease-card.is-good > i,
.character-disease-card.is-good > svg { color:#42d392 !important; }

/* The removed identity header/footer must not reserve any visual space. */
.game-character-card > .game-character-head,
.game-character-card > .game-character-footer {
    display: none !important;
}

@media (max-width:760px) {
    .character-disease-card {
        grid-template-columns: 28px minmax(0,1fr) !important;
        grid-template-rows: auto auto !important;
    }
    .character-disease-card .character-diseases {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: 4px;
    }
}


/* v7.0 — dashboard rail, centered store, mobile cards and admin account controls */
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-day-view .table-days td span.other-month {
    color:rgba(166,183,194,.36) !important;
    opacity:1 !important;
}
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-day-view .table-days td span.other-month:hover {
    color:#d7e6ef !important;
    background:rgba(75,142,191,.22) !important;
}

.store-grid {
    display:flex !important;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    gap:20px;
}
.store-grid > * {
    flex:0 1 min(100%, 310px);
    width:min(100%,310px);
}

/* Keep the survivor navigation physically attached to the right edge at every width. */
.dashboard-shell {
    direction:ltr;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 290px !important;
    grid-template-areas:"content sidebar";
    align-items:start;
}
.dashboard-sidebar {
    direction:rtl;
    grid-area:sidebar;
    position:sticky !important;
    top:var(--header-h) !important;
    right:0;
    height:calc(100svh - var(--header-h)) !important;
    border-right:1px solid var(--line);
    border-left:0 !important;
}
.dashboard-content {
    direction:rtl;
    grid-area:content;
    width:100%;
    max-width:1600px;
    margin-inline:auto;
}
.dashboard-hero {
    position:relative;
    overflow:hidden;
    padding:clamp(24px,3vw,42px);
    border:1px solid var(--line);
    border-radius:28px;
    background:radial-gradient(circle at 10% 0,rgba(77,161,219,.12),transparent 30%),linear-gradient(145deg,var(--card-bg),var(--surface-solid));
    box-shadow:var(--shadow);
}
.dashboard-hero::after {
    content:"";
    position:absolute;
    inset:auto -70px -100px auto;
    width:260px;
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle,rgba(229,45,53,.14),transparent 68%);
    pointer-events:none;
}
.dashboard-command-grid {
    display:grid;
    grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
    gap:18px;
}
.dashboard-command-grid > * { margin:0 !important; min-height:100%; }
.dashboard-grid {
    grid-template-columns:minmax(260px,.48fr) minmax(0,1.52fr) !important;
    gap:18px !important;
}
.panel-profile { position:sticky; top:calc(var(--header-h) + 20px); }
.character-sync-list {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr));
    align-items:start;
}
.character-sync-panel .panel-head { margin-bottom:18px; }
.game-character-card { height:100%; }

.license-manager {
    margin-top:20px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--input-bg);
}
.license-manager-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:14px;
}
.license-manager-head h3 { margin:3px 0 0; font-size:1rem; }
.license-manager-head>span { padding:6px 10px; border-radius:999px; color:var(--muted); background:var(--card-bg); font-size:.7rem; }
.license-manager-list { display:grid; gap:10px; }
.license-manager-item,.license-manager-add {
    display:grid;
    grid-template-columns:minmax(250px,1.7fr) minmax(120px,.55fr) auto auto;
    align-items:end;
    gap:10px;
    padding:13px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--card-bg);
}
.license-manager-actions { display:flex; gap:7px; }
.license-manager-add { margin-top:12px; border-style:dashed; }
.btn-danger-soft,.btn-danger {
    color:#ff9aa0 !important;
    border-color:rgba(255,76,85,.28) !important;
    background:rgba(255,76,85,.08) !important;
}
.btn-danger { color:#fff !important; background:linear-gradient(135deg,#d72e38,#9d171f) !important; }
.danger-zone {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:22px;
    padding:16px;
    border:1px solid rgba(255,76,85,.22);
    border-radius:18px;
    background:rgba(255,76,85,.055);
}
.danger-zone>div { display:flex; align-items:center; gap:12px; }
.danger-zone>div>i { color:#ff6972; font-size:1.15rem; }
.danger-zone span,.danger-zone strong,.danger-zone small { display:block; }
.danger-zone small { margin-top:3px; color:var(--muted); font-size:.69rem; }

@media (max-width:1180px) {
    .dashboard-shell { grid-template-columns:minmax(0,1fr) 94px !important; }
    .dashboard-sidebar {
        display:flex !important;
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        padding:14px 10px !important;
    }
    .dashboard-sidebar .profile-summary { grid-template-columns:1fr; justify-items:center; padding:8px; }
    .dashboard-sidebar .profile-summary>div:nth-child(2),.dashboard-sidebar .profile-summary>svg { display:none; }
    .dashboard-sidebar .dashboard-nav { flex-direction:column !important; gap:6px; margin:4px 0 0 !important; overflow:visible; }
    .dashboard-sidebar .dashboard-nav a,.dashboard-sidebar .dashboard-nav a:not(.active) { min-width:0; width:100%; min-height:50px; padding:0; font-size:0 !important; }
    .dashboard-sidebar .dashboard-nav a>span { width:38px; height:38px; margin:auto; background:rgba(255,255,255,.035); }
    .dashboard-sidebar .dashboard-nav svg { font-size:.95rem !important; }
    .dashboard-sidebar .nav-count { position:absolute; top:4px; left:4px; }
    .dashboard-sidebar .sidebar-server { display:grid; grid-template-columns:1fr; justify-items:center; margin-top:auto; padding:10px 5px; }
    .dashboard-sidebar .sidebar-server div { display:none; }
    .dashboard-sidebar form { margin:0 !important; }
    .dashboard-sidebar .sidebar-logout { width:100%; min-height:48px; font-size:0; }
    .dashboard-sidebar .sidebar-logout svg { font-size:.95rem; }
    .dashboard-content { padding:30px 18px 70px !important; }
    .dashboard-command-grid,.dashboard-grid { grid-template-columns:1fr !important; }
    .panel-profile { position:static; }
    .license-manager-item,.license-manager-add { grid-template-columns:minmax(0,1fr) minmax(110px,.45fr); }
    .license-manager-actions,.license-manager-add>.btn { grid-column:auto; }
}

@media (max-width:760px) {
    .dashboard-shell { grid-template-columns:minmax(0,1fr) 72px !important; padding-top:var(--header-h) !important; }
    .dashboard-sidebar { padding:10px 7px !important; }
    .dashboard-sidebar .avatar { width:44px; height:44px; border-radius:13px; }
    .dashboard-content { padding:18px 10px 54px !important; }
    .dashboard-hero { padding:20px; border-radius:22px; }
    .dashboard-topbar h1 { font-size:clamp(1.65rem,8vw,2.35rem); }
    .dashboard-command-grid { gap:12px; }
    .status-banner,.queue-access-panel,.panel { border-radius:18px; }
    .character-sync-list { grid-template-columns:1fr; }

    /* Mobile directories and row-based lists become readable cards instead of clipped tables. */
    .admin-user-table-shell { padding:10px; overflow:visible; background:transparent; box-shadow:none; }
    .admin-table-title { margin-bottom:10px; border:1px solid var(--line); border-radius:16px; background:var(--card-bg); }
    .admin-user-table { display:grid; gap:12px; }
    .admin-user-row-head { display:none !important; }
    .admin-user-row {
        position:relative;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:10px 12px !important;
        padding:15px !important;
        border:1px solid var(--line) !important;
        border-radius:18px;
        background:var(--card-bg) !important;
        box-shadow:var(--shadow-soft);
    }
    .admin-user-row>:not(.action) { display:flex !important; }
    .admin-user-row .identity { grid-column:1/-1; padding-bottom:11px; border-bottom:1px solid var(--line); }
    .admin-user-row .admin-user-cell:not(.identity):not(.action)::before {
        content:attr(data-label);
        color:var(--muted);
        font-size:.62rem;
        font-weight:800;
    }
    .admin-user-row .action { position:absolute; top:16px; left:14px; display:flex !important; }
    .admin-user-row .admin-user-cell small { white-space:normal; overflow-wrap:anywhere; }

    .admin-list { display:grid; gap:10px; }
    .admin-list-row,.dashboard-ticket-list>a,.dashboard-order-list>div,.admin-orders-list>*,.payment-table-row-v49,.ticket-list-card {
        border:1px solid var(--line) !important;
        border-radius:16px !important;
        background:var(--card-bg) !important;
        box-shadow:var(--shadow-soft);
    }
    .admin-list-row { grid-template-columns:1fr auto; padding:14px; }
    .admin-list-row>b { grid-column:1/-1; }
    .payment-table-v49 { display:grid; gap:10px; background:transparent; }
    .payment-table-row-v49 { margin:0; }
    .user-modal { align-items:end; padding:0; }
    .user-modal-card { max-height:94svh; border-radius:22px 22px 0 0; }
    .user-modal-tabs { padding-inline:8px; }
    .user-modal-tabs button { flex:0 0 auto; }
    .license-manager { padding:12px; }
    .license-manager-item,.license-manager-add { grid-template-columns:1fr; }
    .license-manager-actions,.license-manager-add>.btn { grid-column:1; }
    .license-manager-actions { display:grid; grid-template-columns:1fr 1fr; }
    .danger-zone { align-items:stretch; flex-direction:column; }
    .danger-zone .btn { width:100%; }
}

@media (max-width:430px) {
    .dashboard-shell { grid-template-columns:minmax(0,1fr) 64px !important; }
    .dashboard-sidebar { padding-inline:5px !important; }
    .dashboard-sidebar .dashboard-nav a,.dashboard-sidebar .dashboard-nav a:not(.active) { min-height:46px; }
    .dashboard-content { padding-inline:7px !important; }
    .admin-user-row { grid-template-columns:1fr !important; }
    .admin-user-row .identity { grid-column:1; }
}

/* v8.0 — stable queue actions, newest-first character accordion and equal licenses */
.queue-access-panel {
    grid-template-columns:56px minmax(0,1fr) !important;
    align-items:start !important;
    min-width:0;
}
.queue-access-copy,
.queue-access-actions { min-width:0; }
.queue-access-actions {
    grid-column:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px 16px;
    padding-top:2px;
}
.queue-access-actions .queue-access-rank {
    min-width:0;
    text-align:right;
}
.queue-access-actions .queue-access-rank b {
    max-width:100%;
    font-size:clamp(.58rem,.8vw,.69rem);
    line-height:1.7;
    white-space:normal;
    overflow-wrap:anywhere;
}
.queue-access-actions>.btn {
    flex:0 1 auto;
    max-width:100%;
    min-width:0;
    white-space:normal;
    text-align:center;
}
.queue-access-actions>.btn span { min-width:0; }

.character-sync-list {
    grid-template-columns:1fr !important;
    gap:12px !important;
}
.game-character-card {
    height:auto !important;
    padding:0 !important;
    border-radius:20px !important;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.game-character-card::before { right:18px; left:18px; }
.game-character-card.is-expanded {
    border-color:color-mix(in srgb,var(--presence) 28%,var(--line));
    box-shadow:0 20px 54px rgba(0,0,0,.22),0 0 0 1px color-mix(in srgb,var(--presence) 8%,transparent);
}
.character-card-toggle {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:50px minmax(0,1fr) auto 20px;
    align-items:center;
    gap:13px;
    width:100%;
    min-width:0;
    min-height:84px;
    padding:16px 18px;
    border:0;
    color:var(--text);
    background:transparent;
    font:inherit;
    text-align:right;
}
button.character-card-toggle { cursor:pointer; }
button.character-card-toggle:hover { background:color-mix(in srgb,var(--presence) 5%,transparent); }
button.character-card-toggle:focus-visible {
    outline:3px solid color-mix(in srgb,var(--presence) 50%,transparent);
    outline-offset:-4px;
}
.character-card-toggle.is-static { grid-template-columns:50px minmax(0,1fr) auto; }
.character-card-avatar {
    position:relative;
    display:grid;
    place-items:center;
    width:50px;
    height:50px;
    border:1px solid color-mix(in srgb,var(--presence) 30%,var(--line));
    border-radius:15px;
    color:var(--presence);
    background:color-mix(in srgb,var(--presence) 10%,var(--input-bg));
}
.character-card-avatar>svg { font-size:1.05rem; }
.character-card-presence {
    position:absolute;
    left:-2px;
    bottom:-2px;
    width:13px;
    height:13px;
    border:3px solid var(--surface-solid);
    border-radius:50%;
    background:var(--presence);
    box-shadow:0 0 12px color-mix(in srgb,var(--presence) 50%,transparent);
}
.character-card-identity { display:grid; gap:6px; min-width:0; }
.character-card-identity>span {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 10px;
    min-width:0;
}
.character-card-identity strong {
    overflow:hidden;
    min-width:0;
    font-size:.93rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.character-card-state {
    flex:0 0 auto;
    padding:4px 8px;
    border:1px solid color-mix(in srgb,var(--presence) 24%,var(--line));
    border-radius:999px;
    color:var(--presence);
    background:color-mix(in srgb,var(--presence) 8%,transparent);
    font-size:.6rem;
}
.character-card-identity small {
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    color:var(--muted);
    font-size:.64rem;
}
.character-card-identity small span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.character-card-quick {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px;
}
.character-card-quick>span {
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:32px;
    padding:0 9px;
    border:1px solid var(--line);
    border-radius:10px;
    color:var(--text-soft);
    background:var(--input-bg);
    font-size:.64rem;
}
.character-card-quick>span:nth-child(1) svg { color:#ef5159; }
.character-card-quick>span:nth-child(2) svg { color:#f59e0b; }
.character-card-quick>span:nth-child(3) svg { color:#0ea5e9; }
.character-card-chevron {
    color:var(--muted);
    font-size:.75rem;
    transition:transform .2s ease,color .2s ease;
}
.game-character-card.is-expanded .character-card-chevron {
    color:var(--presence);
    transform:rotate(180deg);
}
.character-card-body {
    padding:4px 18px 18px;
    border-top:1px solid var(--line);
}
.character-card-body[hidden] { display:none !important; }
.game-character-card.is-expanded .character-card-body { animation:characterBodyIn .2s ease both; }
@keyframes characterBodyIn {
    from { opacity:0; transform:translateY(-5px); }
    to { opacity:1; transform:none; }
}

.license-manager-item,
.license-manager-add {
    grid-template-columns:minmax(230px,1.7fr) minmax(120px,.55fr) auto !important;
}
.license-legacy-note {
    display:flex;
    align-items:center;
    gap:8px;
    min-height:46px;
    color:var(--muted);
    font-size:.68rem;
    line-height:1.7;
}
.license-legacy-note svg { flex:0 0 auto; color:var(--accent-bright); }

.user-modal-footer {
    direction:ltr;
    justify-content:flex-start !important;
}
.user-modal-footer .btn { direction:rtl; }
.user-modal-footer-spacer { flex:1 1 auto; }
.user-modal-delete:disabled {
    opacity:.45;
    cursor:not-allowed;
    filter:grayscale(.35);
}

@media (max-width:700px) {
    .queue-access-panel { grid-template-columns:48px minmax(0,1fr) !important; }
    .queue-access-actions {
        grid-column:1/-1;
        align-items:stretch;
        flex-direction:column;
        padding-top:4px;
    }
    .queue-access-actions .queue-access-rank { width:100%; text-align:center; }
    .queue-access-actions>.btn { width:100%; min-height:48px; }
    .character-card-toggle,
    .character-card-toggle.is-static {
        grid-template-columns:44px minmax(0,1fr) 18px;
        min-height:76px;
        padding:14px;
    }
    .character-card-toggle.is-static { grid-template-columns:44px minmax(0,1fr); }
    .character-card-avatar { width:44px; height:44px; border-radius:13px; }
    .character-card-quick {
        grid-column:2/-1;
        justify-content:flex-start;
    }
    .character-card-toggle.is-static .character-card-quick { grid-column:2; }
    .character-card-body { padding:4px 14px 15px; }
    .license-manager-item,
    .license-manager-add { grid-template-columns:1fr !important; }
    .license-manager-actions { grid-column:1; }
    .license-manager-add>.btn { grid-column:1; width:100%; }
    .user-modal-footer {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px;
    }
    .user-modal-footer-spacer { display:none; }
    .user-modal-delete { grid-column:1/-1; grid-row:2; }
}

@media (max-width:430px) {
    .character-card-toggle,
    .character-card-toggle.is-static {
        grid-template-columns:40px minmax(0,1fr) 16px;
        gap:10px;
        padding:13px 12px;
    }
    .character-card-toggle.is-static { grid-template-columns:40px minmax(0,1fr); }
    .character-card-avatar { width:40px; height:40px; }
    .character-card-identity>span { align-items:flex-start; flex-direction:column; gap:5px; }
    .character-card-identity strong { width:100%; white-space:normal; }
    .character-card-quick>span { flex:1 1 72px; justify-content:center; padding-inline:6px; }
    .character-card-body { padding-inline:12px; }
    .user-modal-footer { grid-template-columns:1fr 1fr !important; }
}

@media (prefers-reduced-motion:reduce) {
    .character-card-chevron,.game-character-card,.character-card-body { transition:none !important; animation:none !important; }
}

/* v8.1 — responsive dashboard navigation: right sidebar on desktop, full-width command bar on tablet/mobile */
.dashboard-shell {
    grid-template-columns:minmax(0,1fr) clamp(230px,18vw,280px) !important;
}
.dashboard-sidebar {
    min-width:0;
    max-width:100%;
}
.dashboard-sidebar > *,
.dashboard-sidebar .dashboard-nav,
.dashboard-sidebar .dashboard-nav a {
    min-width:0;
}

@media (max-width:1180px) {
    .dashboard-shell {
        display:block !important;
        min-height:100svh;
        padding-top:var(--header-h) !important;
    }
    .dashboard-sidebar {
        position:sticky !important;
        z-index:45;
        top:var(--header-h) !important;
        right:auto !important;
        display:grid !important;
        grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr) 50px;
        align-items:center;
        gap:10px;
        width:100%;
        height:auto !important;
        padding:10px clamp(12px,2vw,22px) !important;
        border:0 !important;
        border-bottom:1px solid var(--line) !important;
        background:color-mix(in srgb,var(--surface-solid) 94%,transparent) !important;
        box-shadow:0 12px 30px rgba(0,0,0,.16);
        backdrop-filter:blur(18px) saturate(120%);
    }
    .dashboard-sidebar .profile-summary {
        display:grid;
        grid-template-columns:42px minmax(0,1fr);
        justify-items:stretch;
        gap:10px;
        min-height:50px;
        padding:5px 8px;
        border-radius:13px;
    }
    .dashboard-sidebar .avatar {
        width:42px;
        height:42px;
        border-radius:12px;
    }
    .dashboard-sidebar .profile-summary > div:nth-child(2) {
        display:block;
    }
    .dashboard-sidebar .profile-summary > svg {
        display:none;
    }
    .dashboard-sidebar .dashboard-nav {
        display:flex !important;
        flex-direction:row !important;
        align-items:center;
        justify-content:center;
        gap:5px;
        margin:0 !important;
        overflow:visible;
    }
    .dashboard-sidebar .dashboard-nav a,
    .dashboard-sidebar .dashboard-nav a:not(.active) {
        position:relative;
        flex:1 1 48px;
        width:auto;
        min-width:46px;
        max-width:74px;
        min-height:48px;
        padding:0 5px;
        font-size:0 !important;
    }
    .dashboard-sidebar .dashboard-nav a > span {
        width:36px;
        height:36px;
        margin:auto;
        background:rgba(255,255,255,.035);
    }
    .dashboard-sidebar .dashboard-nav svg {
        font-size:.95rem !important;
    }
    .dashboard-sidebar .nav-count {
        position:absolute;
        top:2px;
        left:2px;
    }
    .dashboard-sidebar .sidebar-server {
        display:none !important;
    }
    .dashboard-sidebar form {
        margin:0 !important;
    }
    .dashboard-sidebar .sidebar-logout {
        width:50px;
        min-height:48px;
        padding:0;
        font-size:0;
    }
    .dashboard-sidebar .sidebar-logout svg {
        font-size:.95rem;
    }
    .dashboard-content {
        width:100%;
        max-width:1600px;
        margin-inline:auto;
        padding:30px clamp(14px,2.4vw,30px) 72px !important;
    }
}

@media (max-width:760px) {
    .dashboard-sidebar {
        position:relative !important;
        z-index:10;
        top:auto !important;
        grid-template-columns:minmax(0,1fr) 48px;
        gap:9px;
        padding:10px 12px 12px !important;
        box-shadow:none;
    }
    .dashboard-sidebar .profile-summary {
        grid-column:1;
        grid-row:1;
        width:100%;
    }
    .dashboard-sidebar form {
        grid-column:2;
        grid-row:1;
    }
    .dashboard-sidebar .sidebar-logout {
        width:48px;
        height:50px;
    }
    .dashboard-sidebar .dashboard-nav {
        grid-column:1 / -1;
        grid-row:2;
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
        width:100%;
    }
    .dashboard-sidebar .dashboard-nav a,
    .dashboard-sidebar .dashboard-nav a:not(.active) {
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:3px;
        width:100%;
        max-width:none;
        min-width:0;
        min-height:58px;
        padding:6px 4px;
        font-size:.62rem !important;
        line-height:1.35;
        text-align:center;
    }
    .dashboard-sidebar .dashboard-nav a > span {
        width:28px;
        height:28px;
        margin:0;
        border-radius:9px;
    }
    .dashboard-sidebar .dashboard-nav svg {
        font-size:.82rem !important;
    }
    .dashboard-sidebar .nav-count {
        top:4px;
        left:6px;
    }
    .dashboard-content {
        padding:18px max(10px,env(safe-area-inset-left)) 54px !important;
    }
}

@media (max-width:360px) {
    .dashboard-sidebar {
        padding-inline:8px !important;
    }
    .dashboard-sidebar .profile-summary {
        grid-template-columns:38px minmax(0,1fr);
        padding-inline:6px;
    }
    .dashboard-sidebar .avatar {
        width:38px;
        height:38px;
    }
    .dashboard-sidebar .dashboard-nav {
        gap:5px;
    }
    .dashboard-sidebar .dashboard-nav a,
    .dashboard-sidebar .dashboard-nav a:not(.active) {
        min-height:56px;
        padding-inline:2px;
        font-size:.58rem !important;
    }
}

@media (min-width:761px) and (max-width:1180px) {
    .dashboard-sidebar .dashboard-nav a.active {
        flex-basis:auto;
        max-width:118px;
        padding-inline:9px;
        font-size:.64rem !important;
        white-space:nowrap;
    }
}

/* v8.2 — compact dashboard hamburger navigation and mobile-safe ticket cards */
.dashboard-sidebar-head {
    display:block;
    min-width:0;
}
.dashboard-menu-toggle {
    display:none;
    place-items:center;
    width:48px;
    height:48px;
    flex:0 0 48px;
    padding:0;
    border:1px solid var(--line);
    border-radius:14px;
    color:var(--text);
    background:var(--card-bg);
    box-shadow:var(--shadow-soft);
    cursor:pointer;
}
.dashboard-menu-toggle i {
    grid-area:1 / 1;
    transition:opacity .18s ease,transform .18s ease;
}
.dashboard-menu-toggle .fa-xmark {
    opacity:0;
    transform:rotate(-20deg) scale(.75);
}
.dashboard-sidebar.is-menu-open .dashboard-menu-toggle .fa-bars {
    opacity:0;
    transform:rotate(20deg) scale(.75);
}
.dashboard-sidebar.is-menu-open .dashboard-menu-toggle .fa-xmark {
    opacity:1;
    transform:none;
}
.dashboard-menu-panel {
    display:flex;
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    flex-direction:column;
}
.dashboard-menu-panel .dashboard-nav {
    min-width:0;
}
.dashboard-menu-panel .sidebar-server {
    margin-top:auto;
}

.dashboard-ticket-list > a {
    grid-template-columns:10px minmax(0,1fr) auto 16px !important;
    min-width:0;
}
.dashboard-ticket-main {
    display:block;
    min-width:0;
}
.dashboard-ticket-main strong {
    display:flex;
    min-width:0;
    align-items:baseline;
    gap:7px;
}
.dashboard-ticket-number {
    flex:0 0 auto;
    color:var(--accent-bright);
}
.dashboard-ticket-subject {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.dashboard-ticket-main small {
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:.68rem;
}
.dashboard-ticket-state {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:5px 9px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--input-bg);
    white-space:nowrap;
}
.dashboard-ticket-arrow {
    color:var(--muted);
    font-size:.68rem;
}

@media (max-width:1180px) {
    .dashboard-sidebar {
        position:sticky !important;
        z-index:90 !important;
        top:var(--header-h) !important;
        right:auto !important;
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        padding:9px clamp(10px,2vw,18px) !important;
        overflow:visible !important;
        border:0 !important;
        border-bottom:1px solid var(--line) !important;
    }
    .dashboard-sidebar-head {
        display:grid;
        grid-template-columns:minmax(0,1fr) 48px;
        align-items:center;
        gap:9px;
        width:100%;
    }
    .dashboard-menu-toggle {
        display:grid;
    }
    .dashboard-sidebar .profile-summary {
        width:100%;
        min-width:0;
        min-height:48px;
        padding:4px 7px !important;
    }
    .dashboard-sidebar .profile-summary > div:nth-child(2) {
        display:block !important;
    }
    .dashboard-menu-panel {
        position:absolute;
        z-index:100;
        top:calc(100% + 7px);
        right:clamp(8px,1.5vw,18px);
        left:clamp(8px,1.5vw,18px);
        display:grid;
        grid-template-columns:1fr auto;
        gap:12px;
        max-height:min(72svh,620px);
        padding:14px;
        overflow:auto;
        overscroll-behavior:contain;
        border:1px solid var(--line);
        border-radius:20px;
        background:color-mix(in srgb,var(--surface-solid) 97%,transparent);
        box-shadow:0 24px 60px rgba(0,0,0,.34);
        backdrop-filter:blur(22px) saturate(125%);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-8px) scale(.985);
        transform-origin:top center;
        transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
    }
    .dashboard-sidebar.is-menu-open .dashboard-menu-panel {
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
    }
    .dashboard-menu-panel .dashboard-nav {
        grid-column:1 / -1;
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px !important;
        width:100%;
        margin:0 !important;
    }
    .dashboard-menu-panel .dashboard-nav a,
    .dashboard-menu-panel .dashboard-nav a:not(.active) {
        display:flex !important;
        flex-direction:row !important;
        justify-content:flex-start !important;
        gap:9px !important;
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        min-height:52px !important;
        padding:7px 10px !important;
        font-size:.72rem !important;
        line-height:1.4;
        text-align:right;
    }
    .dashboard-menu-panel .dashboard-nav a > span {
        flex:0 0 34px;
        width:34px !important;
        height:34px !important;
        margin:0 !important;
    }
    .dashboard-menu-panel .dashboard-nav svg {
        font-size:.9rem !important;
    }
    .dashboard-menu-panel .nav-count {
        top:3px !important;
        left:3px !important;
    }
    .dashboard-menu-panel .sidebar-server {
        grid-column:1;
        display:grid !important;
        grid-template-columns:auto minmax(0,1fr) !important;
        justify-items:stretch !important;
        min-width:0;
        margin:0 !important;
        padding:11px 13px !important;
    }
    .dashboard-menu-panel .sidebar-server div {
        display:flex !important;
    }
    .dashboard-menu-panel form {
        grid-column:2;
        align-self:stretch;
        margin:0 !important;
    }
    .dashboard-menu-panel .sidebar-logout {
        width:auto !important;
        min-width:148px;
        height:100%;
        min-height:50px !important;
        padding:0 15px !important;
        font-size:.74rem !important;
    }
    .dashboard-menu-panel .sidebar-logout span {
        display:inline;
    }
}

@media (max-width:760px) {
    .dashboard-sidebar {
        padding:8px 10px !important;
    }
    .dashboard-sidebar-head {
        grid-template-columns:minmax(0,1fr) 46px;
        gap:8px;
    }
    .dashboard-menu-toggle {
        width:46px;
        height:46px;
        flex-basis:46px;
        border-radius:13px;
    }
    .dashboard-sidebar .profile-summary {
        grid-template-columns:40px minmax(0,1fr) !important;
        min-height:46px;
        gap:9px !important;
    }
    .dashboard-sidebar .profile-summary > svg {
        display:none !important;
    }
    .dashboard-sidebar .avatar {
        width:40px !important;
        height:40px !important;
        border-radius:11px !important;
    }
    .dashboard-menu-panel {
        top:calc(100% + 5px);
        right:8px;
        left:8px;
        grid-template-columns:1fr;
        gap:10px;
        max-height:min(76svh,590px);
        padding:11px;
        border-radius:18px;
    }
    .dashboard-menu-panel .dashboard-nav {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px !important;
    }
    .dashboard-menu-panel .dashboard-nav a,
    .dashboard-menu-panel .dashboard-nav a:not(.active) {
        min-height:54px !important;
        padding:7px 8px !important;
        font-size:.68rem !important;
    }
    .dashboard-menu-panel .sidebar-server,
    .dashboard-menu-panel form {
        grid-column:1;
    }
    .dashboard-menu-panel .sidebar-logout {
        width:100% !important;
        min-width:0;
        min-height:48px !important;
    }

    .dashboard-tickets .panel-head {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:9px 12px;
    }
    .dashboard-tickets .panel-head > a {
        min-height:38px;
        display:inline-flex;
        align-items:center;
        padding:0 10px;
        border:1px solid var(--line);
        border-radius:10px;
        background:var(--input-bg);
        white-space:nowrap;
    }
    .dashboard-ticket-list {
        gap:8px;
    }
    .dashboard-ticket-list > a {
        grid-template-columns:8px minmax(0,1fr) 14px !important;
        grid-template-areas:
            "dot main arrow"
            "dot state arrow";
        align-items:center !important;
        gap:7px 10px !important;
        min-height:82px;
        padding:12px !important;
    }
    .dashboard-ticket-list > a > .ticket-status-dot {
        grid-area:dot;
        align-self:stretch;
        width:5px;
        height:auto;
        min-height:42px;
        border-radius:999px;
    }
    .dashboard-ticket-main {
        grid-area:main;
    }
    .dashboard-ticket-main strong {
        display:grid;
        grid-template-columns:auto minmax(0,1fr);
        gap:6px;
        font-size:.78rem;
        line-height:1.7;
    }
    .dashboard-ticket-subject {
        overflow:visible;
        text-overflow:clip;
        white-space:normal;
        overflow-wrap:anywhere;
    }
    .dashboard-ticket-main small {
        margin-top:2px;
        font-size:.64rem;
        overflow-wrap:anywhere;
    }
    .dashboard-ticket-state {
        grid-area:state;
        justify-self:start;
        min-height:26px;
        padding:3px 8px;
        font-size:.62rem !important;
    }
    .dashboard-ticket-arrow {
        grid-area:arrow;
        align-self:center;
    }
    .dashboard-ticket-empty {
        display:grid !important;
        grid-template-columns:42px minmax(0,1fr) !important;
        gap:10px !important;
        padding:13px !important;
    }
    .dashboard-ticket-empty > i {
        grid-column:1;
        grid-row:1;
        align-self:center;
    }
    .dashboard-ticket-empty > div {
        grid-column:2;
        grid-row:1;
        min-width:0;
    }
    .dashboard-ticket-empty > .btn {
        grid-column:1 / -1;
        width:100%;
        min-height:44px;
    }
}

@media (max-width:360px) {
    .dashboard-menu-panel .dashboard-nav {
        grid-template-columns:1fr;
    }
    .dashboard-menu-panel {
        max-height:78svh;
    }
    .dashboard-ticket-main strong {
        grid-template-columns:1fr;
        gap:1px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .dashboard-menu-panel,
    .dashboard-menu-toggle i {
        transition:none !important;
    }
}

/* v8.2 ordering guard against legacy dashboard-sidebar grid rules */
@media (max-width:1180px) {
    .dashboard-menu-panel {
        background:var(--surface-solid) !important;
    }
    .dashboard-menu-panel .dashboard-nav {
        grid-row:1 !important;
    }
    .dashboard-menu-panel .sidebar-server {
        grid-row:2 !important;
    }
    .dashboard-menu-panel form {
        grid-row:2 !important;
    }
}
@media (max-width:760px) {
    .dashboard-menu-panel .dashboard-nav {
        grid-row:1 !important;
    }
    .dashboard-menu-panel .sidebar-server {
        grid-row:2 !important;
    }
    .dashboard-menu-panel form {
        grid-row:3 !important;
    }
}


/* Outbreak v3.7.5: force datepicker text black in dark theme. */
html[data-theme="dark"] .datepicker-container .datepicker-plot-area,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian {
    background:#ffffff !important;
    color:#000000 !important;
}
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-day-view .table-days td span,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-year-view .year-item,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-month-view .month-item,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-day-view .table-days td span,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-year-view .year-item,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-month-view .month-item {
    color:#000000 !important;
}
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-day-view .table-days td span:hover,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-year-view .year-item:hover,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-month-view .month-item:hover,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-day-view .table-days td span:hover,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-year-view .year-item:hover,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-month-view .month-item:hover {
    color:#000000 !important;
    background:#eff6ff !important;
}
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .selected,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .selected *,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .selected,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .selected * {
    color:#ffffff !important;
    background:#2563eb !important;
}


/* Outbreak v3.7.6 final: datepicker day/month/year text is black in dark theme. */
html[data-theme="dark"] .datepicker-container .datepicker-plot-area,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian {
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#000000 !important;
}
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-day-view .table-days td span,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-year-view .year-item,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-month-view .month-item,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-day-view .table-days td span,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-year-view .year-item,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-month-view .month-item {
    color:#000000 !important;
}
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-day-view .table-days td span:hover,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-year-view .year-item:hover,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-month-view .month-item:hover,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-day-view .table-days td span:hover,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-year-view .year-item:hover,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-month-view .month-item:hover {
    color:#000000 !important;
    background:#eff6ff !important;
}
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .selected,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .selected *,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .selected,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .selected * {
    color:#ffffff !important;
    background:#2563eb !important;
}


/* Outbreak v3.7.7: disabled time inputs in datepicker stay black/readable. */
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-time-view input,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area .datepicker-time-view input:disabled,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area input.minute-input,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area input.hour-input,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area input.second-input,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area input.minute-input:disabled,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area input.hour-input:disabled,
html[data-theme="dark"] .datepicker-container .datepicker-plot-area input.second-input:disabled,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-time-view input,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian .datepicker-time-view input:disabled,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian input.minute-input,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian input.hour-input,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian input.second-input,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian input.minute-input:disabled,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian input.hour-input:disabled,
html[data-theme="dark"] .datepicker-plot-area.datepicker-persian input.second-input:disabled {
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
    opacity:1 !important;
    background:#ffffff !important;
    background-color:#ffffff !important;
}





/* Outbreak v3.8.0: compact sidebar + working internal scroll.
   Page stays bounded, but menu buttons keep normal height and do not stretch.
*/
html:has(.admin-layout),
body:has(.admin-layout) {
    height: 100% !important;
    max-height: 100% !important;
}
.admin-layout {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Main content is the page scroller. */
.admin-main {
    min-height: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Sidebar is fixed-height, but the buttons keep compact/normal size. */
.admin-sidebar {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}
.admin-sidebar .admin-brand,
.admin-sidebar .admin-profile,
.admin-sidebar .admin-back {
    flex: 0 0 auto !important;
    min-height: unset !important;
}

/* The nav scrolls only when needed; it must NOT distribute extra height between items. */
.admin-sidebar .admin-nav {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 250px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    gap: 8px !important;
    padding-inline-end: 4px !important;
    scrollbar-width: thin !important;
}
.admin-sidebar .admin-nav a {
    flex: 0 0 auto !important;
    min-height: 46px !important;
    height: auto !important;
    max-height: none !important;
    padding-block: 11px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
.admin-sidebar .admin-nav::-webkit-scrollbar {
    width: 6px !important;
}
.admin-sidebar .admin-nav::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .45) !important;
    border-radius: 999px !important;
}

/* Modal: bounded viewport; only the active panel scrolls; footer remains visible. */
body:has(.user-modal:not([hidden])),
html.has-open-user-modal,
body.has-open-user-modal {
    overflow: hidden !important;
}
.user-modal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    z-index: 12000 !important;
}
.user-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
}
.user-modal-card {
    height: min(92dvh, 880px) !important;
    max-height: 92dvh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.user-modal-head,
.user-modal-tabs {
    flex: 0 0 auto !important;
}
.user-modal-form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
.user-modal-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 18px !important;
}
.user-modal-panel[hidden] {
    display: none !important;
}
.user-modal-panel.active {
    display: block !important;
}
.user-modal-footer {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    margin-top: auto !important;
    background: var(--surface-2) !important;
    box-shadow: 0 -18px 30px rgba(0,0,0,.18) !important;
}

/* Mobile admin layout should use natural page scroll, but modal remains bounded. */
@media (max-width: 768px) {
    html:has(.admin-layout),
    body:has(.admin-layout),
    .admin-layout,
    .admin-main {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .admin-sidebar {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .admin-sidebar .admin-nav {
        max-height: min(70dvh, 520px) !important;
        overflow-y: auto !important;
    }
    .user-modal-card {
        height: 94dvh !important;
        max-height: 94dvh !important;
        width: min(96vw, 720px) !important;
    }
    .user-modal-footer {
        padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    }
}


/* Outbreak v3.8.1: admin user table shell must scroll. */
.panel.admin-user-table-shell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 250px) !important;
    overflow: hidden !important;
}
.panel.admin-user-table-shell .admin-table-title {
    flex: 0 0 auto !important;
}
.panel.admin-user-table-shell .admin-user-table {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
}
.panel.admin-user-table-shell .admin-user-table::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
.panel.admin-user-table-shell .admin-user-table::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .45) !important;
    border-radius: 999px !important;
}
.panel.admin-user-table-shell .admin-user-row-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: var(--surface-2) !important;
    backdrop-filter: blur(10px) !important;
}
.panel.admin-user-table-shell .admin-user-row {
    flex: 0 0 auto !important;
}

/* Mobile users list should scroll naturally with cards, not create a tiny nested table. */
@media (max-width: 768px) {
    .panel.admin-user-table-shell {
        max-height: none !important;
        overflow: visible !important;
    }
    .panel.admin-user-table-shell .admin-user-table {
        max-height: none !important;
        overflow: visible !important;
    }
    .panel.admin-user-table-shell .admin-user-row-head {
        position: static !important;
    }
}


/* Phone cards: broad selector so it works in every modal tab, including Activity. */
.user-info-list .phone-status-card,
.user-info-list > div.phone-status-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--line) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.10) !important;
}
.user-info-list .phone-status-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: .55 !important;
    background: radial-gradient(circle at 12% 10%, rgba(255,255,255,.22), transparent 28%) !important;
}
.user-info-list .phone-status-card span,
.user-info-list .phone-status-card b,
.user-info-list .phone-status-card small {
    position: relative !important;
    z-index: 1 !important;
}
.user-info-list .phone-status-card.is-verified {
    background: linear-gradient(135deg, rgba(34,197,94,.30), rgba(22,163,74,.18) 48%, rgba(5,46,22,.11)) !important;
    border-color: rgba(34,197,94,.62) !important;
}
.user-info-list .phone-status-card.is-verified span,
.user-info-list .phone-status-card.is-verified small {
    color: #86efac !important;
}
.user-info-list .phone-status-card.is-verified b {
    color: #22c55e !important;
}
.user-info-list .phone-status-card.is-unverified {
    background: linear-gradient(135deg, rgba(239,68,68,.30), rgba(185,28,28,.18) 48%, rgba(69,10,10,.11)) !important;
    border-color: rgba(239,68,68,.64) !important;
}
.user-info-list .phone-status-card.is-unverified span,
.user-info-list .phone-status-card.is-unverified small {
    color: #fca5a5 !important;
}
.user-info-list .phone-status-card.is-unverified b {
    color: #ef4444 !important;
}
html[data-theme="light"] .user-info-list .phone-status-card.is-verified {
    background: linear-gradient(135deg, rgba(34,197,94,.20), rgba(22,163,74,.10)) !important;
}
html[data-theme="light"] .user-info-list .phone-status-card.is-verified span,
html[data-theme="light"] .user-info-list .phone-status-card.is-verified small {
    color: #15803d !important;
}
html[data-theme="light"] .user-info-list .phone-status-card.is-verified b {
    color: #166534 !important;
}
html[data-theme="light"] .user-info-list .phone-status-card.is-unverified {
    background: linear-gradient(135deg, rgba(239,68,68,.20), rgba(185,28,28,.10)) !important;
}
html[data-theme="light"] .user-info-list .phone-status-card.is-unverified span,
html[data-theme="light"] .user-info-list .phone-status-card.is-unverified small {
    color: #b91c1c !important;
}
html[data-theme="light"] .user-info-list .phone-status-card.is-unverified b {
    color: #991b1b !important;
}

/* User directory: the panel itself is the scroller, per user request. */
.panel.admin-user-table-shell {
    display: block !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 230px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
}
.panel.admin-user-table-shell::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
.panel.admin-user-table-shell::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .45) !important;
    border-radius: 999px !important;
}
.panel.admin-user-table-shell .admin-table-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    background: var(--card-bg) !important;
    backdrop-filter: blur(10px) !important;
}
.panel.admin-user-table-shell .admin-user-table {
    overflow: visible !important;
    min-width: 980px !important;
}
.panel.admin-user-table-shell .admin-user-row-head {
    position: sticky !important;
    top: 74px !important;
    z-index: 3 !important;
    background: var(--surface-2) !important;
    backdrop-filter: blur(10px) !important;
}

/* Other admin tables/lists scroll internally on desktop. */
.payment-table-v49,
.admin-orders-list,
.admin-list,
.admin-ticket-list,
.admin-ticket-grid,
.admin-product-list.sortable-admin-list {
    max-height: calc(100dvh - 260px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
}
.payment-table-v49::-webkit-scrollbar,
.admin-orders-list::-webkit-scrollbar,
.admin-list::-webkit-scrollbar,
.admin-ticket-list::-webkit-scrollbar,
.admin-ticket-grid::-webkit-scrollbar,
.admin-product-list.sortable-admin-list::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
.payment-table-v49::-webkit-scrollbar-thumb,
.admin-orders-list::-webkit-scrollbar-thumb,
.admin-list::-webkit-scrollbar-thumb,
.admin-ticket-list::-webkit-scrollbar-thumb,
.admin-ticket-grid::-webkit-scrollbar-thumb,
.admin-product-list.sortable-admin-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .45) !important;
    border-radius: 999px !important;
}
.payment-table-head-v49 {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: var(--surface-2) !important;
    backdrop-filter: blur(10px) !important;
}

/* Payment/order modal scroll fix. */
.payment-modal-v49:not([hidden]),
.payment-modal-backdrop-v49:not([hidden]),
.admin-form-modal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    z-index: 12000 !important;
}
.payment-dialog-v49,
.admin-form-dialog {
    max-height: min(92dvh, 900px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.payment-dialog-v49 > header,
.admin-form-dialog > header {
    flex: 0 0 auto !important;
}
.payment-dialog-v49 > :not(header):not(footer),
.admin-form-dialog > :not(header):not(footer) {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}
.payment-dialog-v49 > footer,
.payment-dialog-v49 .payment-actions-v49,
.admin-modal-actions {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    background: var(--modal-bg) !important;
    box-shadow: 0 -18px 30px rgba(0,0,0,.18) !important;
}
.admin-modal-form {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Mobile: no left/right scroll for admin tables; convert row-based lists to cards. */
@media (max-width: 768px) {
    .panel.admin-user-table-shell,
    .payment-table-v49,
    .admin-orders-list,
    .admin-list,
    .admin-ticket-list,
    .admin-ticket-grid,
    .admin-product-list.sortable-admin-list {
        max-height: none !important;
        overflow: visible !important;
        display: grid !important;
        gap: 12px !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .panel.admin-user-table-shell .admin-table-title,
    .panel.admin-user-table-shell .admin-user-row-head,
    .payment-table-head-v49 {
        position: static !important;
    }
    .panel.admin-user-table-shell .admin-user-table {
        min-width: 0 !important;
        width: 100% !important;
        display: grid !important;
        gap: 12px !important;
        overflow: visible !important;
    }
    .admin-user-row-head,
    .payment-table-head-v49 {
        display: none !important;
    }
    .admin-user-row,
    .payment-table-row-v49,
    .admin-list-row,
    .admin-orders-list > *,
    .admin-ticket-card,
    .ticket-list-card,
    .admin-product-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 15px !important;
        border: 1px solid var(--line) !important;
        border-radius: 18px !important;
        background: var(--card-bg) !important;
        box-shadow: var(--shadow-soft) !important;
        overflow: hidden !important;
    }
    .admin-user-row {
        grid-template-columns: 1fr 1fr !important;
    }
    .admin-user-row .identity {
        grid-column: 1 / -1 !important;
    }
    .admin-user-row .admin-user-cell,
    .payment-table-row-v49 > *,
    .admin-list-row > *,
    .admin-orders-list > * > *,
    .admin-ticket-card > *,
    .ticket-list-card > *,
    .admin-product-card > * {
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    .payment-table-row-v49 {
        align-items: stretch !important;
    }
    .payment-order-v49,
    .payment-user-v49,
    .payment-product-v49 {
        width: 100% !important;
    }
    .payment-dialog-v49,
    .admin-form-dialog {
        width: min(96vw, 760px) !important;
        max-height: 94dvh !important;
    }
}


/* Outbreak v3.8.3: mobile hamburger admin menu + lightweight scroll/card rules. */

/* Keep verified/unverified phone status styles, but no heavy JS observer is needed. */
.user-info-list .phone-status-card,
.user-info-list > div.phone-status-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--line) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.10) !important;
}
.user-info-list .phone-status-card.is-verified {
    background: linear-gradient(135deg, rgba(34,197,94,.30), rgba(22,163,74,.18) 48%, rgba(5,46,22,.11)) !important;
    border-color: rgba(34,197,94,.62) !important;
}
.user-info-list .phone-status-card.is-verified span,
.user-info-list .phone-status-card.is-verified small { color:#86efac !important; }
.user-info-list .phone-status-card.is-verified b { color:#22c55e !important; }
.user-info-list .phone-status-card.is-unverified {
    background: linear-gradient(135deg, rgba(239,68,68,.30), rgba(185,28,28,.18) 48%, rgba(69,10,10,.11)) !important;
    border-color: rgba(239,68,68,.64) !important;
}
.user-info-list .phone-status-card.is-unverified span,
.user-info-list .phone-status-card.is-unverified small { color:#fca5a5 !important; }
.user-info-list .phone-status-card.is-unverified b { color:#ef4444 !important; }
html[data-theme="light"] .user-info-list .phone-status-card.is-verified {
    background: linear-gradient(135deg, rgba(34,197,94,.20), rgba(22,163,74,.10)) !important;
}
html[data-theme="light"] .user-info-list .phone-status-card.is-verified span,
html[data-theme="light"] .user-info-list .phone-status-card.is-verified small { color:#15803d !important; }
html[data-theme="light"] .user-info-list .phone-status-card.is-verified b { color:#166534 !important; }
html[data-theme="light"] .user-info-list .phone-status-card.is-unverified {
    background: linear-gradient(135deg, rgba(239,68,68,.20), rgba(185,28,28,.10)) !important;
}
html[data-theme="light"] .user-info-list .phone-status-card.is-unverified span,
html[data-theme="light"] .user-info-list .phone-status-card.is-unverified small { color:#b91c1c !important; }
html[data-theme="light"] .user-info-list .phone-status-card.is-unverified b { color:#991b1b !important; }

/* Desktop bounded tables/lists. Keep it specific and light. */
@media (min-width: 769px) {
    .panel.admin-user-table-shell {
        max-height: calc(100dvh - 230px) !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }
    .panel.admin-user-table-shell .admin-user-table {
        min-width: 980px !important;
        overflow: visible !important;
    }
    .panel.admin-user-table-shell .admin-table-title {
        position: sticky !important;
        top: 0 !important;
        z-index: 4 !important;
        background: var(--card-bg) !important;
    }
    .panel.admin-user-table-shell .admin-user-row-head {
        position: sticky !important;
        top: 72px !important;
        z-index: 3 !important;
        background: var(--surface-2) !important;
    }
    .payment-table-v49,
    .admin-orders-list,
    .admin-list,
    .admin-ticket-list,
    .admin-ticket-grid {
        max-height: calc(100dvh - 260px) !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }
    .payment-table-head-v49 {
        position: sticky !important;
        top: 0 !important;
        z-index: 3 !important;
        background: var(--surface-2) !important;
    }
}

/* Payment/order/admin modals: bounded and scrollable. */
.payment-modal-v49:not([hidden]),
.admin-form-modal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    max-height: 100dvh !important;
    z-index: 12000 !important;
}
.payment-dialog-v49,
.admin-form-dialog {
    max-height: min(92dvh, 900px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.payment-dialog-v49 > header,
.admin-form-dialog > header {
    flex: 0 0 auto !important;
}
.payment-dialog-v49 > :not(header):not(footer),
.admin-modal-form {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}
.payment-dialog-v49 .payment-actions-v49,
.admin-modal-actions {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    background: var(--modal-bg) !important;
    box-shadow: 0 -18px 30px rgba(0,0,0,.18) !important;
}

/* Mobile admin: sidebar becomes hamburger off-canvas. */
.admin-mobile-menu-toggle,
.admin-mobile-sidebar-backdrop {
    display: none;
}
@media (max-width: 768px) {
    .admin-layout {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-top: 76px !important;
    }
    .admin-main {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 16px 12px 56px !important;
    }
    .admin-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 80 !important;
        margin-top: 0 !important;
        padding-inline-start: 66px !important;
        backdrop-filter: blur(14px) !important;
    }
    .admin-mobile-menu-toggle {
        position: fixed !important;
        top: 14px !important;
        right: 12px !important;
        z-index: 21000 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 0 13px !important;
        border: 1px solid var(--line) !important;
        border-radius: 15px !important;
        color: var(--text) !important;
        background: var(--card-bg) !important;
        box-shadow: var(--shadow-soft) !important;
    }
    .admin-mobile-sidebar-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 19990 !important;
        display: block !important;
        border: 0 !important;
        background: rgba(2,5,7,.62) !important;
        backdrop-filter: blur(8px) !important;
    }
    .admin-mobile-sidebar-backdrop[hidden] {
        display: none !important;
    }
    .admin-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 20000 !important;
        width: min(82vw, 320px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(105%) !important;
        transition: transform .22s ease !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    html.admin-sidebar-open .admin-sidebar {
        transform: translateX(0) !important;
    }
    .admin-sidebar .admin-nav {
        max-height: none !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .admin-sidebar .admin-nav a {
        flex: 0 0 auto !important;
        min-height: 46px !important;
        padding-block: 11px !important;
    }

    /* Mobile cards: no horizontal table scrolling. */
    .panel.admin-user-table-shell,
    .payment-table-v49,
    .admin-orders-list,
    .admin-list,
    .admin-ticket-list,
    .admin-ticket-grid {
        max-height: none !important;
        overflow: visible !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .panel.admin-user-table-shell .admin-user-table {
        min-width: 0 !important;
        display: grid !important;
        gap: 12px !important;
        overflow: visible !important;
    }
    .admin-user-row-head,
    .payment-table-head-v49 {
        display: none !important;
    }
    .admin-user-row,
    .payment-table-row-v49,
    .admin-list-row,
    .admin-orders-list > *,
    .admin-ticket-card,
    .ticket-list-card,
    .admin-product-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 15px !important;
        border: 1px solid var(--line) !important;
        border-radius: 18px !important;
        background: var(--card-bg) !important;
        box-shadow: var(--shadow-soft) !important;
        overflow: hidden !important;
    }
    .admin-user-row {
        grid-template-columns: 1fr 1fr !important;
    }
    .admin-user-row .identity {
        grid-column: 1 / -1 !important;
    }
    .admin-user-row .admin-user-cell,
    .payment-table-row-v49 > *,
    .admin-list-row > *,
    .admin-orders-list > * > *,
    .admin-ticket-card > *,
    .ticket-list-card > *,
    .admin-product-card > * {
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}


/* Outbreak v3.8.3b: pagination and store product mobile/card safety. */
.admin-store-pagination {
    margin-top: 14px !important;
}
@media (max-width: 768px) {
    .admin-store-pagination,
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .admin-product-list.sortable-admin-list {
        max-height: none !important;
        overflow: visible !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .admin-product-card {
        grid-template-columns: 58px minmax(0,1fr) !important;
    }
    .admin-product-card .admin-card-actions {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
}








/* Outbreak v3.8.6: desktop topbar normal, mobile topbar fixed with hamburger/logo/profile. */

/* Desktop: DO NOT fixed-position topbar. This prevents content from going under it. */
.admin-topbar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    z-index: 20 !important;
    transform: none !important;
    margin: 0 0 22px !important;
    background: color-mix(in srgb, var(--bg) 86%, transparent) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.12) !important;
}
.admin-main {
    padding-top: initial !important;
}
.admin-topbar-mobile-row,
.admin-mobile-bar {
    display: none !important;
}
body.admin-menu-locked {
    overflow: hidden !important;
}

/* Mobile: the topbar is fixed and becomes the real app bar. */
@media (max-width: 768px) {
    .admin-layout {
        padding-top: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .admin-main {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 88px 12px 56px !important;
    }
    .admin-topbar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        bottom: auto !important;
        width: 100vw !important;
        min-height: 74px !important;
        max-height: 74px !important;
        z-index: 22000 !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--line) !important;
        border-radius: 0 !important;
        background: color-mix(in srgb, var(--surface-solid) 94%, transparent) !important;
        backdrop-filter: blur(18px) saturate(140%) !important;
        box-shadow: 0 14px 36px rgba(0,0,0,.20) !important;
        display: block !important;
        overflow: visible !important;
        transform: none !important;
    }
    .admin-topbar > :not(.admin-topbar-mobile-row) {
        display: none !important;
    }
    .admin-topbar-mobile-row {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
    }

    .admin-topbar-mobile-row .admin-mobile-menu-toggle {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        align-items: center !important;
        justify-content: center !important;
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 !important;
        border: 1px solid var(--line) !important;
        border-radius: 16px !important;
        color: var(--text) !important;
        background: var(--card-bg) !important;
        box-shadow: var(--shadow-soft) !important;
    }
    .admin-topbar-mobile-row .admin-mobile-menu-toggle span {
        display: none !important;
    }
    .admin-topbar-mobile-row .admin-mobile-menu-toggle i,
    .admin-topbar-mobile-row .admin-mobile-menu-toggle svg {
        display: block !important;
        font-size: 1.15rem !important;
    }

    .admin-mobile-brand {
        display: inline-flex !important;
        align-items: center !important;
        gap: 9px !important;
        min-width: 0 !important;
        color: var(--text) !important;
        text-decoration: none !important;
    }
    .admin-mobile-brand .brand-mark {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 14px !important;
    }
    .admin-mobile-brand > span:last-child {
        display: grid !important;
        min-width: 0 !important;
        line-height: 1.05 !important;
    }
    .admin-mobile-brand b {
        font-size: .84rem !important;
        letter-spacing: .08em !important;
        white-space: nowrap !important;
    }
    .admin-mobile-brand small {
        font-size: .62rem !important;
        color: var(--muted) !important;
        white-space: nowrap !important;
    }

    .admin-mobile-profile {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        min-width: 0 !important;
        max-width: 39vw !important;
        color: var(--text) !important;
    }
    .admin-mobile-profile .avatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 14px !important;
    }
    .admin-mobile-profile > span:last-child {
        min-width: 0 !important;
        display: grid !important;
        gap: 1px !important;
        line-height: 1.05 !important;
    }
    .admin-mobile-profile b,
    .admin-mobile-profile small {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .admin-mobile-profile b {
        font-size: .74rem !important;
        font-weight: 900 !important;
    }
    .admin-mobile-profile small {
        font-size: .62rem !important;
        color: var(--muted) !important;
    }

    .admin-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        z-index: 21500 !important;
        width: min(84vw, 326px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 16px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(106%) !important;
        transition: transform .22s ease !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        background: linear-gradient(180deg,var(--surface-solid),var(--bg-soft)) !important;
    }
    html.admin-sidebar-open .admin-sidebar {
        transform: translateX(0) !important;
    }

    .admin-mobile-sidebar-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 21400 !important;
        display: block !important;
        border: 0 !important;
        background: rgba(2,5,7,.64) !important;
        backdrop-filter: blur(8px) !important;
    }
    .admin-mobile-sidebar-backdrop[hidden] {
        display: none !important;
    }
    .admin-sidebar .admin-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .admin-sidebar .admin-nav a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 48px !important;
        height: auto !important;
        padding: 11px 12px !important;
    }
    .admin-sidebar .admin-nav a span {
        display: inline !important;
        max-width: none !important;
        font-size: .86rem !important;
        white-space: nowrap !important;
    }
}


/* Outbreak v3.8.7: mobile menu click fix + remove profile + logo left. */

/* Safety: profile must not appear in the mobile topbar. */
.admin-mobile-profile {
    display: none !important;
}

@media (max-width: 768px) {
    .admin-topbar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        min-height: 74px !important;
        max-height: 74px !important;
        z-index: 22000 !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--line) !important;
        border-radius: 0 !important;
        background: color-mix(in srgb, var(--surface-solid) 94%, transparent) !important;
        backdrop-filter: blur(18px) saturate(140%) !important;
        box-shadow: 0 14px 36px rgba(0,0,0,.20) !important;
        display: block !important;
        overflow: visible !important;
    }

    .admin-topbar > :not(.admin-topbar-mobile-row) {
        display: none !important;
    }

    .admin-topbar-mobile-row {
        display: grid !important;
        direction: ltr !important;
        grid-template-columns: minmax(0, 1fr) 52px !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
    }

    .admin-topbar-mobile-row .admin-mobile-brand {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        margin-right: auto !important;
        margin-left: 0 !important;
        display: inline-flex !important;
        direction: ltr !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        min-width: 0 !important;
        max-width: calc(100vw - 92px) !important;
        color: var(--text) !important;
        text-decoration: none !important;
    }

    .admin-topbar-mobile-row .admin-mobile-brand .brand-mark {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 14px !important;
    }

    .admin-topbar-mobile-row .admin-mobile-brand > span:last-child {
        display: grid !important;
        min-width: 0 !important;
        line-height: 1.05 !important;
        text-align: left !important;
    }

    .admin-topbar-mobile-row .admin-mobile-brand b,
    .admin-topbar-mobile-row .admin-mobile-brand small {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .admin-topbar-mobile-row .admin-mobile-brand b {
        font-size: .84rem !important;
        letter-spacing: .08em !important;
    }

    .admin-topbar-mobile-row .admin-mobile-brand small {
        font-size: .62rem !important;
        color: var(--muted) !important;
    }

    .admin-topbar-mobile-row .admin-mobile-menu-toggle {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        align-items: center !important;
        justify-content: center !important;
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 !important;
        border: 1px solid var(--line) !important;
        border-radius: 16px !important;
        color: var(--text) !important;
        background: var(--card-bg) !important;
        box-shadow: var(--shadow-soft) !important;
        cursor: pointer !important;
    }

    .admin-topbar-mobile-row .admin-mobile-menu-toggle span {
        display: none !important;
    }

    .admin-topbar-mobile-row .admin-mobile-menu-toggle i,
    .admin-topbar-mobile-row .admin-mobile-menu-toggle svg {
        display: block !important;
        font-size: 1.15rem !important;
    }

    html.admin-sidebar-open .admin-sidebar {
        transform: translateX(0) !important;
    }

    .admin-mobile-sidebar-backdrop:not([hidden]) {
        display: block !important;
    }
}


/* Outbreak v3.8.8: admin-mobile-profile moved into hamburger sidebar menu. */

/* Desktop: menu-only mobile profile must stay hidden. */
.admin-mobile-profile--menu {
    display: none !important;
}

/* Mobile: show profile inside the opened hamburger/sidebar menu, not in topbar. */
@media (max-width: 768px) {
    .admin-topbar .admin-mobile-profile,
    .admin-topbar-mobile-row .admin-mobile-profile {
        display: none !important;
    }

    .admin-sidebar > .admin-profile {
        display: none !important;
    }

    .admin-sidebar .admin-mobile-profile--menu {
        display: flex !important;
        align-items: center !important;
        gap: 11px !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 2px 0 4px !important;
        padding: 12px !important;
        border: 1px solid var(--line) !important;
        border-radius: 18px !important;
        color: var(--text) !important;
        background: linear-gradient(135deg, rgba(229,45,53,.12), rgba(255,255,255,.035)) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.12) !important;
    }

    .admin-sidebar .admin-mobile-profile--menu .avatar {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 16px !important;
    }

    .admin-sidebar .admin-mobile-profile--menu > div {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    .admin-sidebar .admin-mobile-profile--menu strong,
    .admin-sidebar .admin-mobile-profile--menu small {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .admin-sidebar .admin-mobile-profile--menu strong {
        font-size: .9rem !important;
        font-weight: 950 !important;
        color: var(--text) !important;
    }

    .admin-sidebar .admin-mobile-profile--menu small {
        font-size: .72rem !important;
        color: var(--muted) !important;
    }

    /* Keep topbar layout: logo/text on the left, hamburger on the right. */
    .admin-topbar-mobile-row {
        direction: ltr !important;
        grid-template-columns: minmax(0, 1fr) 52px !important;
    }

    .admin-topbar-mobile-row .admin-mobile-brand {
        grid-column: 1 !important;
        justify-self: start !important;
    }

    .admin-topbar-mobile-row .admin-mobile-menu-toggle {
        grid-column: 2 !important;
        justify-self: end !important;
    }
}


/* Outbreak v3.8.9: keep mobile menu profile above topbar/sidebar overlay. */
@media (max-width: 768px) {
    /*
      When the hamburger menu is open, the sidebar must be above the fixed topbar.
      Previously topbar z-index 22000 covered the first items of sidebar, so
      admin-mobile-profile--menu looked like it went under the sidebar/top bar.
    */
    html.admin-sidebar-open .admin-sidebar,
    .admin-sidebar {
        z-index: 23500 !important;
    }

    html.admin-sidebar-open .admin-mobile-sidebar-backdrop,
    .admin-mobile-sidebar-backdrop:not([hidden]) {
        z-index: 23400 !important;
    }

    html.admin-sidebar-open .admin-topbar {
        z-index: 22000 !important;
    }

    .admin-sidebar {
        top: 0 !important;
        padding-top: max(16px, env(safe-area-inset-top)) !important;
    }

    .admin-sidebar .admin-brand {
        position: relative !important;
        z-index: 2 !important;
        flex: 0 0 auto !important;
    }

    .admin-sidebar .admin-mobile-profile--menu {
        position: relative !important;
        z-index: 3 !important;
        flex: 0 0 auto !important;
        margin: 4px 0 8px !important;
        transform: none !important;
    }

    .admin-sidebar .admin-nav {
        position: relative !important;
        z-index: 2 !important;
    }
}


/* Outbreak v3.9.0: full-width mobile profile inside hamburger menu.
   This overrides older topbar profile rules such as max-width:39vw. */
@media (max-width: 768px) {
    .admin-sidebar .admin-mobile-profile.admin-mobile-profile--menu,
    .admin-sidebar > .admin-mobile-profile--menu {
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 76px !important;
        max-height: none !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        margin: 8px 0 10px !important;
        padding: 14px !important;
        overflow: visible !important;
        border: 1px solid var(--line) !important;
        border-radius: 20px !important;
        color: var(--text) !important;
        background: linear-gradient(135deg, rgba(229,45,53,.16), rgba(255,255,255,.045)) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.09), 0 14px 30px rgba(0,0,0,.16) !important;
        transform: none !important;
    }

    .admin-sidebar .admin-mobile-profile--menu .avatar,
    .admin-sidebar .admin-mobile-profile--menu .admin-avatar {
        display: inline-grid !important;
        place-items: center !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        flex: 0 0 54px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .admin-sidebar .admin-mobile-profile--menu .avatar img,
    .admin-sidebar .admin-mobile-profile--menu .admin-avatar img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .admin-sidebar .admin-mobile-profile--menu > div {
        display: grid !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        gap: 4px !important;
        overflow: visible !important;
        line-height: 1.2 !important;
    }

    .admin-sidebar .admin-mobile-profile--menu strong,
    .admin-sidebar .admin-mobile-profile--menu small {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .admin-sidebar .admin-mobile-profile--menu strong {
        font-size: .98rem !important;
        font-weight: 950 !important;
        color: var(--text) !important;
    }

    .admin-sidebar .admin-mobile-profile--menu small {
        font-size: .78rem !important;
        color: var(--muted) !important;
    }
}


/* Outbreak v8.3 — UI/UX Pro Max compliance layer.
   Keeps the existing Outbreak visual identity while normalising interaction,
   modal sizing, dashboard density and responsive behaviour. */
:root {
    --ux-space-1: 4px;
    --ux-space-2: 8px;
    --ux-space-3: 12px;
    --ux-space-4: 16px;
    --ux-space-5: 24px;
    --ux-space-6: 32px;
    --ux-control-min: 44px;
    --ux-content-max: 1440px;
    --ux-modal-max: 920px;
}

/* Keyboard and touch accessibility. */
:where(a,button,input,select,textarea,[role="button"],[tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb,var(--accent-bright) 78%,white 22%) !important;
    outline-offset: 3px !important;
}
:where(.btn,.theme-toggle,.nav-toggle,.modal-close,.admin-modal-close,.dashboard-menu-toggle,
.sidebar-logout,.dashboard-nav a,.admin-nav a,.user-modal-tabs button,.admin-tabs button,
.payment-table-row-v49,[data-payment-id],[data-open-user],[data-open-admin-modal]) {
    min-height: var(--ux-control-min);
    touch-action: manipulation;
}
:where(.modal-close,.admin-modal-close,.dialog-close,.toast button,.theme-toggle,.nav-toggle) {
    min-width: var(--ux-control-min);
    min-height: var(--ux-control-min);
}
:where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
    min-height: var(--ux-control-min);
}

/* Player dashboard: bounded desktop canvas and consistent 8pt rhythm. */
.dashboard-content {
    max-width: var(--ux-content-max) !important;
    padding-inline: clamp(18px,2.5vw,36px) !important;
}
.dashboard-hero { padding: clamp(24px,3vw,40px) !important; }
.dashboard-command-grid,
.dashboard-grid { gap: var(--ux-space-5) !important; }
.dashboard-topbar h1 { font-size: clamp(1.8rem,3vw,3rem); line-height:1.2; text-wrap:balance; }
.dashboard-topbar p { max-width: 68ch; }
.dashboard-nav a { gap: var(--ux-space-2); }
.dashboard-ticket-main small,
.character-card-identity small,
.queue-access-copy p { font-size: max(.75rem,12px); line-height:1.65; }

/* Modal geometry: one bounded scroll region, stable header/footer, no horizontal overflow. */
.user-modal,
.admin-form-modal,
.payment-modal-v49 { overscroll-behavior: contain; }
.user-modal-card,
.admin-form-dialog,
.payment-dialog-v49 {
    width: min(var(--ux-modal-max),calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: min(90dvh,880px) !important;
    overflow: hidden !important;
    border-radius: 24px !important;
}
.admin-form-dialog-small { width:min(620px,calc(100vw - 32px)) !important; }
.user-modal-head,
.admin-form-dialog>header,
.payment-dialog-v49>header {
    min-height:72px;
    padding: var(--ux-space-4) var(--ux-space-5) !important;
}
.user-modal-tabs {
    gap: var(--ux-space-2) !important;
    padding: var(--ux-space-2) var(--ux-space-3) !important;
    scrollbar-width: thin;
}
.user-modal-tabs button {
    min-height:44px !important;
    padding-inline:16px !important;
    font-size:max(.8rem,12px) !important;
}
.user-modal-form,
.admin-modal-form,
.payment-modal-content-v49 {
    min-width:0;
    overflow-x:hidden !important;
}
.user-modal-panel,
.admin-modal-form,
.payment-modal-content-v49 { padding:var(--ux-space-5) !important; }
.user-modal-footer,
.admin-modal-actions,
.payment-actions-v49 {
    gap:var(--ux-space-2) !important;
    padding:var(--ux-space-4) var(--ux-space-5) !important;
}
.user-modal-footer .btn,
.admin-modal-actions .btn,
.payment-actions-v49 .btn { min-height:44px; }

/* Make modal status/loading feedback readable to sighted and assistive-tech users. */
.payment-modal-loading-v49 {
    min-height:180px;
    align-content:center;
    justify-content:center;
    text-align:center;
}

/* Tablet: reduce density without collapsing touch targets. */
@media (max-width:1024px) {
    .dashboard-content { padding-inline:clamp(14px,2.4vw,24px) !important; }
    .dashboard-command-grid,
    .dashboard-grid { grid-template-columns:1fr !important; gap:var(--ux-space-4) !important; }
    .panel-profile { position:static !important; }
    .dashboard-topbar { gap:var(--ux-space-4); }
}

/* Mobile-first interaction sizing and bottom-sheet modal behaviour. */
@media (max-width:768px) {
    body { font-size:16px; }
    .dashboard-content { padding-inline:12px !important; padding-bottom:max(56px,env(safe-area-inset-bottom)) !important; }
    .dashboard-hero { padding:20px 16px !important; border-radius:20px !important; }
    .dashboard-topbar { align-items:stretch !important; }
    .dashboard-topbar>.btn { width:100%; min-height:48px; }
    .dashboard-sidebar .dashboard-nav a,
    .dashboard-sidebar .dashboard-nav a:not(.active) {
        min-height:56px !important;
        font-size:max(.75rem,12px) !important;
        line-height:1.35 !important;
    }
    .dashboard-sidebar .dashboard-nav { gap:8px !important; }

    .user-modal,
    .admin-form-modal,
    .payment-modal-v49 {
        align-items:end !important;
        padding:0 !important;
    }
    .user-modal-card,
    .admin-form-dialog,
    .admin-form-dialog-small,
    .payment-dialog-v49 {
        width:100% !important;
        max-width:100% !important;
        max-height:calc(100dvh - max(8px,env(safe-area-inset-top))) !important;
        border-radius:22px 22px 0 0 !important;
    }
    .user-modal-head,
    .admin-form-dialog>header,
    .payment-dialog-v49>header {
        min-height:68px;
        padding:14px 16px !important;
    }
    .user-modal-panel,
    .admin-modal-form,
    .payment-modal-content-v49 { padding:16px !important; }
    .user-modal-footer,
    .admin-modal-actions,
    .payment-actions-v49 {
        padding:12px 16px max(12px,env(safe-area-inset-bottom)) !important;
    }
    :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
        font-size:16px !important;
    }
}

@media (max-width:375px) {
    .dashboard-content { padding-inline:10px !important; }
    .dashboard-hero { padding:18px 14px !important; }
    .dashboard-topbar h1 { font-size:1.65rem; }
    .user-modal-tabs button { padding-inline:12px !important; }
    .user-modal-footer { grid-template-columns:1fr !important; }
    .user-modal-footer .btn,
    .admin-modal-actions .btn,
    .payment-actions-v49 .btn { width:100%; }
}

@media (min-width:1440px) {
    .dashboard-content { padding-inline:36px !important; }
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

/* ========================================================================== */
/* Outbreak panel workspace v9.0 — dashboard/admin spatial redesign           */
/* ========================================================================== */

/* Panel pages use their own application chrome, never the public-site header. */
body.dashboard-page .site-header,
body.admin-page .site-header,
body.dashboard-page .site-footer,
body.admin-page .site-footer {
    display: none !important;
}

body.dashboard-page #main-content,
body.admin-page #main-content {
    min-height: 100svh;
}

/* Player dashboard: sidebar explicitly on the right. */
.dashboard-page .dashboard-shell {
    grid-template-columns: minmax(0, 1fr) 304px !important;
    padding-top: 0 !important;
    min-height: 100svh;
}

.dashboard-page .dashboard-sidebar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    top: 0 !important;
    height: 100svh !important;
    padding: 24px 18px 20px !important;
    border-right: 0 !important;
    border-left: 1px solid var(--line) !important;
}

.dashboard-page .dashboard-content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: min(100%, 1540px);
    margin-inline: auto;
    padding: 26px clamp(26px, 3.3vw, 58px) 80px !important;
}

.dashboard-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 64px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.dashboard-panel-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dashboard-panel-title strong {
    font-size: 1.06rem;
    font-weight: 900;
}

.dashboard-panel-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dashboard-panel-actions form,
.admin-top-actions form {
    margin: 0;
}

.dashboard-header-action,
.admin-top-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    background: rgba(255,255,255,.035);
    font: inherit;
    font-size: .75rem;
    font-weight: 800;
    cursor: pointer;
}

.dashboard-header-action:hover,
.admin-top-action:hover {
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.065);
}

.dashboard-header-action.is-danger,
.admin-top-action.is-danger {
    color: #ff9ca2;
    border-color: rgba(255,76,85,.20);
    background: rgba(255,76,85,.055);
}

/* Spacious subscription hero. */
.dashboard-page .dashboard-subscription-hero {
    position: relative;
    isolation: isolate;
    align-items: center !important;
    min-height: 232px;
    margin: 0 0 26px !important;
    padding: 38px clamp(28px, 4vw, 52px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 18%, rgba(229,45,53,.18), transparent 38%),
        linear-gradient(125deg, rgba(18,23,28,.98), rgba(9,12,15,.96));
}

.dashboard-page .dashboard-subscription-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .95;
}

.dashboard-tier-platinum .dashboard-subscription-hero {
    border-color: rgba(154,117,255,.34);
    background:
        radial-gradient(circle at 10% 15%, rgba(67,202,255,.20), transparent 34%),
        radial-gradient(circle at 84% 14%, rgba(174,102,255,.23), transparent 42%),
        linear-gradient(128deg, #111823 0%, #111522 42%, #1a1225 100%);
}

.dashboard-tier-golden .dashboard-subscription-hero,
.dashboard-tier-gold .dashboard-subscription-hero {
    border-color: rgba(240,190,76,.33);
    background:
        radial-gradient(circle at 14% 16%, rgba(255,209,95,.20), transparent 36%),
        radial-gradient(circle at 86% 16%, rgba(214,132,30,.17), transparent 40%),
        linear-gradient(128deg, #1a1710 0%, #15130f 45%, #21170d 100%);
}

.dashboard-tier-silver .dashboard-subscription-hero {
    border-color: rgba(190,207,222,.28);
    background:
        radial-gradient(circle at 12% 18%, rgba(195,219,238,.16), transparent 38%),
        linear-gradient(128deg, #14191d 0%, #101417 46%, #161a20 100%);
}

.dashboard-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dashboard-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin-bottom: 16px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.055);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .03em;
}

.dashboard-tier-platinum .dashboard-tier-badge {
    color: #e9e1ff;
    border-color: rgba(171,133,255,.38);
    background: linear-gradient(120deg, rgba(81,191,255,.12), rgba(161,92,255,.16));
}

.dashboard-tier-golden .dashboard-tier-badge,
.dashboard-tier-gold .dashboard-tier-badge {
    color: #ffe6a6;
    border-color: rgba(240,190,76,.34);
    background: rgba(230,168,54,.10);
}

.dashboard-tier-silver .dashboard-tier-badge {
    color: #dce7ef;
    border-color: rgba(199,215,226,.25);
    background: rgba(202,218,229,.075);
}

.dashboard-page .dashboard-subscription-hero h1 {
    max-width: 900px;
    margin: 8px 0 0 !important;
    font-size: clamp(2rem, 3.2vw, 3.75rem) !important;
}

.dashboard-page .dashboard-subscription-hero > .btn {
    min-width: 150px;
    min-height: 50px;
}

/* Main dashboard modules get more breathing room. */
.dashboard-page .dashboard-command-grid {
    display: grid;
    gap: 20px !important;
    margin-bottom: 22px;
}

.dashboard-page .status-banner,
.dashboard-page .queue-access-panel {
    min-height: 122px;
    padding: 25px 28px !important;
    border-radius: 22px !important;
}

.dashboard-page .dashboard-grid {
    grid-template-columns: minmax(430px, 1.18fr) minmax(360px, .82fr) !important;
    gap: 24px !important;
    margin-top: 24px !important;
}

.dashboard-page .dashboard-grid > .panel {
    padding: 34px !important;
    border-radius: 24px !important;
}

.dashboard-page .panel-profile {
    min-height: 430px;
}

.dashboard-page .identity-list > div {
    padding-block: 18px !important;
}

.dashboard-page .character-sync-panel {
    min-height: 430px;
}

/* Admin application chrome: sidebar pinned right and public header removed. */
.admin-page .admin-layout {
    grid-template-columns: minmax(0, 1fr) 292px !important;
    min-height: 100svh !important;
}

.admin-page .admin-sidebar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    top: 0 !important;
    height: 100svh !important;
    border-right: 0 !important;
    border-left: 1px solid var(--line) !important;
}

.admin-page .admin-main {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: min(100%, 1600px);
    margin-inline: auto;
    padding: 28px clamp(26px, 3vw, 54px) 72px !important;
}

.admin-page .admin-topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    min-height: 76px;
    margin: 0 0 28px !important;
    padding: 12px 0 14px !important;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(to bottom, rgba(8,11,13,.96) 72%, rgba(8,11,13,0));
    backdrop-filter: blur(12px);
}

.admin-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-top-action {
    min-width: 44px;
}

.admin-page .admin-stat-grid-rich {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.admin-page .admin-stat-card {
    min-height: 154px;
    padding: 22px !important;
    border-radius: 20px !important;
}

.admin-page .admin-analytics-grid {
    grid-template-columns: minmax(0,.82fr) minmax(520px,1.18fr) !important;
    gap: 24px !important;
}

.admin-page .admin-analytics-grid > .panel,
.admin-page .admin-dashboard-grid > .panel,
.admin-page .admin-recent-tickets {
    padding: 28px !important;
    border-radius: 22px !important;
}

/* Real visual chart using existing monthly data, no client chart library. */
.admin-chart-summary {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
}

.admin-column-chart {
    display: grid;
    grid-template-columns: repeat(6, minmax(58px, 1fr));
    align-items: end;
    gap: 12px;
    min-height: 320px;
    margin-top: 24px;
    padding: 22px 14px 10px;
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 18px;
    background:
        repeating-linear-gradient(to top, transparent 0, transparent 54px, rgba(255,255,255,.045) 55px),
        rgba(255,255,255,.018);
}

.admin-chart-column {
    display: grid;
    grid-template-rows: 244px auto auto;
    align-items: end;
    min-width: 58px;
    text-align: center;
}

.admin-chart-value {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 244px;
}

.admin-chart-value > i {
    display: block;
    width: min(52px, 72%);
    height: max(8px, var(--chart-value));
    border-radius: 12px 12px 5px 5px;
    background: linear-gradient(to top, rgba(229,45,53,.60), #ff5962);
    transition: height .25s ease;
}

.admin-chart-value > span {
    position: absolute;
    inset-inline: 0;
    bottom: calc(max(8px, var(--chart-value)) + 8px);
    color: var(--text-soft);
    font-size: .64rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-chart-column > strong {
    margin-top: 10px;
    font-size: .72rem;
}

.admin-chart-column > small {
    margin-top: 3px;
    color: var(--muted);
    font-size: .62rem;
}

.admin-chart-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin-top: 16px;
}

.admin-chart-footer > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 14px;
    background: rgba(255,255,255,.02);
}

.admin-chart-footer span {
    color: var(--muted);
    font-size: .70rem;
}

.admin-chart-footer b {
    font-size: .78rem;
}

.admin-chart-footer i {
    grid-column: 1 / -1;
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
}

.admin-chart-footer em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#e52d35,#ff6a72);
}

/* Focus/interaction sizes for panel workspaces. */
.dashboard-page :is(a,button,input,select,textarea):focus-visible,
.admin-page :is(a,button,input,select,textarea):focus-visible {
    outline: 2px solid rgba(101,188,255,.9) !important;
    outline-offset: 3px !important;
}

@media (max-width: 1180px) {
    .dashboard-page .dashboard-shell {
        grid-template-columns: minmax(0, 1fr) 92px !important;
    }
    .dashboard-page .dashboard-sidebar {
        grid-column: 2 !important;
    }
    .dashboard-page .dashboard-content {
        grid-column: 1 !important;
    }
    .dashboard-page .dashboard-grid {
        grid-template-columns: 1fr !important;
    }
    .dashboard-page .panel-profile,
    .dashboard-page .character-sync-panel {
        min-height: 0;
    }
    .admin-page .admin-stat-grid-rich {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
    .admin-page .admin-analytics-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .dashboard-page .dashboard-shell {
        display: block !important;
        padding-top: 0 !important;
    }
    .dashboard-page .dashboard-sidebar {
        position: sticky !important;
        top: 0 !important;
        z-index: 120 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 64px;
        padding: 9px 12px !important;
        border-left: 0 !important;
        border-bottom: 1px solid var(--line) !important;
    }
    .dashboard-page .dashboard-content {
        width: 100%;
        padding: 18px 14px 68px !important;
    }
    .dashboard-panel-header {
        min-height: 54px;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }
    .dashboard-panel-title .eyebrow,
    .dashboard-header-action span {
        display: none;
    }
    .dashboard-header-action {
        width: 44px;
        padding: 0;
    }
    .dashboard-page .dashboard-subscription-hero {
        flex-direction: column;
        align-items: stretch !important;
        min-height: 0;
        padding: 26px 20px;
        border-radius: 22px;
    }
    .dashboard-page .dashboard-subscription-hero > .btn {
        width: 100%;
    }
    .dashboard-page .status-banner,
    .dashboard-page .queue-access-panel,
    .dashboard-page .dashboard-grid > .panel {
        padding: 20px !important;
    }
    .admin-page .admin-layout {
        display: block !important;
    }
    .admin-page .admin-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: min(84vw, 326px) !important;
        height: 100dvh !important;
        transform: translateX(106%) !important;
    }
    html.admin-sidebar-open .admin-page .admin-sidebar,
    html.admin-sidebar-open .admin-sidebar {
        transform: translateX(0) !important;
    }
    .admin-page .admin-main {
        width: 100%;
        padding: 16px 12px 70px !important;
    }
    .admin-page .admin-stat-grid-rich {
        grid-template-columns: 1fr !important;
    }
    .admin-page .admin-topbar {
        min-height: 64px;
        padding-top: 8px !important;
    }
    .admin-top-action span {
        display: none;
    }
    .admin-top-action {
        width: 44px;
        padding: 0;
    }
    .admin-column-chart {
        grid-template-columns: repeat(6, 76px);
    }
    .admin-chart-footer {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-chart-value > i {
        transition: none !important;
    }
}