/* ══════════════════════════════════════════════════════════
   Trading Talents — KOL Management Dashboard
   Design System: Aurum 3.0 — 2026 Edition

   A single, unified design system. No override layers.
   Modern CSS: color-mix(), :has(), container queries,
   @layer, scroll-driven animations, prefers-reduced-motion.
   ══════════════════════════════════════════════════════════ */

/* ── Google Fonts ────────────────────────���──────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── CSS Custom Properties — Single Source of Truth ─────── */
:root {
    /* ─ Backgrounds ─ */
    --bg-base: #09090B;
    --bg-primary: #09090B;
    --bg-raised: #0F0F12;
    --bg-secondary: #0F0F12;
    --bg-surface: #16161A;
    --bg-tertiary: #16161A;
    --bg-elevated: #1C1C22;
    --bg-card: #0F0F12;
    --bg-card-hover: #16161A;
    --bg-sidebar: #0B0B0E;
    --bg-input: #131316;
    --bg-overlay: rgba(0, 0, 0, 0.7);

    /* ─ Brand — Aurum Gold ─ */
    --gold: #D4AF37;
    --gold-light: #E8C84A;
    --gold-dim: #B8962F;
    --gold-bg: rgba(212, 175, 55, 0.08);
    --gold-bg-hover: rgba(212, 175, 55, 0.14);
    --gold-border: rgba(212, 175, 55, 0.2);
    --gold-glow: rgba(212, 175, 55, 0.06);

    /* ─ Accents (unified aliases) ─ */
    --accent-gold: var(--gold);
    --accent-gold-hover: var(--gold-light);
    --accent-gold-bg: var(--gold-bg);
    --accent-gold-border: var(--gold-border);
    --accent-primary: var(--gold);
    --accent-cyan: var(--gold);
    --accent-yellow: var(--gold);

    /* ─ Semantic Colors ─ */
    --green: #22C55E;
    --green-bg: rgba(34, 197, 94, 0.1);
    --green-border: rgba(34, 197, 94, 0.2);
    --accent-green: #22C55E;

    --red: #EF4444;
    --red-bg: rgba(239, 68, 68, 0.1);
    --red-border: rgba(239, 68, 68, 0.2);
    --accent-red: #EF4444;

    --orange: #F59E0B;
    --orange-bg: rgba(245, 158, 11, 0.1);
    --orange-border: rgba(245, 158, 11, 0.2);
    --accent-orange: #F59E0B;

    --blue: #3B82F6;
    --blue-bg: rgba(59, 130, 246, 0.1);
    --blue-border: rgba(59, 130, 246, 0.2);
    --accent-blue: #3B82F6;

    --purple: #8B5CF6;
    --purple-bg: rgba(139, 92, 246, 0.1);
    --purple-border: rgba(139, 92, 246, 0.2);
    --accent-purple: #8B5CF6;

    --indigo: #6366F1;
    --accent-indigo: #6366F1;

    --teal: #14B8A6;
    --teal-bg: rgba(20, 184, 166, 0.1);
    --accent-teal: #14B8A6;

    --pink: #EC4899;
    --pink-bg: rgba(236, 72, 153, 0.1);
    --accent-pink: #EC4899;

    /* ─ Text ─ */
    --text-primary: #F5F5F4;
    --text-secondary: #C4C4CC;
    --text-muted: #8B8B96;
    --text-white: #FFFFFF;
    --text-dim: #71717A;

    /* ─ Borders ─ */
    --border-primary: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-active: var(--gold-border);
    --border-glow: rgba(212, 175, 55, 0.12);

    /* ─ Shadows (directional, consistent light source) ─ */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
    --shadow-gold: 0 4px 24px rgba(212, 175, 55, 0.1), 0 0 0 1px rgba(212, 175, 55, 0.06);
    --shadow-glow: 0 0 24px var(--gold-glow);
    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.3);

    /* ─ Layout ─ */
    --sidebar-width: 252px;
    --sidebar-collapsed: 72px;
    --header-height: 60px;
    --page-max-width: 1440px;
    --bottom-nav-height: 64px;

    /* ─ Border Radius ─ */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ─ Spacing (4px scale) ─ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    /* Aliases for existing code */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* ─ Typography Scale (bumped for readability) ─ */
    --text-2xs: 0.7rem;
    --text-xs: 0.78rem;
    --text-sm: 0.86rem;
    --text-base: 0.92rem;
    --text-lg: 1.08rem;
    --text-xl: 1.3rem;
    --text-2xl: 1.65rem;
    --text-3xl: 2.1rem;

    /* ─ Font ─ */
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    --font-primary: var(--font-sans);

    /* ─ Font Weights ─ */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* ─ Transitions (premium weight) ─ */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.35s;
    --transition-fast: 0.12s var(--ease-out);
    --transition-normal: 0.2s var(--ease-out);
    --transition-slow: 0.35s var(--ease-out);
    --transition-spring: 0.4s var(--ease-spring);

    /* ─ Z-Index Scale ─ */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-toast: 9999;
    --z-command: 10000;
}

/* ── Reduced Motion ────────────────────��───────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ════════════════��═════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════════ */

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

html {
    font-size: 14px;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    /* Esquema oscuro nativo: hace que Chrome/Safari/Firefox pinten los widgets
       del navegador (dropdown de <select>, calendar picker, scrollbars) en dark. */
    color-scheme: dark;
}

body {
    font-family: var(--font-sans);
    background:
        radial-gradient(ellipse 80% 50% at 0% 0%, rgba(212,175,55,0.035) 0%, transparent 50%),
        radial-gradient(ellipse 60% 80% at 100% 100%, rgba(139,92,246,0.025) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 70% 0%, rgba(59,130,246,0.02) 0%, transparent 50%),
        var(--bg-base);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: 420;
    letter-spacing: 0.01em;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Noise texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.018;
    pointer-events: none;
    z-index: 10000;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px;
}

/* Ambient glow zones */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle 600px at 0% 30%, rgba(212,175,55,0.03) 0%, transparent 70%),
        radial-gradient(circle 500px at 100% 70%, rgba(139,92,246,0.025) 0%, transparent 70%),
        radial-gradient(circle 400px at 50% 100%, rgba(20,184,166,0.018) 0%, transparent 60%);
    animation: ambient-drift 20s ease-in-out infinite alternate;
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--gold-light); }

img { max-width: 100%; display: block; }

::selection {
    background: rgba(212, 175, 55, 0.3);
    color: white;
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ── Scrollbar ─────────────────���───────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }


/* ══════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ══════════════════════════════════════════════════════════ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

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

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes countUp {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

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

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

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(2); opacity: 0; }
}

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

@keyframes glow-breathe {
    0%, 100% { box-shadow: 0 0 16px var(--gold-glow); }
    50% { box-shadow: 0 0 32px rgba(212, 175, 55, 0.12); }
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes ambient-drift {
    0% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0.7; transform: scale(0.98); }
}


/* ══════════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════════ */

.animated-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--bg-base);
}

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-raised);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-lg);
    animation: fadeUp 0.5s var(--ease-out);
    position: relative;
    overflow: hidden;
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.6;
}

.login-card .logo {
    text-align: center;
    margin-bottom: 32px;
}

.login-card .logo h1 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-white);
    letter-spacing: -0.02em;
}

.login-card .logo p {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-top: 6px;
}


/* ═════════════════════════════════════════════════════��════
   FORMS & INPUTS
   ══════════════════════════════════════════════════════════ */

.form-group {
    margin-bottom: 18px;
}

.form-group label,
.form-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-base);
    transition: all var(--transition-fast);
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.form-control:focus {
    border-color: var(--gold);
    background: var(--bg-elevated);
    box-shadow:
        0 0 0 3px rgba(212,175,55,0.06),
        0 0 16px rgba(212,175,55,0.04),
        inset 0 1px 3px rgba(0,0,0,0.15);
}

.form-control::placeholder { color: var(--text-dim); }

/* Ensure text is always visible */
textarea, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], input[type="tel"],
select, .form-input {
    color: var(--text-primary) !important;
    caret-color: var(--gold);
}

textarea:focus, input:focus, select:focus, .form-input:focus {
    background: var(--bg-elevated) !important;
}

select.form-control {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A1A1AA' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

/* Date/time inputs */
input[type="date"],
input[type="datetime-local"] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-primary) !important;
    padding: 8px 14px !important;
    font-size: var(--text-sm) !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    min-width: 150px;
}
input[type="date"]:hover,
input[type="datetime-local"]:hover {
    border-color: var(--gold-border) !important;
    background: var(--gold-bg) !important;
}
input[type="date"]:focus,
input[type="datetime-local"]:focus {
    outline: none !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08) !important;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: all var(--transition-fast);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    background: var(--gold-bg);
}

::-webkit-datetime-edit { padding: 0; }
::-webkit-datetime-edit-fields-wrapper { padding: 0; }
::-webkit-datetime-edit-text { color: rgba(255,255,255,0.25); padding: 0 2px; }
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field {
    color: var(--text-primary);
    padding: 1px 2px;
    border-radius: 3px;
}
::-webkit-datetime-edit-month-field:focus,
::-webkit-datetime-edit-day-field:focus,
::-webkit-datetime-edit-year-field:focus {
    background: var(--gold-bg);
    color: var(--gold);
}

/* ══════════════════════════════════════════════════════════
   BASELINE DARK PARA CAMPOS DE FORMULARIO
   ──────────────────────────────────────────────────────────
   Aplica el tema dark del sistema a cualquier <select>, <input>
   o <textarea> que NO tenga una clase específica con diseño
   propio. Cubre el caso típico de "select blanco del navegador
   sobre dashboard oscuro". Las clases existentes con override
   (.form-control, .lang-select, .kol-selector-pill, etc.)
   siguen ganando porque son más específicas o vienen después.
   ══════════════════════════════════════════════════════════ */

select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-sm);
    padding: 8px 12px;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

select:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
textarea:hover {
    border-color: var(--gold-border);
}

select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus {
    border-color: var(--gold);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08);
}

select::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-dim);
    opacity: 1;
}

/* Chevron custom para <select> (oculta el del navegador y pinta SVG dorado discreto) */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238B8B96' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Opciones del dropdown: forzar dark en navegadores que respetan styling de <option> */
select option,
select optgroup {
    background: var(--bg-raised);
    color: var(--text-primary);
}

/* Alias de clases sin estilo propio: heredan el baseline (no rompen overrides existentes) */
.form-select,
.form-input {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-family: inherit;
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.form-select:focus,
.form-input:focus {
    border-color: var(--gold);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08);
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238B8B96' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Modifier de tamaño compacto (compatibilidad con Bootstrap-style markup que aparece en algunos templates) */
.form-select-sm,
.form-control-sm,
.form-input-sm {
    font-size: 0.78rem;
    padding: 6px 10px;
}

/* Calendar picker indicator: invertir para no se vea negro sobre fondo oscuro */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* Disabled / readonly */
select:disabled,
input:disabled,
textarea:disabled,
.form-select:disabled,
.form-input:disabled {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-dim);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Toggle Switch */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute; cursor: pointer; inset: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-primary);
    transition: 0.25s var(--ease-out);
}
.switch .slider.round { border-radius: 24px; }
.switch .slider.round:before { border-radius: 50%; }
.switch .slider:before {
    content: ''; position: absolute;
    height: 18px; width: 18px; left: 2px; bottom: 2px;
    background: var(--text-muted);
    transition: 0.25s var(--ease-out); border-radius: 50%;
}
.switch input:checked + .slider { background: rgba(34, 197, 94, 0.15); border-color: var(--green); }
.switch input:checked + .slider:before { transform: translateX(20px); background: var(--green); }

