/* ============================================================
   辰锘网络运营中心 - UI 设计系统 v4
   蓝白（默认） + 暗色 双主题，扁平专业风
   ============================================================ */

:root {
    color-scheme: light;

    /* backgrounds */
    --bg: #f3f6fc;
    --bg-2: #eaeff8;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #f4f7fc;
    --surface-hover: #eef3fb;

    /* sidebar */
    --sidebar: #ffffff;
    --sidebar-2: #ffffff;
    --sidebar-border: #e6ebf4;
    --sidebar-muted: #6b7793;
    --sidebar-hover: #f1f5fc;
    --sidebar-active-bg: rgba(47, 107, 255, .10);
    --sidebar-active-text: #1f5aef;

    /* topbar */
    --topbar-bg: rgba(255, 255, 255, .82);

    /* lines */
    --line: #e3e8f1;
    --line-soft: #edf0f6;

    /* text */
    --text: #16203a;
    --text-2: #38455f;
    --muted: #6b7793;
    --muted-2: #98a2ba;

    /* brand */
    --brand: #2f6bff;
    --brand-strong: #1f5aef;
    --brand-soft: rgba(47, 107, 255, .10);
    --on-brand: #ffffff;

    /* semantic */
    --teal: #0e9f78;
    --teal-soft: rgba(14, 159, 120, .12);
    --green: #0e9f78;
    --blue: #2f6bff;
    --blue-soft: rgba(47, 107, 255, .10);
    --purple: #2f6bff;
    --purple-soft: rgba(47, 107, 255, .10);
    --orange: #e8730c;
    --orange-soft: rgba(232, 115, 12, .12);
    --red: #e11d48;
    --red-soft: rgba(225, 29, 72, .10);
    --yellow: #b7791f;
    --yellow-soft: rgba(183, 121, 31, .14);

    --scroll: #cbd4e4;
    --scroll-hover: #b3bfd6;

    --radius: 14px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --shadow: 0 12px 30px rgba(23, 40, 80, .08);
    --shadow-sm: 0 4px 14px rgba(23, 40, 80, .06);
    --sidebar-w: 248px;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0b0f19;
    --bg-2: #0d1220;
    --surface: #141b2b;
    --surface-2: #161d2e;
    --surface-3: #0f1522;
    --surface-hover: #1a2234;

    --sidebar: #0e1320;
    --sidebar-2: #0c111d;
    --sidebar-border: #1b2434;
    --sidebar-muted: #8592a6;
    --sidebar-hover: rgba(255, 255, 255, .05);
    --sidebar-active-bg: rgba(77, 130, 255, .16);
    --sidebar-active-text: #ffffff;

    --topbar-bg: rgba(11, 15, 25, .8);

    --line: #232c3f;
    --line-soft: #1a2131;

    --text: #eef2f8;
    --text-2: #c4ccda;
    --muted: #8592a6;
    --muted-2: #5d6a7e;

    --brand: #4d82ff;
    --brand-strong: #6c8cff;
    --brand-soft: rgba(77, 130, 255, .16);
    --on-brand: #ffffff;

    --teal: #1fd1b0;
    --teal-soft: rgba(31, 209, 176, .14);
    --green: #35d07f;
    --blue: #4ea1ff;
    --blue-soft: rgba(78, 161, 255, .14);
    --purple: #4d82ff;
    --purple-soft: rgba(77, 130, 255, .16);
    --orange: #ff8a4c;
    --orange-soft: rgba(255, 138, 76, .16);
    --red: #ff6575;
    --red-soft: rgba(255, 101, 117, .16);
    --yellow: #ffc24b;
    --yellow-soft: rgba(255, 194, 75, .16);

    --scroll: #2b3650;
    --scroll-hover: #3a476690;
    --shadow: 0 20px 45px rgba(0, 0, 0, .45);
    --shadow-sm: 0 8px 22px rgba(0, 0, 0, .30);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }

body {
    min-height: 100%;
    margin: 0;
    color: var(--text);
    background: var(--bg);
    font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; }
::selection { background: rgba(47, 107, 255, .22); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); background-clip: padding-box; }

/* ============================ Brand ============================ */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--text);
    font-weight: 800;
}

.brand-mark {
    position: relative;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: #fff;
    background: var(--brand);
    font-size: 18px;
    font-weight: 900;
}

.brand-mark-symbol {
    position: relative;
    z-index: 1;
}

.brand-mark-sheen {
    position: absolute;
    inset: -40% auto -40% -72%;
    width: 58%;
    transform: skewX(-22deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
    animation: brand-sheen 3.4s ease-in-out infinite;
}

.brand-text {
    min-width: 0;
    white-space: nowrap;
    font-size: 15.5px;
    letter-spacing: .3px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-soft);
    animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--teal-soft); }
    50% { box-shadow: 0 0 0 5px rgba(14, 159, 120, .04); }
}

/* ============================ Shell ============================ */
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--sidebar-border);
    background: var(--sidebar);
}

.sidebar-head {
    min-height: 76px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--sidebar-border);
    background: var(--sidebar-2);
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    display: grid;
    gap: 4px;
    align-content: start;
    overflow-y: auto;
}

.sidebar-link {
    position: relative;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    color: var(--sidebar-muted);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    transition: color .15s, background .15s;
}

.sidebar-link:hover {
    color: var(--text);
    background: var(--sidebar-hover);
}

.sidebar-link.active {
    color: var(--sidebar-active-text);
    background: var(--sidebar-active-bg);
}

.sidebar-link.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 4px 4px 0;
    background: var(--brand);
}

.nav-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--surface-3);
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    transition: all .15s;
}

.sidebar-link:hover .nav-icon { color: var(--text-2); }

.sidebar-link.active .nav-icon {
    color: #fff;
    border-color: transparent;
    background: var(--brand);
}

.sidebar-foot {
    padding: 16px;
    border-top: 1px solid var(--sidebar-border);
    color: var(--muted);
    font-size: 12px;
}

.system-time { margin-bottom: 10px; color: var(--muted-2); }

.collapse-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    color: var(--text-2);
    background: var(--surface-3);
    font-weight: 700;
    transition: all .15s;
}

.collapse-link:hover { color: var(--red); border-color: var(--red); background: var(--red-soft); }

/* ============================ Workspace ============================ */
.workspace {
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 28px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--topbar-bg);
    backdrop-filter: blur(18px);
}

.search-box {
    width: min(440px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-3);
    transition: border-color .15s, box-shadow .15s;
}

.search-box:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.search-box input {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: var(--text);
}

.search-box input::placeholder { color: var(--muted-2); }

.search-box button {
    min-width: 76px;
    border: 0;
    color: var(--on-brand);
    background: var(--brand);
    font-weight: 800;
    transition: background .15s;
}

.search-box button:hover { background: var(--brand-strong); }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-toggle {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-3);
    color: var(--muted);
    font-size: 17px;
    line-height: 1;
    transition: color .15s, border-color .15s, background .15s;
}

.theme-toggle:hover { color: var(--brand); border-color: var(--brand); background: var(--surface-hover); }

.online-pill {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 15px;
    border: 1px solid var(--teal-soft);
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal);
    font-size: 12.5px;
    font-weight: 800;
}

.online-pill.is-offline {
    border-color: var(--red-soft);
    background: var(--red-soft);
    color: var(--red);
}

.online-pill.is-offline .dot {
    background: var(--red);
    box-shadow: 0 0 0 3px var(--red-soft);
    animation: pulse-offline 2.4s ease-in-out infinite;
}

@keyframes pulse-offline {
    0%, 100% { box-shadow: 0 0 0 3px var(--red-soft); }
    50% { box-shadow: 0 0 0 5px rgba(225, 29, 72, .08); }
}

.admin-menu {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 0 14px 0 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
    transition: all .15s;
}

.admin-menu:hover { border-color: var(--brand); background: var(--surface-hover); }

.user-menu {
    position: relative;
}

.user-menu-toggle {
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.user-menu-toggle[aria-expanded="true"] {
    border-color: var(--brand);
    background: var(--surface-hover);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 168px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.user-menu-dropdown[hidden] {
    display: none;
}

.user-menu-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
    background: var(--surface-3);
    color: var(--brand);
    outline: none;
}

.user-menu-logout-form {
    margin: 0;
}

.user-menu-logout {
    color: var(--danger, #c0392b);
}

.user-menu-logout:hover,
.user-menu-logout:focus-visible {
    background: rgba(192, 57, 43, .08);
    color: var(--danger, #c0392b);
}

.avatar {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
    font-size: 14px;
}

.admin-menu span:last-child { display: grid; gap: 1px; line-height: 1.25; }
.admin-menu b { color: var(--text); font-size: 13px; }
.admin-menu small { color: var(--muted); font-size: 12px; font-weight: 600; }

/* ============================ Content ============================ */
.content {
    flex: 1;
    width: 100%;
    padding: 26px 28px 34px;
}

.content > section,
.content > .overview-grid,
.content > .lower-grid { margin-bottom: 18px; }
.content > section:last-child,
.content > .overview-grid:last-child,
.content > .lower-grid:last-child { margin-bottom: 0; }

.page-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 22px;
}

.page-title h1 {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: .3px;
}

.meta { margin-top: 7px; color: var(--muted); font-size: 13.5px; }

/* ============================ Alerts ============================ */
.alert {
    position: relative;
    margin: 0 0 18px;
    padding: 14px 16px 14px 44px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-2);
    font-weight: 600;
}

.alert::before {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 900;
}

.alert.success { color: var(--teal); border-color: var(--teal-soft); background: var(--teal-soft); }
.alert.success::before { content: "✓"; color: var(--teal); }
.alert.error { color: var(--red); border-color: var(--red-soft); background: var(--red-soft); }
.alert.error::before { content: "!"; color: var(--red); }

/* ============================ KPI ============================ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.kpi-grid.cols-3 { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
.kpi-grid.cols-4 { grid-template-columns: repeat(4, minmax(220px, 1fr)); }

.kpi-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .18s, border-color .18s, box-shadow .18s;
}

.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.kpi-icon {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    color: var(--teal);
    background: var(--teal-soft);
    font-weight: 900;
    font-size: 20px;
}

.kpi-card.blue .kpi-icon { color: var(--blue); background: var(--blue-soft); }
.kpi-card.purple .kpi-icon { color: var(--brand); background: var(--brand-soft); }
.kpi-card.orange .kpi-icon { color: var(--orange); background: var(--orange-soft); }

.kpi-card small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.kpi-card strong { display: block; margin-top: 5px; font-size: 25px; font-weight: 800; line-height: 1.1; letter-spacing: .3px; }
.kpi-card em { display: block; margin-top: 7px; color: var(--muted-2); font-style: normal; font-size: 12px; font-weight: 600; }

/* ============================ Dashboard (Post UI) ============================ */
.ui-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.dash-filter-wrap {
    margin-bottom: 16px;
    padding: 16px 22px;
}

.db-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    --filter-control-h: 40px;
}

.db-quick-tabs {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.db-quick-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--filter-control-h);
    height: var(--filter-control-h);
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

.db-quick-tabs a:hover {
    border-color: var(--brand-soft);
    background: var(--brand-soft);
    color: var(--brand);
}

.db-quick-tabs a.active {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: none;
}

.db-sep {
    width: 1px;
    height: var(--filter-control-h, 40px);
    background: var(--line);
    flex-shrink: 0;
}

