/* ============================================================
   LMS LAB · DOWNLOAD LAB — "TERMINAL//POP" UI
   Signal-lime trên nền đen ám lục · Be Vietnam Pro + JetBrains Mono
   Không glass, không gradient tím — panel đặc, bracket HUD, sticker.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;0,800;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #050806;
    --bg-2: #070C09;
    --panel: #0A100C;
    --panel-2: #0D1410;
    --panel-3: #101913;
    --line: #1B2620;
    --line-2: #2B3B2F;
    --ink: #E9F3E5;
    --ink-dim: #9FB3A0;
    --ink-faint: #5E7263;

    --lime: #A8F548;
    --lime-deep: #6FBF1E;
    --lime-dark: #0F1A08;
    --cyan: #52E0C8;
    --violet: #B78CF2;
    --coral: #FF6E5E;
    --gold: #F5C448;

    --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

    --r-sm: 6px;
    --r: 10px;
    --r-lg: 14px;

    --shadow-pop: 0 22px 60px rgba(0, 0, 0, 0.55);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   LIGHT MODE — [data-theme="light"]
   Nền trắng ngà sạch · Signature green · Panel xám nhẹ
   ============================================================ */
/* ============================================================
   LIGHT MODE — [data-theme="light"]
   Ultra-crisp High-Contrast UI · Pure White Panels · Rich Charcoal Text
   Tailwind Emerald 600 Signature Brand · WCAG AAA Compliant Readability
   ============================================================ */
