/* ══════════════════════════════════════════════════════════════════════
   LILBOT PANEL — V47 "AURORA" · Layer 1: COMPONENTS
   Lineage: OBSIDIAN DAWN v39 → SECOND DAWN v44 → V47 AURORA (full rebuild,
   not a reskin: new shell, new icon system, real sheets/dialogs, grouped
   stat clusters, kept data contracts).
   ──────────────────────────────────────────────────────────────────────
   Rules of the material:
   · Glass is reserved for CHROME (topbar, rail, dock, sheets, palette)
     and hero surfaces. Content cards stay glass-1 — hierarchy over shine.
   · Depth = blur budget + 1px top edge light + soft layered shadow.
   · Motion: 120/220/360ms on two easings; nothing longer.
   · Every state has a face: hover, active, focus, disabled, empty,
     loading, error.
   ══════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    color: var(--ink);
    direction: rtl;
    min-height: 100dvh;
    line-height: 1.7;
    font-size: var(--fs-base);
    background:
        radial-gradient(1100px 620px at 88% -12%, rgba(255, 110, 40, 0.07), transparent 62%),
        radial-gradient(900px 640px at -8% 112%, rgba(255, 110, 40, 0.05), transparent 60%),
        linear-gradient(180deg, var(--void), var(--bg-2) 58%, var(--bg-2));
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

::selection { background: var(--amber-soft); color: var(--ink); }

/* ── Scrollbars: thin glass ───────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--glass-border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--glass-border-strong); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Focus: one visible ring everywhere ───────────────────────────── */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
    position: fixed; top: calc(var(--safe-t) + 8px); right: 8px;
    z-index: var(--z-toast); background: var(--amber); color: var(--amber-ink);
    padding: 8px 16px; border-radius: var(--r-pill); font-weight: 700;
    font-size: var(--fs-sm); transform: translateY(-64px); opacity: 0;
    transition: transform var(--t-med) var(--ease-out), opacity var(--t-med);
}
.skip-link:focus-visible { transform: none; opacity: 1; }

/* ═══════════════════════ AMBIENT BACKGROUND ═══════════════════════ */
.ambient {
    position: fixed; inset: 0; z-index: var(--z-bg);
    overflow: hidden; pointer-events: none;
}
.ambient .blob {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: 0.45; will-change: transform;
}
.ambient .b1 {
    width: 44vmax; height: 44vmax; top: -18vmax; right: -10vmax;
    background: radial-gradient(circle at 35% 35%,
        rgba(255, 110, 40, 0.15), transparent 65%);
    animation: drift1 28s var(--ease-out) infinite alternate;
}
.ambient .b2 {
    width: 38vmax; height: 38vmax; bottom: -16vmax; left: -8vmax;
    background: radial-gradient(circle at 60% 40%,
        rgba(255, 145, 60, 0.07), transparent 65%);
    animation: drift2 34s var(--ease-out) infinite alternate;
}
.ambient .b3 {
    width: 26vmax; height: 26vmax; top: 34%; left: 42%;
    background: radial-gradient(circle at 50% 50%,
        rgba(242, 242, 243, 0.05), transparent 66%);
    animation: drift3 40s var(--ease-out) infinite alternate;
}
.ambient .noise {
    position: absolute; inset: -50%; opacity: 0.034;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] .ambient .blob { opacity: 0.32; filter: saturate(0.85); }
[data-theme="light"] .ambient .noise { opacity: 0.03; }

@keyframes drift1 { to { transform: translate(-9vmax, 7vmax) scale(1.12); } }
@keyframes drift2 { to { transform: translate(8vmax, -6vmax) scale(1.08); } }
@keyframes drift3 { to { transform: translate(-6vmax, -8vmax) scale(1.15); } }

/* legacy aurora shim — pages rendered from an older cache */
.aurora span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.4; }

/* ═══════════════════════ SVG ICON SYSTEM ══════════════════════════ */
.icn {
    width: 1.15em; height: 1.15em; flex: none;
    display: inline-block; vertical-align: -0.22em;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.icn.fill { fill: currentColor; stroke: none; }

/* ═══════════════════════ TOPBAR (floating island) ═════════════════ */
.topbar {
    position: sticky; top: calc(var(--safe-t) + 8px);
    z-index: var(--z-sticky);
    margin: calc(var(--safe-t) + 8px) 12px 0;
    height: var(--topbar-h);
    display: flex; align-items: center; gap: var(--s-3);
    padding: 0 var(--s-4);
    background: var(--glass-3);
    backdrop-filter: blur(var(--blur-3)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.4);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--e-2), var(--glass-edge-strong);
}
.topbar .brand {
    display: flex; align-items: center; gap: var(--s-3);
    font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.2px;
    min-width: 0; text-decoration: none; color: var(--ink);
}
.topbar .brand span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    /* V68: the ellipsis clip-box includes padding — growing it vertically
       guarantees Persian ink (ascenders, dot rows) never touches the clip
       edge; the negative margin keeps the brand row pixel-identical. */
    padding-block: 3px; margin-block: -3px;
}
.topbar .logo {
    width: 36px; height: 36px; flex: none;
    display: grid; place-items: center;
    background:
        radial-gradient(120% 120% at 30% 25%,
            rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02) 55%),
        linear-gradient(140deg, var(--amber-2), var(--amber) 55%, var(--amber-deep));
    border-radius: 12px; color: var(--amber-ink);
    box-shadow: var(--e-1), var(--glass-edge-strong),
                0 4px 18px rgba(255, 110, 40, 0.28);
}
.topbar .logo .icn { width: 20px; height: 20px; stroke-width: 2; }
.topbar .spacer { flex: 1; }

.icon-btn {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    background: var(--glass-1); color: var(--ink-2);
    border: 1px solid var(--glass-border); border-radius: 12px;
    cursor: pointer; font-size: 16px;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-spring);
}
.icon-btn:hover { background: var(--glass-4); border-color: var(--glass-border-strong); transform: translateY(-1px); }
.icon-btn:active { transform: scale(0.94); }

.search-chip {
    display: flex; align-items: center; gap: var(--s-2);
    height: 38px; padding: 0 12px;
    background: var(--glass-1); border: 1px solid var(--glass-border);
    border-radius: 12px; color: var(--smoke);
    cursor: pointer; font: inherit; font-size: var(--fs-sm);
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast), color var(--t-fast);
    min-width: 0;
}
.search-chip:hover { background: var(--glass-4); color: var(--ink-2); border-color: var(--glass-border-strong); }
.search-chip .kbd {
    font-family: var(--mono); font-size: 10.5px; line-height: 1;
    padding: 4px 6px; border-radius: 6px;
    background: var(--glass-2); border: 1px solid var(--glass-border);
    color: var(--mist); white-space: nowrap;
}
@media (max-width: 640px) {
    .search-chip .kbd { display: none; }
    .search-chip .q { display: none; }
}
.search-chip span.q { white-space: nowrap; }

.theme-toggle, .topbar-logout {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    background: var(--glass-1); color: var(--ink-2);
    border: 1px solid var(--glass-border);
    border-radius: 12px; cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast) var(--ease-spring),
                color var(--t-fast);
}
.theme-toggle:hover, .topbar-logout:hover { background: var(--glass-4); transform: translateY(-1px); color: var(--ink); }
.theme-toggle:active, .topbar-logout:active { transform: scale(0.94); }
.topbar-logout:hover { color: var(--danger-text); background: var(--danger-soft); border-color: transparent; }

/* theme icon state: dark shows sun (→light), light shows moon (→dark) */
.theme-toggle span, .drawer-list .di-ico span { display: inline-grid; place-items: center; }
.theme-toggle .icon-moon, .drawer-list .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun,
[data-theme="light"] .drawer-list .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon,
[data-theme="light"] .drawer-list .icon-moon { display: inline-grid; }

