/* ============================================================
   OPERATIVE // THE EXCHANGE - STARTER GAME
   Industrial surveillance aesthetic: black steel, amber-green
   phosphor, CRT scanlines, machinery rails.
   ============================================================ */

:root {
  --bg: #030507;
  --bg2: #060a10;
  --panel: #0a1017;
  --panel2: #0d141d;
  --line: #1b2a3a;
  --line2: #24374a;
  --ok: #21e6a1;
  --ok-dim: #0f7a58;
  --cyan: #25c9e0;
  --amber: #f5a623;
  --red: #ef4444;
  --text: #b9c6d6;
  --text2: #7d8b9c;
  --dim: #4a5a6b;

  /* ── TYPOGRAPHY ───────────────────────────────────────────────
     --font-editorial  Cormorant Garamond — dramatic serif for
                       operation/mission titles and major headings
     --font-ui         Barlow Condensed   — condensed sans for
                       navigation, buttons, labels, dock
     --font            IBM Plex Mono      — monospace for all
                       technical/system data, coordinates, IDs
  ────────────────────────────────────────────────────────────── */
  --font-editorial: 'Cormorant Garamond', 'Georgia', serif;
  --font-ui:        'Barlow Condensed', 'Arial Narrow', 'Arial', sans-serif;
  --font:           'IBM Plex Mono', 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ok); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }

.mono { font-family: var(--font); letter-spacing: 0.05em; }

.acc { color: var(--ok); }
.ok { color: var(--ok); }
.warn { color: var(--amber); }
.crit { color: var(--red); }
.dim { color: var(--dim); }

.ajax-loading {
  position: relative;
}
.ajax-loading::before {
  content: "";
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--ok), transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--cyan), transparent 35%);
  animation: ajax-pulse .75s linear infinite;
}

@keyframes ajax-pulse { from { opacity: .3; } 50% { opacity: 1; } to { opacity: .3; } }

.theme-picker { display: flex; gap: 8px; align-items: center; position: relative; }
.theme-picker-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(var(--lr),var(--lg),var(--lb),.3);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.theme-picker-toggle:hover {
    border-color: rgb(var(--lr),var(--lg),var(--lb));
    box-shadow: 0 0 12px rgba(var(--lr),var(--lg),var(--lb),.25);
    background: rgba(var(--lr),var(--lg),var(--lb),.08);
}
.color-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: inset 0 0 6px rgba(0,0,0,.5), 0 0 8px currentColor;
}
.picker-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #ffffff;
    text-shadow: 0 0 6px rgba(0,0,0,.8), 0 0 10px rgba(var(--lr),var(--lg),var(--lb),.35);
}
.picker-chev {
    font-size: 7px;
    color: rgba(var(--lr),var(--lg),var(--lb),.6);
    transition: transform .2s ease;
}
.theme-picker-toggle[aria-expanded="true"] .picker-chev {
    transform: rotate(180deg);
}
.theme-picker-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    padding: 12px;
    background: rgba(3,8,10,.98);
    border: 1px solid rgba(var(--lr),var(--lg),var(--lb),.3);
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--lr),var(--lg),var(--lb),.15), inset 0 1px 0 rgba(var(--lr),var(--lg),var(--lb),.1);
    z-index: 100;
    min-width: 180px;
}
.theme-picker-dropdown::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-left: 1px solid rgba(var(--lr),var(--lg),var(--lb),.3);
    border-top: 1px solid rgba(var(--lr),var(--lg),var(--lb),.3);
    transform: rotate(45deg);
}
.fx-color-label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fx-color-hint {
  color: rgba(255,255,255,.55);
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: none;
  margin-top: -2px;
}
.fx-color-label:last-child { margin-bottom: 0; }
.fx-color-input {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(var(--lr), var(--lg), var(--lb), .75);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(var(--lr), var(--lg), var(--lb), .42);
  margin-left: auto;
}
.fx-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.fx-color-input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.top-links {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--dim);
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.top-links a,
.top-links span,
.top-switch {
  border: 1px solid rgba(var(--lr), var(--lg), var(--lb), .34);
  background: rgba(0,0,0,.25);
  color: color-mix(in srgb, rgb(var(--lr), var(--lg), var(--lb)), var(--text) 25%);
  padding: 5px 7px;
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  box-shadow: inset 0 0 10px rgba(var(--lr), var(--lg), var(--lb), .06);
}
.top-links a:hover,
.top-switch:hover {
  border-color: rgba(var(--lr), var(--lg), var(--lb), .82);
  color: rgb(var(--lr), var(--lg), var(--lb));
  box-shadow: 0 0 14px rgba(var(--lr), var(--lg), var(--lb), .35);
}
.auth-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; color: var(--dim); }
.auth-check input { accent-color: var(--ok); }