[data-theme="light"] {
    --bg: #F8FAF9;
    --bg-2: #F1F5F2;
    --panel: #FFFFFF;
    --panel-2: #F8FAFC;
    --panel-3: #EDF2F7;
    --line: #E2E8F0;
    --line-2: #CBD5E1;
    --ink: #0F172A;        /* deep rich charcoal - 15:1 contrast */
    --ink-dim: #334155;    /* dark slate - 9:1 contrast, crisp and clear */
    --ink-faint: #64748B;  /* cool slate - 5:1 contrast, meets WCAG AA */

    --lime: #16A34A;       /* vibrant emerald 600 */
    --lime-deep: #15803D;  /* deep emerald 700 */
    --lime-dark: #DCFCE7;  /* soft green highlight badge */
    --cyan: #0284C7;       /* vibrant sky blue */
    --violet: #7C3AED;
    --coral: #DC2626;
    --gold: #D97706;

    --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Background canvas in light mode */
[data-theme="light"] #bg-canvas { opacity: 0.12; }
[data-theme="light"] .noise-layer { opacity: 0.15; }

/* Navbar light mode */
[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .nav-brand-name { color: #0F172A; }
[data-theme="light"] .nav-brand-sub { color: #15803D; }
[data-theme="light"] .nav-btn { color: #334155; font-weight: 700; }
[data-theme="light"] .nav-btn:hover { color: #0F172A; background: #F1F5F9; }
[data-theme="light"] .nav-btn.active { color: #15803D; background: #DCFCE7; border-color: #86EFAC; }
[data-theme="light"] .nav-btn-ghost { border-color: #CBD5E1; color: #334155; }

/* Ticker light mode */
[data-theme="light"] .ticker { background: #16A34A; border-bottom-color: #15803D; }
[data-theme="light"] .ticker-item { color: #FFFFFF; font-weight: 800; }

/* Panel / Cards light mode */
[data-theme="light"] .panel {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .brackets::before,
[data-theme="light"] .brackets::after,
[data-theme="light"] .brackets > .bkt::before,
[data-theme="light"] .brackets > .bkt::after {
    border-color: #16A34A !important;
    opacity: 0.65 !important;
}

/* Section typography */
[data-theme="light"] .section-head h2 { color: #0F172A !important; }
[data-theme="light"] .section-head p:not(.eyebrow) { color: #334155 !important; font-weight: 500; }
[data-theme="light"] .opt-label { color: #334155 !important; font-weight: 800 !important; }
[data-theme="light"] .eyebrow { color: #15803D !important; font-weight: 800 !important; }
[data-theme="light"] .eyebrow::before { color: #94A3B8 !important; }
[data-theme="light"] .mini-head { color: #475569 !important; font-weight: 800 !important; }

/* Navigation Tabs (.tab-btn) */
[data-theme="light"] .tab-btn {
    color: #475569 !important;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    font-weight: 700 !important;
}
[data-theme="light"] .tab-btn:hover {
    color: #0F172A !important;
    background: #F8FAFC !important;
    border-color: #CBD5E1 !important;
}
[data-theme="light"] .tab-btn.active {
    color: #FFFFFF !important;
    background: #16A34A !important;
    border-color: #15803D !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3) !important;
}

/* Provider chips (Google Docs, Drive, Studocu, etc.) */
[data-theme="light"] .provider-chip {
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .provider-chip .p-name {
    color: #0F172A !important;
    font-weight: 700 !important;
}
[data-theme="light"] .provider-chip:hover {
    border-color: #94A3B8 !important;
    background: #F8FAFC !important;
}
[data-theme="light"] .provider-chip.detected {
    background: #F0FDF4 !important;
    border-color: #4ADE80 !important;
}
[data-theme="light"] .provider-chip.detected .p-name {
    color: #15803D !important;
    font-weight: 800 !important;
}

/* URL Input & Controls */
[data-theme="light"] .url-input-wrap input {
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #0F172A !important;
    font-weight: 600 !important;
}
[data-theme="light"] .url-input-wrap input:focus {
    border-color: #16A34A !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15) !important;
}
[data-theme="light"] .url-input-wrap input::placeholder {
    color: #94A3B8 !important;
}
[data-theme="light"] .url-icon { color: #64748B !important; }

/* Buttons in Light Mode */
[data-theme="light"] .btn-primary,
[data-theme="light"] .nav-btn-primary {
    color: #FFFFFF !important;
    background: #16A34A !important;
    border-color: #15803D !important;
    box-shadow: 0 3px 0 #15803D !important;
}
[data-theme="light"] .btn-primary:hover:not(:disabled),
[data-theme="light"] .nav-btn-primary:hover {
    color: #FFFFFF !important;
    background: #15803D !important;
    box-shadow: 0 4px 0 #166534, 0 4px 12px rgba(22, 163, 74, 0.3) !important;
}
[data-theme="light"] .btn-ghost {
    color: #1E293B !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    font-weight: 700 !important;
}
[data-theme="light"] .btn-ghost:hover:not(:disabled) {
    background: #F1F5F9 !important;
    color: #0F172A !important;
    border-color: #94A3B8 !important;
}

/* Segments & Quality level buttons */
[data-theme="light"] .seg {
    background: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
}
[data-theme="light"] .seg-btn {
    color: #475569 !important;
}
[data-theme="light"] .seg-btn b {
    color: #0F172A !important;
    font-weight: 800 !important;
}
[data-theme="light"] .seg-btn small {
    color: #64748B !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}
[data-theme="light"] .seg-btn:hover {
    background: #E2E8F0 !important;
    color: #0F172A !important;
}
[data-theme="light"] .seg-btn.active {
    color: #FFFFFF !important;
    background: #16A34A !important;
    border-color: #15803D !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3) !important;
}
[data-theme="light"] .seg-btn.active b {
    color: #FFFFFF !important;
}
[data-theme="light"] .seg-btn.active small {
    color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1 !important;
}

/* Notice box & Guidelines */
[data-theme="light"] .studio-guide-box,
[data-theme="light"] #url-validation-hint {
    background: #EFF6FF !important;
    border: 1px solid #BFDBFE !important;
    color: #1E3A8A !important;
}
[data-theme="light"] .studio-guide-box b,
[data-theme="light"] .studio-guide-box strong {
    color: #172554 !important;
}
[data-theme="light"] .guide-title {
    color: #1D4ED8 !important;
    font-weight: 800 !important;
}
[data-theme="light"] .alert.warning {
    background: #FFFBEB !important;
    border-color: #FDE68A !important;
    color: #92400E !important;
}

/* Dashboard Hero Header & Avatar */
[data-theme="light"] .dash-hero {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .dash-hero h1 { color: #0F172A !important; }
[data-theme="light"] .hero-avatar img,
[data-theme="light"] .hero-avatar span {
    background: #DCFCE7 !important;
    border: 1.5px solid #86EFAC !important;
    color: #15803D !important;
}
[data-theme="light"] .quota-ring .ring-bg { stroke: #E2E8F0 !important; }
[data-theme="light"] .quota-ring .ring-fg { stroke: #16A34A !important; filter: drop-shadow(0 0 3px rgba(22, 163, 74, 0.3)) !important; }
[data-theme="light"] .quota-center b { color: #0F172A !important; }
[data-theme="light"] .quota-center span { color: #475569 !important; font-weight: 700; }
[data-theme="light"] .quota-label {
    background: #F1F5F9 !important;
    color: #334155 !important;
    border-color: #CBD5E1 !important;
    font-weight: 700 !important;
}

/* Stat Cards & KPI */
[data-theme="light"] .stat-card {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .stat-card b { color: #0F172A !important; }
[data-theme="light"] .stat-card span { color: #475569 !important; font-weight: 600; }

/* Chips, Stickers, Pills */
[data-theme="light"] .chip {
    background: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    color: #1E293B !important;
    font-weight: 700 !important;
}
[data-theme="light"] .pill {
    background: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    color: #1E293B !important;
    font-weight: 700 !important;
}
[data-theme="light"] .count-pill {
    background: #DCFCE7 !important;
    border: 1px solid #86EFAC !important;
    color: #15803D !important;
    font-weight: 800 !important;
}
[data-theme="light"] .sticker {
    background: #16A34A !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 0 #15803D !important;
}

/* Advanced Panel & Google connect box */
[data-theme="light"] .adv-panel,
[data-theme="light"] .g-auth-bar,
[data-theme="light"] .quota-banner {
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #1E293B !important;
}

/* HUD / Cyber Pipeline in Light Mode */
[data-theme="light"] .cyber-pipeline,
[data-theme="light"] #job-pipeline,
[data-theme="light"] .job-card .cyber-pipeline {
    background: #F8FAFC !important;
    border: 1.5px solid #CBD5E1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .pipe-dot {
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #64748B !important;
}
[data-theme="light"] .pipe-label {
    color: #334155 !important;
    font-weight: 800 !important;
}
[data-theme="light"] .pipe-connector {
    background: #CBD5E1 !important;
}
[data-theme="light"] .pipe-step.is-active .pipe-dot {
    background: #E0F2FE !important;
    border-color: #0284C7 !important;
    color: #0284C7 !important;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.35) !important;
}
[data-theme="light"] .pipe-step.is-active .pipe-label {
    color: #0284C7 !important;
    font-weight: 800 !important;
}
[data-theme="light"] .pipe-step.is-done .pipe-dot {
    border-color: #16A34A !important;
    background: #16A34A !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(22, 163, 74, 0.3) !important;
}
[data-theme="light"] .pipe-step.is-done .pipe-label {
    color: #15803D !important;
    font-weight: 800 !important;
}
[data-theme="light"] .pipe-connector.is-done {
    background: linear-gradient(90deg, #16A34A, #0284C7) !important;
}
[data-theme="light"] .folder-telemetry-row {
    border-top: 1px dashed #CBD5E1 !important;
    color: #334155 !important;
}
[data-theme="light"] .tele-val {
    color: #0F172A !important;
    font-weight: 800 !important;
}
[data-theme="light"] .tele-glow {
    color: #0284C7 !important;
    font-weight: 800 !important;
}
[data-theme="light"] .job-status-line {
    color: #334155 !important;
    font-weight: 700 !important;
}
[data-theme="light"] #job-eta {
    color: #64748B !important;
}

/* Job Card in Light Mode */
[data-theme="light"] .job-card {
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .job-titlebar {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
}
[data-theme="light"] .job-title-path {
    color: #334155 !important;
    font-weight: 700 !important;
}
[data-theme="light"] .job-info b {
    color: #0F172A !important;
}
[data-theme="light"] .job-url {
    color: #475569 !important;
}
[data-theme="light"] .job-console {
    background: #0D1410 !important;
    color: #E9F3E5 !important;
    border: 1px solid #1E293B !important;
}

/* Scrollbar light */
[data-theme="light"] ::-webkit-scrollbar-track { background: #F1F5F9; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #CBD5E1; border-color: #F1F5F9; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Toast light */
[data-theme="light"] .toast { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); }

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid var(--line-2);
    color: var(--ink-dim);
    cursor: pointer;
    transition: all 0.2s var(--ease);
    position: relative;
    flex-shrink: 0;
}
.theme-toggle:hover {
    color: var(--lime);
    border-color: var(--lime-deep);
    background: var(--panel-2);
}
.theme-toggle svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease); pointer-events: none; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle { color: var(--lime-deep); border-color: var(--line-2); }
[data-theme="light"] .theme-toggle:hover { color: var(--lime-deep); border-color: var(--lime); background: var(--lime-dark); }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 76px;
}

section[id], .platforms-section, .bento-section, .pricing-section, .faq-section, .story-theater-section {
    scroll-margin-top: 76px;
}

body {
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.6;
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

a { text-decoration: none; color: inherit; }
::selection { background: var(--lime); color: #0A0F0B; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 2px solid var(--bg-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--lime-deep); }

.mono { font-family: var(--mono); }

/* ============ SVG LINE ICONS ============ */
.icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}
.icon.lg { width: 22px; height: 22px; }
.icon.xl { width: 28px; height: 28px; stroke-width: 1.8; }
.icon.sm { width: 14px; height: 14px; }

/* ============ BACKGROUND ============ */
#bg-canvas { position: fixed; inset: 0; z-index: -2; width: 100vw; height: 100vh; pointer-events: none; }

.noise-layer {
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        radial-gradient(rgba(168, 245, 72, 0.028) 1px, transparent 1.6px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 20%, transparent 75%);
}

/* ============ ENTRY ANIM ============ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.anim-1 { animation: fadeUp 0.5s 0.04s var(--ease) both; }
.anim-2 { animation: fadeUp 0.5s 0.1s var(--ease) both; }
.anim-3 { animation: fadeUp 0.5s 0.16s var(--ease) both; }
.anim-4 { animation: fadeUp 0.5s 0.22s var(--ease) both; }
.anim-5 { animation: fadeUp 0.5s 0.28s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    #dl-preloader { display: none !important; }
}

/* ============================================================
   PRELOADER — terminal boot
   ============================================================ */
#dl-preloader {
    position: fixed; inset: 0; z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    font-family: var(--mono);
    transition: opacity 0.45s ease;
}
#dl-preloader.ff-exit { opacity: 0; pointer-events: none; }

.boot-card {
    width: min(560px, calc(100vw - 32px));
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    background: var(--panel);
    box-shadow: var(--shadow-pop), 0 0 60px rgba(168, 245, 72, 0.05);
    overflow: hidden;
}
.boot-titlebar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
}
.boot-dot { width: 10px; height: 10px; border-radius: 50%; }
.boot-dot.r { background: #FF5F57; } .boot-dot.y { background: #FEBC2E; } .boot-dot.g { background: #28C840; }
.boot-title {
    margin-left: 8px;
    font-size: 0.72rem; color: var(--ink-faint);
    letter-spacing: 0.08em;
}
.boot-body { padding: 20px 22px 22px; font-size: 0.82rem; position: relative; }
.boot-body::after {
    content: "";
    position: absolute; left: 0; right: 0; top: -80px;
    height: 70px;
    background: linear-gradient(180deg, transparent, rgba(168, 245, 72, 0.055), transparent);
    animation: bootScan 2.6s linear infinite;
    pointer-events: none;
}
@keyframes bootScan { to { top: 110%; } }

.boot-brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.boot-logo {
    position: relative;
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 12px;
    display: grid; place-items: center;
    color: #0A0F0B;
    background: var(--lime);
    box-shadow: 0 0 26px rgba(168, 245, 72, 0.4), 0 3px 0 var(--lime-deep);
    animation: bootBob 1.4s var(--ease) infinite;
}
.boot-logo svg { width: 22px; height: 22px; }
@keyframes bootBob {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(4px); box-shadow: 0 0 18px rgba(168, 245, 72, 0.28), 0 1px 0 var(--lime-deep); }
    70% { transform: translateY(-3px); }
}
.boot-logo-text b {
    display: block;
    font-family: var(--mono);
    font-size: 1.18rem; font-weight: 800;
    color: var(--lime);
    letter-spacing: -0.01em;
    text-shadow: 0 0 18px rgba(168, 245, 72, 0.3);
    line-height: 1.2;
}
.boot-logo-text b .x { color: var(--ink); }
.boot-logo-text > span {
    font-family: var(--mono);
    font-size: 0.66rem; color: var(--ink-faint);
    letter-spacing: 0.08em;
}
#boot-log { min-height: 118px; }
#boot-log div { color: var(--ink-dim); line-height: 1.85; }
#boot-log div::before { content: "▸ "; color: var(--lime-deep); }
#boot-log div.ok { color: var(--ink); }
#boot-log div.ok::after { content: "  [OK]"; color: var(--lime); font-weight: 700; }
.boot-cursor {
    display: inline-block;
    width: 8px; height: 15px;
    background: var(--lime);
    vertical-align: text-bottom;
    animation: blink 0.9s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.boot-bar {
    height: 5px;
    margin-top: 14px;
    background: var(--lime-dark);
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
}
#dl-prog-bar {
    height: 100%; width: 0%;
    background: var(--lime);
    box-shadow: 0 0 12px rgba(168, 245, 72, 0.6);
    transition: width 0.2s ease;
}
.boot-foot {
    display: flex; justify-content: space-between;
    margin-top: 10px;
    font-size: 0.7rem; color: var(--ink-faint);
}
#dl-prog-pct { color: var(--lime); font-weight: 700; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 12px clamp(16px, 4vw, 36px);
    background: rgba(5, 8, 6, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.nav-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.logo-mark {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: var(--r);
    display: grid; place-items: center;
    color: #0A0F0B;
    background: var(--lime);
    box-shadow: 0 0 22px rgba(168, 245, 72, 0.35);
}
.logo-mark svg { width: 19px; height: 19px; }
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.nav-brand-name { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em; }
.nav-brand-sub {
    font-family: var(--mono);
    font-size: 0.62rem; color: var(--lime-deep);
    letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
}

.nav-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nav-form { margin: 0; }
.nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 15px;
    border-radius: var(--r-sm);
    font-family: var(--font);
    font-size: 0.84rem; font-weight: 700;
    color: var(--ink-dim);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.nav-btn:hover { color: var(--ink); background: var(--panel-3); }
.nav-btn.active { color: var(--lime); border-color: var(--line-2); background: var(--panel-2); }
.nav-btn-primary {
    color: #0A0F0B;
    background: var(--lime);
    border: 1px solid var(--lime);
    box-shadow: 0 3px 0 var(--lime-deep);
}
.nav-btn-primary:hover { color: #0A0F0B; transform: translateY(-1px); box-shadow: 0 4px 0 var(--lime-deep); }
.nav-btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--lime-deep); }
.nav-btn-ghost { border-color: var(--line-2); }

.nav-user { display: flex; align-items: center; }
.nav-avatar, .nav-initials {
    width: 33px; height: 33px;
    border-radius: var(--r-sm);
    object-fit: cover;
    display: grid; place-items: center;
    font-family: var(--mono);
    font-weight: 800; font-size: 0.74rem;
    background: var(--lime-dark);
    border: 1px solid var(--lime-deep);
    color: var(--lime);
}

/* ============ TICKER ============ */
.ticker {
    position: relative;
    overflow: hidden;
    background: var(--lime);
    border-bottom: 1px solid var(--lime-deep);
    padding: 6px 0;
    user-select: none;
}
.ticker-track {
    display: flex; gap: 44px;
    width: max-content;
    animation: tickerScroll 35s linear infinite;
    -webkit-animation: tickerScroll 35s linear infinite;
    will-change: transform;
}
.ticker:hover .ticker-track { 
    animation-play-state: paused; 
    -webkit-animation-play-state: paused;
}
@keyframes tickerScroll { 
    0% { transform: translate3d(0, 0, 0); } 
    100% { transform: translate3d(-50%, 0, 0); } 
}
@-webkit-keyframes tickerScroll { 
    0% { -webkit-transform: translate3d(0, 0, 0); } 
    100% { -webkit-transform: translate3d(-50%, 0, 0); } 
}
.ticker-item {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.1em;
    color: #0A0F0B;
    text-transform: uppercase;
    white-space: nowrap;
}
.ticker-item i { font-style: normal; opacity: 0.55; }

/* ============================================================
   LAYOUT / PANEL (HUD brackets)
   ============================================================ */
.page {
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(18px, 3.5vw, 34px) clamp(16px, 4vw, 40px) 90px;
}

.panel {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(18px, 3vw, 26px);
    transition: border-color 0.25s ease;
}
.panel:hover { border-color: var(--line-2); }

/* corner brackets trên panel lớn */
.brackets::before, .brackets::after,
.brackets > .bkt::before, .brackets > .bkt::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 2px solid var(--lime-deep);
    opacity: 0.85;
    pointer-events: none;
}
.brackets::before { top: -2px; left: -2px; border-right: none; border-bottom: none; border-top-left-radius: var(--r-lg); }
.brackets::after { top: -2px; right: -2px; border-left: none; border-bottom: none; border-top-right-radius: var(--r-lg); }
.brackets > .bkt::before { bottom: -2px; left: -2px; border-right: none; border-top: none; border-bottom-left-radius: var(--r-lg); }
.brackets > .bkt::after { bottom: -2px; right: -2px; border-left: none; border-top: none; border-bottom-right-radius: var(--r-lg); }

.section-head { margin-bottom: 20px; }
.section-head.row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(1.05rem, 2.2vw, 1.25rem); font-weight: 800; letter-spacing: -0.01em; }
.section-head p:not(.eyebrow) { color: var(--ink-dim); font-size: 0.86rem; margin-top: 4px; max-width: 560px; }

.eyebrow {
    font-family: var(--mono);
    font-size: 0.66rem; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--lime-deep);
    margin-bottom: 5px;
}
.eyebrow::before { content: "// "; color: var(--ink-faint); }
.mini-head {
    font-family: var(--mono);
    font-size: 0.7rem; font-weight: 800;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 14px;
}

/* ============================================================
   BUTTONS / INPUTS / BADGES / STICKERS
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px;
    border-radius: var(--r-sm);
    font-family: var(--font);
    font-size: 0.87rem; font-weight: 800;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s var(--ease);
    white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
    color: #0A0F0B;
    background: var(--lime);
    border-color: var(--lime);
    box-shadow: 0 3px 0 var(--lime-deep);
}
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 0 var(--lime-deep), 0 8px 24px rgba(168, 245, 72, 0.25); }
.btn-primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--lime-deep); }

.btn-ghost {
    color: var(--ink-dim);
    background: var(--panel-2);
    border-color: var(--line-2);
}
.btn-ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-faint); background: var(--panel-3); }
.btn-danger { color: var(--coral); border-color: rgba(255, 110, 94, 0.45); background: rgba(255, 110, 94, 0.08); }
.btn-danger:hover { background: rgba(255, 110, 94, 0.16); }
.btn-full { width: 100%; }
.btn-sm { padding: 7px 13px; font-size: 0.78rem; border-radius: var(--r-sm); }
.btn-lg { padding: 14px 26px; font-size: 0.94rem; }

.stack-form { display: flex; flex-direction: column; gap: 15px; }
.stack-form label, .stack-label { display: flex; flex-direction: column; gap: 7px; }
.stack-form label > span, .stack-label > span { font-size: 0.78rem; font-weight: 700; color: var(--ink-dim); }

input:not([type]), input[type="text"], input[type="url"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--r-sm);
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    color: var(--ink);
    font-family: var(--font);
    font-size: 0.9rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--lime-deep);
    box-shadow: 0 0 0 3px rgba(168, 245, 72, 0.12);
}
input:disabled, select:disabled { opacity: 0.45; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
select { cursor: pointer; }
select option { background: var(--panel-2); color: var(--ink); }
textarea { resize: vertical; font-size: 0.84rem; font-family: var(--mono); }

.alert {
    padding: 12px 15px;
    border-radius: var(--r-sm);
    font-size: 0.84rem; font-weight: 600;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
    border: 1px solid;
}
.alert.warning { background: rgba(245, 196, 72, 0.07); border-color: rgba(245, 196, 72, 0.4); color: var(--gold); }
.alert.danger { background: rgba(255, 110, 94, 0.07); border-color: rgba(255, 110, 94, 0.4); color: var(--coral); }

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.66rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    border: 1px solid;
}
.badge::before { content: "●"; font-size: 0.5rem; }
.badge-success { color: var(--lime); background: rgba(168, 245, 72, 0.08); border-color: rgba(168, 245, 72, 0.4); }
.badge-failed { color: var(--coral); background: rgba(255, 110, 94, 0.08); border-color: rgba(255, 110, 94, 0.4); }
.badge-pending, .badge-processing { color: var(--cyan); background: rgba(82, 224, 200, 0.08); border-color: rgba(82, 224, 200, 0.4); }
.badge-approved { color: var(--lime); background: rgba(168, 245, 72, 0.08); border-color: rgba(168, 245, 72, 0.4); }
.badge-rejected { color: var(--coral); background: rgba(255, 110, 94, 0.08); border-color: rgba(255, 110, 94, 0.4); }
.badge-expired { color: var(--gold, #fbbf24); background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.4); }

.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.7rem; font-weight: 700;
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    color: var(--ink-dim);
}
.chip-tier { color: var(--chip-color, var(--lime)); border-color: color-mix(in srgb, var(--chip-color, var(--lime)) 45%, transparent); background: color-mix(in srgb, var(--chip-color, var(--lime)) 9%, transparent); }
.chip-wallet { color: var(--gold); border-color: rgba(245, 196, 72, 0.4); background: rgba(245, 196, 72, 0.07); }

.pill {
    padding: 5px 12px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.68rem; font-weight: 700;
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    color: var(--ink-dim);
}

/* sticker xoay */
.sticker {
    display: inline-block;
    padding: 5px 13px;
    background: var(--lime);
    color: #0A0F0B;
    font-family: var(--mono);
    font-size: 0.66rem; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    border-radius: 3px;
    transform: rotate(-1.6deg);
    box-shadow: 0 3px 0 var(--lime-deep);
}
.sticker.alt { background: var(--gold); box-shadow: 0 3px 0 #B8860B; }
.sticker.dark { background: var(--panel-3); color: var(--lime); border: 1px dashed var(--lime-deep); box-shadow: none; }

.count-pill {
    display: inline-grid; place-items: center;
    min-width: 24px; height: 24px; padding: 0 7px;
    border-radius: 4px;
    background: var(--lime-dark);
    border: 1px solid var(--lime-deep);
    color: var(--lime);
    font-family: var(--mono);
    font-size: 0.74rem; font-weight: 800;
    vertical-align: middle;
}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash { display: flex; flex-direction: column; gap: 18px; }

.dash-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 22px; flex-wrap: wrap;
    padding: clamp(20px, 3vw, 28px);
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
}
.dash-hero::after {
    content: "";
    position: absolute; right: -80px; top: -80px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(168, 245, 72, 0.09), transparent 65%);
    pointer-events: none;
}
.dash-hero-main { display: flex; align-items: center; gap: 17px; min-width: 0; z-index: 1; }
.hero-avatar { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.hero-avatar img, .hero-avatar span {
    width: 100%; height: 100%;
    border-radius: var(--r);
    object-fit: cover;
    display: grid; place-items: center;
    font-family: var(--mono);
    font-size: 1.3rem; font-weight: 800;
    background: var(--lime-dark);
    border: 1px solid var(--lime-deep);
    color: var(--lime);
}
.hero-tier-dot {
    position: absolute; right: -4px; bottom: -4px;
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 3px solid var(--bg);
}
.hero-text h1 { font-size: clamp(1.1rem, 2.8vw, 1.45rem); font-weight: 800; letter-spacing: -0.02em; margin: 3px 0 9px; }
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.hero-quota {
    position: relative;
    width: 112px; height: 112px; flex-shrink: 0;
    display: grid; place-items: center;
    z-index: 1;
}
.quota-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.quota-ring .ring-bg { fill: none; stroke: var(--lime-dark); stroke-width: 8; }
.quota-ring .ring-fg {
    fill: none;
    stroke: var(--lime);
    stroke-width: 8; stroke-linecap: butt;
    transition: stroke-dashoffset 1s var(--ease);
    filter: drop-shadow(0 0 5px rgba(168, 245, 72, 0.45));
}
.quota-center { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.quota-center b { font-family: var(--mono); font-size: 1.5rem; font-weight: 800; }
.quota-center span { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-faint); font-weight: 700; }
.quota-label {
    position: absolute; bottom: -8px;
    font-family: var(--mono);
    font-size: 0.58rem; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-dim);
    background: var(--panel-2);
    padding: 2px 9px;
    border-radius: 3px;
    border: 1px solid var(--line-2);
}

/* Stats */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}
.stat-card {
    display: flex; align-items: center; gap: 13px;
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    border-left: 3px solid var(--lime-deep);
    transition: all 0.25s var(--ease);
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--line-2); border-left-color: var(--lime); background: var(--panel-2); }
.stat-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    background: var(--panel-3);
    border: 1px solid var(--line);
    color: var(--lime);
}
.stat-icon .icon { width: 21px; height: 21px; }
.stat-card b { display: block; font-family: var(--mono); font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.stat-card span { font-size: 0.73rem; color: var(--ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

/* Tabs */
.tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    padding: 5px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    width: fit-content;
    max-width: 100%;
}
.tab-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-faint);
    font-family: var(--font);
    font-size: 0.84rem; font-weight: 700;
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.tab-btn svg { width: 14px; height: 14px; }
.tab-btn:hover { color: var(--ink); background: var(--panel-2); }
.tab-btn.active {
    color: #0A0F0B;
    background: var(--lime);
    box-shadow: 0 2px 0 var(--lime-deep);
}
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeUp 0.4s var(--ease) both; }

/* ============================================================
   DOWNLOAD STUDIO
   ============================================================ */
.provider-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 9px;
    margin-bottom: 20px;
}
.provider-chip {
    position: relative;
    display: flex; align-items: center; gap: 9px;
    padding: 10px 13px;
    border-radius: var(--r-sm);
    background: var(--panel-2);
    border: 1px solid var(--line);
    transition: all 0.25s var(--ease);
    overflow: hidden;
}
.provider-chip::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--p-color);
    opacity: 0.3;
}
.provider-chip .p-icon { display: grid; place-items: center; color: var(--p-color); }
.provider-chip .p-icon .icon { width: 16px; height: 16px; }
.provider-chip .p-name { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--ink-dim); letter-spacing: 0.02em; }
.provider-chip .p-check {
    margin-left: auto;
    font-family: var(--mono);
    color: var(--lime);
    font-size: 0.8rem; font-weight: 900;
    opacity: 0; transform: scale(0.4);
    transition: all 0.25s var(--ease);
}
.provider-chip.detected {
    border-color: color-mix(in srgb, var(--p-color) 60%, transparent);
    background: color-mix(in srgb, var(--p-color) 8%, var(--panel-2));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-color) 25%, transparent);
}
.provider-chip.detected::before { opacity: 1; width: 4px; }
.provider-chip.detected .p-name { color: var(--ink); }
.provider-chip.detected .p-check { opacity: 1; transform: scale(1); }
.provider-chip.dim { opacity: 0.35; filter: saturate(0.3); }

.studio-form { display: flex; flex-direction: column; gap: 18px; }
.url-shell { display: flex; gap: 10px; align-items: stretch; }
.url-input-wrap { position: relative; flex: 1; min-width: 0; }
.url-icon {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 17px; height: 17px;
    color: var(--ink-faint);
    pointer-events: none;
}
.url-input-wrap input {
    height: 100%;
    min-height: 52px;
    padding: 0 42px 0 42px;
    font-family: var(--mono);
    font-size: 0.85rem;
}
.url-clear {
    position: absolute; right: 9px; top: 50%;
    transform: translateY(-50%);
    width: 25px; height: 25px;
    border-radius: 5px;
    border: none; cursor: pointer;
    background: var(--panel-3);
    color: var(--ink-faint);
    font-size: 0.72rem;
}
.url-clear:hover { color: var(--coral); }

.studio-options { display: flex; gap: 20px; flex-wrap: wrap; }
.opt-group { display: flex; flex-direction: column; gap: 9px; min-width: 250px; flex: 1; }
.opt-label {
    font-family: var(--mono);
    font-size: 0.66rem; font-weight: 800;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-faint);
}

.seg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 5px;
    padding: 5px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
}
.seg-btn {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 8px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-faint);
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.seg-btn b { font-size: 0.82rem; font-weight: 800; }
.seg-btn small { font-family: var(--mono); font-size: 0.6rem; opacity: 0.8; }
.seg-btn:hover { color: var(--ink); background: var(--panel-2); }
.seg-btn.active {
    color: #0A0F0B;
    background: var(--lime);
    box-shadow: 0 2px 0 var(--lime-deep);
}
.seg-btn.active small { opacity: 0.75; }
.seg-star { position: absolute; top: 4px; right: 7px; font-style: normal; font-size: 0.58rem; color: var(--gold); }
.seg-sm { grid-template-columns: 1fr 1fr; }

.adv-toggle {
    display: inline-flex; align-items: center; gap: 9px;
    width: fit-content;
    padding: 10px 15px;
    border-radius: var(--r-sm);
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    color: var(--ink-dim);
    font-family: var(--font);
    font-size: 0.82rem; font-weight: 700;
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.adv-toggle svg { width: 14px; height: 14px; }
.adv-toggle:hover { color: var(--ink); }
.adv-toggle.open { border-color: var(--lime-deep); color: var(--lime); background: var(--lime-dark); }
.adv-toggle .chev { font-style: normal; transition: transform 0.25s ease; margin-left: 2px; }
.adv-toggle.open .chev { transform: rotate(180deg); }

.adv-panel {
    display: flex; flex-direction: column; gap: 13px;
    padding: 15px;
    border-radius: var(--r-sm);
    background: var(--bg-2);
    border: 1px dashed var(--line-2);
    animation: fadeUp 0.3s var(--ease) both;
}
.studocu-only[hidden],
#studocu-panel[hidden],
#studocu-engine-row[hidden] {
    display: none !important;
}
.adv-field span { font-size: 0.76rem; font-weight: 700; color: var(--ink-dim); }
.adv-field em { font-style: normal; color: var(--ink-faint); font-weight: 500; }
.adv-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.adv-row .seg { width: 240px; }
.google-auth-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--r-sm);
    background: var(--panel-2);
    border: 1px solid var(--line-2);
}
.google-auth-box b {
    display: block;
    max-width: 260px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
    font-size: 0.84rem;
}
.studio-google {
    margin-bottom: 4px;
}
.opt-hint {
    font-style: normal;
    color: var(--ink-faint);
    font-weight: 500;
    font-size: 0.68rem;
}
.config-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    border: 1px solid rgba(245, 196, 72, 0.35);
    background: rgba(245, 196, 72, 0.08);
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 800;
}
.check-line {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink-dim);
    font-size: 0.78rem;
    font-weight: 700;
}
.check-line input {
    width: 16px;
    height: 16px;
    accent-color: var(--lime);
}

/* ============ JOB CARD → TERMINAL CONSOLE ============ */
.job-card {
    margin-top: 20px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--panel);
    overflow: hidden;
    animation: fadeUp 0.35s var(--ease) both;
}
.job-card.done { border-color: rgba(168, 245, 72, 0.5); }
.job-card.error { border-color: rgba(255, 110, 94, 0.5); }

.job-titlebar {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
}
.job-titlebar .job-badge { margin-left: auto; }
.job-title-path {
    font-family: var(--mono);
    font-size: 0.72rem; color: var(--ink-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 60%;
}
.job-title-path::before { content: "dl://"; color: var(--lime-deep); }

.job-head { display: flex; align-items: center; gap: 13px; padding: 15px 16px 4px; }
.job-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    background: var(--panel-3);
    border: 1px solid var(--line-2);
    color: var(--cyan);
}
.job-icon svg { width: 18px; height: 18px; }
.job-card.done .job-icon { color: var(--lime); border-color: var(--lime-deep); }
.job-card.error .job-icon { color: var(--coral); border-color: rgba(255, 110, 94, 0.5); }
.job-info { min-width: 0; flex: 1; }
.job-info b { display: block; font-size: 0.9rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-url {
    display: block;
    font-family: var(--mono);
    font-size: 0.68rem; color: var(--ink-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.job-console {
    margin: 13px 16px 0;
    padding: 13px 15px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: 0.76rem;
    line-height: 1.9;
    min-height: 66px;
    max-height: 180px;
    overflow-y: auto;
}
.job-console .ln { color: var(--ink-dim); white-space: pre-wrap; word-break: break-all; }
.job-console .ln::before { content: "$ "; color: var(--lime-deep); }
.job-console .ln.ok { color: var(--lime); }
.job-console .ln.err { color: var(--coral); }
.job-console .ln.dim { color: var(--ink-faint); }

.job-progress {
    height: 5px;
    margin: 13px 16px 0;
    background: var(--lime-dark);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.job-progress-bar {
    height: 100%; width: 12%;
    background: var(--lime);
    box-shadow: 0 0 10px rgba(168, 245, 72, 0.5);
    animation: jobSlide 1.7s var(--ease) infinite;
    transition: width 0.5s var(--ease);
}
@keyframes jobSlide { 0% { width: 8%; } 55% { width: 76%; } 100% { width: 88%; } }
.job-card.done .job-progress-bar { animation: none; width: 100%; background: var(--lime); }
.job-card.error .job-progress-bar { animation: none; width: 100%; background: var(--coral); opacity: 0.6; }

.job-status-line {
    display: flex; justify-content: space-between; align-items: center;
    margin: 9px 16px 0;
    font-family: var(--mono);
    font-size: 0.72rem; color: var(--ink-dim);
}
.job-actions { display: flex; gap: 9px; margin: 14px 16px 16px; flex-wrap: wrap; }
.job-actions[hidden],
[hidden].job-actions {
    display: none !important;
}
.job-error {
    margin: 0 16px 15px;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    background: rgba(255, 110, 94, 0.06);
    border: 1px solid rgba(255, 110, 94, 0.35);
    border-left: 3px solid var(--coral);
    color: var(--coral);
    font-size: 0.8rem;
    word-break: break-word;
}
.job-error[hidden],
[hidden].job-error {
    display: none !important;
}

/* ============================================================
   FOLDER CARD & INSPECTOR UI
   ============================================================ */
.folder-card {
    background: var(--panel) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden !important;
    margin-top: 18px !important;
    padding: 0 !important;
    transition: all 0.25s var(--ease) !important;
}

.folder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px 14px;
    background: linear-gradient(180deg, rgba(82, 224, 200, 0.05) 0%, transparent 100%);
    border-bottom: 1px solid var(--line);
    position: relative;
}

.folder-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.folder-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    overflow: hidden !important;
    border-radius: 12px;
    background: rgba(82, 224, 200, 0.1);
    border: 1px solid rgba(82, 224, 200, 0.25);
    color: var(--cyan);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 16px rgba(82, 224, 200, 0.12);
}

.folder-avatar svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.folder-heading {
    min-width: 0;
    flex: 1;
}

.folder-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.folder-provider-pill {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(82, 224, 200, 0.12);
    border: 1px solid rgba(82, 224, 200, 0.3);
    color: var(--cyan);
}

.folder-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 480px;
}

.folder-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    color: var(--ink-dim);
    font-family: var(--mono);
}

.folder-meta-sep {
    color: var(--ink-faint);
}

.folder-source-path {
    color: var(--ink-faint);
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-close-btn {
    background: transparent;
    border: none;
    color: var(--ink-faint);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.folder-close-btn:hover {
    background: var(--panel-3);
    color: var(--coral);
}

/* Toolbar */
.folder-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 20px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
    font-size: 0.8rem;
}

.folder-select-all-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.8rem;
}

.folder-select-all-label input[type="checkbox"],
.folder-table input[type="checkbox"] {
    cursor: pointer;
    width: 15px;
    height: 15px;
    accent-color: var(--cyan);
    border-radius: 3px;
}

.folder-selection-badge {
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--cyan);
    background: rgba(82, 224, 200, 0.08);
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid rgba(82, 224, 200, 0.2);
}

.folder-quick-actions {
    display: flex;
    gap: 6px;
}

.folder-btn-mini {
    background: var(--panel-3);
    border: 1px solid var(--line-2);
    color: var(--ink-dim);
    font-size: 0.72rem;
    font-family: var(--mono);
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.folder-btn-mini:hover {
    background: var(--line-2);
    color: var(--ink);
}

/* Items List & Table */
.folder-items-container {
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
}

.folder-items-container::-webkit-scrollbar {
    width: 6px;
}

.folder-items-container::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border-radius: 3px;
}

.folder-table {
    width: 100%;
    border-collapse: collapse;
}

.folder-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel-2);
    padding: 8px 16px;
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.folder-table tbody tr {
    border-bottom: 1px solid rgba(27, 38, 32, 0.6);
    transition: background 0.12s ease;
}

.folder-table tbody tr:hover {
    background: rgba(82, 224, 200, 0.035);
}

.folder-table tbody tr:last-child {
    border-bottom: none;
}

.folder-table td {
    padding: 8px 16px;
    vertical-align: middle;
}

.col-chk {
    width: 38px;
    text-align: center;
    padding-right: 4px !important;
}

.col-name {
    min-width: 240px;
}

.col-size {
    width: 95px;
    text-align: right;
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--ink-dim);
    white-space: nowrap;
}

.col-act {
    width: 155px;
    text-align: right;
}

.folder-file-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.folder-file-info {
    min-width: 0;
    flex: 1;
}

.folder-file-name {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
}

.folder-file-path {
    display: block;
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}

/* File Extension Badges */
.file-ext-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.file-ext-icon svg {
    flex-shrink: 0;
}

.file-ext-icon.ext-docx {
    background: rgba(43, 87, 154, 0.18);
    border: 1px solid rgba(66, 133, 244, 0.4);
    color: #6ba4ff;
}

.file-ext-icon.ext-pdf {
    background: rgba(224, 62, 45, 0.16);
    border: 1px solid rgba(224, 62, 45, 0.4);
    color: #ff6e6e;
}

.file-ext-icon.ext-xlsx {
    background: rgba(16, 124, 65, 0.18);
    border: 1px solid rgba(33, 163, 102, 0.4);
    color: #52e098;
}

.file-ext-icon.ext-pptx {
    background: rgba(210, 71, 38, 0.18);
    border: 1px solid rgba(235, 107, 76, 0.4);
    color: #ff9166;
}

.file-ext-icon.ext-zip {
    background: rgba(183, 140, 242, 0.16);
    border: 1px solid rgba(183, 140, 242, 0.4);
    color: var(--violet);
}

.file-ext-icon.ext-default {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--ink-dim);
}

.folder-file-act-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.btn-single-dl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: rgba(82, 224, 200, 0.08);
    border: 1px solid rgba(82, 224, 200, 0.28);
    color: var(--cyan);
    border-radius: 5px;
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.18s ease;
}