/* ═══════════════════════ RAIL (desktop sidebar) ═══════════════════ */
.rail {
    position: fixed; top: calc(var(--safe-t) + 84px); bottom: calc(var(--safe-b) + 16px);
    right: 12px; width: var(--rail-w); z-index: var(--z-dock);
    display: none; flex-direction: column; gap: 4px;
    padding: var(--s-3);
    background: var(--glass-3);
    backdrop-filter: blur(var(--blur-3)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.4);
    border: 1px solid var(--glass-border); border-radius: var(--r-xl);
    box-shadow: var(--e-2), var(--glass-edge-strong);
    overflow: hidden auto;
    transition: width var(--t-med) var(--ease-out);
}
.rail a {
    position: relative; display: flex; align-items: center; gap: 12px;
    height: 46px; padding: 0 12px; flex: none;
    border-radius: 14px; text-decoration: none;
    color: var(--mist); font-size: var(--fs-sm); font-weight: 600;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast);
}
.rail a .ri {
    width: 26px; height: 26px; display: grid; place-items: center;
    flex: none; color: var(--mist);
    transition: color var(--t-fast), transform var(--t-med) var(--ease-spring);
}
.rail a .ri .icn { width: 20px; height: 20px; }
.rail a .rl {
    opacity: 0; transform: translateX(6px);
    transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
    overflow: hidden; text-overflow: ellipsis;
}
.rail a:hover { background: var(--glass-1); color: var(--ink); }
.rail a:hover .ri { color: var(--ink); transform: translateY(-1px); }
.rail a.active { background: linear-gradient(120deg, var(--amber-soft), transparent 80%); color: var(--amber-text); }
.rail a.active .ri { color: var(--amber-text); }
.rail a.active::before {
    content: ""; position: absolute; inset-inline-start: -10px; top: 50%;
    width: 4px; height: 22px; transform: translateY(-50%);
    border-radius: 99px; background: var(--amber);
    box-shadow: 0 0 12px var(--amber-glow);
}
.rail:hover { width: var(--rail-w-open); }
.rail:hover a .rl { opacity: 1; transform: none; }
.rail .rail-gap { flex: 1; }

/* ═══════════════════════ BOTTOM DOCK (mobile) ═════════════════════ */
.dock {
    position: fixed; z-index: var(--z-dock);
    bottom: calc(var(--safe-b) + 10px); left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: stretch; gap: 2px;
    padding: 6px; width: min(94vw, 520px);
    background: var(--glass-3);
    backdrop-filter: blur(var(--blur-3)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.5);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: var(--sh-pop), var(--glass-edge-strong);
}
.dock a, .dock .dock-more {
    position: relative; flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 2px 7px; border-radius: 18px;
    text-decoration: none; color: var(--smoke);
    background: none; border: 0; font: inherit; cursor: pointer;
    transition: color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}
.dock a .bn-icon, .dock .dock-more .bn-icon {
    width: 24px; height: 24px; display: grid; place-items: center;
    transition: transform var(--t-med) var(--ease-spring), color var(--t-fast);
    opacity: 0.9;
}
.dock a .bn-icon .icn, .dock .dock-more .bn-icon .icn {
    width: 22px; height: 22px; stroke-width: 1.9;
}
.dock a .bn-label, .dock .dock-more .bn-label {
    font-size: 10px; font-weight: 700; letter-spacing: -0.1px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dock a.active { color: var(--amber-text); background: var(--amber-soft); }
.dock a.active .bn-icon { transform: translateY(-2px) scale(1.1); color: var(--amber-text); }
.dock a:active .bn-icon, .dock .dock-more:active .bn-icon { transform: scale(0.9); }
.dock .dock-more { color: var(--mist); }
.dock .dock-more .bn-icon { color: var(--mist); }

/* ═══════════════════════ SHELL / PAGE SCAFFOLD ════════════════════ */
.shell {
    position: relative; z-index: var(--z-content);
    width: 100%; max-width: var(--content-max);
    margin: 0 auto; padding: var(--s-5) 14px calc(var(--dock-h) + var(--safe-b) + 46px);
}
@media (min-width: 1024px) {
    .rail { display: flex; }
    .dock { display: none; }
    .shell {
        padding: var(--s-6) 24px 48px;
        max-width: calc(var(--content-max) + var(--rail-w) + 24px);
        /* RTL: rail sits on the right → pad the right side */
        padding-right: calc(var(--rail-w) + 38px);
    }
}

/* breadcrumb for deep pages (گروه‌ها / گروه · user paths) */
.crumb {
    display: flex; align-items: center; gap: 7px;
    margin: var(--s-2) 2px var(--s-2);
    font-size: var(--fs-xs); color: var(--smoke);
}
.crumb a {
    color: var(--mist); text-decoration: none; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px 4px 6px; border-radius: var(--r-pill);
    transition: color var(--t-fast), background var(--t-fast);
}
.crumb a:hover { color: var(--amber-text); background: var(--amber-soft); }
.crumb .c-sep { opacity: 0.55; }
.crumb .c-here { color: var(--ink-2); font-weight: 600; }

.page-head {
    display: flex; align-items: center; gap: var(--s-4);
    margin: 0 0 var(--s-5);
}
.page-head .p-icon {
    width: 52px; height: 52px; flex: none;
    display: grid; place-items: center;
    color: var(--amber-text);
    background: var(--glass-2); border: 1px solid var(--glass-border);
    border-radius: 17px; box-shadow: var(--e-1), var(--glass-edge);
}
.page-head .p-icon .icn { width: 26px; height: 26px; stroke-width: 1.7; }
.page-head h1 {
    font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.4px;
    line-height: 1.25;
}
.page-head .meta { color: var(--mist); font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.live-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: var(--success);
    box-shadow: 0 0 0 0 rgba(62, 222, 158, 0.5);
    animation: live-pulse 2.4s infinite;
    vertical-align: 1px;
}
/* V81 — down state for the health card dot (stale/dead bot heartbeat). */
.live-dot.is-down {
    background: var(--danger);
    animation: none;
    box-shadow: none;
}
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(62, 222, 158, 0.45); }
    70% { box-shadow: 0 0 0 7px rgba(62, 222, 158, 0); }
    100% { box-shadow: 0 0 0 0 rgba(62, 222, 158, 0); }
}
.page-head .ph-actions { margin-inline-start: auto; display: flex; gap: var(--s-2); }

/* legacy page-title wrapper maps onto the new head */
.page-title { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-2) 0 var(--s-5); }
.page-title .p-icon {
    width: 52px; height: 52px; display: grid; place-items: center;
    background: var(--glass-2); border: 1px solid var(--glass-border);
    border-radius: 17px; box-shadow: var(--e-1), var(--glass-edge);
}
.page-title h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.4px; }
.page-title .meta { color: var(--mist); font-size: var(--fs-sm); }

/* ═══════════════════════ SECTIONS ════════════════════════════════ */
.section { margin-bottom: var(--s-6); }
.section > h2 {
    display: flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.2px;
    margin: 0 2px var(--s-4);
    cursor: pointer; user-select: none;
    border-radius: var(--r-sm);
}
.section > h2 .h-icn { color: var(--amber-text); display: inline-grid; place-items: center; }
.section > h2 .h-icn .icn { width: 19px; height: 19px; }
.section > h2 .h-pill {
    margin-inline-start: auto; font-size: var(--fs-xs); font-weight: 600;
    color: var(--mist); background: var(--glass-1);
    border: 1px solid var(--glass-border);
    padding: 4px 10px; border-radius: var(--r-pill);
}
.section > h2.section-toggle::after {
    content: "▾"; margin-inline-start: 8px; color: var(--smoke);
    transition: transform var(--t-med) var(--ease-out);
    font-size: var(--fs-sm);
}
.section.collapsed > h2.section-toggle::after { transform: rotate(-90deg); }
.section.collapsed > *:not(h2):not(.page-head) { display: none; }

/* ═══════════════════════ CARDS ═══════════════════════════════════ */
.cards {
    display: grid; gap: var(--s-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px)  { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.card {
    position: relative; overflow: hidden;
    background: var(--glass-1);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    box-shadow: var(--e-1), var(--glass-edge);
    padding: var(--s-4);
    display: flex; flex-direction: column; gap: 6px;
    transition: transform var(--t-med) var(--ease-spring),
                border-color var(--t-fast), box-shadow var(--t-med) var(--ease-out),
                background var(--t-fast);
}
.card::after { /* sheen sweep on hover */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%,
        rgba(255, 255, 255, 0.07) 48%, transparent 62%);
    transform: translateX(120%);
    transition: transform 0.9s var(--ease-out);
    pointer-events: none;
}
.card:hover {
    transform: translateY(-3px);
    border-color: var(--glass-border-strong);
    background: var(--glass-2);
    box-shadow: var(--e-2), var(--glass-edge);
}
.card:hover::after { transform: translateX(-120%); }
.card:active { transform: translateY(-1px) scale(0.99); }

.card .icon {
    width: 40px; height: 40px; display: grid; place-items: center;
    color: var(--ink-2); margin-bottom: 2px;
    background: var(--glass-2); border: 1px solid var(--glass-border);
    border-radius: 13px; box-shadow: var(--glass-edge);
}
.card .icon .icn { width: 20px; height: 20px; }
.card .num {
    font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.6px;
    line-height: 1.15; font-variant-numeric: tabular-nums;
}
.card .label { color: var(--mist); font-size: var(--fs-sm); font-weight: 500; }
.card .spark { margin-top: 4px; }

/* tone modifiers — color the icon chip, whisper the tint */
.card.tone-amber .icon, .kpi.is-amber .k-ico { background: var(--amber-soft); color: var(--amber-text); border-color: transparent; }
.card.tone-teal .icon   { background: var(--teal-soft);   color: var(--teal-text);   border-color: transparent; }
.card.tone-violet .icon { background: var(--violet-soft); color: var(--violet-text); border-color: transparent; }
.card.tone-rose .icon   { background: var(--rose-soft);   color: var(--rose-text);   border-color: transparent; }
.card.tone-sky .icon    { background: var(--sky-soft);    color: var(--sky-text);    border-color: transparent; }
.card.tone-danger .icon { background: var(--danger-soft); color: var(--danger-text); border-color: transparent; }
.card.tone-success .icon{ background: var(--success-soft);color: var(--success-text);border-color: transparent; }
.card.tone-warn .icon   { background: var(--warn-soft);   color: var(--warn-text);   border-color: transparent; }

/* hero KPI row */
.kpis { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) { .kpis { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }
.kpi {
    position: relative; overflow: hidden;
    padding: var(--s-5);
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--e-2), var(--glass-edge);
    transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med), border-color var(--t-fast);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--e-2), var(--sh-glow); border-color: var(--glass-border-strong); }
