:root{
    font-family:system-ui,-apple-system,Segoe UI,sans-serif;

    --bg:#16120d;
    --bg2:#2a1d13;

    --card:#1c1712;
    --card2:#211b15;

    --border:#5d3b1c;

    --text:#efe7d3;
    --muted:#bfa98a;

    --gold:#d68a2d;
    --gold-dark:#8f5d1d;

    --green:#1f6f46;
    --yellow:#876300;
    --red:#8d2929;
    --gray:#555;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    color:var(--text);
    background:
        radial-gradient(circle at top right, rgba(214,138,45,.12), transparent 30%),
        linear-gradient(120deg,var(--bg),var(--bg2));
}

/* ---------- LINKS ---------- */

a{
    color:#f0b35a;
    text-decoration:none;
}

a:hover{
    opacity:.9;
}

/* ---------- LAYOUT ---------- */

.container{
    max-width:1280px;
    margin:0 auto;
    padding:24px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:18px;
}

/* ---------- NAV ---------- */

.nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 24px;

    background:rgba(0,0,0,.35);

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

    backdrop-filter:blur(10px);

    position:sticky;
    top:0;
    z-index:100;
}

.brand{
    font-weight:900;
    letter-spacing:.6px;
    font-size:20px;
}

/* ---------- CARDS ---------- */

.card{
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));

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

    border-radius:18px;

    padding:20px;

    margin-bottom:18px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.card h1,
.card h2,
.card h3{
    margin-top:0;
}

/* ---------- FORMS ---------- */

input,
select,
textarea{
    width:100%;

    padding:12px 14px;

    border-radius:12px;

    border:1px solid #6b4a2e;

    background:#221811;

    color:#fff;

    transition:.15s ease;
}

input:focus,
select:focus,
textarea:focus{
    outline:none;

    border-color:var(--gold);

    box-shadow:0 0 0 3px rgba(214,138,45,.15);
}

textarea{
    min-height:110px;
    resize:vertical;
}

label{
    display:block;

    margin:12px 0 7px;

    color:#d6c2a4;

    font-size:14px;
}

/* ---------- BUTTONS ---------- */

button,
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    cursor:pointer;

    background:var(--gold);

    color:#1a1008;

    border:none;

    font-weight:800;

    padding:11px 16px;

    border-radius:12px;

    transition:.15s ease;
}

button:hover,
.btn:hover{
    transform:translateY(-1px);

    box-shadow:0 8px 18px rgba(214,138,45,.22);
}

.btn.secondary{
    background:#55402c;
    color:#fff;
}

/* ---------- ACTION BUTTONS ---------- */

.actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:18px;
}

/* ---------- TABLE ---------- */

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    text-align:left;

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

    padding:12px 10px;

    vertical-align:top;
}

th{
    color:#d6c2a4;
    font-size:13px;
    font-weight:700;
}

/* ---------- BADGES ---------- */

.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:5px 10px;

    border-radius:999px;

    font-size:12px;
    font-weight:800;
}

.ok{
    background:var(--green);
    color:#e9fff1;
}

.warning{
    background:var(--yellow);
    color:#fff5d1;
}

.danger{
    background:var(--red);
    color:#fff0f0;
}

.unknown{
    background:var(--gray);
    color:#eee;
}

/* ---------- STATES ---------- */

.error{
    color:#ffb3b3;
}

.success{
    color:#b7ffc9;
}

.small{
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
}

.row-muted{
    opacity:.72;
}

/* ---------- MAP ---------- */

.map-frame{
    width:100%;
    height:620px;

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

    border-radius:16px;

    background:#0f0c08;
}

/* ---------- NOTICE ---------- */

.notice{
    padding:14px 16px;

    border-radius:14px;

    background:rgba(214,138,45,.10);

    border:1px solid rgba(214,138,45,.25);

    margin-top:14px;
}

/* ---------- KPIs ---------- */

.score{
    font-size:24px;
    font-weight:900;
}

.kpi{
    font-size:30px;
    font-weight:900;
}

/* ---------- ROUTES ---------- */

.route-step{
    padding:14px;

    border-left:4px solid var(--gold);

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

    border-radius:12px;

    margin:12px 0;
}

/* ---------- FILTERS ---------- */

.filters{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(180px,1fr));

    gap:10px;

    align-items:end;
}

/* ---------- ENERGY INTEL ---------- */

.intel-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(180px,1fr));

    gap:14px;

    margin-top:18px;
}

.intel-box{
    background:
        linear-gradient(180deg,#121826,#0f1522);

    border:1px solid #2b3448;

    border-radius:16px;

    padding:16px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03);
}

.intel-label{
    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.5px;

    opacity:.7;

    margin-bottom:8px;
}

.intel-value{
    font-size:26px;
    font-weight:900;
}

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

@media (max-width: 720px){

    .container{
        padding:14px;
    }

    .nav{
        padding:14px;
        flex-direction:column;
        gap:10px;
        align-items:flex-start;
    }

    .actions{
        flex-direction:column;
    }

    .actions .btn{
        width:100%;
    }

    table{
        display:block;
        overflow-x:auto;
    }

    .intel-value{
        font-size:22px;
    }
}