.monitor, .panel, .bp-hero, .bp-stat, .map-panel, .md-legacy-panel, .navpanel, .rpanel, .workspace, .old-frame {
  position: relative;
  border-color: rgba(var(--lr), var(--lg), var(--lb), .34);
}
.monitor::before, .panel::before, .bp-hero::before, .map-panel::before, .md-legacy-panel::before, .navpanel::before, .rpanel::before, .workspace::before, .old-frame::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(var(--lr),var(--lg),var(--lb),1), rgba(var(--lr),var(--lg),var(--lb),0)) 0 0 / 44px 2px no-repeat,
    linear-gradient(to bottom, rgba(var(--lr),var(--lg),var(--lb),1), rgba(var(--lr),var(--lg),var(--lb),0)) 0 0 / 2px 38px no-repeat,
    linear-gradient(to left, rgba(var(--lr),var(--lg),var(--lb),1), rgba(var(--lr),var(--lg),var(--lb),0)) 100% 0 / 44px 2px no-repeat,
    linear-gradient(to bottom, rgba(var(--lr),var(--lg),var(--lb),1), rgba(var(--lr),var(--lg),var(--lb),0)) 100% 0 / 2px 38px no-repeat,
    linear-gradient(to right, rgba(var(--lr),var(--lg),var(--lb),1), rgba(var(--lr),var(--lg),var(--lb),0)) 0 100% / 44px 2px no-repeat,
    linear-gradient(to top, rgba(var(--lr),var(--lg),var(--lb),1), rgba(var(--lr),var(--lg),var(--lb),0)) 0 100% / 2px 38px no-repeat,
    linear-gradient(to left, rgba(var(--lr),var(--lg),var(--lb),1), rgba(var(--lr),var(--lg),var(--lb),0)) 100% 100% / 44px 2px no-repeat,
    linear-gradient(to top, rgba(var(--lr),var(--lg),var(--lb),1), rgba(var(--lr),var(--lg),var(--lb),0)) 100% 100% / 2px 38px no-repeat,
    linear-gradient(to right, rgba(var(--lr),var(--lg),var(--lb),0), rgba(var(--lr),var(--lg),var(--lb),.75), rgba(var(--lr),var(--lg),var(--lb),0)) 50% 0 / 82% 1.5px no-repeat,
    linear-gradient(to right, rgba(var(--lr),var(--lg),var(--lb),0), rgba(var(--lr),var(--lg),var(--lb),.75), rgba(var(--lr),var(--lg),var(--lb),0)) 50% 100% / 82% 1.5px no-repeat;
  opacity: .9;
  filter: blur(.35px) brightness(1.15);
  mix-blend-mode: screen;
}
.mon-head, .bp-panel-head, .nav-group-title, .dock-group, .status-rows .id-row, .bp-list-row {
  border-bottom: 1px solid color-mix(in srgb, var(--line), var(--cyan) 20%);
}

/* ---------- backdrop layers ---------- */

.cityback {
  position: fixed; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .22; filter: saturate(.7) contrast(1.1);
  pointer-events: none;
}
body.night .cityback { opacity: .14; filter: saturate(.5) hue-rotate(30deg) brightness(.7); }

.crt-glow {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
.scanlines {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; opacity: .5;
}
.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.fx-ambient-glow {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  opacity: calc(.10 + (var(--l-intensity, 1) * .045));
  background:
    radial-gradient(circle at 16% 8%, rgba(var(--lr), var(--lg), var(--lb), .52), transparent 28%),
    radial-gradient(circle at 84% 14%, rgba(var(--wr), var(--wg), var(--wb), .34), transparent 30%),
    radial-gradient(circle at 50% 105%, rgba(var(--lr), var(--lg), var(--lb), .24), transparent 34%);
  mix-blend-mode: screen;
  filter: blur(10px) saturate(1.2);
}
.lightning {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background: rgba(180,200,255,.12); opacity: 0;
}
body.night .lightning.flash { animation: lflash 4s linear infinite; }
@keyframes lflash { 0%, 71% { opacity: 0 } 72% { opacity: .9 } 73% { opacity: 0 } 82% { opacity: 0 } 83% { opacity: .5 } 84% { opacity: 0 } 100% { opacity: 0 } }

/* ---------- machinery rails (chassis svg) ---------- */

.chassis { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.railH { position: absolute; left: 0; width: 100%; height: 8px; }
.railH.top { top: 0; }
.railH.bottom { bottom: 0; }
.railV { position: absolute; top: 0; height: 100%; width: 8px; }
.railV.left { left: 0; }
.railV.right { right: 0; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line2);
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: rgba(33,230,161,.08); color: #fff; border-color: var(--ok); }
.btn.active { background: rgba(33,230,161,.15); color: var(--ok); border-color: var(--ok); }
.btn-primary { border-color: var(--ok-dim); color: var(--ok); }
.btn-primary:hover { background: rgba(33,230,161,.15); border-color: var(--ok); }
.btn-sm { padding: 4px 9px; font-size: 11px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- LEDs ---------- */

.led {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #1a2a3a; box-shadow: 0 0 4px rgba(0,0,0,.8);
  animation: ledblink 2.4s infinite;
}
.led.green { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.led.red { background: var(--red); box-shadow: 0 0 6px var(--red); animation-duration: .9s; }
.led.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.led.cyan { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
@keyframes ledblink { 0%, 55% { opacity: 1 } 60%, 100% { opacity: .35 } }

/* ============================================================
   AUTH PAGES
   ============================================================ */

.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-body .chassis { z-index: 4; }

.auth-wrap { position: relative; z-index: 10; width: min(480px, 92vw); }

.auth-panel {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line2);
  box-shadow: 0 0 30px rgba(33,230,161,.05), inset 0 0 60px rgba(0,0,0,.5);
}
.auth-head {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line2);
  padding: 12px 16px;
  background: rgba(0,0,0,.35);
}
.auth-brand { font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: .25em; color: var(--text); }
.auth-brand em { color: var(--ok); font-style: normal; }
.auth-tag { margin-left: auto; font-size: 10px; color: var(--dim); }
.auth-body { padding: 22px 22px 18px; }
.auth-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--amber); letter-spacing: .28em; margin-bottom: 14px; }
.auth-error {
  border: 1px solid rgba(239,68,68,.5); color: var(--red);
  background: rgba(239,68,68,.08);
  padding: 8px 10px; margin-bottom: 12px; font-size: 12px;
}
.auth-alt { margin-top: 18px; font-size: 11px; color: var(--text2); text-align: center; }
.auth-note { margin-top: 10px; font-size: 10px; color: var(--dim); text-align: center; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 10px; color: var(--text2); letter-spacing: .2em; margin-bottom: 5px; }
.field input, .field select {
  width: 100%;
  background: #05080d;
  border: 1px solid var(--line2);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
}
.field input:focus, .field select:focus { border-color: var(--ok); box-shadow: 0 0 0 1px rgba(33,230,161,.25); }
.field-hint { display: block; margin-top: 4px; font-size: 10px; color: var(--dim); }
.field.check label { display: flex; align-items: center; gap: 8px; color: var(--text); letter-spacing: .1em; font-size: 12px; cursor: pointer; margin-bottom: 0; }
.field.check input { width: auto; }

.btn-auth { width: 100%; padding: 10px; font-size: 13px; }

/* ============================================================
   GAME SHELL LAYOUT
   ============================================================ */

.topbar {
  position: fixed; top: 8px; left: 8px; right: 8px; height: 44px; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  background: linear-gradient(180deg, #0d141d, #0a1017);
  border: 1px solid var(--line2);
  box-shadow: 0 0 20px rgba(0,0,0,.6);
}
/* Storm FX stacking: clouds and lightning sit above the topbar surface;
   the bell and its dropdown remain above every storm layer. */
.topbar > :not(.md-storm-host) { position: relative; z-index: 4; }
.topbar > .bell { z-index: 9; }
.topbar .brand { font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: .28em; white-space: nowrap; }
.topbar .brand em { color: var(--ok); font-style: normal; }
.topbar .sys { font-family: var(--font); font-size: 10px; color: var(--dim); white-space: nowrap; letter-spacing: .1em; }
.topbar .divider { width: 1px; height: 22px; background: var(--line2); }
.leds { display: flex; align-items: center; gap: 5px; }
.ledlabel { font-family: var(--font-ui); font-size: 9px; font-weight: 500; color: var(--dim); margin-right: 8px; letter-spacing: .14em; }
.clock { font-family: var(--font); font-size: 12px; color: var(--ok); white-space: nowrap; margin-left: auto; letter-spacing: .08em; }

.bell { position: relative; }
.bell-btn { position: relative; background: transparent; border: 1px solid var(--line2); color: var(--text); width: 32px; height: 28px; cursor: pointer; font-size: 14px; }
.bell-btn:hover { border-color: var(--ok); color: var(--ok); }
.badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 16px; height: 16px; padding: 0 3px;
  background: var(--red); color: #fff;
  font-size: 9px; line-height: 16px; text-align: center;
  border-radius: 8px; display: none;
}
.badge.on { display: block; }
.bell-drop {
  position: absolute; right: 0; top: 34px; width: 300px; z-index: 60;
  background: var(--panel2); border: 1px solid var(--line2);
  box-shadow: 0 8px 30px rgba(0,0,0,.8);
  display: none;
}
.bell-drop.open { display: block; }
.bell-head { font-family: var(--font-ui); padding: 8px 12px; font-size: 10px; font-weight: 600; letter-spacing: .25em; color: var(--amber); border-bottom: 1px solid var(--line2); }
.bell-list { max-height: 300px; overflow-y: auto; }
.bell-item { padding: 9px 12px; border-bottom: 1px solid rgba(27,42,58,.6); }
.bell-item.unread { background: rgba(33,230,161,.05); }
.bell-title { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--ok); letter-spacing: .08em; }
.bell-body { font-family: var(--font-ui); font-size: 11px; color: var(--text2); margin-top: 2px; }
.bell-time { font-family: var(--font); font-size: 9px; color: var(--dim); margin-top: 3px; }