.kpi .k-top { display: flex; align-items: center; gap: var(--s-2); color: var(--mist); font-size: var(--fs-sm); font-weight: 600; }
.kpi .k-top .k-ico {
    width: 34px; height: 34px; display: grid; place-items: center;
    color: var(--ink-2);
    border-radius: 11px;
    background: var(--glass-2); border: 1px solid var(--glass-border);
}
.kpi .k-top .k-ico .icn { width: 18px; height: 18px; }
.kpi .k-num {
    font-size: clamp(25px, 5vw, 33px); font-weight: 900; letter-spacing: -0.8px;
    margin-top: var(--s-2); font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.kpi .k-sub { color: var(--smoke); font-size: var(--fs-xs); margin-top: 2px; }
.kpi .spark { position: absolute; inset-inline: 0; bottom: 0; height: 44px; opacity: 0.85; pointer-events: none; }
.kpi.is-amber {
    background:
        radial-gradient(130% 150% at 85% -20%, var(--amber-soft), transparent 55%),
        var(--glass-2);
    border-color: rgba(255, 110, 40, 0.28);
}
.kpi.is-amber .k-num { color: var(--amber-text); }

/* ── Stat clusters (dashboard pulse): grouped, not repeated rectangles */
.stat-group {
    background: var(--glass-1);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--e-1), var(--glass-edge);
    padding: var(--s-4);
    min-width: 0;
}
.stat-group > .sg-title {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2);
    margin-bottom: var(--s-3);
}
.stat-group > .sg-title .icn { width: 17px; height: 17px; }
.stat-group.sg-health > .sg-title .icn { color: var(--success-text); }
.stat-group.sg-mod    > .sg-title .icn { color: var(--violet-text); }
.stat-group.sg-content> .sg-title .icn { color: var(--sky-text); }
.sg-grid {
    display: grid; gap: 2px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 480px) { .sg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sg-item {
    padding: 10px 12px; border-radius: var(--r-sm);
    transition: background var(--t-fast);
}
.sg-item:hover { background: var(--glass-1); }
.sg-item .num {
    font-size: 19px; font-weight: 800; letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums; line-height: 1.3;
    display: flex; align-items: baseline; gap: 4px;
}
.sg-item .num .u { font-size: var(--fs-2xs); color: var(--smoke); font-weight: 600; }
.sg-item .lbl { color: var(--mist); font-size: var(--fs-2xs); font-weight: 600; }
.sg-item.is-alert .num { color: var(--danger-text); }
.sg-item.is-good .num { color: var(--success-text); }
.sg-item.is-amberlit .num { color: var(--amber-text); }
.pulse-grid {
    display: grid; gap: var(--s-3);
    grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .pulse-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .pulse-grid { grid-template-columns: repeat(3, 1fr); } }

/* ═══════════════════════ BUTTONS ═════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 44px; padding: 0 var(--s-5);
    border-radius: var(--r-sm); border: 1px solid var(--glass-border);
    background: var(--glass-2); color: var(--ink);
    font: inherit; font-size: var(--fs-sm); font-weight: 700;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    position: relative; overflow: hidden;
    transition: transform var(--t-fast) var(--ease-spring),
                background var(--t-fast), border-color var(--t-fast),
                box-shadow var(--t-fast), color var(--t-fast),
                filter var(--t-fast);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.btn:hover { background: var(--glass-4); border-color: var(--glass-border-strong); transform: translateY(-1px); }
.btn:active { transform: scale(0.97); filter: brightness(1.05); }
.btn:disabled, .btn[disabled] {
    opacity: 0.45; pointer-events: none;
    filter: saturate(0.4);
}
.btn .icn { width: 17px; height: 17px; stroke-width: 2; }
.btn.primary {
    background: linear-gradient(140deg, var(--amber-2), var(--amber) 55%, var(--amber-deep));
    border-color: transparent; color: var(--amber-ink);
    box-shadow: 0 6px 22px rgba(255, 110, 40, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn.primary:hover {
    box-shadow: 0 10px 30px rgba(255, 110, 40, 0.36), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn.info { background: var(--sky-soft); border-color: transparent; color: var(--sky-text); }
.btn.danger { background: var(--danger-soft); border-color: transparent; color: var(--danger-text); }
.btn.success { background: var(--success-soft); border-color: transparent; color: var(--success-text); }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-xs); border-radius: 10px; }
.btn.sm .icn { width: 15px; height: 15px; }
.btn.block { width: 100%; }
.btn.btn-align { align-self: end; margin-bottom: var(--s-4); }
@media (max-width: 639px) { .btn.btn-align { margin-bottom: 0; } }

/* ripple (added by app.js) */
.ripple-ink {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 65%);
    transform: scale(0); animation: ripple 0.55s var(--ease-out) forwards;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

.linklike {
    background: none; border: 0; color: var(--mist);
    font: inherit; font-size: var(--fs-sm); cursor: pointer;
    padding: 8px 10px; border-radius: 10px;
    transition: color var(--t-fast), background var(--t-fast);
}
.linklike:hover { color: var(--danger-text); background: var(--danger-soft); }

/* ═══════════════════════ FORMS ═══════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--s-4); min-width: 0; }
.form-group label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.form-row { display: grid; gap: var(--s-3); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; align-items: end; } }
.fg-auto { grid-column: auto; }
.fg-70 { max-width: 110px; }
.fg-140 { max-width: 150px; }
.fg-160 { max-width: 170px; }
.hint { color: var(--smoke); font-size: var(--fs-xs); line-height: 1.6; }

input, select, textarea {
    width: 100%; min-height: 46px; padding: 10px var(--s-4);
    background: var(--glass-1); color: var(--ink);
    border: 1px solid var(--glass-border); border-radius: var(--r-sm);
    font: inherit; font-size: var(--fs-base);
    transition: border-color var(--t-fast), background var(--t-fast),
                box-shadow var(--t-fast);
    -webkit-appearance: none; appearance: none;
}
select {
    padding-inline-start: var(--s-3); cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23888da0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-inline-end: 34px;
}
select option { background: var(--bg-3); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--smoke); }
input:hover, select:hover, textarea:hover { border-color: var(--glass-border-strong); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-soft);
    background: var(--glass-2);
}
input:user-invalid, textarea:user-invalid { border-color: var(--danger); }
textarea { min-height: 92px; resize: vertical; }
input[type="number"] { font-variant-numeric: tabular-nums; }

/* V56: iOS force-zooms focused inputs smaller than 16px — pin touch
   devices to 16px so the viewport never jumps when a form focuses. */
@media (pointer: coarse) {
    input, select, textarea { font-size: 16px; }
}

/* V56: sticky save row — the settings form runs several screens tall on
   phones; its submit stays thumb-reachable (clears the mobile dock). */
.save-bar {
    position: sticky;
    bottom: calc(var(--dock-h) + var(--safe-b) + 18px);
    z-index: calc(var(--z-sticky) + 1);
}

/* lock the submitter while it works (double-submit guard UI) */
form.locked button[type="submit"], form button[type="submit"][disabled] {
    opacity: 0.55; pointer-events: none; position: relative;
}

/* toggle switch */
.toggle { position: relative; display: inline-block; width: 46px; height: 27px; flex: none; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.toggle .track {
    position: absolute; inset: 0; border-radius: 99px;
    background: var(--glass-4); border: 1px solid var(--glass-border);
    transition: background var(--t-med) var(--ease-out), border-color var(--t-med);
}
.toggle .track::after {
    content: ""; position: absolute; top: 50%; inset-inline-start: 3px;
    width: 21px; height: 21px; border-radius: 50%;
    transform: translateY(-50%);
    background: linear-gradient(160deg, #fff, #cfd3de);
    box-shadow: var(--e-1);
    transition: transform var(--t-med) var(--ease-spring);
}
.toggle input:checked + .track {
    background: linear-gradient(140deg, var(--amber), var(--amber-deep));
    border-color: transparent;
}
.toggle input:checked + .track::after { transform: translateY(-50%) translateX(-19px); }
.toggle input:focus-visible + .track { box-shadow: 0 0 0 3px var(--amber-soft); }

/* range slider */
.slider {
    -webkit-appearance: none; appearance: none; height: 6px;
    background: var(--glass-4); border: 0; border-radius: 99px;
    padding: 0; min-height: 0;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(160deg, #fff, #d8dbe4);
    border: 0; box-shadow: var(--e-1); cursor: grab;
}
.slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; border: 0;
    background: #fff; box-shadow: var(--e-1); cursor: grab;
}

/* ═══════════════════════ TABLES ══════════════════════════════════ */
.table-wrap {
    background: var(--glass-1);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--e-1), var(--glass-edge);
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    position: relative;
}
.table-wrap > table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-wrap th, .table-wrap td {
    padding: 12px 14px; text-align: right;
    font-size: var(--fs-sm); border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.table-wrap th {
    color: var(--mist); font-weight: 700; font-size: var(--fs-xs);
    letter-spacing: 0.2px;
    background: var(--bg-3);
    position: sticky; top: 0; z-index: 2;
    backdrop-filter: blur(var(--blur-1));
    -webkit-backdrop-filter: blur(var(--blur-1));
}
.table-wrap tbody tr { transition: background var(--t-fast); }
.table-wrap tbody tr:hover { background: var(--glass-1); }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
td .cell-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Mobile: rows become cards (data-label supplies the column name) */
@media (max-width: 767px) {
    .table-wrap { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
    .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
    .table-wrap thead { display: none; }
    .table-wrap tbody { display: flex; flex-direction: column; gap: var(--s-3); }
    .table-wrap tr {
        background: var(--glass-1); border: 1px solid var(--glass-border);
        border-radius: var(--r-md); box-shadow: var(--e-1), var(--glass-edge);
        padding: var(--s-2);
    }
    .table-wrap td {
        display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
        border-bottom: 1px dashed var(--line); padding: 9px 12px;
        min-height: 40px;
    }
    .table-wrap td:last-child { border-bottom: 0; }
    .table-wrap td::before {
        content: attr(data-label);
        color: var(--mist); font-size: var(--fs-xs); font-weight: 700; flex: none;
    }
    .table-wrap td:empty { display: none; }
    .table-wrap td .cell-actions { justify-content: flex-end; }
}

/* search field above tables (legacy hook kept, restyled) */
.panel-search {
    width: 100%; min-height: 46px; padding: 10px var(--s-4);
    background: var(--glass-1); color: var(--ink);
    border: 1px solid var(--glass-border); border-radius: var(--r-pill);
    font: inherit; margin-bottom: var(--s-3);
}

/* filter chips (queue + generic) */
.chip-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-4); }
.chip-bar button {
    font: inherit; font-size: var(--fs-xs); font-weight: 700;
    padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer;
    background: var(--glass-1); color: var(--mist);
    border: 1px solid var(--glass-border);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
                transform var(--t-fast) var(--ease-spring);
}
.chip-bar button:hover { color: var(--ink); background: var(--glass-2); }
.chip-bar button:active { transform: scale(0.96); }
.chip-bar button.active {
    background: var(--amber-soft); color: var(--amber-text);
    border-color: rgba(255, 110, 40, 0.35);
}

/* ═══════════════════════ CHIPS / BADGES / TAGS ═══════════════════ */
.badge, .tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: var(--r-pill);
    font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
    border: 1px solid transparent;
}
.badge::before, .tag::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: 0.85;
}
.tag.nodot::before, .badge.nodot::before { display: none; }
.tag.amber { background: var(--amber-soft); color: var(--amber-text); }
.tag.info, .badge.info { background: var(--sky-soft); color: var(--sky-text); }
.tag.success, .badge.done, .badge.on { background: var(--success-soft); color: var(--success-text); }
.tag.danger, .badge.failed, .badge.off { background: var(--danger-soft); color: var(--danger-text); }
.tag.violet { background: var(--violet-soft); color: var(--violet-text); }
.badge.pending { background: var(--warn-soft); color: var(--warn-text); }
.badge.processing { background: var(--sky-soft); color: var(--sky-text); }

