/*
KING File Context
File / فایل: /srv/king/platform/panel-preview/assets/css/king-panel.css
Project / پروژه: KING City Gen1 — KING Panel Preview
Purpose / هدف: Visual system and responsive spatial presentation for KING Panel Preview
State / وضعیت: CURRENT
Generation / نسل: Gen1 / SECURE-CONNECTIVITY-WORKSPACE
Last Meaningful Change / آخرین تغییر: KING-G1-PANEL-SECURE-CONNECTIVITY-WORKSPACE-0001
Change ID / شناسه تغییر: KING-G1-PANEL-SECURE-CONNECTIVITY-WORKSPACE-0001
Dependencies / وابستگی: Preview HTML shell + governed City Read presentation
Boundary / مرز: Presentation only; no backend semantics, authority or Engine ownership
Manifest Ref / مرجع: /srv/king/manifests/KING-G1-PANEL-SECURE-CONNECTIVITY-WORKSPACE-0001.md
Verification / راستی‌آزمایی: PASS — Secure Connectivity Workspace visually verified
Next Step / قدم بعدی: Operator visual verification of live Connectivity Workspace
*/

:root {
    --bg:#020912;
    --sidebar:#020a12;
    --glass:rgba(4,20,32,.78);
    --glass-bright:rgba(8,31,47,.78);

    --gold:#f0bd56;
    --gold-soft:#ffe199;

    --cyan:#31dfff;
    --blue:#3a9cff;
    --green:#49efad;
    --amber:#ffc153;
    --rose:#ff5c82;
    --violet:#ac76ff;

    --text:#eef7ff;
    --muted:#8da0ad;

    --line:rgba(92,161,202,.26);
}

* {
    box-sizing:border-box;
}

html,
body {
    margin:0;
    min-height:100%;
}

body {
    color:var(--text);
    background:#020912;
    font-family:Arial,Helvetica,sans-serif;
}

a {
    text-decoration:none;
}

button {
    font:inherit;
}

.king-shell {
    min-height:100vh;
    display:grid;
    grid-template-columns:205px minmax(0,1fr);
}


/* SIDEBAR */

.sidebar {
    position:sticky;
    top:0;
    height:100vh;

    display:flex;
    flex-direction:column;

    padding:18px 13px 12px;

    background:
        linear-gradient(
            180deg,
            rgba(1,9,16,.985),
            rgba(2,13,22,.97)
        );

    border-right:1px solid rgba(239,188,83,.26);

    box-shadow:
        16px 0 45px rgba(0,0,0,.32);

    z-index:20;
}

.brand {
    text-align:center;
}

.brand-crown {
    color:var(--gold);
    font-size:35px;

    text-shadow:
        0 0 11px rgba(240,189,86,.55);
}

.brand-king {
    color:var(--gold-soft);

    font:
        30px/1 "Times New Roman",
        serif;

    letter-spacing:6px;
}

.brand-panel {
    color:var(--gold);

    margin-top:4px;

    font:
        10px "Times New Roman",
        serif;

    letter-spacing:4px;
}

.brand-platform {
    color:#98a9b4;

    margin-top:13px;

    font-size:7px;
    line-height:1.55;
    letter-spacing:.9px;
}

.primary-nav {
    display:grid;
    gap:6px;

    margin-top:19px;
}

.nav-item {
    min-height:45px;

    display:grid;
    grid-template-columns:31px 1fr auto;

    align-items:center;

    position:relative;

    padding:0 10px;

    border:1px solid transparent;
    border-radius:10px;

    color:#becbd4;

    transition:.2s ease;
}

.nav-icon {
    color:var(--gold);

    text-align:center;

    font-size:18px;
}

.nav-label {
    font:
        13px "Times New Roman",
        serif;
}

.nav-item small {
    color:#5d7180;

    font-size:6px;
    letter-spacing:.5px;
}

.nav-item:hover {
    background:rgba(255,255,255,.025);
}

.nav-item.active {
    color:#fff4d5;

    border-color:rgba(239,188,83,.58);

    background:
        radial-gradient(
            ellipse at left center,
            rgba(245,195,85,.28),
            transparent 60%
        ),
        rgba(220,165,60,.07);

    box-shadow:
        inset 0 0 18px rgba(240,189,86,.08),
        0 0 18px rgba(240,189,86,.15);
}

.active-lamp {
    position:absolute;

    left:-3px;

    width:5px;
    height:31px;

    border-radius:99px;

    background:#ffd86f;

    box-shadow:
        0 0 5px #ffd86f,
        0 0 13px #ffd86f,
        0 0 29px rgba(255,216,111,.58);
}

.sidebar-motto {
    margin:auto 16px 18px;

    padding-top:17px;

    border-top:1px solid rgba(240,189,86,.20);

    display:flex;
    flex-direction:column;

    color:#ca9c4b;

    font:
        12px "Times New Roman",
        serif;
}

.administrator {
    display:flex;
    align-items:center;
    gap:9px;

    padding-top:12px;

    border-top:1px solid rgba(240,189,86,.13);
}

.admin-avatar {
    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#efd18e;

    border:1px solid rgba(240,189,86,.34);

    background:#092033;
}

.admin-copy {
    flex:1;

    display:flex;
    flex-direction:column;
}

.admin-copy strong {
    font-size:10px;
    letter-spacing:1px;
}

.admin-copy small {
    color:#718794;

    margin-top:3px;

    font-size:7px;
}

.admin-online {
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 10px var(--green);
}


/* MAIN ENVIRONMENT */

.main {
    min-width:0;

    background:
        linear-gradient(
            rgba(1,8,14,.32),
            rgba(1,8,14,.54)
        ),
        url('/assets/img/king-city-gateway.png')
        center top / cover
        fixed
        no-repeat;
}


/* TOPBAR */

.topbar {
    height:63px;

    padding:0 22px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    background:
        rgba(2,11,19,.88);

    backdrop-filter:
        blur(16px);

    border-bottom:
        1px solid rgba(240,189,86,.30);
}

.top-actions {
    display:flex;
    align-items:center;
    gap:7px;
}

.top-actions button {
    width:29px;
    height:29px;

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

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

    color:#e8edf1;
}

.top-actions strong {
    margin-left:5px;

    font:
        11px "Times New Roman",
        serif;
}

.welcome {
    display:flex;
    align-items:center;
    gap:10px;
}

.welcome-crown {
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:var(--gold);

    border:
        1px solid rgba(240,189,86,.18);

    background:
        rgba(240,189,86,.06);
}

.welcome div:last-child {
    display:flex;
    flex-direction:column;
}

.welcome strong {
    font:
        13px "Times New Roman",
        serif;
}

.welcome small {
    margin-top:3px;

    color:#7e919e;

    font-size:7px;
}


/* HERO */

.hero {
    height:247px;

    position:relative;

    overflow:hidden;

    border-bottom:
        1px solid rgba(240,189,86,.17);

    background:
        url('/assets/img/king-city-gateway.png')
        center 39% / cover
        no-repeat;
}

.hero-shade {
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(1,7,13,.80),
            rgba(1,7,13,.21) 42%,
            rgba(1,7,13,.28) 68%,
            rgba(1,7,13,.67)
        ),
        linear-gradient(
            180deg,
            rgba(1,7,13,.08),
            rgba(1,7,13,.30)
        );
}

.hero-copy {
    position:absolute;

    z-index:2;

    left:25px;
    top:38px;
}

.eyebrow {
    color:var(--gold);

    font-size:7px;
    letter-spacing:1.4px;
}

.hero-copy h1 {
    margin:15px 0 8px;

    color:#f4f5f3;

    font:
        31px "Times New Roman",
        serif;
}

.hero-copy p {
    margin:0;

    font:
        12px "Times New Roman",
        serif;
}

.hero-quote {
    position:absolute;

    z-index:2;

    right:25px;
    top:39px;

    text-align:right;
}

.hero-quote strong {
    color:#efbd59;

    font:
        11px/1.55 "Times New Roman",
        serif;

    font-weight:400;
}

.hero-quote span {
    display:block;

    margin-top:15px;

    color:#e7b154;

    font:
        italic 17px "Times New Roman",
        serif;
}


/* STATUS */

.status-grid {
    margin:-1px 10px 0;

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

    gap:8px;
}

.status-card {
    min-height:120px;

    padding:13px 12px;

    border-radius:8px;

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(7,27,42,.82),
            rgba(3,14,24,.84)
        );

    border:1px solid currentColor;

    backdrop-filter:
        blur(16px)
        saturate(130%);

    box-shadow:
        0 14px 35px rgba(0,0,0,.39);

    transition:.2s ease;
}

.status-card:hover {
    transform:
        translateY(-4px)
        scale(1.008);

    box-shadow:
        0 20px 46px rgba(0,0,0,.46),
        0 0 22px color-mix(in srgb,currentColor 15%,transparent);
}

.card-head {
    display:flex;
    align-items:center;
    gap:8px;
}

.card-icon {
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    border-radius:50%;

    border:1px solid currentColor;

    background:
        radial-gradient(
            circle,
            color-mix(in srgb,currentColor 18%,transparent),
            transparent 70%
        );

    box-shadow:
        inset 0 0 12px color-mix(in srgb,currentColor 13%,transparent),
        0 0 14px color-mix(in srgb,currentColor 12%,transparent);
}

.card-head strong {
    font:
        12px "Times New Roman",
        serif;
}

.card-value {
    margin-top:20px;

    font-size:11px;
    font-weight:700;
}

.card-detail {
    margin-top:5px;

    color:#9aabb6;

    font-size:7px;
}

.tone-gold {
    color:var(--gold);
}

.tone-rose {
    color:var(--rose);
}

.tone-violet {
    color:var(--violet);
}

.tone-amber {
    color:var(--amber);
}

.tone-blue {
    color:var(--blue);
}

.tone-green {
    color:var(--green);
}


/* ROOMS */

.dashboard-grid {
    margin:8px 10px 0;

    display:grid;

    grid-template-columns:
        .70fr
        1.05fr
        1.35fr;

    grid-template-areas:
        "sahel products citizens"
        "quick resources events";

    gap:8px;
}

.sahel-room {
    grid-area:sahel;
}

.products-room {
    grid-area:products;
}

.citizens-room {
    grid-area:citizens;
}

.quick-room {
    grid-area:quick;
}

.resources-room {
    grid-area:resources;
}

.events-room {
    grid-area:events;
}

.room {
    min-height:174px;

    overflow:hidden;

    border-radius:8px;

    background:
        linear-gradient(
            145deg,
            rgba(5,22,34,.79),
            rgba(3,14,23,.84)
        );

    border:
        1px solid rgba(72,139,177,.27);

    backdrop-filter:
        blur(18px)
        saturate(130%);

    box-shadow:
        0 15px 39px rgba(0,0,0,.42);

    transition:.2s ease;
}

.room:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(89,177,225,.38);

    box-shadow:
        0 20px 45px rgba(0,0,0,.46),
        0 0 23px rgba(41,167,226,.05);
}

.room > header {
    height:35px;

    padding:0 10px;

    display:flex;
    align-items:center;

    border-bottom:
        1px solid rgba(240,189,86,.12);

    background:
        rgba(1,9,16,.25);
}

.room > header strong {
    font:
        11px "Times New Roman",
        serif;
}

.room > header small {
    margin-left:auto;

    color:#597180;

    font-size:6px;
    letter-spacing:.6px;
}


/* SAHEL */

.sahel-content {
    min-height:139px;

    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:center;
}

.sahel-visual {
    position:relative;

    display:grid;
    place-items:center;
}

.sahel-aura {
    position:absolute;

    width:105px;
    height:105px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(48,119,255,.28),
            rgba(123,60,255,.10) 44%,
            transparent 70%
        );

    filter:blur(5px);
}