.btn-single-dl:hover:not(:disabled) {
    background: rgba(82, 224, 200, 0.18);
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(82, 224, 200, 0.2);
    transform: translateY(-1px);
}

.btn-single-dl:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Status & Progress Section */
.folder-status-box {
    padding: 12px 20px 10px;
    background: var(--panel-2);
}

.folder-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
}

.folder-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--ink-dim);
    min-width: 0;
}

.folder-status-indicator span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
    flex-shrink: 0;
    animation: statusPulse 2s infinite ease-in-out;
}

@keyframes statusPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
}

.folder-progress-num {
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--cyan);
}

.folder-progress-track {
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.folder-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--lime) 0%, var(--cyan) 100%);
    box-shadow: 0 0 10px rgba(82, 224, 200, 0.4);
    border-radius: 3px;
    transition: width 0.25s ease-out;
}

/* Log Accordion */
.folder-log-wrap {
    border-top: 1px solid var(--line);
    background: var(--bg-2);
}

.folder-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 20px;
    font-size: 0.72rem;
    font-family: var(--mono);
    color: var(--ink-faint);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.folder-log-header:hover {
    color: var(--ink-dim);
}

.folder-console {
    margin: 0 !important;
    border: none !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    max-height: 100px !important;
    min-height: 48px !important;
    background: transparent !important;
    padding: 8px 20px !important;
    font-size: 0.72rem !important;
}