.avatar {
    width: 44px; height: 44px; flex: none; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: 15px;
    background: linear-gradient(150deg, var(--glass-4), var(--glass-1));
    border: 1px solid var(--glass-border); box-shadow: var(--glass-edge);
    color: var(--amber-text);
}
.avatar .icn { width: 21px; height: 21px; }
.avatar.lg { width: 56px; height: 56px; }
.avatar.lg .icn { width: 26px; height: 26px; }
.avatar.vip { color: var(--violet-text); border-color: rgba(167, 139, 250, 0.35); }

.code, .mono {
    font-family: var(--mono); font-size: 12px; direction: ltr;
    unicode-bidi: embed; letter-spacing: 0;
}
.copyable {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: var(--r-xs);
    background: var(--glass-1); border: 1px dashed var(--glass-border);
    cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.copyable:hover { border-color: var(--amber); background: var(--amber-soft); }
.copyable.copied { border-color: var(--success); background: var(--success-soft); }
.count { color: var(--mist); font-size: var(--fs-xs); font-weight: 600; }
.muted { color: var(--mist); }
.inline { display: inline; }
.inline-form { display: inline-flex; }
.mb-16 { margin-bottom: var(--s-4); }

/* group/member headers */
.group-header, .box {
    background: var(--glass-1); border: 1px solid var(--glass-border);
    border-radius: var(--r-lg); box-shadow: var(--e-1), var(--glass-edge);
    padding: var(--s-5);
}
.group-header { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.group-header h1 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.3px; }
.group-header .meta { color: var(--mist); font-size: var(--fs-sm); }

/* jump-nav (in-page section index) */
.jump-nav {
    display: flex; flex-wrap: wrap; gap: 7px;
    padding: var(--s-3); margin-bottom: var(--s-5);
    background: var(--glass-1); border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
}
.jump-nav a {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: var(--r-pill);
    font-size: var(--fs-xs); font-weight: 700; text-decoration: none;
    color: var(--mist); background: var(--glass-1);
    border: 1px solid var(--glass-border);
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast),
                transform var(--t-fast) var(--ease-spring);
}
.jump-nav a:hover { color: var(--amber-text); background: var(--amber-soft); border-color: transparent; }
.jump-nav a:active { transform: scale(0.96); }
.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--mist); text-decoration: none; font-size: var(--fs-sm);
    font-weight: 600; margin: var(--s-2) 2px var(--s-3);
    padding: 6px 12px; border-radius: var(--r-pill);
    transition: color var(--t-fast), background var(--t-fast);
}
.back-link:hover { color: var(--amber-text); background: var(--amber-soft); }

/* settings (group toggles) */
.settings-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 900px) { .settings-grid { grid-template-columns: 1fr 1fr; } }
.setting-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-4);
    background: var(--glass-1); border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.setting-item:hover { border-color: var(--glass-border-strong); background: var(--glass-2); }
.setting-item .info { min-width: 0; font-weight: 700; font-size: var(--fs-sm); }
.setting-item .info small { display: block; color: var(--mist); font-size: var(--fs-xs); font-weight: 500; }
.setting-item .s-text { min-width: 0; }
.setting-item .s-text b { display: block; font-size: var(--fs-base); }
.setting-item .s-text small { color: var(--mist); font-size: var(--fs-xs); }

/* ═══════════════════════ SHEETS · DIALOGS · DRAWER ════════════════ */
/* One overlay material, three uses: confirm dialog, more-drawer,
   any future modal. Mobile = bottom sheet, desktop = centered card. */
.sheet-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(3, 4, 8, 0.6);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast) var(--ease-out);
    display: flex; align-items: flex-end; justify-content: center;
}
.sheet-overlay.open { opacity: 1; pointer-events: auto; }
.sheet {
    width: min(480px, 100%);
    background: var(--glass-solid);
    backdrop-filter: blur(var(--blur-3)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.4);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--e-3);
    padding: var(--s-4) var(--s-5) calc(var(--s-5) + var(--safe-b));
    transform: translateY(40px);
    transition: transform var(--t-med) var(--ease-spring);
    max-height: 82dvh; overflow-y: auto;
}
.sheet-overlay.open .sheet { transform: none; }
.sheet .grabber {
    width: 40px; height: 4px; border-radius: 99px;
    background: var(--glass-border-strong); margin: 0 auto var(--s-3);
}
.sheet-head {
    display: flex; align-items: center; gap: var(--s-2);
    margin-bottom: var(--s-3);
}
.sheet-head h3 { font-size: var(--fs-lg); font-weight: 800; flex: 1; }
.sheet-head .sheet-close {
    width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--glass-border);
    background: var(--glass-1); color: var(--mist); cursor: pointer;
    display: grid; place-items: center;
    transition: background var(--t-fast), color var(--t-fast);
}
.sheet-head .sheet-close:hover { color: var(--ink); background: var(--glass-4); }
@media (min-width: 768px) {
    .sheet-overlay { align-items: center; padding: 20px; }
    .sheet {
        border-radius: var(--r-xl);
        transform: translateY(14px) scale(0.97);
        padding-bottom: var(--s-5);
    }
    .sheet-overlay.open .sheet { transform: none; }
    .sheet .grabber { display: none; }
}