.db-range-to {
    color: var(--muted-2);
    font-size: 13px;
    font-weight: 700;
}

.db-filter-bar input[type="date"] {
    width: 132px;
    min-height: var(--filter-control-h, 40px);
    height: var(--filter-control-h, 40px);
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.db-filter-bar input[type="date"]:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.db-filter-btn { min-width: 72px; }

.db-filter-bar .btn {
    min-height: var(--filter-control-h, 40px);
    height: var(--filter-control-h, 40px);
    padding: 0 16px;
    box-sizing: border-box;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(var(--kpi-cols, 3), minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

@keyframes kpiIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.dashboard-grid .kpi-card-dash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 108px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    animation: kpiIn .35s cubic-bezier(.22, 1, .36, 1) both;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.dashboard-grid .kpi-card-dash:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    border-color: var(--line-soft);
}

.dashboard-grid .kpi-card-dash:nth-child(1) { animation-delay: 0s; }
.dashboard-grid .kpi-card-dash:nth-child(2) { animation-delay: .05s; }
.dashboard-grid .kpi-card-dash:nth-child(3) { animation-delay: .1s; }

.kpi-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.kpi-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-value {
    color: var(--text);
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
    line-height: 1.2;
}

.kpi-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.kpi-sub-txt {
    color: var(--muted-2);
    font-size: 12px;
    font-weight: 600;
}

.kpi-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.kpi-badge.up {
    background: rgba(0, 180, 42, .1);
    color: #00b42a;
}

.kpi-badge.down {
    background: rgba(245, 63, 63, .1);
    color: #f53f3f;
}

.kpi-badge.flat {
    background: var(--surface-3);
    color: var(--muted);
}

.kpi-icon-wrap {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    transition: transform .2s;
}

.dashboard-grid .kpi-card-dash:hover .kpi-icon-wrap {
    transform: scale(1.06);
}

.kpi-period-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    vertical-align: middle;
}

.fv-wrap {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.fv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px 0;
}

.fv-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
}

.fv-header-title::before {
    content: '';
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--brand);
    flex-shrink: 0;
}

.fv-header-sub {
    margin-left: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.fv-pane {
    display: none;
    padding: 18px 22px 20px;
}

.fv-pane.active {
    display: block;
}

.fv-tabs {
    display: flex;
    gap: 0;
    margin-top: 12px;
    padding: 0 22px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}

.fv-tabs::-webkit-scrollbar {
    display: none;
}

.fv-tab {
    margin-bottom: -1px;
    padding: 10px 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.fv-tab:hover {
    color: var(--brand);
}

.fv-tab.active {
    border-bottom-color: var(--brand);
    color: var(--brand);
}

.dash-trend-wrap {
    margin-bottom: 0;
}

.dash-chart-box {
    position: relative;
    height: 220px;
}

@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .db-filter-bar input[type="date"] {
        flex: 1 1 132px;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dash-filter-wrap {
        padding: 14px 16px;
    }
}

/* ============================ Grids ============================ */
.overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(340px, 1fr);
    gap: 18px;
    align-items: start;
}

.dash-body-stack {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.dash-recent-card {
    padding: 18px 22px 16px;
}

.dash-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
}

.dash-section-title::before {
    content: '';
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--brand);
    flex-shrink: 0;
}

.subtabs,
.dash-recent-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.subtab-btn {
    padding: 7px 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text-2);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.subtab-btn:hover {
    border-color: var(--brand-soft);
    background: var(--brand-soft);
    color: var(--brand);
}

.subtab-btn.active {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--on-brand);
}

.dash-recent-pane {
    display: none;
}

.dash-recent-pane.active {
    display: block;
}

.dash-recent-empty {
    margin: 0;
    padding: 28px 12px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.dash-recent-table-wrap {
    overflow-x: auto;
}

.dash-recent-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.dash-recent-table th,
.dash-recent-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    white-space: nowrap;
}

.dash-recent-table th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    background: var(--surface-3);
}

.dash-recent-table tbody tr:hover {
    background: var(--surface-hover);
}

.dash-recent-table .is-id,
.dash-recent-table .is-time {
    color: var(--muted-2);
    font-size: 12px;
}

.dash-recent-foot {
    margin-top: 12px;
    text-align: right;
}

.records-filter-bar {
    position: relative;
    z-index: 3;
}

.db-filter-bar.records-filter-bar select,
.db-filter-bar.records-filter-bar input[type="text"],
.db-filter-bar.records-filter-bar input:not([type="hidden"]) {
    width: auto;
    flex: 0 1 auto;
    min-width: 132px;
    min-height: var(--filter-control-h, 40px);
    height: var(--filter-control-h, 40px);
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
}

.db-filter-bar.records-filter-bar input[name="account"] {
    min-width: 140px;
}

.db-filter-bar.records-filter-bar .btn {
    width: auto;
    flex: 0 0 auto;
    min-height: var(--filter-control-h, 40px);
    height: var(--filter-control-h, 40px);
    padding: 0 16px;
    box-sizing: border-box;
}

.records-kpi-grid .kpi-label {
    white-space: normal;
}

.records-kpi-grid .kpi-sub-txt {
    line-height: 1.45;
}

.records-list-card .dash-section-title .fv-header-sub {
    margin-left: 8px;
}

.records-pagination {
    margin-top: 0;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

.records-pagination .is-disabled {
    min-width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-3);
    color: var(--muted-2);
    font-size: 13px;
    padding: 0 8px;
}

.records-pagination .is-ellipsis {
    min-width: 24px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.records-pagination .pagination-meta {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    min-width: auto;
    height: auto;
    padding: 0 4px;
}

.records-list-card {
    margin-bottom: 14px;
    overflow: visible;
}

.records-action-cell {
    min-width: 112px;
}

.manual-retry-btn {
    font-weight: 800;
}

.manual-retry-wait {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--warning);
    background: var(--warning-soft);
    font-size: 12px;
    font-weight: 800;
}

.manual-retry-warning {
    padding: 12px 14px;
    border: 1px solid rgba(220, 75, 100, .28);
    border-radius: 12px;
    color: var(--danger);
    background: var(--danger-soft);
    line-height: 1.65;
    font-weight: 700;
}

.manual-retry-confirm {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-subtle);
    color: var(--text);
    font-weight: 700;
}

.manual-retry-confirm input {
    margin-top: 3px;
}

@media (max-width: 900px) {
    .db-filter-bar.records-filter-bar select,
    .db-filter-bar.records-filter-bar input:not([type="hidden"]) {
        flex: 1 1 140px;
        min-width: 120px;
        width: auto;
    }
}

.overview-main {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.overview-orders-panel {
    margin-bottom: 0;
}

.side-stack { display: grid; gap: 18px; align-content: start; }

.streamers-list-card {
    margin-bottom: 14px;
}

.streamers-table-wrap {
    overflow-x: auto;
}

.streamers-table {
    min-width: 920px;
}

.streamers-table .col-phone {
    min-width: 118px;
    white-space: nowrap;
}

.streamers-pagination {
    margin-top: 0;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

.streamers-pagination .pagination-meta {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    min-width: auto;
    height: auto;
    padding: 0 4px;
}

.streamers-modal-form {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 14px;
}

.streamers-modal-form .perm-grid,
.streamers-perm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.streamer-flag-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.perm-item input[type="checkbox"],
.streamer-flag-check input[type="checkbox"] {
    width: 16px;
    min-height: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    flex: 0 0 16px;
}

.streamers-table .col-md strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.streamer-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.streamer-inline-form {
    display: inline-flex;
    margin: 0;
}

.streamer-action-btn {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.streamer-action-btn:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
}

.streamer-action-btn.is-danger {
    color: var(--red);
}

.streamer-action-btn.is-danger:hover {
    border-color: var(--red);
    background: var(--red-soft);
    color: var(--red);
}

.streamers-table .col-actions {
    width: 248px;
}

.streamer-reset-lead {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
}

.streamer-reset-stats {
    margin-bottom: 12px;
}

.streamer-reset-form {
    margin-top: 4px;
}

@media (max-width: 960px) {
    .streamers-table {
        min-width: 0;
    }

    .streamers-table thead {
        display: none;
    }

    .streamers-table tbody tr {
        display: block;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line-soft);
    }

    .streamers-table tbody tr:last-child {
        border-bottom: 0;
    }

    .streamers-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
        border: 0;
        white-space: normal;
    }

    .streamers-table td::before {
        content: attr(data-label);
        flex: 0 0 72px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
    }

    .streamers-table td.col-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        padding-top: 10px;
    }

    .streamers-table td.col-actions::before {
        flex-basis: 100%;
        margin-bottom: 2px;
    }

    .streamer-row-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

.lower-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 18px;
}

/* ============================ Panel ============================ */
.panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.panel-header {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line-soft);
}

.panel-header h2 {
    position: relative;
    padding-left: 13px;
    font-size: 16px;
    font-weight: 800;
}

.panel-header h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 15px;
    border-radius: 3px;
    background: var(--brand);
}

.panel-body { padding: 20px; }

/* ============================ Trend chart ============================ */
.trend-chart {
    min-height: 300px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
    padding: 24px 10px 4px;
}

.trend-day {
    min-width: 0;
    display: grid;
    gap: 10px;
    justify-items: center;
    color: var(--muted);
    font-size: 12px;
}

.trend-bar {
    width: 100%;
    max-width: 46px;
    height: var(--h);
    min-height: 8px;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, var(--brand), var(--brand-soft));
    transition: filter .15s;
}

.trend-day:hover .trend-bar { filter: brightness(1.06); }
.trend-line { color: var(--text-2); font-weight: 800; font-size: 12px; }

/* ============================ Lists ============================ */
.heartbeat-list, .health-list, .action-list { display: grid; gap: 4px; }

.heartbeat-row, .health-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 10px;
    border-radius: var(--radius-sm);
    transition: background .15s;
}

.heartbeat-row:hover, .health-row:hover { background: var(--surface-3); }
.heartbeat-row small, .health-row small, .muted { color: var(--muted); }

.health-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-soft);
}

.health-dot.warn { background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); }
.health-dot.danger { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.health-dot.muted { background: var(--muted-2); box-shadow: none; }

.quick-action {
    display: grid;
    gap: 5px;
    padding: 16px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    transition: border-color .15s, transform .15s;
}

.quick-action:hover { border-color: var(--brand); transform: translateX(2px); }
.quick-action strong { font-size: 15px; font-weight: 800; }
.quick-action a { margin-top: 4px; color: var(--brand); font-weight: 800; }
.quick-action a:hover { text-decoration: underline; }

/* ============================ Recharge page ============================ */
.recharge-layout {
    display: grid;
    grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}

.recharge-main {
    display: grid;
    gap: 18px;
    align-content: start;
}

.recharge-side {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.recharge-side .table-wrap { flex: 1; }

.recharge-recent-table { min-width: 520px; }

.quota-card {
    padding: 22px 24px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.quota-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 28px;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
}

.quota-row + .quota-row { border-top: 1px solid var(--line-soft); }

.quota-label {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.quota-value {
    color: var(--text);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
}

.quota-value.is-used { color: var(--orange); }
.quota-value.is-left { color: var(--teal); }

.quota-unit {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

.quota-progress {
    margin-top: 18px;
    height: 10px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.quota-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--teal), var(--orange));
    transition: width .45s ease;
}

.recharge-card {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.recharge-queue-alert {
    margin-bottom: 16px;
}

.recharge-toast {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 17, 21, .42);
    backdrop-filter: blur(2px);
}

.recharge-toast[hidden] {
    display: none !important;
}

.recharge-toast-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: min(420px, 100%);
    max-width: 520px;
    padding: 18px 22px;
    border: 1px solid rgba(39, 174, 96, .28);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.recharge-toast-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(39, 174, 96, .12);
    color: #27ae60;
    font-size: 20px;
    font-weight: 800;
    line-height: 36px;
    text-align: center;
}

.recharge-toast-text {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}

.recharge-stack-form .field { margin-bottom: 18px; }

.reports-filterbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    --filter-control-h: 40px;
}