/* Form Toggle (v2 switch) */
.form-toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.form-toggle input { opacity: 0; width: 0; height: 0; }
.form-toggle__slider {
    position: absolute; inset: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 11px; cursor: pointer;
    transition: all var(--transition-fast);
}
.form-toggle__slider::before {
    content: ''; position: absolute;
    top: 2px; left: 2px; width: 16px; height: 16px;
    background: var(--text-muted); border-radius: 50%;
    transition: all var(--transition-fast);
}
.form-toggle input:checked + .form-toggle__slider {
    background: rgba(212, 175, 55, 0.15); border-color: var(--gold);
}
.form-toggle input:checked + .form-toggle__slider::before {
    transform: translateX(18px); background: var(--gold);
}


/* ════════════════════════════════════════════════════���═════
   BUTTONS
   ══════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1.4;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}

.btn .material-symbols-outlined { font-size: 17px; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Subtle shine on hover */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255,255,255,0.08), transparent);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}
.btn:hover::after { opacity: 1; }
.btn:disabled::after { display: none; }

.btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: #0A0A0A;
    font-weight: var(--font-bold);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.15);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    box-shadow: var(--shadow-gold);
    transform: translateY(-1px);
}

.btn-success { background: var(--green); color: #0A0A0A; }
.btn-success:hover { background: color-mix(in srgb, var(--green), white 12%); }

.btn-danger { background: rgba(239, 68, 68, 0.12); color: var(--red); border: 1px solid var(--red-border); }
.btn-danger:hover { background: rgba(239, 68, 68, 0.2); }

.btn-ghost {
    background: rgba(255,255,255,0.02);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 12px rgba(212,175,55,0.03);
}

.btn-full { width: 100%; }
.btn-icon {
    width: 36px; height: 36px; padding: 0;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border-primary);
}
.btn-icon:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.btn-icon .material-symbols-outlined { font-size: 20px; }

.btn-sm {
    padding: 6px 14px;
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
}

.btn-loading { position: relative; pointer-events: none; opacity: 0.7; }


/* ══════════════════════════════════════════════════════════
   APP LAYOUT
   ══════════════════════════════════════════════════════════ */

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

/* ── Sidebar ──────────────────────���────────────────────── */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background:
        linear-gradient(180deg, rgba(11,11,14,0.92) 0%, rgba(11,11,14,0.96) 100%);
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    z-index: var(--z-sticky);
    transition: width var(--transition-normal);
    overflow-x: hidden;
    overflow-y: hidden;
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    box-shadow: 4px 0 32px rgba(0,0,0,0.3), inset -1px 0 0 rgba(255,255,255,0.03);
}

/* Sidebar right-edge glow line */
.sidebar::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(212,175,55,0.1) 30%,
        rgba(212,175,55,0.06) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.sidebar-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--header-height);
}

.sidebar-header .brand {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-white);
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.sidebar-header .brand-icon {
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sidebar-header .brand-icon .material-symbols-outlined {
    font-size: 16px;
    color: #0A0A0A;
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1; min-height: 0;
    padding: 8px 10px;
    overflow-y: auto;
}

.nav-section { margin-bottom: 6px; }

.nav-section-title {
    font-size: 0.68rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    padding: 10px 12px 4px;
    white-space: nowrap;
}

.nav-section-header {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    padding: 14px 16px 6px;
    font-weight: var(--font-semibold);
}

.nav-section-label {
    font-size: 0.68rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    padding: 10px 12px 4px;
    display: block;
    white-space: nowrap;
}

/* ─────────── Sidebar collapsible groups ─────────── */
.nav-group { margin-bottom: 4px; }
.nav-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--text-dim);
    transition: color var(--transition-fast);
}
.nav-section-toggle:hover { color: var(--text-primary); }
.nav-section-toggle .nav-section-label { padding: 0; }
.nav-section-chevron {
    font-size: 18px !important;
    color: var(--text-dim);
    transition: transform 180ms ease;
    margin-left: auto;
}
.nav-group.collapsed .nav-section-chevron { transform: rotate(-90deg); }
.nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    transition: max-height 220ms ease;
    padding-left: 0;
}
.nav-group.collapsed .nav-group-items {
    max-height: 0 !important;
    pointer-events: none;
    opacity: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: all var(--transition-fast);
    white-space: nowrap;
    font-size: 0.84rem;
    font-weight: 450;
    text-decoration: none;
    position: relative;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    transform: translateX(2px);
}

.nav-link.active {
    color: var(--gold);
    background: var(--gold-bg);
    font-weight: 550;
}

.nav-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--gold);
}

.nav-link .material-symbols-outlined {
    font-size: 18px; flex-shrink: 0; opacity: 0.45;
    transition: opacity var(--transition-fast);
}
.nav-link:hover .material-symbols-outlined,
.nav-link.active .material-symbols-outlined {
    opacity: 1;
}
.nav-link.active .material-symbols-outlined { color: var(--gold); }

.nav-badge {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: var(--red); color: #fff;
    font-size: 10px; font-weight: var(--font-bold);
    min-width: 18px; height: 18px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

.nav-link__badge {
    margin-left: auto;
    font-size: 0.68rem; color: var(--text-dim);
    background: rgba(255,255,255,0.06);
    padding: 1px 7px; border-radius: 10px;
    font-weight: var(--font-semibold); line-height: 1.4;
}

.nav-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 8px 14px;
}

/* Nav hierarchy indicators */
.nav-child { padding-left: 20px !important; margin-left: 8px; border-left: 2px solid var(--gold-border); font-size: 0.85rem; }
.nav-child-2 { padding-left: 28px !important; margin-left: 16px; border-left: 2px solid var(--green-border); font-size: 0.83rem; }
.nav-child-3 { padding-left: 36px !important; margin-left: 24px; border-left: 2px solid var(--orange-border); font-size: 0.82rem; }
.nav-sub { padding-left: 44px !important; margin-left: 32px; font-size: 0.8rem; opacity: 0.8; }
.nav-sub:hover { opacity: 1; }

/* Nav Groups (Collapsible) */
.nav-group { margin-top: 4px; }
.nav-group__toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 8px 12px;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
    font-family: inherit;
}
.nav-group__toggle:hover { background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); }
.nav-group__label {
    font-size: 0.72rem; font-weight: var(--font-bold);
    text-transform: uppercase; letter-spacing: 0.07em;
}
.nav-group__chevron {
    font-size: 18px; transition: transform 0.25s var(--ease-out);
}
.nav-group.is-collapsed .nav-group__chevron { transform: rotate(-90deg); }
.nav-group__items {
    overflow: hidden; max-height: 320px;
    transition: max-height 0.25s var(--ease-smooth), opacity 0.2s ease;
    opacity: 1;
}
.nav-group.is-collapsed .nav-group__items { max-height: 0; opacity: 0; pointer-events: none; }
.nav-group__loading, .nav-group__empty {
    font-size: 0.75rem; color: var(--text-muted); padding: 8px 12px; display: block;
}
.nav-group__empty { font-style: italic; }

/* Sidebar Footer */
.sidebar-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--border-primary);
}
.sidebar-user {
    display: flex; align-items: center; gap: 10px; padding: 6px;
    border-radius: var(--radius-sm);
}
.sidebar-user .avatar, .avatar-sm {
    width: 30px; height: 30px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: var(--font-bold); font-size: 0.78rem;
    color: #0A0A0A; flex-shrink: 0;
}
.sidebar-user .user-info { overflow: hidden; }
.sidebar-user .user-name, .user-name {
    font-size: 0.82rem; font-weight: var(--font-semibold);
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user .user-role, .user-role {
    font-size: 0.68rem; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* KOL Context (sidebar) */
.kol-ctx-back {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; margin: 8px 10px;
    color: var(--text-secondary); text-decoration: none;
    font-size: 0.82rem; font-weight: var(--font-medium);
    white-space: nowrap;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-primary);
    transition: all var(--transition-fast);
}
.kol-ctx-back:hover { color: var(--gold); background: var(--gold-bg); border-color: var(--gold-border); }
.kol-ctx-back .material-symbols-outlined { font-size: 16px; flex-shrink: 0; }

.kol-ctx-header {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; margin: 0 0 4px;
    border-radius: var(--radius-md);
    background: var(--gold-bg);
    border: 1px solid var(--gold-border);
}
.kol-ctx-name {
    font-size: 0.82rem; font-weight: var(--font-bold);
    color: var(--gold);
    text-transform: uppercase; letter-spacing: 0.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Desktop Sidebar Collapse */
.sidebar-toggle-desktop {
    display: none;
    width: 28px; height: 28px;
    align-items: center; justify-content: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 50%; color: var(--text-muted); cursor: pointer;
    transition: all var(--transition-fast);
    position: absolute; right: -14px; top: 24px; z-index: 10;
}
.sidebar-toggle-desktop:hover { background: var(--bg-elevated); color: var(--text-primary); }
@media (min-width: 769px) {
    .sidebar-toggle-desktop { display: flex; }
    .sidebar.is-collapsed { width: var(--sidebar-collapsed); }
    .sidebar.is-collapsed .sidebar-label,
    .sidebar.is-collapsed .nav-section-title,
    .sidebar.is-collapsed .sidebar-brand-text,
    .sidebar.is-collapsed .sidebar-user-info,
    .sidebar.is-collapsed .search-trigger span,
    .sidebar.is-collapsed .quick-kol-switch,
    .sidebar.is-collapsed .nav-group__label,
    .sidebar.is-collapsed .nav-group__chevron,
    .sidebar.is-collapsed .nav-group__items,
    .sidebar.is-collapsed .kol-context-card,
    .sidebar.is-collapsed .nav-link__badge { display: none; }
    .sidebar.is-collapsed .nav-group__toggle { justify-content: center; padding: 10px; pointer-events: none; }
    .sidebar.is-collapsed .nav-link { justify-content: center; padding: 10px; }
    .sidebar.is-collapsed + .main-content { margin-left: var(--sidebar-collapsed); }
}


/* ══════════════════════════════════════════════════════════
   MAIN CONTENT & TOP BAR
   ══════════════════════════════════════════════════════════ */

.main-content {
    flex: 1;
    min-width: 0;            /* allow the flex column to shrink so wide children
                               (tables, editors) scroll inside their own wrapper
                               instead of stretching the whole page */
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-normal);
}

.top-bar {
    position: sticky; top: 0; z-index: var(--z-sticky);
    height: var(--header-height);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; gap: 12px;
    background: rgba(9,9,11,0.82);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 1px 0 rgba(212,175,55,0.04), 0 4px 16px rgba(0,0,0,0.2);
}

.top-bar-actions {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

/* Breadcrumb */
.breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--text-sm); color: var(--text-muted); flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-primary); }
.breadcrumb span { color: var(--text-dim); }
.breadcrumb .current, .breadcrumb__current {
    color: var(--text-secondary); font-weight: var(--font-medium);
}
.breadcrumb__sep { color: var(--text-dim); opacity: 0.4; }

/* Status Group */
.status-group {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px; border-radius: var(--radius-full);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    font-size: 0.78rem; color: var(--text-muted);
}
.status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    display: inline-block; background: var(--text-dim);
    cursor: pointer; transition: background var(--transition-fast);
    position: relative;
}
.status-dot.active, .status-dot.connected {
    background: var(--green);
    animation: pulse 2s infinite;
}
.status-dot.connected::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid var(--green);
    animation: pulse-ring 2s ease-out infinite;
}
.status-dot.inactive, .status-dot.disconnected { background: var(--red); }
.online-count { font-weight: var(--font-semibold); color: var(--text-secondary); }

