/* ============================================================
   StreamCap - Emerald Glow Theme
   Pure black + emerald-500 + super-rounded + no shadow.
   Variable names preserved for backward compatibility; values migrated
   from the original purple-glass palette to emerald equivalents.
   Reference: DESIGN_SYSTEM.md
   ============================================================ */

:root {
    --sidebar-width: 240px;

    /* ============================================================
       Brand palette — emerald primary + status accents.
       NOTE on naming: several legacy vars keep their old "purple"
       name for backward compat but now resolve to emerald. Real
       violet exists only via --accent-violet for AI-themed .is-purple.
       ============================================================ */
    --primary-color: #10b981;          /* emerald-500 — brand primary */
    --primary-2: #059669;              /* emerald-600 — pressed/active */
    --accent-purple: #34d399;          /* emerald-400 — LEGACY NAME, value is emerald (use --accent-green for new code) */
    --accent-green: #34d399;           /* emerald-400 — semantic alias, fixes undefined-var bug */
    --accent-pink: #ec4899;            /* pink-500 — decorative accent + gift-chat */
    --accent-cyan: #22d3ee;            /* cyan-400 — info-state accent */
    --accent-violet: #a855f7;          /* violet-500 — AI-themed accent (.is-purple) */
    --accent-blue: #3b82f6;            /* blue-500 — rare, AI object-detection labels */
    --accent-amber: #f59e0b;           /* amber-500 — warning-state accent */

    /* ============================================================
       Surface opacity tiers — 3 levels only.
       card 0.5 (default) / overlay 0.8 (headers, inputs) / popup 0.94 (modal, toast)
       ============================================================ */
    --bg-page: #000000;                /* pure black page background */
    --bg-dark: #09090b;                /* zinc-950 — deeper panels (solid) */
    --bg-dark-2: #18181b;              /* zinc-900 — cards (solid) */
    --bg-card: rgba(24, 24, 27, 0.5);  /* zinc-900 @ 50% — default card surface */
    --bg-overlay: rgba(24, 24, 27, 0.8); /* zinc-900 @ 80% — headers, inputs, hovers */
    --bg-popup: rgba(24, 24, 27, 0.94); /* zinc-900 @ 94% — modal, toast */
    --bg-card-2: rgba(16, 185, 129, 0.08); /* emerald tint — accent surface */

    /* Borders & dividers (zinc-800 / 700) — neutral, NEVER tinted except for explicit semantic accents */
    --border-color: #27272a;           /* zinc-800 — default border */
    --border-strong: #3f3f46;          /* zinc-700 — hover/focus border */

    /* Text */
    --text-primary: #ffffff;           /* pure white */
    --text-muted: #a1a1aa;             /* zinc-400 — secondary text */
    --text-blue: #67e8f9;              /* cyan-300 — info-state text (LEGACY NAME, value is cyan) */
    --text-purple: #34d399;            /* emerald-400 — LEGACY NAME, value is emerald */
    --text-cyan: #22d3ee;              /* cyan-400 — info text */
    --text-yellow: #facc15;            /* amber-300 — warning text */
    --text-green: #4ade80;             /* green-400 — success text */
    --text-violet: #d8b4fe;            /* violet-300 — AI-themed text */

    /* ============================================================
       Gradients — monochromatic per accent (no cross-hue mixing).
       ============================================================ */
    --gradient-primary: linear-gradient(135deg, #10b981 0%, #34d399 50%, #059669 100%);
    --gradient-pink: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);   /* pink-500 → pink-400 (was pink→emerald, jarring) */
    --gradient-blue: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
    --gradient-green: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-orange: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);
    --gradient-purple: linear-gradient(135deg, #a855f7 0%, #d8b4fe 100%); /* real violet for AI .is-purple (was aliased to emerald) */

    /* Effects — no card shadow (per DESIGN_SYSTEM.md §10) */
    --card-shadow: none;
    --shadow-glow: 0 0 24px rgba(16, 185, 129, 0.15); /* emerald soft halo only */
    --shadow-glow-pink: 0 0 24px rgba(236, 72, 153, 0.15);
    --neon-glow: 0 0 6px #10b981, 0 0 14px rgba(16, 185, 129, 0.6);

    /* ============================================================
       Hover intensity tiers — 3 levels only (apply to emerald hover washes).
       subtle 0.08 (rows, danmu) / default 0.14 (nav, dropdown) / strong 0.18 (sidebar active)
       ============================================================ */
    --hover-subtle: rgba(16, 185, 129, 0.08);
    --hover-default: rgba(16, 185, 129, 0.14);
    --hover-strong: rgba(16, 185, 129, 0.18);

    /* Geometry — tuned rounded scale (was super-rounded, now more restrained) */
    --radius-sm: 0.5rem;               /* 8px inputs */
    --radius-md: 0.75rem;              /* 12px icon containers */
    --radius-btn: 0.5rem;            /* 10px buttons (kept slightly smaller than cards) */
    --radius-lg: 1rem;                 /* 16px cards (was 1.5rem — too large) */
    --radius-xl: 1.25rem;              /* 20px large cards / modal (was 2rem — too large) */
}

/* ============================================================
   Base & Layout
   ============================================================ */

* { box-sizing: border-box; }

body {
    font-family: "Noto Sans SC", -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg-page);
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
    color: var(--text-primary);
}

.app-layout { display: flex; min-height: 100vh; }

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-width: 0;
}

/* ============================================================
   Sidebar
   ============================================================ */

.sidebar {
    width: var(--sidebar-width);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background: #000000;                       /* pure black per DESIGN_SYSTEM sidebar token */
    border-right: 1px solid var(--border-color);
    /* no card/sidebar shadow — per DESIGN_SYSTEM.md §10 */
}

.sidebar-logo { width: 48px; height: 48px; }

.sidebar-header h5 {
    color: var(--text-primary);
    text-shadow: var(--neon-glow);
    font-weight: 600;
    letter-spacing: .02em;
}

.sidebar .nav-link {
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    margin: 2px 10px;
    padding: .6rem .85rem;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .92rem;
}

.sidebar .nav-link:hover {
    color: #fff;
    background: rgba(16, 185, 129, 0.18);
    text-shadow: 0 0 8px rgba(110, 231, 183, 0.6);
    transform: translateX(2px);
}

.sidebar .nav-link.active {
    color: #000;                               /* black text on emerald fill, per DESIGN_SYSTEM §3.2 */
    background: var(--primary-color);          /* emerald-500 solid */
    font-weight: 600;
    position: relative;
    /* left accent bar — 2px emerald line per DESIGN_SYSTEM §3.2 sidebar pattern */
    box-shadow: inset 2px 0 0 var(--primary-2);
}

.sidebar .nav-link i { font-size: 1.1rem; }

.sidebar-footer {
    color: var(--text-muted) !important;
    border-top: 1px solid var(--border-color);
    background: #000000;                       /* pure black, matches sidebar base */
}

.sidebar-footer a { color: var(--text-muted) !important; transition: color .2s; }
.sidebar-footer a:hover { color: var(--accent-purple) !important; }

/* Team / user badge inside sidebar footer */
.team-badge {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .65rem;
    border-radius: var(--radius-sm);
    background: var(--bg-card-2);
    border: 1px solid var(--border-color);
    font-size: .82rem;
}
.team-badge .team-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: .75rem;
    
}

/* ============================================================
   Login Page
   ============================================================ */