.userchip { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.uc-callsign { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: #fff; letter-spacing: .14em; }
.uc-rank { font-family: var(--font-ui); font-size: 9px; font-weight: 500; color: var(--amber); letter-spacing: .25em; }

.nav-toggle { display: none; background: transparent; border: 1px solid var(--line2); color: var(--text); width: 30px; height: 28px; cursor: pointer; }

.shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 62px 64px 120px;
  min-height: 100vh;
  max-width: 1700px;
  margin: 0 auto;
}

/* ---------- nav ---------- */

.navpanel {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line2);
  align-self: start;
}
.nav-head {
  padding: 9px 12px; font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .35em; color: var(--amber);
  border-bottom: 1px solid var(--line2); background: rgba(0,0,0,.3);
}
.nav { padding: 6px 0 8px; }
.nav-group { margin-top: 8px; }
.nav-group-title { padding: 4px 12px 2px; font-family: var(--font-ui); font-size: 9px; font-weight: 500; letter-spacing: .3em; color: var(--dim); }
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  font-family: var(--font-ui); color: var(--text2); font-size: 12px; font-weight: 500; letter-spacing: .14em;
  border-left: 2px solid transparent;
}
.nav-item:hover { color: #fff; background: rgba(33,230,161,.05); text-decoration: none; }
.nav-item.active { color: var(--ok); border-left-color: var(--ok); background: rgba(33,230,161,.08); }
.nav-ico { width: 14px; text-align: center; font-size: 11px; color: var(--dim); }
.nav-item.active .nav-ico { color: var(--ok); }
.nav-foot { font-family: var(--font); padding: 10px 12px; font-size: 9px; color: var(--dim); border-top: 1px solid var(--line2); letter-spacing: .06em; }

/* ---------- nav groups: collapse + live badges ---------- */

.nav-group-title {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
  transition: color .15s ease;
}
.nav-group-title:hover { color: var(--text); }
.nav-group-chev { margin-left: auto; font-size: 8px; color: var(--dim); transition: transform .2s ease; }
.nav-group.collapsed .nav-group-chev { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-links { display: none; }

.nav-badge {
  margin-left: auto;
  padding: 1px 6px;
  min-width: 16px;
  text-align: center;
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: .06em;
  border: 1px solid var(--line);
  color: var(--dim);
  background: rgba(0,0,0,.35);
  white-space: nowrap;
}
.nav-badge.ready { color: var(--ok); border-color: rgba(33,230,161,.4); background: rgba(33,230,161,.07); }
.nav-badge.wait  { color: var(--amber); border-color: rgba(245,166,35,.4); background: rgba(245,166,35,.07); }
.nav-item.active .nav-badge { color: var(--ok); }

/* ---------- workspace ---------- */

.workspace { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-head {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line2);
}
.ws-title { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: .28em; color: #fff; }
.ws-tag { font-family: var(--font); margin-left: auto; font-size: 9px; color: var(--dim); letter-spacing: .2em; }
.ws-body { display: flex; flex-direction: column; gap: 10px; }

/* ---------- right panel ---------- */

.rpanel { display: flex; flex-direction: column; gap: 10px; }
.rp-block { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line2); }
.rp-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--line2);
  background: rgba(0,0,0,.3);
}
.rp-title { font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .26em; color: var(--text); }
.rp-tag { font-family: var(--font); margin-left: auto; font-size: 9px; color: var(--dim); letter-spacing: .1em; }
.rp-body { padding: 10px; }