/* Footer Actions */
.folder-actions {
    display: flex;
    gap: 12px;
    padding: 14px 20px 18px;
    background: var(--panel-2);
    border-top: 1px solid var(--line);
}

.folder-btn-zip {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--lime) 0%, var(--cyan) 100%) !important;
    color: #050806 !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    letter-spacing: -0.01em;
    padding: 11px 22px !important;
    border: none !important;
    border-radius: var(--r-sm) !important;
    box-shadow: 0 4px 18px rgba(168, 245, 72, 0.25);
    cursor: pointer;
    transition: all 0.2s var(--ease);
}

.folder-btn-zip:hover:not(:disabled) {
    box-shadow: 0 6px 24px rgba(82, 224, 200, 0.4);
    transform: translateY(-1px);
}

.folder-btn-zip:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* ============================================================
   TABLES
   ============================================================ */
.table-wrap { overflow-x: auto; border-radius: var(--r-sm); border: 1px solid var(--line); }
.data-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.data-table thead th {
    padding: 11px 15px;
    text-align: left;
    font-family: var(--mono);
    font-size: 0.64rem; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-faint);
    background: var(--panel-2);
    border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
}
.data-table tbody td {
    padding: 12px 15px;
    font-size: 0.84rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.data-table tbody tr { transition: background 0.15s ease; }
.data-table tbody tr:hover { background: var(--panel-2); }
.data-table tbody tr:last-child td { border-bottom: none; }

.td-doc b { display: block; font-size: 0.84rem; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-url {
    display: block;
    font-family: var(--mono);
    font-size: 0.66rem; color: var(--ink-faint);
    max-width: 320px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.td-time { font-family: var(--mono); color: var(--ink-faint); font-size: 0.74rem; white-space: nowrap; }
.td-money { font-family: var(--mono); font-weight: 800; color: var(--gold); white-space: nowrap; }
.td-error { color: var(--coral); font-size: 0.72rem; max-width: 220px; word-break: break-word; overflow-wrap: anywhere; }
.td-actions { display: flex; gap: 6px; align-items: center; }
.th-actions { text-align: right; }
.data-table .td-actions { justify-content: flex-end; }

.icon-btn {
    width: 32px; height: 32px;
    display: inline-grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    color: var(--ink-dim);
    cursor: pointer;
    transition: all 0.18s var(--ease);
}
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn:hover { color: var(--lime); border-color: var(--lime-deep); background: var(--lime-dark); transform: translateY(-1px); }
.icon-unban:hover { color: var(--coral); border-color: rgba(255, 110, 94, 0.5); background: rgba(255, 110, 94, 0.08); }

.transfer-code {
    padding: 4px 9px;
    border-radius: 4px;
    background: rgba(82, 224, 200, 0.08);
    border: 1px solid rgba(82, 224, 200, 0.4);
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 0.74rem;
}

.mini-spinner {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--lime-dark);
    border-top-color: var(--lime);
    animation: spin 0.75s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.history-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 15px; }
.filter-btn {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid var(--line-2);
    background: var(--panel-2);
    color: var(--ink-faint);
    font-family: var(--mono);
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.18s var(--ease);
}
.filter-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.filter-btn.active { color: #0A0F0B; background: var(--lime); border-color: var(--lime); }

.table-search { position: relative; display: flex; align-items: center; }
.table-search svg { position: absolute; left: 12px; width: 14px; height: 14px; color: var(--ink-faint); pointer-events: none; }
.table-search input {
    padding-left: 36px;
    min-width: 240px;
    padding-top: 8px; padding-bottom: 8px;
    font-size: 0.82rem;
    font-family: var(--mono);
}

.empty-state {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
    color: var(--ink-faint);
}
.empty-state.small { padding: 22px 16px; }
.empty-icon { display: grid; place-items: center; color: var(--ink-faint); }
.empty-icon .icon { width: 30px; height: 30px; stroke-width: 1.5; }
.empty-state p { font-size: 0.84rem; max-width: 380px; font-family: var(--mono); }
.empty-state b { color: var(--ink-dim); }

/* ============================================================
   PLANS
   ============================================================ */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.plan-card {
    position: relative;
    display: flex; flex-direction: column;
    padding: 22px 18px;
    border-radius: var(--r);
    background: var(--panel);
    border: 1px solid var(--line);
    transition: all 0.25s var(--ease);
    overflow: hidden;
}
.plan-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--plan-color);
    opacity: 0.55;
}
.plan-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--plan-color) 55%, transparent); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); }
.plan-card.featured { border-color: var(--lime-deep); background: linear-gradient(170deg, rgba(168, 245, 72, 0.05), transparent 50%), var(--panel); }
.plan-card.current { border-color: rgba(82, 224, 200, 0.55); }
.plan-flag {
    position: absolute; top: 13px; right: -1px;
    padding: 4px 12px;
    border-radius: 4px 0 0 4px;
    background: var(--lime);
    color: #0A0F0B;
    font-family: var(--mono);
    font-size: 0.58rem; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase;
    box-shadow: 0 2px 0 var(--lime-deep);
}
.plan-head { margin-bottom: 15px; }
.plan-icon { display: grid; place-items: start; margin-bottom: 8px; color: var(--plan-color); }
.plan-icon .icon { width: 26px; height: 26px; stroke-width: 1.8; }
.plan-head h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; }
.plan-head p { font-size: 0.74rem; color: var(--ink-faint); }
.plan-price { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed var(--line-2); }
.plan-price b { font-family: var(--mono); font-size: 1.42rem; font-weight: 800; letter-spacing: -0.02em; }
.plan-price span { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); margin-left: 4px; }
.plan-feats { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; flex: 1; }
.plan-feats li { display: flex; gap: 9px; font-size: 0.8rem; color: var(--ink-dim); }
.plan-feats i {
    width: 16px; height: 16px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 3px;
    background: var(--lime-dark);
    color: var(--lime);
    font-size: 0.58rem; font-style: normal; font-weight: 900;
    margin-top: 2px;
}
.plan-buy { display: flex; flex-direction: column; gap: 10px; }
.plan-months { display: flex; align-items: center; gap: 9px; }
.plan-months label { font-size: 0.72rem; color: var(--ink-faint); font-weight: 700; white-space: nowrap; }
.plan-months select { padding: 6px 9px; font-size: 0.78rem; border-radius: 4px; font-family: var(--mono); }

/* ============================================================
   WALLET
   ============================================================ */
.wallet-grid {
    display: grid;
    grid-template-columns: minmax(300px, 5fr) minmax(300px, 4fr);
    gap: 16px;
    align-items: start;
}
.wallet-hero { border-top: 3px solid var(--gold); }
.wallet-balance { margin: 6px 0 20px; }
.wallet-balance span { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.wallet-balance b {
    display: block;
    font-family: var(--mono);
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    font-weight: 800; letter-spacing: -0.02em;
    color: var(--gold);
    text-shadow: 0 0 24px rgba(245, 196, 72, 0.25);
}
.topup-form { display: flex; flex-direction: column; gap: 12px; }
.topup-form input[type="number"] { font-family: var(--mono); }
.quick-amounts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.quick-amounts button {
    padding: 8px 4px;
    border-radius: 4px;
    border: 1px solid var(--line-2);
    background: var(--panel-2);
    color: var(--ink-dim);
    font-family: var(--mono);
    font-size: 0.74rem; font-weight: 800;
    cursor: pointer;
    transition: all 0.18s var(--ease);
}
.quick-amounts button:hover, .quick-amounts button.active {
    color: #0A0F0B;
    border-color: var(--gold);
    background: var(--gold);
}
.topup-hint { font-size: 0.73rem; color: var(--ink-faint); line-height: 1.55; }
.topup-hint b { color: var(--ink-dim); }

.topup-status-list { margin-top: 18px; padding-top: 15px; border-top: 1px dashed var(--line-2); }
.topup-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}
.topup-row:last-child { border-bottom: none; }
.topup-row b { font-family: var(--mono); font-size: 0.84rem; margin-right: 8px; }
.topup-code { font-family: var(--mono); font-size: 0.68rem; color: var(--cyan); }

.tx-list { list-style: none; display: flex; flex-direction: column; }
.tx-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
}
.tx-item:last-child { border-bottom: none; }
.tx-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    font-family: var(--mono);
    font-weight: 900; font-size: 0.9rem;
}
.tx-icon.in { background: var(--lime-dark); color: var(--lime); border: 1px solid var(--lime-deep); }
.tx-icon.out { background: rgba(255, 110, 94, 0.08); color: var(--coral); border: 1px solid rgba(255, 110, 94, 0.4); }
.tx-info { flex: 1; min-width: 0; }
.tx-info b { display: block; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-info span { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-faint); }
.tx-amount { font-family: var(--mono); font-weight: 800; font-size: 0.84rem; white-space: nowrap; }
.tx-amount.in { color: var(--lime); }
.tx-amount.out { color: var(--coral); }

/* ============================================================
   PROFILE
   ============================================================ */
.profile-form { display: flex; flex-direction: column; gap: 20px; }
.profile-avatar-zone { display: flex; align-items: center; gap: 17px; }
.profile-avatar-big {
    width: 80px; height: 80px;
    border-radius: var(--r);
    overflow: hidden;
    display: grid; place-items: center;
    background: var(--lime-dark);
    border: 1px solid var(--lime-deep);
    color: var(--lime);
    font-family: var(--mono);
    font-size: 1.6rem; font-weight: 800;
}
.profile-avatar-big img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload { cursor: pointer; }
.profile-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 15px; }