.login-body {
    background: var(--bg-page);
    min-height: 100vh;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);

    border-radius: var(--radius-sm);
}

.login-card h3 {
    color: var(--text-primary);
    text-shadow: var(--neon-glow);
    font-weight: 600;
}

.login-logo { width: 72px; height: 72px; }

/* ============================================================
   Glass Card (generic glassmorphism container)
   ============================================================ */

.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);

    color: var(--text-primary);
    position: relative;
    overflow: hidden;
}

.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.06) 0%, transparent 40%, rgba(16, 185, 129, 0.06) 100%);
    pointer-events: none;
}

/* ============================================================
   Cards (base)
   ============================================================ */

.card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);

    color: var(--text-primary);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 600;
}

.card-body { color: var(--text-primary); }

.card-footer {
    background: transparent;
    border-top: 1px solid var(--border-color);
}

/* ============================================================
   Stat / Quick-action / Feature cards (legacy)
   ============================================================ */

.stat-card,
.quick-action-card,
.feature-box {
    border: 1px solid var(--border-color);

    border-radius: var(--radius-sm);
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all .2s ease;
}

.stat-card:hover,
.quick-action-card:hover {
    transform: translateY(-2px);

    border-color: var(--border-strong);
}

.feature-box {
    text-align: center;
    padding: 1rem;
    background: rgba(24, 24, 27, 0.55);
}

.feature-box:hover {

    border-color: var(--border-strong);
}

.feature-box i { font-size: 1.75rem; }

/* ============================================================
   Stat-Mini (compact 4-column metric tile)
   Reference: LiveStream Pro stat row
   ============================================================ */

.stat-mini {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem 1.25rem;
    background: var(--bg-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);

    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
    overflow: hidden;
}

.stat-mini::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.stat-mini:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);

}

.stat-mini .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
    
}

.stat-mini .stat-body { flex: 1; min-width: 0; }
.stat-mini .stat-label { color: var(--text-muted); font-size: .8rem; margin: 0; }
.stat-mini .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    margin: .15rem 0 0;
    letter-spacing: -.01em;
}
.stat-mini .stat-value .unit {
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: .15rem;
}

/* Stat-mini color variants */
.stat-mini.is-pink  .stat-icon { background: var(--gradient-pink); }
.stat-mini.is-purple .stat-icon { background: var(--gradient-purple); }
.stat-mini.is-blue  .stat-icon { background: var(--gradient-blue); }
.stat-mini.is-green .stat-icon { background: var(--gradient-green); }
.stat-mini.is-orange .stat-icon { background: var(--gradient-orange); }

.stat-mini.is-pink  .stat-value { background: var(--gradient-pink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-mini.is-purple .stat-value { background: var(--gradient-purple); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-mini.is-blue  .stat-value { background: var(--gradient-blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-mini.is-green .stat-value { background: var(--gradient-green); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-mini.is-orange .stat-value { background: var(--gradient-orange); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ============================================================
   Feature Card (large card with top icon tile)
   Reference: LiveStream Pro feature row
   ============================================================ */

.feature-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem 1.25rem 1rem;
    background: var(--bg-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);

    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);

}

.feature-card .feature-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.feature-card .feature-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.feature-card .feature-desc {
    font-size: .85rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
    min-height: 2.6em;
}

.feature-card .feature-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .6rem;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    font-size: .78rem;
    color: var(--text-muted);
}

/* ============================================================
   Icon Tile (top-left colored square on feature-card)
   ============================================================ */

.icon-tile {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    
    flex-shrink: 0;
}

.icon-tile.is-pink   { background: var(--gradient-pink);  }
.icon-tile.is-blue   { background: var(--gradient-blue);  }
.icon-tile.is-green  { background: var(--gradient-green);  }
.icon-tile.is-orange { background: var(--gradient-orange);  }
.icon-tile.is-purple { background: var(--gradient-purple);  }

/* ============================================================
   Badge Soft (pill status badge)
   ============================================================ */

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 500;
    padding: .25rem .65rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}

.badge-soft::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

.badge-soft-success {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.4);
}

.badge-soft-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.4);
}

.badge-soft-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.4);
}

.badge-soft-info {
    background: rgba(6, 182, 212, 0.15);
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.4);
}

.badge-soft-primary {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.45);
}

.badge-soft-pink {
    background: rgba(236, 72, 153, 0.15);
    color: #f9a8d4;
    border-color: rgba(236, 72, 153, 0.4);
}

/* ============================================================
   Welcome Banner
   ============================================================ */

.welcome-banner {
    background:
        linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.18) 100%),
        rgba(9, 9, 11, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);

    position: relative;
    overflow: hidden;
}

.welcome-banner::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.welcome-banner h2 {
    color: var(--text-primary);
    text-shadow: var(--neon-glow);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* ============================================================
   Recording Cards
   ============================================================ */

.rec-card {
    border: 1px solid var(--border-color);

    border-radius: var(--radius-sm);
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.rec-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);

}

.rec-card .card-header {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    background: rgba(9, 9, 11, 0.55);
    border-bottom: 1px solid var(--border-color);
}

/* ============================================================
   Status Badges (legacy, mapped to badge-soft style)
   ============================================================ */

.status-badge {
    font-size: .75rem;
    padding: .2rem .6rem;
    border-radius: 9999px;
    font-weight: 500;
}