.id-row, .police-row, .wx-row, .dossier-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 3px 0; font-size: 11px;
}
.id-row .k, .police-row .k, .wx-row .k, .dossier-row .k { font-family: var(--font-ui); font-size: 10px; font-weight: 500; color: var(--dim); letter-spacing: .14em; }
.id-row .v, .police-row .v, .wx-row .v, .dossier-row .v { font-family: var(--font); font-size: 10px; color: var(--text2); text-align: right; letter-spacing: .06em; }
.rp-scroll { max-height: 260px; overflow-y: auto; }

/* vitals / ECG */

.ecg-wrap { position: relative; background: #02080a; border: 1px solid var(--line2); margin-bottom: 8px; }
.ecg-wrap svg { display: block; width: 100%; height: 92px; }
.ecggrid line { stroke: rgba(37,201,224,.14); stroke-width: 1; }
.ecg-glow { fill: none; stroke: var(--ok); stroke-linecap: round; }
.ecg-core { fill: none; stroke: var(--ok); stroke-linecap: round; }
.ecg-dot { fill: var(--ok); }
.vitals.readout { display: flex; justify-content: space-between; align-items: center; }
.bpm-block { display: flex; align-items: baseline; gap: 6px; }
.bpm-num { font-family: var(--font); font-size: 26px; color: var(--ok); }
.bpm-unit { font-family: var(--font-ui); font-size: 10px; font-weight: 500; color: var(--dim); letter-spacing: .2em; }
.health-block { text-align: right; }
.health-num { font-family: var(--font); font-size: 20px; color: var(--text); }
.health-label { font-family: var(--font-ui); font-size: 9px; font-weight: 500; color: var(--dim); letter-spacing: .2em; }

/* heat */

.heat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.heat-num { font-family: var(--font); font-size: 24px; color: var(--amber); }
.heat-warn { font-family: var(--font-ui); display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 600; letter-spacing: .2em; color: var(--dim); }
.heat-warn.on { color: var(--red); }
.heat-gauge { position: relative; height: 10px; background: #04070c; border: 1px solid var(--line2); }
.heat-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--ok), var(--amber) 55%, var(--red)); transition: width .8s; }
.heat-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.14); }
.heat-tick.hl { background: rgba(255,255,255,.3); }
.heat-levels { font-family: var(--font-ui); font-weight: 500; display: flex; justify-content: space-between; font-size: 9px; color: var(--dim); margin-top: 4px; letter-spacing: .2em; }
.rp-block.state-high { border-color: rgba(239,68,68,.4); }

/* surveillance mini */

.surv-video { position: relative; background: #020507; border: 1px solid var(--line2); overflow: hidden; aspect-ratio: 4/3; }
.surv-video-lg { aspect-ratio: 16/9; }
.surv-video img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.6) contrast(1.15) brightness(.9); }
.crt-label { font-family: var(--font); position: absolute; top: 6px; left: 8px; font-size: 9px; color: var(--ok); letter-spacing: .18em; background: rgba(0,0,0,.55); padding: 2px 6px; z-index: 2; }
.crt-stamp { font-family: var(--font); position: absolute; bottom: 6px; right: 8px; font-size: 9px; color: var(--ok); letter-spacing: .12em; background: rgba(0,0,0,.55); padding: 2px 6px; z-index: 2; }
.surv-rec { font-family: var(--font); position: absolute; top: 6px; right: 8px; display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--red); letter-spacing: .15em; background: rgba(0,0,0,.55); padding: 2px 6px; z-index: 2; }
.surv-rec .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: ledblink 1.2s infinite; }
.surv-id { font-family: var(--font); position: absolute; bottom: 6px; left: 8px; font-size: 9px; color: var(--amber); letter-spacing: .15em; background: rgba(0,0,0,.55); padding: 2px 6px; z-index: 2; }
.surv-coords { font-family: var(--font); position: absolute; top: 30px; left: 8px; font-size: 9px; color: var(--cyan); letter-spacing: .1em; background: rgba(0,0,0,.55); padding: 2px 6px; z-index: 2; }
.track-box {
  position: absolute; z-index: 2; border: 1px solid rgba(245,166,35,.8);
  box-shadow: 0 0 10px rgba(245,166,35,.4), inset 0 0 8px rgba(245,166,35,.2);
  width: 90px; height: 90px;
}
.surv-body { display: flex; flex-direction: column; gap: 10px; }

/* dossier */

.threat-bar { height: 6px; background: #04070c; border: 1px solid var(--line2); margin: 6px 0 10px; }
.threat-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--amber), var(--red)); width: 0; transition: width .6s; }
.dossier-btns { display: flex; gap: 8px; }

/* activity feed */

