:root {
  --bg: #090b0d;
  --bg2: #0e1216;
  --panel: #12171c;
  --panel2: #171d23;
  --line: #242c34;
  --line2: #333e49;
  --text: #cdd5dd;
  --dim: #7a8794;
  --faint: #4a5560;
  --amber: #ff9f1c;
  --amber-d: #b36b05;
  --good: #5ad17a;
  --warn: #ffc93c;
  --bad: #ff5252;
  --energy: #ffd23f;
  --cyan: #4cc9f0;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 6px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text); font: 13px/1.45 var(--mono);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
h1, h2, h3 { margin: 0; font-weight: 600; }
.label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.num { font-variant-numeric: tabular-nums; }
.good { color: var(--good); } .warn { color: var(--warn); } .bad { color: var(--bad); } .dim { color: var(--dim); }

.btn {
  background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--radius);
  padding: 7px 12px; letter-spacing: .06em; text-transform: uppercase; font-size: 11px;
  transition: background .12s, border-color .12s, transform .06s, color .12s;
}
.btn:hover:not(:disabled) { border-color: var(--amber); color: #fff; background: #1d252c; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; }
.btn.primary { background: var(--amber); border-color: var(--amber); color: #1a1000; font-weight: 700; }
.btn.primary:hover:not(:disabled) { background: #ffb340; color: #000; }
.btn.danger { border-color: #5c2424; color: #ff8a8a; }
.btn.danger:hover:not(:disabled) { background: #3a1616; border-color: var(--bad); color: #fff; }
.btn.block { display: block; width: 100%; }
.btn:focus-visible, .dtab:focus-visible, .ptab:focus-visible, .opt:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

/* ---------- login ---------- */
.login-wrap { height: 100%; display: grid; place-items: center; padding: 16px; overflow: auto;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,159,28,.08), transparent 55%),
    repeating-radial-gradient(circle at 50% 42%, transparent 0 58px, rgba(255,255,255,.022) 58px 59px),
    var(--bg); }
.login-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 28px; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.brand { color: var(--amber); font-weight: 800; letter-spacing: .32em; font-size: 22px; }
.brand-sub { color: var(--dim); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin: 4px 0 22px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; margin-bottom: 18px; }
.seg button { background: none; border: 0; padding: 7px; border-radius: 4px; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.seg button[aria-selected="true"] { background: var(--panel2); color: var(--amber); }
.field { display: block; margin-bottom: 14px; }
.field input { width: 100%; margin-top: 6px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--radius); color: var(--text); padding: 10px 12px; font: inherit; }
.field input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,159,28,.15); }
.form-error { min-height: 20px; color: var(--bad); font-size: 12px; margin: -4px 0 10px; }
.login-foot { margin-top: 18px; color: var(--faint); font-size: 11px; line-height: 1.6; }
.login-card [hidden] { display: none !important; }
.form-note { min-height: 0; color: var(--good); font-size: 12px; margin: -4px 0 10px; }
.form-note:empty { display: none; }
.form-note.warn { color: var(--warn); border: 1px solid #7a6320; background: rgba(40,32,8,.6); padding: 8px 10px; border-radius: var(--radius); margin: 0 0 14px; }
.step-title { color: var(--amber); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.turnstile { margin: 0 0 12px; min-height: 65px; }
.login-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--dim); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--amber); }


