:root {
  color-scheme: dark;
  --bg: #080706;
  --surface: #11100f;
  --surface-2: #171512;
  --surface-3: #201b17;
  --line: #312922;
  --line-hot: #6d3717;
  --orange: #ff6a00;
  --orange-2: #ff9a2e;
  --orange-soft: #ff6a001a;
  --text: #f7f3ef;
  --muted: #99918a;
  --green: #54d69a;
  --red: #ff5d5d;
  --yellow: #ffc45c;
  --shadow: 0 24px 70px #00000066;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% -10%, #ff6a0017 0, transparent 30%),
    radial-gradient(circle at -12% 38%, #8f3b1214 0, transparent 28%),
    linear-gradient(150deg, #0c0a08 0, #070706 52%, #0b0907 100%);
  color: var(--text);
  overflow-x: hidden;
}

button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; filter: grayscale(.45); }
[hidden] { display: none !important; }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { width: 48px; height: 48px; overflow: visible; filter: drop-shadow(0 0 14px #ff6a0044); flex: 0 0 auto; }
.brand-mark .orbit { fill: #ff6a000e; stroke: #ff6a00; stroke-width: 1.5; stroke-dasharray: 8 4; }
.brand-mark .lock, .brand-mark .key { fill: none; stroke: #ff8124; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark circle { fill: #ff8124; }
.brand strong { display: block; font-size: 20px; line-height: 1; letter-spacing: .035em; white-space: nowrap; }
.brand strong span { color: var(--orange-2); }
.brand small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; letter-spacing: .18em; white-space: nowrap; }

.login-view { min-height: 100vh; display: grid; place-items: center; padding: 28px 18px; position: relative; }
.login-view::before {
  content: "";
  position: fixed;
  width: 520px;
  height: 520px;
  border: 1px solid #ff6a001c;
  border-radius: 50%;
  box-shadow: 0 0 0 85px #ff6a0007, 0 0 0 170px #ff6a0004;
  transform: translate(46vw, -42vh);
}
.login-card {
  width: min(460px, 100%);
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(145deg, #171411ef, #0d0c0bee);
  box-shadow: var(--shadow), inset 0 1px #ffffff0b;
  backdrop-filter: blur(20px);
}
.login-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, #ffffff08, transparent 24%); }
.login-glow { position: absolute; width: 230px; height: 230px; background: #ff6a0020; filter: blur(55px); top: -110px; right: -80px; border-radius: 50%; }
.brand-login { position: relative; z-index: 1; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.login-copy { padding: 30px 0 14px; }
.eyebrow { margin: 0 0 8px; color: var(--orange-2); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.login-copy h1 { margin: 0; font-size: clamp(28px, 8vw, 40px); line-height: 1.06; letter-spacing: -.045em; }
.login-copy > p:last-child { color: var(--muted); line-height: 1.65; margin: 18px 0 0; }
.login-form { display: grid; gap: 9px; margin-top: 14px; }
label { color: #c8c0b9; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  color: var(--text);
  background: #080706aa;
  border: 1px solid #3a3028;
  border-radius: 11px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px #ff6a001b; }
.form-error { min-height: 18px; margin: 2px 0 0; color: #ff8585; font-size: 12px; }
.secure-note { display: flex; justify-content: center; align-items: center; gap: 8px; color: #79716b; font-size: 11px; margin: 24px 0 0; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px #54d69a14; }

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 11px;
  border: 1px solid transparent;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .045em;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.button:not(:disabled):hover { transform: translateY(-1px); }
.button-primary { color: #180b02; background: linear-gradient(110deg, #ff9d38, #ff6500 62%, #e75000); box-shadow: 0 10px 26px #ff62002b, inset 0 1px #ffd0a3; }
.button-primary:not(:disabled):hover { box-shadow: 0 13px 34px #ff620044, inset 0 1px #ffd0a3; }
.button-secondary { color: #ddd5ce; background: #171411; border-color: #40352d; }
.button-secondary:not(:disabled):hover { border-color: #80502f; }

.topbar {
  height: 76px;
  padding: 0 max(22px, calc((100vw - 1480px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: #090807e8;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.unit-label { padding-right: 16px; text-align: right; border-right: 1px solid var(--line); }
.unit-label span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .16em; }
.unit-label b { font-size: 13px; letter-spacing: .08em; }
.connection-pill { display: flex; align-items: center; gap: 8px; height: 33px; padding: 0 12px; border: 1px solid #3a312b; border-radius: 999px; color: #aaa19a; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.connection-pill span { width: 7px; height: 7px; border-radius: 50%; background: #777; }
.connection-pill.online { color: #bff5dc; border-color: #275d45; background: #163d2b55; }
.connection-pill.online span { background: var(--green); box-shadow: 0 0 11px var(--green); }
.connection-pill.offline { color: #ffaaa3; border-color: #61342f; }
.connection-pill.offline span { background: var(--red); }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; color: #bbb2ab; background: transparent; border: 1px solid var(--line); border-radius: 10px; }
.icon-button:hover { color: var(--orange-2); border-color: var(--line-hot); }
.icon-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.dashboard-shell { width: min(1480px, calc(100% - 44px)); margin: 0 auto; padding: 38px 0 22px; }
.headline-row { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 22px; }
.headline-row h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.04em; }
.subtle { color: var(--muted); margin: 8px 0 0; font-size: 12px; }
.system-state { min-width: 290px; display: flex; align-items: center; gap: 13px; padding: 14px 17px; background: #13110f; border: 1px solid var(--line); border-radius: 14px; }
.system-state .state-icon { width: 12px; height: 12px; border-radius: 50%; background: #777; box-shadow: 0 0 0 7px #7771a; }
.system-state div { display: grid; gap: 3px; }
.system-state small { color: var(--muted); font-size: 8px; letter-spacing: .16em; }
.system-state strong { font-size: 12px; letter-spacing: .04em; }
.system-state.active { border-color: #713a18; background: linear-gradient(100deg, #21140c, #13100e); }
.system-state.active .state-icon { background: var(--orange); box-shadow: 0 0 0 7px #ff6a0018, 0 0 16px #ff6a00; }
.system-state.ready { border-color: #285f47; }
.system-state.ready .state-icon { background: var(--green); box-shadow: 0 0 0 7px #54d69a17; }
.system-state.warning { border-color: #705424; }
.system-state.warning .state-icon { background: var(--yellow); box-shadow: 0 0 0 7px #ffc45c16; }

.panel, .metric-card { background: linear-gradient(145deg, #151310ed, #0e0d0bec); border: 1px solid var(--line); box-shadow: 0 15px 45px #0000002e, inset 0 1px #ffffff08; }
.panel { border-radius: 18px; overflow: hidden; }
.panel-heading { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.panel-heading .eyebrow { margin-bottom: 5px; }
.primary-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(330px, .72fr); gap: 18px; }
.map-panel { min-height: 545px; position: relative; }
.floating-heading { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 500; min-height: 65px; border: 1px solid #49382a; border-radius: 12px; background: #0e0c0be8; backdrop-filter: blur(14px); box-shadow: 0 10px 30px #0008; }
.mini-button { height: 30px; padding: 0 11px; border-radius: 8px; color: #cfc5bc; background: #1b1714; border: 1px solid #44372e; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.mini-button:hover { color: var(--orange-2); border-color: #8b4a20; }
#map { width: 100%; height: 470px; background: #11100e; }
.leaflet-container { font-family: inherit; }
.leaflet-tile-pane { filter: grayscale(1) invert(.94) sepia(.65) hue-rotate(326deg) saturate(1.4) brightness(.58) contrast(1.15); }
.leaflet-control-attribution { background: #090807c9 !important; color: #a89e95 !important; }
.leaflet-control-attribution a { color: #ff9a4c !important; }
.leaflet-control-zoom a { color: #f3eae2 !important; background: #17130f !important; border-bottom-color: #403126 !important; }
.vehicle-marker { position: relative; width: 34px; height: 34px; border: 2px solid #ff8d32; border-radius: 12px 12px 12px 3px; transform: rotate(-45deg); background: #ff6a00; box-shadow: 0 0 0 8px #ff6a0024, 0 0 30px #ff6a00b0; }
.vehicle-marker::after { content: ""; position: absolute; inset: 8px; border: 2px solid #251006; border-radius: 50%; }
.marker-pulse { width: 44px !important; height: 44px !important; margin: -22px 0 0 -22px !important; }
.map-readout { min-height: 75px; display: grid; grid-template-columns: 1fr 1fr .75fr; align-items: center; background: #0b0a09; border-top: 1px solid var(--line); }
.map-readout > div { min-width: 0; padding: 13px 18px; border-right: 1px solid var(--line); }
.map-readout > div:last-child { border: 0; }
.map-readout small, .command-readout small { display: block; color: var(--muted); font-size: 8px; letter-spacing: .15em; margin-bottom: 5px; }
.map-readout b { display: block; overflow: hidden; text-overflow: ellipsis; font: 600 13px ui-monospace, SFMono-Regular, Consolas, monospace; color: #ddd4cd; }

.control-panel { padding-bottom: 18px; }
.shield-badge { width: 34px; height: 34px; display: grid; place-items: center; color: var(--orange); border: 1px solid var(--line-hot); border-radius: 10px; background: var(--orange-soft); }
.control-status { margin: 20px; padding: 17px; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 16px; border: 1px solid #3b3129; border-radius: 13px; background: #0b0a09; }
.control-status small { display: block; color: var(--muted); font-size: 8px; letter-spacing: .14em; }
.control-status strong { display: block; margin-top: 5px; font-size: 14px; }
.control-status p { margin: 6px 0 0; color: #898079; font-size: 11px; line-height: 1.4; }
.lock-illustration { width: 44px; height: 38px; position: relative; border: 2px solid #75685e; border-radius: 8px; }
.lock-illustration::before { content: ""; position: absolute; width: 22px; height: 19px; left: 9px; top: -17px; border: 2px solid #75685e; border-bottom: 0; border-radius: 14px 14px 0 0; }
.lock-illustration.locked, .lock-illustration.locked::before { border-color: var(--orange); filter: drop-shadow(0 0 8px #ff6a0066); }
.lock-illustration.unlocked { border-color: var(--green); }
.lock-illustration.unlocked::before { border-color: var(--green); transform: translateX(8px) rotate(24deg); transform-origin: left bottom; }
.safety-banner { margin: 0 20px 18px; display: flex; align-items: flex-start; gap: 10px; padding: 11px; background: #2b190d; border: 1px solid #623514; border-radius: 10px; }
.safety-banner > span { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; color: #1e0c02; background: var(--orange-2); border-radius: 50%; font-weight: 900; font-size: 12px; }
.safety-banner p { margin: 0; color: #d2ad8d; font-size: 10px; line-height: 1.5; }
.control-button { width: calc(100% - 40px); min-height: 64px; justify-content: flex-start; margin: 0 20px 10px; text-align: left; }
.control-button .button-symbol { width: 28px; text-align: center; font-size: 18px; }
.control-button span:last-child { display: grid; gap: 3px; }
.control-button b { font-size: 11px; }
.control-button small { font-size: 9px; font-weight: 500; letter-spacing: 0; opacity: .72; }
.command-readout { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 17px 20px 0; padding-top: 15px; border-top: 1px solid var(--line); }
.command-readout small { grid-column: 1 / -1; }
.command-readout b { color: #d9d0c8; font-size: 11px; }
.command-readout span { color: var(--muted); font-size: 10px; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.metric-card { min-height: 135px; display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; padding: 19px; border-radius: 15px; }
.metric-card::before { content: ""; position: absolute; }
.metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #503621; color: var(--orange-2); background: #24160c; border-radius: 11px; font-weight: 900; }
.metric-card small { display: block; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.metric-card strong { display: flex; align-items: baseline; gap: 6px; margin: 5px 0 4px; font-size: 28px; line-height: 1; }
.metric-card em { color: #8b827b; font-size: 10px; font-style: normal; font-weight: 600; }
.metric-card p { margin: 0; color: #7f7770; font-size: 9px; }
.speed-card.over { border-color: #81352e; box-shadow: inset 0 0 35px #c62b2012; }
.speed-card.over .metric-icon, .speed-card.over strong { color: var(--red); }
.text-button { padding: 0; color: var(--orange-2); background: transparent; border: 0; font-size: 9px; font-weight: 800; letter-spacing: .08em; }

.secondary-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 14px; margin-top: 14px; }
.systems-list { padding: 4px 20px 12px; }
.system-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; min-height: 70px; border-bottom: 1px solid #28231f; }
.system-row:last-child { border: 0; }
.system-glyph { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #42352c; border-radius: 9px; color: #a99d93; background: #191511; font-size: 8px; font-weight: 900; }
.system-row b { display: block; font-size: 12px; }
.system-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.status-chip { padding: 5px 7px; border: 1px solid; border-radius: 6px; font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.status-chip.good { color: #79e7b3; border-color: #2a6249; background: #173828; }
.status-chip.bad { color: #ff8a82; border-color: #6b302d; background: #351817; }
.status-chip.warn { color: #ffd078; border-color: #6a5224; background: #34270f; }
.status-chip.neutral { color: #aaa19a; border-color: #464039; background: #201d1a; }
.signal-value { color: var(--orange-2); font: 700 11px ui-monospace, monospace; }

.events-list { max-height: 306px; overflow: auto; padding: 4px 20px 12px; scrollbar-color: #613616 #14110f; }
.event-item { display: grid; grid-template-columns: 8px 1fr auto; gap: 13px; align-items: start; padding: 15px 0; border-bottom: 1px solid #28231f; }
.event-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #81766d; }
.event-item.alta .event-dot { background: var(--red); box-shadow: 0 0 10px #ff5d5d88; }
.event-item.media .event-dot { background: var(--orange); box-shadow: 0 0 10px #ff6a0077; }
.event-item.info .event-dot { background: var(--green); }
.event-item b { display: block; font-size: 11px; }
.event-item p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.event-item time { color: #776e67; font-size: 9px; white-space: nowrap; }
.empty-state { color: var(--muted); text-align: center; padding: 55px 12px; font-size: 11px; }

footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 24px; padding: 17px 2px 0; border-top: 1px solid #29231e; color: #625c56; font-size: 8px; letter-spacing: .12em; }

.modal { width: min(470px, calc(100% - 30px)); padding: 0; color: var(--text); background: linear-gradient(145deg, #191511, #0d0b0a); border: 1px solid #5d3c25; border-radius: 20px; box-shadow: 0 30px 100px #000c; }
.modal::backdrop { background: #030201d9; backdrop-filter: blur(7px); }
.modal form { position: relative; padding: 28px; }
.modal-close { position: absolute; right: 15px; top: 12px; width: 32px; height: 32px; border: 0; border-radius: 8px; color: #a99e94; background: transparent; font-size: 22px; }
.modal-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 22px; color: var(--orange); border: 1px solid #71411e; border-radius: 13px; background: #2b180b; font-size: 19px; }
.modal h2 { margin: 0; font-size: 25px; letter-spacing: -.035em; }
.modal > form > p:not(.eyebrow):not(.form-error) { color: var(--muted); line-height: 1.6; font-size: 13px; }
.modal-warning { display: grid; gap: 4px; margin: 20px 0; padding: 13px; border: 1px solid #61421f; background: #2b1f0f; border-radius: 10px; }
.modal-warning b { color: #f5c676; font-size: 11px; }
.modal-warning span { color: #bba078; font-size: 10px; line-height: 1.45; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.modal label { display: block; margin: 22px 0 8px; }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 1000; max-width: min(390px, calc(100% - 44px)); padding: 14px 17px; color: #e9e1da; background: #171411f2; border: 1px solid #6d3d1d; border-radius: 11px; box-shadow: 0 15px 45px #000a; font-size: 11px; line-height: 1.5; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: none; }
.toast.error { border-color: #74342f; color: #ffaaa4; }

@media (max-width: 1050px) {
  .primary-grid, .secondary-grid { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .map-panel { min-height: 515px; }
  #map { height: 440px; }
}

@media (max-width: 680px) {
  .topbar { height: 67px; padding: 0 14px; }
  .topbar .brand small { display: none; }
  .topbar .brand-mark { width: 39px; height: 39px; }
  .topbar .brand strong { font-size: 15px; }
  .unit-label { display: none; }
  .connection-pill { padding: 0 9px; font-size: 8px; }
  .dashboard-shell { width: min(100% - 22px, 1480px); padding-top: 24px; }
  .headline-row { display: grid; align-items: stretch; }
  .system-state { min-width: 0; }
  .primary-grid { grid-template-columns: minmax(0, 1fr); }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { min-height: 125px; grid-template-columns: 34px 1fr; padding: 14px; gap: 9px; }
  .metric-icon { width: 32px; height: 32px; }
  .metric-card strong { font-size: 23px; }
  .map-panel { min-height: 465px; }
  #map { height: 390px; }
  .floating-heading { left: 9px; right: 9px; top: 9px; padding: 14px; }
  .map-readout > div { padding: 12px 10px; }
  .map-readout b { font-size: 10px; }
  .panel-heading { padding: 16px; }
  .control-status, .safety-banner { margin-left: 14px; margin-right: 14px; }
  .control-button { width: calc(100% - 28px); margin-left: 14px; margin-right: 14px; }
  .command-readout { margin-left: 14px; margin-right: 14px; }
  footer { display: grid; }
}

@media (max-width: 430px) {
  .login-card { padding: 25px 20px; }
  .brand-login small { font-size: 8px; letter-spacing: .11em; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 105px; }
  .map-readout { grid-template-columns: 1fr 1fr; }
  .map-readout > div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .modal-actions { grid-template-columns: 1fr; }
  .system-row { grid-template-columns: 34px 1fr; }
  .status-chip { grid-column: 2; justify-self: start; margin: -5px 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   GOODLOCK SOC CONSOLE · visual system v2
   -------------------------------------------------------------------------- */
:root {
  --bg: #050a0e;
  --surface: #0a1218;
  --surface-2: #0d1820;
  --surface-3: #12222c;
  --line: #1c303b;
  --line-hot: #79411e;
  --orange: #ff761b;
  --orange-2: #ffb16e;
  --orange-soft: #ff761b1f;
  --text: #edf4f7;
  --muted: #7f939e;
  --green: #4fe0a0;
  --red: #ff6873;
  --yellow: #ffd166;
  --cyan: #63c9e7;
  --shadow: 0 28px 90px #00000073;
}

html { background: var(--bg); }

body {
  background:
    linear-gradient(#ffffff03 1px, transparent 1px),
    linear-gradient(90deg, #ffffff03 1px, transparent 1px),
    radial-gradient(circle at 88% -12%, #ff761b1b 0, transparent 28%),
    radial-gradient(circle at -8% 46%, #18627a18 0, transparent 32%),
    linear-gradient(148deg, #071016 0, #04080c 56%, #071016 100%);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(180deg, transparent 0, transparent 3px, #9ad9e008 4px, transparent 5px);
}

.noise { opacity: .08; z-index: 101; }
.app-view, .login-view { position: relative; z-index: 1; }

.brand { gap: 11px; }
.brand-mark { width: 43px; height: 43px; filter: drop-shadow(0 0 16px #ff761b55); }
.brand-mark .orbit { stroke: var(--orange); }
.brand-mark .lock, .brand-mark .key { stroke: var(--orange-2); }
.brand-mark circle { fill: var(--orange-2); }
.brand strong { font-size: 18px; letter-spacing: .06em; }
.brand strong span { color: var(--orange); }
.brand small { margin-top: 5px; color: #728792; font-size: 8px; letter-spacing: .2em; }

.login-view {
  padding: 34px 18px;
  background: radial-gradient(circle at 50% 42%, #ff761b0d, transparent 35%);
}
.login-view::before {
  width: 620px;
  height: 620px;
  border-color: #ff761b20;
  box-shadow: 0 0 0 90px #ff761b08, 0 0 0 180px #4ec3e507, 0 0 120px #ff761b12;
}
.login-card {
  width: min(510px, 100%);
  padding: 38px;
  border-color: #223843;
  border-radius: 18px;
  background: linear-gradient(155deg, #0c1921f5, #071016f3 68%, #0a1116f5);
  box-shadow: var(--shadow), inset 0 1px #d9f5ff0a, 0 0 0 1px #ff761b08;
}
.login-card::before {
  content: "AUTHORIZED ACCESS // GL-SECURE";
  position: absolute;
  top: 16px;
  right: 20px;
  color: #55717d;
  font: 700 8px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em;
}
.login-glow { background: #ff761b25; }
.brand-login { padding-bottom: 24px; border-color: #20343e; }
.login-copy { padding: 32px 0 18px; }
.login-copy h1 { max-width: 430px; font-size: clamp(30px, 7vw, 43px); line-height: 1.02; }
.login-copy > p:last-child { max-width: 390px; margin-top: 16px; color: #9aadb5; font-size: 13px; }
.login-signals { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 21px; }
.login-signals span { display: inline-flex; align-items: center; gap: 6px; color: #7b939e; font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.login-signals i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }
.login-form { margin-top: 15px; gap: 8px; }
label { color: #a7bac2; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
input { min-height: 50px; border-color: #213843; border-radius: 9px; background: #050b0fbd; }
input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px #ff761b1c, 0 0 25px #ff761b12; }
.secure-note { margin-top: 24px; color: #65808a; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.pulse-dot { background: var(--green); box-shadow: 0 0 0 5px #4fe0a015, 0 0 11px #4fe0a0; }

.button { border-radius: 9px; min-height: 50px; letter-spacing: .08em; }
.button-primary { background: linear-gradient(110deg, #ffad63, #ff761b 54%, #dc4e00); box-shadow: 0 12px 28px #ff65002b, inset 0 1px #ffe2c1; }
.button-primary:not(:disabled):hover { box-shadow: 0 15px 36px #ff650047, inset 0 1px #ffe2c1; }
.button-secondary { color: #c8d5da; border-color: #29404b; background: #0d181e; }
.button-secondary:not(:disabled):hover { border-color: #7d4c2c; background: #14232b; }

.topbar {
  height: 82px;
  padding: 0 max(30px, calc((100vw - 1560px) / 2));
  background: #050b0fef;
  border-bottom-color: #1b303a;
  box-shadow: 0 10px 35px #0007;
}
.topbar-context { display: flex; align-items: center; gap: 22px; margin-left: auto; margin-right: 24px; }
.topbar-kicker { color: #607984; font: 800 9px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .15em; }
.topbar-signal { display: inline-flex; align-items: center; gap: 7px; color: #86a4ad; font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }
.topbar-signal i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.topbar-actions { gap: 14px; }
.unit-label { padding-right: 18px; border-color: #213640; }
.unit-label span { color: #607984; font-size: 8px; letter-spacing: .2em; }
.unit-label b { color: #e6f1f4; font: 800 13px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .13em; }
.connection-pill { height: 34px; border-color: #29404b; background: #0b151b; font: 800 9px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }
.connection-pill.online { border-color: #256249; background: #123d2b55; }
.connection-pill.offline { border-color: #663943; background: #30151b55; }
.icon-button { border-color: #213640; border-radius: 9px; }

.dashboard-shell { width: min(1560px, calc(100% - 60px)); padding: 38px 0 28px; }
.headline-row { align-items: center; margin-bottom: 18px; padding-bottom: 24px; border-bottom: 1px solid #1a2b34; }
.headline-row h1 { font-size: clamp(31px, 4vw, 48px); letter-spacing: -.05em; font-weight: 850; }
.eyebrow { color: var(--orange-2); font: 800 9px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .2em; }
.eyebrow-separator { color: #657d87; padding: 0 3px; }
.subtle { color: #78909b; font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
.system-state { min-width: 330px; padding: 16px 18px; border-color: #29404b; border-radius: 12px; background: linear-gradient(135deg, #0e1a21, #091116); box-shadow: inset 0 1px #ffffff07; }
.system-state small { color: #69838e; font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .17em; }
.system-state strong { color: #e2edf0; font: 800 11px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; }
.system-state.waiting { border-color: #39424b; }
.system-state.active { border-color: #7a431e; background: linear-gradient(100deg, #29170b, #0e161b); }
.system-state.ready { border-color: #236348; }
.system-state.warning { border-color: #766025; }

.command-ribbon { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; overflow: hidden; border: 1px solid #1c333e; border-radius: 12px; background: linear-gradient(100deg, #0b171e, #091117); box-shadow: 0 12px 32px #0003; }
.ribbon-item { min-height: 66px; display: flex; align-items: center; gap: 12px; padding: 13px 17px; border-right: 1px solid #1a3039; }
.ribbon-item:last-child { border-right: 0; }
.ribbon-item small { display: block; color: #657e89; font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .17em; }
.ribbon-item b { display: block; margin-top: 5px; color: #dbe7ea; font: 800 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .05em; }
.ribbon-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #5a6970; }
.ribbon-dot.live { background: var(--green); box-shadow: 0 0 0 5px #4fe0a012, 0 0 13px var(--green); }
.ribbon-icon { width: 34px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; color: var(--orange-2); border: 1px solid #70401f; border-radius: 7px; background: #29170c; font: 800 9px ui-monospace, SFMono-Regular, Consolas, monospace; }

.panel, .metric-card { border-color: #1c333e; background: linear-gradient(150deg, #0d1820ed, #081016f2); box-shadow: 0 18px 55px #0000003d, inset 0 1px #d8f4ff08; }
.panel { border-radius: 14px; }
.panel-heading { min-height: 76px; padding: 18px 21px; border-bottom-color: #1b3039; }
.panel-heading h2 { color: #e7f0f2; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.primary-grid { grid-template-columns: minmax(0, 1.72fr) minmax(355px, .72fr); gap: 18px; }
.map-panel { min-height: 594px; }
.floating-heading { top: 13px; left: 13px; right: 13px; min-height: 70px; border-color: #2b4652; background: #071016e8; box-shadow: 0 14px 32px #000a; }
.heading-actions { display: flex; align-items: center; gap: 10px; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; color: #73dda8; font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }
.live-badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.mini-button { height: 31px; border-color: #304954; background: #0e1d24; color: #b5c7cd; font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.mini-button:hover { color: var(--orange-2); border-color: #9a5426; background: #1a282d; }
#map { height: 505px; background: #081016; }
.leaflet-container { background: #081016; }
.leaflet-tile-pane { filter: grayscale(.78) brightness(.62) saturate(1.18) contrast(1.14) sepia(.12) hue-rotate(145deg); }
.leaflet-control-attribution { background: #050b0fcf !important; color: #81949d !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: #ffab68 !important; }
.leaflet-control-zoom a { color: #e8f2f5 !important; background: #0c1a21e8 !important; border-bottom-color: #29424d !important; }
.map-readout { min-height: 78px; background: #071016; border-top-color: #1b3039; }
.map-readout > div { padding: 14px 19px; border-right-color: #1b3039; }
.map-readout small, .command-readout small { color: #66818c; font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .17em; }
.map-readout b { color: #d9e8ec; font: 700 12px ui-monospace, SFMono-Regular, Consolas, monospace; }

.control-panel { padding-bottom: 19px; }
.shield-badge { color: var(--orange); border-color: #79431f; background: #2b180c; box-shadow: 0 0 20px #ff761b12; }
.control-status { margin: 20px; padding: 18px; border-color: #28414b; background: #071016; }
.control-status small { color: #66818c; font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; }
.control-status strong { color: #eff7f8; font: 800 13px ui-monospace, SFMono-Regular, Consolas, monospace; }
.control-status p { color: #8299a2; font-size: 10px; }
.safety-banner { background: #28180d; border-color: #70401f; }
.safety-banner p { color: #d5b08c; font-size: 9px; }
.control-button { min-height: 67px; border-radius: 9px; }
.control-button b { font: 800 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.control-button small { color: inherit; font: 500 9px ui-monospace, SFMono-Regular, Consolas, monospace; }
.command-readout { border-top-color: #1b3039; }
.command-readout b { color: #dcebed; font: 800 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; }
.command-readout span { color: #76909b; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }

.metrics-grid { gap: 12px; margin-top: 18px; }
.metric-card { min-height: 126px; position: relative; overflow: hidden; border-radius: 12px; padding: 18px; }
.metric-card::before { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--orange), transparent); opacity: .8; }
.metric-card::after { content: ""; position: absolute; right: -26px; bottom: -38px; width: 110px; height: 110px; border: 1px solid #ff761b14; border-radius: 50%; box-shadow: 0 0 0 16px #ff761b05, 0 0 0 32px #ff761b03; }
.metric-icon { width: 40px; height: 40px; color: var(--orange-2); border-color: #69411f; background: #26170c; font: 800 17px ui-monospace, SFMono-Regular, Consolas, monospace; }
.metric-card small { color: #6b8590; font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .15em; }
.metric-card strong { color: #f0f6f7; font: 800 27px ui-monospace, SFMono-Regular, Consolas, monospace; }
.metric-card em { color: #849da7; font: 700 9px ui-monospace, SFMono-Regular, Consolas, monospace; }
.metric-card p { color: #718b95; font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; }
.speed-card.over { border-color: #7e3539; box-shadow: inset 0 0 35px #c62b2014, 0 18px 55px #0000003d; }
.speed-card.over .metric-icon, .speed-card.over strong { color: var(--red); }
.text-button { color: var(--orange-2); font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }

.secondary-grid { grid-template-columns: .92fr 1.08fr; gap: 18px; margin-top: 18px; }
.systems-list { padding: 4px 21px 13px; }
.system-row { min-height: 76px; border-bottom-color: #1a2e37; }
.system-glyph { color: #9ab1b9; border-color: #29434e; background: #0b1920; font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; }
.system-row b { color: #dbe8eb; font: 800 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
.system-row small { color: #748d98; font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; }
.status-chip { border-radius: 5px; font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.status-chip.good { color: #7feab3; border-color: #296d4d; background: #123a2a; }
.status-chip.bad { color: #ff9296; border-color: #733a3f; background: #35191e; }
.status-chip.warn { color: #ffd782; border-color: #725a26; background: #342810; }
.status-chip.neutral { color: #9aaeb5; border-color: #3a515b; background: #17242a; }
.signal-value { color: var(--cyan); font: 800 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.events-list { max-height: 320px; scrollbar-color: #6a3f20 #0b1419; }
.event-item { border-bottom-color: #1a2e37; }
.event-item b { color: #dce9ec; font: 800 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.event-item p { color: #78919a; font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; }
.event-item time { color: #617983; font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; }
.empty-state { color: #718993; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }

footer { margin-top: 27px; padding-top: 18px; border-top-color: #1b2d35; color: #5f7781; font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; }
.modal { border-color: #38515b; background: linear-gradient(145deg, #0f1d24, #071016); box-shadow: 0 30px 100px #000d; }
.modal-icon { color: var(--orange); border-color: #79431f; background: #2b180c; }
.modal h2 { color: #edf6f8; }
.modal > form > p:not(.eyebrow):not(.form-error) { color: #8ba0a8; }
.modal-warning { border-color: #704e24; background: #2d210f; }
.modal-warning b { color: #ffd17c; }
.modal-warning span { color: #c4aa7e; }
.toast { border-color: #78441f; background: #0e1a20f2; color: #dce9ec; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }

@media (max-width: 1220px) {
  .topbar-context { display: none; }
  .primary-grid { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .78fr); }
}

@media (max-width: 1050px) {
  .dashboard-shell { width: min(100% - 38px, 1560px); }
  .primary-grid, .secondary-grid { grid-template-columns: 1fr; }
  .map-panel { min-height: 594px; }
  #map { height: 505px; }
  .control-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .control-panel .panel-heading { grid-column: 1 / -1; }
  .control-status, .safety-banner, .control-button, .command-readout { margin-left: 16px; margin-right: 16px; }
  .control-status { margin-top: 17px; }
  .safety-banner { margin-top: 17px; }
  .command-readout { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .topbar { height: 69px; padding: 0 15px; }
  .topbar .brand-mark { width: 38px; height: 38px; }
  .topbar .brand strong { font-size: 15px; }
  .topbar .brand small { display: none; }
  .unit-label { display: none; }
  .dashboard-shell { width: min(100% - 22px, 1560px); padding-top: 25px; }
  .headline-row { display: grid; gap: 17px; align-items: stretch; padding-bottom: 19px; }
  .headline-row h1 { font-size: 33px; }
  .system-state { min-width: 0; }
  .command-ribbon { grid-template-columns: 1fr 1fr; }
  .ribbon-item:nth-child(2) { border-right: 0; }
  .ribbon-item:nth-child(-n+2) { border-bottom: 1px solid #1a3039; }
  .ribbon-item { min-height: 62px; padding: 12px; }
  .ribbon-item b { font-size: 9px; }
  .primary-grid { grid-template-columns: 1fr; }
  .map-panel { min-height: 482px; }
  #map { height: 392px; }
  .floating-heading { left: 9px; right: 9px; top: 9px; padding: 14px; }
  .heading-actions { gap: 7px; }
  .live-badge { display: none; }
  .map-readout > div { padding: 12px 10px; }
  .map-readout b { font-size: 10px; }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { min-height: 122px; grid-template-columns: 34px 1fr; padding: 14px; gap: 9px; }
  .metric-icon { width: 32px; height: 32px; font-size: 14px; }
  .metric-card strong { font-size: 22px; }
  .control-panel { display: block; }
  .control-status, .safety-banner, .control-button, .command-readout { margin-left: 14px; margin-right: 14px; }
  .systems-list { padding-left: 15px; padding-right: 15px; }
}

@media (max-width: 430px) {
  .login-card { padding: 29px 21px; }
  .login-card::before { display: none; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 104px; }
  .map-readout { grid-template-columns: 1fr 1fr; }
  .map-readout > div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .modal-actions { grid-template-columns: 1fr; }
}