.act-item { padding: 6px 0; border-bottom: 1px dashed rgba(27,42,58,.6); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.act-type { font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: .18em; padding: 1px 5px; border: 1px solid var(--line2); color: var(--text2); }
.act-type.mission { color: var(--amber); border-color: rgba(245,166,35,.4); }
.act-type.intel { color: var(--cyan); border-color: rgba(37,201,224,.4); }
.act-type.system { color: var(--ok); border-color: rgba(33,230,161,.4); }
.act-text { font-family: var(--font-ui); font-size: 11px; color: var(--text2); flex: 1 1 160px; }
.act-time { font-family: var(--font); font-size: 9px; color: var(--dim); }

/* ---------- dock ---------- */

.dock {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 50;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0;
  background: linear-gradient(0deg, #0d141d, #0a1017);
  border: 1px solid var(--line2);
  box-shadow: 0 0 20px rgba(0,0,0,.6);
  overflow: hidden;
}
/* top row: news rail sits flush inside dock */
.dock > .game-news-rail {
  position: relative;
  z-index: auto;
  margin: 0;
  border-top: none;
  border-bottom: 1px solid rgba(110,255,220,.18);
  border-left: none;
  border-right: none;
  box-shadow: none;
  width: 100%;
  flex-shrink: 0;
}
.dock.property-news-dock {
  bottom: 50px;
  z-index: 49;
}
/* bottom row: command buttons */
.dock-nav {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  overflow-x: auto;
  flex-shrink: 0;
}
.dock-group { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.dock-label { font-family: var(--font-ui); font-size: 9px; font-weight: 500; color: var(--dim); letter-spacing: .25em; }
.dock-btns { display: flex; gap: 4px; }
.dock-divider { width: 1px; height: 24px; background: var(--line2); }

/* ---------- teletype ticker ---------- */

.teletype { position: fixed; left: 8px; right: 8px; bottom: 120px; z-index: 45; overflow: hidden; }
.ticker {
  white-space: nowrap; overflow: hidden;
  font-size: 10px; color: var(--ok); letter-spacing: .12em;
  background: rgba(3,5,7,.7); border: 1px solid var(--line2);
  padding: 4px 10px;
}
.tick-item { display: inline-block; padding-right: 40px; }

/* ---------- monitors ---------- */

.monitor { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line2); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.65), 0 5px 12px rgba(0,0,0,.5); }
.mon-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line2); background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.28)); box-shadow: inset 0 -1px 0 rgba(255,255,255,.03); }
.mon-title { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .24em; color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.mon-tag { font-family: var(--font); margin-left: auto; font-size: 9px; color: var(--dim); letter-spacing: .14em; }
.mon-body { padding: 12px; box-shadow: inset 0 4px 12px rgba(0,0,0,.4); }

/* dashboards grids */

.ops-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.page-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.surv-page-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }

/* operation card */

.op-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.op-title { font-family: var(--font-editorial); font-size: 18px; font-weight: 500; color: #fff; letter-spacing: .04em; }
.op-status { font-family: var(--font-ui); font-size: 9px; font-weight: 600; padding: 2px 7px; border: 1px solid var(--line2); letter-spacing: .18em; }
.st-available { color: var(--cyan); border-color: rgba(37,201,224,.5); }
.st-in_progress { color: var(--amber); border-color: rgba(245,166,35,.5); }
.st-completed { color: var(--ok); border-color: rgba(33,230,161,.5); }
.st-high { color: var(--red); border-color: rgba(239,68,68,.5); }
.st-medium { color: var(--amber); border-color: rgba(245,166,35,.5); }
.st-low { color: var(--ok); border-color: rgba(33,230,161,.5); }
.op-meta { font-family: var(--font-ui); font-size: 10px; font-weight: 500; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--dim); margin-bottom: 8px; letter-spacing: .1em; }
.op-brief { font-family: var(--font-ui); font-size: 12px; color: var(--text2); margin-bottom: 10px; line-height: 1.5; }
.op-progress { margin: 8px 0; }
.op-progress-label { font-family: var(--font-ui); font-size: 10px; font-weight: 500; display: flex; justify-content: space-between; color: var(--dim); margin-bottom: 4px; letter-spacing: .14em; }
.op-progress-bar { height: 8px; background: #04070c; border: 1px solid var(--line2); }
.op-progress-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--ok-dim), var(--ok)); transition: width .6s; }
.op-reward { font-family: var(--font); display: flex; gap: 16px; font-size: 10px; color: var(--amber); margin-bottom: 10px; }
.op-actions { margin-top: 4px; }
.op-done { font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--ok); letter-spacing: .1em; }
.ops-stby { font-family: var(--font-ui); color: var(--amber); font-size: 12px; font-weight: 500; padding: 18px 0 12px; letter-spacing: .14em; }
.flash { font-family: var(--font-ui); border: 1px solid rgba(33,230,161,.4); color: var(--ok); padding: 8px 10px; margin-bottom: 12px; font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.flash-bad { border-color: rgba(239,68,68,.5); color: var(--red); }

/* CCTV */

.cctv .crt { position: relative; background: #020507; border: 1px solid var(--line2); overflow: hidden; aspect-ratio: 16/9; margin-bottom: 8px; }
.crt img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.55) contrast(1.2) brightness(.85); }
.cctv-cams { display: flex; gap: 6px; flex-wrap: wrap; }
.cctv-cams .btn { font-size: 10px; padding: 3px 8px; }

/* police */