/* Language Select */
.lang-select {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 6px 10px;
    font-size: 1.1rem;
    cursor: pointer;
    min-width: 54px;
    height: 38px;
    font-family: inherit;
}

/* User Dropdown */
.user-dropdown { position: relative; }
.user-dropdown__trigger {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 6px 10px; background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm); color: var(--text-secondary);
    cursor: pointer; transition: all var(--transition-fast);
}
.user-dropdown__trigger:hover {
    background: rgba(255,255,255,0.04); border-color: var(--border-primary);
}
.user-dropdown__avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: var(--font-bold); color: #0A0A0A;
}
.user-dropdown__menu {
    position: absolute; top: calc(100% + 4px); right: 0;
    min-width: 200px; background: var(--bg-raised);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    display: none; z-index: var(--z-dropdown); padding: 6px 0;
}
.user-dropdown__menu.open { display: block; }
.user-dropdown__header { padding: 10px 16px; border-bottom: 1px solid var(--border-primary); }
.user-dropdown__name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); }
.user-dropdown__role { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; }
.user-dropdown__item {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 8px 16px; color: var(--text-secondary);
    text-decoration: none; font-size: var(--text-sm);
    transition: background var(--transition-fast);
    cursor: pointer; border: none; background: none;
    width: 100%; text-align: left; font-family: inherit;
}
.user-dropdown__item:hover { background: var(--bg-surface); color: var(--text-primary); }
.user-dropdown__item--danger:hover { color: var(--red); }


/* ══════════════════════════════════════════════════════════
   PAGE CONTENT
   ══════════════════════════════════════════════════════════ */

.page-content {
    padding: 24px;
    max-width: var(--page-max-width);
    animation: fadeInUp 0.35s var(--ease-out);
}

.page-title, .page-title-wrap h1 {
    font-size: 1.4rem;
    font-weight: var(--font-bold);
    color: var(--text-white);
    margin-bottom: 24px;
    display: flex; align-items: center; gap: 10px;
    letter-spacing: -0.02em;
}
.page-title .material-symbols-outlined { font-size: 24px; color: var(--gold); }

.page-subtitle {
    font-size: 0.82rem; color: var(--text-muted);
    margin: 2px 0 0; font-weight: var(--font-normal);
}
.page-title + .page-subtitle { padding-left: 34px; }

.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-lg); gap: var(--space-md); flex-wrap: wrap;
}
.page-header__title { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-primary); letter-spacing: -0.01em; }
.page-header__title h1 {
    font-size: 1.3rem; font-weight: var(--font-bold); color: var(--text-white);
    margin: 0; display: flex; align-items: center; gap: 8px;
}
.page-header__subtitle, .page-header__desc { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
.page-header__actions, .page-actions {
    display: flex; gap: var(--space-sm); align-items: center; flex-shrink: 0;
}

/* Back button */
.back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-muted); font-size: 0.82rem; font-weight: var(--font-medium);
    cursor: pointer;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle);
    padding: 6px 14px; border-radius: var(--radius-sm); text-decoration: none;
    transition: all var(--transition-fast);
}
.back-btn:hover { color: var(--gold); background: var(--gold-bg); border-color: var(--gold-border); }

.page-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }


/* ══════════════════════════════════════════════════════════
   STAT CARDS
   ══════════════════════════════════════════════════════════ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.stat-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 40%),
        radial-gradient(ellipse 80% 50% at 50% 120%, rgba(212,175,55,0.03) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all 0.35s var(--ease-out);
    position: relative;
    overflow: hidden;
    cursor: default;
    animation: fadeInUp 0.6s var(--ease-out) both;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* Staggered entrance */
.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }
.stat-card:nth-child(5) { animation-delay: 0.25s; }
.stat-card:nth-child(6) { animation-delay: 0.3s; }

/* Ambient glow on bottom — always visible */
.stat-card::after {
    content: '';
    position: absolute; bottom: -20px; left: 10%; right: 10%;
    height: 80px;
    background: radial-gradient(ellipse, rgba(212,175,55,0.06), transparent 70%);
    opacity: 0.5;
    transition: opacity 0.4s var(--ease-out);
    pointer-events: none; z-index: 0;
    filter: blur(8px);
}

/* Top accent line — always visible */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 10%, var(--gold-border) 50%, transparent 90%);
    opacity: 0.5;
    transition: opacity 0.3s var(--ease-out);
}

.stat-card:hover {
    border-color: rgba(212,175,55,0.18);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.35),
        0 0 24px rgba(212,175,55,0.06),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.15);
    transform: translateY(-3px);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 30%),
        radial-gradient(ellipse 80% 50% at 50% 120%, rgba(212,175,55,0.06) 0%, transparent 60%),
        color-mix(in srgb, var(--bg-card) 94%, var(--gold) 6%);
}
.stat-card:hover::after { opacity: 1; }
.stat-card:hover::before { opacity: 1; }
.stat-card > * { position: relative; z-index: 1; }

.stat-card .stat-icon, .stat-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
}
.stat-icon .material-symbols-outlined { font-size: 22px; }

/* Icon color variants */
.stat-icon.cyan { background: var(--gold-bg); border-color: var(--gold-border); }
.stat-icon.cyan .material-symbols-outlined { color: var(--gold); }
.stat-icon.green { background: var(--green-bg); border-color: var(--green-border); }
.stat-icon.green .material-symbols-outlined { color: var(--green); }
.stat-icon.orange { background: var(--orange-bg); border-color: var(--orange-border); }
.stat-icon.orange .material-symbols-outlined { color: var(--orange); }
.stat-icon.red { background: var(--red-bg); border-color: var(--red-border); }
.stat-icon.red .material-symbols-outlined { color: var(--red); }
.stat-icon.purple { background: var(--purple-bg); border-color: var(--purple-border); }
.stat-icon.purple .material-symbols-outlined { color: var(--purple); }
.stat-icon.blue { background: var(--blue-bg); border-color: var(--blue-border); }
.stat-icon.blue .material-symbols-outlined { color: var(--blue); }

.stat-card .stat-value, .stat-value {
    font-size: 1.75rem;
    font-weight: var(--font-extrabold);
    color: var(--text-white);
    line-height: 1.1;
    letter-spacing: -0.02em;
    animation: countUp 0.5s var(--ease-out) both;
}
.stat-card:hover .stat-value {
    text-shadow: 0 0 20px var(--gold-glow);
}

.stat-card .stat-label, .stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-card .stat-change, .stat-change {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    margin-top: 6px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
}
.stat-change.up { color: var(--green); background: var(--green-bg); border: 1px solid var(--green-border); }
.stat-change.down { color: var(--red); background: var(--red-bg); border: 1px solid var(--red-border); }

.stat-delta { font-size: var(--text-xs); margin-top: 6px; display: flex; align-items: center; gap: 3px; }
.stat-delta.up { color: var(--green); }
.stat-delta.down { color: var(--red); }


/* ══════════════════════════════════════════════════════════
   GLASS CARDS
   ══════════════════════════════════════════════════════════ */

.glass-card, .card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 30%),
        rgba(15,15,18,0.75);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all 0.3s var(--ease-out);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.04);
    position: relative;
    animation: fadeInUp 0.5s var(--ease-out) both;
    margin-bottom: 0;
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
}

/* Top edge highlight (glass refraction) */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 15%, rgba(255,255,255,0.08) 50%, transparent 85%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    opacity: 0.8;
}

/* Inner glow overlay */
.glass-card::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 40px rgba(212,175,55,0.012);
    pointer-events: none;
}

/* Staggered entrance */
.glass-card:nth-child(1) { animation-delay: 0.05s; }
.glass-card:nth-child(2) { animation-delay: 0.10s; }
.glass-card:nth-child(3) { animation-delay: 0.15s; }
.glass-card:nth-child(4) { animation-delay: 0.20s; }

.glass-card:hover {
    border-color: rgba(212, 175, 55, 0.1);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 35%),
        rgba(17, 17, 24, 0.78);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.3),
        0 0 40px rgba(212,175,55,0.025),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

.card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.card-title {
    font-size: 0.95rem;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    display: flex; align-items: center; gap: 8px;
}
.card-title .material-symbols-outlined { font-size: 18px; color: var(--text-muted); }


/* ══════════════════════════════════════════════════════════
   DATA TABLES
   ═════════════════════════════════════════���════════════════ */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}

.data-table th {
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.015);
    white-space: nowrap;
    position: relative;
}

.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    vertical-align: middle;
}

.data-table tbody tr {
    transition: all var(--transition-fast);
    cursor: default;
}
.data-table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(212,175,55,0.02) 0%, rgba(255,255,255,0.015) 50%, rgba(212,175,55,0.02) 100%);
}
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* DataTable Enhancements (JS-driven) */
.dt-wrapper { display: flex; flex-direction: column; gap: var(--space-sm); }
.dt-toolbar { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.dt-toolbar .form-control--search {
    max-width: min(280px, 100%);
    padding-left: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2363636E' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}
.dt-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-sm) 0; flex-wrap: wrap; gap: var(--space-sm);
}
.dt-info { font-size: var(--text-xs); color: var(--text-muted); }
.dt-pagination { display: flex; align-items: center; gap: 4px; }
.dt-sortable { user-select: none; cursor: pointer; position: relative; }
.dt-sortable::after {
    content: ''; display: inline-block; width: 0; height: 0;
    margin-left: 6px; vertical-align: middle;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-bottom: 4px solid var(--text-dim); opacity: 0.3;
}
.dt-sort-asc::after { border-bottom: 4px solid var(--gold); opacity: 1; }
.dt-sort-desc::after { border-bottom: none; border-top: 4px solid var(--gold); opacity: 1; }


/* ═════════════════════════════════════════════════════��════
   BADGES
   ══════════════════════════════════════════════════════════ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    white-space: nowrap;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.2);
    text-transform: uppercase;
}

.badge-vip, .badge-VIP { background: rgba(212, 175, 55, 0.12); color: var(--gold); border: 1px solid var(--gold-border); }
.badge-general, .badge-GENERAL { background: var(--green-bg); color: var(--green); }
.badge-registered, .badge-REGISTERED { background: var(--blue-bg); color: var(--blue); }
.badge-new, .badge-NEW { background: var(--purple-bg); color: var(--purple); }
.badge-expelled, .badge-EXPELLED { background: var(--red-bg); color: var(--red); }
.badge-active, .badge--active, .badge--vip, .badge--true { background: var(--green-bg); color: var(--green); }
.badge-inactive, .badge--inactive, .badge--false { background: var(--red-bg); color: var(--red); }
.badge-admin { background: var(--purple-bg); color: var(--purple); }
.badge-asistente, .badge-bd { background: var(--blue-bg); color: var(--blue); }
.badge-kol { background: var(--orange-bg); color: var(--orange); }
.badge-ongoing, .badge--ongoing { background: var(--gold-bg); color: var(--gold); }
.badge-completed, .badge--completed { background: var(--green-bg); color: var(--green); }
.badge--general, .badge--registered { background: var(--blue-bg); color: var(--blue); }
.badge--new { background: var(--purple-bg); color: var(--purple); }
.badge--expelled { background: var(--red-bg); color: var(--red); }
.badge--paused { background: var(--orange-bg); color: var(--orange); }


/* ═════════════════════���════════════════════════════════════
   KOL GRID & CARDS
   ══════════════════════════════════════════════════════════ */