.reports-filter-presets {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reports-date-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 58px;
    min-height: var(--filter-control-h);
    height: var(--filter-control-h);
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.reports-date-preset:hover {
    border-color: rgba(47, 107, 255, .38);
    color: var(--brand-strong);
}

.reports-date-preset.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: none;
}

.reports-filter-divider {
    width: 1px;
    height: var(--filter-control-h);
    margin: 0 2px;
    background: var(--line);
}

.reports-filterbar label {
    margin: 0;
}

.reports-filterbar label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.reports-filterbar input,
.reports-filterbar select {
    min-height: var(--filter-control-h);
    height: var(--filter-control-h);
    border-radius: 9px;
    background-color: var(--surface);
    font-size: 13px;
    box-sizing: border-box;
}

.reports-date-range {
    display: flex;
    align-items: center;
    gap: 5px;
}

.reports-date-range input {
    width: 145px;
    padding: 0 11px;
}

.reports-date-range i {
    color: var(--muted-2);
    font-size: 11px;
    font-style: normal;
}

.reports-filter-server select { width: 138px; }
.reports-filter-search input { width: 182px; }
.reports-filter-status select { width: 132px; }

.reports-filter-submit {
    min-width: 84px;
    min-height: var(--filter-control-h);
    height: var(--filter-control-h);
    padding: 0 16px;
    border-radius: 9px;
    font-size: 13px;
    box-sizing: border-box;
}

.reports-filter-reset {
    min-width: 68px;
    min-height: var(--filter-control-h);
    height: var(--filter-control-h);
    padding: 0 16px;
    border-radius: 9px;
    font-size: 13px;
    box-sizing: border-box;
}

.reports-channel-workspace {
    min-height: 510px;
    overflow: hidden;
}

.reports-channel-board {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 510px;
}

.reports-channel-leaderboard {
    min-width: 0;
    border-right: 1px solid var(--line);
    background: var(--surface);
}

.reports-channel-list-head {
    padding: 15px 14px 0;
    border-bottom: 1px solid var(--line);
}

.reports-channel-list-head h2 {
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
}

.reports-rank-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 12px;
}

.reports-rank-tabs button {
    position: relative;
    min-width: 0;
    padding: 0 2px 10px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.reports-rank-tabs button::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 0;
    left: 3px;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: transparent;
}

.reports-rank-tabs button.is-active {
    color: var(--brand-strong);
    font-weight: 800;
}

.reports-rank-tabs button.is-active::after { background: var(--brand); }

.reports-channel-ranklist {
    max-height: 440px;
    overflow: auto;
    scrollbar-width: thin;
}

.reports-channel-tab {
    display: grid;
    grid-template-columns: 20px 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 62px;
    padding: 9px 14px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    transition: background .15s ease, color .15s ease;
}

.reports-channel-tab:hover { background: var(--surface-hover); }