.police-bar { height: 8px; background: #04070c; border: 1px solid var(--line2); margin-bottom: 10px; }
.police-bar .fill { display: block; height: 100%; transition: width .8s; }
.police-bar .fill.lvl1 { background: var(--ok); }
.police-bar .fill.lvl2 { background: var(--amber); }
.police-bar .fill.lvl3 { background: var(--red); }
.police-alert { display: none; margin-top: 10px; border: 1px solid rgba(239,68,68,.5); color: var(--red); padding: 7px 10px; font-size: 11px; letter-spacing: .1em; }
.police-alert.on { display: block; }

/* missions */

.mission-card { border: 1px solid var(--line2); background: rgba(0,0,0,.25); padding: 12px; margin-bottom: 10px; }
.mission-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.mission-code { font-family: var(--font); font-size: 9px; color: var(--dim); letter-spacing: .2em; }
.mission-title { font-family: var(--font-editorial); font-size: 16px; font-weight: 500; color: #fff; letter-spacing: .03em; }
.mission-status { font-family: var(--font-ui); font-weight: 600; margin-left: auto; font-size: 9px; padding: 2px 7px; border: 1px solid var(--line2); letter-spacing: .15em; }
.mission-meta { font-family: var(--font-ui); font-size: 10px; font-weight: 500; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--dim); margin: 4px 0; letter-spacing: .1em; }
.mission-brief { font-family: var(--font-ui); font-size: 12px; color: var(--text2); margin-bottom: 6px; line-height: 1.5; }

/* intelligence */

.intel-note { font-family: var(--font-ui); border-left: 3px solid var(--amber); background: rgba(245,166,35,.05); padding: 8px 10px; font-size: 11px; font-weight: 400; color: var(--text2); margin-bottom: 12px; line-height: 1.5; }

/* inventory */

.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.inv-card { border: 1px solid var(--line2); background: rgba(0,0,0,.25); padding: 10px; }
.inv-cat { font-family: var(--font-ui); font-size: 9px; font-weight: 600; color: var(--dim); letter-spacing: .2em; margin-bottom: 4px; }
.inv-name { font-family: var(--font-editorial); font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 4px; }
.inv-desc { font-family: var(--font-ui); font-size: 10px; color: var(--text2); margin-bottom: 8px; }
.inv-qty { font-family: var(--font); font-size: 10px; color: var(--amber); }

/* map */

.map-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.map-cell { border: 1px solid var(--line2); background: rgba(0,0,0,.3); padding: 14px 10px; text-align: center; }
.map-cell.active { border-color: var(--ok); box-shadow: 0 0 12px rgba(33,230,161,.15); }
.mc-name { font-family: var(--font-ui); display: block; font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: .16em; }
.mc-meta { font-family: var(--font); display: block; font-size: 9px; color: var(--dim); margin-top: 4px; }

/* placeholders */

.placeholder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ph-card { border: 1px dashed var(--line2); padding: 12px; }
.ph-title { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--amber); letter-spacing: .18em; margin-bottom: 4px; }
.ph-desc { font-family: var(--font-ui); font-size: 10px; color: var(--text2); }

/* economy */

.eco-balance { font-family: var(--font-ui); display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed rgba(27,42,58,.6); font-size: 13px; font-weight: 500; letter-spacing: .06em; }
.eco-balance .v { font-family: var(--font); font-size: 15px; letter-spacing: .06em; }

/* ---------- machinery frame (UPG-003) ---------- */