.kol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.kol-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out);
    border-left: 3px solid var(--gold);
    animation: fadeInUp 0.5s var(--ease-out) both;
}
.kol-card:hover {
    border-color: rgba(255, 255, 255, 0.08);
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kol-card .kol-avatar {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: var(--font-bold);
    color: #0A0A0A; margin-bottom: 12px;
}
.kol-card .kol-name { font-size: 1rem; font-weight: var(--font-semibold); color: var(--text-white); margin-bottom: 2px; }
.kol-card .kol-bot { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 14px; }
.kol-card .kol-stats { display: flex; gap: 14px; }
.kol-card .kol-stat { text-align: center; }
.kol-card .kol-stat-value { font-size: 1.05rem; font-weight: var(--font-bold); color: var(--text-white); }
.kol-card .kol-stat-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; }

/* KOL Actions */
.kol-action {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; font-size: 0.76rem; border-radius: 6px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle);
    cursor: pointer; text-decoration: none;
    transition: all 0.15s var(--ease-out); white-space: nowrap;
}
.kol-action:hover { color: var(--text-white); border-color: var(--gold-border); background: var(--gold-bg); }
.kol-action--danger { color: var(--red); }
.kol-action--danger:hover { border-color: var(--red-border); background: var(--red-bg); }
.kol-action--edit { color: var(--gold); }
.kol-action--edit:hover { border-color: var(--gold-border); background: var(--gold-bg); }


/* ══════════════════════════════════════════════════════════
   CHARTS & GRIDS
   ═══════════════════════════════════════════���══════════════ */

.chart-container { position: relative; width: 100%; height: 260px; }
.chart-wrap {
    background: var(--bg-card); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); padding: 20px;
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }


/* ══════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════ */

.pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 4px; margin-top: 16px;
}
.pagination button {
    padding: 5px 10px; border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm); background: transparent;
    color: var(--text-secondary); font-family: inherit;
    font-size: 0.82rem; cursor: pointer;
    transition: all var(--transition-fast);
}
.pagination button:hover { background: rgba(255, 255, 255, 0.03); }
.pagination button.active { background: var(--gold); color: #0A0A0A; border-color: var(--gold); font-weight: var(--font-semibold); }


/* ══════════════════════════════════════════════════════════
   FILTER & SEARCH BAR
   ══════════════════════════════════════════════════════════ */

.filter-bar {
    display: flex; gap: 10px; margin-bottom: 16px;
    flex-wrap: wrap; align-items: center;
}
.filter-bar .form-control { flex: 1; min-width: 180px; }

.search-wrap { position: relative; flex: 1; min-width: 180px; }
.search-wrap .material-symbols-outlined {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--text-muted); pointer-events: none;
}
.search-wrap input { padding-left: 38px !important; }


/* ═══════════════════════════════════════════════════���══════
   TOASTS
   ══════════════════════════════════════════════════════════ */

.toast-container {
    position: fixed; top: 16px; right: 16px;
    z-index: var(--z-toast);
    display: flex; flex-direction: column; gap: 8px;
    max-width: 380px;
}

.toast {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 12px 16px;
    background: color-mix(in srgb, var(--bg-raised) 95%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-lg);
    animation: slideInRight 0.35s var(--ease-out);
}

.toast.success, .toast--success { border-left: 3px solid var(--green); }
.toast.error, .toast--error { border-left: 3px solid var(--red); }
.toast.info, .toast--info { border-left: 3px solid var(--gold); }
.toast--warning { border-left: 3px solid var(--orange); }
.toast--visible { opacity: 1; transform: translateX(0); }
.toast__msg { flex: 1; }
.toast__close {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 1.1rem; padding: 0 4px;
}


/* ══════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════��══ */

.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: var(--z-modal);
    animation: fadeIn 0.15s ease;
}
.modal-overlay[hidden] {
    display: none !important;
}
.modal-overlay.open {
    display: flex;
}

.modal {
    background: var(--bg-raised);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: 28px;
    max-width: 480px; width: 90%;
    animation: fadeUp 0.25s var(--ease-out);
    box-shadow: var(--shadow-xl);
}

.modal-title {
    font-size: 1.1rem; font-weight: var(--font-bold);
    margin-bottom: 18px; color: var(--text-white);
}

.modal-actions {
    display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;
}
.modal-actions .btn-ghost, .modal-actions .btn-primary { min-width: 100px; }

.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(12px) saturate(0.8) brightness(0.8);
    -webkit-backdrop-filter: blur(12px) saturate(0.8) brightness(0.8);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.modal-content {
    background: var(--bg-raised);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: 28px; width: 100%; max-width: 680px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: slideInUp 0.3s var(--ease-out);
}

/* Modal form inputs */
body .modal input,
body .modal select,
body .modal textarea,
body .modal .form-input,
body .modal .form-control {
    padding: 8px 12px; font-size: var(--text-base);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    width: 100%; box-sizing: border-box;
}
body .modal .form-label, body .modal label {
    font-size: 0.8rem; font-weight: var(--font-semibold);
    color: var(--text-secondary); margin-bottom: 4px; display: block;
    text-transform: uppercase; letter-spacing: 0.03em;
}


/* ══════════════════════════════════════════════════════════
   LOADING & EMPTY STATES
   ══════════════════════════════════════════════════════════ */

.empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: var(--space-2xl) 20px;
    color: var(--text-muted);
}
.empty-state .material-symbols-outlined { font-size: 48px; margin-bottom: 12px; opacity: 0.3; }
.empty-state p, .empty-state__desc { font-size: 0.9rem; max-width: 320px; }
.empty-state h3, .empty-state__title {
    font-size: var(--text-lg); font-weight: var(--font-semibold);
    color: var(--text-secondary); margin-bottom: var(--space-xs);
}
.empty-state__icon { font-size: 48px; color: var(--text-muted); opacity: 0.5; margin-bottom: var(--space-md); }

.spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}


/* ═════════════════════════════════════════════════════��════
   TABS & RADIO GROUPS
   ══════════════════════════════════════════════════════════ */

.tab-bar {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1px;
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px;
    background: transparent; border: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--text-muted);
    font-size: 0.84rem; font-weight: var(--font-medium);
    cursor: pointer; transition: all 0.15s var(--ease-out);
    white-space: nowrap; font-family: var(--font-sans);
    flex-shrink: 0;
    border-bottom: 2px solid transparent;
}
.tab-btn .material-symbols-outlined { font-size: 17px; }
.tab-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }
.tab-btn.active-tab {
    color: var(--gold);
    border-bottom-color: var(--gold);
    font-weight: var(--font-semibold);
    background: var(--gold-bg);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Radio Group */
.radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-label {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    background: var(--bg-card); cursor: pointer;
    font-size: var(--text-base); color: var(--text-secondary);
    transition: all 0.2s var(--ease-out); user-select: none;
}
.radio-label input[type="radio"] { display: none; }
.radio-label:hover { border-color: var(--gold-border); color: var(--text-primary); background: var(--gold-bg); }
.radio-label:has(input:checked) {
    border-color: var(--gold);
    background: var(--gold-bg-hover);
    color: var(--gold);
    font-weight: var(--font-semibold);
    box-shadow: 0 0 0 1px var(--gold-border);
}

/* Section Dividers */
.section-label {
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
    margin: 20px 0 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
}


/* ══════════════════════════════════════════════════════════
   COMMAND PALETTE
   ══════════════════════════════════════════════════════════ */

.cmd-palette-overlay {
    position: fixed; inset: 0; z-index: var(--z-command);
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 15vh;
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition-fast);
}
.cmd-palette-overlay--visible { opacity: 1; pointer-events: auto; }

.cmd-palette {
    width: 100%; max-width: 560px;
    background: var(--bg-raised);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl), 0 0 80px rgba(0,0,0,0.6);
    overflow: hidden;
    animation: fadeUp 0.2s var(--ease-out);
}
.cmd-palette__header {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-primary);
}
.cmd-palette__input {
    flex: 1; background: none; border: none; outline: none;
    color: var(--text-primary); font-family: inherit; font-size: 1rem;
}
.cmd-palette__input::placeholder { color: var(--text-dim); }
.cmd-palette__kbd {
    padding: 2px 8px; font-size: var(--text-xs);
    font-family: var(--font-mono); color: var(--text-muted);
    background: var(--bg-surface); border: 1px solid var(--border-primary);
    border-radius: 4px;
}
.cmd-palette__results { max-height: 360px; overflow-y: auto; padding: var(--space-sm) 0; }
.cmd-palette__cat {
    padding: 8px 18px 4px; font-size: var(--text-xs);
    font-weight: var(--font-semibold); color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.cmd-palette__item {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 10px 18px; color: var(--text-secondary);
    text-decoration: none; cursor: pointer;
    transition: background var(--transition-fast);
}
.cmd-palette__item:hover, .cmd-palette__item--active {
    background: var(--bg-surface); color: var(--text-primary);
}
.cmd-palette__name { flex: 1; font-size: var(--text-sm); font-weight: var(--font-medium); }
.cmd-palette__detail { font-size: var(--text-xs); color: var(--text-muted); }
.cmd-palette__empty { padding: 24px 18px; text-align: center; color: var(--text-muted); font-size: var(--text-sm); }
.cmd-palette__footer {
    display: flex; gap: var(--space-lg); padding: 10px 18px;
    border-top: 1px solid var(--border-primary);
    font-size: var(--text-xs); color: var(--text-muted);
}
.cmd-palette__footer kbd {
    padding: 1px 5px; font-family: var(--font-mono);
    background: var(--bg-surface); border: 1px solid var(--border-primary);
    border-radius: 3px; font-size: 0.65rem;
}

/* Search Trigger */
#topbarSearch { display: none; }
.search-trigger {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 7px 14px;
    background: var(--bg-surface); border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); color: var(--text-muted);
    cursor: pointer; font-size: var(--text-sm);
    transition: all var(--transition-fast);
}
.search-trigger:hover { border-color: rgba(255,255,255,0.12); color: var(--text-secondary); }
.search-trigger kbd {
    padding: 1px 6px; font-size: 0.65rem; font-family: var(--font-mono);
    background: var(--bg-raised); border: 1px solid var(--border-primary);
    border-radius: 3px;
}


/* ═════════════════════════════════════════════════════���════
   RICH TEXT EDITOR
   ══════════════════════════════════════════════════════════ */

.rte-wrap {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); overflow: hidden;
    background: var(--bg-input);
    transition: border-color var(--transition-fast);
}
.rte-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.08); }

.rte-toolbar {
    display: flex; flex-wrap: wrap; gap: 2px;
    padding: 6px 8px; background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-primary);
}
.rte-btn {
    width: 30px; height: 30px; border: none; border-radius: var(--radius-xs);
    background: transparent; color: var(--text-secondary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: var(--font-semibold);
    transition: all var(--duration-fast); position: relative;
}
.rte-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-white); }
.rte-btn.active { background: var(--gold-bg); color: var(--gold); }
.rte-sep { width: 1px; height: 22px; background: var(--border-primary); margin: 4px 3px; align-self: center; }

.rte-var-btn {
    padding: 3px 8px; border: 1px solid var(--purple-border); border-radius: var(--radius-xs);
    background: var(--purple-bg); color: var(--purple);
    cursor: pointer; font-size: var(--text-xs); font-family: var(--font-mono);
    font-weight: var(--font-semibold); transition: all var(--duration-fast); white-space: nowrap;
}
.rte-var-btn:hover { background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.4); }