.rec-avatar {
    width: 26px;
    height: 26px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

/* Larger avatar on the session-detail header (next to the streamer name link). */
.session-header-avatar {
    width: 36px;
    height: 36px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

/* Fallback icons used when an avatar image can't be loaded. */
.rec-avatar-fallback,
.session-avatar-fallback {
    font-size: 1.4rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.status-recording {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.status-live {
    background: rgba(16, 185, 129, 0.18);
    color: #67e8f9;
    border: 1px solid rgba(16, 185, 129, 0.45);
}

.status-monitoring {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.status-stopped {
    background: rgba(100, 116, 139, 0.2);
    color: var(--text-muted);
    border: 1px solid rgba(100, 116, 139, 0.4);
}

.status-error {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.status-checking {
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.4);
}

/* ============================================================
   Status Indicators (circular dots with glow)
   ============================================================ */

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: .4rem;
}

.status-indicator.recording {
    background: #10b981;
    box-shadow: 0 0 6px #10b981, 0 0 12px rgba(16, 185, 129, 0.5);
    animation: pulse 2s infinite;
}

.status-indicator.processing {
    background: #f59e0b;
    box-shadow: 0 0 6px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.5);
    animation: pulse 2s infinite;
}

.status-indicator.idle {
    background: #64748b;
    box-shadow: 0 0 4px #64748b;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* ============================================================
   Neon Text
   ============================================================ */

.neon-text {
    color: #fff;
    text-shadow: var(--neon-glow);
}

/* ============================================================
   Forms
   ============================================================ */

.form-control,
<h3 class="section-title mb-1"><span class="accent-bar"></span>录制列表</h3>.form-select {
    background-color: var(--bg-overlay);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: border-color .2s, box-shadow .2s;
}

.form-control::placeholder { color: #64748b; }

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-overlay);
    border-color: var(--primary-color);
    color: var(--text-primary);
    box-shadow: 0 0 0 .2rem rgba(16, 185, 129, 0.25);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: rgba(9, 9, 11, 0.6);
    color: var(--text-muted);
}

.form-select option {
    background-color: #18181b;
    color: var(--text-primary);
}

.form-label {
    color: var(--text-primary);
    margin-bottom: .35rem;
    font-weight: 500;
}

.form-text { color: var(--text-muted); }

/* Form check — lifted off pure-black bg for visibility */
.form-check-input {
    background-color: #18181b;                       /* zinc-900 solid, was 60% translucent */
    border: 1.5px solid var(--border-strong);        /* zinc-700, thicker for contrast */
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.form-check-input:hover:not(:checked):not(:disabled) {
    background-color: #27272a;                       /* zinc-800 hover lift */
    border-color: #52525b;                           /* zinc-600 */
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);     /* emerald glow confirms state */
}

.form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .2rem rgba(16, 185, 129, 0.25);
}

.form-check-input:disabled {
    background-color: rgba(24, 24, 27, 0.4);
    border-color: var(--border-color);
    opacity: .6;
    cursor: not-allowed;
}

.form-check-label { color: var(--text-primary); }

/* Input group */
.input-group-text {
    background-color: rgba(24, 24, 27, 0.9);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

/* ============================================================
   Buttons
   ============================================================ */

.btn { border-radius: var(--radius-btn); transition: all .2s ease; }

.btn-primary {
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    
}

.btn-primary:hover {
    background: var(--gradient-primary);
    filter: brightness(1.1);
    
    color: #fff;
    transform: translateY(-1px);
}

.btn-success {
    background: var(--gradient-green);
    border: none;
    color: #fff;
    
}

.btn-success:hover {
    filter: brightness(1.08);
    
    color: #fff;
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    border: none;
    color: #fff;
    
}

.btn-danger:hover {
    filter: brightness(1.08);
    
    color: #fff;
    transform: translateY(-1px);
}

.btn-warning {
    background: var(--gradient-orange);
    border: none;
    color: #fff;
    
}

.btn-warning:hover {
    filter: brightness(1.08);
    
    color: #fff;
    transform: translateY(-1px);
}

.btn-info {
    background: var(--gradient-blue);
    border: none;
    color: #fff;
    
}

.btn-info:hover {
    filter: brightness(1.08);
    
    color: #fff;
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--bg-dark-2);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: #27272a;
    border-color: #52525b;
    color: var(--text-primary);
}

/* Outline buttons */
.btn-outline-primary {
    border: 1px solid var(--primary-color);
    color: var(--text-purple);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    
}

.btn-outline-success {
    border: 1px solid #10b981;
    color: var(--text-green);
    background: transparent;
}

.btn-outline-success:hover {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
    
}

.btn-outline-danger {
    border: 1px solid #ef4444;
    color: #f87171;
    background: transparent;
}

.btn-outline-danger:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
    
}

.btn-outline-warning {
    border: 1px solid #f59e0b;
    color: #fbbf24;
    background: transparent;
}

.btn-outline-warning:hover {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
    
}

.btn-outline-info {
    border: 1px solid #06b6d4;
    color: var(--accent-cyan);
    background: transparent;
}

.btn-outline-info:hover {
    background: #06b6d4;
    border-color: #06b6d4;
    color: #fff;
    
}

.btn-outline-secondary {
    border: 1px solid #64748b;
    color: var(--text-muted);
    background: transparent;
}

.btn-outline-secondary:hover {
    background: #475569;
    border-color: #64748b;
    color: #fff;
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .6;
}

.btn-close:hover { opacity: 1; }

/* ============================================================
   Btn-Gradient (signature pink-purple CTA)
   ============================================================ */

.btn-gradient {
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    padding: .55rem 1.25rem;
    
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-gradient:hover {
    color: #fff;
    transform: translateY(-1px);
    filter: brightness(1.08);
    
}

.btn-gradient:active {
    transform: translateY(0);
}

/* ============================================================
   Modal
   Emerald Glow: deep backdrop + frosted blur + emerald-tinted
   glass content + super-rounded. Per DESIGN_SYSTEM.md §6, popup
   shadows are the only place box-shadow is allowed.
   ============================================================ */

/* Modal dialog: ensure centered & breathing room on mobile */
.modal-dialog { margin-top: 5vh; }

/* Frosted glass backdrop — fixes the "invisible overlay" problem
   that pure-black semi-transparent backdrops cause on dark themes.
   Use higher opacity + backdrop-blur so the page behind clearly
   recedes while staying legible enough to keep context. */
.modal-backdrop {
    --bs-backdrop-opacity: 0.82;
    background-color: #000000;
    backdrop-filter: blur(6px) saturate(0.7);
    -webkit-backdrop-filter: blur(6px) saturate(0.7);
}
.modal-backdrop.show {
    opacity: var(--bs-backdrop-opacity);
    background-color: #000000;
}
/* Subtle emerald tint overlay on the backdrop to reinforce the
   brand color and separate modal layer from page background. */
.modal-backdrop.show::after {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(16, 185, 129, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

/* Modal content: frosted zinc-900 glass + emerald-tinted border */
.modal-content {
    background-color: rgba(24, 24, 27, 0.94);
    backdrop-filter: blur(20px) saturate(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);          /* 20px — rounded but restrained */
    box-shadow: 0 8px 24px hsl(0 0% 0% / 0.3), 0 0 0 1px rgba(16, 185, 129, 0.08);
    color: var(--text-primary);
    overflow: hidden;
}

/* Header: accent bar + padding, no heavy divider */
.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem 1.5rem;
    align-items: center;
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    gap: 0.5rem;
}

.modal-title {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.05rem;
}

.modal-body {
    padding: 1.5rem;
    color: var(--text-primary);
}

/* Close button: enlarge + emerald hover ring (relies on the global
   .btn-close filter:invert(1) defined above to render a white X). */
.modal-content .btn-close {
    width: 2rem;
    height: 2rem;
    opacity: 0.6;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal-content .btn-close:hover {
    opacity: 1;
    background-color: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.30);
}
.modal-content .btn-close:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

/* ============================================================
   Tables
   ============================================================ */

.table {
    color: var(--text-primary);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--text-primary);
    border-color: rgba(16, 185, 129, 0.18);
}

.table thead th {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .04em;
}

.table tbody td { border-color: var(--border-color); }

.table-hover > tbody > tr {
    transition: background-color .15s;
}

.table-hover > tbody > tr:hover {
    --bs-table-hover-bg: var(--hover-default);
    background-color: var(--hover-default);
}

/* ============================================================
   Nav Tabs
   ============================================================ */

.nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    border: 1px solid transparent;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    transition: all .2s;
}

.nav-tabs .nav-link:hover {
    color: var(--text-purple);
    border-color: transparent;
    background: var(--hover-default);
}

.nav-tabs .nav-link.active {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
    border-bottom: 2px solid var(--primary-color);
}

/* ============================================================
   List Group (settings sidebar)
   ============================================================ */

.list-group-item {
    background-color: rgba(24, 24, 27, 0.55);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: all .2s;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: rgba(16, 185, 129, 0.15);
    color: #fff;
}

.list-group-item-action.active {
    background: var(--gradient-primary);
    border-color: var(--primary-color);
    color: #fff;
    
}

/* ============================================================
   Settings Panes
   ============================================================ */

.settings-pane {
    background: transparent;
}

/* ============================================================
   Progress Bars
   ============================================================ */

.progress {
    background-color: rgba(24, 24, 27, 0.8);
    border-radius: 1rem;
    overflow: hidden;
}

.progress-bar {
    background: var(--gradient-primary);
    
}

/* ============================================================
   Alerts
   ============================================================ */

.alert {
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.alert-success {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}

.alert-info {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.4);
    color: #67e8f9;
}

/* ============================================================
   Badges
   ============================================================ */

.badge {
    font-weight: 500;
    padding: .35em .65em;
}

.badge.bg-primary { background: var(--primary-color) !important; }
.badge.bg-success { background: #10b981 !important; }
.badge.bg-danger { background: #ef4444 !important; }
.badge.bg-warning { background: #f59e0b !important; color: #fff !important; }
.badge.bg-info { background: #059669 !important; }
.badge.bg-secondary { background: #475569 !important; }

/* ============================================================
   Dropdown
   ============================================================ */

.dropdown-menu {
    background-color: #18181b;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.dropdown-item {
    color: var(--text-primary);
    transition: background-color .15s;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(16, 185, 129, 0.15);
    color: #fff;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-color);
    color: #fff;
}

.dropdown-divider { border-color: var(--border-color); }
.dropdown-header { color: var(--text-muted); }

/* ============================================================
   Toast
   ============================================================ */

.toast-container { z-index: 9999; }

.toast {
    background-color: rgba(24, 24, 27, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);

}

.toast-header {
    background-color: rgba(9, 9, 11, 0.9);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* ============================================================
   Accordion
   ============================================================ */

.accordion-item {
    background-color: transparent;
    border: 1px solid var(--border-color);
}

.accordion-button {
    background-color: rgba(24, 24, 27, 0.5);
    color: var(--text-primary);
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(16, 185, 129, 0.15);
    color: var(--text-purple);
}

.accordion-button:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .2rem rgba(16, 185, 129, 0.25);
}

.accordion-body { color: var(--text-primary); }

/* ============================================================
   Spinner
   ============================================================ */

.spinner-border {
    color: var(--primary-color);
}

/* ============================================================
   Links
   ============================================================ */

a { color: var(--text-purple); transition: color .2s; }
a:hover { color: #6ee7b7; }          /* emerald-300, was violet-200 #ddd6fe */

/* ============================================================
   Text utilities (dark theme overrides)
   ============================================================ */

.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--text-purple) !important; }
.text-success { color: var(--text-green) !important; }
.text-danger { color: #f87171 !important; }
.text-warning { color: #fbbf24 !important; }
.text-info { color: var(--accent-cyan) !important; }
.text-secondary { color: var(--text-muted) !important; }
.text-light { color: var(--text-primary) !important; }
.text-dark { color: var(--text-primary) !important; }
.text-white { color: #fff !important; }

/* ============================================================
   Background utilities
   ============================================================ */

.bg-dark { background-color: var(--bg-dark) !important; }
.bg-light { background-color: var(--bg-dark-2) !important; }
.bg-black { background-color: #000 !important; }

/* ============================================================
   AI Summary Content
   ============================================================ */

.ai-summary-content {
    color: var(--text-primary);
    line-height: 1.7;
}

.ai-summary-content p { color: var(--text-primary); }

.ai-summary-content code {
    background: rgba(9, 9, 11, 0.8);
    color: var(--accent-cyan);
    padding: .15rem .4rem;
    border-radius: .25rem;
    font-size: .9em;
}

.ai-summary-content pre {
    background: rgba(9, 9, 11, 0.8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1rem;
    overflow-x: auto;
}

.ai-summary-content pre code {
    background: transparent;
    color: var(--text-primary);
}

.ai-summary-content h1,
.ai-summary-content h2,
.ai-summary-content h3,
.ai-summary-content h4,
.ai-summary-content h5,
.ai-summary-content h6 {
    color: var(--text-purple);
    margin-top: 1rem;
}

.ai-summary-content ul,
.ai-summary-content ol { color: var(--text-primary); }

.ai-summary-content blockquote {
    border-left: 3px solid var(--primary-color);
    padding-left: 1rem;
    color: var(--text-muted);
    background: rgba(16, 185, 129, 0.08);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: .5rem 1rem;
    margin: .5rem 0;
}

.ai-summary-content a { color: var(--text-purple); }

.ai-summary-content table {
    border-collapse: collapse;
    width: 100%;
    margin: .75rem 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.ai-summary-content th,
.ai-summary-content td {
    padding: .5rem .75rem;
    border: 1px solid var(--border-color);
    text-align: left;
}

.ai-summary-content th {
    background: rgba(16, 185, 129, 0.15);
    font-weight: 600;
    color: var(--text-primary);
}

/* ============================================================
   AI Segments (time-stamped transcript)
   ============================================================ */

.ai-segments-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Inline mini video player for segment comparison */
.ai-inline-player {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(0, 0, 0, .85);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: .75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}

.ai-inline-player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem .65rem;
    background: rgba(0, 0, 0, .6);
}

.ai-inline-player-title {
    font-size: .8rem;
    color: #d1fae5;
    font-weight: 600;
}

.ai-inline-video {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    display: block;
    background: #000;
}

.ai-segment {
    display: flex;
    gap: .75rem;
    padding: .65rem .85rem;
    background: rgba(16, 185, 129, .06);
    border: 1px solid rgba(16, 185, 129, .2);
    border-radius: var(--radius-sm);
    transition: background .15s, border-color .15s, transform .15s;
}

.ai-segment:hover {
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .45);
}

.ai-segment-time {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: .82rem;
    font-weight: 600;
    color: var(--accent-green);
    background: rgba(16, 185, 129, .12);
    padding: .25rem .55rem;
    border-radius: .35rem;
    min-width: 105px;
    cursor: pointer;
    user-select: none;
}

.ai-segment-time:hover {
    background: rgba(16, 185, 129, .25);
    color: #d1fae5;
}

.ai-segment-time i {
    font-size: .85rem;
}

.ai-segment-time[role="button"] {
    border: none;
}

.ai-segment-text {
    flex: 1 1 auto;
    color: var(--text-primary);
    line-height: 1.55;
    font-size: .92rem;
    word-break: break-word;
    cursor: pointer;
}

.ai-segment-text:hover {
    color: #d1fae5;
}

.ai-segment-meta {
    display: block;
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: .2rem;
}

/* ===================================================================
   Bootstrap tab-pane fallback
   The bundled bootstrap.min.css in this project is a custom build that
   is missing the ``.tab-pane.active``/``.tab-pane.show`` rules, so
   every tab pane stays ``display:none`` regardless of which tab the
   user clicks.  Re-implement the standard Bootstrap 5 behaviour here.
   =================================================================== */
.tab-pane.active,
.tab-pane.show.active {
    display: block;
}

.tab-pane.fade {
    transition: opacity 0.15s linear;
}

.tab-pane.fade:not(.show) {
    opacity: 0;
}

.tab-pane.fade.show.active {
    opacity: 1;
}

/* ============================================================
   Scrollbars (WebKit)
   ============================================================ */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb {
    background: #047857;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #10b981; }

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #065f46 #09090b;
}

/* ============================================================
   Misc
   ============================================================ */

hr { border-color: var(--border-color); opacity: .5; }

.text-center { text-align: center; }

small, .small { color: var(--text-muted); }

.bg-black { background-color: #000 !important; }

/* Selection */
::selection {
    background: rgba(16, 185, 129, 0.35);
    color: #fff;
}

/* ===== Stats Modal / Chart ===== */
.stats-chart-container {
    position: relative;
    height: 320px;
    width: 100%;
}

.stats-chart-container canvas {
    max-height: 320px;
}

.stat-mini-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.stat-mini-card h4 {
    color: var(--text-primary);
}

/* ===== Sessions Page ===== */
.session-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.session-card:hover {
    transform: translateY(-1px);
    
    border-color: var(--accent-purple);
}
.session-card.border-primary {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 1px var(--primary-color);
}
.session-detail-panel .card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

/* ---- Danmu / chat stream panel ---- */
.session-danmu-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.session-danmu-panel .card-header {
    background: rgba(9, 9, 11, 0.55);
    border-bottom: 1px solid var(--border-color);
}

.session-danmu-panel .card-footer {
    background: rgba(9, 9, 11, 0.55);
    border-top: 1px solid var(--border-color);
}

/* Scrollbar styling for the danmu body */
.session-danmu-panel #danmu-body::-webkit-scrollbar { width: 5px; }
.session-danmu-panel #danmu-body::-webkit-scrollbar-track { background: transparent; }
.session-danmu-panel #danmu-body::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}

/* Individual danmu message row */
.danmu-msg {
    padding: .35rem .75rem;
    border-bottom: 1px solid rgba(39, 39, 42, 0.5);
    font-size: .82rem;
    line-height: 1.5;
    word-break: break-word;
    animation: danmu-in .25s ease-out;
}
.danmu-msg:hover { background: rgba(16, 185, 129, 0.06); }

.danmu-msg .danmu-nick {
    font-weight: 600;
    margin-right: .35rem;
}
.danmu-msg .danmu-text { color: var(--text-primary); }
.danmu-msg .danmu-time {
    color: var(--text-muted);
    font-size: .68rem;
    float: right;
    opacity: .6;
}

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

/* ============================================================
   Utility additions for the new theme
   ============================================================ */

/* Page-level wrapper using a glass container (optional) */
.app-shell {
    padding: 1.5rem;
}

/* Subtle inner divider used inside glass cards */
.glass-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--border-color) 50%, transparent 100%);
    margin: .75rem 0;
}

/* Page heading row */
.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.page-heading h1,
.page-heading h2,
.page-heading h3 {
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
}

.page-heading .subtitle {
    color: var(--text-muted);
    font-size: .9rem;
    margin-top: .2rem;
}

/* Sub-section heading used inside cards */
.section-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.section-title .accent-bar {
    width: 3px;
    height: 16px;
    background: var(--gradient-primary);
    border-radius: 2px;
    display: inline-block;
}

/* Spacing helper for stack of feature cards */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

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

/* Stat-mini grid (4 columns) */
.stat-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

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

/* Page background decorative glow orbs */
.page-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.page-glow::before,
.page-glow::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
}

.page-glow::before {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, #10b981 0%, transparent 70%);
    top: -120px;
    right: -80px;
}

.page-glow::after {
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, #059669 0%, transparent 70%);
    bottom: -180px;
    left: -120px;
}

/* NOTE: Do NOT set z-index here — a stacking context on .main-content
   traps Bootstrap modals (z-index:1055) below the backdrop (z-index:1050
   appended to <body>), making the modal invisible behind the overlay.
   position:relative alone (z-index:auto) does NOT create a stacking context. */
.main-content { position: relative; }


/* ============================================================
   EMERALD GLOW DEMO THEME
   Design system: pure black + emerald-500 + super-rounded + no shadow
   Reference: DESIGN_SYSTEM.md
   Usage: only on home.html demo, coexists with purple theme.
   ============================================================ */

:root {
    /* ---- Brand (Emerald Glow) ---- */
    --emerald-primary: #10b981;          /* hsl(160 84% 39%) */
    --emerald-primary-hover: #34d399;    /* hsl(160 75% 50%) */
    --emerald-primary-active: #059669;   /* hsl(160 84% 30%) */
    --emerald-glow-rgb: 16, 185, 129;

    /* ---- Surfaces (zinc scale, lightless) ---- */
    --emerald-bg: #000000;               /* page background */
    --emerald-surface: #18181b;          /* zinc-900 cards */
    --emerald-surface-2: #09090b;        /* zinc-950 deeper panels */
    --emerald-surface-translucent: rgba(24, 24, 27, 0.5);
    --emerald-surface-translucent-2: rgba(24, 24, 27, 0.8);

    /* ---- Borders ---- */
    --emerald-border: #27272a;           /* zinc-800 */
    --emerald-border-strong: #3f3f46;    /* zinc-700 */

    /* ---- Text ---- */
    --emerald-text: #ffffff;
    --emerald-text-muted: #a1a1aa;       /* zinc-400 */
    --emerald-text-dim: #71717a;         /* zinc-500 */
    --emerald-text-emerald: #34d399;     /* emerald-400 */

    /* ---- Status colors (used as accents only) ---- */
    --emerald-status-running: #06b6d4;   /* cyan-500 */
    --emerald-status-warning: #f59e0b;   /* amber-500 */
    --emerald-status-danger:  #ef4444;   /* red-500 */
    --emerald-status-paused:  #71717a;   /* zinc-500 */

    /* ---- Geometry (rounded, tuned down from super-rounded) ---- */
    --emerald-radius-input: 0.5rem;      /* 8px  */
    --emerald-radius-md:     0.75rem;    /* 12px */
    --emerald-radius-btn:    0.625rem;   /* 10px (was 1rem/16px) */
    --emerald-radius-kpi:    1rem;       /* 16px (was 1.5rem/24px) */
    --emerald-radius-card:   1.25rem;    /* 20px (was 2rem/32px) */
    --emerald-radius-insight:1.5rem;     /* 24px (was 2.5rem/40px) */
    --emerald-radius-pill:   999px;

    /* ---- Popup-only shadow (never on cards) ---- */
    --emerald-shadow-popup: 0 8px 24px hsl(0 0% 0% / 0.3);

    /* ---- Motion ---- */
    --emerald-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- Global adjustments when demo scope is active ---- */
.emerald-scope {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--emerald-bg);
    color: var(--emerald-text);
    position: relative;
}

/* Demo selection highlight */
.emerald-scope ::selection {
    background: rgba(var(--emerald-glow-rgb), 0.3);
    color: var(--emerald-text);
}

/* Demo scrollbar */
.emerald-scope ::-webkit-scrollbar { width: 8px; height: 8px; }
.emerald-scope ::-webkit-scrollbar-track { background: var(--emerald-bg); }
.emerald-scope ::-webkit-scrollbar-thumb {
    background: var(--emerald-border);
    border-radius: var(--emerald-radius-pill);
}
.emerald-scope ::-webkit-scrollbar-thumb:hover { background: var(--emerald-border-strong); }


/* ============================================================
   Sticky Frosted Glass Header
   ============================================================ */

.emerald-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--emerald-border);
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.emerald-header__title {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--emerald-text);
    font-size: 1.05rem;
}
.emerald-header__subtitle {
    color: var(--emerald-text-muted);
    font-size: 0.78rem;
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--emerald-border);
}
.emerald-header__spacer { flex: 1; }
.emerald-header__user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--emerald-text-muted);
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--emerald-radius-btn);
    border: 1px solid var(--emerald-border);
    background: var(--emerald-surface-translucent);
    transition: all 200ms var(--emerald-ease);
}
.emerald-header__user:hover {
    color: var(--emerald-text);
    border-color: var(--emerald-border-strong);
}