/* ============================================================
   LOGIN — terminal split
   ============================================================ */
.login-stage {
    min-height: calc(100vh - 130px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 0;
}
.login-wrap {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    width: min(920px, 100%);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--panel);
    box-shadow: var(--shadow-pop);
}

/* trái: cửa sổ terminal */
.login-visual {
    position: relative;
    padding: 0;
    background: var(--bg-2);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.lv-titlebar {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 14px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
}
.lv-titlebar span.t { margin-left: 8px; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint); letter-spacing: 0.08em; }
.lv-body { padding: 22px 22px 18px; display: flex; flex-direction: column; flex: 1; }
.lv-logo {
    font-family: var(--mono);
    font-size: 1.15rem; font-weight: 800;
    color: var(--lime);
    letter-spacing: 0.02em;
    text-shadow: 0 0 16px rgba(168, 245, 72, 0.3);
}
.lv-logo b { color: var(--ink); }
.lv-tagline { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); margin: 4px 0 18px; line-height: 1.7; }
.lv-boot { font-family: var(--mono); font-size: 0.74rem; line-height: 2; color: var(--ink-dim); }
.lv-boot div { opacity: 0; animation: fadeUp 0.3s var(--ease) forwards; }
.lv-boot div:nth-child(1) { animation-delay: 0.2s; }
.lv-boot div:nth-child(2) { animation-delay: 0.5s; }
.lv-boot div:nth-child(3) { animation-delay: 0.8s; }
.lv-boot div:nth-child(4) { animation-delay: 1.1s; }
.lv-boot i { font-style: normal; color: var(--lime-deep); }
.lv-boot .ok { color: var(--lime); }
.lv-features { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 18px; }
.lv-features li { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--ink-dim); font-weight: 600; }
.lv-features li::before {
    content: ">";
    font-family: var(--mono);
    color: var(--lime);
    font-weight: 800;
}

/* phải: form */
.login-card { padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 6px; }
.login-logo {
    width: 44px; height: 44px;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    color: #0A0F0B;
    background: var(--lime);
    box-shadow: 0 3px 0 var(--lime-deep);
}
.login-logo svg { width: 21px; height: 21px; }
.login-brand h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.login-desc { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-faint); margin-bottom: 18px; line-height: 1.7; }
.login-card .stack-form { gap: 14px; }

/* university selector */
.uni-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 5px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    margin-bottom: 4px;
}
.uni-tab {
    position: relative;
    padding: 10px 4px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-faint);
    font-family: var(--mono);
    font-size: 0.8rem; font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.18s var(--ease);
    text-align: center;
}
.uni-tab small { display: block; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.04em; opacity: 0.75; margin-top: 1px; }
.uni-tab:hover { color: var(--ink); background: var(--panel-2); }
.uni-tab.active {
    color: #0A0F0B;
    background: var(--lime);
    box-shadow: 0 2px 0 var(--lime-deep);
}
.uni-tab.active small { opacity: 0.8; }
.uni-note { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-faint); margin: 6px 2px 2px; line-height: 1.6; min-height: 30px; }
.uni-note b { color: var(--ink-dim); }

.input-icon { position: relative; display: flex; align-items: center; }
.input-icon > svg { position: absolute; left: 13px; width: 15px; height: 15px; color: var(--ink-faint); pointer-events: none; }
.input-icon input { min-height: 44px; padding-left: 40px; font-family: var(--mono); font-size: 0.86rem; }
.input-icon input[type="password"] { padding-right: 44px; }
.login-field .input-icon { width: 100%; }
.pw-toggle {
    position: absolute; right: 7px;
    width: 31px; height: 31px;
    display: grid; place-items: center;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--ink-faint);
    cursor: pointer;
    transition: color 0.15s ease;
}
.pw-toggle svg { width: 15px; height: 15px; position: static; left: auto; }
.pw-toggle:hover, .pw-toggle.active { color: var(--lime); }

.login-foot { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; justify-content: center; }

@media (max-width: 820px) {
    .login-wrap { grid-template-columns: 1fr; }
    .login-visual { display: none; }
}

/* ============================================================
   ADMIN
   ============================================================ */
.admin { display: flex; flex-direction: column; gap: 18px; }

.admin-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    padding: clamp(18px, 3vw, 26px);
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-top: 3px solid var(--lime);
    border-radius: var(--r-lg);
}
.admin-hero-main { display: flex; align-items: center; gap: 16px; }
.admin-hero-icon {
    width: 54px; height: 54px; flex-shrink: 0;
    border-radius: var(--r);
    display: grid; place-items: center;
    color: var(--lime);
    background: var(--lime-dark);
    border: 1px solid var(--lime-deep);
}
.admin-hero-icon .icon { width: 26px; height: 26px; }
.admin-hero h1 { font-size: clamp(1.15rem, 3vw, 1.45rem); font-weight: 800; letter-spacing: -0.02em; }
.admin-hero-sub { color: var(--ink-dim); font-size: 0.84rem; margin-top: 3px; font-family: var(--mono); }
.admin-hero-sub b { color: var(--lime); }
.admin-hero-actions { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }

.maintenance-toggle {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    background: var(--panel-2);
    border: 1px solid var(--line-2);
}
.mt-label { font-family: var(--mono); font-size: 0.74rem; font-weight: 800; color: var(--ink-dim); letter-spacing: 0.06em; }
.switch {
    position: relative;
    width: 42px; height: 23px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: var(--bg-2);
    cursor: pointer;
    transition: all 0.25s var(--ease);
}
.switch i {
    position: absolute; top: 2px; left: 2px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--ink-faint);
    transition: all 0.25s var(--ease);
}
.switch.on { background: rgba(245, 196, 72, 0.15); border-color: var(--gold); }
.switch.on i { left: 21px; background: var(--gold); box-shadow: 0 0 10px rgba(245, 196, 72, 0.5); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kpi {
    position: relative;
    padding: 17px;
    border-radius: var(--r);
    background: var(--panel);
    border: 1px solid var(--line);
    transition: all 0.25s var(--ease);
}
.kpi:hover { transform: translateY(-2px); border-color: var(--line-2); }
.kpi-icon {
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    margin-bottom: 11px;
    background: var(--panel-3);
    border: 1px solid var(--line);
}
.kpi-icon .icon { width: 19px; height: 19px; }
.kpi b {
    display: block;
    font-family: var(--mono);
    font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em;
    line-height: 1.15;
}
.kpi span { font-size: 0.74rem; color: var(--ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi em { display: block; font-style: normal; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-faint); margin-top: 5px; opacity: 0.85; }

.admin-grid {
    display: grid;
    grid-template-columns: minmax(380px, 7fr) minmax(300px, 4fr);
    gap: 16px;
    align-items: start;
}
.admin-side { display: flex; flex-direction: column; gap: 16px; }

.chart-panel { min-height: 320px; }
.chart-wrap { position: relative; height: 250px; }
.chart-wrap canvas { width: 100%; height: 100%; display: block; }
.chart-legend { display: flex; gap: 15px; }
.lg { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-dim); font-weight: 700; }
.lg i { width: 10px; height: 10px; border-radius: 2px; }

.dist-list { display: flex; flex-direction: column; gap: 11px; }
.dist-row { display: grid; grid-template-columns: 88px 1fr 32px; align-items: center; gap: 10px; }
.dist-name { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--ink-dim); white-space: nowrap; }
.dist-bar { height: 7px; border-radius: 2px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.dist-bar i { display: block; height: 100%; transition: width 1s var(--ease); min-width: 2px; }
.dist-val { font-family: var(--mono); font-size: 0.76rem; font-weight: 800; text-align: right; }

.sys-list { display: flex; flex-direction: column; gap: 12px; }
.sys-row { display: grid; grid-template-columns: 40px 1fr 42px; align-items: center; gap: 10px; }
.sys-row > span { font-family: var(--mono); font-size: 0.72rem; font-weight: 800; color: var(--ink-dim); }
.sys-bar { height: 7px; border-radius: 2px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.sys-bar i { display: block; height: 100%; transition: width 0.8s var(--ease); }
.sys-row b { font-family: var(--mono); font-size: 0.72rem; text-align: right; color: var(--ink-dim); }
.sys-na { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); text-align: right; }

.quota-form { display: flex; flex-direction: column; gap: 9px; }
.quota-row { display: grid; grid-template-columns: 1fr 88px; align-items: center; gap: 10px; }
.quota-row span { font-family: var(--mono); font-size: 0.76rem; font-weight: 700; color: var(--ink-dim); }
.quota-row input { padding: 7px 9px; font-size: 0.8rem; text-align: center; font-family: var(--mono); }

.tier-select { padding: 6px 9px; font-size: 0.76rem; border-radius: 4px; min-width: 108px; font-family: var(--mono); }
.td-user { display: flex; align-items: center; gap: 11px; }
.u-avatar {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    background: var(--lime-dark);
    border: 1px solid var(--lime-deep);
    color: var(--lime);
    font-family: var(--mono);
    font-weight: 800; font-size: 0.8rem;
}
.td-user b { display: block; font-size: 0.84rem; }

.recent-topups { margin-top: 13px; }
.recent-topups summary {
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.74rem; font-weight: 700;
    color: var(--ink-faint);
    padding: 6px 0;
    user-select: none;
}
.recent-topups summary:hover { color: var(--ink-dim); }
.recent-topups[open] summary { margin-bottom: 6px; }

@media (max-width: 980px) {
    .admin-grid { grid-template-columns: 1fr; }
    .wallet-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MODALS & TOASTS
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0;
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(2, 4, 3, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-box {
    width: min(520px, 100%);
    max-height: 88vh;
    display: flex; flex-direction: column;
    border-radius: var(--r-lg);
    background: var(--panel);
    border: 1px solid var(--line-2);
    box-shadow: var(--shadow-pop);
    transform: translateY(14px) scale(0.98);
    transition: transform 0.3s var(--ease);
    overflow: hidden;
}
.modal-overlay.open .modal-box { transform: translateY(0) scale(1); }
.modal-pdf { width: min(880px, 100%); height: min(82vh, 760px); }
.modal-sm { width: min(420px, 100%); }

.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2);
    background: var(--panel-2);
}
.modal-title b { display: block; font-size: 0.92rem; font-weight: 800; }
.modal-title span { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); }
.modal-close {
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--panel);
    color: var(--ink-dim);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.modal-close:hover { color: var(--coral); border-color: rgba(255, 110, 94, 0.5); }
.modal-body { padding: 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 13px; }
.modal-pdf .modal-body { padding: 0; }
.modal-body iframe { width: 100%; flex: 1; border: none; background: #fff; }

#toast-stack {
    position: fixed;
    bottom: 22px; right: 22px;
    z-index: 2000;
    display: flex; flex-direction: column; gap: 9px;
    max-width: min(400px, calc(100vw - 40px));
}
.toast {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 16px;
    border-radius: var(--r-sm);
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    border-left: 3px solid var(--lime);
    box-shadow: var(--shadow-pop);
    animation: toastIn 0.4s var(--ease) both;
    font-size: 0.84rem;
}
.toast.leaving { animation: toastOut 0.3s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(36px); } }
.toast-icon { font-size: 1rem; line-height: 1.4; }
.toast b { display: block; font-size: 0.84rem; }
.toast span { font-size: 0.75rem; color: var(--ink-dim); word-break: break-word; }
.toast-success { border-left-color: var(--lime); }
.toast-error { border-left-color: var(--coral); }
.toast-info { border-left-color: var(--cyan); }

/* ============================================================
   QR TOPUP MODAL
   ============================================================ */
.qr-body { display: flex; flex-direction: column; gap: 14px; }
.qr-img-wrap {
    display: flex; justify-content: center; padding: 12px;
    background: #fff; border-radius: 12px;
}
.qr-img-wrap img { width: 220px; max-width: 100%; border-radius: 6px; }
.qr-rows { display: flex; flex-direction: column; gap: 6px; }
.qr-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-size: 0.82rem; padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03); border-radius: 8px;
}
.qr-row span { color: var(--ink-dim); }
.qr-row b { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; text-align: right; word-break: break-all; }
.qr-code-value { color: var(--lime); letter-spacing: 0.04em; }
.qr-actions { display: flex; gap: 8px; }
.qr-actions .btn { flex: 1; }

/* ============================================================
   SEPAY ADMIN PANEL
   ============================================================ */
.sepay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sepay-col { display: flex; flex-direction: column; gap: 12px; }
.sepay-row { display: flex; gap: 8px; align-items: center; }
.sepay-row input { flex: 1; }
.sepay-new-key {
    padding: 10px 12px; border: 1px dashed var(--lime); border-radius: 10px;
    font-size: 0.8rem; word-break: break-all;
}
.sepay-new-key b { color: var(--lime); }
@media (max-width: 760px) { .sepay-grid { grid-template-columns: 1fr; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
    .navbar { padding: 11px 14px; }
    .nav-brand-text { display: none; }
    .url-shell { flex-direction: column; }
    .url-shell .btn { width: 100%; }
    .quick-amounts { grid-template-columns: repeat(3, 1fr); }
    .hero-quota { width: 96px; height: 96px; }
    .data-table { min-width: 620px; }
    #toast-stack { bottom: 12px; right: 12px; }
    .tabs { width: 100%; }
    .tab-btn { flex: 1; justify-content: center; padding: 9px 8px; font-size: 0.78rem; }
    .uni-tabs { grid-template-columns: repeat(2, 1fr); }
    .admin-hero-actions { width: 100%; justify-content: space-between; }
}

/* ============================================================
   ANNOUNCEMENT BANNER
   ============================================================ */
.announcement-bar {
    width: fit-content;
    max-width: min(940px, calc(100% - 32px));
    margin: 14px auto 16px;
    border-radius: 9999px;
    padding: 7px 38px 7px 16px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
    animation: fadeUp 0.4s var(--ease) both;
    box-sizing: border-box;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
}
.announcement-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    width: 100%;
}
.announcement-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    color: var(--lime);
}
.announcement-body {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.86rem;
    text-align: center;
}
.announcement-tag {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.announcement-text {
    color: var(--ink);
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}
.announcement-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--ink-dim);
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    padding: 0;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.announcement-close:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.12);
}