.rte-body {
    min-height: 160px; padding: 12px 14px;
    color: var(--text-primary); font-family: inherit;
    font-size: 0.92rem; line-height: 1.55;
    outline: none; white-space: pre-wrap; word-wrap: break-word;
    overflow-y: auto; max-height: 380px;
}
.rte-body:empty::before { content: attr(data-placeholder); color: var(--text-dim); pointer-events: none; }
.rte-body b, .rte-body strong { color: var(--text-white); font-weight: var(--font-bold); }
.rte-body i, .rte-body em { color: var(--gold); }
.rte-body u { text-decoration-color: var(--orange); }
.rte-body code { background: var(--purple-bg); color: var(--purple); padding: 1px 5px; border-radius: 3px; font-size: 0.86em; }
.rte-body a { color: var(--gold); text-decoration: underline; text-decoration-color: var(--gold-border); }
.rte-body .var-chip {
    display: inline; background: var(--purple-bg); color: var(--purple);
    padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono);
    font-size: 0.86em; border: 1px solid var(--purple-border);
}

/* RTE Guide Panel */
.rte-guide {
    padding: 12px 14px; background: rgba(0,0,0,0.12); border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle); font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6;
}
.rte-guide h4 { color: var(--text-primary); font-size: 0.82rem; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.rte-guide code { background: var(--gold-bg); color: var(--gold); padding: 1px 4px; border-radius: 3px; font-size: 0.84em; }
.rte-guide .var-list { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0; }
.rte-guide .var-tag {
    background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border);
    padding: 2px 7px; border-radius: 3px; font-family: var(--font-mono); font-size: 0.78em;
}

/* Variable/Emoji Menus */
.rte-var-menu {
    position: absolute; top: 100%; left: 0; margin-top: 4px;
    background: var(--bg-raised); border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    z-index: 200; min-width: 240px; max-height: 300px; overflow-y: auto;
    flex-direction: column; padding: 4px;
}
.rte-var-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border: none; background: transparent;
    color: var(--text-secondary); cursor: pointer; font-size: 0.8rem;
    text-align: left; border-radius: 4px; transition: background 0.1s;
    width: 100%; font-family: inherit;
}
.rte-var-item:hover { background: var(--purple-bg); color: var(--text-white); }
.rte-var-item code {
    background: var(--purple-bg); color: var(--purple);
    padding: 2px 5px; border-radius: 3px; font-size: 0.84em;
    font-weight: var(--font-semibold); white-space: nowrap; min-width: 90px;
}
.rte-var-item span { color: var(--text-muted); font-size: 0.76rem; }

.rte-emoji-menu {
    position: absolute; top: 100%; left: 0; margin-top: 4px;
    background: var(--bg-raised); border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    z-index: 200; width: 300px; max-height: 220px; overflow-y: auto;
    padding: 6px; grid-template-columns: repeat(10, 1fr); gap: 2px;
}
.rte-emoji-btn {
    border: none; background: transparent; font-size: 17px; cursor: pointer;
    padding: 3px; border-radius: 3px; line-height: 1; transition: background 0.1s;
}
.rte-emoji-btn:hover { background: rgba(255,255,255,0.06); }

/* Media Upload */
.broadcast-media-area {
    border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: var(--radius-md);
    padding: 14px; text-align: center; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.broadcast-media-area:hover { border-color: var(--gold); background: var(--gold-bg); }
.broadcast-media-area.has-file { border-color: var(--green); background: var(--green-bg); }
.broadcast-media-preview { max-width: 200px; max-height: 150px; border-radius: 6px; margin-top: 6px; }


/* ══════════════════════════════════════════════════════════
   HOME PAGE
   ══════════════════════════════════════════════════════════ */

.home-hero { padding: 24px 0 8px; }
.home-hero h1 { font-size: 1.5rem; font-weight: var(--font-bold); color: var(--text-white); margin-bottom: 4px; letter-spacing: -0.01em; }
.home-hero p { color: var(--text-secondary); font-size: 0.9rem; }
.home-wave { display: inline-block; margin-left: 4px; }

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px; margin-top: 16px;
}

.home-tile {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; border-radius: var(--radius-lg);
    background: var(--bg-card); border: 1px solid var(--border-primary);
    text-decoration: none; transition: all 0.25s var(--ease-out);
    position: relative; border-left: 3px solid var(--border-primary);
}
.home-tile:hover {
    background: var(--bg-card-hover); border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px); box-shadow: var(--shadow-md);
}

.home-tile-icon {
    width: 40px; height: 40px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.home-tile-icon .material-symbols-outlined { font-size: 22px; }
.home-tile-body { flex: 1; min-width: 0; }
.home-tile-title { font-size: 0.95rem; font-weight: var(--font-semibold); color: var(--text-white); margin-bottom: 2px; }
.home-tile-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
.home-tile-arrow { color: var(--text-dim); font-size: 18px; flex-shrink: 0; transition: color 0.15s; }
.home-tile:hover .home-tile-arrow { color: var(--text-secondary); }

/* Tile color variants */
.tile-cyan { border-left-color: var(--gold); }
.tile-cyan .home-tile-icon { background: var(--gold-bg); }
.tile-cyan .home-tile-icon .material-symbols-outlined { color: var(--gold); }

.tile-purple { border-left-color: var(--purple); }
.tile-purple .home-tile-icon { background: var(--purple-bg); }
.tile-purple .home-tile-icon .material-symbols-outlined { color: var(--purple); }

.tile-green { border-left-color: var(--green); }
.tile-green .home-tile-icon { background: var(--green-bg); }
.tile-green .home-tile-icon .material-symbols-outlined { color: var(--green); }

.tile-blue { border-left-color: var(--blue); }
.tile-blue .home-tile-icon { background: var(--blue-bg); }
.tile-blue .home-tile-icon .material-symbols-outlined { color: var(--blue); }

.tile-orange { border-left-color: var(--orange); }
.tile-orange .home-tile-icon { background: var(--orange-bg); }
.tile-orange .home-tile-icon .material-symbols-outlined { color: var(--orange); }

.tile-teal { border-left-color: var(--teal); }
.tile-teal .home-tile-icon { background: var(--teal-bg); }
.tile-teal .home-tile-icon .material-symbols-outlined { color: var(--teal); }

.tile-pink { border-left-color: var(--pink); }
.tile-pink .home-tile-icon { background: var(--pink-bg); }
.tile-pink .home-tile-icon .material-symbols-outlined { color: var(--pink); }

/* Home KOL rows */
.home-quick-link {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; text-decoration: none; color: inherit;
    transition: all var(--transition-fast);
}
.home-quick-link:hover { border-color: rgba(255,255,255,0.08); background: var(--bg-surface); transform: translateX(2px); }
.home-quick-link .material-symbols-outlined:first-child { font-size: 22px; flex-shrink: 0; }

.home-kol-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--border-subtle);
    text-decoration: none; color: inherit; transition: background var(--transition-fast);
}
.home-kol-row:last-child { border-bottom: none; }
.home-kol-row:hover { background: rgba(255,255,255,0.02); }
.home-kol-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    display: flex; align-items: center; justify-content: center;
    font-weight: var(--font-bold); font-size: 0.9rem; color: #0A0A0A; flex-shrink: 0;
}
.home-kol-name { font-weight: var(--font-semibold); font-size: var(--text-sm); }
.home-kol-meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }
.home-kol-stat { font-size: var(--text-xs); color: var(--text-muted); margin-left: auto; text-align: right; flex-shrink: 0; }
.home-kol-stat strong { display: block; font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--font-bold); }


/* ═════════════════════���═════════════════════════════���══════
   KOL VISUAL FLOW
   ══════════════════════════════════════════════════════════ */

.kol-flow-canvas { position: relative; padding: 20px; }
.kol-flow-start {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(212,175,55,0.12));
    border: 1px solid rgba(34,197,94,0.25); color: var(--green);
    font-weight: var(--font-bold); font-size: 0.82rem; width: fit-content; margin: 0 auto;
}
.kol-flow-connector {
    width: 2px; height: 32px;
    background: linear-gradient(to bottom, var(--gold), var(--purple));
    margin: 0 auto; position: relative;
}
.kol-flow-connector::after {
    content: ''; position: absolute; bottom: -4px; left: -3px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 6px solid var(--purple);
}
.kol-flow-node {
    max-width: 520px; margin: 0 auto 4px; padding: 14px 16px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-primary);
    cursor: pointer; transition: all 0.25s var(--ease-out); position: relative;
}
.kol-flow-node:hover { background: rgba(255,255,255,0.06); border-color: var(--gold-border); transform: scale(1.01); }
.kol-flow-node.kol-editing { border-color: var(--gold); box-shadow: 0 0 20px var(--gold-glow); }
.kol-node-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.kol-node-step { font-size: var(--text-xs); font-weight: var(--font-bold); background: var(--gold-bg); color: var(--gold); padding: 2px 10px; border-radius: 10px; }
.kol-node-delay { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: 3px; }
.kol-node-cond { font-size: 0.68rem; padding: 2px 8px; border-radius: 10px; margin-left: auto; }
.kol-node-cond.c-green { background: var(--green-bg); color: var(--green); }
.kol-node-cond.c-blue { background: var(--blue-bg); color: var(--blue); }
.kol-node-cond.c-orange { background: var(--orange-bg); color: var(--orange); }
.kol-node-msg { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 4px; }
.kol-node-btns { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.kol-node-btn-pill { font-size: 0.7rem; padding: 3px 10px; border-radius: 12px; background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-border); }
.kol-node-custom { position: absolute; top: 8px; right: 8px; font-size: 0.65rem; padding: 2px 8px; border-radius: 8px; background: var(--green-bg); color: var(--green); }
.active-funnel-lang { background: var(--gold-bg-hover) !important; color: var(--gold) !important; border-color: var(--gold-border) !important; }

/* KOL Funnel Tree */
.kol-tree-branches { display: flex; gap: 10px; justify-content: center; padding-top: 8px; flex-wrap: nowrap; overflow-x: auto; }
.kol-tree-branch { display: flex; flex-direction: column; align-items: center; min-width: 160px; flex: 1; max-width: 240px; }
.kol-tree-connector { width: 2px; height: 24px; margin: 0 auto; background: linear-gradient(to bottom, var(--gold), var(--purple)); position: relative; }
.kol-tree-connector::after { content: ''; position: absolute; bottom: -3px; left: -2.5px; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 5px solid var(--purple); }
.kol-tree-node {
    padding: 10px 14px; border-radius: var(--radius-md); cursor: pointer; transition: all 0.25s var(--ease-out);
    border: 1px solid var(--border-primary); max-width: 250px; width: 100%;
    font-size: 0.82rem; position: relative;
}
.kol-tree-node:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
.kol-tree-node.kol-editing { border-color: var(--gold) !important; box-shadow: 0 0 20px var(--gold-glow); }
.kol-tree-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.kol-tree-tag { font-size: 0.68rem; padding: 2px 8px; border-radius: 6px; font-weight: var(--font-semibold); white-space: nowrap; }
.kol-tree-msg { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 4px; line-height: 1.3; max-height: 2.6em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kol-tree-custom { position: absolute; top: 6px; right: 8px; font-size: 0.6rem; padding: 1px 6px; border-radius: 6px; background: var(--green-bg); color: var(--green); }
#kolFlowCanvas { overflow-x: auto; padding-bottom: 20px; }


/* ══════════════════════════════════════════════════════════
   TASKS & BULK OPERATIONS
   ══════════════════════════════════════════════════════════ */

.task-tabs {
    display: flex; gap: 4px; margin-bottom: 24px;
    background: rgba(255,255,255,0.03); border-radius: var(--radius-md);
    padding: 4px; width: fit-content;
}
.task-tab {
    padding: 10px 24px; border-radius: var(--radius-sm); border: none;
    cursor: pointer; font-size: var(--text-base); font-weight: var(--font-medium);
    transition: all 0.2s var(--ease-out); background: transparent; color: var(--text-muted);
    display: flex; align-items: center; gap: 6px; font-family: inherit;
}
.task-tab.active { background: var(--gold); color: #0A0A0A; font-weight: var(--font-semibold); }
.task-tab .material-symbols-outlined { font-size: 18px; }

.gen-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

.upload-zone {
    border: 2px dashed rgba(255,255,255,0.08); border-radius: var(--radius-md);
    padding: 36px 24px; text-align: center; cursor: pointer;
    transition: all 0.25s var(--ease-out); background: rgba(255,255,255,0.01);
}
.upload-zone:hover { border-color: var(--gold-border); background: var(--gold-bg); }
.upload-zone.dragover { border-color: var(--green); background: var(--green-bg); }
.upload-icon { font-size: 44px; color: var(--text-dim); display: block; margin-bottom: 10px; }
.upload-main-text { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 4px; }
.upload-sub-text { color: var(--text-dim); font-size: 0.75rem; }

.download-tpl-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--gold-border);
    background: var(--gold-bg); color: var(--gold);
    font-size: 0.82rem; font-weight: var(--font-medium);
    cursor: pointer; transition: all 0.2s var(--ease-out); text-decoration: none;
}
.download-tpl-btn:hover { background: var(--gold-bg-hover); border-color: var(--gold); }
.download-tpl-btn .material-symbols-outlined { font-size: 16px; }