/* ============================================================
   Welcome / Hero area
   ============================================================ */

.emerald-welcome {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 2rem 1.5rem 2rem;
    border-radius: var(--emerald-radius-card);
    background: var(--emerald-surface);
    border: 1px solid var(--emerald-border);
    margin: 1.5rem 0 2rem;
}
.emerald-welcome__glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 260px;
    height: 260px;
    background: rgba(var(--emerald-glow-rgb), 0.10);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}
.emerald-welcome__glow-2 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 220px;
    height: 220px;
    background: rgba(var(--emerald-glow-rgb), 0.06);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}
.emerald-welcome > * { position: relative; z-index: 1; }
.emerald-welcome__title {
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0 0 0.75rem;
    color: var(--emerald-text);
    text-transform: uppercase;
}
.emerald-welcome__subtitle {
    color: var(--emerald-text-muted);
    font-size: 1rem;
    margin: 0;
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
}
.emerald-welcome__accent {
    display: inline-block;
    width: 56px;
    height: 3px;
    background: var(--emerald-primary);
    border-radius: var(--emerald-radius-pill);
    margin: 1rem auto 0;
}

@media (max-width: 640px) {
    .emerald-welcome { padding: 1.5rem 1.25rem 1.5rem; }
    .emerald-welcome__title { font-size: 1.75rem; }
}