.mframe { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.mcon { position: absolute; }
.mcon.top { top: 0; left: 0; width: 100%; height: 8px; }
.mcon.bottom { bottom: 0; left: 0; width: 100%; height: 8px; }
.mcon.left { left: 0; top: 0; height: 100%; width: 8px; }
.mcon.right { right: 0; top: 0; height: 100%; width: 8px; }
.mcon-rail { stroke: #22303f; stroke-width: 2.4; }
.mcon-flow {
  stroke: rgba(33,230,161,.4); stroke-width: 1.6;
  stroke-dasharray: 14 22; animation: pipeFlow 2.4s linear infinite;
}
@keyframes pipeFlow { to { stroke-dashoffset: -36; } }

.mjoint { position: absolute; width: 108px; height: 108px; }
.mjoint.tl { top: -4px; left: -4px; }
.mjoint.tr { top: -4px; right: -4px; }
.mjoint.bl { bottom: -4px; left: -4px; }
.mjoint.br { bottom: -4px; right: -4px; }
.mjoint-plate { fill: #0a0f16; stroke: #24374a; stroke-width: 2; }
.mcog-ring {
  fill: none; stroke: #2e4158; stroke-width: 7;
  stroke-dasharray: 6.2 5.4;
  transform-origin: 60px 60px; animation: cogSpin 26s linear infinite;
}
.mcog-core { fill: #0e1620; stroke: #3a5170; stroke-width: 2; }
@keyframes cogSpin { to { transform: rotate(360deg); } }
.mscrew { fill: #1b2736; stroke: #3a5170; stroke-width: 1.2; }

/* ---------- console head (right console plate) ---------- */

.console-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #111a26, #0a1017);
  border: 1px solid var(--line2);
}
.ch-brand { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .35em; color: #dfe9f5; }
.ch-tag { font-family: var(--font); margin-left: auto; font-size: 9px; color: var(--ok); letter-spacing: .18em; }

/* ---------- nav icon plates ---------- */

.nav-ico { width: 16px; height: 16px; flex: none; color: var(--dim); }
.nav-item { position: relative; padding: 7px 12px 7px 10px; }
.nav-item.active .nav-ico { color: var(--ok); }
.nav-lamp {
  margin-left: auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 6px var(--ok);
  animation: ledblink 1.6s infinite;
}

/* ---------- game-wall bezel (UPG-002) ---------- */

.workspace {
  position: relative;
  z-index: 10;
  background: linear-gradient(180deg, #0a0f16, #070b10);
  border: 1px solid #2a3d54;
  padding: 10px;
  box-shadow: inset 0 0 26px rgba(0,0,0,.7), inset 0 0 2px rgba(255,255,255,.03), 0 0 18px rgba(0,0,0,.5);
}
.workspace::before, .workspace::after {
  content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #1b2736; border: 1px solid #3a5170; box-shadow: 0 0 3px rgba(0,0,0,.9);
}
.workspace::before { top: -5px; left: -5px; }
.workspace::after { top: -5px; right: -5px; }
.ws-head {
  background: transparent; border: none;
  border-bottom: 1px solid var(--line2);
  padding: 2px 4px 9px;
}
.ws-title {
  font-family: var(--font-ui); font-weight: 600;
  color: #e8f1fb; font-size: 12px; letter-spacing: .32em;
  text-shadow: 0 0 10px rgba(33,230,161,.25);
}
.ws-tag { font-family: var(--font); color: var(--ok); opacity: .85; }

.navpanel {
  position: relative;
  background: linear-gradient(180deg, #0c131b, #080d13);
  border-color: #24374a;
  box-shadow: inset 0 0 20px rgba(0,0,0,.55);
}
.navpanel::before, .navpanel::after {
  content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #1b2736; border: 1px solid #3a5170;
}
.navpanel::before { top: -5px; left: -5px; }
.navpanel::after { top: -5px; right: -5px; }
.nav-head { background: rgba(0,0,0,.45); }

/* ---------- RIGHT-SIDE HEART (UPG-001) ---------- */

.heart-svg {
  display: block; width: 100%; max-width: 200px; margin: 0 auto;
  --hue: var(--ok); --hue-dim: var(--ok-dim);
  --hue-chamber-top: #0a2b1e; --hue-chamber-bot: #03120c;
}
.heart-svg[data-state="alert"] {
  --hue: var(--amber); --hue-dim: #8a5a0f;
  --hue-chamber-top: #2b1f0a; --hue-chamber-bot: #120c03;
}
.heart-svg[data-state="panic"] {
  --hue: var(--red); --hue-dim: #7f1d1d;
  --hue-chamber-top: #2b0a0a; --hue-chamber-bot: #120303;
}
.heart-outer { fill: none; stroke: var(--hue-dim); stroke-width: 2; }
.heart-halo { fill: var(--hue-dim); opacity: .32; }
.heart-chamber { fill: url(#heartChamber); stroke: var(--hue); stroke-width: 1.5; }
.heart-valve { fill: none; stroke: var(--hue); stroke-width: 1.6; stroke-linecap: round; }
.heart-light { animation: heartLightPulse 1s ease-in-out infinite; }
@keyframes heartLightPulse {
  0%, 100% { opacity: .45 } 12% { opacity: 1 } 24% { opacity: .55 } 100% { opacity: .45 }
}
.heart-svg[data-state="alert"] .heart-light { animation-duration: .6s; }
.heart-svg[data-state="panic"] .heart-light { animation-duration: .32s; }
.heart-svg[data-state="panic"] .heart-halo { animation: panicHalo .5s ease-in-out infinite alternate; }
@keyframes panicHalo { from { opacity: .25 } to { opacity: .75 } }

.heart-pipes rect { fill: #0b1118; stroke: var(--hue-dim); stroke-width: 1.5; }
.heart-pipe-flow {
  stroke: var(--hue); stroke-width: 1.7; stroke-linecap: round;
  stroke-dasharray: 6 22; animation: pipeFlow 1.5s linear infinite;
  opacity: .75;
}
.heart-svg[data-state="panic"] .heart-pipe-flow { animation-duration: .5s; }

.heart-wrap {
  animation: heartBeat .77s cubic-bezier(.45,.05,.55,.95) infinite;
  transform-origin: 50% 66%;
}
@keyframes heartBeat {
  0%, 100% { transform: scale(1) }
  12% { transform: scale(1.07) }
  24% { transform: scale(0.99) }
  34% { transform: scale(1.04) }
  45% { transform: scale(1) }
}
.heart-plate { font-family: var(--font-ui); display: flex; justify-content: space-between; margin-top: 8px; font-size: 9px; font-weight: 600; letter-spacing: .24em; }
.hp-label { color: var(--dim); }
.hp-state.normal { color: var(--ok); }
.hp-state.alert { color: var(--amber); }
.hp-state.panic { color: var(--red); animation: ledblink .5s infinite; }
.vitals .ecg-wrap svg { height: 70px; }
.vitals.readout { margin-top: 10px; }
.rp-block.vitals.state-alert { border-color: rgba(245,166,35,.45); }
.rp-block.vitals.state-panic { border-color: rgba(239,68,68,.55); }

/* ---------- responsive (heart must never disappear) ---------- */

@media (max-width: 1200px) and (min-width: 1001px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rpanel { display: flex; }
  .rp-block.activity { display: none; }
}

@media (max-width: 1000px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .navpanel { display: none; position: fixed; z-index: 80; top: 52px; left: 8px; right: 8px; max-height: calc(100vh - 70px); overflow-y: auto; }
  .navpanel.open { display: block; }
  .nav-toggle { display: inline-block; }
}

@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rpanel { flex-direction: row; flex-wrap: wrap; }
  .rpanel .rp-block { flex: 1 1 230px; }
  .topbar .sys, .topbar .leds, .top-links span { display: none; }
  .top-links { gap: 4px; }
  .top-links a, .top-switch { padding: 4px 5px; }
}

@media (max-width: 768px) {
  .shell { padding-right: 16px; padding-left: 16px; }
}


body.reduced-motion * { animation: none !important; transition: none !important; }

/* ---------- FLOATING MODAL WINDOWS (MESSENGER & TRADE) ---------- */

.modal-win {
  position: fixed;
  z-index: 200;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 760px;
  max-width: 95vw;
  max-height: 85vh;
  background: var(--bg-card);
  border: 1px solid var(--accent-cyan);
  box-shadow: 0 10px 40px rgba(0,0,0,0.85), 0 0 15px rgba(0, 240, 255, 0.25);
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  background: rgba(10, 18, 25, 0.95);
  border-bottom: 1px solid var(--border-color);
}

.modal-title {
  font-size: 0.82rem;
  color: var(--txt-main);
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-controls {
  display: flex;
  gap: 0.4rem;
}

.modal-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--txt-muted);
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-family: var(--font);
}

.modal-btn:hover {
  color: var(--txt-main);
  border-color: var(--accent-cyan);
}

/* MESSENGER GRID */

.messenger-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 480px;
  max-height: 70vh;
}

.msg-contacts-panel {
  background: rgba(8, 14, 20, 0.9);
  border-right: 1px solid var(--border-color);
  padding: 0.6rem;
  overflow-y: auto;
}

.msg-section-title {
  font-size: 0.65rem;
  color: var(--txt-muted);
  letter-spacing: 0.15em;
  margin: 0.6rem 0 0.4rem 0.2rem;
}

.msg-contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--txt-main);
  margin-bottom: 0.2rem;
  border-radius: 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.msg-contact-item:hover, .msg-contact-item.active {
  background: rgba(0, 240, 255, 0.08);
  border-color: var(--accent-cyan);
}

.msg-contact-item .msg-c-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font);
}

.msg-contact-item .badge {
  background: var(--accent-red);
  color: #fff;
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 10px;
}

.msg-chat-panel {
  display: flex;
  flex-direction: column;
  background: rgba(12, 20, 28, 0.95);
}

.msg-chat-header {
  padding: 0.6rem 1rem;
  background: rgba(5, 10, 15, 0.8);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.8rem;
  color: var(--txt-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.msg-chat-body {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.msg-bubble {
  max-width: 80%;
  padding: 0.6rem 0.8rem;
  border-radius: 3px;
  font-size: 0.82rem;
  line-height: 1.4;
  border: 1px solid var(--border-color);
}

.msg-bubble.sent {
  align-self: flex-end;
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.35);
  color: #e0f8ff;
}

.msg-bubble.received {
  align-self: flex-start;
  background: rgba(245, 166, 35, 0.08);
  border-color: rgba(245, 166, 35, 0.3);
  color: #fff;
}

.msg-bubble-meta {
  font-size: 0.65rem;
  color: var(--txt-muted);
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font);
}

.msg-chat-footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border-color);
  background: rgba(5, 10, 15, 0.9);
}

.msg-input {
  flex: 1;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--txt-main);
  padding: 0.5rem 0.8rem;
  font-family: var(--font);
  font-size: 0.82rem;
}

.msg-input:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

/* TRADE GRID */

.trade-grid {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 70vh;
  overflow-y: auto;
}

.trade-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
}

.t-tab {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--txt-muted);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font-size: 0.75rem;
}