.info-flow { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.8; }
.info-flow p { margin: 0 0 6px; }
.info-flow strong.cyan { color: var(--gold); }
.info-flow strong.orange { color: var(--orange); }
.info-flow strong.red { color: var(--red); }
.schedule-cards { display: flex; gap: 12px; margin-top: 8px; }
.schedule-card { flex: 1; padding: 10px 12px; border-radius: var(--radius-sm); text-align: center; }
.schedule-card.pm { background: var(--gold-bg); }
.schedule-card.am { background: var(--green-bg); }
.schedule-card .time { font-weight: var(--font-bold); font-size: 0.95rem; }
.schedule-card.pm .time { color: var(--gold); }
.schedule-card.am .time { color: var(--green); }
.schedule-card .desc { font-size: var(--text-xs); color: var(--text-dim); margin-top: 2px; }

.gen-tasks-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.gen-tasks-actions { display: flex; align-items: center; gap: 8px; }

/* KOL Layout (Tasks sidebar) */
.kol-layout { display: flex; gap: 20px; }
.kol-sidebar {
    width: 260px; min-width: 260px; align-self: start;
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); overflow: hidden;
}
.kol-sidebar-header { padding: 16px 16px 12px; border-bottom: 1px solid var(--border-subtle); }
.kol-sidebar-header h3 {
    margin: 0 0 10px; font-size: 0.9rem; font-weight: var(--font-semibold);
    color: var(--text-white); display: flex; align-items: center; gap: 6px;
}
.kol-search {
    width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.04);
    color: var(--text-white); font-size: 0.82rem; outline: none;
    transition: border-color 0.2s; box-sizing: border-box;
}
.kol-search:focus { border-color: var(--gold-border); }
.kol-search::placeholder { color: var(--text-dim); }
.kol-list { max-height: 520px; overflow-y: auto; padding: 6px; }
.kol-item {
    padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
    transition: all 0.15s var(--ease-out); display: flex; align-items: center; gap: 10px;
    color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 2px;
    border-left: 3px solid transparent;
}
.kol-item:hover { background: rgba(255,255,255,0.04); color: var(--text-white); }
.kol-item.active { background: var(--gold-bg); color: var(--text-white); border-left-color: var(--gold); }
.kol-item-avatar {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.05); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.kol-item.active .kol-item-avatar { background: var(--gold-bg-hover); }
.kol-item-avatar .material-symbols-outlined { font-size: 16px; }
.kol-item-info { overflow: hidden; }
.kol-item-name { font-weight: var(--font-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kol-item-meta { font-size: var(--text-xs); color: var(--text-dim); margin-top: 1px; }

.kol-bd-group { margin-bottom: 4px; }

/* ══════════════════════════════════════════════════════════
   CALENDAR (per-KOL tasks) — /admin/tasks "Calendario por KOL"
   ══════════════════════════════════════════════════════════ */
.kol-main { flex: 1; min-width: 0; }

.kol-empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 360px;
    background: var(--bg-surface);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 40px 20px; text-align: center;
    color: var(--text-dim);
}
.kol-empty-state .material-symbols-outlined {
    font-size: 56px; color: var(--text-dim);
    opacity: 0.5; margin-bottom: 8px;
}

/* Calendar toolbar — month nav + KOL badge */
.cal-toolbar {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.cal-toolbar h3 {
    margin: 0; min-width: 160px;
    font-size: 1.05rem; font-weight: var(--font-semibold);
    color: var(--text-white);
}
.cal-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary); cursor: pointer;
    transition: all 0.15s var(--ease-out);
}
.cal-nav-btn:hover { border-color: var(--gold-border); color: var(--gold); }
.cal-nav-btn .material-symbols-outlined { font-size: 18px; }

.kol-badge {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--gold-bg);
    border: 1px solid var(--gold-border);
    border-radius: 999px;
    font-size: 0.82rem; color: var(--gold);
    font-weight: var(--font-medium);
}
.kol-badge .material-symbols-outlined { font-size: 14px; }

/* Calendar wrap */
.cal-wrap { padding: 16px; }

/* THE FIX: 7-column grid for the calendar */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.cal-header-cell {
    padding: 8px 6px; text-align: center;
    font-size: 0.72rem; font-weight: var(--font-semibold);
    color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.05em;
}

.cal-day {
    min-height: 86px; padding: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer; overflow: hidden;
    display: flex; flex-direction: column; gap: 3px;
    transition: all 0.15s var(--ease-out);
}
.cal-day:hover { border-color: var(--gold-border); background: rgba(212,175,55,0.04); }
.cal-day.today { border-color: var(--gold); }
.cal-day.today .cal-day-num { color: var(--gold); font-weight: var(--font-bold); }
.cal-day.selected {
    background: var(--gold-bg);
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-bg-hover);
}
.cal-day.has-tasks { border-color: rgba(255,255,255,0.12); }

.cal-day-num {
    font-size: 0.82rem; line-height: 1;
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}

.cal-task-pill {
    display: block;
    font-size: 0.66rem; line-height: 1.3;
    padding: 2px 5px; border-radius: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-task-pill.gen { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
.cal-task-pill.spec { background: var(--gold-bg-hover); color: var(--gold); }
.cal-more { font-size: 0.65rem; color: var(--text-dim); padding-left: 4px; }

.cal-legend {
    display: flex; gap: 16px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.74rem; color: var(--text-dim);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; }
.legend-dot.gen { background: #60a5fa; }
.legend-dot.spec { background: var(--gold); }

/* Day Detail Panel (shows when a day is clicked) */
.day-panel {
    margin-top: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.day-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(255,255,255,0.02);
}
.day-panel-header h4 {
    margin: 0; display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.95rem; font-weight: var(--font-semibold);
    color: var(--text-white);
}
.day-panel-close {
    background: none; border: none; cursor: pointer;
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    display: inline-flex; align-items: center; justify-content: center;
}
.day-panel-close:hover { background: rgba(255,255,255,0.05); color: var(--text-secondary); }

.day-panel-body { padding: 14px 18px; }
.day-panel-empty {
    padding: 18px 8px; text-align: center;
    color: var(--text-dim); font-size: 0.85rem;
}

/* Inline add-task footer inside day panel */
.day-add-task {
    display: flex; gap: 8px; align-items: center;
    padding: 14px 18px;
    border-top: 1px solid var(--border-subtle);
    background: rgba(255,255,255,0.015);
}
.day-add-task .form-control { flex: 1; height: 38px; }

/* Task row items inside day panel */
.task-row-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.02);
    margin-bottom: 6px;
}
.task-row-item:last-child { margin-bottom: 0; }
.task-row-item.gen { border-left: 3px solid #60a5fa; }
.task-row-item.spec { border-left: 3px solid var(--gold); }
.task-row-left {
    display: flex; align-items: center; gap: 10px;
    flex: 1; min-width: 0; flex-wrap: wrap;
}
.task-text {
    flex: 1 1 100%; font-size: 0.86rem;
    color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis;
}
.task-type-badge {
    font-size: 0.7rem; padding: 3px 9px;
    border-radius: 999px; font-weight: var(--font-semibold);
    white-space: nowrap;
}
.task-type-badge.gen { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
.task-type-badge.spec { background: var(--gold-bg); color: var(--gold); }
.task-sent-badge {
    font-size: 0.68rem; padding: 2px 7px;
    border-radius: 999px; font-weight: var(--font-medium);
}
.task-sent-badge.sent { background: var(--green-bg); color: var(--green); }
.task-sent-badge.pending { background: rgba(255,255,255,0.05); color: var(--text-dim); }

.excl-btn, .del-task-btn {
    background: none; border: 1px solid var(--border-subtle);
    color: var(--text-dim); cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    transition: all 0.15s var(--ease-out);
    display: inline-flex; align-items: center; gap: 4px;
}
.excl-btn:hover { border-color: var(--red); color: var(--red); }
.del-task-btn { padding: 4px 8px; }
.del-task-btn:hover { border-color: var(--red); color: var(--red); }
.del-task-btn .material-symbols-outlined { font-size: 16px; }

/* Responsive — keep calendar usable on smaller screens */
@media (max-width: 720px) {
    .cal-day { min-height: 64px; padding: 4px; }
    .cal-day-num { font-size: 0.75rem; }
    .cal-task-pill { font-size: 0.62rem; padding: 1px 4px; }
    .cal-toolbar h3 { font-size: 0.95rem; min-width: 120px; }
    .kol-badge { margin-left: 0; width: 100%; justify-content: center; }
    .day-add-task { flex-direction: column; align-items: stretch; }
    .day-add-task .btn { width: 100%; }
}

/* Quick KOL Switch */
.quick-kol-switch {
    margin: var(--space-sm) var(--space-md); padding: 8px 12px;
    background: var(--bg-surface); border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm); display: flex; align-items: center;
    gap: var(--space-sm); cursor: pointer; color: var(--text-muted);
    font-size: var(--text-xs); transition: all var(--transition-fast);
}
.quick-kol-switch:hover { border-color: rgba(255,255,255,0.12); color: var(--text-secondary); }
.quick-kol-switch__dropdown {
    position: absolute; bottom: 100%; left: var(--space-md); right: var(--space-md);
    max-height: 250px; overflow-y: auto;
    background: var(--bg-raised); border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    display: none; z-index: var(--z-dropdown);
}
.quick-kol-switch__dropdown.open { display: block; }
.quick-kol-switch__item {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 8px 14px; color: var(--text-secondary);
    text-decoration: none; font-size: var(--text-xs);
    transition: background var(--transition-fast);
}
.quick-kol-switch__item:hover { background: var(--bg-surface); color: var(--text-primary); }


/* ══════════════════════════════════════════════════════════
   TOOLTIP
   ══════════════════════════════════════════════════════════ */

[data-tooltip] { position: relative; }
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) scale(0.9);
    padding: 6px 12px; background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem; color: var(--text-secondary);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: all var(--transition-fast);
    z-index: var(--z-modal);
}
[data-tooltip]:hover::before { opacity: 1; transform: translateX(-50%) scale(1); }

