/* Design System - Futurista/Tech */
:root {
    --primary: #4f6bff;
    --primary-dark: #3548d9;
    --primary-light: #7aa2ff;
    --accent: #17e3ff;
    --accent-warm: #f86bff;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    --bg-main: #f4f7ff;
    --bg-card: rgba(255, 255, 255, 0.92);
    --bg-sidebar: #0b1220;
    --bg-elevated: #ffffff;

    --border: rgba(15, 23, 42, 0.1);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    --shadow: 0 12px 35px rgba(13, 30, 66, 0.08);
    --shadow-lg: 0 22px 55px rgba(13, 30, 66, 0.14);
    --glow: 0 0 25px rgba(79, 107, 255, 0.35);
    --glass: rgba(255, 255, 255, 0.08);
    --glass-strong: rgba(255, 255, 255, 0.16);
}

.dark-mode {
    --primary: #6b8bff;
    --primary-dark: #4b64e3;
    --primary-light: #9ab4ff;
    --accent: #4fdcff;
    --accent-warm: #ff7fe1;

    --bg-main: #0a1020;
    --bg-card: rgba(18, 27, 48, 0.85);
    --bg-sidebar: #060b16;
    --bg-elevated: rgba(15, 23, 42, 0.9);

    --border: rgba(148, 163, 184, 0.16);
    --text-primary: #e2e8f0;
    --text-secondary: #b3c2db;
    --text-muted: #8aa0bf;

    --shadow: 0 14px 40px rgba(2, 6, 23, 0.6);
    --shadow-lg: 0 28px 65px rgba(2, 6, 23, 0.65);
    --glow: 0 0 30px rgba(107, 139, 255, 0.45);
    --glass: rgba(15, 23, 42, 0.6);
    --glass-strong: rgba(15, 23, 42, 0.75);
}

body {
    background: var(--bg-main);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

.card,
.panel,
.surface {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.glass {
    background: var(--glass);
    border: 1px solid var(--border);
    backdrop-filter: blur(16px);
}

.input-cmd,
input,
select,
textarea {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-primary);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: var(--glow);
}

.badge-success { background: rgba(16, 185, 129, 0.16); color: #0f766e; }
.badge-info { background: rgba(79, 107, 255, 0.16); color: #1d4ed8; }
.badge-warning { background: rgba(245, 158, 11, 0.18); color: #92400e; }

@media (max-width: 768px) {
    .card,
    .panel {
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(13, 30, 66, 0.12);
    }
}