:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: #edf4f8;
  background: #050c12;
  --bg: #050c12;
  --panel: #0b151e;
  --panel-2: #101d27;
  --panel-3: #152531;
  --line: #263b49;
  --muted: #8fa4b2;
  --blue: #2794d8;
  --green: #2dcf72;
  --yellow: #f2b936;
  --orange: #e87d2e;
  --red: #e14848;
  --purple: #9c63e6;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
.hidden { display: none !important; }

button {
  min-height: 34px;
  padding: 7px 11px;
  color: #fff;
  font-weight: 700;
  background: #176fa5;
  border: 1px solid #338ec2;
  border-radius: 5px;
  cursor: pointer;
}
button:hover { filter: brightness(1.13); }
button:disabled { opacity: .45; cursor: wait; }
button.secondary { background: #132633; border-color: #355365; }
button.danger { color: #ff8c8c; background: #231218; border-color: #6b2832; }

input, select, textarea {
  width: 100%;
  padding: 8px 9px;
  color: #f7fbfd;
  background: #07121a;
  border: 1px solid #315064;
  border-radius: 4px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #4eb4ec; box-shadow: 0 0 0 2px #2188c733; }
label { color: #aebdc7; font-size: .72rem; }
.muted, .hint { color: var(--muted); }

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 15%, #17364a, #050c12 55%);
}
.login-card {
  width: min(520px, 95vw);
  padding: 34px;
  text-align: center;
  background: #0c1822;
  border: 1px solid #355064;
  border-radius: 14px;
  box-shadow: 0 28px 80px #000b;
}
.login-mark {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  color: #fff;
  font-weight: 900;
  background: #a51e2d;
  border: 3px solid #f0f4f6;
  border-radius: 18px 18px 28px 28px;
}
.brand { color: #68c3ef; font-size: .76rem; letter-spacing: .2em; }
.login-card h1 { margin: 8px 0 5px; }
.login-card label { display: grid; gap: 6px; margin: 14px 0; text-align: left; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.status { margin-top: 14px; padding: 10px; color: #ffd06b; background: #07131b; border: 1px solid #283d4c; border-radius: 5px; }

.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(390px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 8px 14px;
  background: #071019;
  border-bottom: 1px solid #263b49;
  box-shadow: 0 2px 12px #0008;
  z-index: 5;
}
.topbar-brand, .session-health, .topbar-actions { display: flex; align-items: center; gap: 11px; }
.topbar-brand strong { display: block; font-size: 1.05rem; letter-spacing: .03em; }
.topbar-brand small, .session-health small { display: block; color: var(--muted); font-size: .67rem; letter-spacing: .08em; }
.shield {
  width: 42px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 900;
  background: #9d1d2b;
  border: 2px solid #ecf1f3;
  border-radius: 9px 9px 16px 16px;
}
.session-health { justify-self: center; }
.topbar-actions { justify-self: end; }
.live-dot { width: 10px; height: 10px; display: inline-block; background: var(--green); border-radius: 50%; box-shadow: 0 0 10px #2dcf7288; }
.role-badge { padding: 8px 11px; color: #d8c8ff; font-size: .74rem; font-weight: 800; text-transform: uppercase; background: #251b3d; border: 1px solid #493a70; border-radius: 5px; }
.audio-status { max-width: 150px; color: var(--muted); font-size: .68rem; }
.audio-status[data-state="connected"] { color: var(--green); }
.audio-status[data-state="connecting"], .audio-status[data-state="reconnecting"] { color: var(--yellow); }
.audio-status[data-state="failed"], .audio-status[data-state="disconnected"] { color: #ff8c8c; }

.console-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 310px minmax(620px, 1fr) 360px;
  gap: 8px;
  padding: 8px;
}
.left-rail, .right-rail, .center-stack { min-width: 0; display: grid; gap: 8px; align-content: start; }
.left-rail { grid-template-rows: auto auto; }
.center-stack { grid-template-rows: minmax(520px, 1fr) auto auto; }
.right-rail { grid-template-rows: auto auto auto; }

.panel {
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #0e1a24, #09131b);
  border: 1px solid #273c4b;
  border-radius: 6px;
  box-shadow: 0 4px 15px #0004;
}
.section-head {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  background: #0b151d;
  border-bottom: 1px solid #273c4b;
}
.section-head h2 { margin: 0; color: #edf5f9; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.section-head span { color: var(--muted); font-size: .66rem; }

.phones, .radios, .units, .recommendation-panel, .legend-panel, .cad, .log { padding-bottom: 8px; }
.audio-mixer { padding-bottom: 8px; }
.audio-mixer-controls { display: grid; gap: 6px; padding: 8px; }
.audio-mixer label {
  display: grid;
  grid-template-columns: 48px minmax(70px, 1fr) 38px;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
}
.audio-mixer input[type="range"] {
  width: 100%;
  height: 4px;
  padding: 0;
  accent-color: var(--blue);
}
.audio-mixer output { color: #dcebf3; font-variant-numeric: tabular-nums; text-align: right; }
.audio-mixer-actions { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.audio-mixer-actions button { padding: 6px 9px; font-size: .66rem; }
.audio-unlock { color: var(--yellow); font-size: .62rem; line-height: 1.25; }
.phone-grid, .radio-grid { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 8px; }
.phone {
  min-height: 105px;
  padding: 9px;
  background: #0b1720;
  border: 1px solid #294252;
  border-left: 4px solid #607585;
  border-radius: 5px;
}
.phone.ringing { border-left-color: var(--yellow); animation: pulse 1s infinite; }
.phone.connected { border-left-color: var(--green); }
.phone.hold { border-left-color: var(--orange); }
.phone-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; }
.phone-head strong { font-size: .86rem; }
.phone input { margin-top: 6px; padding: 6px 7px; font-size: .72rem; }
.phone-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 7px; }
.phone-actions button { min-height: 30px; padding: 5px 3px; font-size: .62rem; }

.radio { padding: 10px; background: #0a151e; border: 1px solid #294252; border-radius: 5px; }
.radio.tx { border-color: #db3e48; box-shadow: 0 0 0 2px #db3e4833 inset; }
.radio select { margin: 7px 0; padding: 6px; font-size: .7rem; }
.ptt { width: 100%; height: 48px; background: #193d52; border-color: #315f77; }
.ptt.active { background: #a7222d; border-color: #e65a64; }
.radios .hint { margin: 0 10px 3px; font-size: .65rem; }

.map-panel { display: flex; flex-direction: column; min-height: 0; }
.map-commandbar { display: grid; grid-template-columns: 1fr 126px; gap: 8px; padding: 8px; background: #0b151d; border-bottom: 1px solid #273c4b; }
.map-search { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.style-picker { display: grid; gap: 3px; }
.style-picker select { padding: 7px; }
.map-stage { position: relative; flex: 1; min-height: 470px; }
#map { position: absolute; inset: 0; background: #07121a; }
.map-overlay { position: absolute; z-index: 3; padding: 8px; background: #071019e8; border: 1px solid #385061; border-radius: 6px; box-shadow: 0 4px 15px #0008; backdrop-filter: blur(5px); }
.map-overlay.top-left { top: 10px; left: 10px; width: min(340px, calc(100% - 20px)); }
.map-overlay.bottom-left { left: 10px; bottom: 25px; display: grid; gap: 3px; }
.incident-switcher, .scenario-tools, .inject-tools { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px; }
.incident-switcher label, .scenario-tools label, .inject-tools label { display: grid; gap: 3px; }
.scenario-tools, .inject-tools { margin-top: 6px; }
.scenario-tools button { background: #94501d; border-color: #cc7b31; }
.inject-tools button { background: #7c5b17; border-color: #bf9132; }
.scenario-summary { min-height: 0; margin-top: 4px; color: #dbc69a; font-size: .66rem; }
.coordinate-readout { color: #fff; font: .68rem Consolas, monospace; }
.map-status { color: #ffd075; font-size: .68rem; }
.geocode-results { display: grid; gap: 4px; padding: 0 8px; }
.geocode-result { padding: 7px; text-align: left; font-size: .68rem; font-weight: 500; background: #153247; }
.map-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 8px 8px 0; }
.map-tools label, .coordinate-form label { display: grid; gap: 3px; }
.coordinate-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 7px; padding: 7px 8px 0; }
.map-panel > .hint { margin: 5px 9px 8px; font-size: .65rem; }
.map-fallback { position: absolute; inset: 0; z-index: 2; padding: 14px; overflow: auto; background: #07121a; }
.maplibregl-ctrl-attrib { color: #1c2931; }
.maplibregl-ctrl-attrib a { color: #075c91; }

.incident-marker {
  position: relative;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 3px 12px #000b;
  transform: rotate(-45deg);
}
.incident-marker::after { content: ""; position: absolute; inset: 7px; background: #fff; border-radius: 50%; }
.incident-marker.active { outline: 4px solid #ffe26a; outline-offset: 3px; }
.unit-marker { min-width: 40px; padding: 5px 7px; color: #fff; font: 800 .68rem Consolas, monospace; text-align: center; border: 2px solid #fff; border-radius: 7px; box-shadow: 0 3px 10px #000a; }
.unit-marker.recommended { outline: 3px solid #ffe26a; outline-offset: 2px; }

.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px 10px; padding: 9px; }
.form-grid label { display: grid; gap: 3px; }
.form-grid .wide { grid-column: span 2; }
.form-grid .narrative { grid-column: span 2; }
.form-grid textarea { min-height: 72px; resize: vertical; }

#units { padding: 5px 10px; }
.unit { display: grid; grid-template-columns: 42px minmax(80px, 1fr) 108px auto; align-items: center; gap: 7px; padding: 9px 0; border-bottom: 1px solid #223744; }
.unit:last-child { border-bottom: 0; }
.unit select { padding: 6px; font-size: .68rem; }
.unit-distance { color: #91c9e7; font: .65rem Consolas, monospace; }
.unit-map-button { min-height: 29px; padding: 5px 7px; font-size: .62rem; background: #234e67; }
.recommendation { margin: 9px; padding: 12px; color: #dff8e7; font-size: .75rem; line-height: 1.55; background: #0c2b1a; border: 1px solid #23643c; border-left: 4px solid var(--green); border-radius: 5px; }
.legend-list { display: grid; gap: 9px; padding: 11px; font-size: .72rem; }
.legend-list span { display: flex; align-items: center; gap: 8px; }
.legend { width: 12px; height: 12px; display: inline-block; border-radius: 3px; }
.incident-high { background: var(--red); border-radius: 50%; }
.unit-enroute { background: var(--blue); }
.unit-scene { background: var(--green); }
.unit-available { background: var(--yellow); }
.unit-oos { background: #747e85; }

.log-entry { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 8px; }
#timeline { max-height: 150px; overflow: auto; padding: 0 9px 4px; font: .7rem Consolas, monospace; }
.event { display: grid; grid-template-columns: 82px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid #223744; }
.event time { color: #68bde9; }

.statusbar { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 14px; color: #9cb0bc; font-size: .66rem; background: #071019; border-top: 1px solid #263b49; }
.statusbar .live-dot { width: 8px; height: 8px; margin-right: 5px; }

@keyframes pulse { 50% { box-shadow: 0 0 18px #f2b93666; } }

@media (min-width: 1600px) {
  .console-grid { grid-template-columns: 320px minmax(760px, 1fr) 380px; }
  .map-stage { min-height: 545px; }
}

@media (max-width: 1320px) {
  .topbar { grid-template-columns: 1fr auto; }
  .session-health { display: none; }
  .console-grid { grid-template-columns: 280px minmax(560px, 1fr) 310px; }
  .phone-actions { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1050px) {
  body { overflow: auto; }
  .topbar { grid-template-columns: 1fr; }
  .topbar-actions { justify-self: start; flex-wrap: wrap; }
  .console-grid { grid-template-columns: 1fr 1fr; }
  .center-stack { grid-column: 1 / -1; grid-row: 1; }
  .left-rail { grid-column: 1; grid-row: 2; }
  .right-rail { grid-column: 2; grid-row: 2; }
  .phone-actions { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 720px) {
  .console-grid { display: block; }
  .left-rail, .center-stack, .right-rail { display: grid; margin-bottom: 8px; }
  .map-stage { min-height: 420px; }
  .map-commandbar, .map-tools, .coordinate-form, .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide, .form-grid .narrative { grid-column: auto; }
  .topbar-actions { gap: 6px; }
  .audio-status { display: none; }
  .statusbar { flex-wrap: wrap; }
}