/* confirm dialog content */
.confirm-text { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.8; }
.confirm-actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.confirm-actions .btn { flex: 1; }

/* more-drawer content (mobile dock overflow) */
.drawer-list { display: flex; flex-direction: column; gap: 4px; }
.drawer-list a, .drawer-list .drawer-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 12px; border-radius: var(--r-md);
    text-decoration: none; color: var(--ink-2);
    font-size: var(--fs-base); font-weight: 600;
    border: 0; background: none; font-family: inherit; cursor: pointer; width: 100%;
    transition: background var(--t-fast), color var(--t-fast);
}
.drawer-list a:hover, .drawer-list .drawer-row:hover { background: var(--glass-2); color: var(--ink); }
.drawer-list a.active { background: var(--amber-soft); color: var(--amber-text); }
.drawer-list .di-ico {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center;
    background: var(--glass-1); border: 1px solid var(--glass-border);
    border-radius: 12px; color: var(--mist);
}
.drawer-list a .di-ico .icn, .drawer-list .drawer-row .di-ico .icn { width: 19px; height: 19px; }
.drawer-list a.active .di-ico { color: var(--amber-text); background: var(--glass-2); }
.drawer-list .drawer-sep { height: 1px; background: var(--line); margin: var(--s-2) 0; }
.drawer-list .drawer-row.is-danger { color: var(--danger-text); }
.drawer-list .drawer-row.is-danger .di-ico { color: var(--danger-text); }

/* ═══════════════════════ FLASH + TOASTS ══════════════════════════ */
.flash {
    display: flex; align-items: center; gap: 10px;
    padding: 13px var(--s-4); margin: 0 0 var(--s-5);
    border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600;
    border: 1px solid var(--glass-border);
    background: var(--glass-2); box-shadow: var(--e-1), var(--glass-edge);
    animation: toast-in var(--t-med) var(--ease-spring);
}
.flash.ok, .flash.success { border-color: rgba(62, 222, 158, 0.4); background: linear-gradient(120deg, var(--success-soft), var(--glass-2) 70%); }
.flash.error { border-color: rgba(251, 106, 118, 0.4); background: linear-gradient(120deg, var(--danger-soft), var(--glass-2) 70%); }

.toasts {
    position: fixed; z-index: var(--z-toast);
    top: calc(var(--safe-t) + 74px); left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; gap: 8px;
    width: min(94vw, 430px); pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 10px;
    padding: 12px var(--s-4); border-radius: var(--r-md);
    background: var(--glass-3); border: 1px solid var(--glass-border);
    box-shadow: var(--sh-pop), var(--glass-edge-strong);
    backdrop-filter: blur(var(--blur-3)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.4);
    font-size: var(--fs-sm); font-weight: 600;
    animation: toast-in var(--t-med) var(--ease-spring);
}
.toast.leaving { animation: toast-out var(--t-fast) var(--ease-out) forwards; }
.toast .t-ico { font-size: 17px; flex: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px) scale(0.97); } }

/* ═══════════════════════ EMPTY / SKELETON / SPINNER ══════════════ */
.empty-state {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center; padding: var(--s-8) var(--s-5);
    color: var(--mist);
}
.empty-state .e-ico {
    width: 64px; height: 64px; display: grid; place-items: center;
    color: var(--mist); margin-bottom: var(--s-2);
    background: var(--glass-1); border: 1px dashed var(--glass-border-strong);
    border-radius: 22px;
}
.empty-state .e-ico .icn { width: 28px; height: 28px; stroke-width: 1.5; }
.empty-state b { color: var(--ink-2); font-size: var(--fs-lg); }
.empty-state p { font-size: var(--fs-sm); max-width: 340px; }

.skeleton {
    position: relative; overflow: hidden;
    background: var(--glass-1); border-radius: var(--r-sm);
    min-height: 14px;
}
.is-loading {
    position: relative; overflow: hidden;
    color: transparent !important; pointer-events: none;
    min-height: 1em;
}
.skeleton::after, .is-loading::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%,
        var(--glass-4) 50%, transparent 70%);
    animation: v44-shimmer 1.4s infinite;
    border-radius: inherit;
}
@keyframes v44-shimmer {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
}

.spinner {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--glass-border-strong); border-top-color: var(--amber);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════ CHARTS (real data) ══════════════════════ */
.chart-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .chart-grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); } }
.chart-card {
    background: var(--glass-1); border: 1px solid var(--glass-border);
    border-radius: var(--r-lg); box-shadow: var(--e-1), var(--glass-edge);
    padding: var(--s-5);
    min-width: 0;
}
.chart-card h3 {
    font-size: var(--fs-base); font-weight: 800; margin-bottom: 2px;
    display: flex; align-items: center; gap: 8px;
}
.chart-card h3 .icn { width: 18px; height: 18px; color: var(--amber-text); }
.chart-card .c-sub { color: var(--smoke); font-size: var(--fs-xs); margin-bottom: var(--s-4); }
.chart-card svg { display: block; width: 100%; height: auto; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: var(--s-3); }
.legend .lg-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--mist); }
.legend .lg-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

.hbar-row {
    display: grid; grid-template-columns: minmax(90px, 150px) 1fr 44px;
    align-items: center; gap: 10px;
    padding: 7px 0;
}
.hbar-row .hb-label {
    font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hbar-row .hb-label a { color: inherit; text-decoration: none; }
.hbar-row .hb-label a:hover { color: var(--amber-text); }
.hbar-row .hb-track { height: 9px; border-radius: 99px; background: var(--glass-4); overflow: hidden; }
.hbar-row .hb-fill {
    height: 100%; border-radius: 99px; width: 0;
    background: linear-gradient(90deg, var(--amber-deep), var(--amber-2));
    box-shadow: 0 0 10px var(--amber-glow);
    transition: width 0.9s var(--ease-out);
}
.hbar-row .hb-val {
    font-size: var(--fs-xs); color: var(--mist);
    font-variant-numeric: tabular-nums; text-align: left;
}

/* ═══════════════════════ ACTIVITY FEED ═══════════════════════════ */
.feed { display: flex; flex-direction: column; }
.feed .f-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 4px; border-bottom: 1px solid var(--line);
    transition: background var(--t-fast);
}
.feed .f-item:last-child { border-bottom: 0; }
.feed .f-item:hover { background: var(--glass-1); }
.feed .f-dot {
    width: 34px; height: 34px; flex: none; margin-top: 2px;
    display: grid; place-items: center;
    color: var(--mist);
    background: var(--glass-2); border: 1px solid var(--glass-border);
    border-radius: 11px;
}
.feed .f-dot .icn { width: 17px; height: 17px; }
.feed .f-body { min-width: 0; flex: 1; }
.feed .f-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feed .f-title { font-size: var(--fs-sm); font-weight: 700; }
.feed .f-meta { color: var(--smoke); font-size: var(--fs-xs); display: flex; gap: 8px; flex-wrap: wrap; margin-top: 1px; }
.feed .f-time { color: var(--smoke); font-size: var(--fs-xs); flex: none; font-variant-numeric: tabular-nums; }

/* ═══════════════════════ COMMAND PALETTE ═════════════════════════ */
.palette-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(3, 4, 8, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 12vh 14px 14px;
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast) var(--ease-out);
}
.palette-overlay.open { opacity: 1; pointer-events: auto; }
.palette {
    width: min(560px, 100%);
    background: var(--glass-solid);
    border: 1px solid var(--glass-border-strong);
    border-radius: 22px; overflow: hidden;
    box-shadow: var(--e-3), var(--glass-edge-strong);
    backdrop-filter: blur(var(--blur-3)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.5);
    transform: translateY(10px) scale(0.98);
    transition: transform var(--t-med) var(--ease-spring);
}
.palette-overlay.open .palette { transform: none; }
.palette .p-search { display: flex; align-items: center; gap: 10px; padding: 15px var(--s-5); border-bottom: 1px solid var(--line); color: var(--smoke); }
.palette .p-search .icn { width: 18px; height: 18px; }
.palette .p-search input {
    border: 0; background: transparent; box-shadow: none;
    min-height: 0; padding: 0; font-size: var(--fs-lg);
}
.palette .p-search input:focus { box-shadow: none; }
.palette .p-list { max-height: 46vh; overflow-y: auto; padding: 8px; }
.palette .p-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 13px;
    cursor: pointer; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600;
    transition: background var(--t-fast);
}
.palette .p-item .pi-ico {
    width: 34px; height: 34px; flex: none; display: grid; place-items: center;
    color: var(--mist);
    background: var(--glass-1); border: 1px solid var(--glass-border); border-radius: 10px;
}
.palette .p-item .pi-ico .icn { width: 17px; height: 17px; }
.palette .p-item small { display: block; color: var(--smoke); font-weight: 500; }
.palette .p-item.sel, .palette .p-item:hover { background: var(--amber-soft); color: var(--ink); }
.palette .p-item.sel .pi-ico, .palette .p-item:hover .pi-ico { color: var(--amber-text); }
.palette .p-empty { padding: var(--s-6); text-align: center; color: var(--smoke); font-size: var(--fs-sm); }
.palette .p-foot {
    display: flex; gap: 14px; padding: 10px var(--s-5);
    border-top: 1px solid var(--line);
    color: var(--smoke); font-size: var(--fs-xs);
}
.palette .p-foot .kbd {
    font-family: var(--mono); padding: 2px 6px; border-radius: 5px;
    background: var(--glass-1); border: 1px solid var(--glass-border);
}