.sahel-placeholder {
    position:relative;

    width:74px;
    height:74px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#bcecff;

    border:
        1px solid rgba(104,95,255,.48);

    background:
        radial-gradient(
            circle at 35% 30%,
            #17496d,
            #080d1e 67%
        );

    box-shadow:
        0 0 28px rgba(80,75,255,.23);

    font:
        28px "Times New Roman",
        serif;
}

.sahel-state {
    display:flex;
    flex-direction:column;

    padding-right:10px;
}

.sahel-state strong {
    color:#9db1be;

    font-size:8px;
    line-height:1.5;
}

.sahel-state span {
    margin-top:6px;

    color:#665779;

    font-size:5px;
}


/* CITIZENS */

.citizens {
    min-height:139px;

    padding:15px 8px 9px;

    display:grid;

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

    gap:7px;
}

.citizen {
    display:flex;
    flex-direction:column;

    align-items:center;

    text-align:center;
}

.citizen-platform {
    width:58px;
    height:51px;

    position:relative;

    display:grid;
    place-items:start center;
}

.citizen-platform::after {
    content:"";

    position:absolute;

    bottom:1px;

    width:52px;
    height:16px;

    border-radius:50%;

    background:
        linear-gradient(
            rgba(20,102,126,.64),
            rgba(2,17,27,.84)
        );

    border:
        1px solid rgba(43,217,244,.26);
}

.citizen-orb {
    position:relative;

    z-index:2;

    width:39px;
    height:39px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#32dff9;

    border:
        1px solid rgba(50,223,249,.42);

    background:
        radial-gradient(
            circle at 35% 25%,
            #174b61,
            #06141f 68%
        );

    box-shadow:
        0 0 16px rgba(50,223,249,.14);
}

.citizen strong {
    margin-top:4px;

    font-size:7px;
}

.citizen small {
    margin-top:2px;

    color:#7b909d;

    font-size:5px;
}

.citizen em {
    margin-top:3px;

    color:#526875;

    font-size:4px;

    font-style:normal;
}


/* PRODUCTS */

.product-list {
    padding:5px 9px;
}