.res { padding: 8px 0; border-bottom: 1px solid var(--line); }
.res:last-child { border: 0; }
.res .row { display: flex; align-items: center; gap: 8px; }
.res .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.res .nm { flex: 1; color: var(--dim); font-size: 12px; }
.res .amt { font-weight: 700; font-size: 14px; }
.res .sub { display: flex; justify-content: space-between; font-size: 11px; margin-top: 4px; color: var(--faint); }
.res .bar { height: 3px; background: #1d252c; border-radius: 2px; margin-top: 5px; overflow: hidden; }
.res .bar i { display: block; height: 100%; width: 0; }
.res.crit .amt { color: var(--bad); animation: pulse 1s infinite; }

.alert { background: rgba(40,12,12,.92); border: 1px solid #7a2a2a; color: #ffb0b0; padding: 6px 12px; border-radius: 99px; font-size: 12px; display: flex; gap: 8px; align-items: center; }
.alert.warn { background: rgba(40,32,8,.92); border-color: #7a6320; color: #ffe08a; }
.alert.info { background: rgba(8,28,40,.92); border-color: #22607a; color: #a8e6ff; }

/* radar svg */
.ring-line { fill: none; stroke: #1b232a; stroke-width: 1; }
.ring-tick { stroke: #1b232a; stroke-width: 1; }
.sweep { transform-origin: 0 0; animation: spin 9s linear infinite; }
.slot { cursor: pointer; outline: none; }
.slot .cell { fill: #12181d; stroke: #28323b; stroke-width: 1.2; transition: fill .15s, stroke .15s; }
.slot:hover .cell, .slot:focus-visible .cell { fill: #1a232a; stroke: #4a5a68; }
.slot .plus { stroke: #3a4752; stroke-width: 1.6; stroke-linecap: round; opacity: 0; transition: opacity .15s; }
.slot.empty:hover .plus, .slot.empty:focus-visible .plus, .slot.empty.sel .plus { opacity: 1; }
.slot.locked { cursor: not-allowed; }
.slot.locked .cell { fill: #0b0f12; stroke: #182026; stroke-dasharray: 3 4; }
.ring-label { font-size: 9px; letter-spacing: .14em; fill: #4a5a68; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 5px; }
.slot.sel .cell { stroke: var(--amber); stroke-width: 2; }
.slot.nb .cell { stroke: var(--cyan); stroke-dasharray: 5 3; stroke-width: 1.6; }
.slot.built .cell { fill: color-mix(in srgb, var(--c) 14%, #11171c); stroke: color-mix(in srgb, var(--c) 55%, #28323b); }
.slot.built:hover .cell { fill: color-mix(in srgb, var(--c) 22%, #11171c); }
.slot.built.sel .cell { stroke: var(--amber); }
.slot.building .cell { fill: rgba(255,201,60,.05); stroke: var(--warn); stroke-dasharray: 6 4; animation: march 1s linear infinite; }
.slot .ico { color: var(--c); }
.slot.paused .ico, .slot.paused .cell { opacity: .45; }
.slot.stalled .cell { stroke: var(--bad); animation: pulse-stroke 1.2s ease-in-out infinite; }
.slot.low .cell { stroke: var(--warn); }
.slot .tag { font-size: 10px; fill: var(--dim); text-anchor: middle; pointer-events: none; }
.slot .warn-dot { fill: var(--bad); }
.slot .pbar-bg { fill: #1c242b; } .slot .pbar { fill: var(--warn); }
.hub-core { cursor: pointer; }
.hub-core .disc { fill: #1a1408; stroke: var(--amber); stroke-width: 2; filter: drop-shadow(0 0 10px rgba(255,159,28,.35)); }
.hub-core:hover .disc, .hub-core.sel .disc { fill: #2a1d08; filter: drop-shadow(0 0 16px rgba(255,159,28,.6)); }
.hub-core text { fill: var(--amber); text-anchor: middle; letter-spacing: .2em; font-weight: 700; pointer-events: none; }
.hub-pulse { fill: none; stroke: var(--amber); stroke-width: 1; opacity: 0; transform-origin: 0 0; animation: ping 3s ease-out infinite; }

/* right panel */
#panel { padding: 14px; overflow-y: auto; flex: 1; min-height: 0; }
.p-title { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.p-title svg { color: var(--c, var(--amber)); }
.p-title h3 { font-size: 15px; }
.p-desc { color: var(--dim); margin: 4px 0 12px; font-size: 12px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12px; margin: 10px 0; }
.kv dt { color: var(--dim); } .kv dd { margin: 0; text-align: right; }
.sec { margin: 16px 0 6px; }
.io { display: flex; flex-wrap: wrap; gap: 5px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px solid var(--line2); border-radius: 99px; font-size: 11px; background: var(--bg2); white-space: nowrap; }
.pill i { width: 6px; height: 6px; border-radius: 2px; background: var(--c); }
.pill.no { border-color: #5c2424; color: #ff9a9a; }
.pill.in::before { content: "−"; color: var(--bad); } .pill.out::before { content: "+"; color: var(--good); }
.stack { display: flex; flex-direction: column; gap: 8px; }
.opt { display: block; width: 100%; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; transition: border-color .12s, background .12s; }
.opt:hover:not(:disabled) { border-color: var(--amber); background: #1c242b; }
.opt:disabled { opacity: .5; }
.opt .top { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.opt .top svg { color: var(--c); flex: none; }
.opt .top b { flex: 1; font-size: 13px; }
.opt .top small { color: var(--dim); }
.opt .bonus { font-size: 11px; margin-top: 7px; }
.note { padding: 9px 10px; border: 1px solid var(--line); border-left: 3px solid var(--amber); background: var(--bg2); border-radius: 4px; color: var(--dim); font-size: 12px; margin: 10px 0; }
.note.bad { border-left-color: var(--bad); } .note.good { border-left-color: var(--good); }
.actions { display: flex; gap: 8px; margin-top: 14px; }
.howto { margin: 6px 0 10px; font-size: 12px; color: var(--dim); }
.howto summary { cursor: pointer; color: var(--amber); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; list-style: none; padding: 4px 0; }
.howto summary::-webkit-details-marker { display: none; }
.howto summary::before { content: '+ '; } .howto[open] summary::before { content: '\2212  '; }
.howto > div { margin-top: 4px; padding: 6px 10px; border-left: 2px solid var(--line); line-height: 1.5; }
.actions .btn { flex: 1; }
.empty-state { color: var(--faint); text-align: center; padding: 28px 8px; }
.empty-state svg { opacity: .5; margin-bottom: 8px; }

.trade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.trade .nm { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.trade .nm i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.trade .stock { text-align: right; color: var(--dim); font-size: 11px; }
.trade .sub { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; color: var(--faint); font-size: 10px; }
.trade .sub span:last-child { text-align: right; }
.stepper { display: flex; align-items: center; border: 1px solid var(--line2); border-radius: var(--radius); overflow: hidden; background: var(--bg2); }
.stepper button { background: var(--panel2); border: 0; width: 28px; height: 28px; color: var(--text); flex: none; font-size: 14px; }
.stepper button:hover:not(:disabled) { background: #26323b; color: var(--amber); }
.stepper .val { flex: 1; text-align: center; font-size: 12px; }
.stepper .lab { padding: 0 7px; font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.convoy-head { text-align: center; padding: 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
.convoy-head .big { font-size: 26px; font-weight: 700; color: var(--amber); }

.goal { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 12px; }
.goal .tick { width: 16px; height: 16px; border: 1px solid var(--line2); border-radius: 50%; flex: none; margin-top: 1px; display: grid; place-items: center; color: transparent; }
.goal.done .tick { background: var(--good); border-color: var(--good); color: #04210e; }
.goal.done { color: var(--text); } .goal:not(.done) { color: var(--dim); }

.log { list-style: none; margin: 0; padding: 0; }
.log li { padding: 7px 0 7px 10px; border-left: 2px solid var(--line2); margin-bottom: 4px; font-size: 12px; color: var(--text); }
.log li small { display: block; color: var(--faint); font-size: 10px; }
.log li.good { border-color: var(--good); } .log li.warn { border-color: var(--warn); } .log li.bad { border-color: var(--bad); } .log li.info { border-color: var(--cyan); }
.log li.new { animation: flash 1.6s ease-out; }

.order { flex: none; min-width: 190px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px 8px; position: relative; overflow: hidden; }
.order .row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.order .row small { color: var(--dim); }
.order .bar { height: 3px; background: #1d252c; margin-top: 6px; border-radius: 2px; overflow: hidden; }
.order .bar i { display: block; height: 100%; width: 0; background: var(--warn); }
.order .x { position: absolute; top: 2px; right: 4px; background: none; border: 0; color: var(--faint); font-size: 14px; line-height: 1; padding: 2px 4px; display: none; }
.order:hover .x { display: block; } .order .x:hover { color: var(--bad); }
.order:hover .row small { visibility: hidden; }
.queue-empty { align-self: center; color: var(--faint); font-size: 12px; }

.toast { background: #2a1313; border: 1px solid #7a2a2a; color: #ffc0c0; padding: 9px 14px; border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0,0,0,.5); animation: slidein .2s ease-out; max-width: 320px; }
.toast.ok { background: #10241a; border-color: #2a6a42; color: #b6f0c8; }
.toast.info { background: var(--panel2); border-color: var(--line2); color: var(--text); }
.toast.out { opacity: 0; transform: translateX(-20px); transition: all .3s; }

.modal-bg { position: fixed; inset: 0; background: rgba(4,6,8,.72); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 60; padding: 16px; animation: fade .15s; }
.modal { background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 24px; max-width: 420px; width: 100%; box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.modal h2 { font-size: 18px; margin-bottom: 8px; }
.modal p { color: var(--dim); margin: 0 0 16px; }
.modal .actions { margin-top: 20px; }
.modal.fail h2 { color: var(--bad); } .modal.win h2 { color: var(--good); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes march { to { stroke-dashoffset: -20; } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes pulse-stroke { 50% { stroke-opacity: .35; } }
@keyframes ping { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes flash { from { background: rgba(255,159,28,.2); } to { background: transparent; } }
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- brief: collapse clock + directives ---------- */
.count { position: absolute; top: 4px; right: 5px; padding: 0 5px; border-radius: 99px; background: var(--amber); color: #1a1000; font-size: 9px; font-weight: 700; }
.doom { padding: 12px; border: 1px solid var(--line2); border-left: 3px solid var(--good); border-radius: var(--radius); background: var(--bg2); }
.doom.warn { border-left-color: var(--warn); } .doom.bad { border-left-color: var(--bad); background: rgba(60,16,16,.35); }
.doom .big { font-size: 18px; font-weight: 700; margin: 4px 0 6px; }
.doom .drain { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dir { display: flex; gap: 10px; padding: 9px 8px; border-radius: var(--radius); border-left: 2px solid transparent; }
.dir .tick { width: 16px; height: 16px; border: 1px solid var(--line2); border-radius: 50%; flex: none; margin-top: 1px; display: grid; place-items: center; color: transparent; }
.dir .body { min-width: 0; flex: 1; }
.dir .hint { color: var(--dim); font-size: 12px; margin-top: 3px; }
.dir .tm { font-size: 11px; color: var(--dim); margin-top: 6px; }
.dir:not(.done) { color: var(--text); }
.dir.current { background: var(--panel2); border-left-color: var(--amber); }
.dir.current .hint { color: var(--text); }
.dir.done { color: var(--dim); } .dir.done .tick { background: var(--good); border-color: var(--good); color: #04210e; }
.dir.done b { font-weight: 400; text-decoration: line-through; text-decoration-color: var(--faint); }
.st { display: inline-block; padding: 0 6px; border-radius: 99px; font-size: 10px; margin-right: 4px; border: 1px solid; }
.st.ok { color: var(--good); border-color: #2a6a42; } .st.tight { color: var(--warn); border-color: #7a6320; }
.st.late { color: var(--bad); border-color: #7a2a2a; } .st.blocked { color: var(--warn); border-color: #7a6320; }

/* ---------- plots, hazards, tiers ---------- */
.res.hidden { display: none; }
.res { padding: 6px 0; }
.ring-label.open { fill: #2c3944; font-size: 8px; }
.slot.cramped .tag { fill: var(--amber); }
.slot.cramped .cell { stroke-dasharray: 2 3; }
.slot.cramped.sel .cell, .slot.cramped.nb .cell { stroke-dasharray: none; }
.slot.stalled .tag { fill: var(--bad); }
.threat { padding: 12px; border: 1px solid var(--line2); border-left: 3px solid var(--warn); border-radius: var(--radius); background: var(--bg2); margin-bottom: 10px; }
.threat.good { border-left-color: var(--good); } .threat.bad { border-left-color: var(--bad); background: rgba(60,16,16,.35); }
.threat .big { font-size: 17px; font-weight: 700; margin: 3px 0 4px; }
.threat .big.bad { color: var(--bad); }
.req { margin: 6px 0; } .req .row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.modal ul.log { max-height: 280px; overflow-y: auto; margin-top: 4px; }
.modal.report h2 { color: var(--amber); }

/* ---------- hazard markers, offline queue, comfort ---------- */
.slot .badge { display: none; pointer-events: none; }
.slot.hz-hit .badge, .slot.hz-upkeep .badge, .slot.hz-risk .badge { display: block; }
.badge circle { fill: #c0392b; stroke: var(--bg); stroke-width: 1.5; }
.badge text { fill: #fff; font-size: 9px; font-weight: 700; text-anchor: middle; }
.slot.hz-upkeep .badge circle { fill: var(--bg2); stroke: var(--warn); stroke-width: 2; }
.slot.hz-risk .badge circle { fill: none; stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 2 2; }
.slot.hz-upkeep .badge text, .slot.hz-risk .badge text { display: none; }
.slot.hz-hit:not(.sel) .cell { stroke: var(--bad); stroke-width: 2; animation: pulse-stroke 1.2s ease-in-out infinite; }
.slot.hz-hit .ico { color: #ff9b8f; }
.slot.cmf-bad .tag { fill: var(--bad); } .slot.cmf-good .tag { fill: var(--good); }
.slot.queued .cell { fill: rgba(255,255,255,.03); stroke: var(--warn); stroke-dasharray: 3 4; }
.slot.queued .ico { opacity: .6; } .slot.queued .tag { fill: var(--warn); }
.pend { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px dashed var(--warn); border-radius: var(--radius); background: rgba(255,201,60,.07); font-size: 12px; }
.pend .x { background: none; border: 0; color: var(--faint); font-size: 14px; line-height: 1; padding: 0 2px; }
.pend .x:hover { color: var(--bad); }
.queue-sep { width: 1px; background: var(--line2); margin: 0 4px; flex: none; }

@keyframes dchip-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(139,224,90,0); } 50% { box-shadow: 0 0 14px 3px color-mix(in srgb, var(--c) 55%, transparent); } }
.dmap { width: 100%; height: auto; max-height: 220px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
.dmap .dlink { stroke: var(--line2); stroke-dasharray: 3 4; } .dmap .dlink.on { stroke: var(--amber-d); stroke-dasharray: none; }
.dmap .dnode circle { fill: #11171c; stroke: var(--line2); stroke-width: 1.5; stroke-dasharray: 3 3; }
.dmap .dnode.on circle { stroke: var(--c); stroke-dasharray: none; fill: #1a1f22; } .dmap .dnode.on { cursor: pointer; }
.dmap .dnode.building circle { stroke: var(--warn); }
.dmap .dnode.sel circle { stroke-width: 3; filter: drop-shadow(0 0 5px var(--c)); }
.dmap text { text-anchor: middle; fill: var(--dim); font-size: 8px; } .dmap .lv { fill: var(--c); font-weight: 700; font-size: 9px; } .dmap .nm { letter-spacing: .08em; text-transform: uppercase; font-size: 7px; }
.dcard { border: 1px solid var(--line); border-left: 3px solid var(--c); background: var(--panel2); border-radius: var(--radius); padding: 10px; margin: 8px 0; }
.dcard .top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .dcard .top b { flex: 1; font-size: 13px; } .dcard .top small { color: var(--dim); }
.shipform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .shipform .wide { grid-column: 1 / -1; }
.shipform label { display: flex; flex-direction: column; gap: 3px; font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.shipform select { background: var(--bg2); color: var(--text); border: 1px solid var(--line2); border-radius: var(--radius); padding: 6px; font-size: 12px; }
.shiprow { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.route { border: 1px solid var(--line); border-left: 3px solid var(--c); background: var(--panel2); border-radius: var(--radius); padding: 8px 10px; margin: 6px 0; }
.route .rhead { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; } .route .rhead b { font-size: 13px; } .route .rhead span { flex: 1; font-size: 11px; }
.route .x { background: none; border: 0; color: var(--faint); font-size: 16px; line-height: 1; } .route .x:hover { color: var(--bad); }
.route .flow { font-size: 11px; margin-top: 4px; }
.optcard { border: 1px solid var(--line); border-left: 3px solid var(--line2); background: var(--panel2); border-radius: var(--radius); padding: 10px; }
.optcard.on { border-left-color: var(--good); }
.optcard .top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .optcard .top b { flex: 1; font-size: 13px; } .optcard .top span { font-size: 11px; }
/* exchange */
.selrow { display: flex; flex-direction: column; gap: 3px; font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.selrow select { background: var(--bg2); color: var(--text); border: 1px solid var(--line2); border-radius: var(--radius); padding: 7px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.mk-head { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; flex-wrap: wrap; }
.mk-head .big { font-size: 26px; font-weight: 700; color: var(--c); } .mk-head small { font-size: 12px; color: var(--dim); }
.spark { flex: 1; min-width: 100px; height: 44px; }
.chip-ev { font-size: 9px; font-weight: 700; letter-spacing: .1em; padding: 3px 8px; border-radius: 99px; }
.chip-ev.shortage { background: rgba(255,107,107,.18); color: var(--bad); } .chip-ev.glut { background: rgba(139,224,90,.18); color: var(--good); }
.book { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg2); }
.bk { position: relative; display: flex; justify-content: space-between; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.bk i { position: absolute; right: 0; top: 0; bottom: 0; opacity: .16; } .bk > span { position: relative; }
.bk.ask i { background: var(--bad); } .bk.bid i { background: var(--good); }
.bk.ask .num:first-of-type { color: #ff9b8f; } .bk.bid .num:first-of-type { color: #8be05a; }
.bk:hover { background: rgba(255,255,255,.05); }
.bk.spread { cursor: default; color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel2); }
.myord { border: 1px solid var(--line); border-left: 3px solid var(--good); background: var(--panel2); border-radius: var(--radius); padding: 8px 10px; margin: 6px 0; }
.myord.sell { border-left-color: var(--bad); }
.myord .rhead { display: flex; gap: 8px; align-items: baseline; } .myord .rhead b { font-size: 13px; } .myord .rhead span { flex: 1; font-size: 11px; }
.myord .x { background: none; border: 0; color: var(--faint); font-size: 16px; line-height: 1; } .myord .x:hover { color: var(--bad); }
/* free port */
.recipe { border: 1px solid var(--line); background: var(--panel2); border-radius: var(--radius); margin: 5px 0; }
.recipe.sel { border-color: var(--amber); }
.recipe.locked .rname b { color: var(--dim); font-weight: 400; }
.recipe.locked .rname small { color: var(--faint); }
.recipe .rname b svg { vertical-align: -1px; }
.recipe .rname { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 8px; background: none; border: 0; color: var(--text); padding: 8px 10px; text-align: left; font-size: 13px; }
.recipe .rname small { color: var(--dim); font-size: 11px; }
.recipe .io, .recipe .actions { padding: 0 10px 8px; }
.shield { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-top: 10px; padding: 9px 10px; border: 1px dashed var(--line2); border-radius: var(--radius); font-size: 12px; }
.shield.on { border-color: var(--good); background: rgba(139,224,90,.07); }
.standing { border: 1px solid var(--line); border-left: 3px solid var(--amber); background: var(--panel2); border-radius: var(--radius); padding: 10px; }
.standing .big { font-size: 28px; font-weight: 700; color: var(--amber); }
.standing .facs { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; } .fac { display: flex; flex-direction: column; } .fac b { font-size: 15px; } .fac small { color: var(--dim); font-size: 10px; }
.mission { border: 1px solid var(--line); background: var(--panel2); border-radius: var(--radius); padding: 8px 10px; margin: 8px 0; }
.mission .rhead { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; } .mission .rhead b { flex: 1; font-size: 13px; }
.offer { border-top: 1px solid var(--line); border-left: 3px solid var(--c); padding: 7px 8px; margin-top: 6px; display: grid; gap: 4px; }
.offer .who { display: flex; gap: 6px; align-items: baseline; font-size: 12px; }
.offer .pay { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .offer .pay .btn { margin-left: auto; padding: 5px 14px; }
/* typed numbers, expansion, people */
.stepper .numin { flex: 1; min-width: 0; text-align: center; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 12px; padding: 0 4px; height: 28px; }
.stepper .numin:focus { outline: 1px solid var(--amber); outline-offset: -1px; background: #10161b; }
.stepper .unit { color: var(--dim); font-size: 11px; padding-right: 8px; }
.lvdots { display: flex; gap: 4px; margin: 2px 0 4px; } .lvdots i { width: 18px; height: 5px; border-radius: 2px; background: var(--line2); } .lvdots i.on { background: var(--amber); }
.lvdots i.orb { background: color-mix(in srgb, #90e0ef 25%, var(--line2)); } .lvdots i.orb.on { background: #90e0ef; }
.popbig { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; } .popbig .big { font-size: 30px; font-weight: 700; color: var(--amber); } .popbig .trend { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ptable { width: 100%; border-collapse: collapse; font-size: 12px; } .ptable th { text-align: right; font-size: 9px; color: var(--dim); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; padding: 0 0 4px 6px; } .ptable th:first-child { text-align: left; }
.ptable td { padding: 5px 0 2px 6px; text-align: right; } .ptable td:first-child { text-align: left; padding-left: 0; } .ptable td i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.ptable tr.sub td { text-align: left; padding: 0 0 7px 0; font-size: 11px; color: var(--dim); border-bottom: 1px solid var(--line); }
.note.bad { border-left-color: var(--bad); color: #ffb0b0; } .note.good { border-left-color: var(--good); color: #b6f0c8; }

.vn-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-bottom: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; }
.mail { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: var(--panel2); overflow: hidden; }
.mail-head { display: grid; grid-template-columns: 10px minmax(0, 7.5em) 1fr auto; gap: 8px; align-items: baseline; width: 100%; background: none; border: 0; color: var(--dim); padding: 10px 12px; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.mail-head:hover { background: rgba(255,255,255,.03); }
.mail-head .dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; align-self: center; }
.mail.unread .dot { background: var(--amber); }
.mail.unread .mail-head { color: var(--text); }
.mail-from { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-head small { color: var(--faint); }
.mail-body { padding: 4px 14px 14px 30px; color: var(--text); font-size: 13px; line-height: 1.55; }
.mail-body p { margin: 0 0 10px; }
.vn-name em { color: var(--dim); font-style: normal; font-weight: 400; margin-left: 4px; }
.vn-name em::before { content: '('; } .vn-name em::after { content: ')'; }
.vn-prompt { color: var(--amber); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.rank { color: var(--amber); }

.call { position: fixed; right: calc(var(--panel-w, 340px) + 16px); bottom: 66px; z-index: 55; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 14px 50px rgba(0,0,0,.65); animation: callin .35s ease-out; max-width: calc(100vw - 32px); }
@keyframes callin { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.call.ring:not(.min) { width: 340px; display: grid; grid-template-columns: 56px 1fr; gap: 4px 12px; padding: 14px; border-color: var(--amber); }
.call-av { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, #0b0f13); border: 1px solid var(--c); color: var(--c); font-weight: 700; font-size: 18px; }
.call-av img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.call-av span { color: var(--c); }
.call-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.call-info b { font-size: 15px; }
.call-info small { color: var(--dim); font-size: 11px; }
.call-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); display: flex; align-items: center; gap: 6px; }
.call-btns { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
.call-btns .btn.primary { flex: 1; }
.call-skip { grid-column: 1 / -1; display: flex; gap: 14px; justify-content: flex-end; }
.link { background: none; border: 0; color: var(--faint); font: inherit; font-size: 11px; padding: 2px 0; cursor: pointer; text-decoration: underline; }
.link:hover { color: var(--text); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); display: inline-block; animation: ringpulse 1.4s ease-out infinite; flex: none; }
.pulse.live { background: var(--good); animation: none; }
@keyframes ringpulse { 0% { box-shadow: 0 0 0 0 rgba(255,159,28,.7); } 100% { box-shadow: 0 0 0 10px rgba(255,159,28,0); } }
.call.ring.min { border-color: var(--amber); }
.call-pill { display: flex; align-items: center; gap: 9px; background: none; border: 0; color: var(--text); font: inherit; font-size: 12px; padding: 10px 14px; cursor: pointer; }
.call-pill em { font-style: normal; color: var(--amber); }
.call.live { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; font-size: 12px; }
.call-who { color: var(--dim); }
.call-who b { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .pulse, .call { animation: none; } }

/* ---- story: reading a mail ---- */
.mailv-bg { position: fixed; inset: 0; z-index: 75; background: rgba(4,6,8,.72); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.mailv { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 26px 20px; box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.mailv-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.mailv-head .call-av { width: 52px; height: 52px; flex: none; }
.mailv-from { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mailv-from small { color: var(--dim); font-size: 11px; }
.mailv h2 { font-size: 19px; margin: 0 0 2px; }
.mailv-meta { color: var(--faint); font-size: 11px; margin-bottom: 16px; }
.mailv-body { font-size: 15px; line-height: 1.65; color: var(--text); }
.mailv-body p { margin: 0 0 14px; }
.mailv-body img { max-width: 100%; border-radius: 6px; }
.mailv .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

/* ---- orbital command ---- */
body.orbit-mode #map { background: radial-gradient(ellipse at 50% 45%, #0f2230 0%, #070b10 60%, #04060a 100%); }
body.orbit-mode #map::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 12% 18%, #cfe9ff 50%, transparent 51%), radial-gradient(1px 1px at 72% 26%, #cfe9ff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 38% 74%, #9fd8ff 50%, transparent 51%), radial-gradient(1px 1px at 86% 82%, #cfe9ff 50%, transparent 51%), radial-gradient(1px 1px at 22% 58%, #9fd8ff 50%, transparent 51%), radial-gradient(1px 1px at 58% 8%, #cfe9ff 50%, transparent 51%); }

.meter.wide { height: 6px; background: var(--bg2); border-radius: 3px; overflow: hidden; margin: 6px 0; }
.meter.wide i { display: block; height: 100%; background: #90e0ef; }
.meter.wide i.good { background: var(--good); } .meter.wide i.warn { background: var(--warn); } .meter.wide i.bad { background: var(--bad); }
.oslot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 5px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.oslot > i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.oslot b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oslot .num { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.oslot .numin { width: 56px; }
.oslot.empty, .oslot.gone { justify-content: space-between; border-style: dashed; }
.terr { padding: 10px 12px; margin-bottom: 6px; background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid #f2a7ff; border-radius: 8px; }
.terr.taken { opacity: .7; border-left-color: var(--faint); }
.terr .top, .need .top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.need { margin-bottom: 8px; }
.obook { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.obook table, table.trades { width: 100%; font-size: 11px; border-collapse: collapse; }
.obook td, table.trades td { padding: 3px 4px; border-bottom: 1px solid var(--line); }
.obook tr.mine td { color: var(--amber); }
.field input#station-name { width: 100%; }
.orow { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; }
.orow select { flex: 1; min-width: 0; background: var(--bg2); color: var(--text); border: 1px solid var(--line2); border-radius: var(--radius); padding: 6px; font-size: 12px; }
.orow > span { flex: 1; min-width: 0; }
.orow input[type=checkbox] { width: 16px; height: 16px; accent-color: #90e0ef; flex: none; }
.numin.onum { width: 72px; flex: none; background: var(--bg2); color: var(--text); border: 1px solid var(--line2); border-radius: var(--radius); padding: 6px; font: inherit; font-size: 12px; text-align: right; }
.numin.onum:focus { outline: 1px solid #90e0ef; }

.sheet-body .stock { width: 100%; border-collapse: collapse; font-size: 13px; }
.sheet-body .stock th { text-align: right; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 400; padding: 6px 10px; border-bottom: 1px solid var(--line2); }
.sheet-body .stock th:first-child, .sheet-body .stock td:first-child { text-align: left; }
.sheet-body .stock td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.sheet-body .stock .dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 9px; }
.sheet-body .stock tr.crit td { background: rgba(60,16,16,.35); }
.stock .fillbar { display: inline-block; width: 90px; height: 5px; background: #1d252c; border-radius: 3px; overflow: hidden; vertical-align: middle; }
.stock .fillbar i { display: block; height: 100%; }
.stock .tier { color: var(--faint); font-size: 10px; margin-left: 4px; }
.sheet-h { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 22px 0 8px; }
.sheet-h:first-child { margin-top: 0; }

#pop[hidden] { display: none; }
.pop-sec { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 12px 0 6px; }
.pop-sec:first-child { margin-top: 0; }
.pop-link { width: 100%; margin-top: 12px; }

.ov-card { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--radius); padding: 11px 12px; margin-bottom: 12px; }
.ov-card h4 { margin: 0 0 4px; font-size: 13px; }
.ov-card p { margin: 0 0 8px; color: var(--dim); font-size: 12px; }
.ov-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.ov-row:last-child { border: 0; }
.ov-row .grow { flex: 1; min-width: 0; }
.ov-row button { background: none; border: 0; color: inherit; text-align: left; padding: 0; width: 100%; display: flex; align-items: center; gap: 8px; }
.ov-row button:hover b { color: var(--amber); }
.ov-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--warn); } .ov-dot.bad { background: var(--bad); } .ov-dot.good { background: var(--good); }
.pn-head { display: flex; align-items: center; gap: 8px; }
.pn-head h3 { flex: 1; }
.pn-x { background: none; border: 0; color: var(--dim); font-size: 20px; line-height: 1; padding: 2px 6px; }
.pn-x:hover { color: #fff; }
.pn-pin { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; }

.dir-chip { display: flex; align-items: center; gap: 8px; background: #1d1608; border: 1px solid #6b4310; border-radius: var(--radius); padding: 6px 12px; color: var(--amber); min-width: 0; max-width: 320px; flex: none; }
.dir-chip b { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.dir-chip small { color: var(--dim); }
.dir-chip:hover { border-color: var(--amber); }

.ws-col { max-width: 820px; margin: 0 auto; }
.ws-col.wide { max-width: 1100px; }
.ws-col > * { max-width: 100%; }
.ws-col .dmap { display: block; margin: 0 auto 12px; }

.pinbtn { background: none; border: 0; color: var(--faint); font-size: 17px; line-height: 1; padding: 2px 6px; }
.pinbtn:hover, .pinbtn.on { color: var(--amber); }
.linkbtn { background: none; border: 0; color: var(--amber); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 0; }
.pn-pin .pn-x { font-size: 15px; padding: 0 3px; color: var(--faint); }

/* Messages: nav | list | reader */
.modal.messages { width: min(1040px, 96vw); max-width: none; height: min(660px, 88vh); padding: 0; display: flex; overflow: hidden; border-radius: 16px; }
.messages .nav { flex: 0 0 180px; display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; background: var(--bg2); border-right: 1px solid var(--line); }
.messages .nav h3 { margin: 0 8px 12px; font-size: 16px; }
.messages .ni { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; color: var(--dim); text-align: left; }
.messages .ni:hover { color: var(--text); }
.messages .ni.on { background: var(--panel2); color: #fff; box-shadow: inset 0 0 0 1px var(--line2); }
.messages .ni em { margin-left: auto; font: 600 10px var(--mono); font-style: normal; background: var(--amber); color: #1a1000; border-radius: 8px; padding: 1px 6px; }
.messages .list { flex: 0 0 340px; display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
.messages.solo .list { flex: 1; border-right: 0; }
.messages .lh { display: flex; align-items: center; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.messages .lscroll { overflow-y: auto; flex: 1; min-height: 0; }
.messages .m { display: flex; gap: 12px; padding: 14px 16px; border: 0; border-bottom: 1px solid #1a2128; border-radius: 0; background: none; width: 100%; text-align: left; position: relative; color: var(--text); }
.messages .m:hover { background: #151b21; }
.messages .m.on { background: var(--panel2); }
.messages .m.un::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--amber); }
.messages .mt { flex: 1; min-width: 0; }
.messages .mh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.messages .mh small { color: var(--dim); }
.messages .ms { font-size: 13px; margin-top: 1px; }
.messages .mp { font-size: 12px; color: var(--dim); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.messages .read { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.messages.solo .read { display: none; }
.messages .rh { display: flex; align-items: center; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--line); flex: none; }
.messages .rb { flex: 1; overflow-y: auto; padding: 22px 28px; }
.messages .rb h2 { font-size: 20px; margin: 18px 0 4px; }
.messages .x { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line2); background: transparent; color: var(--dim); font-size: 20px; line-height: 1; }
.messages .x:hover { color: #fff; }

/* Stockpile: district switcher */
.sd-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sd-tab { display: inline-flex; align-items: center; gap: 7px; background: var(--bg2); border: 1px solid var(--line2); color: var(--text); padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.sd-tab i { width: 14px; height: 5px; border-radius: 3px; background: var(--c); flex: none; }
.sd-tab small { color: var(--dim); font-size: 10px; font-weight: 400; }
.sd-tab:hover { border-color: var(--c); }
.sd-tab[aria-selected="true"] { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset; background: var(--panel2); }

.slot.clearing .cell { fill: rgba(255,255,255,.02); stroke: var(--warn); stroke-dasharray: 2 4; }
.slot.clearing .tag { fill: var(--warn); }

/* data sites */
.data-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 9px; border-radius: 99px; border: 1px solid #2f6f62; color: #7fd6c2; background: rgba(127,214,194,.08); font-size: 11px; }
.data-bal { display: flex; align-items: center; gap: 22px; padding: 14px 16px; background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: var(--radius); margin: 8px 0 4px; }
.data-bal b { display: block; font-size: 30px; line-height: 1.1; color: var(--cyan); }
.data-bal .grow { flex: 1; min-width: 0; }
.data-bal small { display: block; margin-top: 6px; font-size: 12px; }
.packet { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel2); padding: 12px 14px; margin: 8px 0; }
.packet .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.packet.open { border-left: 3px solid var(--cyan); }
.packet .ptext { margin-top: 8px; color: var(--text); font-size: 13px; line-height: 1.6; }
.packet .ptext p { margin: 0 0 8px; }
.packet.sealed .psize { height: 4px; background: #1d252c; border-radius: 2px; margin: 8px 0 10px; overflow: hidden; }
.packet.sealed .psize i { display: block; height: 100%; background: var(--cyan); opacity: .6; }
.packet .ptext + .ptext { border-top: 1px dashed var(--line2); margin-top: 10px; padding-top: 10px; }
.packet .ptext .label { margin-bottom: 4px; color: var(--cyan); }
.packet .pmore { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: var(--radius); background: rgba(127,214,194,.04); }
.packet .pmore .grow { flex: 1; min-width: 0; }

/* scene media: a plate over the stage, and a video before the words */
.vn-plate { position: absolute; inset: 56px 0 190px 0; display: grid; place-items: center; pointer-events: none; z-index: 1; padding: 0 16px; }
.vn-plate img { max-width: min(900px, 94%); max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 80px rgba(0,0,0,.7); animation: fade .35s; }
.vn-video { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 56px 16px 24px; background: rgba(0,0,0,.6); }
.vn-video video { max-width: min(1100px, 96%); max-height: 74vh; background: #000; border-radius: 6px; box-shadow: 0 20px 80px rgba(0,0,0,.8); }
.rushq { font-size: 10px; padding: 2px 8px; letter-spacing: .04em; }
/* the work queue: plots and orders that are waiting their turn */
.slot.planned .cell { fill: rgba(76,201,240,.05); stroke: var(--cyan); stroke-dasharray: 2 5; }
.slot.planned .ico { opacity: .55; }
.slot.planned .tag, .slot.swap .tag { fill: var(--cyan); }
.q-place { flex: none; align-self: center; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding-left: 10px; border-left: 1px solid var(--line2); }
.q-place:first-of-type { border-left: 0; padding-left: 0; }
.q-boon { flex: none; align-self: center; font-size: 10px; padding: 2px 8px; border-radius: 99px; border: 1px solid #2a6a42; color: var(--good); white-space: nowrap; }
.order.wait { border-style: dashed; background: transparent; }
.order.wait .row span { color: var(--dim); }
.order.wait .why { font-size: 11px; color: var(--faint); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.order.wait.short { border-color: #7a6320; } .order.wait.short .why { color: var(--warn); }
.order.wait .linkbtn { margin-left: 8px; }
.order { min-width: 210px; }

/* ====================================================================================================================
   The shell. One screen, five fixed regions:
     top bar     the colony's vitals, then the vitals of the place being looked at; alerts, messages and the menu
     stock bar   the pinned stock of that place, in view whatever else is open
     nav         every screen, in one fixed list down the left edge (one click, always in the same position)
     stage       the place tabs and the map; the right pane follows the selection; a screen opens over both
     bottom bar  the next step and the work queue
   The phone shell (mobile.html + mobile.css) rearranges the same regions; nothing below is specific to it.
   ==================================================================================================================== */
:root { --panel-w: 380px; --nav-w: 188px; }
#app { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
#topbar { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 30; min-width: 0; }
#topbar .brand { font-size: 15px; margin-right: 4px; white-space: nowrap; }
.vitals { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.vitals::-webkit-scrollbar, #stockbar::-webkit-scrollbar, #places::-webkit-scrollbar, .sheet-tabs::-webkit-scrollbar { display: none; }
.vsep { width: 1px; align-self: stretch; background: var(--line2); margin: 2px; flex: none; }
.chip { display: flex; flex-direction: column; gap: 1px; padding: 3px 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); min-width: 78px; flex: none; text-align: left; }
.chip.place { border-color: #2a3640; }
.chip.warn { border-color: #7a6320; } .chip.bad { border-color: #7a2a2a; background: rgba(60,16,16,.35); }
.chip.click { cursor: pointer; } .chip.click:hover, .chip.click:focus-visible { border-color: var(--amber); outline: none; }
.chip .label { white-space: nowrap; } .chip .label svg { display: none; }
.chip .v { font-size: 14px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.chip .v small { font-size: 10px; color: var(--dim); font-weight: 400; }
.meter { height: 3px; background: #1f272e; border-radius: 2px; overflow: hidden; margin-top: 3px; }
.meter > i { display: block; height: 100%; background: var(--good); width: 0; transition: width .5s ease, background .3s; }
.spacer { flex: 1; }
.icon-btn { position: relative; background: none; border: 1px solid var(--line); border-radius: var(--radius); width: 34px; height: 34px; display: grid; place-items: center; color: var(--dim); font-size: 20px; line-height: 1; flex: none; }
.icon-btn:hover { color: #fff; border-color: var(--line2); }
.icon-btn .dotc { position: absolute; top: -5px; right: -5px; min-width: 16px; padding: 0 4px; border-radius: 99px; background: var(--amber); color: #1a1000; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.icon-btn.ring { border-color: var(--amber); color: var(--amber); animation: dchip-glow 1.6s ease-in-out infinite; --c: var(--amber); }
.user-btn { background: none; border: 1px solid var(--line); border-radius: var(--radius); height: 34px; padding: 0 12px; color: var(--dim); font-size: 12px; flex: none; }
.user-btn:hover { color: #fff; border-color: var(--line2); }
#net .alert { border-radius: var(--radius); white-space: nowrap; }
.dotb { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; }
.dotb.good { background: var(--good); } .dotb.warn { background: var(--warn); }

/* stock bar */
#stockbar { display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--bg2); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; min-width: 0; white-space: nowrap; min-height: 35px; }
#stockbar > .label { margin-right: 6px; flex: none; }
.sb { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; font-size: 12px; color: var(--text); flex: none; }
.sb i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.sb .nm { color: var(--dim); } .sb .net { font-size: 11px; }
.sb.warn { border-color: #7a6320; } .sb.bad { border-color: #7a2a2a; background: rgba(60,16,16,.35); }
.sb:hover:not(:disabled) { border-color: var(--amber); } .sb:disabled { cursor: default; }
#stockbar .linkbtn { margin-left: auto; padding-left: 12px; flex: none; }

/* layout: nav | stage | right pane, with a screen opening over the last two */
#layout { position: relative; display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--panel-w); grid-template-rows: minmax(0, 1fr); min-height: 0; min-width: 0; }
#nav { grid-column: 1; grid-row: 1; background: var(--bg2); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; padding: 8px; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.nv { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 1px solid transparent; border-radius: var(--radius); padding: 7px 9px; color: var(--dim); font-size: 12px; text-align: left; white-space: nowrap; flex: none; }
.nv svg { flex: none; }
.nv .nl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nv:hover { color: #fff; background: var(--panel); }
.nv:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.nv[aria-current="page"] { color: var(--amber); background: #1d1608; border-color: #6b4310; }
.nv.locked { color: var(--faint); } .nv.locked:hover { color: var(--dim); }
.nv .lk { display: inline-flex; color: var(--faint); }
.nv em { font-style: normal; font: 600 10px var(--mono); background: var(--amber); color: #1a1000; border-radius: 8px; padding: 1px 6px; }
.nv em.warn { background: var(--warn); }
.nv-sec { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 12px 9px 4px; flex: none; }
body.orbit-mode .nv[aria-current="page"] { color: #90e0ef; border-color: #2c6f7c; background: #0d1c22; }
#stage { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#places { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; min-width: 0; }
.pswitch { display: inline-flex; flex: none; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.pswitch button { position: relative; background: var(--bg2); color: var(--dim); border: 0; padding: 6px 11px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.pswitch button + button { border-left: 1px solid var(--line2); }
.pswitch button.on { background: var(--panel2); color: var(--amber); }
.pswitch button:not(.on):hover { color: var(--text); }
.pswitch .dotb { position: absolute; top: 3px; right: 3px; }
.pscroll { position: relative; flex: 1; min-width: 0; display: flex; }
.pstrip { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
.pstrip::-webkit-scrollbar { display: none; }
.parr { position: absolute; top: 0; bottom: 0; z-index: 1; width: 30px; display: none; align-items: center; justify-content: center; border: 0; color: var(--text); padding: 0; }
.parr.show { display: flex; }
.parr.l { left: 0; background: linear-gradient(90deg, var(--panel) 55%, transparent); justify-content: flex-start; }
.parr.l svg { transform: rotate(90deg); }
.parr.r { right: 0; background: linear-gradient(270deg, var(--panel) 55%, transparent); justify-content: flex-end; }
.parr.r svg { transform: rotate(-90deg); }
.parr:hover { color: var(--amber); }
#places[hidden] { display: none; }
.ptab { display: inline-flex; align-items: center; gap: 6px; background: var(--bg2); border: 1px solid var(--line2); color: var(--text); padding: 5px 9px; border-radius: 8px; font-size: 12px; font-weight: 600; flex: none; white-space: nowrap; }
.ptab i { width: 14px; height: 5px; border-radius: 3px; background: var(--c); flex: none; }
.ptab small { color: var(--dim); font-size: 10px; font-weight: 400; }
.ptab em { font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: .1em; padding: 2px 6px; border-radius: 99px; background: var(--c); color: #0a0f12; }
.ptab:hover { border-color: var(--c); }
.ptab.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset; background: var(--panel2); }
.ptab.add { border-style: dashed; color: var(--dim); font-weight: 400; }
.ptab.new, .ptab.pulse { border-color: var(--c); color: var(--text); animation: dchip-glow 1.6s ease-in-out infinite; }
#map { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle at 50% 50%, #10161b 0%, var(--bg) 70%); }
#radar { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; touch-action: none; }
#radar.panning, #radar.panning .slot, #radar.panning .hub-core { cursor: grabbing; }
.legend { position: absolute; left: 12px; bottom: 10px; right: 12px; display: flex; gap: 12px; font-size: 10px; color: var(--dim); pointer-events: none; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend svg { color: var(--c); }
.zoomctl { position: absolute; right: 12px; top: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.zoomctl button { width: 30px; height: 30px; display: grid; place-items: center; background: rgba(18,23,28,.9); border: 1px solid var(--line2); border-radius: var(--radius); color: var(--dim); padding: 0; }
.zoomctl button:hover { color: #fff; border-color: var(--amber); }
.zoomctl button.on { color: var(--amber); border-color: #6b4310; }
#right { grid-column: 3; grid-row: 1; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
#grab { display: none; }
.pn-close { float: right; margin: -4px -6px 0 6px; }
.actions.quick { margin: 0 0 12px; }
.after { font-size: 11px; margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line2); line-height: 1.6; }
.cats { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.cats button { display: inline-flex; align-items: center; gap: 6px; background: var(--bg2); border: 1px solid var(--line2); border-radius: 99px; padding: 4px 10px; font-size: 11px; color: var(--dim); }
.cats button small { color: var(--faint); font-size: 10px; }
.cats button:hover { color: #fff; }
.cats button[aria-selected="true"] { color: var(--amber); border-color: var(--amber); background: #1d1608; }
.cats button[aria-selected="true"] small { color: var(--amber-d); }

/* a screen (workspace) */
#sheet { grid-column: 2 / 4; grid-row: 1; z-index: 20; background: var(--bg); display: flex; flex-direction: column; min-height: 0; min-width: 0; animation: fade .12s; }
#sheet[hidden] { display: none; }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 20px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
.sheet-tabs { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.crumb { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.crumb::after { content: ' /'; }
.sheet-title { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #fff; letter-spacing: .04em; white-space: nowrap; }
.sheet-title svg { color: var(--amber); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 40px; }
.sheet-body > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.sheet-body > .wide { max-width: 1100px; }

/* bottom bar: the next step and the work queue */
#dock { display: flex; align-items: stretch; background: var(--panel); border-top: 1px solid var(--line); min-height: 52px; z-index: 30; min-width: 0; overflow: hidden; }
#dock-dir { display: flex; align-items: center; padding: 6px 0 6px 12px; flex: 0 1 auto; min-width: 0; }
#dock-dir:empty { display: none; }
.dir-chip { flex: 0 1 340px; min-width: 110px; max-width: 340px; }
#queue { flex: 1 1 0; min-width: 0; padding: 6px 12px; display: flex; gap: 10px; align-items: center; overflow-x: auto; overflow-y: hidden; }
#queue .label { flex: none; }
#toasts { position: fixed; top: 150px; right: calc(var(--panel-w, 340px) + 14px); display: flex; flex-direction: column; gap: 8px; z-index: 90; pointer-events: none; }
#pop { position: fixed; top: 54px; right: 12px; width: 360px; max-height: calc(100vh - 120px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.7); z-index: 58; padding: 14px; }
body.ws-open .call, body.ws-open #toasts { right: 16px; }
/* the exchange: the book beside the order form where there is room */
.xg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
.xg > div > .label.sec:first-child { margin-top: 12px; }
@media (max-width: 1180px) { .xg { grid-template-columns: minmax(0, 1fr); } }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12px; color: var(--dim); }
.keys kbd { display: inline-block; min-width: 20px; text-align: center; border: 1px solid var(--line2); border-radius: 4px; padding: 1px 5px; margin-right: 6px; color: var(--text); font: 11px var(--mono); background: var(--bg2); }
@media (hover: none) { .order .x { display: block; } .order .row small { visibility: visible; padding-right: 18px; } }

/* narrower desks: the nav keeps its place and loses its words; then the right pane tightens */
@media (max-width: 1260px) {
  html[data-shell="desktop"] { --nav-w: 54px; --panel-w: 330px; }
  html[data-shell="desktop"] #nav { padding: 8px 6px; }
  html[data-shell="desktop"] .nv { justify-content: center; padding: 9px 0; }
  html[data-shell="desktop"] .nv .nl { display: none; }
  html[data-shell="desktop"] .nv em, html[data-shell="desktop"] .nv .dotb, html[data-shell="desktop"] .nv .lk { position: absolute; top: 2px; right: 2px; }
  html[data-shell="desktop"] .nv-sec { height: 1px; margin: 8px 6px; background: var(--line2); font-size: 0; }
}
@media (max-width: 1260px) { html[data-shell="desktop"] #topbar .brand { display: none; } }
@media (max-width: 1000px) { html[data-shell="desktop"] { --panel-w: 300px; } html[data-shell="desktop"] .legend { display: none; } }

/* ---- story: the dialogue scene ----
   Three rows: the tools, the stage, the words. The portrait fills whatever the stage is given and no more, so it can
   never run under the tools or over the text, on any screen. */
.vn { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; animation: fade .25s; }
.vn-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, #1b2733, #07090b 70%) center/cover no-repeat; }
.vn-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(4,6,8,.35), rgba(4,6,8,.1) 40%, rgba(4,6,8,.85)); }
.vn-tools { position: relative; flex: none; display: flex; gap: 8px; align-items: center; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); z-index: 2; }
.vn-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.vn-tools .btn { flex: none; }
.vn-stage { position: relative; flex: 1 1 0; min-height: 0; display: flex; justify-content: space-between; align-items: stretch; width: min(1040px, 100%); margin: 0 auto; padding: 0 8px; box-sizing: border-box; z-index: 1; }
.vn-side { width: min(34%, 340px); min-height: 0; display: flex; justify-content: center; align-items: flex-end; }
.vn-char { height: 100%; min-height: 0; display: flex; align-items: flex-end; justify-content: center; opacity: .45; filter: saturate(.6); transition: opacity .25s, filter .25s, transform .25s; transform: translateY(8px); }
.vn-char.on { opacity: 1; filter: none; transform: none; }
.vn-char img { display: block; max-width: 100%; max-height: min(100%, 640px); object-fit: contain; object-position: bottom; }
.vn-ph { display: grid; place-items: center; width: min(26vw, 220px); max-height: 100%; aspect-ratio: 3 / 4; border-radius: 120px 120px 12px 12px; background: linear-gradient(to top, color-mix(in srgb, var(--c) 35%, #0b0f13), color-mix(in srgb, var(--c) 10%, #0b0f13)); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--c); font-size: 44px; font-weight: 700; letter-spacing: .05em; }
.vn-box { position: relative; z-index: 2; flex: none; margin: 0 auto max(4vh, env(safe-area-inset-bottom)); width: min(920px, calc(100% - 32px)); min-height: 150px; background: rgba(10,14,18,.94); border: 1px solid var(--line2); border-radius: 10px; padding: 18px 22px 14px; box-shadow: 0 20px 70px rgba(0,0,0,.7); cursor: pointer; outline: none; }
.vn-name { position: absolute; top: -15px; left: 18px; max-width: calc(100% - 36px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 12px; background: var(--panel2); border: 1px solid var(--c); border-radius: 6px; color: var(--c); font-weight: 600; font-size: 13px; }
.vn-name small { color: var(--dim); font-weight: 400; margin-left: 6px; }
.vn-text { font-size: 17px; line-height: 1.55; min-height: 52px; color: var(--text); }
.vn-text.narr { font-style: italic; color: var(--dim); }
.vn-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.vn-choice { text-align: left; white-space: normal; }
.vn-choice kbd { color: var(--amber); margin-right: 6px; font-family: inherit; }
.vn-hint { text-align: right; font-size: 11px; color: var(--faint); margin-top: 8px; }
/* a phone held upright: one speaker at a time, as large as the stage allows, over a full-width text box */
@media (max-width: 700px) {
  .vn-tools { padding-left: 12px; padding-right: 12px; gap: 6px; }
  .vn-tools .btn { padding: 7px 10px; font-size: 10px; }
  .vn-stage { justify-content: center; padding: 0 12px; }
  .vn-side { width: auto; max-width: 88%; flex: 0 1 auto; }
  .vn-side:empty, .vn-stage.speak-left .vn-side.right, .vn-stage.speak-right .vn-side.left { display: none; }
  .vn-stage.speak-none .vn-side { max-width: 48%; }
  .vn-char { transform: none; }
  .vn-ph { width: min(44vw, 200px); font-size: 30px; }
  .vn-box { width: calc(100% - 20px); margin-bottom: max(10px, env(safe-area-inset-bottom)); padding: 20px 16px 12px; min-height: 132px; }
  .vn-name { left: 12px; max-width: calc(100% - 24px); }
  .vn-text { font-size: 15px; max-height: 34vh; overflow-y: auto; }
  .vn-choice { padding: 12px; }
  .vn-plate { inset: 52px 0 38vh 0; }
}
/* a phone on its side: the speaker stands in a column on the left and the words take the rest */
@media (max-height: 520px) and (orientation: landscape) {
  .vn { display: grid; grid-template-columns: minmax(110px, 26vw) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .vn-tools { grid-column: 1 / 3; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 4px; }
  .vn-tools .btn { padding: 6px 10px; font-size: 10px; }
  .vn-stage { grid-column: 1; grid-row: 2; width: auto; margin: 0; padding: 0 0 0 max(8px, env(safe-area-inset-left)); justify-content: center; }
  .vn-side { width: auto; max-width: 100%; flex: 0 1 auto; }
  .vn-side:empty, .vn-stage.speak-left .vn-side.right, .vn-stage.speak-right .vn-side.left { display: none; }
  .vn-stage.speak-none .vn-side { max-width: 50%; }
  .vn-char { transform: none; }
  .vn-ph { width: min(20vw, 150px); font-size: 26px; }
  .vn-box { grid-column: 2; grid-row: 2; align-self: end; width: auto; min-height: 0; margin: 18px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) 10px; padding: 18px 16px 10px; }
  .vn-text { font-size: 14px; min-height: 40px; max-height: calc(100vh - 150px); overflow-y: auto; }
  .vn-plate { inset: 44px 0 0 26vw; }
}
@media (max-width: 700px) { .call.ring:not(.min) { width: calc(100vw - 20px); } }

/* ---- trace recovery (minigame.js) ---- */
.mg-box { border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--radius); background: var(--panel2); padding: 12px 14px; }
.mg-box .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.mg-stats b { display: block; font-size: 18px; line-height: 1.2; color: var(--amber); }
.mg-stats b.dimb { color: var(--text); } .mg-stats b.good { color: var(--good); }
.mg-games { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; }
.modal.mg { max-width: 520px; max-height: 94vh; overflow-y: auto; }
.mg-head { display: flex; align-items: baseline; gap: 10px; }
.mg-clock { margin-left: auto; font-size: 18px; color: var(--amber); }
.mg-clock.bad { color: var(--bad); }
.modal .mg-blurb { font-size: 12px; margin: 6px 0 12px; }
.mg-result { border: 1px solid currentColor; border-radius: var(--radius); padding: 10px 12px; margin: 8px 0 12px; }
.mg-result b { font-size: 15px; } .mg-result div { color: var(--text); margin-top: 4px; } .mg-result .dim { color: var(--dim); }
.mg-board { user-select: none; -webkit-user-select: none; }
.mg-hint { font-size: 11px; margin-top: 8px; }
/* cipher */
.mg-cipher { display: flex; flex-direction: column; gap: 6px; }
.mg-row { display: flex; align-items: center; gap: 6px; }
.mg-row.key { padding-top: 6px; border-top: 1px solid var(--line); }
.mg-row.draft { padding-top: 6px; border-top: 1px dashed var(--line2); }
.mg-score { margin-left: 10px; font-size: 12px; }
.mg-g { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 5px; background: var(--bg2); border: 1px solid var(--line2); color: var(--g); font-size: 17px; }
.mg-slot { padding: 0; border: 0; background: none; line-height: 0; }
.mg-slot.empty { display: inline-block; width: 30px; height: 30px; border-radius: 5px; border: 1px dashed var(--line2); }
.mg-pal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mg-key { padding: 0; border: 0; background: none; line-height: 0; }
.mg-key .mg-g { width: 38px; height: 38px; font-size: 21px; }
.mg-key:hover .mg-g { border-color: var(--g); }
/* sweep */
.mg-sweepbar { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; font-size: 12px; }
.mg-sweepbar .btn { margin-left: auto; }
.mg-sweep { display: grid; gap: 2px; max-width: 420px; margin: 0 auto; }
.mg-c { aspect-ratio: 1; display: grid; place-items: center; border-radius: 3px; font-size: 13px; font-weight: 600; min-width: 0; padding: 0; }
button.mg-c { background: #26303a; border: 1px solid var(--line2); color: var(--amber); }
button.mg-c:hover:not(:disabled) { background: #2f3b47; }
.mg-c.open { background: var(--bg2); border: 1px solid var(--line); color: var(--dim); }
.mg-c.n1 { color: var(--cyan); } .mg-c.n2 { color: var(--good); } .mg-c.n3 { color: var(--warn); } .mg-c.n4, .mg-c.n5, .mg-c.n6, .mg-c.n7, .mg-c.n8 { color: var(--bad); }
.mg-c.blown { background: #4a1d1d; color: var(--bad); border: 1px solid var(--bad); }
.mg-c.bad { background: #2a1717; color: #a04848; border: 1px solid #4a2626; }
/* relay */
.mg-relay { display: grid; gap: 2px; max-width: 420px; margin: 0 auto; }
.mg-t { aspect-ratio: 1; padding: 0; min-width: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 3px; line-height: 0; }
.mg-t:hover:not(:disabled) { border-color: var(--line2); }
.mg-t svg { width: 100%; height: 100%; }
.mg-t path { stroke: #4a5560; stroke-width: 16; fill: none; stroke-linecap: butt; }
.mg-t circle, .mg-t rect { fill: #4a5560; }
.mg-t.on path { stroke: var(--cyan); } .mg-t.on circle { fill: var(--cyan); }
.mg-t.core rect { fill: var(--amber); } .mg-t.core path { stroke: var(--amber); }

/* Headquarters (game.js hqTab) and what its unlocks add to orbit */
.hqbadge { margin-left: auto; padding: 2px 8px; border: 1px solid var(--amber-d); border-radius: 99px; color: var(--amber); font-size: 11px; white-space: nowrap; }
.hqneed .top b { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.hqneed .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.hqrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 11px; }
.hqrow .btn { padding: 4px 10px; font-size: 11px; }
.hqcat { border: 1px solid var(--line); background: var(--panel2); border-radius: var(--radius); padding: 10px; margin: 8px 0; }
.hqcat > .top b { font-size: 13px; }
.hqcat > .io { margin-bottom: 4px; }
.hqopt { border-top: 1px solid var(--line); padding: 8px 0 2px; margin-top: 8px; }
.hqopt .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; font-size: 12px; }
.hqopt .top .btn { padding: 4px 10px; font-size: 11px; flex: none; }
.hqopt.on { border-top-color: var(--amber-d); }
.hqopt.blocked > .dim { opacity: .6; }
.hqopt .actions + .dim { margin-top: 6px; }
.hqopt .field select { width: 100%; margin-top: 6px; background: var(--bg2); color: var(--text); border: 1px solid var(--line2); border-radius: var(--radius); padding: 7px; font: inherit; font-size: 12px; }
.oslot.hc { border-left: 3px solid var(--amber-d); }
.terr.stabilized { border-left-color: var(--good); }
.terr.private { border-left-color: var(--amber); }

/* ---------- account (game menu) ---------- */
.modal.account { max-width: 420px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal.account form { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.modal.account .label.sec { margin-bottom: 8px; }
.acc-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 4px 0; word-break: break-all; }
.acc-row .label { min-width: 80px; }
.acc-f { display: block; margin-bottom: 8px; }
.acc-f input { width: 100%; margin-top: 4px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--radius); color: var(--text); padding: 8px 10px; font: inherit; }
.acc-f input:focus { outline: none; border-color: var(--amber); }
.acc-msg { min-height: 16px; font-size: 12px; margin: 2px 0 8px; }
.acc-qr { display: block; width: 180px; height: 180px; margin: 0 auto 10px; border-radius: 6px; image-rendering: pixelated; }
.acc-key { font-size: 15px; letter-spacing: .08em; border: 1px dashed var(--amber); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px; user-select: all; word-break: break-all; }
.acc-uri { font-size: 10px; color: var(--faint); word-break: break-all; margin-bottom: 8px; user-select: all; }
.modal.account [hidden] { display: none !important; }