/* ═══════════════════════════════════════════════
   NeoGen Design System — Base
   :root variables, reset, body, scrollbar, animations
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Brand */
    --neo-navy:      #0a0f1e;
    --neo-navy-mid:  #0f172a;
    --neo-navy-soft: #1e293b;
    --neo-cyan:      #06b6d4;
    --neo-cyan-dim:  #0e7490;
    --neo-blue:      #06b6d4;

    /* Surface — Dark Theme */
    --bg-page:       #0a0f1e;
    --bg-card:       #0f172a;
    --bg-subtle:     #1e293b;

    /* Text */
    --text-primary:  #f1f5f9;
    --text-secondary:#94a3b8;
    --text-muted:    #475569;

    /* Border */
    --border:        rgba(255,255,255,0.08);
    --border-focus:  #06b6d4;

    /* Status */
    --green:  #10b981;
    --red:    #ef4444;
    --yellow: #f59e0b;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.3);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.5);

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* ── Reset ───────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
}

/* ── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Animations ──────────────────────────────── */
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

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

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

@keyframes pulse-update {
    0%   { background: inherit; }
    50%  { background: rgba(16,185,129,0.08); }
    100% { background: inherit; }
}

@keyframes neoFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

@keyframes neoAnalyzing {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%       { transform: scale(1.05) rotate(3deg); }
}