.product-row {
    min-height:31px;

    display:grid;
    grid-template-columns:20px 1fr auto;

    align-items:center;

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

.product-row > span {
    color:#29dcfa;
}

.product-row strong {
    font-size:7px;
}

.product-row small {
    color:#607684;

    font-size:5px;
}


/* QUICK */

.quick-grid {
    padding:9px;

    display:grid;

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

    gap:6px;
}

.quick-grid button {
    min-height:28px;

    border-radius:5px;

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

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

    color:#70838f;

    font-size:6px;
}


/* RESOURCES */

.gauges {
    min-height:139px;

    display:grid;

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

    place-items:center;
}

.gauge {
    width:57px;
    height:57px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:
        2px solid rgba(42,216,243,.18);

    background:
        radial-gradient(
            circle,
            rgba(15,72,92,.17),
            transparent 72%
        );
}

.gauge span {
    color:#7c929f;

    font-size:5px;
}

.gauge strong {
    margin-top:4px;

    color:#a2b3bc;

    font-size:13px;
}


/* EVENTS */

.empty-state {
    min-height:139px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;
}

.empty-state strong {
    color:#9eafb9;

    font-size:7px;
}

.empty-state span {
    margin-top:4px;

    color:#627784;

    font-size:5px;
}


/* FOOTER */

.footer {
    min-height:36px;

    margin:0 10px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    border-top:
        1px solid rgba(240,189,86,.10);

    color:#657b88;

    font-size:5px;
}


/* TOAST */

.toast {
    position:fixed;

    right:18px;
    bottom:18px;

    z-index:100;

    min-width:270px;

    padding:11px 13px;

    border-radius:8px;

    border:
        1px solid rgba(240,189,86,.38);

    background:
        rgba(3,14,23,.97);

    box-shadow:
        0 20px 45px rgba(0,0,0,.55);

    transform:
        translateY(18px);

    opacity:0;
    pointer-events:none;

    transition:.2s ease;
}

.toast.show {
    transform:none;
    opacity:1;
}

.toast strong {
    display:block;

    font-size:8px;
}

.toast small {
    display:block;

    margin-top:5px;

    color:#718694;

    font-size:5px;
}


/* RESPONSIVE */

@media (max-width:1200px) {

    .status-grid {
        grid-template-columns:
            repeat(3,1fr);
    }

    .dashboard-grid {
        grid-template-columns:
            1fr 1fr;

        grid-template-areas:
            "citizens citizens"
            "products sahel"
            "events events"
            "resources quick";
    }
}

@media (max-width:780px) {

    .king-shell {
        grid-template-columns:
            70px minmax(0,1fr);
    }

    .brand-king,
    .brand-panel,
    .brand-platform,
    .nav-label,
    .nav-item small,
    .sidebar-motto,
    .admin-copy {
        display:none;
    }

    .nav-item {
        grid-template-columns:1fr;

        justify-items:center;

        padding:0;
    }

    .hero-quote {
        display:none;
    }

    .status-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .dashboard-grid {
        grid-template-columns:1fr;

        grid-template-areas:
            "citizens"
            "products"
            "sahel"
            "events"
            "resources"
            "quick";
    }

    .citizens {
        grid-template-columns:
            repeat(3,1fr);
    }
}

@media (max-width:520px) {

    .top-actions strong {
        display:none;
    }

    .welcome small {
        display:none;
    }

    .hero {
        height:215px;
    }

    .status-grid {
        grid-template-columns:1fr;
    }

    .citizens {
        grid-template-columns:
            repeat(2,1fr);
    }

    .gauges {
        grid-template-columns:
            repeat(2,1fr);

        gap:15px;

        padding:15px;
    }
}


/* =============================================================================
   KING PANEL BUILD 05
   FIDELITY / SCALE / RESPONSIVE PASS
   ============================================================================= */


/* --------------------------------------------------------------------------
   GLOBAL SCALE
   -------------------------------------------------------------------------- */

html {
    font-size:16px;
}

html,
body {
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

body {
    min-width:0;
}

.king-shell {
    width:100%;
    min-width:0;

    grid-template-columns:
        230px
        minmax(0,1fr);
}

.main {
    min-width:0;
    width:100%;
    overflow:hidden;
}


/* --------------------------------------------------------------------------
   SIDEBAR — reference-scale
   -------------------------------------------------------------------------- */

.sidebar {
    width:230px;

    padding:
        22px
        14px
        14px;
}

.brand-crown {
    font-size:42px;
}

.brand-king {
    font-size:36px;
}

.brand-panel {
    font-size:12px;
}

.brand-platform {
    font-size:9px;
}

.primary-nav {
    gap:7px;
}

.nav-item {
    min-height:54px;

    grid-template-columns:
        38px
        minmax(0,1fr)
        auto;

    padding:
        0
        12px;
}

.nav-icon {
    font-size:22px;
}

.nav-label {
    font-size:15px;
}

.nav-item small {
    font-size:8px;
}

.sidebar-motto {
    font-size:14px;
}

.admin-avatar {
    width:38px;
    height:38px;
}

.admin-copy strong {
    font-size:12px;
}

.admin-copy small {
    font-size:9px;
}


/* --------------------------------------------------------------------------
   TOP BAR
   -------------------------------------------------------------------------- */

.topbar {
    min-height:78px;
    height:auto;

    padding:
        12px
        24px;
}

.top-actions button {
    width:36px;
    height:36px;
}

.top-actions strong {
    font-size:13px;
}

.welcome-crown {
    width:42px;
    height:42px;
}

.welcome strong {
    font-size:16px;
}

.welcome small {
    font-size:10px;
}


/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
    height:310px;

    background-position:
        center
        38%;
}

.hero-copy {
    left:30px;
    top:46px;
}

.eyebrow {
    font-size:10px;
}

.hero-copy h1 {
    margin:
        16px
        0
        9px;

    font-size:
        clamp(
            34px,
            2.4vw,
            48px
        );
}

.hero-copy p {
    font-size:
        clamp(
            14px,
            1.05vw,
            18px
        );
}

.hero-quote {
    right:30px;
    top:48px;
}

.hero-quote strong {
    font-size:
        clamp(
            13px,
            .9vw,
            16px
        );
}

.hero-quote span {
    font-size:22px;
}


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

.status-grid {
    margin:
        -1px
        14px
        0;

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

    gap:11px;
}

.status-card {
    min-height:155px;

    padding:
        17px
        15px;
}

.card-icon {
    width:44px;
    height:44px;

    font-size:17px;
}

.card-head strong {
    font-size:15px;
}

.card-value {
    margin-top:25px;

    font-size:14px;
}

.card-detail {
    margin-top:7px;

    font-size:10px;

    line-height:1.35;
}


/* --------------------------------------------------------------------------
   DASHBOARD GRID
   -------------------------------------------------------------------------- */

.dashboard-grid {
    margin:
        11px
        14px
        0;

    grid-template-columns:
        .72fr
        1.05fr
        1.34fr;

    gap:11px;
}

.room {
    min-height:220px;
}

.room > header {
    height:44px;

    padding:
        0
        13px;
}

.room > header strong {
    font-size:14px;
}

.room > header small {
    font-size:8px;
}


/* --------------------------------------------------------------------------
   SAHEL
   -------------------------------------------------------------------------- */

.sahel-content {
    min-height:176px;
}

.sahel-aura {
    width:125px;
    height:125px;
}

.sahel-placeholder {
    width:92px;
    height:92px;

    font-size:34px;
}

.sahel-state strong {
    font-size:11px;
}

.sahel-state span {
    font-size:7px;
}


/* --------------------------------------------------------------------------
   CITIZENS
   -------------------------------------------------------------------------- */

.citizens {
    min-height:176px;

    padding:
        20px
        10px
        12px;

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

.citizen-platform {
    width:72px;
    height:63px;
}

.citizen-platform::after {
    width:64px;
    height:20px;
}

.citizen-orb {
    width:48px;
    height:48px;

    font-size:17px;
}

.citizen strong {
    margin-top:7px;

    font-size:10px;
}

.citizen small {
    font-size:8px;
}

.citizen em {
    font-size:6px;
}


/* --------------------------------------------------------------------------
   PRODUCTS
   -------------------------------------------------------------------------- */

.product-list {
    padding:
        7px
        12px;
}

.product-row {
    min-height:39px;

    grid-template-columns:
        28px
        minmax(0,1fr)
        auto;
}

.product-row > span {
    font-size:14px;
}

.product-row strong {
    font-size:10px;
}

.product-row small {
    font-size:7px;
}


/* --------------------------------------------------------------------------
   QUICK ACCESS
   -------------------------------------------------------------------------- */

.quick-grid {
    padding:12px;

    gap:8px;
}

.quick-grid button {
    min-height:36px;

    font-size:9px;
}


/* --------------------------------------------------------------------------
   RESOURCES
   -------------------------------------------------------------------------- */

.gauges {
    min-height:176px;
}

.gauge {
    width:74px;
    height:74px;
}

.gauge span {
    font-size:8px;
}

.gauge strong {
    font-size:17px;
}


/* --------------------------------------------------------------------------
   EVENTS
   -------------------------------------------------------------------------- */

.empty-state {
    min-height:176px;
}

.empty-state strong {
    font-size:10px;
}

.empty-state span {
    font-size:8px;
}


/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer {
    min-height:48px;

    margin:
        0
        14px;

    font-size:8px;
}


/* =============================================================================
   ULTRAWIDE
   ============================================================================= */

@media (min-width:1800px) {

    .king-shell {
        grid-template-columns:
            240px
            minmax(0,1fr);
    }

    .sidebar {
        width:240px;
    }

    .hero {
        height:330px;
    }

    .status-card {
        min-height:160px;
    }

    .room {
        min-height:230px;
    }
}


/* =============================================================================
   TABLET / SMALL DESKTOP
   ============================================================================= */

@media (max-width:1300px) {

    .status-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

    .dashboard-grid {
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        grid-template-areas:
            "citizens citizens"
            "products sahel"
            "events events"
            "resources quick";
    }
}


/* =============================================================================
   MOBILE NAVIGATION
   ============================================================================= */

@media (max-width:780px) {

    .king-shell {
        grid-template-columns:
            72px
            minmax(0,1fr);
    }

    .sidebar {
        width:72px;

        padding:
            14px
            7px;
    }

    .brand-crown {
        font-size:31px;
    }

    .brand-king,
    .brand-panel,
    .brand-platform,
    .nav-label,
    .nav-item small,
    .sidebar-motto,
    .admin-copy {
        display:none;
    }

    .primary-nav {
        margin-top:16px;
    }

    .nav-item {
        min-height:51px;

        display:grid;
        grid-template-columns:1fr;

        place-items:center;

        padding:0;
    }

    .nav-icon {
        font-size:20px;
    }

    .active-lamp {
        left:-3px;
    }

    .administrator {
        justify-content:center;
    }

    .admin-avatar {
        width:35px;
        height:35px;
    }


    /* MAIN */

    .main {
        width:100%;
        max-width:100%;
    }

    .topbar {
        min-height:62px;

        padding:
            8px
            10px;
    }

    .top-actions {
        gap:5px;
    }

    .top-actions button {
        width:32px;
        height:32px;
    }

    .top-actions strong {
        display:none;
    }

    .welcome-crown {
        width:34px;
        height:34px;
    }

    .welcome strong {
        font-size:12px;
    }

    .welcome small {
        display:none;
    }


    /* HERO */

    .hero {
        height:215px;

        background-position:
            center
            center;
    }

    .hero-copy {
        left:16px;
        top:42px;
    }

    .hero-copy h1 {
        font-size:29px;
    }

    .hero-copy p {
        max-width:280px;

        font-size:12px;
        line-height:1.4;
    }

    .hero-quote {
        display:none;
    }


    /* CARDS */

    .status-grid {
        margin:
            0
            8px;

        grid-template-columns:
            1fr;

        gap:8px;
    }

    .status-card {
        min-height:122px;

        padding:
            14px;
    }

    .card-value {
        margin-top:17px;
    }


    /* ROOMS */

    .dashboard-grid {
        width:auto;

        margin:
            8px
            8px
            0;

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

        grid-template-areas:
            "citizens"
            "products"
            "sahel"
            "events"
            "resources"
            "quick";
    }

    .room {
        width:100%;
        min-width:0;
    }

    .citizens {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            18px
            10px;

        padding-bottom:20px;
    }

    .gauges {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:18px;

        padding:18px;
    }

    .sahel-content {
        grid-template-columns:
            1fr;

        padding:
            15px
            10px;
    }

    .sahel-state {
        padding:0;

        text-align:center;
    }

    .product-row {
        min-width:0;
    }

    .product-row strong {
        overflow:hidden;

        text-overflow:ellipsis;

        white-space:nowrap;
    }

    .footer {
        flex-wrap:wrap;

        gap:
            8px
            15px;

        padding:
            10px
            0;
    }
}


/* =============================================================================
   VERY SMALL MOBILE
   ============================================================================= */

@media (max-width:420px) {

    .king-shell {
        grid-template-columns:
            64px
            minmax(0,1fr);
    }

    .sidebar {
        width:64px;
    }

    .hero {
        height:195px;
    }

    .hero-copy h1 {
        font-size:25px;
    }

    .hero-copy p {
        max-width:220px;

        font-size:11px;
    }

    .status-grid,
    .dashboard-grid {
        margin-left:6px;
        margin-right:6px;
    }
}


/* =============================================================================
   KING PANEL BUILD 06
   FINAL RESPONSIVE FIDELITY PASS
   ============================================================================= */


/* --------------------------------------------------------------------------
   GLASS LUMINANCE
   Slightly brighter than Build 05 while remaining Dark Luxury.
   -------------------------------------------------------------------------- */

.status-card {
    background:
        linear-gradient(
            145deg,
            rgba(10,35,52,.86),
            rgba(4,18,29,.88)
        );
}

.room {
    background:
        linear-gradient(
            145deg,
            rgba(8,30,45,.83),
            rgba(3,17,28,.87)
        );

    border-color:
        rgba(83,153,192,.31);
}

.quick-grid button {
    background:
        rgba(15,38,53,.54);

    color:#91a5b1;
}


/* --------------------------------------------------------------------------
   HERO COPY PROTECTION
   -------------------------------------------------------------------------- */

.hero-copy::before {
    content:"";

    position:absolute;
    z-index:-1;

    inset:-22px -34px;

    background:
        radial-gradient(
            ellipse at left center,
            rgba(1,8,14,.72),
            rgba(1,8,14,.34) 52%,
            transparent 77%
        );

    filter:blur(4px);

    pointer-events:none;
}


/* --------------------------------------------------------------------------
   ULTRAWIDE
   -------------------------------------------------------------------------- */

@media (min-width:1800px) {

    .king-shell {
        grid-template-columns:
            250px
            minmax(0,1fr);
    }

    .sidebar {
        width:250px;
    }

    .nav-label {
        font-size:16px;
    }

    .hero {
        height:345px;
    }

    .hero-copy {
        left:34px;
        top:52px;
    }

    .hero-copy h1 {
        font-size:48px;
    }

    .status-card {
        min-height:166px;
    }

    .card-head strong {
        font-size:16px;
    }

    .card-value {
        font-size:15px;
    }

    .card-detail {
        font-size:10px;
    }

    .room {
        min-height:238px;
    }

    .citizen strong {
        font-size:10px;
    }

}


/* --------------------------------------------------------------------------
   COMPACT MUNICIPAL NAVIGATION
   Trigger earlier than phone size.
   -------------------------------------------------------------------------- */

@media (max-width:1050px) {

    .king-shell {
        grid-template-columns:
            74px
            minmax(0,1fr);
    }

    .sidebar {
        width:74px;

        padding:
            15px
            8px;
    }

    .brand-crown {
        font-size:33px;
    }

    .brand-king,
    .brand-panel,
    .brand-platform,
    .nav-label,
    .nav-item small,
    .sidebar-motto,
    .admin-copy {
        display:none;
    }

    .primary-nav {
        margin-top:19px;
    }

    .nav-item {
        min-height:52px;

        display:grid;
        grid-template-columns:1fr;

        place-items:center;

        padding:0;
    }

    .nav-icon {
        font-size:21px;
    }

    .administrator {
        margin-top:auto;
        justify-content:center;
    }

    .admin-avatar {
        width:37px;
        height:37px;
    }

}


/* --------------------------------------------------------------------------
   TABLET CONTENT
   -------------------------------------------------------------------------- */

@media (max-width:1050px) and (min-width:781px) {

    .status-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

    .dashboard-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        grid-template-areas:
            "citizens citizens"
            "products sahel"
            "events events"
            "resources quick";
    }

}


/* --------------------------------------------------------------------------
   MOBILE HERO / OVERFLOW
   -------------------------------------------------------------------------- */

@media (max-width:780px) {

    html,
    body,
    .king-shell,
    .main {
        max-width:100%;
        overflow-x:hidden;
    }

    .hero {
        background-position:
            58%
            center;
    }

    .hero-shade {
        background:
            linear-gradient(
                90deg,
                rgba(1,7,13,.88) 0%,
                rgba(1,7,13,.57) 47%,
                rgba(1,7,13,.14) 80%
            );
    }

    .hero-copy::before {
        inset:
            -18px
            -22px;
    }

    .status-card,
    .room {
        max-width:100%;
    }

}


/* --------------------------------------------------------------------------
   VERY NARROW PHONE
   -------------------------------------------------------------------------- */

@media (max-width:430px) {

    .king-shell {
        grid-template-columns:
            62px
            minmax(0,1fr);
    }

    .sidebar {
        width:62px;
        padding-left:6px;
        padding-right:6px;
    }

    .hero-copy {
        left:14px;
    }

    .hero-copy h1 {
        font-size:24px;
    }

    .hero-copy p {
        max-width:205px;

        font-size:10px;
    }

}


.status-card[data-live-state="good"] {
    border-color:rgba(73,239,173,.46);
}

.status-card[data-live-state="info"] {
    border-color:rgba(49,223,255,.42);
}

.status-card[data-live-state="warning"] {
    border-color:rgba(255,193,83,.50);
}

.status-card[data-live-state="bad"] {
    border-color:rgba(255,92,130,.60);
}

.status-card[data-live-state="good"] .card-value {
    text-shadow:
        0 0 18px rgba(73,239,173,.26);
}

.status-card[data-live-state="bad"] .card-value {
    text-shadow:
        0 0 18px rgba(255,92,130,.28);
}

.live-citizen {
    min-width:0;
}

.live-citizen-copy {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.live-citizen-copy strong {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-transform:uppercase;
}

.live-citizen-copy small {
    color:var(--muted);
}

.live-citizen-copy em {
    font-style:normal;
    font-size:9px;
    letter-spacing:.8px;
}

.citizen-state-current {
    color:var(--green);
}

.citizen-state-unknown {
    color:var(--amber);
}

.city-read-unavailable {
    grid-column:1 / -1;

    min-height:116px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:8px;

    padding:18px;

    text-align:center;

    border:
        1px solid rgba(255,92,130,.34);

    background:
        rgba(255,92,130,.055);
}

.city-read-unavailable strong {
    color:var(--rose);
    letter-spacing:.7px;
}

.city-read-unavailable span {
    color:var(--muted);
    font-size:11px;
}

html[data-city-read="connected"]
.admin-online {
    box-shadow:
        0 0 12px rgba(73,239,173,.75);
}

html[data-city-read="unavailable"]
.admin-online {
    background:var(--rose);
    box-shadow:
        0 0 12px rgba(255,92,130,.72);
}


.citizens-room {
    min-width:0;
    overflow:hidden;
}

.citizens-room .citizens {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px 8px;

    align-items:start;

    padding:
        14px
        12px
        12px;
}

.citizens-room .live-citizen {
    min-width:0;

    display:flex;
    justify-content:center;

    padding:0;
}

.citizens-room .citizen-platform {
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:flex-start;

    gap:5px;

    text-align:center;
}

.citizens-room .citizen-platform::after {
    display:none;
}

.citizens-room .citizen-orb {
    flex:0 0 auto;

    width:46px;
    height:46px;

    margin:0 auto;
}

.citizens-room .live-citizen-copy {
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:2px;
}

.citizens-room .live-citizen-copy strong {
    width:100%;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:normal;

    overflow-wrap:anywhere;

    line-height:1.08;

    font-size:9px;

    min-height:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-transform:none;
}

.citizens-room .live-citizen-copy small {
    font-size:7px;
    line-height:1;
}

.citizens-room .live-citizen-copy em {
    font-size:7px;
    line-height:1;

    letter-spacing:.45px;
}

@media (max-width:1500px) {
    .citizens-room .citizens {
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media (max-width:1050px) {
    .citizens-room .citizens {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:720px) {
    .citizens-room .citizens {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* =============================================================================
   KING PANEL — SPATIAL COMMAND SHELL / GEN1
   Change: KING-G1-PANEL-SPATIAL-SHELL-0001

   WHY:
   This layer evolves the existing Preview into a scalable City Command Center
   without altering City Read semantics or introducing unavailable telemetry.

   Boundary:
   Presentation only. Locked workspaces are navigation intent, not authorization.
   ============================================================================= */


/* --------------------------------------------------------------------------
   CITY ENVIRONMENT
   -------------------------------------------------------------------------- */

body {
    background:
        radial-gradient(
            circle at 74% 12%,
            rgba(38,111,145,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 24% 78%,
            rgba(240,189,86,.045),
            transparent 34%
        ),
        #02070d;
}

.king-shell {
    background:#02070d;
}

.main {
    position:relative;

    background:
        linear-gradient(
            180deg,
            rgba(1,8,14,.30),
            rgba(1,8,14,.73)
        ),
        url('/assets/img/king-city-gateway.png')
        center top / cover fixed no-repeat;
}

.main::before {
    content:"";

    position:fixed;
    inset:0 0 0 230px;

    z-index:0;

    pointer-events:none;

    opacity:.26;

    background-image:
        linear-gradient(
            rgba(49,223,255,.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(49,223,255,.022) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 20%,
            #000 80%,
            transparent
        );
}

.main > * {
    position:relative;
    z-index:1;
}


/* --------------------------------------------------------------------------
   MUNICIPAL / CONTROL SIDEBAR
   -------------------------------------------------------------------------- */

.sidebar {
    width:244px;

    padding:
        20px
        13px
        13px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(240,189,86,.075),
            transparent 23%
        ),
        linear-gradient(
            180deg,
            rgba(1,8,14,.995),
            rgba(2,13,22,.985)
        );

    border-right:
        1px solid rgba(240,189,86,.32);

    box-shadow:
        18px 0 60px rgba(0,0,0,.47),
        inset -1px 0 0 rgba(255,255,255,.018);
}

.king-shell {
    grid-template-columns:
        244px
        minmax(0,1fr);
}

.brand {
    padding-bottom:17px;

    border-bottom:
        1px solid rgba(240,189,86,.15);
}

.brand-crown {
    font-size:39px;
}

.brand-king {
    font-size:33px;
    letter-spacing:7px;
}

.brand-platform {
    margin-top:10px;

    color:#718894;

    letter-spacing:1.25px;
}

.primary-nav {
    gap:4px;

    margin-top:14px;

    overflow-y:auto;
    overflow-x:hidden;

    scrollbar-width:none;
}

.primary-nav::-webkit-scrollbar {
    display:none;
}

.nav-item {
    min-height:43px;

    grid-template-columns:
        32px
        minmax(0,1fr)
        auto;

    padding:
        0
        9px;

    border-radius:7px;
}

.nav-icon {
    font-size:17px;
}

.nav-label {
    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:13px;

    letter-spacing:.2px;
}

.nav-item small {
    color:#546976;

    font-size:6px;

    letter-spacing:.75px;
}

.nav-item[data-locked="1"] {
    opacity:.72;
}

.nav-item[data-locked="1"]:hover {
    opacity:1;

    border-color:
        rgba(74,150,190,.17);

    background:
        rgba(24,67,91,.12);
}

.nav-item.active {
    opacity:1;

    background:
        linear-gradient(
            90deg,
            rgba(240,189,86,.19),
            rgba(240,189,86,.055) 62%,
            transparent
        );

    box-shadow:
        inset 0 0 26px rgba(240,189,86,.055),
        0 0 22px rgba(240,189,86,.07);
}

.sidebar-motto {
    margin:
        14px
        12px
        12px;

    font-size:11px;

    line-height:1.38;
}

.administrator {
    padding:
        11px
        3px
        0;
}


/* --------------------------------------------------------------------------
   COMMAND TOP BAR
   -------------------------------------------------------------------------- */

.topbar {
    min-height:66px;

    padding:
        9px
        24px;

    background:
        linear-gradient(
            90deg,
            rgba(2,10,17,.965),
            rgba(3,16,26,.91)
        );

    border-bottom:
        1px solid rgba(240,189,86,.22);

    box-shadow:
        0 12px 30px rgba(0,0,0,.22);
}

.top-actions strong {
    color:#d9e5eb;

    font-size:12px;

    letter-spacing:1.25px;
}

.top-actions strong::first-letter {
    color:var(--gold);
}


/* --------------------------------------------------------------------------
   CITY COMMAND HERO
   -------------------------------------------------------------------------- */

.command-hero {
    height:
        clamp(
            245px,
            23vw,
            355px
        );

    margin:
        14px
        14px
        0;

    overflow:hidden;

    border:
        1px solid rgba(240,189,86,.22);

    border-radius:
        12px
        12px
        7px
        7px;

    background-position:
        center
        39%;

    box-shadow:
        0 22px 58px rgba(0,0,0,.43),
        inset 0 0 60px rgba(6,22,31,.16);
}

.command-hero::after {
    content:"CITY COMMAND / LIVE GOVERNED VIEW";

    position:absolute;

    right:18px;
    bottom:14px;

    z-index:3;

    padding:
        7px
        10px;

    color:rgba(189,213,224,.70);

    border:
        1px solid rgba(49,223,255,.15);

    border-radius:5px;

    background:
        rgba(1,9,15,.61);

    backdrop-filter:
        blur(10px);

    font-size:7px;
    letter-spacing:1.15px;
}

.command-hero .hero-shade {
    background:
        linear-gradient(
            90deg,
            rgba(1,7,13,.92) 0%,
            rgba(1,7,13,.62) 32%,
            rgba(1,7,13,.16) 61%,
            rgba(1,7,13,.63) 100%
        ),
        linear-gradient(
            180deg,
            rgba(1,7,13,.09),
            rgba(1,7,13,.49)
        );
}

.hero-copy {
    left:
        clamp(
            24px,
            2.3vw,
            44px
        );

    top:
        clamp(
            42px,
            4vw,
            68px
        );
}

.hero-copy h1 {
    margin:
        15px
        0
        8px;

    max-width:680px;

    font-size:
        clamp(
            34px,
            3.2vw,
            58px
        );

    letter-spacing:
        clamp(
            1px,
            .13vw,
            3px
        );

    text-shadow:
        0 3px 24px rgba(0,0,0,.72);
}

.hero-copy p {
    max-width:660px;

    color:#c5d3da;

    font-size:
        clamp(
            12px,
            1vw,
            17px
        );

    letter-spacing:.35px;
}

.eyebrow {
    display:inline-flex;
    align-items:center;

    min-height:25px;

    padding:
        0
        9px;

    border:
        1px solid rgba(240,189,86,.25);

    border-radius:4px;

    background:
        rgba(3,15,23,.54);

    font-size:8px;

    letter-spacing:1.8px;
}

.hero-quote {
    right:
        clamp(
            24px,
            2.2vw,
            43px
        );

    top:
        clamp(
            42px,
            4vw,
            68px
        );

    max-width:430px;

    padding:
        14px
        16px;

    border-right:
        2px solid rgba(240,189,86,.42);

    background:
        linear-gradient(
            270deg,
            rgba(1,8,14,.62),
            transparent
        );
}

.hero-quote strong {
    font-size:
        clamp(
            10px,
            .82vw,
            14px
        );

    letter-spacing:.75px;
}

.hero-quote span {
    margin-top:10px;

    color:#8096a2;

    font-size:9px;
    font-style:normal;

    letter-spacing:.9px;
}


/* --------------------------------------------------------------------------
   OPERATIONAL STATUS DECK
   -------------------------------------------------------------------------- */

.status-grid {
    margin:
        11px
        14px
        0;

    gap:9px;
}

.status-card {
    min-height:138px;

    border-radius:8px;

    background:
        linear-gradient(
            145deg,
            rgba(7,27,42,.91),
            rgba(2,13,22,.93)
        );

    box-shadow:
        0 16px 38px rgba(0,0,0,.37),
        inset 0 1px rgba(255,255,255,.015);
}

.status-card::after {
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:2px;

    opacity:.28;

    background:currentColor;
}


/* --------------------------------------------------------------------------
   CITY ROOMS
   -------------------------------------------------------------------------- */

.dashboard-grid {
    margin:
        9px
        14px
        0;

    gap:9px;
}

.room {
    border-radius:8px;

    background:
        linear-gradient(
            145deg,
            rgba(6,25,39,.90),
            rgba(2,13,22,.93)
        );

    box-shadow:
        0 17px 42px rgba(0,0,0,.37),
        inset 0 1px rgba(255,255,255,.012);
}

.room > header {
    background:
        linear-gradient(
            90deg,
            rgba(240,189,86,.035),
            rgba(1,9,16,.22)
        );
}

.room > header strong {
    letter-spacing:.25px;
}


/* --------------------------------------------------------------------------
   ULTRAWIDE COMMAND CENTER
   -------------------------------------------------------------------------- */

@media (min-width:1800px) {

    .king-shell {
        grid-template-columns:
            260px
            minmax(0,1fr);
    }

    .sidebar {
        width:260px;
    }

    .main::before {
        inset-left:260px;
    }

    .command-hero {
        margin:
            16px
            17px
            0;

        height:
            clamp(
                300px,
                20vw,
                390px
            );
    }

    .status-grid,
    .dashboard-grid {
        margin-left:17px;
        margin-right:17px;
    }

    .status-grid {
        gap:11px;
    }

    .dashboard-grid {
        gap:11px;
    }
}


/* --------------------------------------------------------------------------
   COMPACT NAVIGATION
   -------------------------------------------------------------------------- */

@media (max-width:1050px) {

    .king-shell {
        grid-template-columns:
            74px
            minmax(0,1fr);
    }

    .sidebar {
        width:74px;
    }

    .main::before {
        inset-left:74px;
    }

    .command-hero {
        margin:
            8px
            8px
            0;
    }

    .command-hero::after {
        display:none;
    }
}


/* --------------------------------------------------------------------------
   MOBILE COMMAND
   -------------------------------------------------------------------------- */

@media (max-width:780px) {

    .command-hero {
        height:220px;

        border-radius:6px;
    }

    .hero-copy {
        left:17px;
        top:36px;
    }

    .hero-copy h1 {
        max-width:290px;

        font-size:27px;
    }

    .hero-copy p {
        max-width:280px;

        font-size:11px;
    }

    .eyebrow {
        min-height:21px;

        font-size:6px;
    }
}


/* =============================================================================
   KING PANEL — NAVY GLASS / GOLD LUXURY VISUAL LAYER
   Change: KING-G1-PANEL-VISUAL-THEME-0001

   WHY:
   Visual operator review showed the former page-wide city artwork created too
   much visual noise behind operational rooms. The city image is now confined
   to the Command Hero while the workspace uses a calm solid navy environment.

   Boundary:
   Presentation only. No City Read, Contract, authorization, Engine, listener,
   telemetry or runtime semantics are changed.
   ============================================================================= */


:root {
    --king-navy-0:#010812;
    --king-navy-1:#020d19;
    --king-navy-2:#041625;

    --king-glass:
        rgba(4,18,31,.72);

    --king-glass-deep:
        rgba(2,13,24,.84);

    --king-glass-soft:
        rgba(7,28,44,.58);

    --king-gold:#f0bd56;
    --king-gold-bright:#ffe3a0;

    --king-cyan:#32d8ff;

    --king-line:
        rgba(113,181,214,.18);

    --king-gold-line:
        rgba(240,189,86,.28);
}


/* --------------------------------------------------------------------------
   QUIET CITY CANVAS

   The page body is deliberately calm. Operational content must visually win
   over decoration. Hero artwork remains isolated to the Hero boundary.
   -------------------------------------------------------------------------- */

html,
body {
    background:
        var(--king-navy-0);
}

body {
    color:#dbe8ef;
}

.king-shell {
    background:
        var(--king-navy-0);
}

.main {
    background:
        #020c17 !important;
}

.main::before {
    display:none !important;
}


/* --------------------------------------------------------------------------
   COMMAND HERO — DEDICATED ARTWORK ONLY
   -------------------------------------------------------------------------- */

.command-hero {
    background:
        linear-gradient(
            90deg,
            rgba(1,7,13,.74) 0%,
            rgba(1,7,13,.18) 42%,
            rgba(1,7,13,.20) 68%,
            rgba(1,7,13,.68) 100%
        ),
        url('/assets/img/king-city-command-hero.png')
        center center / cover
        no-repeat !important;

    border:
        1px solid rgba(240,189,86,.36);

    box-shadow:
        0 18px 54px rgba(0,0,0,.48),
        0 0 30px rgba(240,189,86,.045),
        inset 0 0 55px rgba(0,0,0,.20);
}

.command-hero .hero-shade {
    background:
        linear-gradient(
            90deg,
            rgba(1,7,13,.44) 0%,
            rgba(1,7,13,.10) 38%,
            rgba(1,7,13,.08) 66%,
            rgba(1,7,13,.42) 100%
        ),
        linear-gradient(
            180deg,
            rgba(1,7,13,.02),
            rgba(1,7,13,.30)
        );
}


/* --------------------------------------------------------------------------
   GLASS MATERIAL — COMMON OPERATIONAL SURFACES
   -------------------------------------------------------------------------- */

.status-card,
.room {
    position:relative;

    overflow:hidden;

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

    background:
        linear-gradient(
            145deg,
            rgba(8,32,51,.68),
            rgba(2,13,24,.82)
        );

    -webkit-backdrop-filter:
        blur(18px)
        saturate(128%);

    backdrop-filter:
        blur(18px)
        saturate(128%);

    box-shadow:
        0 18px 46px rgba(0,0,0,.33),
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 -1px 0 rgba(49,216,255,.022);

    transition:
        border-color .20s ease,
        box-shadow .20s ease,
        transform .20s ease,
        background .20s ease;
}

.status-card::before,
.room::before {
    content:"";

    position:absolute;

    top:0;
    left:12%;

    width:76%;
    height:1px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,225,153,.36),
            transparent
        );

    opacity:.52;
}

.status-card:hover,
.room:hover {
    border-color:
        rgba(240,189,86,.34);

    background:
        linear-gradient(
            145deg,
            rgba(9,38,59,.74),
            rgba(3,16,28,.87)
        );

    box-shadow:
        0 22px 54px rgba(0,0,0,.39),
        0 0 23px rgba(240,189,86,.055),
        inset 0 1px 0 rgba(255,255,255,.045);

    transform:
        translateY(-1px);
}


/* --------------------------------------------------------------------------
   STATUS CARDS — LUXURY EDGE LIGHTING

   Existing semantic colors remain truthful, but gold/navy defines the common
   KING material rather than turning the interface into gaming neon.
   -------------------------------------------------------------------------- */

.status-card {
    border-color:
        rgba(240,189,86,.22);
}

.status-card::after {
    height:1px;

    opacity:.72;

    box-shadow:
        0 0 12px currentColor;
}

.status-card .card-head {
    border-bottom:
        1px solid rgba(255,255,255,.035);
}

.status-card .card-head strong {
    color:
        var(--king-gold-bright);
}


/* --------------------------------------------------------------------------
   ROOMS — NAVY GLASS WITH SUBTLE CYAN DEPTH
   -------------------------------------------------------------------------- */

.room {
    border-color:
        rgba(54,168,213,.24);
}

.room > header {
    position:relative;

    background:
        linear-gradient(
            90deg,
            rgba(240,189,86,.055),
            rgba(9,42,62,.18) 42%,
            rgba(2,13,24,.16)
        );

    border-bottom:
        1px solid rgba(79,181,220,.13);
}

.room > header::after {
    content:"";

    position:absolute;

    left:0;
    bottom:-1px;

    width:38%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(240,189,86,.62),
            rgba(49,216,255,.22),
            transparent
        );

    opacity:.42;
}

.room > header strong {
    color:#f2e4c3;

    text-shadow:
        0 0 14px rgba(240,189,86,.08);
}


/* --------------------------------------------------------------------------
   SIDEBAR — DARK NAVY MUNICIPAL MATERIAL
   -------------------------------------------------------------------------- */

.sidebar {
    background:
        linear-gradient(
            180deg,
            #020a13 0%,
            #03111d 48%,
            #020a13 100%
        );

    border-right:
        1px solid rgba(240,189,86,.30);

    box-shadow:
        14px 0 46px rgba(0,0,0,.42),
        inset -1px 0 rgba(49,216,255,.025);
}

.nav-item {
    border:
        1px solid transparent;
}

.nav-item.active {
    border-color:
        rgba(240,189,86,.56);

    background:
        linear-gradient(
            90deg,
            rgba(240,189,86,.17),
            rgba(5,27,42,.64) 62%,
            rgba(3,15,25,.35)
        );

    box-shadow:
        inset 3px 0 0 var(--king-gold),
        0 0 19px rgba(240,189,86,.08);
}

.nav-item.active .nav-icon,
.nav-item.active .nav-label {
    color:
        var(--king-gold-bright);
}


/* --------------------------------------------------------------------------
   TOPBAR — CONTROL DECK
   -------------------------------------------------------------------------- */

.topbar {
    background:
        rgba(2,13,23,.94);

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

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid rgba(240,189,86,.22);

    box-shadow:
        0 10px 32px rgba(0,0,0,.29);
}


/* --------------------------------------------------------------------------
   INTERIOR CONTROLS / QUICK ACCESS
   -------------------------------------------------------------------------- */

.quick-grid > *,
.quick-access a,
.quick-access button {
    border:
        1px solid rgba(77,166,204,.17);

    background:
        rgba(8,35,53,.49);

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

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.quick-grid > *:hover,
.quick-access a:hover,
.quick-access button:hover {
    border-color:
        rgba(240,189,86,.34);

    background:
        rgba(10,42,62,.61);

    box-shadow:
        0 0 15px rgba(240,189,86,.055);
}


/* --------------------------------------------------------------------------
   CITIZEN ORBS — CONTROLLED KING NEON
   -------------------------------------------------------------------------- */

.citizen-orb {
    border-color:
        rgba(240,189,86,.34);

    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(49,216,255,.20),
            rgba(3,29,45,.74) 54%,
            rgba(1,12,21,.92) 100%
        );

    box-shadow:
        0 0 16px rgba(49,216,255,.10),
        inset 0 0 15px rgba(49,216,255,.07);
}

.citizen-orb::after {
    border-color:
        rgba(240,189,86,.14);
}


/* --------------------------------------------------------------------------
   TYPOGRAPHIC FINISH
   -------------------------------------------------------------------------- */

.hero-copy h1,
.brand-king,
.room > header strong,
.status-card .card-head strong {
    text-rendering:
        geometricPrecision;
}

.hero-copy h1 {
    color:
        #f5e7c8;

    text-shadow:
        0 2px 24px rgba(0,0,0,.72),
        0 0 18px rgba(240,189,86,.07);
}

.eyebrow {
    color:
        var(--king-gold-bright);

    border-color:
        rgba(240,189,86,.34);

    background:
        rgba(2,13,23,.60);

    box-shadow:
        inset 0 0 15px rgba(240,189,86,.025);
}


/* --------------------------------------------------------------------------
   FOOTER / LOW PRIORITY SURFACES
   -------------------------------------------------------------------------- */

.footer,
footer {
    color:#647d8b;

    border-top:
        1px solid rgba(240,189,86,.075);

    background:
        rgba(2,12,21,.72);
}


/* =============================================================================
   KING PANEL — DEEP NAVY + NEON GLASS CORRECTION
   Change: KING-G1-PANEL-VISUAL-THEME-0002

   WHY:
   Operator visual evidence showed the previous theme remained visually too
   close to black and glass surfaces lacked sufficient luminous separation.

   This correction strengthens the navy environment and controlled neon edges
   while preserving KING gold as the luxury identity color.

   Boundary:
   Presentation only. No runtime/data/Contract/authorization semantics change.
   ============================================================================= */


/* --------------------------------------------------------------------------
   DEEP NAVY CITY CANVAS
   -------------------------------------------------------------------------- */

html,
body {
    background:
        #031426 !important;
}

body {
    background:
        radial-gradient(
            circle at 70% 14%,
            rgba(16,73,112,.17),
            transparent 34%
        ),
        radial-gradient(
            circle at 18% 76%,
            rgba(13,57,91,.16),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #04182b 0%,
            #031426 45%,
            #02101d 100%
        ) !important;
}

.king-shell {
    background:
        #031426 !important;
}

.main {
    background:
        linear-gradient(
            180deg,
            #04192d 0%,
            #031426 46%,
            #02111f 100%
        ) !important;
}


/* --------------------------------------------------------------------------
   HERO — CURRENT CLEAN ASSET
   -------------------------------------------------------------------------- */

.command-hero {
    background:
        linear-gradient(
            90deg,
            rgba(1,8,16,.47) 0%,
            rgba(1,8,16,.07) 39%,
            rgba(1,8,16,.06) 69%,
            rgba(1,8,16,.40) 100%
        ),
        url('/assets/img/king-city-command-hero.png')
        center center / cover
        no-repeat !important;

    border:
        1px solid rgba(255,204,92,.48) !important;

    box-shadow:
        0 22px 60px rgba(0,0,0,.46),
        0 0 20px rgba(240,189,86,.13),
        0 0 44px rgba(24,160,216,.06),
        inset 0 0 45px rgba(0,0,0,.13) !important;
}


/* --------------------------------------------------------------------------
   STRONG NAVY GLASS MATERIAL
   -------------------------------------------------------------------------- */

.status-card,
.room {
    background:
        linear-gradient(
            145deg,
            rgba(8,42,68,.72) 0%,
            rgba(4,25,44,.76) 46%,
            rgba(2,18,33,.83) 100%
        ) !important;

    border:
        1px solid rgba(48,201,255,.32) !important;

    -webkit-backdrop-filter:
        blur(22px)
        saturate(145%) !important;

    backdrop-filter:
        blur(22px)
        saturate(145%) !important;

    box-shadow:
        0 16px 40px rgba(0,0,0,.33),
        0 0 13px rgba(38,196,255,.12),
        0 0 30px rgba(38,196,255,.045),
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 0 24px rgba(20,117,168,.06) !important;
}


/* subtle luminous top edge */

.status-card::before,
.room::before {
    height:1px !important;

    opacity:1 !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(49,216,255,.28) 18%,
            rgba(255,216,126,.82) 50%,
            rgba(49,216,255,.28) 82%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 11px rgba(240,189,86,.30),
        0 0 17px rgba(49,216,255,.10) !important;
}


/* --------------------------------------------------------------------------
   STATUS CARDS — KING GOLD + SEMANTIC NEON
   -------------------------------------------------------------------------- */

.status-card {
    border-color:
        rgba(240,189,86,.38) !important;

    box-shadow:
        0 16px 40px rgba(0,0,0,.33),
        0 0 14px rgba(240,189,86,.12),
        0 0 30px rgba(49,216,255,.045),
        inset 0 1px 0 rgba(255,255,255,.065),
        inset 0 0 18px rgba(240,189,86,.025) !important;
}

.status-card:hover {
    border-color:
        rgba(255,214,124,.72) !important;

    box-shadow:
        0 20px 48px rgba(0,0,0,.39),
        0 0 15px rgba(240,189,86,.23),
        0 0 34px rgba(49,216,255,.095),
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 0 24px rgba(240,189,86,.055) !important;

    transform:
        translateY(-2px);
}


/* --------------------------------------------------------------------------
   ROOMS — CYAN GLASS WITH GOLD DETAIL
   -------------------------------------------------------------------------- */

.room {
    border-color:
        rgba(47,193,246,.34) !important;
}

.room:hover {
    border-color:
        rgba(240,189,86,.52) !important;

    box-shadow:
        0 20px 48px rgba(0,0,0,.37),
        0 0 16px rgba(48,202,255,.17),
        0 0 28px rgba(240,189,86,.065),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.room > header {
    background:
        linear-gradient(
            90deg,
            rgba(240,189,86,.09) 0%,
            rgba(13,68,100,.22) 38%,
            rgba(3,23,40,.16) 100%
        ) !important;

    border-bottom:
        1px solid rgba(54,201,255,.19) !important;
}


/* --------------------------------------------------------------------------
   CARD INNER GLOW
   -------------------------------------------------------------------------- */

.status-card::after {
    content:"";

    position:absolute;

    left:8px;
    right:8px;
    bottom:0;

    height:1px !important;

    opacity:.95 !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            currentColor,
            transparent
        ) !important;

    box-shadow:
        0 0 11px currentColor !important;
}


/* --------------------------------------------------------------------------
   CITIZEN ORBS — ACTUAL NEON
   -------------------------------------------------------------------------- */

.citizen-orb {
    border:
        1px solid rgba(55,213,255,.50) !important;

    background:
        radial-gradient(
            circle at 34% 28%,
            rgba(49,216,255,.30) 0%,
            rgba(5,58,84,.72) 38%,
            rgba(2,24,40,.95) 100%
        ) !important;

    box-shadow:
        0 0 9px rgba(49,216,255,.30),
        0 0 20px rgba(49,216,255,.12),
        inset 0 0 16px rgba(49,216,255,.12) !important;
}

.citizen-orb:hover {
    border-color:
        rgba(255,213,120,.78) !important;

    box-shadow:
        0 0 10px rgba(240,189,86,.42),
        0 0 24px rgba(49,216,255,.17),
        inset 0 0 16px rgba(240,189,86,.10) !important;
}


/* --------------------------------------------------------------------------
   RESOURCE DIALS
   -------------------------------------------------------------------------- */

.resource-ring,
.metric-ring,
.system-resource-circle {
    border-color:
        rgba(51,206,255,.46) !important;

    box-shadow:
        0 0 14px rgba(49,216,255,.12),
        inset 0 0 18px rgba(49,216,255,.055) !important;
}


/* --------------------------------------------------------------------------
   QUICK ACCESS — GLASS BUTTONS
   -------------------------------------------------------------------------- */

.quick-grid > *,
.quick-access a,
.quick-access button {
    background:
        linear-gradient(
            145deg,
            rgba(12,53,78,.64),
            rgba(5,30,49,.74)
        ) !important;

    border:
        1px solid rgba(50,190,241,.25) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 0 10px rgba(49,216,255,.035) !important;
}

.quick-grid > *:hover,
.quick-access a:hover,
.quick-access button:hover {
    border-color:
        rgba(240,189,86,.56) !important;

    box-shadow:
        0 0 13px rgba(240,189,86,.15),
        0 0 24px rgba(49,216,255,.06),
        inset 0 1px 0 rgba(255,255,255,.075) !important;
}


/* --------------------------------------------------------------------------
   SIDEBAR / TOPBAR — CLEAR NAVY IDENTITY
   -------------------------------------------------------------------------- */

.sidebar {
    background:
        linear-gradient(
            180deg,
            #031524 0%,
            #02111e 52%,
            #020d18 100%
        ) !important;

    border-right:
        1px solid rgba(240,189,86,.38) !important;

    box-shadow:
        16px 0 44px rgba(0,0,0,.36),
        4px 0 22px rgba(23,105,150,.055) !important;
}

.topbar {
    background:
        linear-gradient(
            90deg,
            rgba(3,21,36,.98),
            rgba(4,27,46,.95)
        ) !important;

    border-bottom:
        1px solid rgba(240,189,86,.31) !important;
}


/* --------------------------------------------------------------------------
   ACTIVE NAV — GOLD KING LIGHT
   -------------------------------------------------------------------------- */

.nav-item.active {
    border-color:
        rgba(255,214,124,.66) !important;

    background:
        linear-gradient(
            90deg,
            rgba(240,189,86,.20) 0%,
            rgba(11,52,76,.58) 56%,
            rgba(5,27,45,.44) 100%
        ) !important;

    box-shadow:
        inset 3px 0 0 #f0bd56,
        0 0 11px rgba(240,189,86,.17),
        0 0 25px rgba(240,189,86,.065) !important;
}


/* --------------------------------------------------------------------------
   GOLD TYPOGRAPHIC ACCENTS
   -------------------------------------------------------------------------- */

.brand-king,
.hero-copy h1,
.status-card .card-head strong,
.room > header strong {
    color:
        #f6dfaa;
}

.hero-copy h1 {
    text-shadow:
        0 2px 22px rgba(0,0,0,.72),
        0 0 11px rgba(240,189,86,.11) !important;
}


/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer,
footer {
    background:
        rgba(2,16,28,.84) !important;

    border-top:
        1px solid rgba(49,216,255,.10) !important;
}


/* =============================================================================
   KING PANEL — LUXURY GLASS POLISH
   Change: KING-G1-PANEL-VISUAL-THEME-0003

   WHY:
   Theme 0002 established the accepted visual direction:
   deep navy canvas, clean Hero, KING gold and restrained cyan neon.

   Operator evidence showed the remaining weakness was material depth rather
   than layout, palette or neon intensity.

   This layer therefore adds controlled glass reflection, internal depth,
   luminous edge separation and refined hover response without redesigning
   the accepted spatial composition.

   Boundary:
   Presentation only. No data, Contract, authorization, Engine, listener,
   telemetry, City Read or runtime semantics are changed.
   ============================================================================= */


/* --------------------------------------------------------------------------
   SHARED LUXURY GLASS MATERIAL

   The first background layer is a restrained reflected highlight.
   The second provides navy depth. Blur is retained for future surfaces that
   may have visible content behind them, while current solid canvas remains
   visually calm.
   -------------------------------------------------------------------------- */

.status-card,
.room {
    background:
        linear-gradient(
            118deg,
            rgba(255,255,255,.060) 0%,
            rgba(255,255,255,.020) 13%,
            transparent 29%
        ),
        radial-gradient(
            circle at 88% 8%,
            rgba(52,205,255,.075),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(10,48,76,.76) 0%,
            rgba(5,29,50,.80) 48%,
            rgba(2,18,33,.88) 100%
        ) !important;

    box-shadow:
        0 18px 44px rgba(0,0,0,.34),
        0 0 15px rgba(47,199,255,.115),
        inset 0 1px 0 rgba(255,255,255,.105),
        inset 1px 0 0 rgba(255,255,255,.025),
        inset 0 -1px 0 rgba(16,104,151,.13),
        inset 0 0 30px rgba(13,88,132,.055) !important;
}


/* --------------------------------------------------------------------------
   GLASS REFLECTION

   A narrow diagonal reflection gives the cards a glass material identity
   without adding another decorative object or fake operational information.
   -------------------------------------------------------------------------- */

.status-card > *,
.room > * {
    position:relative;
    z-index:2;
}

.status-card::before,
.room::before {
    content:"" !important;

    position:absolute !important;

    z-index:1 !important;

    top:-38% !important;
    left:-14% !important;

    width:55% !important;
    height:115% !important;

    pointer-events:none !important;

    opacity:.34 !important;

    transform:
        rotate(11deg) !important;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,.015) 35%,
            rgba(255,255,255,.085) 48%,
            rgba(122,220,255,.055) 54%,
            transparent 69%
        ) !important;

    box-shadow:none !important;
}


/* --------------------------------------------------------------------------
   STATUS CARDS — GOLD LUXURY FRAME

   Status cards are city-level summary surfaces, so KING gold carries their
   common frame while semantic status colors remain in existing content.
   -------------------------------------------------------------------------- */

.status-card {
    border:
        1px solid rgba(240,189,86,.43) !important;

    box-shadow:
        0 18px 44px rgba(0,0,0,.35),
        0 0 10px rgba(240,189,86,.15),
        0 0 25px rgba(240,189,86,.055),
        inset 0 1px 0 rgba(255,238,196,.14),
        inset 0 0 25px rgba(240,189,86,.030) !important;
}

.status-card::after {
    content:"" !important;

    position:absolute !important;

    z-index:1 !important;

    left:12% !important;
    right:12% !important;
    bottom:0 !important;

    height:1px !important;

    opacity:1 !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(240,189,86,.88),
            transparent
        ) !important;

    box-shadow:
        0 0 8px rgba(240,189,86,.56),
        0 0 18px rgba(240,189,86,.18) !important;
}

.status-card:hover {
    border-color:
        rgba(255,221,143,.76) !important;

    box-shadow:
        0 22px 52px rgba(0,0,0,.39),
        0 0 13px rgba(240,189,86,.25),
        0 0 31px rgba(240,189,86,.085),
        0 0 43px rgba(49,216,255,.045),
        inset 0 1px 0 rgba(255,245,218,.18),
        inset 0 0 30px rgba(240,189,86,.045) !important;
}


/* --------------------------------------------------------------------------
   ROOMS — CYAN OPERATIONAL GLASS

   Cyan identifies operational depth, not authority. Gold remains the KING
   identity accent in headers and interactive emphasis.
   -------------------------------------------------------------------------- */

.room {
    border:
        1px solid rgba(48,199,247,.39) !important;

    box-shadow:
        0 18px 44px rgba(0,0,0,.34),
        0 0 11px rgba(49,216,255,.14),
        0 0 26px rgba(49,216,255,.045),
        inset 0 1px 0 rgba(177,237,255,.105),
        inset 0 0 27px rgba(49,216,255,.040) !important;
}

.room::after {
    content:"";

    position:absolute;

    z-index:1;

    left:9%;
    right:9%;
    bottom:0;

    height:1px;

    pointer-events:none;

    opacity:.85;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(49,216,255,.72),
            transparent
        );

    box-shadow:
        0 0 8px rgba(49,216,255,.42),
        0 0 17px rgba(49,216,255,.12);
}

.room:hover {
    border-color:
        rgba(102,222,255,.62) !important;

    box-shadow:
        0 22px 52px rgba(0,0,0,.38),
        0 0 14px rgba(49,216,255,.24),
        0 0 32px rgba(49,216,255,.075),
        0 0 40px rgba(240,189,86,.035),
        inset 0 1px 0 rgba(207,245,255,.15),
        inset 0 0 30px rgba(49,216,255,.055) !important;
}


/* --------------------------------------------------------------------------
   ROOM HEADER — GLASS CAP
   -------------------------------------------------------------------------- */

.room > header {
    background:
        linear-gradient(
            90deg,
            rgba(240,189,86,.105) 0%,
            rgba(22,92,126,.24) 37%,
            rgba(5,32,53,.18) 72%,
            rgba(255,255,255,.018) 100%
        ) !important;

    box-shadow:
        inset 0 -1px 0 rgba(49,216,255,.11),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* --------------------------------------------------------------------------
   QUICK ACCESS — MATCH THE GLASS SYSTEM
   -------------------------------------------------------------------------- */

.quick-grid > *,
.quick-access a,
.quick-access button {
    background:
        linear-gradient(
            145deg,
            rgba(14,62,90,.67),
            rgba(5,31,51,.76)
        ) !important;

    border:
        1px solid rgba(56,193,238,.29) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.065),
        0 0 9px rgba(49,216,255,.045) !important;
}

.quick-grid > *:hover,
.quick-access a:hover,
.quick-access button:hover {
    border-color:
        rgba(240,189,86,.62) !important;

    background:
        linear-gradient(
            145deg,
            rgba(19,74,102,.72),
            rgba(7,38,59,.82)
        ) !important;

    box-shadow:
        0 0 11px rgba(240,189,86,.19),
        0 0 22px rgba(49,216,255,.075),
        inset 0 1px 0 rgba(255,255,255,.095) !important;
}


/* --------------------------------------------------------------------------
   CITIZEN ORBS — POLISHED, NOT BRIGHTER

   Existing 0002 neon strength is intentionally retained. This pass adds only
   a cleaner highlight so Citizens read as glass instruments rather than LEDs.
   -------------------------------------------------------------------------- */

.citizen-orb {
    background:
        radial-gradient(
            circle at 31% 24%,
            rgba(216,248,255,.18) 0%,
            rgba(49,216,255,.25) 13%,
            rgba(5,58,84,.73) 42%,
            rgba(2,24,40,.96) 100%
        ) !important;

    box-shadow:
        0 0 9px rgba(49,216,255,.30),
        0 0 20px rgba(49,216,255,.12),
        inset 0 1px 0 rgba(220,249,255,.17),
        inset 0 0 16px rgba(49,216,255,.12) !important;
}


/* --------------------------------------------------------------------------
   FINAL GOLD DETAIL
   -------------------------------------------------------------------------- */

.status-card .card-head strong,
.room > header strong {
    text-shadow:
        0 0 9px rgba(240,189,86,.11);
}

.eyebrow {
    box-shadow:
        0 0 8px rgba(240,189,86,.07),
        inset 0 1px 0 rgba(255,236,189,.07) !important;
}


/* =============================================================================
   KING PANEL — LUXURY GLASS POLISH
   Change: KING-G1-PANEL-VISUAL-THEME-0003

   WHY:
   Theme 0002 established the accepted visual direction:
   deep navy canvas, clean Hero, KING gold and restrained cyan neon.

   Operator evidence showed the remaining weakness was material depth rather
   than layout, palette or neon intensity.

   This layer therefore adds controlled glass reflection, internal depth,
   luminous edge separation and refined hover response without redesigning
   the accepted spatial composition.

   Boundary:
   Presentation only. No data, Contract, authorization, Engine, listener,
   telemetry, City Read or runtime semantics are changed.
   ============================================================================= */


/* --------------------------------------------------------------------------
   SHARED LUXURY GLASS MATERIAL

   The first background layer is a restrained reflected highlight.
   The second provides navy depth. Blur is retained for future surfaces that
   may have visible content behind them, while current solid canvas remains
   visually calm.
   -------------------------------------------------------------------------- */

.status-card,
.room {
    background:
        linear-gradient(
            118deg,
            rgba(255,255,255,.060) 0%,
            rgba(255,255,255,.020) 13%,
            transparent 29%
        ),
        radial-gradient(
            circle at 88% 8%,
            rgba(52,205,255,.075),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(10,48,76,.76) 0%,
            rgba(5,29,50,.80) 48%,
            rgba(2,18,33,.88) 100%
        ) !important;

    box-shadow:
        0 18px 44px rgba(0,0,0,.34),
        0 0 15px rgba(47,199,255,.115),
        inset 0 1px 0 rgba(255,255,255,.105),
        inset 1px 0 0 rgba(255,255,255,.025),
        inset 0 -1px 0 rgba(16,104,151,.13),
        inset 0 0 30px rgba(13,88,132,.055) !important;
}


/* --------------------------------------------------------------------------
   GLASS REFLECTION

   A narrow diagonal reflection gives the cards a glass material identity
   without adding another decorative object or fake operational information.
   -------------------------------------------------------------------------- */

.status-card > *,
.room > * {
    position:relative;
    z-index:2;
}

.status-card::before,
.room::before {
    content:"" !important;

    position:absolute !important;

    z-index:1 !important;

    top:-38% !important;
    left:-14% !important;

    width:55% !important;
    height:115% !important;

    pointer-events:none !important;

    opacity:.34 !important;

    transform:
        rotate(11deg) !important;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,.015) 35%,
            rgba(255,255,255,.085) 48%,
            rgba(122,220,255,.055) 54%,
            transparent 69%
        ) !important;

    box-shadow:none !important;
}