/* ============================================================
   Section Title
   ============================================================ */

.emerald-section {
    margin: 2.25rem 0 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}
.emerald-section__bar {
    width: 4px;
    height: 1.1rem;
    background: var(--emerald-primary);
    border-radius: var(--emerald-radius-pill);
    box-shadow: 0 0 12px rgba(var(--emerald-glow-rgb), 0.4);
    flex-shrink: 0;
    align-self: center;
}
.emerald-section__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--emerald-text);
    letter-spacing: -0.01em;
}
.emerald-section__hint {
    color: var(--emerald-text-dim);
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}


/* ============================================================
   KPI grid (4 columns)
   ============================================================ */

.emerald-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}
@media (max-width: 1200px) {
    .emerald-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .emerald-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .emerald-kpi-grid { grid-template-columns: 1fr; }
}

.emerald-kpi {
    background: var(--emerald-surface-translucent);
    border: 1px solid var(--emerald-border);
    border-radius: var(--emerald-radius-kpi);
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 300ms var(--emerald-ease);
    position: relative;
    overflow: hidden;
}
.emerald-kpi:hover {
    border-color: var(--emerald-border-strong);
    background: var(--emerald-surface-translucent-2);
}
.emerald-kpi__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--emerald-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.emerald-kpi__body { min-width: 0; flex: 1; }
.emerald-kpi__label {
    color: var(--emerald-text-muted);
    font-size: 0.78rem;
    margin: 0 0 0.4rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.emerald-kpi__value {
    color: var(--emerald-text);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-family: "IBM Plex Mono", "SF Mono", Menlo, monospace;
}
.emerald-kpi__unit {
    color: var(--emerald-text-dim);
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 0.25rem;
    font-family: "Inter", sans-serif;
}

/* ---- KPI color variants (status semantics) ---- */
.emerald-kpi.is-pink .emerald-kpi__icon {
    background: rgba(236, 72, 153, 0.10);
    color: #f472b6;
    border-color: rgba(236, 72, 153, 0.20);
}
.emerald-kpi.is-green .emerald-kpi__icon {
    background: rgba(var(--emerald-glow-rgb), 0.10);
    color: var(--emerald-text-emerald);
    border-color: rgba(var(--emerald-glow-rgb), 0.25);
}
.emerald-kpi.is-green .emerald-kpi__value { color: var(--emerald-text-emerald); }
.emerald-kpi.is-blue .emerald-kpi__icon {
    background: rgba(6, 182, 212, 0.10);
    color: #22d3ee;
    border-color: rgba(6, 182, 212, 0.25);
}
.emerald-kpi.is-blue .emerald-kpi__value { color: #67e8f9; }
.emerald-kpi.is-purple .emerald-kpi__icon {
    background: rgba(168, 85, 247, 0.10);
    color: #c4b5fd;
    border-color: rgba(168, 85, 247, 0.25);
}
.emerald-kpi.is-purple .emerald-kpi__value { color: var(--text-violet); }


/* ============================================================
   Status badge (success / running / warning / failed / paused)
   ============================================================ */

.emerald-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: var(--emerald-radius-pill);
    padding: 0.25rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
}
.emerald-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.emerald-badge.is-success {
    background: rgba(var(--emerald-glow-rgb), 0.10);
    color: var(--emerald-text-emerald);
    border-color: rgba(var(--emerald-glow-rgb), 0.25);
}
.emerald-badge.is-info {
    background: rgba(6, 182, 212, 0.10);
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.25);
}
.emerald-badge.is-warning {
    background: rgba(245, 158, 11, 0.10);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.25);
}
.emerald-badge.is-danger {
    background: rgba(239, 68, 68, 0.10);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.25);
}
.emerald-badge.is-paused {
    background: rgba(113, 113, 122, 0.15);
    color: var(--emerald-text-muted);
    border-color: rgba(113, 113, 122, 0.30);
}
.emerald-badge.is-mint {
    background: rgba(var(--emerald-glow-rgb), 0.12);
    color: var(--emerald-primary);
    border-color: rgba(var(--emerald-glow-rgb), 0.30);
}
.emerald-badge.is-pink {
    background: rgba(236, 72, 153, 0.10);
    color: #f472b6;
    border-color: rgba(236, 72, 153, 0.25);
}
.emerald-badge.is-purple {
    background: rgba(168, 85, 247, 0.10);
    color: #d8b4fe;
    border-color: rgba(168, 85, 247, 0.25);
}


