:root{
    --bg:#13181d;
    --bg2:#0e1318;
    --panel:#202830;
    --panel2:#2a3440;
    --accent:#00AEEF;
    --green:#22C55E;
    --yellow:#FACC15;
    --red:#EF4444;
    --text:#f5f7fa;
    --muted:#9ca9b5;
    --border:#32404c;
    --shadow:0 10px 30px rgba(0,0,0,.35);
}

html,body{
    height:100%;
}

body{
    background:linear-gradient(180deg,var(--bg2),#171d24);
    color:var(--text);
    font-family:"Segoe UI",Arial,sans-serif;
    overflow-x:hidden;
}

/* ---------- NAVBAR ---------- */

.navbar{
    background:#0f151b;
    border-bottom:1px solid #2d3945;
}

.brand{
    font-size:1.55rem;
    font-weight:700;
    color:#fff;
}

.subtitle{
    color:var(--muted);
    font-size:.9rem;
}

/* ---------- PANELS ---------- */

.panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
    box-shadow:var(--shadow);
    margin-bottom:20px;
}

.panel h5{
    color:var(--accent);
    margin-bottom:18px;
    font-weight:600;
}

/* ---------- INSTRUMENT ---------- */

.instrument{
    text-align:center;
    background:linear-gradient(var(--panel2),#1c252d);
    border-radius:16px;
    border:1px solid var(--border);
    padding:22px;
    box-shadow:var(--shadow);
}

.instrument h6{
    color:#8dbfd7;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.value{
    font-size:3rem;
    font-weight:700;
    color:#fff;
    line-height:1;
}

.unit{
    margin-top:8px;
    color:var(--muted);
    font-size:.95rem;
}

/* ---------- SVG ---------- */

#raceCanvas{
    width:100%;
    height:70vh;
    min-height:650px;
    display:block;
    border:1px dashed #41505d;
    border-radius:14px;
    background:
        linear-gradient(rgba(255,255,255,.03),rgba(255,255,255,.03)),
        radial-gradient(circle at center,#1d2730 0%,#182028 100%);
}

/* ---------- RANGE ---------- */

input[type=range]{
    accent-color:var(--accent);
}

.value-label{
    background:transparent!important;
    border:none!important;
    color:#fff!important;
    font-weight:700;
    text-align:right;
    padding:0;
    box-shadow:none!important;
}

.value-label:focus{
    outline:none;
    box-shadow:none!important;
}

/* ---------- FORM ---------- */

.form-check{
    margin-bottom:.8rem;
}

.form-check-input{
    background:#26313b;
    border-color:#4b5c6c;
}

.form-check-input:checked{
    background-color:var(--accent);
    border-color:var(--accent);
}

/* ---------- ALERT ---------- */

.alert-info{
    background:#12384a;
    color:#d9f6ff;
    border:1px solid #1d6d92;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:1200px){

    #raceCanvas{
        height:60vh;
        min-height:500px;
    }

}

@media (max-width:992px){

    #raceCanvas{
        height:50vh;
        min-height:420px;
    }

    .value{
        font-size:2.4rem;
    }

    .brand{
        font-size:1.25rem;
    }

}

@media (max-width:768px){

    .panel,
    .instrument{
        margin-bottom:15px;
    }

    #raceCanvas{
        min-height:360px;
        height:45vh;
    }

}


.panel {
    padding: 16px;
    margin-bottom: 14px;
}

.instrument {
    padding: 16px;
    margin-bottom: 14px;
}

    .instrument .value {
        font-size: 42px;
    }

.form-control.value-label {
    margin-top: 4px;
    margin-bottom: 8px;
}

label {
    margin-bottom: 4px;
}

h5 {
    margin-bottom: 12px;
}