/* --------------------------------------------------------------------------
   STATUS CARDS — GOLD LUXURY FRAME

   Status cards are city-level summary surfaces, so KING gold carries their
   common frame while semantic status colors remain in existing content.
   -------------------------------------------------------------------------- */

.status-card {
    border:
        1px solid rgba(240,189,86,.43) !important;

    box-shadow:
        0 18px 44px rgba(0,0,0,.35),
        0 0 10px rgba(240,189,86,.15),
        0 0 25px rgba(240,189,86,.055),
        inset 0 1px 0 rgba(255,238,196,.14),
        inset 0 0 25px rgba(240,189,86,.030) !important;
}

.status-card::after {
    content:"" !important;

    position:absolute !important;

    z-index:1 !important;

    left:12% !important;
    right:12% !important;
    bottom:0 !important;

    height:1px !important;

    opacity:1 !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(240,189,86,.88),
            transparent
        ) !important;

    box-shadow:
        0 0 8px rgba(240,189,86,.56),
        0 0 18px rgba(240,189,86,.18) !important;
}

.status-card:hover {
    border-color:
        rgba(255,221,143,.76) !important;

    box-shadow:
        0 22px 52px rgba(0,0,0,.39),
        0 0 13px rgba(240,189,86,.25),
        0 0 31px rgba(240,189,86,.085),
        0 0 43px rgba(49,216,255,.045),
        inset 0 1px 0 rgba(255,245,218,.18),
        inset 0 0 30px rgba(240,189,86,.045) !important;
}