/* ============================================================
   Feature card (large, with glow decoration) — for quick actions
   ============================================================ */

.emerald-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* ============================================================
   Live chat / danmu panel
   ============================================================ */
.chat-scroll {
    max-height: 280px;
    min-height: 80px;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    scroll-behavior: smooth;
}
.chat-scroll .chat-row {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    line-height: 1.45;
    word-break: break-word;
}
.chat-scroll .chat-row:last-child {
    border-bottom: none;
}
.chat-scroll .chat-row .chat-nick {
    color: var(--primary-color);
    font-weight: 600;
    margin-right: 0.4rem;
}
.chat-scroll .chat-row.is-gift .chat-nick {
    color: #f472b6;
}
.chat-scroll .chat-row.is-gift .chat-content {
    color: #fda4af;
}
.chat-scroll .chat-row.is-like .chat-nick {
    color: #f59e0b;
}
.chat-scroll .chat-row.is-social .chat-nick {
    color: #a78bfa;
}
.chat-scroll .chat-row .chat-time {
    color: var(--emerald-text-muted);
    font-size: 0.75rem;
    margin-left: 0.4rem;
}
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
    background: #71717a;
}
.status-dot.is-on {
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
}
.status-dot.status-dot-off {
    background: #71717a;
}
@media (max-width: 1200px) {
    .emerald-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .emerald-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .emerald-feature-grid { grid-template-columns: 1fr; }
}