.reports-channel-tab.is-active {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.reports-channel-rank {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.reports-channel-tab:nth-child(1) .reports-channel-rank { background: #ffbc27; color: #fff; }
.reports-channel-tab:nth-child(2) .reports-channel-rank { background: #8ab2f5; color: #fff; }
.reports-channel-tab:nth-child(3) .reports-channel-rank { background: #f39b69; color: #fff; }

.reports-channel-avatar {
    position: relative;
    overflow: hidden;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 2px 8px rgba(23, 40, 80, .16);
    font-size: 13px;
    font-weight: 900;
}

.reports-channel-avatar-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--surface-3);
    object-fit: cover;
}

.reports-channel-avatar.tone-0 { background: linear-gradient(145deg, #9a78ff, #243d74); }
.reports-channel-avatar.tone-1 { background: linear-gradient(145deg, #f083aa, #27355f); }
.reports-channel-avatar.tone-2 { background: linear-gradient(145deg, #69b7f4, #213c75); }
.reports-channel-avatar.tone-3 { background: linear-gradient(145deg, #73b9c6, #1c4967); }
.reports-channel-avatar.tone-4 { background: linear-gradient(145deg, #ee9d76, #55345e); }
.reports-channel-avatar.tone-5 { background: linear-gradient(145deg, #5a97ed, #302c67); }

.reports-channel-tab-name {
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reports-channel-tab-value {
    color: inherit;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.reports-channel-detail-area {
    position: relative;
    min-width: 0;
    background: var(--surface);
}

.reports-channel-detail-panel {
    position: relative;
    display: none;
    min-height: 509px;
    background: var(--surface);
}

.reports-channel-detail-panel.is-active { display: block; }
.reports-channel-detail-panel[hidden] { display: none; }

.reports-detail-close {
    position: absolute;
    z-index: 2;
    top: 9px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--brand-strong);
    font-size: 19px;
    line-height: 1;
}

.reports-detail-close:hover { background: var(--brand-soft); }

.reports-channel-overview {
    display: grid;
    grid-template-columns: minmax(160px, .95fr) minmax(560px, 3.7fr);
    align-items: center;
    gap: 20px;
    min-height: 108px;
    padding: 16px 46px 16px 20px;
    border-bottom: 1px solid var(--line);
}

.reports-channel-identity {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.reports-channel-avatar-lg {
    width: 54px;
    height: 54px;
    font-size: 18px;
}

.reports-channel-title {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.reports-channel-name-line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.reports-channel-title strong {
    overflow: hidden;
    font-size: 17px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reports-channel-title small {
    color: var(--muted);
    font-size: 12px;
}

.reports-channel-name-line .status {
    padding: 3px 8px;
    font-size: 11px;
}

.reports-channel-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(76px, 1fr));
    gap: 12px;
    margin: 0;
}

.reports-channel-summary-grid div { min-width: 0; }

.reports-channel-summary-grid dt {
    overflow: hidden;
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reports-channel-summary-grid dd {
    overflow: hidden;
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reports-channel-table-title {
    height: 44px;
    padding: 13px 18px 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.reports-channel-table-wrap {
    margin: 0 18px;
    border: 0;
    border-radius: 0;
}

.reports-channel-table {
    width: 100%;
    margin: 0;
    font-size: 13px;
}

.reports-channel-table thead th {
    height: 40px;
    padding: 10px;
    background: var(--surface-3);
    color: var(--muted);
    font-size: 12px;
}

.reports-channel-table tbody td {
    height: 46px;
    padding: 10px;
}

.reports-channel-table th:first-child,
.reports-channel-table td:first-child { padding-left: 12px; }

.reports-channel-table .col-num,
.reports-channel-table .col-time { text-align: left; }

.reports-channel-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 8px 18px;
    color: var(--muted);
    font-size: 12px;
}

.reports-mini-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reports-mini-pagination button,
.reports-mini-pagination b,
.reports-mini-pagination em {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
}

.reports-mini-pagination b {
    border-color: var(--brand-soft);
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.reports-channel-empty {
    margin: 0 18px;
    padding: 34px 12px;
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.reports-channel-detail-placeholder,
.reports-channel-no-results {
    display: grid;
    place-content: center;
    gap: 6px;
    min-height: 420px;
    color: var(--muted);
    text-align: center;
}

.reports-channel-detail-placeholder[hidden] { display: none; }
.reports-channel-detail-placeholder strong,
.reports-channel-no-results strong { color: var(--text); }

@media (max-width: 1180px) {
    .reports-channel-overview {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .reports-channel-summary-grid { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
}

@media (max-width: 900px) {
    .reports-filterbar {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .reports-channel-board { grid-template-columns: 1fr; }

    .reports-channel-leaderboard {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .reports-channel-ranklist {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 220px;
    }

    .reports-channel-tab:nth-child(odd) { border-right: 1px solid var(--line-soft); }
}

@media (max-width: 640px) {
    .reports-filterbar { align-items: stretch; }
    .reports-filter-presets { flex-wrap: wrap; width: 100%; }
    .reports-date-preset { flex: 1 1 72px; }
    .reports-filter-divider { display: none; }
    .reports-date-range { width: 100%; }
    .reports-date-range label { flex: 1; }
    .reports-date-range input,
    .reports-filter-server,
    .reports-filter-server select,
    .reports-filter-search,
    .reports-filter-search input,
    .reports-filter-status,
    .reports-filter-status select,
    .reports-filter-submit { width: 100%; }

    .reports-filter-server,
    .reports-filter-search { flex: 1 1 150px; }
    .reports-channel-ranklist { grid-template-columns: 1fr; }
    .reports-channel-tab:nth-child(odd) { border-right: 0; }
    .reports-channel-summary-grid { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
    .reports-channel-overview { padding-left: 14px; }
    .reports-channel-table-wrap { margin: 0 12px; }
}
.recharge-stack-form .field:last-of-type { margin-bottom: 22px; }

.recharge-stack-form input,
.recharge-stack-form select {
    min-height: 50px;
    border-radius: 12px;
}

.btn-block {
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
    font-size: 15px;
    letter-spacing: .3px;
}

/* ============================ Forms ============================ */
.recharge-form, .filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    align-items: flex-end;
}

.recharge-form .field, .filter-form .field { margin-bottom: 0; }
.recharge-form .field-server, .filter-form .field-server { width: min(100%, 320px); }
.recharge-form .field-account, .filter-form .field-account { width: min(100%, 220px); }
.recharge-form .field-amount, .filter-form .field-status { width: min(100%, 170px); }
.recharge-form .btn, .filter-form .btn { flex: 0 0 auto; min-width: 124px; }

.form-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 18px 20px;
    max-width: 780px;
}

.form-stack .field { margin-bottom: 0; }
.form-stack .field-wide { grid-column: 1 / -1; }
.form-stack .btn { grid-column: 1 / -1; justify-self: start; min-width: 150px; }

.field { margin-bottom: 16px; }

.field label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
}

.input, input, select {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

input::placeholder { color: var(--muted-2); }

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

input:focus, select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

input[readonly] { color: var(--muted); background: var(--surface); cursor: default; }
input[readonly]:focus { border-color: var(--line); box-shadow: none; }

input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================ Buttons ============================ */
.btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--on-brand);
    background: var(--brand);
    font-weight: 800;
    box-shadow: var(--shadow-sm);
    transition: background .15s, transform .15s, box-shadow .15s;
}

.btn:hover { background: var(--brand-strong); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }

.btn.primary {
    width: 100%;
    min-height: 52px;
    background: var(--brand);
}

.btn.primary:hover { background: var(--brand-strong); }

.btn.ghost {
    color: var(--text-2);
    border: 1px solid var(--line);
    background: var(--surface-3);
    box-shadow: none;
}

.btn.ghost:hover { color: var(--brand); border-color: var(--brand); background: var(--surface-hover); }

/* ============================ Table ============================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    table-layout: fixed;
}

.data-table th, .data-table td {
    padding: 13px 16px;
    text-align: left;
    vertical-align: middle;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-table thead th {
    position: sticky;
    top: 0;
    color: var(--muted);
    background: var(--surface-3);
    border-bottom: 1px solid var(--line);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .3px;
}

.data-table tbody td { border-bottom: 1px solid var(--line-soft); color: var(--text-2); font-weight: 600; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover td { background: var(--surface-3); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table small { color: var(--muted); font-weight: 500; }

.data-table .col-id { width: 82px; }
.data-table .col-num { width: 96px; }
.data-table .col-sm { width: 116px; }
.data-table .col-md { width: 150px; }
.data-table .col-lg { width: 180px; }
.data-table .col-status { width: 96px; }
.data-table .col-action { width: 84px; }
.data-table .col-actions { width: 172px; white-space: normal; }
.data-table .col-time { width: 168px; }
.data-table .col-path { width: auto; min-width: 180px; }
.data-table .col-wrap { white-space: normal; word-break: break-all; }
.data-table td.col-path, .data-table td.col-wrap { white-space: nowrap; }
.data-table td.col-md, .data-table td.col-actions { white-space: normal; }

/* ============================ Status tags ============================ */
.status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--surface-3);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .01em;
    vertical-align: middle;
    white-space: nowrap;
}

.status::before {
    display: none;
}

.status.ready,
.status.done {
    color: #008026;
    background: rgba(0, 180, 42, .08);
    border-color: rgba(0, 180, 42, .22);
}

.status.starting,
.status.processing,
.status.pending {
    color: #b86e00;
    background: rgba(255, 125, 0, .08);
    border-color: rgba(255, 125, 0, .22);
}

.status.offline,
.status.failed {
    color: #cb2634;
    background: rgba(245, 63, 63, .08);
    border-color: rgba(245, 63, 63, .22);
}

[data-theme="dark"] .status.ready,
[data-theme="dark"] .status.done {
    color: #4cd964;
    background: rgba(0, 180, 42, .14);
    border-color: rgba(0, 180, 42, .28);
}

[data-theme="dark"] .status.starting,
[data-theme="dark"] .status.processing,
[data-theme="dark"] .status.pending {
    color: #ffb65d;
    background: rgba(255, 125, 0, .14);
    border-color: rgba(255, 125, 0, .28);
}

[data-theme="dark"] .status.offline,
[data-theme="dark"] .status.failed {
    color: #ff7875;
    background: rgba(245, 63, 63, .14);
    border-color: rgba(245, 63, 63, .28);
}

/* ============================ Misc ============================ */
.empty {
    padding: 40px 18px;
    color: var(--muted);
    text-align: center;
    font-weight: 600;
}

.summary-grid, .install-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.install-grid .field { margin-bottom: 0; }

.app-footer {
    margin-top: auto;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    border-top: 1px solid var(--line-soft);
    color: var(--muted-2);
    font-size: 12px;
}

.row-actions { display: flex; align-items: center; gap: 14px; white-space: nowrap; }

.linklike {
    min-height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    transition: color .15s;
}

.linklike:hover { color: var(--brand); }
.linklike.danger { color: var(--red); }
.linklike.danger:hover { color: var(--red); filter: brightness(1.1); }

.field-wide { grid-column: 1 / -1; }

.perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px;
}

.perm-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin: 0;
    transition: border-color .15s, background .15s, color .15s;
}

.perm-item:hover { border-color: var(--brand); }
.perm-item:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

.perm-item input[type="checkbox"] {
    width: 17px;
    min-height: 17px;
    height: 17px;
    padding: 0;
    accent-color: var(--brand);
    cursor: pointer;
}

.perm-item span { user-select: none; }

/* ============================ Modal ============================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px;
    background: rgba(9, 14, 26, .55);
    backdrop-filter: blur(3px);
    overflow-y: auto;
}

.modal-overlay.open { display: flex; }

.modal {
    width: min(680px, 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: modalIn .18s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line-soft);
}

.modal-header h2 { font-size: 17px; font-weight: 800; }

.modal-close {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-3);
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    transition: color .15s, border-color .15s;
}

.modal-close:hover { color: var(--red); border-color: var(--red); }

.modal-body { padding: 22px; }

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-actions .btn { min-width: 120px; }

/* ============================ Auth (login) ============================ */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 1.05fr) minmax(420px, .95fr);
    background: var(--bg);
}

.auth-hero {
    min-height: 100vh;
    padding: 40px 6vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--line-soft);
    background: var(--bg-2);
}

.auth-copy { max-width: 560px; padding-bottom: 10vh; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-2);
    background: var(--surface);
    font-size: 12px;
    font-weight: 700;
}

.auth-copy h1 { margin: 34px 0 18px; font-size: 42px; line-height: 1.14; font-weight: 900; }
.auth-copy h1 em { display: block; font-style: normal; color: var(--brand); }
.auth-copy p { max-width: 520px; margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.85; }

.auth-main { min-height: 100vh; display: grid; align-items: center; padding: 44px 6vw; background: var(--surface); }
.auth-card { width: min(100%, 440px); margin: 0 auto; }
.auth-card h2 { margin: 24px 0 10px; font-size: 32px; font-weight: 800; }
.auth-card > p { margin: 0 0 28px; color: var(--muted); }

.segmented {
    display: inline-flex;
    gap: 5px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-3);
}

.segment { border: 0; border-radius: 999px; padding: 9px 22px; color: var(--muted); background: transparent; font-weight: 700; }
.segment.active { color: var(--on-brand); background: var(--brand); }

/* ============================ Install ============================ */
.install-shell { width: min(960px, calc(100% - 32px)); margin: 40px auto 56px; }
.install-shell .page-title { margin-bottom: 22px; }
.install-shell > section + section { margin-top: 18px; }

.requirement {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--line-soft);
    font-weight: 600;
}

.requirement:first-child { border-top: 0; }

.check { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--text-2); font-weight: 700; }
.check input { width: 18px; min-height: 18px; height: 18px; accent-color: var(--brand); }

/* ============================ Responsive ============================ */
@media (max-width: 1180px) {
    .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kpi-grid.cols-3, .kpi-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overview-grid, .lower-grid, .recharge-layout { grid-template-columns: 1fr; }
    .streamers-perm-grid { grid-template-columns: 1fr; }
    .form-stack { grid-template-columns: 1fr; max-width: none; }
}

@media (max-width: 900px) {
    :root { --sidebar-w: 1fr; }
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; }
    .sidebar-head { min-height: 64px; }
    .sidebar-nav { display: flex; overflow-x: auto; padding: 10px 12px; gap: 6px; }
    .sidebar-link { flex: 0 0 auto; min-height: 42px; }
    .sidebar-link.active::before { display: none; }
    .sidebar-foot { display: none; }
    .topbar { flex-direction: column; align-items: stretch; }
    .topbar-actions { justify-content: space-between; }
    .content { padding: 18px 16px 24px; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi-grid.cols-3, .kpi-grid.cols-4 { grid-template-columns: 1fr; }
    .recharge-form .field-server, .recharge-form .field-account, .recharge-form .field-amount,
    .filter-form .field-server, .filter-form .field-account, .filter-form .field-status { width: 100%; }
    .recharge-form .btn, .filter-form .btn { width: 100%; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-hero { min-height: auto; padding: 28px 22px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .auth-copy { padding-bottom: 0; }
    .auth-copy h1 { font-size: 36px; }
    .auth-main { min-height: auto; padding: 34px 22px; }
}

@media (max-width: 640px) {
    .brand-text { font-size: 14px; }
    .page-title, .app-footer { flex-direction: column; align-items: flex-start; }
    .kpi-grid, .recharge-form, .filter-form, .summary-grid, .install-grid { grid-template-columns: 1fr; }
    .panel-body { padding: 16px; }
    .trend-chart { gap: 8px; }
    .data-table { min-width: 560px; }
    .quota-value { font-size: 26px; }
    .quota-row { grid-template-columns: 76px minmax(0, 1fr) 24px; }
    .recharge-recent-table { min-width: 480px; }
}

/* ============================================================
   UI Design System v5 - Blue Gray Command Center
   Shared light/dark tokens and full-site component overrides
   ============================================================ */

:root {
    --app-bg: #f3f6fa;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-subtle: #f7f9fc;
    --surface-hover: #f0f4fa;
    --text-primary: #17233a;
    --text-secondary: #46536b;
    --text-muted: #7b899f;
    --border: #e1e7ef;
    --border-strong: #d3dbe7;
    --primary: #356be7;
    --primary-hover: #2858c8;
    --primary-soft: #e9effe;
    --success: #169772;
    --success-soft: #e4f5ef;
    --warning: #dd812e;
    --warning-soft: #faecdd;
    --danger: #dc4b64;
    --danger-soft: #fde9ed;
    --focus-ring: rgba(53, 107, 231, .24);
    --shadow-card: 0 5px 18px rgba(38, 54, 83, .055);
    --shadow-float: 0 16px 42px rgba(28, 42, 70, .16);

    /* compatibility aliases for existing page rules */
    --bg: var(--app-bg);
    --bg-2: #e9eef6;
    --surface-2: var(--surface-raised);
    --surface-3: var(--surface-subtle);
    --line: var(--border);
    --line-soft: #edf1f6;
    --text: var(--text-primary);
    --text-2: var(--text-secondary);
    --muted: var(--text-muted);
    --muted-2: #9aa6b8;
    --brand: var(--primary);
    --brand-strong: var(--primary-hover);
    --brand-soft: var(--primary-soft);
    --teal: var(--success);
    --teal-soft: var(--success-soft);
    --green: var(--success);
    --orange: var(--warning);
    --orange-soft: var(--warning-soft);
    --red: var(--danger);
    --red-soft: var(--danger-soft);
    --yellow: var(--warning);
    --yellow-soft: var(--warning-soft);
    --blue: var(--primary);
    --blue-soft: var(--primary-soft);
    --purple: var(--primary);
    --purple-soft: var(--primary-soft);
    --sidebar: var(--surface);
    --sidebar-2: var(--surface);
    --sidebar-border: var(--border);
    --sidebar-muted: var(--text-muted);
    --sidebar-hover: var(--surface-hover);
    --sidebar-active-bg: var(--primary-soft);
    --sidebar-active-text: var(--primary);
    --topbar-bg: rgba(255, 255, 255, .94);
    --shadow: var(--shadow-float);
    --shadow-sm: var(--shadow-card);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 7px;
    --sidebar-w: 220px;
}

:root[data-theme="dark"] {
    --app-bg: #101722;
    --surface: #182332;
    --surface-raised: #1c2838;
    --surface-subtle: #202c3d;
    --surface-hover: #243247;
    --text-primary: #edf4ff;
    --text-secondary: #bdc8d8;
    --text-muted: #8794a8;
    --border: #29374b;
    --border-strong: #35455c;
    --primary: #5d8cff;
    --primary-hover: #77a0ff;
    --primary-soft: #22375a;
    --success: #34c89f;
    --success-soft: #173b35;
    --warning: #f0a054;
    --warning-soft: #493323;
    --danger: #ff7084;
    --danger-soft: #482633;
    --focus-ring: rgba(93, 140, 255, .30);
    --shadow-card: none;
    --shadow-float: 0 18px 48px rgba(0, 0, 0, .42);
    --bg-2: #0c121c;
    --line-soft: #202c3d;
    --muted-2: #657287;
    --topbar-bg: rgba(20, 29, 43, .96);
}

html, body { background: var(--app-bg); color: var(--text-primary); }
body { font-size: 14px; line-height: 1.55; }

:where(a, button, input, select, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Shell */
.app-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.sidebar { border-color: var(--border); background: var(--surface); }
.sidebar-head {
    min-height: 68px;
    padding: 0 17px;
    border-color: var(--border);
    background: var(--surface);
}
.brand { gap: 10px; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
.brand-text { font-size: 14px; letter-spacing: 0; }
.sidebar-nav { gap: 5px; padding: 15px 11px; }
.sidebar-link {
    min-height: 42px;
    gap: 10px;
    padding: 0 11px;
    border-radius: 9px;
    color: var(--text-muted);
    font-size: 13px;
}
.sidebar-link.active::before { display: none; }
.nav-icon {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border-color: var(--border);
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: 11px;
}
.sidebar-link.active { color: var(--primary); background: var(--primary-soft); }
.sidebar-link.active .nav-icon { background: var(--primary); color: #fff; }
.sidebar-foot { padding: 14px; border-color: var(--border); }
.collapse-link { min-height: 36px; border-radius: 8px; border-color: var(--border); background: var(--surface-subtle); }

.topbar {
    min-height: 68px;
    padding: 11px 24px;
    border-color: var(--border);
    background: var(--topbar-bg);
    backdrop-filter: blur(14px);
}
.search-box {
    width: min(390px, 100%);
    grid-template-columns: minmax(0, 1fr) 62px;
    border-radius: 10px;
    border-color: var(--border);
    background: var(--surface-subtle);
}
.search-box input { min-height: 38px; padding: 0 13px; }
.search-box button { min-width: 62px; background: var(--primary); font-size: 13px; }
.topbar-actions { gap: 9px; }
.theme-toggle { width: 38px; height: 38px; border-radius: 9px; border-color: var(--border); background: var(--surface-subtle); }
.standalone-theme-toggle {
    position: fixed;
    z-index: 40;
    top: 18px;
    right: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.online-pill { min-height: 38px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.topbar .online-pill.is-offline {
    border-color: var(--red-soft);
    background: var(--red-soft);
    color: var(--red);
}
.topbar .online-pill.is-offline .dot {
    background: var(--red);
    box-shadow: 0 0 0 3px var(--red-soft);
    animation: pulse-offline 2.4s ease-in-out infinite;
}
.admin-menu { min-height: 38px; padding: 4px 9px 4px 5px; border-radius: 9px; border-color: var(--border); background: var(--surface); }
.avatar { width: 28px; height: 28px; border-radius: 8px; }

.content { padding: 20px 24px 30px; }
.page-title { display: none; }
.page-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.page-heading-icon {
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 48px;
    border-radius: 12px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 19px;
    font-weight: 900;
}
.page-heading-copy { min-width: 0; flex: 1; }
.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}
.page-breadcrumb [aria-current="page"] { color: var(--primary); }
.page-heading h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.3px;
}
.page-heading p { margin: 5px 0 0; color: var(--text-muted); font-size: 13px; }
.page-actions { display: flex; align-items: center; gap: 9px; }

/* Cards and panels */
.kpi-grid { gap: 12px; margin-bottom: 14px; }
.kpi-card {
    min-height: 92px;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    transform: none;
}
.kpi-card:hover { transform: none; border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.kpi-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 16px;
}
.kpi-card.blue .kpi-icon, .kpi-card.purple .kpi-icon { color: var(--primary); background: var(--primary-soft); }
.kpi-card.orange .kpi-icon { color: var(--warning); background: var(--warning-soft); }
.kpi-card small { font-size: 12px; color: var(--text-muted); }
.kpi-card strong { margin-top: 2px; font-size: 23px; color: var(--text-primary); }
.kpi-card em { margin-top: 3px; font-size: 12px; color: var(--text-muted); }

.overview-grid, .lower-grid { gap: 14px; margin-bottom: 14px; }
.panel {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.panel-header {
    min-height: 48px;
    padding: 0 16px;
    border-color: var(--border);
    background: transparent;
}
.panel-header h2 { gap: 8px; font-size: 15px; color: var(--text-primary); }
.panel-header h2::before { width: 3px; height: 15px; border-radius: 2px; background: var(--primary); }
.panel-body { padding: 16px; }
.muted { color: var(--text-muted); }

/* Forms and toolbars */
.toolbar {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 11px 11px 0 0;
    background: var(--surface);
}
.toolbar-title { margin-right: 8px; color: var(--text-primary); font-weight: 800; }
.toolbar-form { flex: 1; }
.field label { margin-bottom: 6px; color: var(--text-secondary); font-size: 13px; }
.field-help { display: block; margin-top: 6px; color: var(--text-muted); font-size: 12px; }
.input, input, select {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--surface-subtle);
    color: var(--text-primary);
}
input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
input[readonly] { background: var(--surface); color: var(--text-muted); }
.perm-grid { gap: 8px; }
.perm-item { padding: 10px 12px; border-color: var(--border); border-radius: 8px; background: var(--surface-subtle); }
.perm-item:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

/* Buttons */
.btn {
    min-height: 40px;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #fff;
    background: var(--primary);
    font-weight: 800;
    box-shadow: none;
    transform: none;
}
.btn:hover { background: var(--primary-hover); transform: none; box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-secondary, .btn.ghost {
    color: var(--text-secondary);
    border-color: var(--border);
    background: var(--surface);
}
.btn-secondary:hover, .btn.ghost:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.btn-danger { color: #fff; background: var(--danger); }
.btn-danger:hover { background: var(--danger); filter: brightness(.94); }
.btn.primary { width: 100%; min-height: 46px; background: var(--primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn-block { min-height: 46px; border-radius: 8px; }
.icon-button {
    width: 32px;
    min-height: 32px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-muted);
}
.icon-button:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.icon-button.danger { color: var(--danger); }
.linklike { color: var(--text-muted); }
.linklike:hover { color: var(--primary); }
.row-actions { gap: 6px; }
.row-actions .linklike {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
}
.row-actions .linklike:hover { border-color: var(--primary); background: var(--primary-soft); }
.row-actions .linklike.danger:hover { border-color: var(--danger); background: var(--danger-soft); }

/* Tables and states */
.table-wrap { border-radius: 0 0 11px 11px; }
.data-table thead th {
    padding: 12px 15px;
    color: var(--text-muted);
    background: var(--surface-subtle);
    border-color: var(--border);
    font-size: 12px;
}
.data-table tbody td { padding: 13px 15px; border-color: var(--border); color: var(--text-secondary); font-size: 13.5px; }
.data-table tbody tr:hover td { background: var(--surface-hover); }

.empty { padding: 34px 16px; color: var(--text-muted); }
.empty-state { padding: 34px 16px; color: var(--text-muted); text-align: center; font-weight: 600; }
.pagination { min-height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding: 8px 14px; border-top: 1px solid var(--border); }
.pagination a, .pagination span { min-width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.pagination .active { border-color: var(--primary); background: var(--primary); color: #fff; }

/* Alerts, quota, charts, and quick actions */
.alert {
    gap: 9px;
    padding: 11px 13px;
    border: 0;
    border-radius: 9px;
    box-shadow: none;
}
.alert.success { color: var(--success); background: var(--success-soft); }
.alert.error { color: var(--danger); background: var(--danger-soft); }
.alert.warning { color: var(--warning); background: var(--warning-soft); }
.quick-action { border-color: var(--border); border-radius: 9px; background: var(--surface-subtle); }
.quota-card, .recharge-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); }
.recharge-card { padding: 20px; }
.recharge-stack-form input, .recharge-stack-form select { min-height: 44px; border-radius: 8px; }
.quota-progress { background: var(--surface-subtle); }
.quota-progress-bar { background: var(--primary); }
.trend-bar { background: linear-gradient(to top, var(--primary-soft), var(--primary)); }

/* Modal */
.modal-overlay { background: rgba(6, 11, 20, .62); backdrop-filter: blur(4px); }
.modal { border-color: var(--border); border-radius: 12px; background: var(--surface-raised); box-shadow: var(--shadow-float); }
.modal-header { padding: 15px 19px; border-color: var(--border); }
.modal-header h2 { font-size: 16px; }
.modal-close { width: 32px; height: 32px; border-radius: 7px; border-color: var(--border); background: var(--surface-subtle); }
.modal-body { padding: 19px; }

/* Auth and installer */
.auth-shell { background: var(--app-bg); }
.auth-hero { padding: 36px 5vw; border-color: var(--border); background: var(--app-bg); }
.auth-copy { max-width: 520px; padding-bottom: 7vh; }
.auth-copy h1 { margin: 28px 0 15px; font-size: 42px; line-height: 1.16; }
.auth-copy p { color: var(--text-muted); }
.auth-main { padding: 38px 5vw; background: var(--surface); }
.auth-card { max-width: 420px; }
.auth-card h2 { margin: 21px 0 8px; font-size: 28px; }
.segmented { border-color: var(--border); border-radius: 9px; background: var(--surface-subtle); }
.segment { border-radius: 7px; }
.segment.active { background: var(--primary); }
.install-shell { width: min(980px, calc(100% - 32px)); margin: 30px auto 50px; }
.install-shell .page-title { display: flex; }
.install-shell .page-title h1 { font-size: 26px; }

.app-footer { min-height: 50px; padding: 12px 24px; border-color: var(--border); color: var(--text-muted); }

@media (max-width: 1180px) {
    .content { padding-inline: 20px; }
}

@media (max-width: 900px) {
    :root { --sidebar-w: 1fr; }
    .app-shell { grid-template-columns: 1fr; }
    .sidebar-head { min-height: 60px; }
    .sidebar-nav { padding: 9px 11px; }
    .sidebar-link { min-height: 38px; }
    .topbar { padding: 10px 16px; }
    .content { padding: 17px 16px 24px; }
    .page-heading { align-items: flex-start; }
    .page-actions { flex-wrap: wrap; justify-content: flex-end; }
    .toolbar { flex-wrap: wrap; }
    .toolbar-form { flex-basis: 100%; }
    .settings-shell { grid-template-columns: 1fr; }
    .settings-nav { border-right: 0; border-bottom: 1px solid var(--line); }
    .settings-nav-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .settings-nav-foot { display: none; }
    .settings-meta-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .topbar-actions { flex-wrap: wrap; }
    .online-pill { order: 2; }
    .page-heading { align-items: flex-start; flex-wrap: wrap; padding: 16px; }
    .page-heading-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 10px; }
    .page-heading-copy { flex-basis: calc(100% - 58px); }
    .page-heading h1 { font-size: 22px; }
    .page-actions { width: 100%; justify-content: flex-start; }
    .page-actions .btn { flex: 1; }
    .kpi-card { min-height: 84px; }
    .auth-copy h1 { font-size: 34px; }
    .modal-body { padding: 16px; }
    .settings-shell { grid-template-columns: 1fr; }
    .settings-nav { border-right: 0; border-bottom: 1px solid var(--line); }
    .settings-nav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px; }
    .settings-nav-foot { border-top: 0; padding: 0 10px 10px; }
    .settings-main { padding: 20px 18px 24px; min-height: 0; }
    .settings-panel-head-row { flex-direction: column; align-items: stretch; }
    .settings-meta-grid { grid-template-columns: 1fr; }
}

/* ============================ Settings page v2 ============================ */
/* 设置页：内容区改为纵向弹性布局，让卡片撑满到页脚，避免底部大片空白 */
.content:has(> .settings-shell) {
    display: flex;
    flex-direction: column;
}

.content:has(> .settings-shell) > .page-heading,
.content:has(> .settings-shell) > .alert {
    flex: 0 0 auto;
}

.settings-shell {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line-soft);
    background: var(--surface-3);
}

.settings-nav-list {
    display: grid;
    gap: 4px;
    padding: 12px 10px;
}

.settings-nav-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-2);
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.settings-nav-item:hover {
    background: var(--surface);
    border-color: var(--line-soft);
}

.settings-nav-item.is-active {
    background: var(--surface);
    border-color: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
}

.settings-nav-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 14px;
    font-weight: 900;
}

.settings-nav-item.is-active .settings-nav-icon {
    background: var(--brand);
    color: var(--on-brand);
}

.settings-nav-text { min-width: 0; }

.settings-nav-text strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.settings-nav-text small {
    display: block;
    margin-top: 3px;
    color: var(--muted-2);
    font-size: 12px;
    line-height: 1.3;
}

.settings-nav-foot {
    margin-top: auto;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--line-soft);
}

.settings-nav-meta {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
}

.settings-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    vertical-align: middle;
}

.settings-dot.is-ok {
    background: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-soft);
}

.settings-main {
    padding: 24px 28px 28px;
}

.settings-panel { display: none; }
.settings-panel.is-active { display: block; animation: settingsFade .18s ease; }

@keyframes settingsFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.settings-panel-head { margin-bottom: 24px; }

.settings-panel-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--text);
}

.settings-panel-head p {
    max-width: 640px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.settings-panel-head p code,
.settings-note code {
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 12px;
}

.settings-panel-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.settings-block {
    max-width: 420px;
    padding: 20px 22px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--surface-3);
}

.settings-block.sms-auth-settings {
    max-width: none;
    display: grid;
    gap: 12px;
}

.settings-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-two-col input,
.sms-auth-settings textarea {
    width: 100%;
}

.sms-auth-settings textarea {
    min-height: 86px;
    resize: vertical;
}

.settings-password-form {
    display: grid;
    gap: 0;
}

.settings-password-form .settings-label {
    margin-top: 10px;
    margin-bottom: 6px;
}

.settings-password-form .settings-label:first-child {
    margin-top: 0;
}

.settings-password-form input {
    width: 100%;
    min-height: 42px;
}

.settings-password-form .settings-note {
    margin: 8px 0 12px;
}

.settings-password-form .btn {
    justify-self: start;
}

.settings-label {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
}

.settings-inline-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-inline-field input {
    width: 120px;
    min-height: 42px;
}

.settings-inline-field .btn {
    min-width: 88px;
    min-height: 42px;
}

.settings-note {
    margin: 12px 0 0;
    color: var(--muted-2);
    font-size: 12px;
    line-height: 1.5;
}

.settings-code {
    margin: 0 0 20px;
    padding: 18px 20px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: #0f1728;
    color: #dbe7ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
}

:root[data-theme="dark"] .settings-code {
    background: #070b14;
    border-color: #1a2438;
    color: #c9d7ef;
}

.settings-gateway-heartbeat {
    margin-top: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}

.settings-gateway-heartbeat .panel-header {
    border-bottom: 1px solid var(--line-soft);
}

.settings-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.settings-meta-grid.is-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-meta-grid > div {
    padding: 14px 16px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--surface-3);
}

.settings-meta-grid dt {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
}

.settings-meta-grid dd {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    word-break: break-all;
}

.settings-meta-grid dd.is-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
}

.settings-security {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    overflow: hidden;
}

.settings-security li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface);
}

.settings-security li:last-child { border-bottom: 0; }

.settings-security-main strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.settings-security-main span {
    display: block;
    margin-top: 4px;
    color: var(--muted-2);
    font-size: 12px;
}

.settings-tag {
    flex-shrink: 0;
    min-width: 58px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.settings-tag.is-ok {
    color: var(--teal);
    background: var(--teal-soft);
}

.settings-tag.is-muted {
    color: var(--muted);
    background: var(--surface-3);
}

/* Secure tech login + security settings */
.auth-body {
    min-height: 100vh;
    color: #eaf6ff;
    background:
        radial-gradient(circle at 18% 18%, rgba(31, 209, 176, .16), transparent 32%),
        radial-gradient(circle at 82% 12%, rgba(77, 130, 255, .16), transparent 30%),
        #07111f;
}

:root:not([data-theme="dark"]) .auth-body {
    color: var(--text);
    background:
        radial-gradient(circle at 16% 16%, rgba(14, 159, 120, .12), transparent 32%),
        radial-gradient(circle at 84% 12%, rgba(47, 107, 255, .12), transparent 30%),
        #eef4ff;
}

.auth-grid-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
    gap: clamp(34px, 6vw, 90px);
    min-height: calc(100vh - 74px);
    padding: clamp(42px, 8vw, 86px) clamp(24px, 7vw, 92px);
    overflow: hidden;
    isolation: isolate;
}

.auth-grid-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(80, 160, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 160, 255, .08) 1px, transparent 1px),
        linear-gradient(120deg, transparent 0 42%, rgba(31, 209, 176, .08) 45%, transparent 48% 100%);
    background-size: 36px 36px, 36px 36px, 240px 240px;
    mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.82) 55%, rgba(0,0,0,.25) 100%);
    animation: auth-grid-pan 16s linear infinite;
}

@keyframes auth-grid-pan {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 72px 36px, 72px 36px, 240px 0; }
}