/* --------------------------------------------------------------------------
   ROOMS — CYAN OPERATIONAL GLASS

   Cyan identifies operational depth, not authority. Gold remains the KING
   identity accent in headers and interactive emphasis.
   -------------------------------------------------------------------------- */

.room {
    border:
        1px solid rgba(48,199,247,.39) !important;

    box-shadow:
        0 18px 44px rgba(0,0,0,.34),
        0 0 11px rgba(49,216,255,.14),
        0 0 26px rgba(49,216,255,.045),
        inset 0 1px 0 rgba(177,237,255,.105),
        inset 0 0 27px rgba(49,216,255,.040) !important;
}

.room::after {
    content:"";

    position:absolute;

    z-index:1;

    left:9%;
    right:9%;
    bottom:0;

    height:1px;

    pointer-events:none;

    opacity:.85;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(49,216,255,.72),
            transparent
        );

    box-shadow:
        0 0 8px rgba(49,216,255,.42),
        0 0 17px rgba(49,216,255,.12);
}

.room:hover {
    border-color:
        rgba(102,222,255,.62) !important;

    box-shadow:
        0 22px 52px rgba(0,0,0,.38),
        0 0 14px rgba(49,216,255,.24),
        0 0 32px rgba(49,216,255,.075),
        0 0 40px rgba(240,189,86,.035),
        inset 0 1px 0 rgba(207,245,255,.15),
        inset 0 0 30px rgba(49,216,255,.055) !important;
}


