:root {
  --ink: #07111d;
  --panel: #0b1928;
  --panel-raised: #102337;
  --line: #264055;
  --line-soft: rgba(88, 122, 148, .34);
  --text: #e8f2f8;
  --muted: #8fa8bb;
  --faint: #557186;
  --green: #88c965;
  --amber: #f3a51e;
  --red: #ed574e;
  --blue: #62aef5;
  --cyan: #66d4c3;
  --orange: #ff9026;
  --shadow: 0 18px 45px rgba(0, 0, 0, .23);
}

* { box-sizing: border-box; }
html { min-width: 1180px; height: 100%; background: var(--ink); }
body {
  height: 100%; margin: 0; overflow: hidden; background:
    radial-gradient(circle at 87% -10%, rgba(29, 102, 145, .2), transparent 31rem),
    radial-gradient(circle at 16% 111%, rgba(11, 78, 86, .14), transparent 26rem), var(--ink);
  color: var(--text); font-family: Manrope, sans-serif;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }

.app-shell { display: grid; grid-template-columns: 64px minmax(1120px, 1fr); height: 100vh; }
.rail {
  position: relative; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100vh; padding: 17px 0 12px; overflow: visible;
  background: linear-gradient(180deg, #091b2b, #07111d 75%); border-right: 1px solid rgba(113, 145, 166, .23);
}
.brand-mark { width: 22px; height: 22px; border: 2px solid var(--orange); border-radius: 5px; position: relative; margin: 0 0 12px; }
.brand-mark::before, .brand-mark::after { content: ''; position: absolute; background: var(--orange); }
.brand-mark::before { left: 2px; top: -4px; width: 6px; height: 2px; }
.brand-mark::after { right: -4px; bottom: 2px; width: 2px; height: 6px; }
.nav-group { display: grid; gap: 7px; }
.nav-link {
  display: grid; place-items: center; position: relative; width: 38px; height: 38px; border: 1px solid rgba(82, 118, 144, .13); border-radius: 9px;
  color: #91a9bb; background: rgba(10, 29, 45, .28); transition: color .17s ease, background .17s ease, border-color .17s ease, transform .17s ease;
}
.nav-link:hover { z-index: 1; color: #e5f2fb; background: #102a40; border-color: #2a536e; transform: translateY(-1px); }
.nav-link.active { color: #9ed0ff; background: linear-gradient(145deg, #153d5b, #112e46); border-color: #387093; box-shadow: inset 2px 0 0 var(--orange), 0 6px 15px rgba(0, 0, 0, .18); }
.nav-icon { display: grid; place-items: center; width: 20px; height: 20px; }
.nav-icon svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-link.active .nav-icon svg { stroke-width: 1.95; }
.nav-alert-dot { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border: 1px solid #0b1928; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px rgba(255, 144, 38, .8); }
.nav-link::after { content: attr(data-label); position: absolute; z-index: 5; left: 46px; top: 50%; padding: 6px 8px; border: 1px solid #34536b; border-radius: 5px; background: #0b2032; color: #d6e6f0; box-shadow: var(--shadow); font: 10px 'DM Mono', monospace; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-4px,-50%); transition: .16s ease; }
.nav-link:hover::after { opacity: 1; transform: translate(0,-50%); }
.nav-spacer { flex: 1; }
.rail-utility { display: grid; place-items: center; gap: 7px; }
.user-chip { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #203a51; color: #c9d9e5; font: 10px 'DM Mono', monospace; }

.app-main { position: relative; z-index: 1; min-width: 0; height: 100vh; padding: 0 16px 14px; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 61px; }
.wordmark { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.6px; }
.wordmark .slash { color: var(--orange); font-weight: 800; }
.workspace { color: #90a8b8; border-left: 1px solid #3d556a; padding-left: 10px; font: 10px 'DM Mono', monospace; letter-spacing: .05em; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.data-pill, .button-quiet, .button-primary { display: inline-flex; align-items: center; gap: 7px; height: 31px; padding: 0 10px; border: 1px solid #314d64; border-radius: 4px; background: #0b1b2b; color: #b9cbd7; font: 10px 'DM Mono', monospace; }
.data-pill .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(136,201,101,.1); }
.button-quiet:hover { border-color: var(--blue); color: white; }
.button-primary { border-color: #3e6d94; background: #123954; color: #e1f1fb; font-family: Manrope, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.button-primary:hover { background: #164766; }

.page-frame { height: calc(100vh - 75px); min-height: 650px; }
.panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(145deg, rgba(15,34,53,.98), rgba(9,25,40,.98)); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 13px; border-bottom: 1px solid var(--line-soft); }
.eyebrow, .section-title { color: #a8bbc9; font: 10px 'DM Mono', monospace; letter-spacing: .055em; }
.eyebrow em { color: var(--orange); font-style: normal; }
.section-title { color: #d2e2ec; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.caption { color: var(--muted); font-size: 10px; }
.status { display: inline-grid; place-items: center; min-width: 57px; min-height: 19px; padding: 3px 6px; border-radius: 3px; color: white; font: 700 10px 'Barlow Condensed', sans-serif; letter-spacing: .065em; }
.status.go { background: #47823c; } .status.caution { background: #ae7315; } .status.no-print { background: #a83732; } .status.setup { background: #31536d; color: #d6eafb; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 9px currentColor; }
.dot.go { color: var(--green); background: var(--green); } .dot.caution { color: var(--amber); background: var(--amber); } .dot.no-print { color: var(--red); background: var(--red); } .dot.setup { color: var(--blue); background: var(--blue); }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; padding: 11px 15px; transform: translate(-50%, 105px); border: 1px solid #416b88; border-radius: 5px; background: #15354e; color: #e1eff8; box-shadow: var(--shadow); font: 11px 'DM Mono', monospace; transition: transform .22s ease; }
.toast.show { transform: translate(-50%,0); }

/* Overview */
.overview-layout { display: grid; grid-template-columns: minmax(325px, 34.5%) minmax(700px, 1fr); height: 100%; gap: 12px; }
.map-panel { display: grid; grid-template-rows: 40px minmax(0,1fr) 74px; min-height: 0; }
.map-canvas { position: relative; display: grid; place-items: center; min-height: 0; background: #091827; }
.map-canvas::before { content: ''; position: absolute; inset: 0; opacity: .26; background: linear-gradient(90deg, rgba(123,163,186,.12) 1px, transparent 1px) 0 0/44px 44px, linear-gradient(0deg, rgba(123,163,186,.09) 1px, transparent 1px) 0 0/44px 44px; }
.map-canvas::after { content: ''; position: absolute; inset: 15% 13%; border: 1px dashed rgba(106,147,174,.35); border-radius: 6px; }
.map-slot { position: relative; z-index: 1; max-width: 230px; text-align: center; color: #839daf; }
.map-slot strong { display: block; margin-bottom: 7px; color: #ccdce7; font: 700 12px 'DM Mono', monospace; letter-spacing: .055em; }
.map-slot span { font-size: 10px; line-height: 1.55; }
.map-slot code { color: var(--orange); font: 10px 'DM Mono', monospace; }
.map-controls { position: absolute; z-index: 2; right: 13px; bottom: 13px; display: grid; gap: 4px; }
.map-controls button { width: 27px; height: 27px; border: 1px solid #37536a; border-radius: 3px; background: rgba(7,20,32,.9); color: #cce0ed; font-size: 16px; cursor: pointer; }
.map-controls button:hover { color: var(--orange); }
.radar-toggle-btn { position: absolute; z-index: 2; left: 13px; bottom: 13px; border: 1px solid #37536a; border-radius: 3px; background: rgba(7,20,32,.9); color: #cce0ed; font: 700 10px 'DM Mono', monospace; letter-spacing: .05em; padding: 6px 10px; cursor: pointer; }
.radar-toggle-btn:hover { color: var(--orange); }
.site-marker { display: flex; align-items: center; justify-content: center; }
.site-marker-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 0 6px rgba(0,0,0,.5); }
.site-marker-dot.go { background: #35c46b; }
.site-marker-dot.caution { background: #e8a63a; }
.site-marker-dot.no-print { background: #e5544f; }
.site-marker-dot.setup { background: #5a89aa; }
.leaflet-marker-icon.selected-marker .site-marker-dot { width: 19px; height: 19px; border-width: 3px; box-shadow: 0 0 0 4px rgba(255,144,38,.22), 0 0 18px rgba(255,144,38,.92); }
.leaflet-popup-content-wrapper { background: #0c1c2c; color: #e3edf4; border: 1px solid #2c4256; }
.leaflet-popup-tip { background: #0c1c2c; }
.leaflet-popup-content b { color: #fff; }
.map-site-summary { display: grid; grid-template-columns: 1.25fr 1fr; gap: 7px; padding: 10px; border-top: 1px solid var(--line-soft); }
.mini-card { padding: 8px 9px; border: 1px solid #29465c; border-radius: 4px; background: #0c2030; }
.mini-card span { color: var(--muted); font: 9px 'DM Mono', monospace; } .mini-card strong { display: block; overflow: hidden; margin-top: 4px; color: #e5f0f6; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mini-card.alert strong { color: #f3c556; }
.overview-right { display: grid; grid-template-rows: 70px 32px minmax(0,1fr) 124px; gap: 9px; min-height: 0; }
.overview-summary { display: grid; grid-template-columns: repeat(5, 1fr); }
.metric { display: flex; flex-direction: column; justify-content: center; padding: 7px 12px; border-right: 1px solid var(--line-soft); }
.metric:last-child { border-right: 0; }
.metric label { color: #9eb2c1; font: 9px 'DM Mono', monospace; text-transform: uppercase; white-space: nowrap; }
.metric strong { margin-top: 4px; color: #e9f3f8; font: 600 27px/.9 'Barlow Condensed', sans-serif; letter-spacing: .01em; }
.metric.green strong { color: var(--green); } .metric.amber strong { color: var(--amber); } .metric.red strong { color: var(--red); } .metric.window strong { font-size: 18px; } .metric.window small { display: block; overflow: hidden; margin-top: 3px; color: #7f9bae; font: 8px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.overview-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.filters { display: flex; gap: 4px; }
.filter { height: 22px; padding: 0 7px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #9db1c0; font: 9px 'DM Mono', monospace; }
.filter:hover { border-color: #36526a; } .filter.active { border-color: #36526a; background: #143049; color: #dcecf7; }
.status-key { display: flex; gap: 12px; color: #aabecb; font: 9px 'DM Mono', monospace; } .status-key span { display: flex; align-items: center; gap: 5px; }
.key { display: inline-block; width: 12px; height: 6px; border-radius: 1px; } .key.go { background: var(--green); } .key.caution { background: var(--amber); } .key.no-print { background: var(--red); }
.readiness-panel { min-height: 0; }
.ready-table, .data-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ready-table thead, .data-table thead { background: rgba(2,12,21,.35); }
.ready-table th, .data-table th { height: 25px; padding: 0 6px; border-bottom: 1px solid var(--line); color: #8fa9bb; text-align: left; font: 9px 'DM Mono', monospace; letter-spacing: .015em; text-transform: uppercase; white-space: nowrap; }
.ready-table th:first-child { padding-left: 12px; width: 22%; } .ready-table th:nth-child(2) { width: 14%; } .ready-table th:nth-child(3) { width: 10%; } .ready-table th:nth-child(4) { width: 18%; } .ready-table th:nth-child(5) { width: 15%; } .ready-table th:nth-child(6) { width: 16%; } .ready-table th:nth-child(7) { width: 5%; }
.ready-table td, .data-table td { height: 29px; padding: 3px 6px; border-bottom: 1px solid rgba(47,71,91,.65); color: #bdcfda; font-size: 9px; white-space: nowrap; }
.ready-table td:first-child { padding-left: 12px; }
.ready-table tbody tr, .data-table tbody tr { transition: .15s ease; } .ready-table tbody tr:hover, .data-table tbody tr:hover { background: rgba(54,94,120,.2); }
.ready-table tbody tr { cursor: pointer; }
.ready-table tbody tr.selected-site { background: linear-gradient(90deg, rgba(38,119,181,.24), rgba(31,73,102,.13)); box-shadow: inset 3px 0 0 var(--orange); }.ready-table tbody tr.selected-site td { border-bottom-color: rgba(107,165,201,.52); }.ready-table tbody tr.selected-site .site-name { color: #ffffff; }
.site-cell { display: flex; align-items: center; min-width: 0; gap: 7px; }
.site-number { color: #d5e6ef; font: 500 10px 'DM Mono', monospace; } .site-name { overflow: hidden; color: #e3edf4; font: 700 10px 'Barlow Condensed', sans-serif; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; } .site-name small { color: #829daf; font: 9px Manrope, sans-serif; font-weight: 500; letter-spacing: 0; }
.window-cell { color: #d3e2eb; } .window-cell small { display: block; color: #7f9bad; font-size: 8px; } .warning { color: var(--red); font-size: 13px; } .muted-cell { color: #6f899b; }
.nowcast-tile { position: relative; display: grid; width: 40px; height: 24px; padding: 0; overflow: hidden; border: 1px solid #36546b; border-radius: 2px; background: #173a33; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.nowcast-tile img { position: absolute; left: var(--nowcast-x); top: var(--nowcast-y); display: block; width: 256px; height: 256px; max-width: none; filter: saturate(.94) contrast(1.08); }
.nowcast-center-dot { position: absolute; z-index: 1; left: 50%; top: 50%; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px rgba(11,25,40,.45); transform: translate(-50%, -50%); }
.nowcast-tile:hover { border-color: #8dbbd4; transform: scale(1.08); }
.nowcast-tile.no-print { border-color: #a65b58; }
.nowcast-tile.caution { border-color: #a37e35; }
.hazard-chip { display: inline-block; max-width: 100%; padding: 3px 4px; overflow: hidden; border: 1px solid #3e657d; border-radius: 2px; color: #9fc8e1; font: 8px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.hazard-chip.medium { border-color: #8a6a2c; color: #f5cc78; }.hazard-chip.high { border-color: #99504b; color: #ffb0aa; }
.readiness-driver-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; color: #c6d8e3; font: 9px 'DM Mono', monospace; }.readiness-driver-grid span { white-space: nowrap; }.readiness-driver-grid i { display: inline-block; width: 27px; color: #7696aa; font-size: 7px; font-style: normal; }
.exposure-panel { padding: 9px 11px 10px; }
.exposure-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.exposure-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.exposure-card { display: grid; grid-template-rows: 18px minmax(22px, 1fr) 12px; align-items: start; min-width: 0; height: 76px; padding: 8px 9px 7px; border: 1px solid #29455b; border-radius: 4px; background: rgba(4,15,25,.3); }
.exposure-card label { overflow: hidden; color: #a7bbc9; font: 8px/1.2 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; } .exposure-card strong { align-self: center; overflow: hidden; margin: 0; color: #dceaf2; font: 600 25px/.85 'Barlow Condensed', sans-serif; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; } .exposure-card small { margin-left: 2px; font-size: 10px; } .exposure-card span { align-self: end; overflow: hidden; color: #8faabb; font: 8px/1.1 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.exposure-card.alert strong { color: var(--red); } .exposure-card.warning-card strong { color: var(--amber); } .exposure-card.heat strong { color: var(--orange); } .exposure-card.hail strong { color: #b8d3ff; } .exposure-card.tornado strong { color: #f08e83; }
.portfolio-counts { display: grid; grid-template-columns: 1fr 1fr; padding: 0; overflow: hidden; }
.portfolio-counts .tiny-grid { background: linear-gradient(135deg, #294638, #1a3940); border-right: 1px solid #2a4558; }
.count-list { padding: 8px; } .count-list div { margin-bottom: 4px; color: #b9cbd6; font: 8px 'DM Mono', monospace; } .count-list b { display: inline-block; width: 17px; margin-right: 4px; padding: 1px; border-radius: 2px; color: #07111d; text-align: center; }

/* Secondary pages */
.page-grid { display: grid; grid-template-columns: minmax(0,1fr) 296px; height: 100%; gap: 12px; }
.page-column { display: grid; min-height: 0; gap: 12px; }
.page-column.two-row { grid-template-rows: 96px minmax(0,1fr); }
.page-column.three-row { grid-template-rows: 85px minmax(0,1fr) 170px; }
.sidebar-stack { display: grid; grid-template-rows: 166px minmax(0,1fr); min-height: 0; gap: 12px; }
.page-hero { padding: 15px 17px; }
.page-hero h1 { margin: 5px 0 4px; font: 700 29px/.95 'Barlow Condensed', sans-serif; letter-spacing: .025em; } .page-hero p { margin: 0; color: var(--muted); font-size: 11px; }
.stat-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 10px; }
.stat-box { padding: 10px; border: 1px solid #29465c; border-radius: 4px; background: #0c2030; } .stat-box label { color: #93aab9; font: 8px 'DM Mono', monospace; } .stat-box strong { display: block; margin-top: 5px; color: #e8f2f7; font: 600 24px/.9 'Barlow Condensed', sans-serif; }
.table-controls { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.search { width: 200px; height: 27px; padding: 0 9px; border: 1px solid #304d64; border-radius: 4px; background: #091b2a; color: #e5f2fb; font: 10px 'DM Mono', monospace; } .search::placeholder { color: #7891a4; }
.wide-table-wrap { max-height: calc(100% - 44px); overflow: auto; }
.data-table th, .data-table td { height: 35px; padding: 6px 11px; font-size: 10px; } .data-table th { height: 29px; } .data-table tr { cursor: pointer; }
.source-list { padding: 8px 13px; } .source-row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; border-bottom: 1px solid rgba(46,72,93,.65); color: #c3d3dd; font-size: 10px; } .source-row small { color: #82a0b3; font: 9px 'DM Mono', monospace; } .source-row b { color: var(--green); font: 9px 'DM Mono', monospace; }
.map-install { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 20px; text-align: center; background: #091827; } .map-install .map-frame { width: 100%; height: 116px; margin-bottom: 12px; border: 1px dashed #3a5870; border-radius: 5px; background: linear-gradient(90deg, rgba(107,157,192,.09) 1px, transparent 1px) 0 0/26px 26px, linear-gradient(0deg, rgba(107,157,192,.06) 1px, transparent 1px) 0 0/26px 26px; } .map-install strong { font: 700 11px 'DM Mono', monospace; } .map-install span { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.timeline-card { padding: 12px; } .horizon { display: grid; grid-template-columns: 130px repeat(8,1fr); gap: 2px; margin-top: 12px; } .horizon > div { min-height: 33px; padding: 5px; border-radius: 2px; background: #12273a; color: #9bb2c1; font: 8px 'DM Mono', monospace; } .horizon .h-head { background: transparent; color: #7f9bae; } .horizon .risk-low { background: #294e37; color: #d0ecca; } .horizon .risk-med { background: #754f19; color: #f5deaa; } .horizon .risk-high { background: #772e2c; color: #ffd5d0; }
.alert-list { padding: 0 13px; }
.alert-item { display: grid; grid-template-columns: 10px minmax(0,1fr) 38px 112px; gap: 10px; align-items: center; min-height: 66px; border-bottom: 1px solid rgba(46,72,93,.65); }
.alert-item .dot { justify-self: center; }
.alert-item h3 { margin: 0; color: #dfebf3; font-size: 11px; line-height: 1.2; }
.alert-item p { margin: 4px 0 0; color: #91aabb; font-size: 9px; line-height: 1.35; }
.alert-item time { color: #7795aa; text-align: right; font: 9px 'DM Mono', monospace; }
.ack { height: 26px; min-width: 112px; padding: 0 9px; border: 1px solid #35556c; border-radius: 3px; background: #0c2030; color: #c4d9e8; font: 9px 'DM Mono', monospace; white-space: nowrap; }
.ack:hover { border-color: var(--blue); background: #102a40; }
.ack.done { border-color: #3e6b45; color: var(--green); }
.chart-panel { padding: 13px; } .chart-title { display: flex; align-items: center; justify-content: space-between; color: #c8dae6; font: 11px 'DM Mono', monospace; } .chart-legend { color: #87a5b9; font: 9px 'DM Mono', monospace; } .chart { height: 225px; margin-top: 9px; border-left: 1px solid #29465d; border-bottom: 1px solid #29465d; background: repeating-linear-gradient(0deg, transparent 0 43px, rgba(95,131,154,.15) 44px 45px); position: relative; overflow: hidden; } .chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-column.three-row .chart-panel { display: flex; flex-direction: column; min-height: 0; }
.page-column.three-row .chart-panel .chart { flex: 1 1 auto; height: auto; min-height: 0; }
.analytics-chart-panel { padding-bottom: 0; }
.analytics-chart-context { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 0; color: #88a4b6; font: 8px 'DM Mono', monospace; }
.signal-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; } .signal-dot.blue { background: var(--blue); box-shadow: 0 0 8px rgba(98,174,245,.75); }
.analytics-chart { margin-top: 7px; }
.chart-label { position: absolute; z-index: 2; padding: 3px 5px; border: 1px solid #38556c; border-radius: 2px; background: rgba(7,22,34,.86); color: #bcd3e1; font: 8px 'DM Mono', monospace; white-space: nowrap; }
.chart-label-peak { left: 33%; top: 19%; border-color: rgba(98,174,245,.55); color: #98cefc; }
.chart-label-hold { left: 55%; top: 39%; border-color: rgba(237,87,78,.46); color: #ffaca7; }
.chart-hours { position: absolute; z-index: 2; right: 0; bottom: 6px; left: 0; display: flex; justify-content: space-between; padding: 0 5px; color: #85a0b2; font: 8px 'DM Mono', monospace; pointer-events: none; }
.analytics-chart-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 9px -13px 0; border-top: 1px solid var(--line-soft); background: var(--line-soft); }
.analytics-chart-summary > div { min-width: 0; padding: 9px 13px 10px; background: rgba(8,25,39,.8); }
.analytics-chart-summary label { display: block; color: #91a9b9; font: 8px 'DM Mono', monospace; letter-spacing: .04em; }
.analytics-chart-summary strong { display: block; margin-top: 3px; color: var(--green); font: 600 22px/.9 'Barlow Condensed', sans-serif; }
.analytics-chart-summary strong small { font-size: 10px; } .analytics-chart-summary strong.amber { color: var(--amber); } .analytics-chart-summary strong.red { color: var(--red); }
.analytics-chart-summary span { display: block; overflow: hidden; margin-top: 4px; color: #849eaf; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.analytics-outcomes-panel { min-height: 0; }
.outcome-grid { display: grid; grid-template-columns: repeat(4, 1fr); height: calc(100% - 40px); }
.outcome-step { display: grid; grid-template-columns: 25px minmax(0, 1fr); column-gap: 8px; align-content: center; position: relative; padding: 10px 12px; border-right: 1px solid var(--line-soft); }
.outcome-step:last-child { border-right: 0; }
.outcome-number { display: grid; place-items: center; grid-row: 1 / span 2; width: 23px; height: 23px; border: 1px solid #3c6077; border-radius: 50%; color: var(--orange); font: 9px 'DM Mono', monospace; }
.outcome-step b { color: #d8e7ef; font-size: 10px; } .outcome-step p { margin: 3px 0 0; color: #8fa9ba; font-size: 8px; line-height: 1.35; }
.outcome-step em { position: absolute; top: 10px; right: 11px; color: #829eaf; font: 8px 'DM Mono', monospace; font-style: normal; }
.outcome-step:nth-child(2) em { color: var(--green); }
.weather-chart-panel { padding-bottom: 0; }
.weather-chart-context { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; color: #8ba4b5; font: 8px 'DM Mono', monospace; }
.signal-dot.amber { background: var(--amber); box-shadow: 0 0 8px rgba(243,165,30,.72); }
.weather-chart { margin-top: 7px; }
.weather-label-gust { left: 56%; top: 15%; border-color: rgba(98,174,245,.56); color: #a0d2ff; }
.weather-label-rain { left: 56%; top: 40%; border-color: rgba(243,165,30,.56); color: #ffd183; }
.weather-peak-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: 9px -13px 0; border-top: 1px solid var(--line-soft); background: var(--line-soft); }
.weather-peak-grid > div { min-width: 0; padding: 9px 12px 10px; background: rgba(8,25,39,.8); }
.weather-peak-grid label { display: block; color: #91a9b9; font: 8px 'DM Mono', monospace; letter-spacing: .04em; }
.weather-peak-grid strong { display: block; margin-top: 3px; color: var(--blue); font: 600 22px/.9 'Barlow Condensed', sans-serif; }
.weather-peak-grid strong small { font-size: 10px; } .weather-peak-grid strong.amber { color: var(--amber); } .weather-peak-grid strong.red { color: var(--red); } .weather-peak-grid strong.orange { color: var(--orange); }
.weather-peak-grid span { display: block; overflow: hidden; margin-top: 4px; color: #849eaf; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.weather-timeline-card { padding-bottom: 9px; }
.weather-timeline-card .horizon { margin-top: 8px; }
.weather-timeline-card .horizon > div { min-height: 27px; padding: 4px; }
.settings-list { padding: 0 13px; } .setting { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid rgba(46,72,93,.65); } .setting b { display: block; color: #d5e5ee; font-size: 11px; } .setting span { display: block; margin-top: 3px; color: #8fa9bb; font-size: 9px; } .toggle { width: 32px; height: 18px; padding: 2px; border: 1px solid #3d5a6f; border-radius: 18px; background: #132537; transition: .16s ease; } .toggle i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #7593a8; transition: .16s ease; } .toggle.on { border-color: #548d5d; background: #214e35; } .toggle.on i { transform: translateX(14px); background: var(--green); }
.appearance-panel { min-height: 0; }
.theme-options { display: grid; gap: 7px; padding: 10px 12px 12px; }
.theme-option { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 9px; align-items: center; width: 100%; min-height: 61px; padding: 7px; border: 1px solid #2d4a61; border-radius: 5px; background: #0a1d2d; color: inherit; text-align: left; transition: .16s ease; }
.theme-option:hover { border-color: #4a738d; background: #10283b; }
.theme-option.selected { border-color: #4d819f; background: #103047; box-shadow: inset 2px 0 0 var(--orange); }
.theme-option > span:nth-child(2) { min-width: 0; }
.theme-option b { display: block; color: #dbe9f1; font-size: 10px; }
.theme-option small { display: block; margin-top: 3px; color: #89a4b6; font-size: 8px; line-height: 1.25; }
.theme-option em { color: #8ba7b9; font: 8px 'DM Mono', monospace; font-style: normal; }
.theme-option.selected em { color: var(--orange); }
.theme-swatch { display: grid; grid-template-columns: 15px 1fr; grid-template-rows: 8px 1fr; gap: 3px; width: 54px; height: 39px; padding: 4px; border: 1px solid #3b5c71; border-radius: 3px; }
.theme-swatch i { display: block; border-radius: 1px; }
.theme-swatch i:first-child { grid-row: 1 / span 2; }
.dark-swatch { background: #081725; } .dark-swatch i:first-child { background: #102d44; } .dark-swatch i:nth-child(2) { background: #214761; } .dark-swatch i:last-child { background: #0e2234; }
.light-swatch { border-color: #b6c9d3; background: #edf3f6; } .light-swatch i:first-child { background: #d4e0e6; } .light-swatch i:nth-child(2) { background: #a9c4d4; } .light-swatch i:last-child { background: #f9fbfc; }
.integration-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 13px 8px; border: 1px solid #2d4a61; border-radius: 4px; background: #0b1f30; } .integration-icon { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #3b5b70; border-radius: 4px; color: var(--orange); font: 12px 'DM Mono', monospace; } .integration-card b { display: block; color: #d6e6ef; font-size: 10px; } .integration-card span { color: #8ca7b9; font: 8px 'DM Mono', monospace; }
.billing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 12px; } .plan-card { display: flex; flex-direction: column; min-height: 230px; padding: 15px; border: 1px solid #2d4a61; border-radius: 5px; background: linear-gradient(150deg, rgba(16,40,59,.78), rgba(7,20,32,.72)); } .plan-card.featured { border-color: #4a738d; box-shadow: inset 0 2px 0 var(--orange); } .plan-tag { color: var(--orange); font: 9px 'DM Mono', monospace; letter-spacing: .055em; } .plan-card h2 { margin: 8px 0 5px; color: #e5eff5; font: 700 26px/.9 'Barlow Condensed', sans-serif; letter-spacing: .025em; } .plan-card p { min-height: 39px; margin: 0; color: #96afbe; font-size: 10px; line-height: 1.45; } .plan-card ul { flex: 1; padding: 0; margin: 12px 0; list-style: none; } .plan-card li { margin: 6px 0; color: #c1d1db; font-size: 9px; } .plan-card li::before { content: '✓'; margin-right: 6px; color: var(--green); } .plan-card button { width: 100%; } .plan-card button:disabled { opacity: .65; cursor: wait; }
.billing-state { padding: 15px; } .billing-state strong { display: block; color: #e6f1f7; font: 600 22px/.95 'Barlow Condensed', sans-serif; } .billing-state p { margin: 7px 0 14px; color: #93adbd; font-size: 10px; line-height: 1.5; } .billing-status-list { padding: 0 13px; } .billing-status-row { display: flex; justify-content: space-between; min-height: 39px; align-items: center; border-bottom: 1px solid rgba(46,72,93,.65); color: #b7c9d6; font-size: 10px; } .billing-status-row b { color: #87a7b9; font: 9px 'DM Mono', monospace; }
.auth-layout { display: grid; grid-template-columns: minmax(390px, .85fr) minmax(400px, 1.15fr); gap: 12px; height: 100%; } .auth-promise { display: flex; flex-direction: column; justify-content: center; padding: 34px; background: linear-gradient(145deg, rgba(15,38,57,.98), rgba(8,23,37,.98)); } .auth-promise .eyebrow { color: var(--orange); } .auth-promise h1 { max-width: 450px; margin: 12px 0; color: #e8f3f9; font: 700 45px/.94 'Barlow Condensed', sans-serif; letter-spacing: .005em; } .auth-promise p { max-width: 400px; color: #a1b7c5; font-size: 12px; line-height: 1.6; } .auth-steps { display: grid; gap: 11px; margin-top: 20px; } .auth-step { display: grid; grid-template-columns: 23px 1fr; gap: 9px; align-items: start; } .auth-step i { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #41627a; border-radius: 50%; color: var(--orange); font: 10px 'DM Mono', monospace; font-style: normal; } .auth-step b { display: block; color: #d6e5ed; font-size: 11px; } .auth-step span { display: block; margin-top: 3px; color: #8da7b9; font-size: 9px; line-height: 1.45; } .auth-card { display: flex; align-items: center; justify-content: center; padding: 30px; } .auth-form { width: min(410px, 100%); padding: 20px; border: 1px solid #34536a; border-radius: 6px; background: rgba(7,22,34,.64); box-shadow: var(--shadow); } .auth-form h2 { margin: 0 0 5px; color: #e5eff5; font: 700 30px/.9 'Barlow Condensed', sans-serif; } .auth-form > p { margin: 0 0 17px; color: #8faabc; font-size: 10px; line-height: 1.5; } .auth-form .button-primary { justify-content: center; width: 100%; margin-top: 16px; } .auth-form .button-primary:disabled { opacity: .65; cursor: wait; } .form-message { min-height: 15px; margin-top: 9px; color: #89c969; font: 9px 'DM Mono', monospace; } .auth-footer { margin: 13px 0 0; color: #91aabb; text-align: center; font-size: 10px; } .auth-footer a { color: #79baff; } .terms-check { display: flex; gap: 7px; align-items: start; margin-top: 12px; color: #91aabc; font-size: 9px; line-height: 1.45; } .terms-check input { margin: 1px 0 0; accent-color: var(--orange); }
.help-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 14px; } .help-card { padding: 13px; border: 1px solid #2d4a61; border-radius: 5px; background: #0a1d2d; } .help-card .help-icon { color: var(--orange); font: 24px 'Barlow Condensed', sans-serif; } .help-card h3 { margin: 7px 0 5px; font-size: 12px; } .help-card p { margin: 0; color: #94adbd; font-size: 10px; line-height: 1.5; } .help-card a { display: inline-block; margin-top: 10px; color: #78baff; font: 9px 'DM Mono', monospace; }
.site-detail-grid { display: grid; grid-template-columns: 1.35fr .8fr; height: 100%; gap: 12px; } .site-detail-main { display: grid; grid-template-rows: 92px minmax(205px,.83fr) minmax(0,1fr); gap: 12px; min-height: 0; } .site-detail-side { display: grid; grid-template-rows: 176px minmax(0,1fr); gap: 12px; min-height: 0; }
.detail-hero { display: flex; align-items: center; justify-content: space-between; padding: 16px; } .detail-hero h1 { margin: 6px 0 4px; font: 700 32px/.9 'Barlow Condensed', sans-serif; letter-spacing: .02em; } .detail-hero p { margin: 0; color: var(--muted); font-size: 11px; } .detail-hero .status { padding: 7px 14px; font-size: 13px; }
.driver-list { padding: 0 14px; } .driver { display: flex; justify-content: space-between; align-items: center; height: 39px; border-bottom: 1px solid rgba(46,72,93,.65); color: #bed1dc; font-size: 10px; } .driver b { color: #f0b54c; font: 10px 'DM Mono', monospace; }
.site-map { position: relative; min-height: 0; overflow: hidden; background: #0a1a28; } .site-map::after { content: ''; position: absolute; z-index: 1; inset: 0; border: 1px solid rgba(103,167,185,.25); border-radius: inherit; box-shadow: inset 0 0 38px rgba(0,0,0,.32); pointer-events: none; } .site-map-content { position: absolute; z-index: 0; inset: 0; } .site-map-label { position: absolute; z-index: 3; top: 12px; left: 13px; color: #dae8f0; font: 700 10px 'DM Mono', monospace; letter-spacing: .035em; text-shadow: 0 1px 6px rgba(0,0,0,.72); } .site-map-label small { display: block; margin-top: 4px; color: #d3e2ea; font: 9px Manrope, sans-serif; font-weight: 500; letter-spacing: 0; } .site-map-coordinates { position: absolute; z-index: 3; right: 12px; bottom: 12px; padding: 5px 7px; border: 1px solid #315169; border-radius: 3px; background: rgba(5,16,25,.76); color: #b8ccd9; font: 9px 'DM Mono', monospace; } .site-map-slot { position: absolute; z-index: 3; right: 12px; top: 12px; color: #d3e1e8; font: 8px 'DM Mono', monospace; text-shadow: 0 1px 6px rgba(0,0,0,.72); }
.site-map-controls { position: absolute; z-index: 3; right: 11px; bottom: 42px; display: flex; gap: 4px; }
.site-map-controls button { height: 25px; padding: 0 7px; border: 1px solid #315169; border-radius: 3px; background: rgba(5,16,25,.82); color: #c5d8e5; font: 8px 'DM Mono', monospace; }
.site-map-controls button:last-child { width: 25px; padding: 0; font-size: 14px; }
.site-map-controls button:hover { border-color: #78afcf; color: var(--orange); }
.site-weather-panel { display: flex; min-height: 0; flex-direction: column; padding-bottom: 10px; }
.site-weather-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0; color: #88a4b7; font: 8px 'DM Mono', monospace; }
.site-weather-context b { color: #dcebf4; font: 8px 'DM Mono', monospace; }
.site-weather-chart { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 8px; overflow: hidden; border: 1px solid #29465d; border-radius: 4px; background: repeating-linear-gradient(0deg, transparent 0 24%, rgba(95,131,154,.16) 24.4% 25%), repeating-linear-gradient(90deg, transparent 0 14%, rgba(95,131,154,.10) 14.25% 14.5%), #0a1a28; }
.site-weather-chart svg { position: absolute; z-index: 1; inset: 7px 8px 27px 24px; width: calc(100% - 32px); height: calc(100% - 34px); }
.weather-axis { position: absolute; z-index: 2; top: 12px; bottom: 31px; left: 5px; display: flex; flex-direction: column; justify-content: space-between; color: #7f9bae; font: 7px 'DM Mono', monospace; }
.weather-event-band { position: absolute; z-index: 0; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(237,87,78,.26), rgba(237,87,78,.04)); border-left: 1px solid rgba(237,87,78,.6); border-right: 1px solid rgba(237,87,78,.38); }
.weather-event-band span { position: absolute; top: 6px; left: 5px; color: #ffb1ab; font: 8px 'DM Mono', monospace; white-space: nowrap; }
.weather-hours { position: absolute; z-index: 2; right: 8px; bottom: 8px; left: 24px; display: flex; justify-content: space-between; color: #829fb1; font: 8px 'DM Mono', monospace; }
.weather-readouts { position: absolute; z-index: 3; top: 8px; right: 9px; display: flex; gap: 5px; }
.weather-readouts span { padding: 3px 4px; border: 1px solid rgba(67,99,122,.7); border-radius: 2px; background: rgba(6,18,29,.76); color: #b1c8d6; font: 7px 'DM Mono', monospace; }
.weather-readouts b { color: #edf5fa; font-weight: 500; }
.weather-readouts i { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; }
.rain-swatch { background: #62aef5; } .gust-swatch { background: #f3a51e; } .lightning-swatch { background: #ed574e; }
.modal-backdrop.nowcast-modal { z-index: 70; }
.nowcast-dialog { display: grid; grid-template-rows: 78px minmax(360px,1fr) 34px; width: min(780px, calc(100vw - 120px)); height: min(600px, calc(100vh - 90px)); overflow: hidden; border: 1px solid #426b86; border-radius: 8px; background: #0b1a29; box-shadow: 0 28px 90px rgba(0,0,0,.56); }
.nowcast-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 14px 17px; border-bottom: 1px solid var(--line-soft); }
.nowcast-dialog h2 { margin: 5px 0 2px; color: #edf5fa; font: 700 24px/.9 'Barlow Condensed', sans-serif; }
.nowcast-dialog p { margin: 0; color: #9bb2c1; font-size: 10px; }
.nowcast-actions { display: flex; align-items: center; gap: 8px; }
.nowcast-close { width: 30px; height: 30px; padding: 0; border: 1px solid #3d5c72; border-radius: 4px; background: #10293c; color: #d4e3ec; font-size: 21px; line-height: 1; }
.nowcast-map { min-height: 0; background: #0d2332; }
.nowcast-dialog footer { display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-top: 1px solid var(--line-soft); color: #89a4b6; font: 8px 'DM Mono', monospace; }
.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: none; place-items: center; background: rgba(3,10,17,.68); backdrop-filter: blur(3px); } .modal-backdrop.open { display: grid; } .modal { width: 420px; padding: 16px; border: 1px solid #395b74; border-radius: 6px; background: #0c2030; box-shadow: 0 24px 70px rgba(0,0,0,.45); } .modal h2 { margin: 0 0 13px; font: 700 22px 'Barlow Condensed', sans-serif; } .field { margin-top: 10px; } .field label { display: block; margin-bottom: 4px; color: #9db4c3; font: 9px 'DM Mono', monospace; } .field input, .field select { width: 100%; height: 31px; padding: 0 8px; border: 1px solid #35546b; border-radius: 4px; background: #091a29; color: #dcebf4; font-size: 11px; } .field small { display: block; margin-top: 4px; color: #7894a8; font-size: 8px; line-height: 1.35; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .modal-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 16px; } .use-location { height: 25px; margin-top: 5px; border: 1px solid #36566d; border-radius: 3px; background: #102a40; color: #cce3f2; font: 9px 'DM Mono', monospace; } .use-location:hover { border-color: var(--blue); color: white; }

@media (max-height: 840px) {
  .topbar { height: 51px; } .page-frame { height: calc(100vh - 63px); }
  .overview-right { grid-template-rows: 60px 28px minmax(0,1fr) 108px; gap: 7px; }
  .metric strong { font-size: 23px; } .metric.window strong { font-size: 16px; }
  .ready-table th { height: 22px; } .ready-table td { height: 25px; font-size: 8px; } .status { min-height: 17px; font-size: 9px; }
  .exposure-card { grid-template-rows: 15px minmax(20px,1fr) 10px; height: 62px; padding: 6px 7px; } .exposure-card strong { font-size: 21px; } .exposure-card span { font-size: 7px; }
}

/* Daylight workspace */
body[data-theme="light"] {
  --ink: #eef4f7;
  --panel: #ffffff;
  --panel-raised: #f8fbfc;
  --line: #c8d8e1;
  --line-soft: rgba(92, 122, 142, .28);
  --text: #102334;
  --muted: #5d7485;
  --faint: #7890a0;
  --blue: #2677b5;
  --cyan: #168a7f;
  --orange: #e66c13;
  --shadow: 0 14px 34px rgba(31, 65, 88, .11);
  background: radial-gradient(circle at 88% -8%, rgba(73, 153, 199, .16), transparent 32rem), radial-gradient(circle at 12% 112%, rgba(44, 139, 125, .1), transparent 28rem), #eef4f7;
  color: #102334;
}
body[data-theme="light"] .rail { background: linear-gradient(180deg, #fafdff, #e6eff4 75%); border-right-color: #c5d5df; }
body[data-theme="light"] .app-main { background: transparent; }
body[data-theme="light"] .brand-mark { border-color: var(--orange); }
body[data-theme="light"] .brand-mark::before, body[data-theme="light"] .brand-mark::after { background: var(--orange); }
body[data-theme="light"] .nav-link { color: #60798b; border-color: rgba(119, 150, 169, .17); background: rgba(255,255,255,.5); }
body[data-theme="light"] .nav-link:hover { color: #173e5a; border-color: #9bbdce; background: #f7fbfd; }
body[data-theme="light"] .nav-link.active { color: #176aa3; border-color: #83b5d0; background: linear-gradient(145deg, #e5f3fa, #d6eaf5); box-shadow: inset 2px 0 0 var(--orange), 0 5px 13px rgba(38, 92, 124, .1); }
body[data-theme="light"] .nav-link::after { border-color: #9bb9ca; background: #18364c; color: #f8fbfd; }
body[data-theme="light"] .user-chip { background: #c9dce7; color: #183b54; }
body[data-theme="light"] .wordmark { color: #15314a; }
body[data-theme="light"] .workspace { color: #5d7587; border-left-color: #b9cbd6; }
body[data-theme="light"] .data-pill, body[data-theme="light"] .button-quiet, body[data-theme="light"] .button-primary { border-color: #b8ccd8; background: rgba(255,255,255,.76); color: #36546a; }
body[data-theme="light"] .button-primary { border-color: #5c99bc; background: #e2f1f9; color: #174f76; }
body[data-theme="light"] .button-primary:hover { background: #cfe9f6; }
body[data-theme="light"] .panel { border-color: #bed1dc; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,249,251,.98)); }
body[data-theme="light"] .panel-head { border-bottom-color: #d8e4ea; }
body[data-theme="light"] .eyebrow, body[data-theme="light"] .section-title { color: #38566a; }
body[data-theme="light"] .caption { color: #647b8c; }
body[data-theme="light"] .page-hero h1, body[data-theme="light"] .detail-hero h1, body[data-theme="light"] .auth-promise h1 { color: #15314a; }
body[data-theme="light"] .page-hero p, body[data-theme="light"] .detail-hero p { color: #5e7587; }
body[data-theme="light"] .map-canvas, body[data-theme="light"] .map-install, body[data-theme="light"] .site-map { background: #eaf2f6; }
body[data-theme="light"] .map-canvas::before { opacity: .75; }
body[data-theme="light"] .map-slot { color: #60798c; }
body[data-theme="light"] .map-slot strong { color: #254458; }
body[data-theme="light"] .map-controls button { border-color: #b6cbd8; background: rgba(255,255,255,.9); color: #315269; }
body[data-theme="light"] .mini-card, body[data-theme="light"] .exposure-card, body[data-theme="light"] .stat-box, body[data-theme="light"] .theme-option, body[data-theme="light"] .integration-card, body[data-theme="light"] .plan-card { border-color: #c8d9e2; background: #f9fcfd; }
body[data-theme="light"] .mini-card strong, body[data-theme="light"] .exposure-card strong, body[data-theme="light"] .stat-box strong { color: #1a3549; }
body[data-theme="light"] .metric { border-right-color: #d5e1e7; }
body[data-theme="light"] .metric strong { color: #163149; }
body[data-theme="light"] .overview-toolbar, body[data-theme="light"] .ready-table thead, body[data-theme="light"] .data-table thead { background: rgba(218,231,238,.48); }
body[data-theme="light"] .ready-table th, body[data-theme="light"] .data-table th { border-bottom-color: #c8d9e2; color: #597386; }
body[data-theme="light"] .ready-table td, body[data-theme="light"] .data-table td { border-bottom-color: #d9e5ea; color: #365164; }
body[data-theme="light"] .ready-table tbody tr:hover, body[data-theme="light"] .data-table tbody tr:hover { background: #eaf4f8; }
body[data-theme="light"] .site-number, body[data-theme="light"] .site-name { color: #1e3d52; }
body[data-theme="light"] .source-row, body[data-theme="light"] .alert-item, body[data-theme="light"] .setting, body[data-theme="light"] .driver, body[data-theme="light"] .billing-status-row { border-bottom-color: #d8e4ea; color: #355267; }
body[data-theme="light"] .alert-item h3, body[data-theme="light"] .setting b, body[data-theme="light"] .theme-option b, body[data-theme="light"] .integration-card b { color: #1b394e; }
body[data-theme="light"] .alert-item p, body[data-theme="light"] .setting span, body[data-theme="light"] .theme-option small, body[data-theme="light"] .integration-card span { color: #61798a; }
body[data-theme="light"] .ack { border-color: #a9c2d1; background: #f7fbfc; color: #31536b; }
body[data-theme="light"] .ack:hover { background: #e6f3f9; }
body[data-theme="light"] .theme-option:hover { border-color: #91b7cc; background: #f3f9fc; }
body[data-theme="light"] .theme-option.selected { border-color: #6ba5c5; background: #e7f4fa; }
body[data-theme="light"] .toggle { border-color: #b2c7d3; background: #e6eef2; }
body[data-theme="light"] .toast { border-color: #80abc1; background: #e3f2fa; color: #1d4762; }
body[data-theme="light"] .chart-label { border-color: #9bbdce; background: rgba(255,255,255,.92); color: #31546a; }
body[data-theme="light"] .chart-label-peak { border-color: #7fb4d3; color: #1f6b9b; }
body[data-theme="light"] .chart-label-hold { border-color: #d59992; color: #a43b34; }
body[data-theme="light"] .analytics-chart-summary { background: #d6e3e9; }
body[data-theme="light"] .analytics-chart-summary > div { background: #f8fbfc; }
body[data-theme="light"] .outcome-step { border-right-color: #d6e3e9; }
body[data-theme="light"] .outcome-step b { color: #1d3b50; }
body[data-theme="light"] .outcome-step p, body[data-theme="light"] .analytics-chart-summary span { color: #617989; }
body[data-theme="light"] .weather-peak-grid { background: #d6e3e9; }
body[data-theme="light"] .weather-peak-grid > div { background: #f8fbfc; }
body[data-theme="light"] .weather-peak-grid span { color: #617989; }
body[data-theme="light"] .weather-label-gust { border-color: #7fb4d3; color: #1f6b9b; }
body[data-theme="light"] .weather-label-rain { border-color: #d9ae67; color: #9c6112; }
body[data-theme="light"] .site-weather-chart { border-color: #c8d9e2; background: repeating-linear-gradient(0deg, transparent 0 24%, rgba(117,151,171,.2) 24.4% 25%), repeating-linear-gradient(90deg, transparent 0 14%, rgba(117,151,171,.13) 14.25% 14.5%), #f6fafc; }
body[data-theme="light"] .weather-readouts span { border-color: #aec6d4; background: rgba(255,255,255,.86); color: #4d6d80; }
body[data-theme="light"] .weather-readouts b, body[data-theme="light"] .site-weather-context b { color: #183b53; }
body[data-theme="light"] .weather-event-band { background: linear-gradient(180deg, rgba(237,87,78,.2), rgba(237,87,78,.04)); }
body[data-theme="light"] .weather-event-band span { color: #a84740; }
body[data-theme="light"] .site-map-controls button { border-color: #a5becd; background: rgba(255,255,255,.88); color: #294d64; }
body[data-theme="light"] .nowcast-dialog { border-color: #9bb9cb; background: #f7fbfd; }
body[data-theme="light"] .nowcast-dialog h2 { color: #16344b; }
body[data-theme="light"] .nowcast-dialog p, body[data-theme="light"] .nowcast-dialog footer { color: #5e7889; }
body[data-theme="light"] .nowcast-map { background: #e7f0f5; }
body[data-theme="light"] .nowcast-close { border-color: #acc4d2; background: #f2f8fb; color: #2c5269; }

/* Decision engine and site-reference surfaces */
.rules-panel { min-height: 0; }
.rules-shell { display: grid; grid-template-columns: 178px minmax(0, 1fr); height: calc(100% - 40px); min-height: 0; }
.rule-profile-list { display: flex; flex-direction: column; gap: 7px; padding: 13px; border-right: 1px solid var(--line-soft); }
.rule-profile { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 7px; padding: 9px 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: .16s ease; }
.rule-profile:hover { border-color: #37566c; background: rgba(22,50,70,.28); }
.rule-profile.active { border-color: #4f7f9b; background: rgba(45,107,146,.16); box-shadow: inset 2px 0 0 var(--orange); }
.rule-profile > span { grid-row: span 2; color: #698ca3; font: 10px 'DM Mono', monospace; }
.rule-profile b { color: #dcecf5; font: 700 11px 'Manrope', sans-serif; }
.rule-profile small { margin-top: 2px; color: #7894a7; font-size: 9px; }
.rule-profile-note { margin-top: auto; padding: 10px 3px 0; border-top: 1px solid var(--line-soft); color: #7894a7; font-size: 9px; line-height: 1.48; }
.rule-editor { display: flex; flex-direction: column; min-width: 0; padding: 14px 16px 12px; }
.rule-editor-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.rule-editor-heading .caption { display: block; margin-bottom: 3px; }
.rule-editor-heading b { display: block; color: #e1edf4; font: 600 17px 'Barlow Condensed', sans-serif; letter-spacing: .025em; }
.text-button { padding: 3px 0; border: 0; background: transparent; color: #81acc8; font: 700 9px 'DM Mono', monospace; letter-spacing: .08em; cursor: pointer; }
.text-button:hover { color: var(--orange); }
.rule-editor > p { max-width: 620px; margin: 8px 0 11px; color: #91aabb; font-size: 9px; line-height: 1.45; }
.rule-input-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rule-input-grid label { display: block; color: #7f9bad; font: 8px 'DM Mono', monospace; letter-spacing: .025em; text-transform: uppercase; }
.rule-input-grid label span { display: flex; align-items: center; margin-top: 5px; border: 1px solid #36536a; border-radius: 3px; background: rgba(5,16,27,.35); }
.rule-input-grid input { width: 100%; min-width: 0; padding: 7px 0 7px 8px; border: 0; outline: 0; background: transparent; color: #e6f1f7; font: 600 13px 'DM Mono', monospace; }
.rule-input-grid em { padding: 0 7px 0 3px; color: #728fa3; font: 8px 'DM Mono', monospace; font-style: normal; }
.rule-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.rule-editor-footer span { color: #7895a8; font-size: 9px; }
.rule-editor-footer .button-primary { min-width: 114px; }
.delivery-policy { padding: 12px 13px; }
.delivery-policy > b { color: #d9e8f1; font-size: 11px; }
.delivery-policy > p { margin: 5px 0 11px; color: #89a5b7; font-size: 9px; line-height: 1.45; }
.alert-feed-note { display: flex; align-items: center; gap: 13px; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); background: rgba(12,34,50,.32); }
.alert-feed-note > span { flex: 0 0 auto; color: #8bb5d0; font: 700 9px 'DM Mono', monospace; letter-spacing: .06em; }
.alert-feed-note p { margin: 0; color: #7f9cad; font-size: 9px; line-height: 1.35; }
.alert-empty { display: flex; min-height: 160px; flex-direction: column; justify-content: center; padding: 18px 22px; text-align: center; }
.alert-empty b { color: #cadde8; font: 600 14px 'Barlow Condensed', sans-serif; letter-spacing: .04em; }
.alert-empty span { max-width: 390px; margin: 8px auto 0; color: #86a0b2; font-size: 10px; line-height: 1.5; }
.decision-principle { display: flex; min-height: 0; flex-direction: column; align-items: center; justify-content: center; padding: 18px 24px; text-align: center; }
.principle-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #527991; border-radius: 50%; color: var(--orange); font: 600 19px 'Barlow Condensed', sans-serif; font-style: normal; }
.decision-principle > strong { margin-top: 10px; color: #dcebf4; font: 600 15px 'Barlow Condensed', sans-serif; letter-spacing: .045em; }
.decision-principle > span { margin-top: 6px; color: #87a3b5; font-size: 10px; line-height: 1.48; }
.decision-principle > div { display: flex; width: 100%; justify-content: space-between; margin-top: 11px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.decision-principle > div b { color: #839fb1; font: 8px 'DM Mono', monospace; }
.decision-principle > div em { color: #d8a653; font: 8px 'DM Mono', monospace; font-style: normal; }
.compact-head { min-height: 32px; margin-top: 5px; }
.detail-reference-panel { min-height: 0; overflow: hidden; }
.cure-window-score { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; align-items: center; margin-top: 13px; padding: 7px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.cure-window-score span { color: #85a0b2; font: 8px 'DM Mono', monospace; letter-spacing: .05em; }
.cure-window-score strong { color: var(--orange); font: 600 22px 'Barlow Condensed', sans-serif; }
.cure-window-score small { grid-column: 1 / -1; color: #718da0; font-size: 8px; }
.detail-reference-panel .driver { height: 32px; }
.detail-reference-panel .driver span { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.detail-reference-panel .driver small { color: #6e8a9d; font: 8px 'DM Mono', monospace; white-space: nowrap; }
.detail-reference-panel .driver b { flex: 0 0 auto; }
.decision-clear { color: #8bc99e !important; }
.decision-caution { color: #efbf5d !important; }
.decision-hold { color: #ef8178 !important; }
.site-reference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 7px 14px 9px; }
.reference-fact { min-width: 0; padding: 5px 0; border-bottom: 1px solid rgba(46,72,93,.5); }
.reference-fact span { display: block; color: #7895a8; font: 8px 'DM Mono', monospace; letter-spacing: .04em; }
.reference-fact b { display: block; overflow: hidden; margin-top: 1px; color: #d8e8f1; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.reference-fact small { display: block; margin-top: 1px; color: #68869a; font-size: 8px; }
.hazard-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 4px 14px 7px; }
.hazard-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 7px; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(46,72,93,.5); }
.hazard-row span { overflow: hidden; color: #9eb5c4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.hazard-row b { color: #f2c272; font: 9px 'DM Mono', monospace; }.hazard-bar { grid-column: 1 / -1; display: block; height: 3px; overflow: hidden; border-radius: 4px; background: #193246; }.hazard-bar em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #64adf1, #efb339 65%, #e35e55); }

body[data-theme="light"] .rule-profile-list { border-right-color: #d8e4ea; }
body[data-theme="light"] .rule-profile:hover { border-color: #aac7d7; background: #eef7fb; }
body[data-theme="light"] .rule-profile.active { border-color: #84b4ce; background: #e7f4fa; }
body[data-theme="light"] .rule-profile b, body[data-theme="light"] .rule-editor-heading b, body[data-theme="light"] .delivery-policy > b, body[data-theme="light"] .reference-fact b, body[data-theme="light"] .alert-empty b { color: #18374d; }
body[data-theme="light"] .rule-profile small, body[data-theme="light"] .rule-profile-note, body[data-theme="light"] .rule-editor > p, body[data-theme="light"] .rule-editor-footer span, body[data-theme="light"] .delivery-policy > p, body[data-theme="light"] .alert-feed-note p, body[data-theme="light"] .alert-empty span, body[data-theme="light"] .reference-fact small { color: #607a8b; }
body[data-theme="light"] .rule-input-grid label { color: #587486; }
body[data-theme="light"] .rule-input-grid label span { border-color: #bdd0da; background: #fbfdfe; }
body[data-theme="light"] .rule-input-grid input { color: #1a3b52; }
body[data-theme="light"] .rule-editor-footer, body[data-theme="light"] .rule-profile-note, body[data-theme="light"] .reference-fact { border-color: #d9e5ea; }
body[data-theme="light"] .alert-feed-note { border-color: #d8e4ea; background: #eff7fb; }
body[data-theme="light"] .detail-reference-panel .driver small, body[data-theme="light"] .reference-fact span { color: #668093; }
body[data-theme="light"] .hazard-row { border-color: #d9e5ea; }.hazard-row span { color: #607989; }.hazard-bar { background: #dce9ef; }
body[data-theme="light"] .cure-window-score { border-color: #d9e5ea; }
body[data-theme="light"] .cure-window-score span, body[data-theme="light"] .cure-window-score small { color: #617b8d; }
body[data-theme="light"] .decision-principle > strong { color: #173850; }
body[data-theme="light"] .decision-principle > span { color: #607a8c; }
body[data-theme="light"] .decision-principle > div { border-color: #d8e4ea; }

@media (max-width: 980px) {
  .rules-shell { grid-template-columns: 145px minmax(0, 1fr); }
  .rule-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}