:root {
    --green:#1f7a3a;
    --yellow:#facc15;
    --orange:#f97316;
    --red:#dc2626;
    --purple:#7e22ce;
    --panel:#061016;
    --border:rgba(255,255,255,.18);
    --blue:#005bea;
    --mems-orange:#f47b26;
}

 * {
    box-sizing:border-box;
}

 html,body {
    height:100%;
    margin:0;
    background:#020406;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
    overflow:hidden;
}

 body {
    height:100vh;
    display:grid;
    grid-template-rows:28px 86px 58px minmax(0,1fr) 132px;
    overflow:hidden;
}
.beta-bar {
    background:#dc2626;
    color:#fff;
    font-size:13px;
    font-weight:900;
    text-align:center;
    line-height:28px;
    letter-spacing:.12em;
    text-transform:uppercase;
    border-bottom:2px solid #991b1b;
    z-index:10000;
    position:relative;
}

 header {
    display:grid;
    grid-template-columns:210px 1fr 190px;
    gap:16px;
    align-items:center;
    padding:10px 18px;
    background:linear-gradient(180deg,#020406,#070b10);
    border-bottom:1px solid var(--border);
}.header-title {
    display:flex;
    flex-direction:column;
    line-height:.9;
    font-size:0;
}.header-title::before {
    content:"MEMS";
    color:var(--mems-orange);
    font-size:33px;
    font-weight:1000;
    font-style:italic;
}.header-title::after {
    content:"Weather Center";
    font-size:22px;
    font-weight:900;
    font-style:italic;
    margin-top:5px;
}.header-info {
    text-align:right;
    font-size:12px;
    color:#e5e7eb;
    line-height:1.08;
}.header-info strong {
    display:block;
    font-size:30px;
    line-height:.95;
    margin:4px 0;
    color:#fff;
}.header-info div {
    white-space:nowrap;
}.top-bar {
    display:flex;
    gap:6px;
    align-items:center;
    padding:0 12px;
    background:#020406;
    border-bottom:1px solid var(--border);
}.zone {
    flex:1;
    height:48px;
    border-radius:4px;
    border:1px solid rgba(255,255,255,.14);
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,.28);
}.zone-btn {
    width:100%;
    height:100%;
    border:0;
    background:transparent;
    color:inherit;
    font-weight:900;
    font-size:12px;
    line-height:1.1;
    cursor:pointer;
    text-shadow:0 1px 3px rgba(0,0,0,.35);
}.zone.normal {
    background:linear-gradient(180deg,#0a8a40,#05672d);
}.zone.tstorm-watch {
    background:linear-gradient(180deg,#facc15,#d8a800);
    color:#080808;
}.zone.tstorm-warning {
    background:linear-gradient(180deg,#f97316,#c2410c);
}.zone.tornado-watch {
    background:linear-gradient(180deg,#dc2626,#991b1b);
}.zone.tornado-warning {
    background:linear-gradient(180deg,#7e22ce,#581c87);
}.zone.tornado-emergency {
    background:linear-gradient(90deg,#dc2626,#7e22ce);
    animation:pulseEmergency 1s infinite;
}.layout {
    display:grid;
    grid-template-columns:260px minmax(0,1fr) 380px;
    min-height:0;
    height:100%;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.25);
}.control-rail {
    min-height:0;
    overflow-y:auto;
    background:linear-gradient(180deg,#061016,#03070b);
    border-right:1px solid rgba(255,255,255,.22);
    padding:12px;
}.map-wrap {
    position:relative;
    min-height:0;
    overflow:hidden;
    border-right:1px solid rgba(255,255,255,.25);
    height:100%;
}

#map {
    height:100%;
    width:100%;
    min-height:300px;
    background:#081018;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}.panel {
    padding:0;
    background:#061016;
    border-left:1px solid rgba(255,255,255,.22);
    overflow:hidden;
}.leaflet-control-layers {
    display:none!important;
}.leaflet-control-zoom a {
    background:#f8fafc!important;
    color:#111!important;
    font-weight:900;
}.leaflet-popup-content-wrapper,.leaflet-popup-tip {
    background:#161616;
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 8px 24px rgba(0,0,0,.55);
}.map-controls {
    width:100%;
    background:linear-gradient(180deg,rgba(2,6,12,.98),rgba(2,8,14,.92));
    border:1px solid rgba(255,255,255,.24);
    border-radius:5px;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    overflow:hidden;
}.controls-title {
    font-size:13px;
    font-weight:900;
    padding:12px 13px 9px;
    border-bottom:1px solid rgba(255,255,255,.18);
    letter-spacing:.02em;
}.controls-title.small {
    border-top:1px solid rgba(255,255,255,.16);
    border-bottom:0;
    padding-bottom:7px;
}.control-row {
    height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:0 12px;
    border-bottom:1px solid rgba(255,255,255,.11);
    font-size:14px;
}.toggle {
    appearance:none;
    width:38px;
    height:21px;
    border-radius:999px;
    background:#4b5563;
    position:relative;
    outline:none;
    cursor:pointer;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}.toggle:checked {
    background:#2563eb;
}.toggle::after {
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:15px;
    height:15px;
    background:#fff;
    border-radius:50%;
    transition:.15s;
}.toggle:checked::after {
    left:20px;
}.legend-block {
    padding:9px 12px 12px;
    font-size:11px;
    color:#dbe4ee;
    border-bottom:1px solid rgba(255,255,255,.11);
}.dbz-bar {
    height:13px;
    margin:8px 0 4px;
    background:linear-gradient(90deg,#1e40af,#0ea5e9,#16a34a,#facc15,#f97316,#dc2626,#a21caf,#f9a8d4);
    border:1px solid rgba(255,255,255,.35);
}.dbz-scale {
    display:flex;
    justify-content:space-between;
    font-size:10px;
    color:#fff;
}.track-buttons {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    padding:0 12px 12px;
}.track-buttons button {
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);
    color:#fff;
    border-radius:5px;
    font-size:11px;
    padding:8px 0;
    cursor:pointer;
}.track-buttons button.active {
    background:#2563eb;
    border-color:#60a5fa;
}

 #alerts {
    height:100%;
    padding:14px;
    overflow-y:auto;
}

#alerts::before {
    content:"ACTIVE ALERTS";
    display:block;
    color:#d1d5db;
    font-size:16px;
    font-weight:900;
    margin:0 0 12px;
    letter-spacing:.03em;
}.alert-box {
    padding:15px 16px;
    margin-bottom:10px;
    border-radius:5px;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 9px 22px rgba(0,0,0,.36);
}.alert-box.normal {
    background:linear-gradient(135deg,#166534,#14532d);
}.alert-box.tstorm-watch {
    background:#a16207;
}.alert-box.tstorm-warning {
    background:linear-gradient(135deg,#ea580c,#c2410c);
}.alert-box.tornado-watch {
    background:linear-gradient(135deg,#dc2626,#991b1b);
}.alert-box.tornado-warning {
    background:linear-gradient(135deg,#7e22ce,#581c87);
}.alert-box.tornado-emergency {
    background:linear-gradient(135deg,#dc2626,#7e22ce);
    animation:pulseEmergency 1s infinite;
}.alert-title {
    font-weight:900;
    font-size:18px;
    text-transform:uppercase;
    margin-bottom:6px;
}.alert-meta {
    font-size:13px;
    color:#f8fafc;
    line-height:1.35;
    margin-bottom:8px;
}.station-hit {
    border-top:1px solid rgba(255,255,255,.18);
    padding-top:8px;
    margin-top:10px;
    font-size:13px;
    line-height:1.45;
}.station-hit-title {
    color:#facc15;
    text-transform:uppercase;
    font-size:12px;
    font-weight:900;
}.station-list-line {
    display:block;
    font-weight:700;
}.station-marker {
    background:var(--blue);
    border:2px solid white;
    border-radius:50%;
    width:14px;
    height:14px;
    box-shadow:0 0 8px rgba(0,0,0,.6);
}.station-marker.impacted {
    background:#ef4444;
    border-color:#fff;
    box-shadow:0 0 18px #ef4444;
}.poi-marker {
    background:rgba(251,191,36,.5);
    border:1px solid rgba(251,191,36,.6);
    border-radius:50%;
    width:7px;
    height:7px;
    opacity:.45;
}.poi-marker.zoomed {
    width:12px;
    height:12px;
    opacity:.95;
    border-width:2px;
    box-shadow:0 0 12px rgba(250,204,21,.7);
}.storm-track-line {
    filter:drop-shadow(0 0 7px rgba(255,255,255,.55));
}.track-label,.major-track-label {
    background:rgba(0,0,0,.72);
    border:1px solid rgba(255,255,255,.32);
    border-radius:4px;
    box-shadow:0 4px 10px rgba(0,0,0,.45);
    color:#fff;
    text-shadow:0 1px 3px #000;
    font-size:9px;
    font-weight:900;
    padding:1px 4px;
    white-space:nowrap;
    display:none;
    line-height:1.1;
}.track-label.visible,.major-track-label.visible {
    display:block;
}.track-origin {
    width:14px;
    height:14px;
    border-radius:50%;
    border:2px solid #fff;
    background:#111;
    box-shadow:0 0 0 2px #111,0 0 12px rgba(255,255,255,.8);
    cursor:pointer;
}

.track-step {
    position:relative;
    width:30px;
    height:30px;
    transform-origin:center center;
}

.track-step::before {
    content:"";
    position:absolute;
    left:14px;
    top:4px;
    width:2px;
    height:22px;
    background:#fff;
    border-radius:2px;
    box-shadow:0 0 0 1px #111,0 0 5px rgba(255,255,255,.75);
}

.bottom-bar {
    height:132px;
    display:grid;
    grid-template-columns:280px repeat(4,1fr) 360px;
    gap:0;
    padding:0;
    background:#061016;
    border-top:1px solid rgba(255,255,255,.26);
}.conditions-title,.condition-card {
    border-radius:0;
    border:0;
    border-right:1px solid rgba(255,255,255,.25);
    background:linear-gradient(180deg,rgba(7,16,22,.96),rgba(3,8,13,.96));
    box-shadow:none;
    padding:18px 22px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}.conditions-title span:first-child {
    font-size:18px;
    color:#facc15;
    font-weight:900;
}.conditions-title span:last-child {
    font-size:14px;
    font-weight:700;
    color:#fff;
    margin-top:7px;
}.condition-card .label {
    font-size:15px;
    color:#d1d5db;
    font-weight:900;
}.condition-card .value {
    font-size:30px;
    font-weight:900;
    line-height:1;
}.condition-card .sub {
    font-size:15px;
    color:#f3f4f6;
    margin-top:6px;
}.condition-card.temp .value::before {
    content:"☁️ ";
    font-size:32px;
}.condition-card.rain .value::before {
    content:"💧 ";
}.condition-card.wind .value::before {
    content:"≋ ";
    color:#f97316;
}.condition-card.lightning .value::before {
    content:"⚡ ";
    color:#facc15;
}.condition-card.updated {
    display:none;
}.condition-card.warn {
    background:linear-gradient(135deg,#7f1d1d,#111);
}.condition-card.caution {
    background:linear-gradient(135deg,#78350f,#111);
}.condition-card.lightning-near {
    background:linear-gradient(135deg,#713f12,#111);
    animation:pulseLightning 1.4s infinite;
}.station-summary {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
    padding:18px 22px;
    background:linear-gradient(180deg,rgba(7,16,22,.96),rgba(3,8,13,.96));
    font-weight:800;
    border-left:1px solid rgba(255,255,255,.25);
}.station-summary-title {
    font-size:16px;
    font-weight:1000;
}.station-summary-row {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    font-size:13px;
}.station-dot {
    display:inline-block;
    width:14px;
    height:14px;
    border-radius:50%;
    margin-right:5px;
    vertical-align:-2px;
    border:2px solid #fff;
}.station-dot.online {
    background:#005bea;
}.station-dot.impacted {
    background:#ef4444;
    box-shadow:0 0 12px rgba(239,68,68,.85);
}.station-dot.poi {
    background:#facc15;
    border-color:#facc15;
}.station-list-btn {
    width:100%;
    border:1px solid rgba(255,255,255,.55);
    background:rgba(255,255,255,.04);
    color:#fff;
    border-radius:5px;
    padding:9px 10px;
    font-weight:900;
    cursor:pointer;
}

 #detailOverlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.58);
    z-index:9999;
    align-items:center;
    justify-content:center;
}.detail-card {
    width:min(740px,92vw);
    max-height:88vh;
    overflow-y:auto;
    background:#071016;
    border:1px solid rgba(255,255,255,.28);
    border-radius:6px;
    padding:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.65);
}.detail-header {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}.detail-title {
    font-size:24px;
    font-weight:900;
    text-transform:uppercase;
}.close-btn {
    background:#fff;
    color:#111;
    border:0;
    border-radius:4px;
    padding:8px 10px;
    font-weight:900;
    cursor:pointer;
}.detail-section {
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.16);
}.detail-list {
    margin:8px 0 0 18px;
    padding:0;
    line-height:1.6;
}

 @keyframes pulseEmergency {
    0%{box-shadow:0 0 0 rgba(255,0,0,0)}50%{box-shadow:0 0 24px rgba(255,0,255,.85)}100%{box-shadow:0 0 0 rgba(255,0,0,0)};
}

@keyframes pulseLightning {
    0%{box-shadow:0 0 0 rgba(250,204,21,0)}50%{box-shadow:0 0 18px rgba(250,204,21,.8)}100%{box-shadow:0 0 0 rgba(250,204,21,0)};
}

 @media(max-width:1200px) {
    body{grid-template-rows:28px 72px 54px minmax(0,1fr) 112px}header{grid-template-columns:180px 1fr 145px}.layout{grid-template-columns:235px minmax(0,1fr) 330px}.bottom-bar{grid-template-columns:220px repeat(4,1fr)}.station-summary{display:none};
}

 @media(max-width:700px) {
    body{overflow:auto;
    display:block}header{height:auto;
    display:block}.top-bar{flex-wrap:wrap;
    height:auto;
    padding:6px}.zone{min-width:48%;
    height:56px}.layout{display:block}.control-rail{height:auto;
    padding:10px}.map-wrap{height:66vh}.panel{height:45vh}.bottom-bar{height:auto;
    grid-template-columns:1fr 1fr}.conditions-title{grid-column:1/-1};
}