.auth-pulse-grid {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    gap: 38px;
}

.auth-brand-lockup .brand {
    color: currentColor;
}

.auth-grid-shell .auth-copy {
    max-width: 680px;
    padding: 5vh 0 0;
}

.auth-grid-shell .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #20e0c0;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .28em;
}

:root:not([data-theme="dark"]) .auth-grid-shell .eyebrow {
    color: var(--teal);
}

.auth-grid-shell .dot,
.auth-online-dot i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #25e6c6;
    box-shadow: 0 0 0 7px rgba(37, 230, 198, .14);
    animation: auth-pulse 1.8s ease-in-out infinite;
}

@keyframes auth-pulse {
    0%, 100% { opacity: .65; transform: scale(.86); }
    50% { opacity: 1; transform: scale(1); }
}

.auth-grid-shell .auth-copy h1 {
    margin: 22px 0 18px;
    color: #f5f9ff;
    font-size: clamp(42px, 5.6vw, 76px);
    font-weight: 950;
    line-height: .98;
    letter-spacing: -.06em;
}

:root:not([data-theme="dark"]) .auth-grid-shell .auth-copy h1 {
    color: var(--text);
}

.auth-grid-shell .auth-copy h1 em {
    display: inline-block;
    color: #25e6c6;
    font-style: normal;
    text-shadow: 0 0 28px rgba(37, 230, 198, .22);
}

