/* ==========================================
   DARK THEME
   ========================================== */

body.dark{

    --bg:#06080d;
    --card:rgba(18,22,31,.82);
    --text:#f5f7fb;
    --muted:#8b98aa;

    --primary:#4f8cff;

    --border:rgba(255,255,255,.07);

    --shadow:
        0 20px 50px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.04);

    background:
        radial-gradient(circle at 15% 10%, rgba(79,140,255,.18), transparent 32%),
        radial-gradient(circle at 90% 90%, rgba(0,230,255,.08), transparent 40%),
        radial-gradient(circle at 50% -20%, rgba(255,255,255,.03), transparent 45%),
        var(--bg);

    color:var(--text);

}

/* ==========================================
   HEADER
   ========================================== */

body.dark .top{

    border-bottom:1px solid rgba(255,255,255,.05);

}

body.dark .brand{

    color:var(--text);

}

body.dark .dot{

    box-shadow:
        0 0 12px rgba(79,140,255,.9);

}

/* ==========================================
   HERO
   ========================================== */

body.dark .hero h1{

    color:#fff;

    text-shadow:
        0 0 30px rgba(79,140,255,.18);

}

body.dark .hero p{

    color:var(--muted);

}

/* ==========================================
   GAUGE
   ========================================== */

body.dark .g-bg{

    stroke:rgba(255,255,255,.08);

}

body.dark .g-progress{

    stroke:var(--primary);

    filter:
        drop-shadow(0 0 8px rgba(79,140,255,.5))
        drop-shadow(0 0 20px rgba(79,140,255,.35));

}

body.dark #needle line{

    stroke:var(--primary);

    filter:
        drop-shadow(0 0 6px rgba(79,140,255,.6));

}

body.dark #needle circle{

    fill:var(--primary);

}

body.dark #speed{

    color:#fff;

    text-shadow:
        0 0 20px rgba(79,140,255,.18);

}

body.dark .unit{

    color:var(--muted);

}

body.dark #status{

    color:var(--muted);

}

/* ==========================================
   BUTTON
   ========================================== */

body.dark .primary{

    background:
        linear-gradient(
            135deg,
            #5b96ff,
            #2563eb
        );

    box-shadow:
        0 10px 30px rgba(79,140,255,.35);

    transition:
        .25s;

}

body.dark .primary:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 16px 45px rgba(79,140,255,.45);

}

body.dark .primary:active{

    transform:
        translateY(0);

}

/* ==========================================
   CARDS
   ========================================== */

body.dark .card{

    background:var(--card);

    border:1px solid var(--border);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow);

    transition:
        transform .25s,
        border-color .25s,
        box-shadow .25s;

}

body.dark .card:hover{

    transform:
        translateY(-6px);

    border-color:
        rgba(79,140,255,.22);

    box-shadow:
        0 25px 50px rgba(0,0,0,.45),
        0 0 20px rgba(79,140,255,.10);

}

body.dark .label{

    color:var(--muted);

}

body.dark .value{

    color:#fff;

}

/* ==========================================
   THEME SWITCH
   ========================================== */

body.dark .theme-label{

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 8px 25px rgba(0,0,0,.30);

}

body.dark .theme-label::after{

    background:
        linear-gradient(
            135deg,
            #66a4ff,
            #2563eb
        );

    box-shadow:
        0 0 15px rgba(79,140,255,.55);

}

body.dark .theme-icon{

    color:rgba(255,255,255,.7);

}

/* ==========================================
   FOOTER
   ========================================== */

body.dark .footer{

    color:var(--muted);

    border-top:
        1px solid rgba(255,255,255,.05);

}

/* ==========================================
   SCROLLBAR
   ========================================== */

body.dark::-webkit-scrollbar{

    width:10px;

}

body.dark::-webkit-scrollbar-track{

    background:#06080d;

}

body.dark::-webkit-scrollbar-thumb{

    background:#2b3954;

    border-radius:20px;

}

body.dark::-webkit-scrollbar-thumb:hover{

    background:#4f8cff;

}

/* ==========================================
   SELECTION
   ========================================== */

body.dark ::selection{

    background:
        rgba(79,140,255,.35);

    color:#fff;

}

/* ==========================================
   LINKS
   ========================================== */

body.dark a{

    color:#7db0ff;

}

body.dark a:hover{

    color:#a7caff;

}