/* ═══════════════════════ LOGIN (gate) ════════════════════════════ */
.gate {
    min-height: 100dvh; display: grid; place-items: center;
    padding: var(--s-5);
}
.gate .box {
    width: min(440px, 100%);
    padding: var(--s-8) var(--s-6);
    background: var(--glass-2);
    box-shadow: var(--e-3), var(--glass-edge),
                0 0 0 1px rgba(255, 110, 40, 0.16),
                0 0 46px rgba(255, 110, 40, 0.10);
    backdrop-filter: blur(var(--blur-2)) saturate(1.35);
    -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.35);
    text-align: center;
    border-radius: var(--r-xl);
}
.gate .logo {
    width: 76px; height: 76px; margin: 0 auto var(--s-4);
    display: grid; place-items: center; color: var(--amber-ink);
    background: linear-gradient(140deg, var(--amber-2), var(--amber) 55%, var(--amber-deep));
    border-radius: 26px;
    box-shadow: var(--e-2), 0 10px 34px rgba(255, 110, 40, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: logo-float 5s ease-in-out infinite;
}
.gate .logo .icn { width: 38px; height: 38px; stroke-width: 1.9; }
@keyframes logo-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-7px) rotate(2deg); }
}
.gate h1 { font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -0.5px; }
.gate .meta { color: var(--mist); margin: 6px 0 var(--s-6); font-size: var(--fs-sm); }
.gate .steps { text-align: right; display: flex; flex-direction: column; gap: 10px; margin: var(--s-5) 0; }
.gate .steps .step {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: var(--r-md);
    background: var(--glass-1); border: 1px solid var(--glass-border);
    color: var(--ink-2); font-size: var(--fs-sm);
}
.gate .steps .step .st-num {
    width: 26px; height: 26px; flex: none; display: grid; place-items: center;
    border-radius: 9px; background: var(--amber-soft); color: var(--amber-text);
    font-weight: 800; font-size: var(--fs-sm);
}

/* ═══════════════════════ FOOTER ══════════════════════════════════ */
.footer {
    position: relative; z-index: var(--z-content);
    text-align: center; color: var(--smoke); font-size: var(--fs-xs);
    padding: 0 0 calc(var(--dock-h) + var(--safe-b) + 18px);
}
@media (min-width: 1024px) { .footer { padding-bottom: 22px; } }

/* ═══════════════════════ ENTRANCE CHOREOGRAPHY ═══════════════════ */
.rise { animation: rise var(--t-slow) var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.rise-1 { animation-delay: 30ms; } .rise-2 { animation-delay: 70ms; }
.rise-3 { animation-delay: 110ms; } .rise-4 { animation-delay: 150ms; }

/* page-enter motion (fast, subtle, once) */
main.shell > * {
    animation: v47-enter var(--t-slow) var(--ease-out) both;
}
@keyframes v47-enter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* staggered lists: cards, clusters, table rows, settings */
.stagger > *, .cards > *, .kpis > *, .pulse-grid > *,
.settings-grid > *, .sg-grid > *, tbody tr {
    animation: v47-rise var(--t-med) var(--ease-out) both;
}
.cards > *:nth-child(1), .kpis > *:nth-child(1), .pulse-grid > *:nth-child(1),
.settings-grid > *:nth-child(1), .sg-grid > *:nth-child(1) { animation-delay: 20ms; }
.cards > *:nth-child(2), .kpis > *:nth-child(2), .pulse-grid > *:nth-child(2),
.settings-grid > *:nth-child(2), .sg-grid > *:nth-child(2) { animation-delay: 60ms; }
.cards > *:nth-child(3), .kpis > *:nth-child(3), .pulse-grid > *:nth-child(3),
.settings-grid > *:nth-child(3), .sg-grid > *:nth-child(3) { animation-delay: 100ms; }
.cards > *:nth-child(4), .kpis > *:nth-child(4), .pulse-grid > *:nth-child(4),
.settings-grid > *:nth-child(4), .sg-grid > *:nth-child(4) { animation-delay: 140ms; }
.cards > *:nth-child(5), .kpis > *:nth-child(5), .pulse-grid > *:nth-child(5),
.settings-grid > *:nth-child(5), .sg-grid > *:nth-child(5) { animation-delay: 180ms; }
.cards > *:nth-child(6), .kpis > *:nth-child(6), .pulse-grid > *:nth-child(6),
.settings-grid > *:nth-child(6), .sg-grid > *:nth-child(6) { animation-delay: 220ms; }
@keyframes v47-rise {
    from { opacity: 0; transform: translateY(8px) scale(0.995); }
    to   { opacity: 1; transform: none; }
}

/* micro-interactions: hover lift on cards */
@media (hover: hover) {
    .stat-group:hover { border-color: var(--glass-border-strong); }
}

/* ═══════════════════════ PRINT / A11Y ════════════════════════════ */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media print {
    .topbar, .rail, .dock, .toasts, .ambient, .aurora, .palette-overlay,
    .sheet-overlay { display: none !important; }
    body { background: #fff; color: #000; }
}

/* numbers read like data, not prose */
.num, .kbd, td, .badge { font-variant-numeric: tabular-nums; }

/* ═══════════════════════ CMODAL (styled confirm) ═════════════════ */
/* Merge contract: named cmodal — mobile bottom-sheet, desktop centered. */
.cmodal-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(3, 4, 8, 0.6);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast) var(--ease-out);
    display: flex; align-items: flex-end; justify-content: center;
}
.cmodal-overlay.open { opacity: 1; pointer-events: auto; }
.cmodal {
    width: min(480px, 100%);
    background: var(--glass-solid);
    backdrop-filter: blur(var(--blur-3)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.4);
    border: 1px solid var(--glass-border-strong);
    border-radius: 26px 26px 0 0;              /* mobile bottom-sheet variant */
    box-shadow: var(--e-3);
    padding: var(--s-4) var(--s-5);
    padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
    transform: translateY(40px);
    transition: transform var(--t-med) var(--ease-spring);
    max-height: 82dvh; overflow-y: auto;
}
.cmodal-overlay.open .cmodal { transform: none; }
@media (min-width: 768px) {
    .cmodal-overlay { align-items: center; padding: 20px; }
    .cmodal {
        border-radius: var(--r-xl);
        transform: translateY(14px) scale(0.97);
        padding-bottom: var(--s-5);
    }
    .cmodal-overlay.open .cmodal { transform: none; }
}
.cmodal .grabber {
    width: 40px; height: 4px; border-radius: 99px;
    background: var(--glass-border-strong); margin: 0 auto var(--s-3);
}
@media (min-width: 768px) { .cmodal .grabber { display: none; } }
.cmodal .confirm-text { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.8; }
.cmodal .confirm-actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.cmodal .confirm-actions .btn { flex: 1; }
.cm-ok.danger { background: var(--danger-soft); color: var(--danger-text); }