:root:not([data-theme="dark"]) .auth-grid-shell .auth-copy h1 em {
    color: var(--teal);
}

.auth-grid-shell .auth-copy p {
    max-width: 590px;
    margin: 0;
    color: rgba(234, 246, 255, .66);
    font-size: 15px;
    line-height: 1.9;
}

:root:not([data-theme="dark"]) .auth-grid-shell .auth-copy p {
    color: var(--muted);
}

.auth-terminal {
    width: min(100%, 560px);
    margin: 0;
    padding: 20px 22px;
    color: #18eecb;
    border: 1px solid rgba(31, 209, 176, .28);
    border-radius: 10px;
    background: rgba(2, 18, 30, .58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 60px rgba(0,0,0,.22);
    font: 800 12px/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
}

:root:not([data-theme="dark"]) .auth-terminal {
    color: #057a67;
    border-color: rgba(14, 159, 120, .22);
    background: rgba(255,255,255,.74);
}

.auth-panel {
    align-self: center;
    width: min(100%, 430px);
    padding: 34px 32px 28px;
    border: 1px solid rgba(125, 173, 255, .28);
    border-radius: 9px;
    background: rgba(6, 16, 30, .74);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(18px);
}

:root:not([data-theme="dark"]) .auth-panel {
    color: var(--text);
    border-color: rgba(47, 107, 255, .20);
    background: rgba(255,255,255,.86);
    box-shadow: var(--shadow);
}

.auth-online-dot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #25e6c6;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
}

.auth-panel h2 {
    margin: 18px 0 4px;
    color: currentColor;
    font-size: 28px;
    font-weight: 950;
    letter-spacing: -.04em;
}

.auth-panel-subtitle {
    margin: 0 0 22px;
    color: rgba(234, 246, 255, .58);
    font-size: 13px;
}

:root:not([data-theme="dark"]) .auth-panel-subtitle {
    color: var(--muted);
}

.auth-form .field label {
    color: rgba(234, 246, 255, .74);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
}

:root:not([data-theme="dark"]) .auth-form .field label {
    color: var(--text-2);
}

.auth-form input {
    min-height: 48px;
    color: #eef8ff;
    border-color: rgba(125, 173, 255, .26);
    background: rgba(3, 15, 28, .58);
}

:root:not([data-theme="dark"]) .auth-form input {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}

.auth-form input:focus {
    border-color: #25e6c6;
    box-shadow: 0 0 0 4px rgba(37, 230, 198, .12);
}

.auth-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 18px;
    color: rgba(234, 246, 255, .54);
    font-size: 11px;
}

:root:not([data-theme="dark"]) .auth-form-meta {
    color: var(--muted);
}

.auth-cancel-form {
    margin-top: 12px;
}

.auth-log-note {
    margin: 18px 0 0;
    color: rgba(234, 246, 255, .36);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

:root:not([data-theme="dark"]) .auth-log-note {
    color: var(--muted-2);
}

.auth-status-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    color: var(--text);
    border-top: 1px solid rgba(255,255,255,.08);
    background: var(--line-soft);
}

.auth-status-strip div {
    min-height: 74px;
    padding: 13px clamp(18px, 7vw, 92px);
    background: var(--surface);
}

.auth-status-strip strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: 13px;
}

.auth-status-strip span {
    color: var(--muted);
    font-size: 12px;
}

.auth-theme-toggle {
    z-index: 5;
}

.logout-form {
    margin: 0;
}

.logout-btn {
    width: 100%;
    border: 0;
    font: inherit;
    text-align: center;
}

.security-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.security-card {
    padding: 14px 16px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.security-card:has(.recovery-code-grid) {
    grid-column: 1 / -1;
}

.security-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.security-card-head strong {
    display: block;
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
}

.security-card-head span:not(.settings-tag) {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.totp-setup {
    display: grid;
    gap: 12px;
}

.totp-setup-grid {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.totp-setup-left {
    display: grid;
    gap: 8px;
    justify-items: center;
    min-width: 0;
}

.totp-qr-card {
    display: grid;
    justify-items: center;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--surface-3);
}

.totp-qr {
    width: 168px;
    max-width: 100%;
    padding: 8px;
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.totp-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.totp-qr-hint {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.totp-manual {
    width: 100%;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--surface-3);
}

.totp-manual summary {
    padding: 8px 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.totp-manual summary::-webkit-details-marker { display: none; }

.totp-manual[open] summary {
    border-bottom: 1px solid var(--line-soft);
}

.totp-manual .totp-secret-box {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 10px 10px;
}

.totp-confirm-form {
    display: grid;
    gap: 10px;
    align-content: start;
    max-width: none;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--surface-3);
}

.totp-confirm-form .settings-label {
    margin: 0;
}

.totp-confirm-form .settings-note {
    margin: 0;
}

.totp-secret-box {
    display: grid;
    gap: 6px;
    margin: 12px 0;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--surface-3);
}

.totp-secret-box span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.totp-secret-box code {
    color: var(--text);
    font: 700 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}

.recovery-code-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.recovery-code-grid code {
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--text);
    background: var(--surface-3);
    text-align: center;
    font-weight: 900;
}

.security-check-list {
    display: grid;
    gap: 10px;
}

.settings-nav-list-tail {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
}

.settings-nav-icon-muted {
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line-soft);
}

