:root {

    --bg:
        #080c10;

    --bg-soft:
        #0d1319;

    --panel:
        #111820;

    --panel-2:
        #151e27;

    --panel-hover:
        #19242e;

    --border:
        #25313c;

    --border-bright:
        #314252;

    --text:
        #f2f6f8;

    --muted:
        #83909b;

    --muted-2:
        #5e6a74;

    --cyan:
        #54d4ff;

    --blue:
        #6ba8ff;

    --green:
        #59d692;

    --yellow:
        #edcb6a;

    --orange:
        #f1a45e;

    --red:
        #ef7373;

    --purple:
        #ac91ff;

    --shadow:
        0 18px 60px
        rgba(0,0,0,.25);

    --radius:
        16px;
}


* {

    box-sizing:
        border-box;
}


html {

    background:
        var(--bg);

    color-scheme:
        dark;
}


body {

    margin:
        0;

    background:

        radial-gradient(
            circle at 20% -10%,
            rgba(84,212,255,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 100% 0%,
            rgba(172,145,255,.06),
            transparent 24%
        ),

        var(--bg);

    color:
        var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    min-height:
        100vh;
}


a {

    color:
        inherit;

    text-decoration:
        none;
}


.app-shell {

    max-width:
        1700px;

    margin:
        0 auto;

    min-height:
        100vh;
}


.topbar {

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        0 28px;

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

    background:
        rgba(8,12,16,.92);

    backdrop-filter:
        blur(15px);

    position:
        sticky;

    top:
        0;

    z-index:
        100;
}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-width:
        max-content;
}


.brand-mark {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(84,212,255,.45);

    border-radius:
        10px;

    color:
        var(--cyan);

    background:
        rgba(84,212,255,.06);

    font-weight:
        900;

    letter-spacing:
        .04em;

    box-shadow:
        inset 0 0 18px
        rgba(84,212,255,.04);
}


.brand-name {

    font-size:
        14px;

    letter-spacing:
        .14em;

    font-weight:
        900;
}


.brand-subtitle {

    color:
        var(--muted);

    font-size:
        10px;

    letter-spacing:
        .14em;

    margin-top:
        3px;
}


.main-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    overflow-x:
        auto;

    scrollbar-width:
        none;
}


.main-nav::-webkit-scrollbar {

    display:
        none;
}


.main-nav a {

    color:
        var(--muted);

    font-size:
        13px;

    font-weight:
        700;

    padding:
        11px 14px;

    border-radius:
        10px;

    white-space:
        nowrap;

    transition:
        .15s ease;
}


.main-nav a:hover {

    color:
        var(--text);

    background:
        var(--panel);
}


.main-nav a.active {

    color:
        var(--cyan);

    background:
        rgba(84,212,255,.08);

    border:
        1px solid rgba(84,212,255,.14);
}


.page {

    padding:
        32px 28px 50px;
}


.page-heading {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        28px;
}


.eyebrow {

    color:
        var(--cyan);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .17em;

    margin-bottom:
        8px;
}


.page-heading h1 {

    margin:
        0;

    font-size:
        clamp(
            30px,
            4vw,
            50px
        );

    line-height:
        1;

    letter-spacing:
        -.035em;
}


.page-heading p {

    max-width:
        720px;

    margin:
        12px 0 0;

    color:
        var(--muted);

    line-height:
        1.6;
}


.system-status {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .10em;

    background:
        var(--panel);

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

    padding:
        10px 13px;

    border-radius:
        999px;
}


.status-dot {

    display:
        block;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 10px
        rgba(89,214,146,.55);
}


.dashboard-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            12,
            minmax(0,1fr)
        );

    gap:
        16px;
}


.card {

    background:
        linear-gradient(
            160deg,
            var(--panel-2),
            var(--panel)
        );

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

    border-radius:
        var(--radius);

    padding:
        20px;

    box-shadow:
        var(--shadow);

    position:
        relative;

    overflow:
        hidden;
}


.card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.10),
            transparent
        );
}


.card.stat {

    grid-column:
        span 3;

    min-height:
        155px;
}


.card.wide {

    grid-column:
        span 6;
}


.card.full {

    grid-column:
        1 / -1;
}


.card-label {

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.card-value {

    margin-top:
        13px;

    font-size:
        clamp(
            28px,
            3vw,
            42px
        );

    line-height:
        1;

    font-weight:
        850;

    letter-spacing:
        -.035em;
}


.card-value.cyan {

    color:
        var(--cyan);
}


.card-value.green {

    color:
        var(--green);
}


.card-value.yellow {

    color:
        var(--yellow);
}


.card-value.blue {

    color:
        var(--blue);
}


.card-value.purple {

    color:
        var(--purple);
}


.card-sub {

    color:
        var(--muted);

    font-size:
        12px;

    margin-top:
        12px;

    line-height:
        1.45;
}


.card-icon {

    position:
        absolute;

    right:
        17px;

    top:
        17px;

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        10px;

    color:
        var(--muted);

    font-size:
        14px;
}


.section {

    margin-top:
        28px;
}


.section-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    margin-bottom:
        13px;
}


.section-heading h2 {

    margin:
        0;

    font-size:
        18px;

    letter-spacing:
        -.02em;
}


.section-heading span {

    color:
        var(--muted);

    font-size:
        12px;
}


.energy-balance {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        12px;

    margin-top:
        18px;
}


.energy-balance-item {

    background:
        var(--bg-soft);

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

    border-radius:
        12px;

    padding:
        14px;
}


.energy-balance-item strong {

    display:
        block;

    font-size:
        21px;

    margin-bottom:
        5px;
}


.energy-balance-item span {

    color:
        var(--muted);

    font-size:
        11px;
}


.progress {

    height:
        7px;

    margin-top:
        16px;

    background:
        #090e13;

    border:
        1px solid #1a252e;

    border-radius:
        999px;

    overflow:
        hidden;
}


.progress > div {

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--blue)
        );

    border-radius:
        inherit;
}


.table-wrap {

    overflow-x:
        auto;

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

    border-radius:
        var(--radius);
}


table {

    width:
        100%;

    border-collapse:
        collapse;

    background:
        var(--panel);
}


th,
td {

    text-align:
        left;

    padding:
        13px 15px;

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

    white-space:
        nowrap;
}


th {

    color:
        var(--muted);

    font-size:
        10px;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

    font-weight:
        900;
}


td {

    font-size:
        13px;
}


tbody tr:hover {

    background:
        rgba(255,255,255,.018);
}


tbody tr:last-child td {

    border-bottom:
        0;
}


.text-green {

    color:
        var(--green);
}


.text-yellow {

    color:
        var(--yellow);
}


.text-red {

    color:
        var(--red);
}


.text-cyan {

    color:
        var(--cyan);
}


.empty-state {

    color:
        var(--muted);

    padding:
        25px;

    text-align:
        center;

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

    border-radius:
        var(--radius);
}


.footer {

    padding:
        20px 28px 35px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        var(--muted-2);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


@media (
    max-width: 1100px
) {

    .card.stat {

        grid-column:
            span 6;
    }

}


@media (
    max-width: 760px
) {

    .topbar {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            16px;

        gap:
            13px;
    }


    .main-nav {

        width:
            100%;
    }


    .page {

        padding:
            24px 16px 40px;
    }


    .page-heading {

        flex-direction:
            column;
    }


    .card.stat,
    .card.wide {

        grid-column:
            1 / -1;
    }


    .energy-balance {

        grid-template-columns:
            1fr;
    }


    .footer {

        flex-direction:
            column;

        padding-left:
            16px;

        padding-right:
            16px;
    }

}