/* palette v2: section headers + result subtitles */
.palette .p-sec {
    padding: 10px 12px 4px;
    font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.3px;
    color: var(--smoke);
}
.palette .pi-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.palette .pi-sub {
    font-size: var(--fs-2xs); color: var(--smoke); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════════════════════ REDUCED MOTION (hard block) ═════════════ */
@media (prefers-reduced-motion: reduce) {
    main.shell > *, .stagger > *, .cards > *, .kpis > *, .pulse-grid > *,
    .settings-grid > *, .sg-grid > *, tbody tr {
        animation: none !important;
        transition: none !important;
    }
    .skeleton::after, .is-loading::after { animation: none; }
    .btn:active { transform: none; }
    .live-dot { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   V48 "AURORA LIGHT" — light polish · help center · micro-UX
   Consumes the V48 --*-text tokens from tokens.css. Nothing here may
   hardcode a hue for text; components only reference tokens (doctrine).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Light: designed surfaces where tokens alone can't reach ──────── */
[data-theme="light"] .card::after {
    background: linear-gradient(115deg, transparent 30%,
        rgba(190, 74, 16, 0.07) 48%, transparent 62%);
}
[data-theme="light"] .skeleton::after,
[data-theme="light"] .is-loading::after {
    background: linear-gradient(100deg, transparent 30%,
        rgba(22, 24, 32, 0.08) 50%, transparent 70%);
}
[data-theme="light"] .topbar,
[data-theme="light"] .rail,
[data-theme="light"] .dock {
    border-color: rgba(22, 24, 32, 0.13);
}

/* ── Touch-first: comfortable targets on coarse pointers ──────────── */
@media (pointer: coarse) {
    .btn.sm { min-height: 42px; }
    .sheet-head .sheet-close { width: 40px; height: 40px; }
}

/* ── Micro-UX: submit buttons show a spinner while the form locks ─── */
/* (overrides the V47 dim rule: label+icon go transparent, ring spins) */
form.locked button[type="submit"] { opacity: 1; color: transparent; }
form.locked button[type="submit"] .icn { opacity: 0; }
form.locked button[type="submit"]::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 18px; height: 18px; margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 2px solid var(--glass-border-strong);
    border-top-color: var(--amber);
    animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    form.locked button[type="submit"]::after { animation: none; }
}

/* ── HELP CENTER (views/guide.php) ────────────────────────────────── */
.help-hero {
    position: relative; overflow: hidden;
    display: grid; gap: var(--s-4); grid-template-columns: 1fr;
    background:
        radial-gradient(130% 150% at 88% -30%, var(--amber-soft), transparent 55%),
        var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--e-1), var(--glass-edge);
    padding: var(--s-5);
    margin-bottom: var(--s-5);
}
@media (min-width: 900px) {
    .help-hero { grid-template-columns: 1.35fr 1fr; align-items: center; }
}
.help-hero h2 {
    font-size: var(--fs-xl); font-weight: 900; letter-spacing: -0.3px;
    line-height: 1.35;
}
.help-hero .hh-sub { color: var(--mist); font-size: var(--fs-sm); margin-top: 6px; line-height: 1.8; }
.hh-start {
    display: flex; flex-direction: column; gap: 9px;
    background: var(--glass-1); border: 1px solid var(--glass-border);
    border-radius: var(--r-md); padding: var(--s-4);
    box-shadow: var(--glass-edge);
}
.hh-start > b { font-size: var(--fs-sm); color: var(--amber-text); }
.hh-start .step { display: flex; gap: 9px; align-items: baseline; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.7; }
.hh-start .step .st-num {
    flex: none; width: 24px; height: 24px; display: grid; place-items: center;
    border-radius: 8px; background: var(--amber-soft); color: var(--amber-text);
    font-weight: 800; font-size: var(--fs-xs);
}

.help-tools { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.help-search { position: relative; }
.help-search .icn {
    position: absolute; top: 50%; inset-inline-start: 15px;
    transform: translateY(-50%); color: var(--smoke); pointer-events: none;
}
.help-search input {
    padding-inline-start: 44px; border-radius: var(--r-pill);
    background: var(--glass-2);
}
.help-meta { color: var(--smoke); font-size: var(--fs-xs); font-weight: 700; }
.help-meta b { color: var(--amber-text); }

.g-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .g-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .g-grid { grid-template-columns: 1fr 1fr 1fr; } }
.g-card {
    background: var(--glass-1); border: 1px solid var(--glass-border);
    border-radius: var(--r-md); box-shadow: var(--e-1), var(--glass-edge);
    padding: var(--s-4);
    display: flex; flex-direction: column; gap: 9px; min-width: 0;
    transition: transform var(--t-med) var(--ease-spring),
                border-color var(--t-fast), background var(--t-fast),
                box-shadow var(--t-med);
}
.g-card:hover {
    transform: translateY(-2px);
    border-color: var(--glass-border-strong);
    background: var(--glass-2);
    box-shadow: var(--e-2), var(--glass-edge);
}
.g-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.g-head b { font-size: var(--fs-base); font-weight: 800; line-height: 1.4; }
.g-card .g-desc { color: var(--mist); font-size: var(--fs-sm); line-height: 1.75; }
.g-card .copyable {
    justify-content: space-between; width: 100%;
    background: var(--amber-soft);
    border-color: rgba(255, 110, 40, 0.32);
}
[data-theme="light"] .g-card .copyable { border-color: rgba(190, 74, 16, 0.38); }
.g-card .copyable .mono { color: var(--amber-text); font-weight: 600; font-size: 12.5px; }
.g-card .copyable .c-ico { color: var(--smoke); display: inline-grid; flex: none; }
.g-card .copyable:hover .c-ico { color: var(--amber-text); }
.g-ex { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--smoke); }
.g-ex .mono { color: var(--mist); }

/* FAQ + getting-started rows */
.faq-item {
    background: var(--glass-1); border: 1px solid var(--glass-border);
    border-radius: var(--r-md); box-shadow: var(--e-1), var(--glass-edge);
    padding: var(--s-4) var(--s-5); margin-bottom: var(--s-3);
}
.faq-item .q { display: flex; gap: 9px; align-items: baseline; font-size: var(--fs-base); font-weight: 800; }
.faq-item .q .icn { color: var(--amber-text); flex: none; }
.faq-item .a { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.85; margin-top: 8px; padding-inline-start: 27px; }
.faq-item .a .code { background: var(--amber-soft); padding: 1px 7px; border-radius: 7px; }

/* ═════════════ V66 — GEN-5 empty-state art + hero intro ═════════════
   Owner order: «المان‌های رپری + اینترو… خیلی خفن بشه». The .eart mark
   is the mask motif (matches the favicon); classes carry colors so
   light/dark adapt; no inline styles, CSP untouched. */