.settings-danger-layout {
    display: grid;
    gap: 20px;
    max-width: 760px;
}

.settings-danger-notice {
    margin: 0;
}

.settings-data-overview {
    padding: 18px 20px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--surface-3);
}

.settings-data-overview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.settings-data-overview-head strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.settings-data-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.settings-data-stat-grid > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--surface);
}

.settings-data-stat-grid dt {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.settings-data-stat-grid dd {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.settings-danger-form {
    max-width: 420px;
}

.settings-danger-check {
    margin-bottom: 4px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--surface);
}

@media (max-width: 900px) {
    .settings-data-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .settings-data-stat-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .security-card-grid {
        grid-template-columns: 1fr;
    }

    .security-card:has(.recovery-code-grid) {
        grid-column: auto;
    }

    .totp-setup-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .auth-grid-shell {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 34px 18px;
    }

    .auth-panel {
        width: 100%;
    }

    .auth-status-strip {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-grid-shell::before,
    .auth-grid-shell .dot,
    .auth-online-dot i {
        animation: none !important;
    }
}

/* Black Jade operations login */
.black-jade-login {
    --bj-auth-card-height: 638px;
    --bj-bg: #060b12;
    --bj-panel: rgba(9, 17, 29, .92);
    --bj-panel-solid: #09111d;
    --bj-border: rgba(137, 164, 199, .2);
    --bj-line: rgba(57, 215, 173, .16);
    --bj-accent: #39d7ad;
    --bj-accent-strong: #22c99d;
    --bj-text: #eef5ff;
    --bj-muted: #78889f;
    --bj-dim: #4d5e74;
    min-width: 320px;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--bj-text);
    background:
        linear-gradient(90deg, rgba(6, 11, 18, .99) 0 42%, rgba(6, 11, 18, .82) 68%, rgba(6, 11, 18, .98)),
        linear-gradient(rgba(57, 215, 173, .027) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 215, 173, .027) 1px, transparent 1px),
        var(--bj-bg);
    background-size: auto, 54px 54px, 54px 54px, auto;
}

.black-jade-login::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 61% 49%, rgba(35, 191, 149, .08), transparent 29%);
}

.bj-topbar {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 82px;
    padding: 0 5vw;
    border-bottom: 1px solid rgba(137, 164, 199, .08);
}

.bj-brand .brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--bj-text);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -.02em;
}

.bj-brand .brand-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(57, 215, 173, .34);
    border-radius: 15px;
    color: #dbfff5;
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .22), transparent 24%),
        linear-gradient(145deg, rgba(57, 215, 173, .24), rgba(9, 17, 29, .78));
    box-shadow:
        0 0 0 5px rgba(57, 215, 173, .04),
        0 16px 36px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .18);
    font-size: 21px;
}

.bj-brand .brand-mark::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    pointer-events: none;
}

.bj-brand .brand-mark-sheen {
    animation-duration: 2.8s;
}

.bj-top-meta {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-right: 0;
    color: #718096;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
}

.bj-system-online {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bj-system-online i,
.bj-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bj-accent);
    box-shadow: 0 0 0 5px rgba(57, 215, 173, .09);
    animation: bj-status-pulse 1.9s ease-in-out infinite;
}

.bj-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(430px, 43%) minmax(250px, 22%) minmax(390px, 35%);
    min-height: 100vh;
    padding-top: 82px;
}

.bj-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 5vh 2vw 10vh 5vw;
}

.bj-hero-copy {
    max-width: 650px;
}

.bj-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--bj-accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .17em;
}

.bj-kicker i {
    display: block;
    width: 31px;
    height: 1px;
    background: currentColor;
}

.bj-hero h1 {
    margin: 24px 0 0;
    color: var(--bj-text);
    font-size: clamp(49px, 5.2vw, 82px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.065em;
}

.bj-hero h1 em {
    display: inline-block;
    color: var(--bj-accent);
    font-style: normal;
}

.bj-hero-copy > p {
    max-width: 510px;
    margin: 24px 0 0;
    color: var(--bj-muted);
    font-size: 14px;
    line-height: 1.9;
}

.bj-metrics {
    display: flex;
    gap: clamp(26px, 3.8vw, 58px);
    margin-top: 48px;
}

.bj-metrics strong,
.bj-metrics span {
    display: block;
}

.bj-metrics strong {
    color: #e6f2f2;
    font-size: 17px;
    font-weight: 850;
}

.bj-metrics span {
    margin-top: 6px;
    color: #51627a;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .11em;
}

.bj-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    overflow: hidden;
}

.bj-control-ring {
    position: relative;
    width: min(36vw, 535px);
    min-width: 360px;
    aspect-ratio: 1;
    transform: translateX(8%);
}

.bj-ring,
.bj-radar,
.bj-core {
    position: absolute;
    border-radius: 50%;
}

.bj-ring {
    border: 1px solid var(--bj-line);
}

.bj-ring-outer {
    inset: 2%;
    border-top-color: var(--bj-accent);
    border-left-color: rgba(57, 215, 173, .5);
    box-shadow: -9px 0 23px rgba(57, 215, 173, .05);
    animation: bj-rotate 30s linear infinite;
}

.bj-ring-middle {
    inset: 13%;
    border-color: rgba(57, 215, 173, .12);
    border-right-color: rgba(57, 215, 173, .45);
    animation: bj-rotate-reverse 22s linear infinite;
}

.bj-ring-inner {
    inset: 27%;
    border-style: dashed;
    border-color: rgba(57, 215, 173, .2);
    animation: bj-rotate 18s linear infinite;
}

.bj-radar {
    inset: 20%;
    background: conic-gradient(from 12deg, transparent 0 76%, rgba(57, 215, 173, .12) 94%, transparent);
    animation: bj-rotate 5.5s linear infinite;
}

.bj-core {
    inset: 36%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(57, 215, 173, .28);
    border-radius: 24%;
    background: radial-gradient(circle, rgba(57, 215, 173, .16), rgba(8, 28, 28, .32) 55%, transparent 72%);
    transform: rotate(45deg);
}

.bj-core span {
    color: #75e7c9;
    font-size: 42px;
    font-weight: 300;
    text-shadow: 0 0 24px rgba(57, 215, 173, .22);
    transform: rotate(-45deg);
}

.bj-orbit-dot {
    position: absolute;
    top: 13%;
    left: 13%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64edca;
    box-shadow: 0 0 18px var(--bj-accent);
}

.bj-vertical-label {
    position: absolute;
    right: 10%;
    bottom: 11%;
    color: #34495e;
    font-size: 8px;
    letter-spacing: .15em;
    writing-mode: vertical-rl;
}

.bj-auth-zone {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 94px 5vw 72px 2vw;
}

.bj-auth-card {
    width: min(410px, 100%);
    height: auto;
    min-height: min(638px, calc(100vh - 180px));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 35px 36px 28px;
    border: 1px solid var(--bj-border);
    border-radius: 16px;
    background: var(--bj-panel);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .02);
    backdrop-filter: blur(20px);
    overflow: visible;
}

.bj-auth-online {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bj-accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
}

.bj-auth-card h2 {
    margin: 19px 0 0;
    color: var(--bj-text);
    font-size: 29px;
    font-weight: 850;
    letter-spacing: -.045em;
}

.bj-auth-subtitle {
    margin: 8px 0 0;
    color: var(--bj-muted);
    font-size: 12px;
    line-height: 1.7;
}

.bj-auth-message-slot {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 0;
    margin: 13px 0 0;
}

.bj-auth-message-slot:not(:has(.alert)) {
    display: none;
    margin: 0;
}

.bj-auth-message-slot:has(.alert) {
    min-height: 42px;
}

.bj-auth-message-slot .alert {
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
}

.bj-auth-tabs {
    display: flex;
    gap: 24px;
    margin: 17px 0 18px;
    border-bottom: 1px solid rgba(139, 164, 197, .16);
}

.bj-auth-tab {
    position: relative;
    padding: 0 0 11px;
    border: 0;
    color: #67778d;
    background: transparent;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.bj-auth-tab.active {
    color: var(--bj-text);
}

.bj-auth-tab.active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--bj-accent);
}

