:root {
  --ink: #f5f4ee; --muted: #a8aaa5; --dim: #72756f; --bg: #0b0e0d; --panel: #131715;
  --line: #2a302d; --green: #a6f3c1; --green-deep: #173d27; --amber: #ffc66b; --amber-deep: #3f2e14;
  --blue: #94c9ff; --pink: #f0a9c7; --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 80% -10%, #203229 0, transparent 34rem), var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, a { font: inherit; }
.owner-return { color: var(--ink); font-weight: 750; text-decoration: none; white-space: nowrap; }
.owner-return:hover, .owner-return:focus-visible { color: var(--green); text-decoration: underline; outline: none; }
.safety-rail { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px clamp(16px, 4vw, 58px); border-bottom: 1px solid #30443a; background: rgba(10, 14, 12, .94); backdrop-filter: blur(14px); }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 750; letter-spacing: .02em; white-space: nowrap; }
.badge-synthetic { color: var(--blue); border-color: #315c73; background: #102631; }
.badge-closed { color: var(--green); border-color: #356846; background: #102c1b; }
.rail-copy { margin-left: auto; color: var(--muted); font-size: 12px; }
main { width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: 66px 0 42px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 50px; align-items: end; padding: 0 6px 50px; }
.eyebrow, .kicker { color: var(--green); text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
h1 { max-width: 880px; margin: 13px 0 18px; font-size: clamp(42px, 6vw, 80px); line-height: .96; letter-spacing: -.055em; }
.lede { max-width: 750px; margin: 0; color: #c9cbc6; font-size: 18px; line-height: 1.65; }
.hero-status { display: grid; gap: 7px; padding: 20px; border: 1px solid #3a4c42; border-radius: var(--radius); background: linear-gradient(145deg, #15241c, #111713); }
.hero-status .status-label { color: var(--muted); font-size: 12px; }
.hero-status strong { color: var(--green); font-size: 22px; }
.hero-status > span:last-child { color: var(--muted); font-size: 13px; }
.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #101311; }
.metric-strip article { min-width: 0; padding: 20px 22px; border-right: 1px solid var(--line); }
.metric-strip article:last-child { border-right: 0; }
.metric-strip span, .metric-strip small { display: block; color: var(--muted); font-size: 11px; }
.metric-strip strong { display: block; margin: 5px 0; font-size: 28px; }
.view-nav { display: flex; gap: 8px; margin: 28px 0 16px; overflow-x: auto; scrollbar-width: thin; }
.view-nav a { flex: 0 0 auto; color: #cbd0cb; text-decoration: none; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: #111513; font-size: 12px; }
.view-nav a:hover, .view-nav a:focus-visible { border-color: #5b7868; color: var(--green); outline: none; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.panel { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(155deg, rgba(24, 29, 26, .98), rgba(16, 20, 18, .98)); box-shadow: 0 18px 50px rgba(0, 0, 0, .12); scroll-margin-top: 64px; }
.panel-wide { grid-column: span 2; }
.panel-accent { border-color: #476454; background: linear-gradient(145deg, #193025, #121916); }
.panel header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.panel h2 { margin: 5px 0 0; font-size: 22px; letter-spacing: -.025em; }
.state { flex: 0 0 auto; padding: 5px 8px; border-radius: 6px; font-size: 10px; font-style: normal; font-weight: 850; letter-spacing: .06em; }
.state.waiting { color: var(--amber); background: var(--amber-deep); }
.state.local, .state.closed { color: var(--green); background: var(--green-deep); }
.state.review { color: var(--blue); background: #183044; }
.truth { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.provider-row { display: grid; grid-template-columns: 150px 1fr 82px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.provider-row:first-of-type { border-top: 0; }
.provider-row span { color: var(--muted); font-size: 12px; }
.provider-row em { color: var(--dim); font-size: 11px; font-style: normal; text-align: right; }
.alias-list, .check-list { margin: 0; padding: 0; list-style: none; }
.alias-list li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.alias-list li:first-child { border-top: 0; }
.alias-list strong, .alias-list small { display: block; }
.alias-list small { margin-top: 3px; color: var(--muted); }
.alias-dot { width: 9px; height: 34px; border-radius: 8px; background: var(--blue); }
.alias-dot.electrical { background: var(--amber); }.alias-dot.renewables { background: var(--pink); }
.spark { height: 62px; display: flex; align-items: end; gap: 6px; padding-top: 8px; }
.spark i { flex: 1; min-height: 10px; border-radius: 4px 4px 2px 2px; background: linear-gradient(#a6f3c1, #366a48); }
.spark i:nth-child(2) { height: 54%; }.spark i:nth-child(3) { height: 78%; }.spark i:nth-child(4) { height: 45%; }.spark i:nth-child(5) { height: 84%; }.spark i:nth-child(6) { height: 64%; }.spark i:nth-child(7) { height: 92%; }.spark i:nth-child(8) { height: 72%; }
.compact-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0 0; }
.compact-stats div { padding: 9px; border-radius: 9px; background: #0d110f; }
.compact-stats dt { color: var(--muted); font-size: 10px; }.compact-stats dd { margin: 4px 0 0; font-weight: 800; }
.queue-item { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 12px; }
.queue-item:first-of-type { border-top: 0; }.queue-item span { color: var(--muted); }.queue-item strong { color: var(--amber); }
.callback-focus { display: grid; gap: 4px; margin-bottom: 14px; }.callback-focus span, .callback-focus small { color: var(--muted); font-size: 11px; }.callback-focus strong { font-size: 20px; }
button { width: 100%; padding: 11px 14px; border: 1px solid #5fa278; border-radius: 10px; color: #07100a; background: var(--green); font-weight: 800; cursor: pointer; }
button:hover, button:focus-visible { background: #c3fbd5; outline: 3px solid rgba(166, 243, 193, .2); }
button:disabled { cursor: default; opacity: .6; }
.check-list li { position: relative; padding: 8px 0 8px 24px; color: var(--muted); font-size: 12px; }.check-list li::before { content: "○"; position: absolute; left: 0; color: var(--amber); }.check-list .done::before { content: "✓"; color: var(--green); }.check-list .done { color: #d3d8d3; }
.transcript-line { display: grid; grid-template-columns: 27px 1fr auto; gap: 9px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); }.transcript-line:first-of-type { border-top: 0; }.transcript-line > span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; color: #0b1110; background: var(--green); font-size: 10px; font-weight: 900; }.transcript-line.caller > span { background: var(--blue); }.transcript-line p { margin: 0; color: #ced1cd; font-size: 12px; line-height: 1.5; }.transcript-line em { color: var(--muted); font-size: 10px; font-style: normal; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }.chips span { padding: 7px 9px; border: 1px solid #354039; border-radius: 8px; color: #d3d7d3; background: #0e1210; font-size: 11px; }
.rubric { display: grid; gap: 12px; }.rubric label { display: grid; grid-template-columns: 84px 1fr 30px; gap: 10px; align-items: center; color: var(--muted); font-size: 11px; }.rubric meter { width: 100%; height: 8px; accent-color: var(--green); }.rubric span { color: var(--ink); text-align: right; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }th, td { padding: 9px 5px; border-bottom: 1px solid var(--line); text-align: left; }th { color: var(--muted); font-weight: 500; }td:last-child { color: var(--amber); }
.gate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.gate-grid span { position: relative; padding: 10px 10px 10px 27px; border: 1px solid #31523d; border-radius: 9px; color: #c9d4cc; background: #101c15; font-size: 11px; }.gate-grid span::before { content: "●"; position: absolute; left: 10px; color: var(--green); }
footer { display: flex; justify-content: space-between; gap: 15px; width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: 22px 0 40px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 28px; }.hero-status { max-width: 340px; }.metric-strip { grid-template-columns: 1fr 1fr; }.metric-strip article:nth-child(2) { border-right: 0; }.metric-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.dashboard-grid { grid-template-columns: 1fr 1fr; }.panel-wide { grid-column: span 2; }.gate-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .safety-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 7px 10px; }.badge { justify-content: center; padding: 6px 7px; font-size: 10px; }.rail-copy { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 9px; } main { width: min(100% - 24px, 1320px); padding-top: 42px; }.hero { padding: 0 2px 34px; }.hero h1 { font-size: 44px; }.lede { font-size: 15px; }.metric-strip { grid-template-columns: 1fr 1fr; }.metric-strip article { padding: 15px 12px; }.metric-strip strong { font-size: 23px; }.view-nav { margin-top: 20px; }.dashboard-grid { grid-template-columns: 1fr; }.panel, .panel-wide { grid-column: auto; padding: 17px; }.provider-row { grid-template-columns: 1fr auto; }.provider-row span { grid-column: 1 / -1; order: 3; }.provider-row em { grid-column: 2; grid-row: 1; }.gate-grid { grid-template-columns: 1fr 1fr; }.panel header { gap: 8px; }.panel h2 { font-size: 20px; }.state { font-size: 9px; }.rubric label { grid-template-columns: 76px 1fr 28px; } footer { width: calc(100% - 24px); flex-direction: column; gap: 7px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }