@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

/* ══════════════════════════════════════════════
   Theme: Cyber (default)
   Dark HUD / neon aesthetic
   ══════════════════════════════════════════════ */
:root,
[data-theme="cyber"] {
    /* RGB channels — used as rgba(var(--xxx-rgb), opacity) in layout.css */
    --primary-rgb: 0, 243, 255;
    --accent-rgb: 0, 255, 136;
    --success-rgb: 0, 255, 65;
    --hover-rgb: 245, 158, 11;
    --danger-rgb: 248, 113, 113;
    --surface-rgb: 10, 10, 15;
    --surface-alt-rgb: 12, 12, 18;
    --text-main-rgb: 241, 245, 249;
    --text-dim-rgb: 148, 163, 184;
    --shadow-rgb: 0, 0, 0;

    /* Named colors */
    --bg-color: #0a0a0f;
    --bg-panel: rgba(18, 18, 26, 0.9);
    --primary-blue: #3b82f6;
    --primary-cyan: rgb(var(--primary-rgb));
    --primary-light: #33f5ff;
    --success-green: #00ff41;
    --neon-light-green: #00ff88;
    --accent-yellow: #f59e0b;
    --warning-orange: #f97316;
    --danger-red: #ff003c;
    --text-main: #f1f5f9;
    --text-dim: #94a3b8;
    --border-panel: 1px solid rgba(var(--primary-rgb), 0.2);
    --border-highlight: 1px solid var(--primary-cyan);
    --font-mono: 'Share Tech Mono', monospace;
    --font-display: 'Orbitron', sans-serif;

    /* Body background */
    --body-bg-image:
        linear-gradient(rgba(var(--primary-rgb), 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-rgb), 0.02) 1px, transparent 1px);
    --body-bg-size: 30px 30px;

    /* Scrollbar */
    --scrollbar-thumb: rgba(var(--primary-rgb), 0.2);
    --scrollbar-thumb-hover: rgba(var(--primary-rgb), 0.35);
}

/* ══════════════════════════════════════════════
   Theme: Standard
   Professional / corporate — no purple, no neon
   Blues + grays inspired by Windows Fluent UI
   ══════════════════════════════════════════════ */
[data-theme="standard"] {
    --primary-rgb: 0, 120, 212;
    --accent-rgb: 0, 151, 167;
    --success-rgb: 16, 124, 16;
    --hover-rgb: 16, 110, 190;
    --danger-rgb: 209, 52, 56;
    --surface-rgb: 250, 250, 250;
    --surface-alt-rgb: 255, 255, 255;
    --text-main-rgb: 32, 31, 30;
    --text-dim-rgb: 96, 94, 92;
    --shadow-rgb: 0, 0, 0;

    --bg-color: #f3f3f3;
    --bg-panel: rgba(255, 255, 255, 0.95);
    --primary-blue: #0078d4;
    --primary-cyan: rgb(var(--primary-rgb));
    --primary-light: #2b88d8;
    --success-green: #107c10;
    --neon-light-green: #0097a7;
    --accent-yellow: #ff8c00;
    --warning-orange: #ff8c00;
    --danger-red: #d13438;
    --text-main: #201f1e;
    --text-dim: #605e5c;
    --border-panel: 1px solid rgba(var(--primary-rgb), 0.18);
    --border-highlight: 1px solid var(--primary-cyan);
    --font-mono: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

    --body-bg-image: none;
    --body-bg-size: auto;

    --scrollbar-thumb: rgba(var(--primary-rgb), 0.2);
    --scrollbar-thumb-hover: rgba(var(--primary-rgb), 0.35);
}

/* ══════════════════════════════════════════════
   Base reset + body
   ══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    background-image: var(--body-bg-image);
    background-size: var(--body-bg-size);
    color: var(--text-main);
    font-family: var(--font-mono);
    margin: 0;
    padding: 6px 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100vh;
    max-width: 100vw;
    overflow: hidden;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

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

/* ── Fast tooltip (JS-positioned, never clipped, never rotated) ── */
#nc-tip {
    position: fixed;
    background: rgba(var(--surface-alt-rgb), 0.97);
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.3);
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.02s;
}

#nc-tip.nc-tip-show {
    opacity: 1;
}

[data-theme="standard"] #nc-tip {
    background: #fff;
    border-color: rgba(0, 120, 212, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

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

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

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

@keyframes modalShake {
    10%, 90% { transform: translateX(-3px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}