/* --------------------------------------------------------------------------
   ROOM HEADER — GLASS CAP
   -------------------------------------------------------------------------- */

.room > header {
    background:
        linear-gradient(
            90deg,
            rgba(240,189,86,.105) 0%,
            rgba(22,92,126,.24) 37%,
            rgba(5,32,53,.18) 72%,
            rgba(255,255,255,.018) 100%
        ) !important;

    box-shadow:
        inset 0 -1px 0 rgba(49,216,255,.11),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* --------------------------------------------------------------------------
   QUICK ACCESS — MATCH THE GLASS SYSTEM
   -------------------------------------------------------------------------- */

.quick-grid > *,
.quick-access a,
.quick-access button {
    background:
        linear-gradient(
            145deg,
            rgba(14,62,90,.67),
            rgba(5,31,51,.76)
        ) !important;

    border:
        1px solid rgba(56,193,238,.29) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.065),
        0 0 9px rgba(49,216,255,.045) !important;
}

.quick-grid > *:hover,
.quick-access a:hover,
.quick-access button:hover {
    border-color:
        rgba(240,189,86,.62) !important;

    background:
        linear-gradient(
            145deg,
            rgba(19,74,102,.72),
            rgba(7,38,59,.82)
        ) !important;

    box-shadow:
        0 0 11px rgba(240,189,86,.19),
        0 0 22px rgba(49,216,255,.075),
        inset 0 1px 0 rgba(255,255,255,.095) !important;
}


