/* ============================================================
   FX-Tester Pro — main.css (v5 - GEN 3 Optimized)
   ============================================================ */

/* ===== Theme Variables (GEN 3) ===== */
:root {
    --bg: #0d1117;
    --surface: #161b22;
    --sidebar-nav: #010409;
    --drawer-bg: rgba(13, 17, 23, 0.95);
    --border: #30363d;
    --text: #c9d1d9;
    --text-dim: #8b949e;
    --accent: #2f81f7;
    --accent-glow: rgba(47, 129, 247, 0.4);
    --success: #238636;
    --danger: #da3633;
    --warning: #d29922;
    --input-bg: #0d1117;
    --shadow: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] {
    --bg: #f6f8fa;
    --surface: #ffffff;
    --sidebar-nav: #eff2f5;
    --drawer-bg: rgba(255, 255, 255, 0.98);
    --border: #d0d7de;
    --text: #1f2328;
    --text-dim: #656d76;
    --accent: #0969da;
    --accent-glow: rgba(9, 105, 218, 0.2);
    --input-bg: #ffffff;
    --shadow: rgba(31, 35, 40, 0.12);
}

/* Material Symbols Setup */
.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.active .material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Glassmorphism Classes */
.glass-panel {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: var(--drawer-bg);
    border-right: 1px solid var(--border);
}