.emerald-feature {
    position: relative;
    overflow: hidden;
    background: var(--emerald-surface);
    border: 1px solid var(--emerald-border);
    border-radius: var(--emerald-radius-card);
    padding: 2rem;
    transition: all 300ms var(--emerald-ease);
    color: var(--emerald-text);
    display: block;
    text-decoration: none;
}
.emerald-feature:hover {
    border-color: rgba(var(--emerald-glow-rgb), 0.5);
    transform: translateY(-2px);
}
.emerald-feature__glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 200px;
    background: rgba(var(--emerald-glow-rgb), 0.10);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}
.emerald-feature > * { position: relative; z-index: 1; }
.emerald-feature__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}
.emerald-feature__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--emerald-radius-md);
    background: rgba(var(--emerald-glow-rgb), 0.10);
    color: var(--emerald-text-emerald);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border: 1px solid rgba(var(--emerald-glow-rgb), 0.20);
    flex-shrink: 0;
}
.emerald-feature__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--emerald-text);
    letter-spacing: -0.01em;
    flex: 1;
}
.emerald-feature__desc {
    color: var(--emerald-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 1.5rem;
}
.emerald-feature__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--emerald-border);
    padding-top: 1.25rem;
    color: var(--emerald-text-muted);
    font-size: 0.85rem;
}
.emerald-feature__foot i { margin-right: 0.35rem; color: var(--emerald-text-dim); }


/* ============================================================
   Buttons
   ============================================================ */

.emerald-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid transparent;
    border-radius: var(--emerald-radius-btn);
    padding: 0.6rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 200ms var(--emerald-ease);
    line-height: 1.2;
    white-space: nowrap;
    font-family: inherit;
}
.emerald-btn-primary {
    background: var(--emerald-primary);
    color: #000000;
}
.emerald-btn-primary:hover {
    background: var(--emerald-primary-hover);
    color: #000000;
}
.emerald-btn-primary:active {
    background: var(--emerald-primary-active);
}
.emerald-btn-secondary {
    background: var(--emerald-surface);
    color: var(--emerald-text);
    border-color: var(--emerald-border);
}
.emerald-btn-secondary:hover {
    border-color: var(--emerald-border-strong);
    background: rgba(39, 39, 42, 0.5);
    color: var(--emerald-text);
}
.emerald-btn-ghost {
    background: transparent;
    color: var(--emerald-text);
}
.emerald-btn-ghost:hover {
    background: rgba(39, 39, 42, 0.30);
    color: var(--emerald-text);
}
.emerald-btn-danger {
    background: rgba(239, 68, 68, 0.10);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.30);
}
.emerald-btn-danger:hover {
    background: rgba(239, 68, 68, 0.20);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.50);
}


/* ============================================================
   Small feature card (4-column) — for main features
   ============================================================ */

.emerald-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    background: var(--emerald-surface);
    border: 1px solid var(--emerald-border);
    border-radius: var(--emerald-radius-card);
    padding: 1.75rem;
}
@media (max-width: 1024px) {
    .emerald-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .emerald-mini-grid { grid-template-columns: 1fr; }
}

.emerald-mini {
    background: var(--emerald-surface-2);
    border: 1px solid var(--emerald-border);
    border-radius: var(--emerald-radius-kpi);
    padding: 1.25rem;
    transition: all 300ms var(--emerald-ease);
}
.emerald-mini:hover {
    border-color: var(--emerald-border-strong);
    background: #0c0c0e;
}
.emerald-mini__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.emerald-mini__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--emerald-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.emerald-mini__title {
    font-size: 0.98rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--emerald-text);
    letter-spacing: -0.01em;
}
.emerald-mini__desc {
    color: var(--emerald-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* Icon variants */
.emerald-mini__icon.is-blue   { background: rgba(6, 182, 212, 0.10); color: #67e8f9; border: 1px solid rgba(6, 182, 212, 0.20); }
.emerald-mini__icon.is-green  { background: rgba(var(--emerald-glow-rgb), 0.10); color: var(--emerald-text-emerald); border: 1px solid rgba(var(--emerald-glow-rgb), 0.20); }
.emerald-mini__icon.is-pink   { background: rgba(236, 72, 153, 0.10); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.20); }
.emerald-mini__icon.is-purple { background: rgba(168, 85, 247, 0.10); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.20); }
.emerald-mini__icon.is-warning{ background: rgba(245, 158, 11, 0.10); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.20); }
.emerald-mini__icon.is-mint   { background: rgba(var(--emerald-glow-rgb), 0.10); color: var(--emerald-primary); border: 1px solid rgba(var(--emerald-glow-rgb), 0.25); }


/* ============================================================
   Legacy .stat-mini color override (color mapping update only)
   Keeps HTML class names: .stat-mini.is-pink / .is-green / .is-blue / .is-purple
   ============================================================ */

/* When wrapped in .emerald-scope, repurpose gradient fills to status-tinted glass */
.emerald-scope .stat-mini.is-pink   .stat-icon {
    background: rgba(236, 72, 153, 0.10) !important;
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.20);
}
.emerald-scope .stat-mini.is-green  .stat-icon {
    background: rgba(var(--emerald-glow-rgb), 0.10) !important;
    color: var(--emerald-text-emerald);
    border: 1px solid rgba(var(--emerald-glow-rgb), 0.25);
}
.emerald-scope .stat-mini.is-blue   .stat-icon {
    background: rgba(6, 182, 212, 0.10) !important;
    color: #67e8f9;
    border: 1px solid rgba(6, 182, 212, 0.25);
}
.emerald-scope .stat-mini.is-purple .stat-icon {
    background: rgba(168, 85, 247, 0.10) !important;
    color: #c4b5fd;
    border: 1px solid rgba(168, 85, 247, 0.25);
}

/* Reset gradient text fills to solid colors in emerald scope */
.emerald-scope .stat-mini.is-pink   .stat-value,
.emerald-scope .stat-mini.is-green  .stat-value,
.emerald-scope .stat-mini.is-blue   .stat-value,
.emerald-scope .stat-mini.is-purple .stat-value {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--emerald-text) !important;
}
.emerald-scope .stat-mini.is-green  .stat-value { color: var(--emerald-text-emerald) !important; }
.emerald-scope .stat-mini.is-blue   .stat-value { color: #67e8f9 !important; }
.emerald-scope .stat-mini.is-purple .stat-value { color: var(--text-violet) !important; }

/* Override stat-mini base to fit dark surface */
.emerald-scope .stat-mini {
    background: var(--emerald-surface-translucent);
    border: 1px solid var(--emerald-border);
    color: var(--emerald-text);
}
.emerald-scope .stat-mini:hover { border-color: var(--emerald-border-strong); }
.emerald-scope .stat-mini .stat-label { color: var(--emerald-text-muted); }
.emerald-scope .stat-mini .unit { color: var(--emerald-text-dim); }
.emerald-scope .stat-mini .badge-soft { color: var(--emerald-text-muted); }

/* Override .feature-card base style inside emerald scope (subtle visual) */
.emerald-scope .feature-card {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--emerald-text);
}
.emerald-scope .feature-card .feature-title { color: var(--emerald-text); }
.emerald-scope .feature-card .feature-desc { color: var(--emerald-text-muted); }
.emerald-scope .feature-card .feature-foot {
    border-top: 1px solid var(--emerald-border);
    color: var(--emerald-text-muted);
}
.emerald-scope .feature-card .feature-foot .btn {
    border-radius: var(--emerald-radius-btn) !important;
}