.bj-auth-panel-shell {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

.bj-auth-panel-shell[hidden] {
    display: none;
}

.black-jade-login .bj-auth-form {
    margin-top: 21px;
}

.black-jade-login .bj-auth-tabs + [data-auth-panel="password"] .bj-auth-form {
    margin-top: 0;
}

.black-jade-login .bj-auth-form .field {
    margin-bottom: 14px;
}

.black-jade-login .bj-auth-form .field label {
    display: block;
    margin: 0 0 7px;
    color: #7b8ba1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
}

.black-jade-login .bj-auth-form input {
    width: 100%;
    height: 47px;
    padding: 0 14px;
    border: 1px solid rgba(139, 164, 197, .2);
    border-radius: 9px;
    outline: 0;
    color: var(--bj-text);
    background: rgba(3, 9, 18, .52);
    font-size: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.black-jade-login .bj-auth-form input::placeholder {
    color: #526177;
}

.black-jade-login .bj-auth-form input:focus {
    border-color: var(--bj-accent);
    background: rgba(4, 12, 22, .78);
    box-shadow: 0 0 0 3px rgba(57, 215, 173, .09);
}

.black-jade-login .bj-auth-form input:disabled {
    color: #8190a4;
    background: rgba(21, 31, 45, .52);
}

.black-jade-login .bj-auth-form .field-help {
    display: block;
    margin-top: 6px;
    color: #5d6d83;
    font-size: 10px;
    line-height: 1.55;
}

.bj-form-meta {
    display: flex;
    justify-content: space-between;
    margin: 15px 0 20px;
    color: #68788e;
    font-size: 9px;
    letter-spacing: .03em;
}

.black-jade-login .bj-submit {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 9px;
    color: #04140f;
    background: var(--bj-accent);
    box-shadow: 0 13px 30px rgba(57, 215, 173, .17);
    font-size: 13px;
    font-weight: 900;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.black-jade-login .bj-submit:hover {
    background: #4ae0ba;
    box-shadow: 0 16px 34px rgba(57, 215, 173, .22);
    transform: translateY(-1px);
}

.black-jade-login .bj-submit:active {
    transform: translateY(0);
}

.bj-cancel-form {
    margin-top: 10px;
}

.black-jade-login .bj-cancel-form .btn {
    width: 100%;
    border-color: rgba(139, 164, 197, .2);
    color: #9ba9bc;
    background: rgba(4, 10, 18, .4);
}

.bj-sms-reserved {
    min-height: 352px;
}

.bj-sms-reserved[hidden] {
    display: none;
}

.bj-sms-panel {
    padding-top: 0;
}

.bj-sms-panel-head {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(57, 215, 173, .16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 92% 0%, rgba(57, 215, 173, .16), transparent 34%),
        linear-gradient(135deg, rgba(57, 215, 173, .09), rgba(20, 31, 48, .28));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.bj-sms-panel-head::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -48px;
    width: 136px;
    height: 136px;
    border: 1px solid rgba(57, 215, 173, .12);
    border-radius: 50%;
}

.bj-sms-eyebrow {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-bottom: 9px;
    color: var(--bj-accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
}

.bj-sms-eyebrow i,
.bj-sms-hintbar i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--bj-accent);
    box-shadow: 0 0 0 5px rgba(57, 215, 173, .1);
}

.bj-sms-panel strong {
    display: block;
    color: var(--bj-text);
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -.04em;
}

.bj-sms-panel p {
    max-width: 270px;
    margin: 7px 0 0;
    color: var(--bj-muted);
    font-size: 12px;
    line-height: 1.65;
}

.bj-sms-state {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid rgba(139, 164, 197, .16);
    border-radius: 999px;
    color: #9ba9bc;
    background: rgba(5, 11, 20, .52);
    font-size: 10px;
    font-weight: 850;
}

.bj-sms-state.is-ready {
    border-color: rgba(57, 215, 173, .26);
    color: var(--bj-accent);
    background: rgba(57, 215, 173, .08);
}

.bj-sms-state.is-offline {
    border-color: rgba(255, 110, 132, .26);
    color: #ff8ea1;
    background: rgba(255, 110, 132, .09);
}

.bj-sms-form {
    display: grid;
    gap: 13px;
}

.black-jade-login .bj-sms-form .field {
    margin: 0;
}

.bj-field-compact label {
    margin-bottom: 7px;
}

.bj-sms-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 10px;
}

.black-jade-login .bj-sms-code-row .btn {
    min-height: 47px;
    justify-content: center;
    border-color: rgba(57, 215, 173, .18);
    color: #d8fff4;
    background: rgba(57, 215, 173, .1);
    font-weight: 850;
}

.black-jade-login .bj-sms-code-row .btn:hover {
    border-color: rgba(57, 215, 173, .38);
    background: rgba(57, 215, 173, .16);
}

.black-jade-login .bj-sms-code-row .btn:disabled {
    color: #65758b;
    background: rgba(139, 164, 197, .06);
    cursor: not-allowed;
}

.bj-sms-hintbar {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 1px;
    padding: 10px 12px;
    border: 1px solid rgba(139, 164, 197, .12);
    border-radius: 12px;
    color: #74849a;
    background: rgba(5, 12, 22, .44);
    font-size: 10px;
    font-weight: 750;
}

.bj-sms-hintbar span:first-child {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.black-jade-login .bj-sms-disabled {
    width: 100%;
    height: 43px;
    border-color: rgba(139, 164, 197, .14);
    color: #68788e;
    background: rgba(3, 9, 18, .42);
    cursor: not-allowed;
}

.bj-sms-actions {
    display: block;
    width: 100%;
    margin-top: 2px;
}

.bj-sms-form .login-slide-verify {
    margin-top: 6px;
}

.bj-sms-actions .btn {
    justify-content: center;
}

.bj-auth-log {
    margin: auto 0 0;
    padding-top: 18px;
    color: #46566c;
    text-align: center;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .13em;
    flex-shrink: 0;
}

.login-slide-verify {
    width: 100%;
    margin: 2px 0 14px;
}

.login-slide-track {
    position: relative;
    height: 46px;
    overflow: hidden;
    border: 1px solid rgba(139, 164, 197, .16);
    border-radius: 999px;
    background: rgba(4, 10, 18, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    user-select: none;
    touch-action: none;
}

.login-slide-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(57, 215, 173, .22), rgba(57, 215, 173, .42));
    transition: width .16s ease;
}

.login-slide-thumb {
    position: absolute;
    z-index: 2;
    top: 4px;
    left: 4px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    color: #04140f;
    background: var(--bj-accent);
    box-shadow: 0 10px 22px rgba(57, 215, 173, .2);
    font-size: 22px;
    font-weight: 900;
    transition: box-shadow .18s ease, background .18s ease;
}

.login-slide-text {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #6d7d93;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    pointer-events: none;
}

.login-slide-verify.is-verified .login-slide-track {
    border-color: rgba(57, 215, 173, .36);
}

.login-slide-verify.is-verified .login-slide-thumb {
    background: #6ef0cb;
    box-shadow: 0 0 0 5px rgba(57, 215, 173, .1), 0 12px 28px rgba(57, 215, 173, .2);
}

.login-slide-verify.is-verified .login-slide-text {
    color: #bdf9e8;
}

.login-slide-verify.is-shaking .login-slide-track {
    animation: slide-shake .28s ease-in-out;
    border-color: rgba(255, 110, 132, .38);
}

.device-sms-panel {
    margin-top: 20px;
}

.device-sms-card {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid rgba(57, 215, 173, .16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(57, 215, 173, .14), transparent 34%),
        rgba(5, 12, 22, .58);
}

.device-sms-card span {
    color: var(--bj-accent);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
}

.device-sms-card strong {
    display: block;
    margin-top: 9px;
    color: var(--bj-text);
    font-size: 20px;
}

.device-sms-card p {
    margin: 7px 0 0;
    color: var(--bj-muted);
    font-size: 12px;
    line-height: 1.65;
}

@keyframes bj-status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.84); }
}

@keyframes brand-sheen {
    0%, 38% { left: -72%; opacity: 0; }
    48% { opacity: .9; }
    68%, 100% { left: 118%; opacity: 0; }
}

@keyframes slide-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@keyframes bj-rotate {
    to { transform: rotate(360deg); }
}

@keyframes bj-rotate-reverse {
    to { transform: rotate(-360deg); }
}

:root[data-theme="light"] .black-jade-login {
    --bj-bg: #eef3f7;
    --bj-panel: rgba(255, 255, 255, .92);
    --bj-panel-solid: #ffffff;
    --bj-border: rgba(56, 79, 105, .16);
    --bj-line: rgba(22, 156, 124, .2);
    --bj-accent: #08a77e;
    --bj-accent-strong: #078e6c;
    --bj-text: #132238;
    --bj-muted: #69788d;
    --bj-dim: #8a98aa;
    background:
        linear-gradient(90deg, rgba(243, 247, 250, .98) 0 42%, rgba(234, 242, 244, .82) 68%, rgba(246, 248, 250, .98)),
        linear-gradient(rgba(14, 148, 116, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 148, 116, .04) 1px, transparent 1px),
        var(--bj-bg);
    background-size: auto, 54px 54px, 54px 54px, auto;
}

:root[data-theme="light"] .black-jade-login::before {
    background: radial-gradient(circle at 61% 49%, rgba(12, 166, 127, .1), transparent 30%);
}

:root[data-theme="light"] .bj-topbar {
    border-bottom-color: rgba(55, 75, 99, .09);
}

:root[data-theme="light"] .bj-brand .brand,
:root[data-theme="light"] .bj-hero h1,
:root[data-theme="light"] .bj-metrics strong,
:root[data-theme="light"] .bj-auth-card h2,
:root[data-theme="light"] .bj-auth-tab.active,
:root[data-theme="light"] .bj-sms-reserved strong {
    color: var(--bj-text);
}

:root[data-theme="light"] .bj-brand .brand-mark {
    border-color: rgba(31, 58, 84, .12);
    color: #fff;
    background: #17324e;
}

:root[data-theme="light"] .bj-auth-card {
    box-shadow: 0 30px 76px rgba(34, 57, 78, .12), inset 0 1px 0 rgba(255, 255, 255, .7);
}

:root[data-theme="light"] .black-jade-login .bj-auth-form input {
    border-color: rgba(56, 79, 105, .17);
    color: var(--bj-text);
    background: rgba(247, 249, 251, .88);
}

:root[data-theme="light"] .black-jade-login .bj-auth-form input:focus {
    border-color: var(--bj-accent);
    background: #fff;
}

:root[data-theme="light"] .black-jade-login .bj-submit {
    color: #fff;
    background: var(--bj-accent);
}

:root[data-theme="light"] .bj-sms-panel-head {
    border-color: rgba(8, 167, 126, .16);
    background:
        radial-gradient(circle at 92% 0%, rgba(8, 167, 126, .12), transparent 34%),
        linear-gradient(135deg, rgba(8, 167, 126, .07), rgba(255, 255, 255, .84));
}

:root[data-theme="light"] .bj-sms-state {
    color: #5f6f83;
    background: rgba(255, 255, 255, .74);
}

:root[data-theme="light"] .bj-sms-state.is-ready {
    color: var(--bj-accent-strong);
    background: rgba(8, 167, 126, .08);
}

:root[data-theme="light"] .black-jade-login .bj-sms-code-row .btn {
    color: var(--bj-accent-strong);
    background: rgba(8, 167, 126, .08);
}

:root[data-theme="light"] .bj-sms-hintbar {
    color: #65758b;
    background: rgba(247, 249, 251, .8);
}

@media (max-width: 1180px) {
    .bj-shell {
        grid-template-columns: minmax(390px, 48%) minmax(360px, 52%);
    }

    .bj-hero {
        padding-right: 4vw;
    }

    .bj-hero h1 {
        font-size: clamp(44px, 6.4vw, 68px);
    }

    .bj-visual {
        position: absolute;
        z-index: -1;
        top: 19%;
        left: 29%;
        width: 40%;
        height: 62%;
        opacity: .34;
    }

    .bj-control-ring {
        min-width: 340px;
        transform: none;
    }

    .bj-auth-zone {
        grid-column: 2;
        padding-left: 4vw;
    }
}

@media (max-width: 760px) {
    .black-jade-login {
        overflow-y: auto;
    }

    .bj-topbar {
        height: 70px;
        padding: 0 20px;
    }

    .bj-brand .brand-mark {
        width: 36px;
        height: 36px;
    }

    .bj-brand .brand-text {
        max-width: 150px;
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bj-top-meta,
    .bj-hero-copy,
    .bj-metrics,
    .bj-visual {
        display: none;
    }

    .bj-shell {
        display: block;
        min-height: 100vh;
        padding-top: 70px;
    }

    .bj-hero {
        display: none;
    }

    .bj-auth-zone {
        display: grid;
        min-height: calc(100vh - 70px);
        padding: 28px 18px 42px;
    }

    .bj-auth-card {
        width: min(430px, 100%);
        height: auto;
        min-height: auto;
        padding: 30px 25px 24px;
    }

    .bj-sms-code-row {
        grid-template-columns: 1fr;
    }

    .bj-sms-hintbar {
        align-items: flex-start;
        flex-direction: column;
    }

}

@media (max-height: 720px) and (min-width: 761px) {
    .bj-shell {
        min-height: 720px;
    }

    .black-jade-login {
        overflow-y: auto;
    }

    .bj-auth-zone {
        padding-top: 82px;
        padding-bottom: 34px;
    }

    .bj-auth-card {
        min-height: auto;
        padding-top: 28px;
        padding-bottom: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bj-control-ring *,
    .bj-status-dot,
    .bj-system-online i,
    .brand-mark-sheen,
    .login-slide-verify.is-shaking .login-slide-track {
        animation: none !important;
    }
}