.t-tab.active {
  background: rgba(245, 166, 35, 0.15);
  border-color: var(--accent-amber);
  color: var(--accent-amber);
}

.trade-card {
  background: rgba(5, 10, 15, 0.6);
  border: 1px solid var(--border-color);
  padding: 0.8rem;
  margin-bottom: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trade-card-info {
  font-size: 0.8rem;
  color: var(--txt-main);
}

.dock-group.cmd-group .dock-btns {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
/* ================================================================
   CRIME NETWORK
   ================================================================ */

.jobs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    gap: 8px;
    width: 100%;
}

.jobs-main,
.jobs-cctv {
    min-width: 0;
}

.jobs-cctv {
    position: sticky;
    top: 8px;
}

.job-row {
    padding: 7px 9px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.job-row:last-child {
    border-bottom: 0;
}

.job-line {
    display: grid;
    grid-template-columns: 65px minmax(0,1fr) auto;
    align-items: center;
    gap: 7px;
}

.job-code {
    font: 8px monospace;
    opacity: .4;
}

.job-title {
    min-width: 0;
    font-size: 11px;
    font-weight: 800;
}

.job-difficulty {
    font: 8px monospace;
    opacity: .5;
}

.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 3px;
    font: 8px monospace;
    opacity: .5;
}

.job-brief {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.3;
    opacity: .6;
}

.job-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.job-money {
    font: 9px monospace;
}

.job-money strong {
    font-size: 12px;
}


/* ================================================================
   CRIME STATUS
   ================================================================ */

.crime-status {
    padding: 12px;
    text-align: center;
    border-left: 2px solid #35e58b;
}

.crime-status-title {
    font-size: 13px;
    font-weight: 900;
}

.crime-status-sub {
    margin-top: 4px;
    font: 8px monospace;
    opacity: .5;
}

.crime-cooldown {
    margin-top: 6px;
    font: 700 25px monospace;
}

.timer-track {
    height: 3px;
    margin-top: 8px;
    background: rgba(255,255,255,.06);
}

.timer-fill {
    width: 0;
    height: 100%;
    background: #35e58b;
    transition: width .25s linear;
}


/* ================================================================
   BUTTONS
   ================================================================ */

.jobs-layout button {
    position: relative;
    z-index: 20;
    pointer-events: auto !important;
    cursor: pointer;
}

.jobs-layout button:disabled {
    cursor: not-allowed;
    opacity: .4;
}


/* ================================================================
   CCTV
   ================================================================ */

.cctv-panel {
    position: sticky;
    top: 8px;
}

.cctv-body {
    padding: 7px;
}

.cctv-screen {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #050607;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,.08);
}

.cctv-screen video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.cctv-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font: 8px monospace;
    line-height: 1.5;
    opacity: .35;
}

.cctv-overlay {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 5px;
    display: flex;
    justify-content: space-between;
    font: 7px monospace;
    pointer-events: none;
    text-shadow: 0 1px 4px #000;
}

.cctv-result {
    margin-top: 7px;
    padding: 6px;
    border-left: 2px solid rgba(255,255,255,.2);
}

.cctv-success {
    border-left-color: #35e58b;
}

.cctv-gotaway {
    border-left-color: #ffd15c;
}

.cctv-failed {
    border-left-color: #ff9d4d;
}

.cctv-arrested {
    border-left-color: #ff4e5e;
}

.cctv-title {
    font-size: 11px;
    font-weight: 900;
}

.cctv-meta {
    margin-top: 4px;
    font: 8px monospace;
    opacity: .5;
}

.cctv-money {
    margin-top: 6px;
    font: 9px monospace;
}

.cctv-money strong {
    font-size: 13px;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 850px) {

    .jobs-layout {
        grid-template-columns: 1fr;
    }

    .jobs-cctv {
        position: relative;
        top: auto;
    }
}