/* --------------------------------------------------------------------------
   CITIZEN ORBS — POLISHED, NOT BRIGHTER

   Existing 0002 neon strength is intentionally retained. This pass adds only
   a cleaner highlight so Citizens read as glass instruments rather than LEDs.
   -------------------------------------------------------------------------- */

.citizen-orb {
    background:
        radial-gradient(
            circle at 31% 24%,
            rgba(216,248,255,.18) 0%,
            rgba(49,216,255,.25) 13%,
            rgba(5,58,84,.73) 42%,
            rgba(2,24,40,.96) 100%
        ) !important;

    box-shadow:
        0 0 9px rgba(49,216,255,.30),
        0 0 20px rgba(49,216,255,.12),
        inset 0 1px 0 rgba(220,249,255,.17),
        inset 0 0 16px rgba(49,216,255,.12) !important;
}


/* --------------------------------------------------------------------------
   FINAL GOLD DETAIL
   -------------------------------------------------------------------------- */

.status-card .card-head strong,
.room > header strong {
    text-shadow:
        0 0 9px rgba(240,189,86,.11);
}

.eyebrow {
    box-shadow:
        0 0 8px rgba(240,189,86,.07),
        inset 0 1px 0 rgba(255,236,189,.07) !important;
}



/* ==========================================================================
   KING PANEL — SECURE CONNECTIVITY WORKSPACE
   Change: KING-G1-PANEL-SECURE-CONNECTIVITY-WORKSPACE-0001

   Read-only operational Workspace using the governed Connectivity projection.

   Visual intent:
   deep navy glass + KING gold identity + restrained cyan operational light.
   Active state may use green. No fake operational state is introduced.
   ========================================================================== */


.connectivity-workspace {
    width:100%;

    margin:
        28px
        0
        34px;

    padding:
        22px;

    border:
        1px solid rgba(48,199,247,.30);

    border-radius:
        18px;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(49,216,255,.075),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            rgba(8,41,65,.73),
            rgba(3,23,40,.91)
        );

    box-shadow:
        0 24px 62px rgba(0,0,0,.34),
        0 0 18px rgba(49,216,255,.07),
        inset 0 1px 0 rgba(255,255,255,.065);
}


.connectivity-workspace-heading {
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:24px;

    margin-bottom:20px;
}


.workspace-kicker,
.panel-kicker {
    display:block;

    margin-bottom:5px;

    color:var(--king-gold, #f0bd56);

    font-size:9px;
    font-weight:700;

    letter-spacing:.16em;
}


.connectivity-workspace-heading h2 {
    margin:
        0
        0
        7px;

    color:#f7e5bd;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            21px,
            2vw,
            29px
        );

    font-weight:500;

    letter-spacing:.02em;

    text-shadow:
        0 0 14px rgba(240,189,86,.09);
}


.connectivity-workspace-heading p {
    max-width:660px;

    margin:0;

    color:#829baa;

    font-size:11px;
    line-height:1.7;
}


.connectivity-workspace-actions {
    display:flex;

    align-items:center;

    gap:10px;
}


.connectivity-read-badge {
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:29px;

    padding:
        0
        10px;

    border-radius:999px;

    font-size:8px;
    font-weight:800;

    letter-spacing:.10em;
}