/* Notification dot */
.notification-dot {
    width: 8px; height: 8px; background: var(--red); border-radius: 50%;
    position: absolute; top: -2px; right: -2px;
    border: 2px solid var(--bg-raised);
}


/* ══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
   ══════════════════════════════════════════════════════════ */

.mobile-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: var(--z-overlay);
    background: color-mix(in srgb, var(--bg-sidebar) 97%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-primary);
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}

.mobile-bottom-nav-inner {
    display: flex; justify-content: space-around; align-items: center;
}

.mob-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 12px; border-radius: var(--radius-md);
    cursor: pointer; text-decoration: none; color: var(--text-dim);
    transition: all 0.2s var(--ease-out); min-width: 52px;
    border: none; background: none; font-family: inherit;
}
.mob-nav-item .material-symbols-outlined { font-size: 22px; transition: all 0.2s var(--ease-out); }
.mob-nav-item span:last-child { font-size: 0.62rem; font-weight: var(--font-medium); letter-spacing: 0.01em; }
.mob-nav-item.active { color: var(--gold); background: var(--gold-bg); }
.mob-nav-item.active .material-symbols-outlined { font-size: 24px; }


/* ══════════════════════════════════════════════════════════
   MOBILE SIDEBAR & OVERLAY
   ══════════════════════════════════════════════════════════ */

.sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.6); z-index: 99;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

.mobile-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 40px; height: 40px; border: none;
    background: rgba(255,255,255,0.04); border-radius: var(--radius-sm);
    color: var(--text-secondary); cursor: pointer; flex-shrink: 0;
}
.mobile-toggle .material-symbols-outlined { font-size: 22px; }


/* ════════════════════════════════════════════════════��═════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* ── Desktop sidebar behavior (≥1025px; below that the sidebar is a drawer) ── */
@media (min-width: 1025px) {
    .sidebar-overlay { display: none !important; }
    .sidebar { position: fixed; left: auto; width: var(--sidebar-width); height: 100vh; box-shadow: none; }
    .sidebar.collapsed { width: var(--sidebar-collapsed); }
    .main-content { margin-left: var(--sidebar-width); }
    .mobile-toggle { display: none !important; }
    .mobile-only { display: none !important; }
}

/* ── Tablet ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .page-content { padding: 16px 18px; }
    .gen-top-grid { grid-template-columns: 1fr; }
    .kol-layout { flex-direction: column; }
    .kol-sidebar { width: 100%; min-width: 0; }
}

/* ── Mobile ──────────────────────────���──────────────────── */
@media (max-width: 768px) {
    .mobile-toggle { display: flex !important; }
    .mobile-only { display: flex !important; }

    .sidebar {
        position: fixed; top: 0; left: 0; height: 100vh;
        width: 80vw !important; max-width: 300px;
        transform: translateX(-100%);
        transition: transform 0.3s var(--ease-smooth);
        z-index: var(--z-sticky);
        box-shadow: 4px 0 24px rgba(0,0,0,0.5);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar.collapsed { width: 80vw !important; left: auto; transform: translateX(-100%); }
    .sidebar.collapsed.open { transform: translateX(0); }

    .main-content { margin-left: 0 !important; }
    .mobile-bottom-nav { display: block; }
    #topbarSearch { display: flex; padding: 6px 10px; }
    #topbarSearch span[data-i18n], #topbarSearch kbd { display: none; }

    .page-content { padding: 12px 14px calc(var(--bottom-nav-height) + 16px) 14px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
    .top-bar { padding: 8px 14px; }
    .page-header { flex-direction: column; align-items: flex-start; }
    .page-actions, .page-header__actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
    .stat-card { padding: 14px 16px; }
    .stat-value { font-size: 1.5rem !important; }
    .stat-icon { width: 36px; height: 36px; margin-bottom: 10px; }
    .data-table { font-size: 0.82rem; }
    .data-table th, .data-table td { padding: 9px 10px; }
    .filter-bar { flex-direction: column; }
    .filter-bar .form-control, .search-wrap { width: 100%; min-width: unset; }
    .hide-mobile { display: none !important; }
    .card, .glass-card { padding: 14px; }
    .home-grid { grid-template-columns: 1fr !important; }
    .kol-grid { grid-template-columns: 1fr; }
    .kol-ctx-header { margin: 0 0 2px; padding: 6px 10px; }
    .lang-select { scale: 1.1; margin-right: 8px; }

    /* Modal fullscreen */
    [style*="position:fixed"] > .glass-card,
    .modal-overlay > .glass-card,
    .modal-content {
        width: 95vw !important; max-width: 95vw !important;
        max-height: 90vh !important; overflow-y: auto;
    }
    [style*="position:fixed"] > div,
    [style*="position: fixed"] > div {
        width: 95vw !important; max-width: 95vw !important;
        max-height: 90vh !important; overflow-y: auto !important;
    }

    .rte-toolbar { flex-wrap: wrap; gap: 1px; }
    .rte-var-btn { padding: 3px 6px !important; font-size: 0.68rem !important; }

    /* Inline grid overrides */
    [style*="grid-template-columns"][style*="px"] { grid-template-columns: 1fr !important; }
}

/* ── Modal form grids collapse ───────────────���─────────── */
@media (max-width: 520px) {
    [style*="position:fixed"] [style*="grid-template-columns:1fr 1fr"],
    .modal-content [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    [style*="position:fixed"] [style*="grid-template-columns:1fr 1fr 1fr"],
    .modal-content [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    [style*="position:fixed"] input,
    [style*="position:fixed"] select,
    [style*="position:fixed"] textarea {
        min-width: 0 !important; max-width: 100% !important;
    }
}

/* ── Small Mobile ──────────────────────────────────────── */
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
    .stat-value { font-size: 1.3rem !important; }
    .page-content { padding: 10px 12px calc(var(--bottom-nav-height) + 16px) 12px; }
    .top-bar { padding: 8px 10px; gap: 8px; }
    /* breadcrumb is redundant with the in-page title here and crowds the action
       cluster on tiny screens → hide it so the top bar never overflows */
    .breadcrumb { display: none !important; }
    .top-bar-actions { gap: 6px; min-width: 0; }
    #topbarSearch { padding: 6px 8px; }
    .login-card { padding: 24px 18px; }
    .tab-btn { padding: 8px 12px !important; font-size: 0.82rem !important; }
    .data-table th, .data-table td { padding: 8px 8px; }
    .radio-label { flex: 1; justify-content: center; padding: 10px 12px; font-size: 0.82rem; }
    [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* ── Very small (iPhone SE) ────────────────────────────── */
@media (max-width: 375px) {
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
    .stat-value { font-size: 1.2rem !important; }
    .stat-label { font-size: 0.7rem !important; }
    .breadcrumb { flex-wrap: wrap; }
}

/* ── Responsive safety net for dense pages on phones ──────────────────
   Rows of buttons/tabs and long unbreakable strings are the usual cause of
   horizontal page-scroll on small screens. Make them wrap/shrink so the page
   never scrolls sideways (wide tables keep their own overflow-x:auto wrapper). */
@media (max-width: 640px) {
    .card-header,
    .card-header > div,
    .gen-tasks-actions,
    .tt-tabs, .tabs,
    .page-actions, .page-header__actions { flex-wrap: wrap; }
    .form-control, input, select, textarea { max-width: 100%; }
    code, pre { overflow-wrap: anywhere; word-break: break-word; }
    canvas { max-width: 100%; }
}

/* ── Touch Devices ─────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .nav-link { padding: 12px 16px !important; min-height: 44px; }
    .tab-btn { min-height: 44px; }
    .btn { min-height: 44px; }
    .btn-icon { width: 44px !important; height: 44px !important; }
    .data-table td { padding: 13px 12px !important; }
    .mob-nav-item { min-height: 48px; }
    .stat-card:hover, .nav-link:hover, .home-tile:hover { transform: none !important; }
    details summary { padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
}

/* ── Safe areas (notch/home bar) ───────────────────────── */
@supports (padding: max(0px)) {
    .mobile-bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    .top-bar { padding-top: max(10px, env(safe-area-inset-top)); }
}


/* ══════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════ */

.hidden { display: none !important; }
.mobile-only { display: none !important; }
@media (max-width: 768px) { .mobile-only { display: flex !important; } }

.text-cyan { color: var(--gold); }
.text-green { color: var(--green); }
.text-orange { color: var(--orange); }
.text-red { color: var(--red); }
.text-purple { color: var(--purple); }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }

.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }


/* ═════════════════════��════════════════════════════════════
   INLINE STYLE OVERRIDES (CSS spec: !important needed)
   ══════════════════════════════════════════════════════════ */

[style*="color:var(--text-secondary)"],
[style*="color: var(--text-secondary)"] { color: var(--text-secondary) !important; }
[style*="color:var(--text-muted)"],
[style*="color: var(--text-muted)"] { color: var(--text-muted) !important; }


/* ══════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   MISSING COMPONENT CLASSES (used in templates)
   ══════════════════════════════════════════════════════════ */

/* ── Modal Header ──────────────────────────────────────── */
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px; margin-bottom: 16px;
    border-bottom: 1px solid var(--border-primary);
}
.modal-header h3 { font-size: 1.1rem; font-weight: var(--font-bold); color: var(--text-white); }

/* ── Form Field Group ──────────────────────────────────── */
.field-group {
    margin-bottom: 18px; padding: 16px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle);
}

/* ── Mode Button (instance form toggle) ────────────────── */
.mode-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-primary);
    background: transparent; color: var(--text-secondary);
    font-family: inherit; font-size: var(--text-sm); font-weight: var(--font-medium);
    cursor: pointer; transition: all var(--transition-fast);
}
.mode-btn:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.mode-btn.active { background: var(--gold-bg-hover); color: var(--gold); border-color: var(--gold); font-weight: var(--font-semibold); }

/* ── Signal Period Tab ─────────────────────────────────── */
.sig-period-tab {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--border-primary);
    background: transparent; color: var(--text-muted);
    font-family: inherit; font-size: var(--text-xs); font-weight: var(--font-medium);
    cursor: pointer; transition: all var(--transition-fast);
}
.sig-period-tab:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.sig-period-tab.active { background: var(--gold-bg); color: var(--gold); border-color: var(--gold); }

/* ── Tooltip Icon ──────────────────────────────────────── */
.tooltip-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(255,255,255,0.06); color: var(--text-dim);
    font-size: 11px; cursor: help; position: relative;
}

/* ── Role Pill ─────────────────────────────────────────── */
.role-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: var(--font-medium);
    text-transform: uppercase; letter-spacing: 0.03em;
}

/* ── KOL Checkbox Items (admin users) ──────────────────── */
.kol-checkbox-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: var(--radius-sm);
    cursor: pointer; transition: background var(--transition-fast);
    font-size: var(--text-sm); color: var(--text-secondary);
}
.kol-checkbox-item:hover { background: rgba(255,255,255,0.03); }
.bd-kol-check, .edit-bd-kol-check { accent-color: var(--gold); }

/* ── KOL BD Header ─────────────────────────────────────── */
.kol-bd-header {
    padding: 8px 12px; font-size: var(--text-xs);
    font-weight: var(--font-semibold); text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-dim);
    border-bottom: 1px solid var(--border-subtle);
}