/* Banner types */
.banner-info {
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.05);
}
.banner-info .announcement-tag {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.banner-warning {
    background: rgba(245, 196, 72, 0.08);
    border: 1px solid rgba(245, 196, 72, 0.28);
    box-shadow: 0 4px 20px rgba(245, 196, 72, 0.05);
}
.banner-warning .announcement-tag {
    background: rgba(245, 196, 72, 0.18);
    color: #f5c448;
    border: 1px solid rgba(245, 196, 72, 0.35);
}

.banner-success {
    background: rgba(168, 245, 72, 0.08);
    border: 1px solid rgba(168, 245, 72, 0.25);
    box-shadow: 0 4px 20px rgba(168, 245, 72, 0.05);
}
.banner-success .announcement-tag {
    background: rgba(168, 245, 72, 0.16);
    color: var(--lime);
    border: 1px solid rgba(168, 245, 72, 0.3);
}

.banner-danger {
    background: rgba(255, 110, 94, 0.08);
    border: 1px solid rgba(255, 110, 94, 0.28);
    box-shadow: 0 4px 20px rgba(255, 110, 94, 0.05);
}
.banner-danger .announcement-tag {
    background: rgba(255, 110, 94, 0.18);
    color: #ff6e5e;
    border: 1px solid rgba(255, 110, 94, 0.35);
}

/* ============================================================
   PROVIDER CHIP BADGES (BETA TAG)
   ============================================================ */
.p-badge {
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    line-height: 1;
    margin-left: 2px;
}
.p-badge-beta {
    background: rgba(245, 196, 72, 0.15);
    color: #f5c448;
    border: 1px solid rgba(245, 196, 72, 0.4);
    box-shadow: 0 0 10px rgba(245, 196, 72, 0.12);
    animation: pulseBeta 2.5s infinite ease-in-out;
}
@keyframes pulseBeta {
    0%, 100% { opacity: 1; border-color: rgba(245, 196, 72, 0.4); }
    50% { opacity: 0.75; border-color: rgba(245, 196, 72, 0.8); }
}

/* ============================================================
   WORKER NODES HIGH-TECH CARD GRID
   ============================================================ */
.worker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
    margin-top: 14px;
}
.worker-card {
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    position: relative;
    overflow: hidden;
}
.worker-card:hover {
    border-color: rgba(168, 245, 72, 0.3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    transform: translateY(-2px);
}
.worker-card.live {
    border-left: 3.5px solid var(--lime);
}
.worker-card.busy {
    border-left: 3.5px solid var(--gold);
}
.worker-card.offline {
    border-left: 3.5px solid var(--coral);
    opacity: 0.75;
}
.worker-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.worker-node-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.worker-pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 12px var(--lime);
    flex-shrink: 0;
    animation: pulseLive 2s infinite;
}
@keyframes pulseLive {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}
.worker-card.busy .worker-pulse-dot {
    background: var(--gold);
    box-shadow: 0 0 12px var(--gold);
}
.worker-card.offline .worker-pulse-dot {
    background: var(--coral);
    box-shadow: 0 0 12px var(--coral);
    animation: none;
}
.worker-node-title {
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    display: block;
    word-break: break-all;
}
.worker-node-link {
    font-size: 0.8rem;
    color: var(--cyan);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    opacity: 0.9;
    word-break: break-all;
}
.worker-node-link:hover {
    text-decoration: underline;
    opacity: 1;
    color: var(--lime);
}
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    font-family: var(--mono);
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.status-pill.status-live {
    background: rgba(168, 245, 72, 0.12);
    color: var(--lime);
    border: 1px solid rgba(168, 245, 72, 0.35);
    box-shadow: 0 0 10px rgba(168, 245, 72, 0.1);
}
.status-pill.status-busy {
    background: rgba(245, 196, 72, 0.12);
    color: var(--gold);
    border: 1px solid rgba(245, 196, 72, 0.35);
}
.status-pill.status-offline {
    background: rgba(255, 110, 94, 0.12);
    color: var(--coral);
    border: 1px solid rgba(255, 110, 94, 0.35);
}
.worker-meta-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    background: var(--panel-3);
    padding: 10px 14px;
    border-radius: var(--r);
    border: 1px solid rgba(255, 255, 255, 0.04);
    gap: 10px;
}
.worker-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.meta-label {
    font-size: 0.68rem;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.meta-val {
    font-size: 0.8rem;
    color: var(--ink-dim);
    font-weight: 600;
}
.worker-actions-bar {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    flex-wrap: wrap;
}

/* ============================================================
   WORKER SIDEBAR MINI WIDGET
   ============================================================ */
.worker-mini-row {
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.2s, transform 0.2s;
}
.worker-mini-row:hover {
    border-color: rgba(168, 245, 72, 0.35);
}
.worker-mini-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.worker-mini-info {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
}
.worker-mini-name {
    font-size: 0.82rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.worker-mini-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.worker-mini-dot.dot-online {
    background: var(--lime);
    box-shadow: 0 0 8px var(--lime);
    animation: workerPulse 2s infinite ease-in-out;
}
.worker-mini-dot.dot-busy {
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold);
    animation: workerPulse 1.2s infinite ease-in-out;
}
.worker-mini-dot.dot-offline {
    background: var(--coral);
    box-shadow: 0 0 6px var(--coral);
}
.worker-ping-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cyan);
    background: rgba(82, 224, 200, 0.08);
    border: 1px solid rgba(82, 224, 200, 0.2);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.worker-ping-badge.ping-fast {
    color: var(--lime);
    border-color: rgba(168, 245, 72, 0.3);
    background: rgba(168, 245, 72, 0.08);
}
.worker-ping-badge.ping-slow {
    color: var(--gold);
    border-color: rgba(245, 196, 72, 0.3);
    background: rgba(245, 196, 72, 0.08);
}
.worker-ping-badge.ping-error {
    color: var(--coral);
    border-color: rgba(255, 110, 94, 0.3);
    background: rgba(255, 110, 94, 0.08);
}
.worker-mini-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.worker-last-seen {
    font-size: 0.7rem;
    color: var(--ink-dim);
}
.worker-mini-actions {
    display: flex;
    gap: 4px;
}
.worker-mini-actions .btn {
    padding: 2px 7px;
    font-size: 0.7rem;
    min-height: 0;
    height: auto;
    border-radius: var(--r-sm);
}

/* ============================================================
   OUT OF QUOTA MODAL & STUDIO QUOTA HINT
   ============================================================ */
.studio-quota-hint {
    margin-top: 8px;
    padding: 7px 12px;
    background: rgba(168, 245, 72, 0.05);
    border: 1px dashed rgba(168, 245, 72, 0.22);
    border-radius: var(--r-sm);
    font-size: 0.76rem;
    color: var(--ink-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}
.studio-quota-hint b {
    color: var(--primary);
}

.modal-quota {
    width: min(640px, 100%);
}
.quota-modal-body {
    padding: 18px 20px;
    gap: 16px;
}
.quota-modal-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(245, 196, 72, 0.08);
    border: 1px solid rgba(245, 196, 72, 0.25);
    border-radius: var(--r-md);
    padding: 11px 14px;
    color: var(--ink);
    font-size: 0.84rem;
}
.quota-modal-notice .notice-icon {
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}
.quota-modal-notice p {
    margin: 0;
    color: var(--ink-dim);
    line-height: 1.4;
}
.quota-modal-notice b {
    color: var(--gold);
    font-weight: 700;
}
.quota-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) {
    .quota-choice-grid {
        grid-template-columns: 1fr;
    }
}
.choice-card {
    position: relative;
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s var(--ease);
}
.choice-card:hover {
    border-color: rgba(168, 245, 72, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.choice-tag {
    position: absolute;
    top: -9px;
    right: 12px;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--panel);
    color: var(--ink-dim);
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
}
.choice-tag-accent {
    background: rgba(168, 245, 72, 0.15);
    color: var(--primary);
    border-color: rgba(168, 245, 72, 0.35);
}
.choice-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.choice-icon {
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: var(--panel);
    border: 1px solid var(--line-2);
    flex-shrink: 0;
}
.choice-head h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--ink);
}
.choice-sub {
    margin: 2px 0 0;
    font-size: 0.74rem;
    color: var(--ink-dim);
}
.choice-sub b {
    color: var(--primary);
    font-size: 0.85rem;
}
.choice-features {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 0.75rem;
    color: var(--ink-dim);
}
.choice-features li {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}
.choice-features i {
    font-style: normal;
    color: var(--primary);
    font-weight: 800;
}
.choice-wallet-info {
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    padding: 9px 11px;
    margin-bottom: 12px;
}
.wallet-balance-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.77rem;
    color: var(--ink-dim);
}
.wallet-balance-line b {
    color: var(--primary);
    font-size: 0.88rem;
}
.wallet-note {
    margin: 4px 0 0;
    font-size: 0.68rem;
    color: var(--ink-faint);
    line-height: 1.3;
}
.choice-action-wrap {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* ============================================================
   CYBER-TECH "XỊN XÒ" LOADING & TELEMETRY SYSTEM
   ============================================================ */

/* 1. Aurora Laser Comet Progress Bar */
.folder-progress-track, .job-progress {
    height: 9px !important;
    background: #060b08 !important;
    border-radius: 999px !important;
    overflow: visible !important;
    border: 1px solid rgba(82, 224, 200, 0.28) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 14px rgba(82, 224, 200, 0.1) !important;
    position: relative !important;
    margin-top: 10px !important;
}

.folder-progress-bar, .job-progress-bar {
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(
        90deg,
        #10b981 0%,
        #06b6d4 25%,
        #8b5cf6 50%,
        #ec4899 75%,
        #06b6d4 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: auroraFlow 2s linear infinite !important;
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    position: relative !important;
    transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Pulsing Laser Head Comet at leading edge */
.folder-progress-bar::after, .job-progress-bar::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 
        0 0 6px #ffffff,
        0 0 14px #06b6d4,
        0 0 24px #a8f548,
        0 0 35px #8b5cf6;
    animation: laserHeadPulse 1.2s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 2;
}

@keyframes auroraFlow {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@keyframes laserHeadPulse {
    0% { transform: translateY(-50%) scale(0.9); opacity: 0.9; }
    100% { transform: translateY(-50%) scale(1.35); opacity: 1; filter: brightness(1.25); }
}

/* Completed celebration state */
.folder-progress-bar.is-complete, .job-progress-bar.is-complete {
    background: linear-gradient(90deg, #10b981, #34d399, #10b981) !important;
    box-shadow: 0 0 26px rgba(16, 185, 129, 0.85) !important;
}
.folder-progress-bar.is-complete::after, .job-progress-bar.is-complete::after {
    background: #a7f3d0 !important;
    box-shadow: 0 0 14px #34d399, 0 0 28px #10b981 !important;
}

/* 2. Cyber Pipeline Stepper HUD */
.cyber-pipeline,
#job-pipeline,
.job-card .cyber-pipeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 16px 14px !important; /* EXACTLY 16px margin, perfectly aligned with console and progress bar */
    padding: 12px 20px;
    background: rgba(10, 16, 12, 0.92);
    border: 1px solid rgba(82, 224, 200, 0.2);
    border-radius: var(--r);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 18px rgba(0, 0, 0, 0.35);
}

.folder-status-box .cyber-pipeline,
#folder-pipeline {
    margin: 0 0 12px 0 !important;
}

.cyber-pipeline::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(82, 224, 200, 0.07), transparent);
    animation: hudSweep 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hudSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.pipe-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
    min-width: 60px;
}

.pipe-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0b1315;
    border: 1.5px solid var(--line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pipe-dot svg {
    display: block;
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}

.pipe-label {
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    text-transform: uppercase;
    text-align: center;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.pipe-connector {
    height: 2px;
    flex: 1;
    background: var(--line-2);
    margin: 0 6px;
    align-self: flex-start;
    margin-top: 15px; /* exactly centered with 32px dot: (32 - 2) / 2 = 15px */
    position: relative;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Active Step */
.pipe-step.is-active .pipe-dot {
    border-color: var(--cyan);
    background: rgba(82, 224, 200, 0.18);
    color: var(--cyan);
    box-shadow: 0 0 16px rgba(82, 224, 200, 0.75), inset 0 0 8px rgba(82, 224, 200, 0.4);
    transform: scale(1.15);
    animation: dotPulse 1.4s ease-in-out infinite alternate;
}

.pipe-step.is-active .pipe-label {
    color: var(--cyan);
    text-shadow: 0 0 8px rgba(82, 224, 200, 0.4);
}

@keyframes dotPulse {
    0% { box-shadow: 0 0 8px rgba(82, 224, 200, 0.4); }
    100% { box-shadow: 0 0 20px rgba(82, 224, 200, 0.9), 0 0 28px rgba(168, 245, 72, 0.5); }
}

/* Done Step */
.pipe-step.is-done .pipe-dot {
    border-color: var(--lime);
    background: var(--lime);
    color: #050806;
    box-shadow: 0 0 14px rgba(168, 245, 72, 0.6);
    transform: scale(1);
    animation: none;
}

.pipe-step.is-done .pipe-label {
    color: var(--lime);
}

.pipe-connector.is-done {
    background: linear-gradient(90deg, var(--lime), var(--cyan));
    box-shadow: 0 0 8px rgba(82, 224, 200, 0.55);
}

/* 3. Telemetry Stats Row */
.folder-telemetry-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 16px 0;
    padding-top: 8px;
    border-top: 1px dashed rgba(82, 224, 200, 0.14);
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-dim);
}

.telemetry-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tele-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 8px var(--lime);
    animation: statusPulse 1.6s infinite ease-in-out;
}