.eart { display: block; width: 74px; height: 74px; margin: 0 auto var(--s-3); filter: drop-shadow(0 0 18px var(--amber-glow)); }
.eart .ea-line { stroke: var(--ink-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.eart .ea-amber { stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.eart .ea-dot { fill: var(--amber); stroke: none; }
.eart + .e-ico { display: none; } /* art replaces the small 28px icon visually */

.empty-state .eart { animation: ea-float 5.6s ease-in-out infinite; }
@keyframes ea-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Dashboard hero — the intro band */
.hero {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: var(--s-5);
    padding: var(--s-6) var(--s-5);
    /* V70 (owner: «فاصله بین لیل بات و آمار رو یکم بیشتر کن») — a small
       breathing gap between the hero band and the KPI/آمار rows below.
       Hero exists on the dashboard only, so nothing else shifts. */
    margin-bottom: 12px;
    border-radius: var(--r-lg); border: 1px solid var(--line);
    background:
        radial-gradient(120% 150% at 88% -10%, var(--amber-glow) 0%, transparent 52%),
        radial-gradient(90% 120% at 12% 115%, rgba(255, 110, 40, 0.07) 0%, transparent 55%),
        var(--glass-1);
}
[data-theme="light"] .hero {
    background:
        radial-gradient(120% 150% at 88% -10%, var(--amber-soft) 0%, transparent 52%),
        radial-gradient(90% 120% at 12% 115%, rgba(255, 110, 40, 0.05) 0%, transparent 55%),
        var(--glass-1);
}
.hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 22px 22px; opacity: .5;
    mask-image: linear-gradient(115deg, transparent 55%, #000 100%);
    -webkit-mask-image: linear-gradient(115deg, transparent 55%, #000 100%);
}
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.hero-kick {
    font-size: 11px; font-weight: 800; letter-spacing: .22em;
    color: var(--amber-text); text-transform: uppercase; margin: 0 0 6px;
}
.hero-title {
    margin: 0; font-size: clamp(2.1rem, 9vw, 3.3rem); font-weight: 900;
    line-height: 1.04; letter-spacing: -0.02em;
    /* V68 ROOT FIX (owner: «تیتر لیل بات بالای حروفش بریده می‌شود»):
       background-clip:text paints the gradient ONLY inside the element's
       own box — Persian ink (ل/ا/ی ascenders + dot rows above, kasra and
       ب tails below) extends past the 1.04 line box and rendered with no
       background behind it = transparent = the vertical cut. padding-block
       widens the paint area past the ink; margin-block hands the extra
       space straight back, so glyph geometry, flow and hero compactness
       are pixel-identical. Font, size, weight, gradient: untouched. */
    padding-block: 0.35em; margin-block: -0.35em;
    background: linear-gradient(100deg, var(--ink) 55%, var(--amber) 130%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 26px var(--amber-glow));
}
.hero-sub { margin: 10px 0 0; color: var(--ink-2); font-size: var(--fs-base); max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.hero-art { position: relative; z-index: 1; flex: none; margin-inline-start: auto; }
.hero-art .eart {
    width: 118px; height: 118px; margin: 0;
    animation: ea-float 6.2s ease-in-out infinite;
}
@media (max-width: 560px) {
    .hero { padding: var(--s-5) var(--s-4); gap: var(--s-4); }
    .hero-art .eart { width: 84px; height: 84px; }
    .hero-sub { font-size: var(--fs-sm); }
}
@media (prefers-reduced-motion: reduce) {
    .empty-state .eart, .hero-art .eart { animation: none; }
}

/* ═══════════════════════ V68 UX POLISH LAYER ═══════════════════════
   Owner order: «رابط کاربری و تجربه کاربری رو خیلی بهتر کن».
   Additive-only: no existing selector's geometry or identity changes;
   same material laws (glass chrome, amber accent, ≤360ms motion).
   Every selector below was verified to exist in this file. */

/* anchor jumps never land underneath the sticky topbar island */
html { scroll-padding-top: calc(var(--topbar-h) + 28px); }

/* one honest hover language for every card surface (pointer devices) */
.card, .stat-group, .g-card {
    transition: transform var(--t-med) var(--ease-out),
                border-color var(--t-med), box-shadow var(--t-med);
}

/* primary button: a single amber light-sweep on hover (paint-only) */
.btn.primary::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg,
        transparent 30%, rgba(255, 255, 255, 0.26) 50%, transparent 70%);
    transform: translateX(140%);
    transition: transform 360ms var(--ease-out);
    pointer-events: none;
}

@media (hover: hover) {
    .card:hover, .stat-group:hover, .g-card:hover {
        transform: translateY(-2px);
        border-color: var(--glass-border-strong);
        box-shadow: var(--e-2), var(--glass-edge);
    }
    .table-wrap tbody tr { transition: background var(--t-fast); }
    .table-wrap tbody tr:hover { background: var(--glass-2); }
    .btn.primary:hover::after { transform: translateX(-140%); }
}

/* V68: the last 3 legacy inline styles become classes — the panel markup
   is now inline-style-free, which makes real CSP hardening (dropping the
   legacy style-src 'unsafe-inline') possible in a follow-up round. */
.pager { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pager-meta { font-size: 0.85rem; }
.hint-block { display: block; }

/* login gate: the brand arrives, it doesn't pop */
@keyframes gate-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
.gate .box { animation: gate-in 360ms var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
    .btn.primary::after { display: none; }
    .gate .box { animation: none; }
    .card, .stat-group, .g-card { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   V62 CSP sweep — inline-style attribute replacements.
   Every rule mirrors the removed style="..." byte-for-byte (same
   properties, same values/tokens). Appended LAST so each single-class
   selector wins source-order ties exactly like the inline attribute
   did (inline = highest non-!important precedence).
   ═══════════════════════════════════════════════════════════════════ */

/* spacing (mirror tokens/literals exactly as the removed styles used) */
.mt-2  { margin-top: var(--s-2); }
.mt-4  { margin-top: var(--s-4); }
.mt-5  { margin-top: var(--s-5); }
.mt-6  { margin-top: var(--s-6); }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mb-3  { margin-bottom: var(--s-3); }
.mb-4  { margin-bottom: var(--s-4); }
.my-4  { margin: var(--s-4) 0; }

/* empty-state table cells (12×: group_detail, stats, queue, groups) */
.empty-cell    { text-align: center; color: var(--mist); padding: 24px; }
.empty-cell-lg { text-align: center; color: var(--mist); padding: 32px; }

/* legend dots (dashboard) */
.lg-dot-s1 { background: var(--series-1); }
.lg-dot-s2 { background: var(--series-2); }

/* chart-card compact padding (dashboard) */
.chart-card-compact { padding: var(--s-3) var(--s-4); }

/* mono ltr blocks (access log, last error) */
.mono-ltr { text-align: left; }
.mono-11  { font-size: 11px; word-break: break-all; }
.mono-115 { font-size: 11.5px; }

/* shared colors for conditional tinting */
.is-mist   { color: var(--mist); }
.is-danger { color: var(--danger); }

/* access-log rows (dashboard) */
.alog-row  { display: flex; gap: 12px; padding: 7px 0;
             border-bottom: 1px solid rgba(128, 128, 128, .14);
             flex-wrap: wrap; align-items: baseline; }
.alog-ts   { min-width: 148px; color: var(--mist); }
.alog-ev   { min-width: 92px; font-weight: 700; }
.alog-path { min-width: 120px; }
.alog-ip   { color: var(--mist); }
.ev-fail   { color: var(--danger); }
.ev-ok     { color: var(--amber); }

/* stat-group conditional alert border + full-width item */
.sg-alert     { border-color: rgba(251, 106, 118, .35); }
.sg-item-full { grid-column: 1 / -1; }
.lbl-tight    { margin-bottom: 4px; }

/* form-group growth variants */
.fg-grow  { flex: 1; }
.fg-grow2 { flex: 2; }

/* control width utilities (questions, group_detail filters) */
.w88  { width: 88px; }
.w100 { width: 100px; }
.w110 { width: 110px; }
.w120 { width: 120px; }
.w150 { width: 150px; }
.wmin170 { min-width: 170px; }
.wmin180 { min-width: 180px; }
.wmin200 { min-width: 200px; }
.wmin240 { min-width: 240px; }

/* two-column settings grid (group_detail punishments) */
.two-col { margin-top: 14px; display: grid;
           grid-template-columns: 1fr 1fr; gap: 14px; }

/* details/summary toggles */
.summary-btn { cursor: pointer; font-weight: 700; }

/* inline edit forms (group_detail, questions) */
.edit-form { display: grid; gap: 10px; margin-top: 10px; }
.edit-form-fit { min-width: min(92vw, 340px); }
.inline-form-tight { gap: 6px; flex-wrap: wrap; align-items: center; width: 100%; }

/* block-level fg-70 wrapper (group_detail warning defaults) */
.fg-70-block { display: block; }

/* one-off hint margin (group_detail default punishments intro) */
.hint-defaults { margin: var(--s-3) 2px 0; }

/* hint displayed as block (group_detail filter rows) */
.hint-block { display: block; }

/* row of actions outside a td (group_detail settings header) */
.cell-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* global spacer (users toolbar; topbar .spacer keeps its own rule) */
.spacer { flex: 1; }

/* transfer direction colors (member) */
.tx-in  { color: var(--success); }
.tx-out { color: var(--danger); }

/* smaller num variant (stats top-game) */
.num-16 { font-size: 16px; }

/* hide/unhide helper (guide empty-state, JS toggles the class) */
.hidden { display: none; }

/* ═════════════ V76 — gate password path (5-click easter egg) ═════════════ */
/* The gate logo becomes a secret trigger (owner order: 5 clicks → «رمز را
   وارد کنید» → panel without a token). Colors ride the theme vars so the
   light scope retunes it automatically; no defs/ids (multi-instance safe). */

.gate .logo {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gate .logo:active { transform: scale(0.94); }
.gate .logo:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
}

.gate-pass {
    margin-top: var(--s-5, 24px);
    padding-top: var(--s-4, 18px);
    border-top: 1px dashed var(--glass-border);
    text-align: right;
}
.gate-pass[hidden] { display: none; }
.gate-pass form {
    display: flex;
    flex-direction: column;
    gap: var(--s-3, 12px);
}
.gate-pass label {
    font-size: var(--fs-md, 15px);
    font-weight: 700;
    color: var(--ink);
}
.gate-pass input {
    width: 100%;
    padding: 11px 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-align: center;
    color: var(--ink);
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md, 12px);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gate-pass input:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(255, 122, 46, 0.18);
}
.gate-pass .gate-go {
    padding: 11px 18px;
    font-size: var(--fs-md, 15px);
    font-weight: 800;
    color: var(--amber-ink, #1a0d04);
    background: linear-gradient(140deg, var(--amber-2), var(--amber) 55%, var(--amber-deep));
    border: none;
    border-radius: var(--r-md, 12px);
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(255, 110, 40, 0.28);
    transition: transform 0.12s ease, filter 0.12s ease;
}
.gate-pass .gate-go:hover { filter: brightness(1.07); transform: translateY(-1px); }
.gate-pass .gate-go:active { transform: scale(0.97); }
.gate-pass .gate-go:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}
.gate-hint {
    margin-top: var(--s-2, 8px);
    font-size: var(--fs-xs, 12px);
    color: var(--ink-3, rgba(240, 234, 220, 0.55));
    min-height: 1.3em;
}

.gate-back {
    display: inline-block;
    margin-top: var(--s-3, 12px);
    padding: 9px 16px;
    font-size: var(--fs-sm, 13px);
    font-weight: 700;
    color: var(--ink);
    background: var(--glass-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md, 12px);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.12s ease;
}
.gate-back:hover { background: var(--glass-4, var(--glass-2)); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
    .gate .logo,
    .gate-pass input,
    .gate-pass .gate-go,
    .gate-back { transition: none; }
}