/* ── Credential Fields (dashboard) ─────────────────────── */
.cred-name { font-weight: var(--font-semibold); color: var(--text-primary); font-size: var(--text-sm); }
.cred-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cred-type { font-size: var(--text-xs); color: var(--text-dim); }

/* ── Slug Edit Display ─────────────────────────────────── */
.edit-slug-domain { color: var(--text-dim); font-size: var(--text-sm); }
.edit-slug-display {
    font-family: var(--font-mono); font-size: var(--text-sm);
    color: var(--gold); font-weight: var(--font-medium);
}

/* ── Tutorial Steps (instance form) ────────────────────── */
.tut-step {
    padding: 16px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle);
    margin-bottom: 12px;
}
.tut-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    font-size: var(--text-xs); font-weight: var(--font-bold);
    flex-shrink: 0;
    background: rgba(255,255,255,0.06); color: var(--text-secondary);
}
.tut-num-cyan { background: var(--gold-bg); color: var(--gold); }
.tut-num-green { background: var(--green-bg); color: var(--green); }
.tut-num-orange { background: var(--orange-bg); color: var(--orange); }
.tut-num-purple { background: var(--purple-bg); color: var(--purple); }

.tut-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: 4px; }
.tut-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 8px; }
.tut-code {
    font-family: var(--font-mono); font-size: var(--text-xs);
    background: rgba(255,255,255,0.04); color: var(--gold);
    padding: 2px 6px; border-radius: var(--radius-xs);
}
.tut-ol { padding-left: 20px; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.8; }
.tut-screenshot {
    max-width: 100%; border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary); margin-top: 8px;
}
.tut-field-ref {
    font-family: var(--font-mono); font-size: var(--text-xs);
    background: var(--gold-bg); color: var(--gold);
    padding: 1px 6px; border-radius: 3px;
}
.tut-warn {
    padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--orange-bg); border: 1px solid var(--orange-border);
    color: var(--orange); font-size: var(--text-sm); font-weight: var(--font-medium);
    display: flex; align-items: center; gap: 8px;
}
.tut-tip {
    padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--gold-bg); border: 1px solid var(--gold-border);
    color: var(--text-secondary); font-size: var(--text-sm);
    display: flex; align-items: center; gap: 8px;
}

.tut-mode-tag {
    display: inline-flex; padding: 2px 8px; border-radius: var(--radius-full);
    font-size: 0.68rem; font-weight: var(--font-semibold);
}
.tut-mode-semi { background: var(--gold-bg); color: var(--gold); }
.tut-mode-manual { background: var(--blue-bg); color: var(--blue); }
.tut-mode-skip { background: rgba(255,255,255,0.06); color: var(--text-muted); }

/* ── Exchange Card (dashboard) ─────────────────────────── */
.exchange-card {
    background: var(--bg-card); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); padding: 20px;
    transition: all 0.25s var(--ease-out);
    animation: fadeInUp 0.5s var(--ease-out) both;
}
.exchange-card:hover { border-color: var(--gold-border); box-shadow: var(--shadow-gold); }

/* ── Filter Buttons ────────────────────────────────────── */
.filter-btn,
[data-flang],
.ft-lang-btn {
    padding: 6px 16px; border-radius: var(--radius-full);
    font-size: 0.82rem; font-weight: var(--font-medium);
    border: 1px solid var(--border-primary); background: transparent;
    color: var(--text-muted); cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}
.filter-btn:hover, [data-flang]:hover, .ft-lang-btn:hover {
    background: rgba(255,255,255,0.04); color: var(--text-primary);
}
.filter-btn.active, [data-flang].active, .ft-lang-btn.active {
    background: var(--gold-bg); color: var(--gold); border-color: var(--gold);
}

/* ── Action Buttons ────────────────────────────────────── */
.action-btn {
    border-radius: var(--radius-sm);
    transition: all 0.2s var(--ease-out);
}
.action-btn:hover { transform: scale(1.08); }


/* ══════════════════════════════════════════════════════════
   PREMIUM POLISH — Aurum 4.0
   (Only rules that ADD to base — no conflicts/dupes)
   ══════════════════════════════════════════════════════════ */

/* ── Nav Active — Glow Strip on Left Bar ───────────────── */
.nav-link.active::before {
    box-shadow: 0 0 10px rgba(212,175,55,0.35), 0 0 4px rgba(212,175,55,0.5);
}

/* ── Chart Container Premium Styling ───────────────────── */
.chart-container {
    position: relative;
    width: 100%;
    height: 260px;
    padding: 4px 0;
}
.chart-container canvas {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
}

/* ── Premium Badge — Pill with Inner Glow ──────────────── */
.badge-vip, .badge-VIP {
    box-shadow: inset 0 0 12px rgba(212,175,55,0.1), 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Premium Button Primary — Gold Shimmer ─────────────── */
.btn-primary {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
    background-size: 200% auto;
    transition: all 0.3s var(--ease-out), background-position 0.5s ease;
}
.btn-primary:hover {
    background-position: right center;
    box-shadow: 0 4px 20px rgba(212,175,55,0.25), 0 0 40px rgba(212,175,55,0.08);
}

/* ── Premium Value Counters — Number Glow ──────────────── */
.stat-value {
    background: linear-gradient(135deg, #FFFFFF 0%, #E8E8ED 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stat-card:hover .stat-value {
    background: linear-gradient(135deg, #FFFFFF 0%, var(--gold-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(212,175,55,0.3));
}

/* ── Premium KOL Card — Left Border Glow ───────────────── */
.kol-card {
    border-left: 3px solid var(--gold);
    box-shadow: -3px 0 12px rgba(212,175,55,0.06), var(--shadow-xs);
}
.kol-card:hover {
    box-shadow: -3px 0 20px rgba(212,175,55,0.12), var(--shadow-md);
}

/* ── Premium Home Tile Hover — Lift + Glow ─────────────── */
.home-tile:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── Premium Toast — Frosted Glass ─────────────────────── */
.toast {
    background: rgba(15,15,18,0.92);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03);
}

/* ── Premium Skeleton — Faster + more visible shimmer ───── */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-surface) 0%,
        rgba(255,255,255,0.08) 30%,
        rgba(212,175,55,0.06) 50%,
        rgba(255,255,255,0.08) 70%,
        var(--bg-surface) 100%
    );
    background-size: 300% 100%;
    animation: shimmer 0.95s linear infinite;
}

/* ── Premium Scrollbar — Gold Accent on Hover ──────────── */
::-webkit-scrollbar-thumb:hover {
    background: rgba(212,175,55,0.2);
}

/* ── Premium Pagination Active ─────────────────────────── */
.pagination button.active {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    box-shadow: 0 2px 8px rgba(212,175,55,0.2);
}

/* ── Premium Tab Active — Underline Glow ───────────────── */
.tab-btn.active-tab {
    background: linear-gradient(180deg, rgba(212,175,55,0.06) 0%, transparent 100%);
    box-shadow: 0 2px 0 var(--gold), 0 4px 12px rgba(212,175,55,0.08);
}

/* ── TTA Admin Sidebar — Skool-style flat nav ── */

.tta-sb-brand {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px 10px; font-weight: 700; font-size: .9rem; color: var(--gold);
}
.tta-sb-brand .material-symbols-outlined { font-size: 20px; }

/* ── Hub Tab Bar (horizontal sub-nav inside content area) ── */
.tta-hub-tabs {
    display: flex; gap: 0; overflow-x: auto;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin: 4px 0 20px; scrollbar-width: none;
}
.tta-hub-tabs::-webkit-scrollbar { display: none; }
.tta-hub-tabs a {
    padding: 10px 18px; white-space: nowrap;
    font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
    color: var(--text-dim, #666); text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.tta-hub-tabs a:hover { color: var(--text-primary, #e4e4e7); }
.tta-hub-tabs a.active {
    color: var(--gold, #D4AF37);
    border-bottom-color: var(--gold, #D4AF37);
}
@media (max-width: 768px) {
    .tta-hub-tabs a { padding: 10px 14px; font-size: 12px; }
}

/* ── Premium Command Palette — Cinematic ───────────────── */
.cmd-palette {
    box-shadow:
        0 24px 80px rgba(0,0,0,0.7),
        0 0 0 1px rgba(212,175,55,0.06),
        0 0 60px rgba(212,175,55,0.03);
}

/* ── Premium Mobile Bottom Nav ─────────────────────────── */
.mob-nav-item.active {
    background: linear-gradient(180deg, rgba(212,175,55,0.12) 0%, rgba(212,175,55,0.04) 100%);
    box-shadow: 0 -2px 0 var(--gold);
}

/* ── Premium Progress Bars (funnel) ────────────────────── */
[style*="border-radius:3px"][style*="transition:width"],
[style*="border-radius:4px"][style*="transition:width"] {
    box-shadow: 0 0 8px rgba(212,175,55,0.1);
}

/* ── Premium Focus Ring ────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(212,175,55,0.08);
}

/* ── Premium Selection ─────────────────────────────────── */
::selection {
    background: rgba(212,175,55,0.25);
    color: #FFFFFF;
}

/* ── Premium User Dropdown Avatar ──────────────────────── */
.user-dropdown__avatar,
.home-kol-avatar {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 50%, var(--gold-light) 100%);
    background-size: 200% 200%;
    animation: gradient-shift 6s ease infinite;
}

/* ── Premium Card Header Divider ───────────────────────── */
.card-header {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    border-image: linear-gradient(90deg, transparent, rgba(212,175,55,0.08), transparent) 1;
}

/* ── Premium Login (override) ──────────────────────────── */
.login-card, .form-container {
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
}


/* ══════════════════════════════════════════════════════════
   PREMIUM FUNNEL VISUALIZATION
   ══════════════════════════════════════════════════════════ */

.funnel-step {
    display: grid; grid-template-columns: 40px 1fr auto; align-items: center;
    gap: 14px; padding: 14px 18px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 6px; transition: all 0.3s var(--ease-out);
    position: relative; overflow: hidden; animation: fadeInUp 0.4s var(--ease-out) both;
}
.funnel-step:hover {
    background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08);
    transform: translateX(4px);
}
.funnel-step-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.funnel-step-bar {
    height: 10px; border-radius: 5px; background: rgba(255,255,255,0.04);
    overflow: hidden; position: relative; margin-top: 6px;
}
.funnel-step-fill {
    height: 100%; border-radius: 5px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); position: relative;
}
.funnel-step-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 2.5s ease-in-out infinite; background-size: 200% 100%;
}
.funnel-step-value {
    font-size: 1.15rem; font-weight: 700; color: var(--text-white);
    min-width: 50px; text-align: right;
}
.funnel-step-conv {
    font-size: 0.68rem; font-weight: 600; padding: 2px 8px;
    border-radius: var(--radius-full); text-align: right; display: inline-block; margin-top: 2px;
}
.funnel-step-conv.good { background: var(--green-bg); color: var(--green); }
.funnel-step-conv.mid { background: var(--orange-bg); color: var(--orange); }
.funnel-step-conv.low { background: var(--red-bg); color: var(--red); }
.funnel-connector {
    width: 2px; height: 8px; margin: 0 0 0 19px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

/* ── Mobile Performance Guard ──────────────────────────── */
@media (max-width: 768px) {
    .glass-card, .card, .stat-card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .funnel-step { grid-template-columns: 32px 1fr auto; gap: 10px; padding: 10px 12px; }
    .funnel-step-icon { width: 32px; height: 32px; }
}


/* ══════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════ */

@media print {
    .sidebar, .top-bar, .mobile-bottom-nav, .mobile-toggle { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .page-content { padding: 0; }
    body::before { display: none; }
}