.connectivity-read-badge.pending {
    color:#b8c5ce;

    border:
        1px solid rgba(184,197,206,.20);

    background:
        rgba(184,197,206,.06);
}


.connectivity-read-badge.connected {
    color:#72f4b9;

    border:
        1px solid rgba(73,239,173,.36);

    background:
        rgba(73,239,173,.075);

    box-shadow:
        0 0 13px rgba(73,239,173,.10);
}


.connectivity-read-badge.unavailable {
    color:#ff819b;

    border:
        1px solid rgba(255,92,130,.38);

    background:
        rgba(255,92,130,.08);
}


.connectivity-create-button {
    display:inline-flex;

    align-items:center;

    gap:7px;

    min-height:34px;

    padding:
        0
        13px;

    border:
        1px solid rgba(240,189,86,.26);

    border-radius:8px;

    color:#998e75;

    background:
        rgba(240,189,86,.035);

    font-size:9px;
    font-weight:700;

    letter-spacing:.05em;

    cursor:not-allowed;

    opacity:.68;
}


.connectivity-summary-grid {
    display:grid;

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

    gap:11px;

    margin-bottom:13px;
}


.connectivity-stat {
    position:relative;

    overflow:hidden;

    min-height:103px;

    padding:
        15px
        16px;

    border:
        1px solid rgba(53,191,237,.25);

    border-radius:11px;

    background:
        linear-gradient(
            145deg,
            rgba(12,55,82,.66),
            rgba(4,27,46,.84)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.065),
        0 0 12px rgba(49,216,255,.04);
}


.connectivity-stat::before {
    content:"";

    position:absolute;

    left:14%;
    right:14%;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(49,216,255,.70),
            transparent
        );

    box-shadow:
        0 0 8px rgba(49,216,255,.28);
}


.connectivity-stat > span {
    display:block;

    margin-bottom:8px;

    color:#8196a4;

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.08em;
}


.connectivity-stat strong {
    display:block;

    margin-bottom:7px;

    color:#f2f8fc;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:26px;
    font-weight:500;
}


.connectivity-stat small {
    color:#617887;

    font-size:8px;

    letter-spacing:.04em;
}


.connectivity-stat.state-active {
    border-color:
        rgba(73,239,173,.26);
}


.connectivity-stat.state-active::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(73,239,173,.78),
            transparent
        );

    box-shadow:
        0 0 9px rgba(73,239,173,.33);
}


.connectivity-stat.state-degraded {
    border-color:
        rgba(255,193,83,.24);
}


.connectivity-stat.state-degraded::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,193,83,.72),
            transparent
        );
}


.connectivity-stat.state-disabled {
    border-color:
        rgba(141,160,173,.17);
}


.connectivity-main-grid {
    display:grid;

    grid-template-columns:
        minmax(0,1.65fr)
        minmax(250px,.75fr);

    gap:13px;

    margin-bottom:13px;
}


.connectivity-panel {
    overflow:hidden;

    border:
        1px solid rgba(49,199,246,.26);

    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            rgba(8,45,69,.64),
            rgba(3,24,41,.84)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 12px 30px rgba(0,0,0,.18);
}


.connectivity-panel > header {
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:14px;

    min-height:55px;

    padding:
        11px
        14px;

    border-bottom:
        1px solid rgba(49,216,255,.11);

    background:
        linear-gradient(
            90deg,
            rgba(240,189,86,.075),
            rgba(18,78,108,.13),
            transparent
        );
}


.connectivity-panel > header strong {
    color:#ead9b3;

    font-size:11px;
}


.connectivity-panel > header small {
    color:#5d8295;

    font-size:7px;

    letter-spacing:.09em;
}


.connectivity-definitions {
    display:grid;

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

    gap:9px;

    padding:12px;
}


.connectivity-definition {
    position:relative;

    min-height:74px;

    padding:
        12px;

    border:
        1px solid rgba(53,184,229,.18);

    border-radius:9px;

    background:
        rgba(7,34,53,.53);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.connectivity-definition[data-readiness="ready"] {
    border-color:
        rgba(73,239,173,.30);

    box-shadow:
        inset 2px 0 0 rgba(73,239,173,.65),
        0 0 12px rgba(73,239,173,.035);
}


.connectivity-definition[data-readiness="planned"] {
    opacity:.74;
}


.definition-top,
.definition-meta {
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:10px;
}


.definition-top strong {
    color:#dbe8ef;

    font-size:10px;
}


.definition-state {
    padding:
        4px
        7px;

    border-radius:999px;

    font-size:6.5px;
    font-weight:800;

    letter-spacing:.06em;

    white-space:nowrap;
}


.definition-state.ready {
    color:#73f4ba;

    border:
        1px solid rgba(73,239,173,.25);

    background:
        rgba(73,239,173,.065);
}


.definition-state.planned {
    color:#8898a2;

    border:
        1px solid rgba(136,152,162,.17);

    background:
        rgba(136,152,162,.045);
}


.definition-meta {
    margin-top:13px;

    color:#68818f;

    font-size:7.5px;

    text-transform:capitalize;
}


.port-pool-visual {
    display:flex;

    align-items:center;

    gap:22px;

    padding:
        16px
        17px
        12px;
}


.port-ring {
    --pool-used:0deg;

    flex:
        0
        0
        104px;

    width:104px;
    height:104px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        conic-gradient(
            #42e0ff 0deg,
            #42e0ff var(--pool-used),
            rgba(70,145,176,.15)
                var(--pool-used),
            rgba(70,145,176,.15)
                360deg
        );

    box-shadow:
        0 0 18px rgba(49,216,255,.08);
}


.port-ring::before {
    content:"";

    position:absolute;
}


.port-ring > div {
    width:82px;
    height:82px;

    display:flex;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#041929;

    box-shadow:
        inset 0 0 16px rgba(49,216,255,.07);
}


.port-ring strong {
    color:#ecf8ff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:21px;
    font-weight:500;
}


.port-ring span {
    margin-top:3px;

    color:#688b9c;

    font-size:6.5px;

    letter-spacing:.10em;
}


.port-pool-stats {
    flex:1;

    display:grid;

    gap:8px;
}


.port-pool-stats > div {
    display:flex;

    justify-content:space-between;

    gap:10px;

    padding-bottom:7px;

    border-bottom:
        1px solid rgba(71,160,196,.09);
}


.port-pool-stats span {
    color:#6e8795;

    font-size:8px;
}


.port-pool-stats strong {
    color:#d5e3ea;

    font-size:8px;
}


.port-policy-note {
    margin:
        0
        14px
        14px;

    padding:
        9px
        10px;

    border:
        1px solid rgba(240,189,86,.12);

    border-radius:7px;

    color:#726d62;

    background:
        rgba(240,189,86,.025);

    font-size:7.5px;

    line-height:1.5;
}


.profiles-panel {
    margin-bottom:13px;
}


.connectivity-filter-row {
    display:flex;

    align-items:center;

    gap:5px;
}


.connectivity-filter {
    padding:
        5px
        8px;

    border:
        1px solid rgba(72,161,198,.13);

    border-radius:999px;

    color:#617987;

    background:
        rgba(6,31,49,.40);

    font-size:7px;
}


.connectivity-filter.active {
    color:#ccb277;

    border-color:
        rgba(240,189,86,.22);

    background:
        rgba(240,189,86,.045);
}


.connectivity-profiles {
    min-height:108px;

    padding:12px;
}


.connectivity-zero-state,
.connectivity-unavailable,
.connectivity-loading {
    min-height:83px;

    display:flex;

    align-items:center;

    gap:13px;

    padding:
        15px;

    border:
        1px dashed rgba(67,162,201,.17);

    border-radius:9px;

    color:#738a98;

    background:
        rgba(4,25,41,.42);
}


.zero-state-orb {
    flex:
        0
        0
        48px;

    width:48px;
    height:48px;

    display:grid;

    place-items:center;

    border:
        1px solid rgba(49,216,255,.24);

    border-radius:50%;

    color:#70c9e4;

    background:
        radial-gradient(
            circle at 32% 28%,
            rgba(49,216,255,.16),
            rgba(5,42,62,.64)
        );

    box-shadow:
        0 0 13px rgba(49,216,255,.07);
}


.connectivity-zero-state strong,
.connectivity-unavailable strong {
    display:block;

    margin-bottom:4px;

    color:#bccdd6;

    font-size:10px;
}


.connectivity-zero-state span,
.connectivity-unavailable span {
    display:block;

    max-width:540px;

    color:#687e8b;

    font-size:8px;

    line-height:1.55;
}


.connectivity-profile-row {
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:15px;

    padding:
        11px
        12px;

    border-bottom:
        1px solid rgba(55,143,179,.10);
}


.profile-identity {
    display:flex;

    align-items:center;

    gap:10px;
}


.profile-state-dot {
    width:7px;
    height:7px;

    border-radius:50%;

    background:#778994;
}


.profile-state-dot.healthy {
    background:#49efad;

    box-shadow:
        0 0 8px rgba(73,239,173,.55);
}


.profile-state-dot.degraded {
    background:#ffc153;

    box-shadow:
        0 0 8px rgba(255,193,83,.42);
}


.profile-state-dot.disabled {
    background:#68747c;
}


.profile-identity strong,
.profile-state-copy strong {
    display:block;

    color:#d3e0e7;

    font-size:9px;
}


.profile-identity span,
.profile-state-copy span {
    display:block;

    margin-top:3px;

    color:#667f8e;

    font-size:7px;
}


.profile-state-copy {
    text-align:right;
}


.connectivity-builder-preview {
    display:grid;

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

    align-items:center;

    gap:14px;

    padding:
        15px;

    border:
        1px solid rgba(240,189,86,.16);

    border-radius:11px;

    background:
        linear-gradient(
            90deg,
            rgba(240,189,86,.035),
            rgba(9,45,67,.38),
            rgba(4,27,44,.53)
        );
}


.builder-lock-icon {
    width:42px;
    height:42px;

    display:grid;

    place-items:center;

    border:
        1px solid rgba(240,189,86,.22);

    border-radius:10px;

    color:#d2ae61;

    background:
        rgba(240,189,86,.045);

    box-shadow:
        0 0 12px rgba(240,189,86,.055);
}


.connectivity-builder-preview strong {
    display:block;

    color:#cfc2a4;

    font-size:10px;
}


.connectivity-builder-preview p {
    max-width:660px;

    margin:
        5px
        0
        0;

    color:#6e818c;

    font-size:8px;

    line-height:1.55;
}


.builder-state {
    padding:
        6px
        9px;

    border:
        1px solid rgba(255,193,83,.17);

    border-radius:999px;

    color:#a28e60;

    background:
        rgba(255,193,83,.035);

    font-size:6.5px;
    font-weight:800;

    letter-spacing:.08em;
}


@media (max-width:1050px) {

    .connectivity-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .connectivity-main-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width:700px) {

    .connectivity-workspace {
        padding:14px;
    }

    .connectivity-workspace-heading {
        flex-direction:column;
    }

    .connectivity-workspace-actions {
        width:100%;

        justify-content:space-between;
    }

    .connectivity-summary-grid {
        grid-template-columns:
            1fr
            1fr;
    }

    .connectivity-definitions {
        grid-template-columns:
            1fr;
    }

    .connectivity-builder-preview {
        grid-template-columns:
            auto
            1fr;
    }

    .builder-state {
        grid-column:
            1
            / -1;

        width:max-content;
    }

}


@media (max-width:430px) {

    .connectivity-summary-grid {
        grid-template-columns:
            1fr;
    }

    .port-pool-visual {
        align-items:flex-start;

        flex-direction:column;
    }

    .connectivity-filter-row {
        display:none;
    }

}