.tele-val {
    font-weight: 700;
    color: var(--ink);
}

.tele-glow {
    color: var(--cyan);
    text-shadow: 0 0 8px rgba(82, 224, 200, 0.4);
}

/* 4. Table Row Holographic Scanning Stream */
.data-table tbody tr.row-downloading {
    background: linear-gradient(90deg, rgba(82, 224, 200, 0.09) 0%, rgba(139, 92, 246, 0.16) 50%, rgba(82, 224, 200, 0.09) 100%) !important;
    background-size: 200% 100% !important;
    animation: rowScanStream 2s linear infinite !important;
    box-shadow: inset 3px 0 0 var(--cyan) !important;
}

@keyframes rowScanStream {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.data-table tbody tr.row-success-flash {
    animation: successRowFlash 0.85s ease-out !important;
}

@keyframes successRowFlash {
    0% { background: rgba(168, 245, 72, 0.32); }
    100% { background: transparent; }
}

/* Cyber Dual Ring Spinner Badge */
.badge-processing {
    background: rgba(82, 224, 200, 0.14) !important;
    color: var(--cyan) !important;
    border: 1px solid rgba(82, 224, 200, 0.4) !important;
    box-shadow: 0 0 12px rgba(82, 224, 200, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.cyber-ring-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(82, 224, 200, 0.25);
    border-top-color: var(--cyan);
    border-right-color: var(--lime);
    border-radius: 50%;
    animation: cyberSpin 0.75s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

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

/* 5. Terminal Badges & Live Cursor */
.folder-console .ln, .job-console .ln {
    animation: termSlideIn 0.22s ease-out;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.5;
}

@keyframes termSlideIn {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

.t-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.t-tag.t-ok {
    background: rgba(168, 245, 72, 0.16);
    color: var(--lime);
    border: 1px solid rgba(168, 245, 72, 0.35);
    box-shadow: 0 0 8px rgba(168, 245, 72, 0.25);
}

.t-tag.t-zip {
    background: rgba(183, 140, 242, 0.16);
    color: var(--violet);
    border: 1px solid rgba(183, 140, 242, 0.35);
}

.t-tag.t-single {
    background: rgba(82, 224, 200, 0.16);
    color: var(--cyan);
    border: 1px solid rgba(82, 224, 200, 0.35);
}

.t-tag.t-step {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.t-tag.t-err {
    background: rgba(255, 110, 94, 0.16);
    color: var(--coral);
    border: 1px solid rgba(255, 110, 94, 0.35);
}

.terminal-cursor {
    display: inline-block;
    color: var(--cyan);
    font-weight: 900;
    animation: cursorBlink 0.9s infinite;
}

@keyframes cursorBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* 6. Button Busy Glow */
.btn-cyber-busy {
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 0 24px rgba(82, 224, 200, 0.5) !important;
}

.btn-cyber-busy::before {
    content: '' !important;
    position: absolute !important;
    inset: -2px !important;
    background: linear-gradient(90deg, #10b981, #06b6d4, #8b5cf6, #10b981) !important;
    background-size: 300% 100% !important;
    animation: auroraFlow 2s linear infinite !important;
    border-radius: inherit !important;
    z-index: -1 !important;
}

/* 7. Confetti Particles Burst */
.confetti-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999;
    animation: particleFly 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes particleFly {
    0% { transform: translate(0, 0) scale(1.3); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* 8. Google OAuth Button & Divider */
.btn-google-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-sm, 10px);
    color: #f8fafc;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    font-family: inherit;
    margin-top: 4px;
}
.btn-google-oauth:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.btn-google-oauth:active {
    transform: translateY(0);
}
.oauth-divider {
    display: flex;
    align-items: center;
    margin: 18px 0 14px 0;
    text-align: center;
    color: #64748b;
    font-size: 0.78rem;
    font-family: var(--mono, monospace);
    font-weight: 500;
}
.oauth-divider::before,
.oauth-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.oauth-divider span {
    padding: 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ==================== DOCUSAUR PET MASCOT & DONATE ==================== */
.docudown-pet-container {
    position: fixed;
    bottom: 24px;
    right: 28px;
    z-index: 9980;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    user-select: none;
    transition: transform 0.25s ease, opacity 0.3s ease;
    touch-action: none;
}
.docudown-pet-container * {
    pointer-events: auto;
}
.docudown-pet-container.roaming-active {
    transition: left 0.6s cubic-bezier(0.25, 1, 0.5, 1), bottom 0.4s ease;
}
.docudown-pet-container.dragging {
    transition: none !important;
    cursor: grabbing !important;
}

.docudown-pet-body {
    position: relative;
    cursor: grab;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.docudown-pet-body:hover {
    transform: scale(1.08) translateY(-4px);
}
.docudown-pet-container.dragging .docudown-pet-body {
    cursor: grabbing;
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 20px 35px rgba(0, 210, 106, 0.4));
}

/* Khủng Long Animated SVG Character */
.docusaur-svg {
    width: 92px;
    height: 92px;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 8px 16px rgba(0, 210, 106, 0.35));
    transition: transform 0.25s ease;
}

/* Thân hình thở nhịp nhàng */
.dino-creature {
    transform-origin: 50px 80px;
    animation: dino-breathe 3.5s ease-in-out infinite;
}
@keyframes dino-breathe {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(-3px) scaleY(1.02); }
}

/* Đuôi ve vẩy */
.dino-tail {
    transform-origin: 32px 66px;
    animation: dino-tail-wag 1.6s ease-in-out infinite;
}
@keyframes dino-tail-wag {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-15deg); }
}

/* Chớp mắt tự nhiên */
.dino-eyelid {
    animation: dino-blink 4s infinite;
}
@keyframes dino-blink {
    0%, 92%, 100% { opacity: 0; }
    94%, 98% { opacity: 1; }
}

/* Đèn màn hình bụng nhấp nháy công nghệ */
.dino-screen-icon {
    animation: dino-screen-glow 1.8s infinite alternate;
}
@keyframes dino-screen-glow {
    0% { opacity: 0.5; stroke: #00b0ff; }
    100% { opacity: 1; stroke: #00f59b; }
}

/* Khớp hai chân cử động chạy/bước đi */
.dino-leg.leg-left {
    transform-origin: 40px 76px;
}
.dino-leg.leg-right {
    transform-origin: 50px 76px;
}

/* Bụi chân mặc định ẩn */
.dino-dust-group {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Khi bước đi (Walking) */
.docudown-pet-container.walking .dino-creature {
    animation: dino-walk-bob 0.3s ease-in-out infinite alternate !important;
}
.docudown-pet-container.walking .dino-leg.leg-left {
    animation: dino-leg-swing-1 0.3s ease-in-out infinite alternate !important;
}
.docudown-pet-container.walking .dino-leg.leg-right {
    animation: dino-leg-swing-2 0.3s ease-in-out infinite alternate !important;
}
.docudown-pet-container.walking .dino-tail {
    animation: dino-tail-wag 0.4s ease-in-out infinite !important;
}
.docudown-pet-container.walking .dino-dust-group {
    opacity: 1;
    animation: dino-dust-puff 0.3s ease-in-out infinite alternate;
}

@keyframes dino-walk-bob {
    0% { transform: translateY(0) rotate(-2deg); }
    100% { transform: translateY(-7px) rotate(3deg); }
}
@keyframes dino-leg-swing-1 {
    0% { transform: rotate(32deg); }
    100% { transform: rotate(-32deg); }
}
@keyframes dino-leg-swing-2 {
    0% { transform: rotate(-32deg); }
    100% { transform: rotate(32deg); }
}
@keyframes dino-dust-puff {
    0% { transform: scale(0.6) translateX(0); opacity: 0.3; }
    100% { transform: scale(1.2) translateX(-4px); opacity: 0.8; }
}

/* Khi chạy nhanh (Running) */
.docudown-pet-container.running .dino-creature {
    animation: dino-run-bob 0.18s ease-in-out infinite alternate !important;
}
.docudown-pet-container.running .dino-leg.leg-left {
    animation: dino-leg-swing-1 0.18s ease-in-out infinite alternate !important;
}
.docudown-pet-container.running .dino-leg.leg-right {
    animation: dino-leg-swing-2 0.18s ease-in-out infinite alternate !important;
}

@keyframes dino-run-bob {
    0% { transform: translateY(0) rotate(-6deg); }
    100% { transform: translateY(-12px) rotate(8deg); }
}

/* Khi nhảy tưng tưng (Jumping) */
.docudown-pet-container.jumping {
    animation: dino-high-jump 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
}
.docudown-pet-container.jumping .dino-leg.leg-left,
.docudown-pet-container.jumping .dino-leg.leg-right {
    transform: rotate(25deg) scaleY(0.75);
}
.docudown-pet-container.jumping .dino-creature {
    transform: rotate(-10deg) scale(1.08);
}
@keyframes dino-high-jump {
    0% { transform: translateY(0); }
    40% { transform: translateY(-55px) scale(1.05); }
    70% { transform: translateY(-60px) scale(1.1); }
    100% { transform: translateY(0); }
}

/* Lật mặt theo hướng đi */
.docudown-pet-container.face-left .docusaur-svg {
    transform: scaleX(-1);
}

/* Khi nhấp vào: Wiggle & tim bay */
.docudown-pet-body.wiggle .docusaur-svg {
    animation: pet-wiggle 0.5s ease;
}
@keyframes pet-wiggle {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2) rotate(-8deg); }
    50% { transform: scale(0.9) rotate(8deg); }
    75% { transform: scale(1.15) rotate(-4deg); }
}
.docudown-pet-container.face-left .docudown-pet-body.wiggle .docusaur-svg {
    animation: pet-wiggle-left 0.5s ease;
}
@keyframes pet-wiggle-left {
    0%, 100% { transform: scaleX(-1) scale(1); }
    25% { transform: scaleX(-1) scale(1.2) rotate(-8deg); }
    50% { transform: scaleX(-1) scale(0.9) rotate(8deg); }
    75% { transform: scaleX(-1) scale(1.15) rotate(-4deg); }
}

/* Phản lực dưới chân Jetpack Thrusters */
.dino-thrusters {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.docudown-pet-container.flying-jetpack .dino-thrusters {
    opacity: 1;
}
.thruster-flame {
    animation: jetpack-flame 0.1s infinite alternate;
}
@keyframes jetpack-flame {
    0% { transform: scaleY(0.7) translateY(0); fill: #00e5ff; }
    100% { transform: scaleY(1.3) translateY(2px); fill: #76ff03; }
}

/* Lộn nhào 360 độ Somersault */
.docudown-pet-container.somersault {
    animation: dino-flip 0.85s cubic-bezier(0.2, 0.8, 0.4, 1.2) !important;
}
@keyframes dino-flip {
    0% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-80px) rotate(120deg) scale(1.1); }
    70% { transform: translateY(-80px) rotate(260deg) scale(1.1); }
    100% { transform: translateY(0) rotate(360deg); }
}

/* Nhảy lò xo liên hoàn Triple Hop */
.docudown-pet-container.triple-hop {
    animation: dino-triple-hop 1.2s ease-in-out !important;
}
@keyframes dino-triple-hop {
    0%, 100% { transform: translateY(0); }
    20% { transform: translateY(-30px); }
    40% { transform: translateY(0); }
    60% { transform: translateY(-48px); }
    80% { transform: translateY(0); }
    90% { transform: translateY(-18px); }
}

/* Bay lơ lửng phản lực Jetpack Flight */
.docudown-pet-container.flying-jetpack {
    animation: dino-jet-float 3.5s ease-in-out !important;
}
@keyframes dino-jet-float {
    0% { transform: translateY(0); }
    20% { transform: translateY(-90px) rotate(-6deg); }
    50% { transform: translateY(-120px) rotate(6deg); }
    80% { transform: translateY(-70px) rotate(-4deg); }
    100% { transform: translateY(0); }
}

/* Badge Donate heart trên vai Pet */
.docudown-pet-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 10px rgba(255, 65, 108, 0.6);
    border: 2px solid var(--panel, #121820);
    cursor: pointer;
    animation: heart-pulse 2s infinite ease-in-out;
    z-index: 4;
}
@keyframes heart-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.22); }
}

/* Mini trigger bubble trên đầu: SÁT NGAY ĐỈNH ĐẦU KHỦNG LONG */
.docudown-pet-mini-trigger {
    position: absolute;
    bottom: calc(100% - 10px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(18, 24, 32, 0.95);
    border: 1.5px solid var(--accent, #00d26a);
    color: var(--accent, #00d26a);
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 800;
    font-family: var(--mono);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 210, 106, 0.35);
    white-space: nowrap;
    opacity: 0.95;
    transition: all 0.2s ease;
    animation: mini-bubble-float 2.2s ease-in-out infinite;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 5;
}
.docudown-pet-mini-trigger:hover {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
    background: var(--accent, #00d26a);
    color: #000;
}
@keyframes mini-bubble-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-3px); }
}
.docudown-pet-container.has-bubble .docudown-pet-mini-trigger {
    display: none !important;
}

/* Bóng thoại Speech Bubble: Absolute ngay trên đầu, không chiếm dòng */
.docudown-pet-bubble {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(8px) scale(0.95);
    width: max-content;
    max-width: 280px;
    background: var(--panel, #141b24);
    border: 1.5px solid var(--line-2, rgba(255,255,255,0.18));
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
    color: var(--ink, #fff);
    font-size: 0.84rem;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    display: none;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
    pointer-events: auto;
    z-index: 10;
}
.docudown-pet-bubble.active {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}
.docudown-pet-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--panel, #141b24);
}
.docudown-pet-bubble-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-family: var(--mono);
    color: var(--accent, #00d26a);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.docudown-pet-bubble-close {
    cursor: pointer;
    opacity: 0.6;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
}
.docudown-pet-bubble-close:hover {
    opacity: 1;
}
.docudown-pet-bubble-text {
    cursor: pointer;
}
.docudown-pet-bubble-donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(255, 65, 108, 0.15), rgba(255, 75, 43, 0.15));
    border: 1px solid rgba(255, 65, 108, 0.4);
    border-radius: 7px;
    color: #ff4b2b;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.docudown-pet-bubble-donate-btn:hover {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(255, 65, 108, 0.35);
}

/* Nút điều khiển Pet: Minimize & Pause Roam */
.docudown-pet-toggle-min {
    position: absolute;
    bottom: -4px;
    left: -4px;
    width: 22px;
    height: 22px;
    background: var(--panel-2, #1d2532);
    border: 1px solid var(--line-2, rgba(255,255,255,0.12));
    border-radius: 50%;
    color: var(--ink-faint, #7f8c9b);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}
.docudown-pet-container:hover .docudown-pet-toggle-min {
    opacity: 1;
}
.docudown-pet-container.minimized .docudown-pet-img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}
.docudown-pet-container.minimized .docudown-pet-bubble,
.docudown-pet-container.minimized .docudown-pet-badge,
.docudown-pet-container.minimized .docudown-pet-mini-trigger {
    display: none !important;
}

/* Popup Donate Modal Styling */
.donate-modal-box {
    width: min(520px, 94vw);
    max-height: min(90vh, 780px);
    display: flex;
    flex-direction: column;
    margin: auto;
    background: var(--panel, #121820);
    border: 1px solid var(--line-2, rgba(255,255,255,0.15));
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    overflow: hidden;
}
.donate-header-banner {
    background: linear-gradient(135deg, rgba(0, 210, 106, 0.12), rgba(255, 65, 108, 0.12));
    border-bottom: 1px solid var(--line, rgba(255,255,255,0.1));
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.donate-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.donate-modal-body::-webkit-scrollbar {
    width: 6px;
}
.donate-modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.donate-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}
[data-theme="light"] .donate-modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}
@media (max-height: 760px), (max-width: 480px) {
    .modal-overlay {
        padding: 8px !important;
    }
    .donate-modal-box {
        width: min(480px, 96vw);
        max-height: 94vh;
        border-radius: 14px;
    }
    .donate-header-banner {
        padding: 12px 16px;
    }
    .donate-modal-body {
        padding: 14px 16px;
    }
    .donate-qr-wrapper {
        padding: 12px !important;
        margin: 10px 0 !important;
    }
    .donate-qr-img {
        max-width: 170px !important;
    }
    .donate-info-row {
        padding: 8px 12px !important;
        margin-bottom: 6px !important;
    }
}
@media (max-height: 600px) {
    .donate-modal-box {
        max-height: 96vh;
    }
    .donate-qr-img {
        max-width: 125px !important;
    }
    .donate-qr-wrapper {
        padding: 8px !important;
        margin: 8px 0 !important;
    }
    .donate-modal-body {
        padding: 10px 14px;
    }
}
.donate-qr-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: var(--panel-2, #1a222e);
    border-radius: 14px;
    border: 1px solid var(--line-2, rgba(255,255,255,0.1));
    margin: 16px 0;
}
.donate-qr-img {
    max-width: 220px;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    object-fit: contain;
}
.donate-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--panel-2, #1a222e);
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--line, rgba(255,255,255,0.08));
}
.donate-copy-btn {
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--panel, #121820);
    border: 1px solid var(--line-2, rgba(255,255,255,0.15));
    color: var(--ink, #fff);
    font-size: 0.76rem;
    font-family: var(--mono);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}
.donate-copy-btn:hover {
    background: var(--accent, #00d26a);
    color: #000;
    border-color: var(--accent, #00d26a);
}

/* Light mode adjustments */
html[data-theme="light"] .docudown-pet-img {
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.25);
    border-color: #0d9488;
}
html[data-theme="light"] .docudown-pet-bubble {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    color: #0f172a;
}
html[data-theme="light"] .docudown-pet-bubble::after {
    border-top-color: #ffffff;
}
html[data-theme="light"] .donate-modal-box {
    background: #ffffff;
    border-color: #cbd5e1;
}
html[data-theme="light"] .donate-qr-wrapper,
html[data-theme="light"] .donate-info-row {
    background: #f8fafc;
    border-color: #e2e8f0;
}
html[data-theme="light"] .donate-copy-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

@media (max-width: 640px) {
    .docudown-pet-container {
        bottom: 16px;
        right: 14px;
    }
    .docudown-pet-img {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }
    .docudown-pet-bubble {
        left: auto !important;
        right: 0 !important;
        transform: translateY(8px) scale(0.95) !important;
        max-width: min(230px, calc(100vw - 32px));
        font-size: 0.78rem;
    }
    .docudown-pet-bubble.active {
        transform: translateY(0) scale(1) !important;
    }
    .docudown-pet-bubble::after {
        left: auto !important;
        right: 32px !important;
        transform: none !important;
    }
}

/* ============================================================
   ACTIVE SESSIONS & PROFILE STYLING (GLOBAL)
   ============================================================ */
.session-row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm, 10px);
    gap: 16px;
    transition: all 0.2s ease;
}
.session-row-item.current-session-item {
    border-color: rgba(168, 245, 72, 0.45);
    background: rgba(168, 245, 72, 0.05);
}
.session-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
}
.current-session-item .session-icon-box {
    background: rgba(168, 245, 72, 0.15);
    color: var(--lime);
}
.session-dev-text {
    font-weight: 700;
    color: var(--ink, #f8fafc);
    font-size: 0.94rem;
}
.session-badge-current {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--lime);
    background: rgba(168, 245, 72, 0.15);
    border: 1px solid rgba(168, 245, 72, 0.35);
    padding: 2px 8px;
    border-radius: 9999px;
    white-space: nowrap;
}
.session-meta-line {
    font-size: 0.8rem;
    color: var(--ink-faint, #64748b);
    font-family: var(--mono);
    margin-top: 4px;
}
.session-ip-text {
    color: var(--ink-dim, #cbd5e1);
    font-weight: 600;
}
.session-time-text {
    color: var(--ink-faint, #94a3b8);
}
.session-badge-counter {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
    background: rgba(168, 245, 72, 0.15);
    color: var(--lime);
    margin-left: 8px;
    border: 1px solid rgba(168, 245, 72, 0.25);
}
.session-btn-current {
    padding: 7px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-faint, #64748b);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: not-allowed;
}

/* Light mode overrides */
[data-theme="light"] .session-row-item {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
[data-theme="light"] .session-row-item.current-session-item {
    background: #F0FDF4 !important;
    border: 1.5px solid #86EFAC !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.06) !important;
}
[data-theme="light"] .session-icon-box {
    background: #F1F5F9 !important;
    color: #64748B !important;
}
[data-theme="light"] .current-session-item .session-icon-box {
    background: #DCFCE7 !important;
    color: #15803D !important;
}
[data-theme="light"] .session-dev-text {
    color: #0F172A !important;
}
[data-theme="light"] .session-badge-current {
    color: #15803D !important;
    background: #DCFCE7 !important;
    border: 1px solid #86EFAC !important;
}
[data-theme="light"] .session-badge-counter {
    color: #15803D !important;
    background: #DCFCE7 !important;
    border: 1px solid #86EFAC !important;
}
[data-theme="light"] .session-meta-line {
    color: #64748B !important;
}
[data-theme="light"] .session-ip-text {
    color: #0F172A !important;
    font-weight: 700 !important;
}
[data-theme="light"] .session-time-text {
    color: #475569 !important;
}
[data-theme="light"] .session-btn-current {
    background: #F1F5F9 !important;
    color: #475569 !important;
    border: 1px solid #CBD5E1 !important;
}
[data-theme="light"] .lms-account-box {
    background: #F0FDF4 !important;
    border: 1px solid #86EFAC !important;
    color: #334155 !important;
}
[data-theme="light"] .lms-account-box b {
    color: #0F172A !important;
}

/* Light Mode Overrides for Bento, Auth, and Security components */
[data-theme="light"] .bento-feature-highlight {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    color: #334155 !important;
}
[data-theme="light"] .bento-feature-highlight div[style*="color:var(--lime)"],
[data-theme="light"] .bento-feature-highlight div[style*="color: var(--lime)"] {
    color: #15803D !important;
}
[data-theme="light"] .bento-feature-highlight div[style*="color:var(--ink-dim)"],
[data-theme="light"] .bento-feature-highlight div[style*="color: var(--ink-dim)"] {
    color: #475569 !important;
}
[data-theme="light"] .btn-google-oauth {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .btn-google-oauth:hover {
    background: #F8FAFC !important;
    border-color: #94A3B8 !important;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .oauth-divider {
    color: #94A3B8 !important;
}
[data-theme="light"] .oauth-divider::before,
[data-theme="light"] .oauth-divider::after {
    border-bottom: 1px solid #E2E8F0 !important;
}
[data-theme="light"] .login-sec-callout {
    background: #F0FDF4 !important;
    border-color: #BBF7D0 !important;
}
[data-theme="light"] .login-sec-callout-icon {
    color: #16A34A !important;
}
[data-theme="light"] .login-sec-callout-body {
    color: #334155 !important;
}
[data-theme="light"] .login-sec-callout-title {
    color: #0F172A !important;
}
[data-theme="light"] .login-sec-callout-link {
    color: #15803D !important;
}
[data-theme="light"] .sec-table-wrap {
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
}
[data-theme="light"] .sec-table th {
    background: #F0FDF4 !important;
    color: #15803D !important;
    border-bottom: 1px solid #DCFCE7 !important;
    font-weight: 700 !important;
}
[data-theme="light"] .sec-table td {
    color: #334155 !important;
    border-bottom: 1px solid #F1F5F9 !important;
}
[data-theme="light"] .sec-table td b {
    color: #0F172A !important;
}
[data-theme="light"] .sec-table tr:hover td {
    background: #F8FAFC !important;
}
[data-theme="light"] .badge-no {
    background: #FEF2F2 !important;
    color: #DC2626 !important;
    border: 1px solid #FECACA !important;
}
[data-theme="light"] .badge-yes {
    background: #F0FDF4 !important;
    color: #16A34A !important;
    border: 1px solid #BBF7D0 !important;
}
[data-theme="light"] .badge-temp {
    background: #FEFCE8 !important;
    color: #CA8A04 !important;
    border: 1px solid #FEF08A !important;
}

/* ============================================================
   WORKER STATUS BAR & MOBILE NAVBAR RESPONSIVE FIXES
   ============================================================ */
.workers-live-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 12px 0 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 0.8rem;
}
.workers-bar-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--text-muted, #94a3b8);
    flex-shrink: 0;
}
.workers-bar-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
}
.workers-bar-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.workers-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.71rem;
    font-weight: 700;
    font-family: var(--mono);
    white-space: nowrap;
    background: rgba(34, 197, 94, 0.14);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.workers-summary-badge.is-all-busy {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}
.workers-queue-badge {
    display: none;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.71rem;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.workers-pills-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.worker-pill,
.worker-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    font-size: 0.73rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease;
    margin: 0 !important;
}
.worker-pill .w-dot,
.worker-status-pill .w-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.worker-pill-more {
    cursor: pointer;
    background: rgba(148, 163, 184, 0.14) !important;
    color: var(--ink-dim, #cbd5e1) !important;
    border: 1px dashed rgba(148, 163, 184, 0.35) !important;
    font-family: var(--mono);
}
.worker-pill-more:hover {
    background: rgba(168, 245, 72, 0.14) !important;
    color: var(--lime, #a8f548) !important;
    border-color: rgba(168, 245, 72, 0.4) !important;
}
[data-theme="light"] .workers-live-status-bar {
    background: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}
[data-theme="light"] .workers-bar-head {
    color: #475569 !important;
}
@media (max-width: 680px) {
    .workers-live-status-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 9px 11px;
    }
    .workers-bar-head {
        width: 100%;
        justify-content: space-between;
    }
    .workers-pills-list {
        width: 100%;
        gap: 6px;
    }
    .worker-pill,
    .worker-status-pill {
        font-size: 0.71rem !important;
        padding: 3px 8px !important;
    }
    .navbar {
        padding: 8px 10px !important;
        gap: 6px !important;
    }
    .logo-mark {
        width: 32px !important;
        height: 32px !important;
    }
    .logo-mark svg {
        width: 17px !important;
        height: 17px !important;
    }
    .nav-right {
        gap: 5px !important;
        flex-wrap: nowrap !important;
    }
    .nav-btn {
        padding: 6px 9px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }
    .nav-avatar, .nav-initials {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.68rem !important;
    }
    .theme-toggle {
        width: 30px !important;
        height: 30px !important;
        flex-shrink: 0 !important;
    }
}