/* Override .icon-tile base to remove neon glow shadow inside emerald scope */
.emerald-scope .icon-tile {
    box-shadow: none !important;
    background: rgba(var(--emerald-glow-rgb), 0.10) !important;
    color: var(--emerald-text-emerald) !important;
    border: 1px solid rgba(var(--emerald-glow-rgb), 0.20);
}
.emerald-scope .icon-tile.is-pink   { background: rgba(236, 72, 153, 0.10) !important; color: #f472b6 !important; border-color: rgba(236, 72, 153, 0.20); }
.emerald-scope .icon-tile.is-blue   { background: rgba(6, 182, 212, 0.10) !important; color: #67e8f9 !important; border-color: rgba(6, 182, 212, 0.20); }
.emerald-scope .icon-tile.is-green  { background: rgba(var(--emerald-glow-rgb), 0.10) !important; color: var(--emerald-text-emerald) !important; border-color: rgba(var(--emerald-glow-rgb), 0.25); }
.emerald-scope .icon-tile.is-purple { background: rgba(245, 158, 11, 0.10) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.25); }

/* Override .welcome-banner to flat dark surface */
.emerald-scope .welcome-banner {
    display: none;
}

/* Override .glass-card to fit demo (no heavy shadow) */
.emerald-scope .glass-card {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}

/* Override .app-shell for emerald scope to use cleaner spacing */
.emerald-scope.app-shell { padding: 0; }

/* NOTE: Removed .emerald-scope .page-heading / .section-title / .accent-bar
   { display: none; } — these belonged to the home demo theme but .emerald-scope
   is applied globally in base.html, which hid the real toolbar (add/batch/search
   buttons) on recordings.html and live.html. home.html does not use these classes,
   so removing them is safe. */

/* ============================================================
   Home page — new KPI/panel styles (added with home.html redesign)
   ============================================================ */

/* Extra KPI color variants used by home.html that previously had no
   icon background. They mirror the badge / mini-icon palette so the
   cards stay visually consistent. */
.emerald-kpi.is-warning .emerald-kpi__icon {
    background: rgba(245, 158, 11, 0.10);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.20);
}
.emerald-kpi.is-warning .emerald-kpi__value { color: #fcd34d; }
.emerald-kpi.is-mint .emerald-kpi__icon {
    background: rgba(var(--emerald-glow-rgb), 0.12);
    color: var(--emerald-primary);
    border-color: rgba(var(--emerald-glow-rgb), 0.30);
}
.emerald-kpi.is-mint .emerald-kpi__value { color: var(--emerald-primary); }
.emerald-kpi.is-info .emerald-kpi__icon {
    background: rgba(59, 130, 246, 0.10);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.20);
}
.emerald-kpi.is-info .emerald-kpi__value { color: #93c5fd; }
.emerald-kpi.is-danger .emerald-kpi__icon {
    background: rgba(239, 68, 68, 0.10);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.20);
}
.emerald-kpi.is-danger .emerald-kpi__value { color: #fca5a5; }

/* ---- Generic panel (used by live snapshot / trend / push / etc.) ---- */
.emerald-panel {
    background: var(--emerald-surface-translucent);
    border: 1px solid var(--emerald-border);
    border-radius: var(--emerald-radius-card);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.emerald-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--emerald-border);
    background: rgba(255, 255, 255, 0.02);
}
.emerald-panel__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--emerald-text);
    display: flex;
    align-items: center;
}
.emerald-panel__body {
    padding: 1rem 1.25rem;
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.emerald-link {
    color: var(--emerald-text-emerald);
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 150ms ease;
}
.emerald-link:hover { color: var(--emerald-primary-hover); }

/* ---- Empty state inside panel bodies ---- */
.emerald-empty {
    text-align: center;
    color: var(--emerald-text-muted);
    padding: 2rem 1rem;
    font-size: 0.88rem;
}
.emerald-empty i {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}
.emerald-empty.small { padding: 0.75rem 0; font-size: 0.78rem; }

/* ---- Live now (recording) list ---- */
.live-now-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    text-decoration: none;
    color: inherit;
    transition: background 150ms ease;
}
.live-now-row:last-child { border-bottom: none; }
.live-now-row:hover { background: rgba(255, 255, 255, 0.03); border-radius: 0.5rem; }
.live-now-row__main {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    flex: 1;
}
.live-now-row__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: live-now-pulse 1.6s ease-out infinite;
    flex-shrink: 0;
}
@keyframes live-now-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.live-now-row__meta { min-width: 0; flex: 1; }
.live-now-row__title {
    color: var(--emerald-text);
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-now-row__sub {
    color: var(--emerald-text-muted);
    font-size: 0.75rem;
    margin-top: 0.15rem;
}
.live-now-row__stats {
    display: flex;
    gap: 0.85rem;
    font-size: 0.78rem;
    color: var(--emerald-text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.live-now-row__stats i { margin-right: 0.2rem; opacity: 0.7; }

/* Anchor avatar rendered inside the live-now row. Slightly smaller than the
   recording-list avatar so the row stays compact on the home dashboard. */
.live-now-avatar {
    width: 28px;
    height: 28px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}
.live-now-avatar-fallback {
    font-size: 1.5rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ---- Platform breakdown bars ---- */
.platform-row { margin-bottom: 0.85rem; }
.platform-row:last-child { margin-bottom: 0; }
.platform-row__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
    font-size: 0.82rem;
}
.platform-row__name { color: var(--emerald-text); font-weight: 500; }
.platform-row__count { color: var(--emerald-text-muted); font-variant-numeric: tabular-nums; }
.platform-row__bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--emerald-radius-pill);
    overflow: hidden;
}
.platform-row__bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--emerald-primary), var(--emerald-primary-hover));
    border-radius: inherit;
    transition: width 400ms ease;
}

/* ---- Push channel success bars ---- */
.push-channel-row {
    display: grid;
    grid-template-columns: 90px 1fr 150px;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.85rem;
}
.push-channel-row:last-child { border-bottom: none; }
.push-channel-row__name { color: var(--emerald-text); font-weight: 500; }
.push-channel-row__bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--emerald-radius-pill);
    overflow: hidden;
}
.push-channel-row__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 400ms ease;
}
.push-channel-row__stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    font-variant-numeric: tabular-nums;
    color: var(--emerald-text-muted);
}
.push-channel-row__rate {
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--emerald-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
}
.push-channel-row.is-success .push-channel-row__bar > span { background: linear-gradient(90deg, #10b981, #34d399); }
.push-channel-row.is-success .push-channel-row__rate { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.push-channel-row.is-warning .push-channel-row__bar > span { background: linear-gradient(90deg, #f59e0b, #fcd34d); }
.push-channel-row.is-warning .push-channel-row__rate { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.push-channel-row.is-danger  .push-channel-row__bar > span { background: linear-gradient(90deg, #ef4444, #fca5a5); }
.push-channel-row.is-danger  .push-channel-row__rate { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.push-channel-row.is-muted   .push-channel-row__bar > span { background: rgba(255, 255, 255, 0.1); }
.push-channel-row.is-muted   .push-channel-row__rate { background: rgba(255, 255, 255, 0.06); color: var(--emerald-text-muted); }

@media (max-width: 768px) {
    .push-channel-row {
        grid-template-columns: 70px 1fr;
        grid-template-areas:
            "name stats"
            "bar  bar";
        row-gap: 0.35rem;
    }
    .push-channel-row__name { grid-area: name; }
    .push-channel-row__bar  { grid-area: bar; }
    .push-channel-row__stats { grid-area: stats; }
}