:root {
  --bg: #05070d; --bg2: #0a1020; --panel: #0e1728; --edge: #1e2c44;
  --ink: #cfe0ff; --dim: #7d90b0; --accent: #4da3ff;
  --ferrite: #b9c4d0; --silex: #6fd6ff; --ichor: #7cf6c9; --energy: #ffd23f;
  --ok: #57ff8f; --warn: #ffd23f; --bad: #ff5d5d;

  --launchbar-h: 61px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background-color: var(--bg); background-image:
  radial-gradient(1200px 800px at 70% -10%, #101c33 0%, var(--bg) 60%); color: var(--ink);
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

#resbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; padding: 10px 16px; background-color: #080c16;
  border-bottom: 1px solid var(--edge); }
.res { display: flex; flex-direction: column; min-width: 128px; padding: 4px 10px;
  border: 1px solid var(--edge); border-radius: 9px; background: var(--panel); }
.res .top { display: flex; align-items: center; gap: 6px; }
.res .name { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.res .val { font-variant-numeric: tabular-nums; font-weight: 600; }
.res .sub { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.res.full .val, .res.full .sub { color: var(--warn); }
.res .fill { height: 3px; margin-top: 4px; border-radius: 2px; background: var(--edge);
  overflow: hidden; }
.res .fill i { display: block; height: 100%; width: 0; border-radius: 2px;
  transition: width .35s linear; }
.res.full .fill i { background: var(--warn) !important; }
.res.drain .sub { color: var(--bad); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.spacer { flex: 1; }

#resScroll { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
#nav #planetBox { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--edge); color: var(--dim); font-size: 12px; }
#nav #planetSel { flex: 1 1 100%; max-width: none; min-width: 0; }
#nav #logout { margin: 0 4px; }
#nav #who { cursor: pointer; gap: 8px; font-size: 13.5px; font-weight: 600; }
#nav #who:hover { background: var(--panel); }
#nav #who > span { display: inline; padding: 0; border: 0; }
#nav #who .wname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#nav #who .sig { margin-left: auto; font-weight: 400; flex: none; }
#nav #who .renameW { margin-left: 0; flex: none; }
@media (pointer: coarse) { #nav #who { padding-top: 4px; padding-bottom: 4px; } }
#nav #planetBox .plabel { flex: 1 1 100%; padding: 0 2px; color: var(--dim); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; }

#layout { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 16px; align-items: start; }

#layout > * { min-width: 0; }
#nav { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 4px; }
#nav a, #nav span { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 9px;
  color: var(--ink); border: 1px solid transparent; }
#nav a > span { padding: 0; border: 0; }
#nav a:hover { background: var(--panel); text-decoration: none; }
#nav a.active { background: #12244080; border-color: #245089; color: #fff; }
#nav .soon { color: #4a5b78; cursor: default; font-size: 13px; }
#nav .soon small { color: #35435f; margin-left: auto; }
#nav .sep { height: 1px; background: var(--edge); margin: 8px 4px; }
#nav a.locked { color: #5d6e91; }
#nav a.locked:not(.active) { opacity: .62; }
#nav a.locked.active { opacity: 1; }

nav.pageswitch { display: flex; gap: 6px; margin: 8px 0 14px; flex-wrap: wrap; }
nav.pageswitch a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
  border-radius: 999px; border: 1px solid var(--edge); background: #0d1626; color: var(--dim);
  font-size: 13px; font-weight: 600; }
nav.pageswitch a:hover { color: var(--ink); border-color: #2b5a8f; text-decoration: none; }
nav.pageswitch a.locked { color: #5d6e91; opacity: .62; }
nav.pageswitch a.locked.on { opacity: 1; }
nav.pageswitch a.on { color: #fff; border-color: #245089; background: #12244080; }

h1.page { font-size: 20px; margin: 2px 0 2px; }
p.lead { color: var(--dim); margin: 0 0 16px; }

.group { margin-bottom: 22px; }
.group h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim);
  margin: 0 0 10px; }

:root { --mil: #ff9770; --civ: var(--accent); }
.group.branch-combat, .card[data-branch="combat"], .hull[data-branch="combat"] { --branch: var(--mil); }
.group.branch-civil,  .card[data-branch="civil"],  .hull[data-branch="civil"]  { --branch: var(--civ); }
.group.branch-base,       .card[data-branch="base"]       { --branch: #6fd6ff; }
.group.branch-propulsion, .card[data-branch="propulsion"] { --branch: #7cf6c9; }
.group.branch-military,   .card[data-branch="military"]   { --branch: #ff9d5c; }
.group.branch-signals,    .card[data-branch="signals"]    { --branch: #ffd23f; }
.group.branch-expansion,  .card[data-branch="expansion"]  { --branch: #b98cff; }
.group.branch-concealed,  .card[data-branch="concealed"]  { --branch: #ff7fa8; }

.group[class*="branch-"] { margin-top: 30px; }
.group[class*="branch-"] h2 { display: flex; align-items: center; gap: 9px; color: var(--branch);
  margin-bottom: 5px; }
.group[class*="branch-"] h2::before { content: ""; width: 9px; height: 9px; border-radius: 3px;
  background: var(--branch); box-shadow: 0 0 8px var(--branch); flex: none; }
.group[class*="branch-"] h2::after { content: ""; flex: 1 1 auto; height: 1px; opacity: .5;
  background: linear-gradient(90deg, var(--branch), transparent); }

.groupNote { margin: 0 0 14px; font-size: 12px; color: var(--dim); max-width: 72ch; }

.card[data-branch] { box-shadow: inset 3px 0 0 var(--branch); }
.card[data-branch] .crole { color: var(--branch); }
.card[data-branch] .icon { border-color: color-mix(in srgb, var(--branch) 30%, var(--edge)); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--edge); border-radius: 12px; background:
  linear-gradient(180deg, #101a2e 0%, var(--panel) 100%); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.card.locked { opacity: .62; border-style: dashed; }
.card .head { display: flex; align-items: center; gap: 10px; }
.card .icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  font-size: 20px; background: #0b1424; border: 1px solid var(--edge); }
.card .title { font-weight: 600; }

.card .crole { color: var(--accent); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; line-height: 1.35; }
.card .lvl { margin-left: auto; font-size: 12px; color: var(--dim); text-align: right; }
.card .lvl b { color: var(--ink); font-size: 15px; }
.card .lvl .spotsN { display: block; font-size: 11px; }
.spots { display: flex; flex-wrap: wrap; gap: 3px 6px; font-size: 11px; color: var(--dim);
  font-variant-numeric: tabular-nums; }
.spots .spot { border: 1px solid var(--edge); border-radius: 4px; padding: 1px 6px; }
.spots .spot b { color: var(--ink); font-weight: 600; }
.effect { font-size: 12px; color: var(--dim); }
.effect b { color: var(--ok); }
.effect.power b { color: var(--energy); font-size: 14px; }

a.reqlink { color: inherit; text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; }
a.reqlink:hover, a.reqlink:focus-visible { text-decoration-style: solid; color: var(--ink); }
@media (pointer: coarse) {
  a.reqlink { display: inline-block; padding: 6px 2px; }
}

.card.target { outline: 2px solid var(--accent); outline-offset: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, #101a2e) 0%,
    color-mix(in srgb, var(--accent) 7%, var(--panel)) 100%); }

.card.locked.target { opacity: .85; }

@keyframes cardFlash {
  from { outline-color: #ffffff; outline-offset: 7px; }
  to   { outline-color: var(--accent); outline-offset: 2px; }
}
.card.target.flash { animation: cardFlash 1.1s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .card.target.flash { animation-duration: 1ms; } }

.card { scroll-margin-top: 96px; }
.effect .arrow { color: var(--dim); margin: 0 4px; }
.costs { display: flex; gap: 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
.costs .s { display: flex; align-items: center; gap: 5px; }
.costs .s.lack { color: var(--bad); }
.card .foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.card .foot.tzfoot { flex-wrap: wrap; }
.card .foot.tzfoot > #tzPick { flex: 1 1 220px; min-width: 0; max-width: 100%; }
.time { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
button { font: inherit; cursor: pointer; color: #fff; background: #16345c; border: 1px solid #245089;
  border-radius: 8px; padding: 7px 12px; }
button:hover { background: #1d4577; }
button:disabled { background: #182234; border-color: #23324c; color: #55688a; cursor: not-allowed; }
button.ghost { background: #0e1826; color: var(--ink); }

input, select, textarea { font: inherit; color: var(--ink); background: #0e1826;
  border: 1px solid var(--edge); border-radius: 7px; padding: 6px 8px; }
textarea { width: 100%; resize: vertical; }
input { width: 60px; }
input.qtyin { width: 64px; }
input::placeholder, textarea::placeholder { color: var(--dim); }

select { width: auto; max-width: 100%; }

@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  input { width: 76px; }
  input.qtyin { width: 80px; }
}
.pill { padding: 1px 8px; border-radius: 20px; font-size: 11px; border: 1px solid var(--edge); color: var(--dim); }

.pill.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--edge)); }
.card.running { border-color: color-mix(in srgb, var(--accent) 45%, var(--edge));
  box-shadow: inset 3px 0 0 var(--accent); }

.sendbox .step { padding: 14px 0; border-bottom: 1px dashed #16233a; }
.sendbox .step:last-of-type { border-bottom: 0; }
.sendbox .steph { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim);
  margin-bottom: 10px; }
.sendbox .steph small { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.sendbox .stepn { display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; background: var(--bg2); border: 1px solid var(--edge);
  color: var(--ink); font-size: 11px; letter-spacing: 0; }
.sendbox .stephint { margin: 8px 0 0; font-size: 12px; min-height: 1em; }
.sendbox .srow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sendbox .srow input[type="number"] { width: 110px; }
.sendbox .srow.arrow { margin-top: 10px; }
.sendbox .srow.arrow label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.sendbox .srow.arrow input[type="date"] { width: 150px; font-family: inherit; }
.sendbox .clockin { display: inline-flex; align-items: center; gap: 2px; color: var(--dim); }
.sendbox .srow.arrow .clockin input[type="number"] { width: 58px; text-align: center;
  font-variant-numeric: tabular-nums; }
.stephint .tznote { display: inline-block; color: var(--dim); }
.stephint .tznote a { color: var(--accent); }
.sendbox .taddr { width: 130px; font-family: var(--mono); }
.sendbox #moonWrap { align-items: center; gap: 5px; white-space: nowrap; cursor: pointer; }
.sendbox .cbox { display: flex; flex-direction: column; gap: 3px; }
.sendbox .cbox label { font-size: 11px; }

.mchips { display: flex; flex-wrap: wrap; gap: 8px; }
.mchip { background: var(--bg2); border: 1px solid var(--edge); color: var(--dim);
  border-radius: 20px; padding: 8px 14px; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; }
.mchip:hover { color: var(--ink); border-color: var(--dim); background: var(--bg2); }
.mchip.on { color: var(--ink); border-color: var(--accent); background: rgba(77, 163, 255, .12); }
.mchips.one .mchip:not(.on) { display: none; }
.mchange { background: none; border: 0; color: var(--dim); font-size: 12px; cursor: pointer;
  text-decoration: underline; padding: 8px 4px; }
.mchange:hover { color: var(--ink); }
.mchips:not(.one) .mchange { display: none; }

.hulls { display: grid; gap: 2px; }
.hulls.off { opacity: .55; }
.hullgrp { margin-top: 10px; }
.hullgrp > summary { cursor: pointer; list-style: none; color: var(--dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; padding: 8px 0; }
.hullgrp > summary::-webkit-details-marker { display: none; }
.hullgrp > summary::before { content: "▸ "; }
.hullgrp[open] > summary::before { content: "▾ "; }
.hullgrp > summary:hover { color: var(--ink); }
.hull { display: grid; grid-template-columns: 34px 1fr auto 80px auto; align-items: center;
  gap: 10px; padding: 7px 0; border-bottom: 1px dashed #16233a; }
.hull:last-child { border-bottom: 0; }
.hull .hicon img, .hull .hicon { width: 30px; height: 30px; }
.hull .hname { min-width: 0; font-weight: 600; }
.hull .hname small { display: block; font-weight: 400; color: var(--dim); font-size: 11px; }
.hull .hname .crole { color: var(--branch, var(--accent)); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; line-height: 1.35; font-weight: 400; }
.hull .hhave { color: var(--dim); font-size: 12px; white-space: nowrap; }
.hull input { width: 80px; }

.launchbar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; margin: 14px -14px -14px; padding: 12px 14px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--bg2); border-top: 1px solid var(--edge); }
.launchbar .lstat { flex: 1; min-width: 160px; font-size: 13px; display: flex; gap: 12px;
  flex-wrap: wrap; align-items: baseline; }
.launchbar .lneed { color: var(--warn); }
.launchbar .leta { color: var(--ink); font-variant-numeric: tabular-nums; }
.launchbar .lmoon { color: var(--accent); font-variant-numeric: tabular-nums; }
.launchbar .lland { font-variant-numeric: tabular-nums; }
.launchbar button { min-width: 120px; }
.sendhint { font-size: 11.5px; margin: 10px 0 0; }

@media (max-width: 820px) {
  .hull { grid-template-columns: 34px 1fr auto; grid-template-areas:
    "ic name have" ". input all"; row-gap: 6px; }
  .hull .hicon { grid-area: ic; } .hull .hname { grid-area: name; }
  .hull .hhave { grid-area: have; } .hull input { grid-area: input; width: 100%; }
  .hull button { grid-area: all; }
  .mchip { padding: 9px 12px; }
  .sendbox .taddr { flex: 1 1 120px; width: auto; }
}

#queue, .qbox { border: 1px solid var(--edge); border-radius: 12px; background: var(--panel);
  padding: 14px; margin-bottom: 22px; }
#queue h2, .qbox h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin: 0 0 10px; }
.qitem { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #16233a; }
.qitem:last-child { border-bottom: 0; }
.qitem .qname { min-width: 200px; }
.qitem .qname small { color: var(--dim); }
.qbar { flex: 1; height: 8px; border-radius: 5px; background: #16233a; overflow: hidden; }

.qmeta { flex: 1; color: var(--dim); font-size: 12px; }
.qbar > span { display: block; height: 100%; background: linear-gradient(90deg,#245089,#4da3ff); width: 0; }
.qeta { min-width: 74px; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.qeta .qat { font-size: 11px; }
.qwait { color: var(--dim); }

.qitem.raze .qname small { color: var(--warn); }
.qitem.raze .qbar > span { background: linear-gradient(90deg,#7a5a13,#ffd23f); }
.pill.raze { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--edge)); }
button.raze { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--edge)); }
@media (pointer: coarse) { button.raze { min-height: 44px; } }

#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: #10233d; border: 1px solid #245089; color: var(--ink); padding: 10px 16px;
  border-radius: 10px; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 40; max-width: 70vw; }
#toast.show { opacity: 1; }
#toast.bad { background: #3a1220; border-color: #7a2540; color: #ffd0da; }
.muted { color: var(--dim); }

#bell { position: relative; }
#bell.hot { color: var(--bad); border-color: var(--bad); }

.newschip:not([hidden]) { flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1px solid var(--accent); border-radius: 999px;
  background: rgba(77,163,255,.12); color: var(--ink); font-size: 13px; line-height: 1;
  white-space: nowrap; }
.newschip:hover { background: rgba(77,163,255,.22); text-decoration: none; }
.newschip b { min-width: 18px; padding: 2px 5px; border-radius: 999px; background: var(--accent);
  color: #05070d; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }

#alertPanel {
  display: none; position: fixed; top: 52px; left: 0; right: 0; z-index: 40;
  max-height: 62vh; overflow-y: auto; padding: 0; border-radius: 0;
  border-top: 2px solid var(--accent); border-bottom: 1px solid var(--edge);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .55);

  background: var(--panel);
}
#alertPanel.open { display: block; }

#alertPanel .alhead {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px;
  padding: 10px max(16px, calc((100vw - 1040px) / 2)); background: #101d33;
  border-bottom: 1px solid var(--edge); font-size: 13.5px; letter-spacing: .04em;
}
#alertPanel .alnew {
  font-size: 11px; padding: 1px 8px; border-radius: 20px;
  background: var(--bad); color: #fff; font-weight: 700;
}
#alertPanel .alx {
  margin-left: auto; background: none; border: 0; color: var(--dim);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 3px 8px; border-radius: 6px;
}
#alertPanel .alx:hover { color: var(--ink); background: var(--bg2); }

#alertPanel .alwrap { max-width: 1040px; margin: 0 auto; padding: 4px 16px 10px; }
#alertPanel .al {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 12px; border-bottom: 1px solid var(--edge); font-size: 13.5px; line-height: 1.55;
  border-radius: 8px;
}
#alertPanel .al:last-child { border-bottom: 0; }
#alertPanel .altext { flex: 1; min-width: 0; }

#alertPanel .allink { white-space: nowrap; }
@media (pointer: coarse) {
  #alertPanel .allink { display: inline-flex; align-items: center; min-height: 44px; }
}
#alertPanel .alwhen {
  flex: none; color: var(--dim); font-size: 11.5px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#alertPanel .al.new {
  border-left: 3px solid var(--bad); background: rgba(255, 90, 90, .07);
  padding-left: 12px;
}

#alertPanel .aldrop {
  flex: none; background: none; border: 0; color: var(--dim); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 6px 8px; border-radius: 6px; opacity: .35;
}
#alertPanel .al:hover .aldrop, #alertPanel .aldrop:focus-visible { opacity: 1; }
#alertPanel .aldrop:hover { color: var(--bad); background: var(--bg2); }
#alertPanel .alclear {
  background: none; border: 1px solid var(--edge); color: var(--dim); cursor: pointer;
  font-size: 11.5px; padding: 3px 10px; border-radius: 20px; letter-spacing: .02em;
}
#alertPanel .alclear:hover { color: var(--ink); border-color: var(--dim); }
#alertPanel .alhead .alclear { margin-left: auto; }

#alertPanel .alhead .alclear + .alx { margin-left: 0; }
#alertPanel .alfoot { display: flex; justify-content: center; padding: 10px 0 4px; }
@media (pointer: coarse) {
  #alertPanel .aldrop { opacity: .9; min-width: 44px; min-height: 44px; }
}

.tipbox {
  position: relative; margin-bottom: 16px; border: 1px solid #2a4a6a;
  border-left: 3px solid var(--accent); border-radius: 10px;
  background: rgba(24, 60, 120, .16); padding: 12px 40px 14px 14px;
}
.tipx {
  position: absolute; top: 8px; right: 8px; border: 0; background: transparent;
  color: var(--dim); font-size: 15px; line-height: 1; padding: 4px 6px; cursor: pointer;
}
.tipx:hover { color: var(--ink); }
.tiphead {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #9fc8ff; font-weight: 700; margin-bottom: 6px;
}
.tipbody { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; }
.tipbody.tipstep { border-left: 2px solid var(--accent); padding-left: 11px; color: var(--ink); }
.tipgo {
  display: inline-block; padding: 6px 12px; border-radius: 8px;
  border: 1px solid #2a4a6a; background: rgba(24, 60, 120, .35);
  color: #cfe2ff; font-size: 13px; text-decoration: none;
}
.tipgo:hover { background: rgba(24, 60, 120, .55); }

.threatbox {
  margin-bottom: 16px; border: 1px solid #5a1f1f; border-left: 3px solid var(--bad);
  border-radius: 10px; background: rgba(120, 24, 24, .16); overflow: hidden;
}
.threathead {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  padding: 9px 14px; background: rgba(120, 24, 24, .22);
  border-bottom: 1px solid #5a1f1f; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: #ffb3b3; font-weight: 700;
}
.threathead .muted { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11.5px; }
.threat {
  display: flex; align-items: baseline; gap: 14px; padding: 10px 14px;
  border-bottom: 1px solid rgba(90, 31, 31, .55); font-size: 13.5px; line-height: 1.5;
}
.threat:last-child { border-bottom: 0; }
.threattext { flex: 1; min-width: 0; }
.threatwhen { flex: none; font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.threatx {
  flex: none; background: none; border: 0; color: var(--dim); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 6px 8px; border-radius: 6px;
}
.threatx:hover { color: var(--bad); background: rgba(0, 0, 0, .25); }
@media (pointer: coarse) { .threatx { min-width: 44px; min-height: 44px; } }

#planetName .wname { border-bottom: 1px dashed var(--edge); }
#planetName:hover .wname { border-bottom-color: var(--accent); }
#planetName .renameW, #nav #who .renameW {
  background: none; border: 0; cursor: pointer; font-size: 14px; line-height: 1;
  padding: 2px 6px; margin-left: 8px; border-radius: 6px; opacity: .55; vertical-align: middle;
}
#planetName:hover .renameW, #nav #who:hover .renameW { opacity: 1; }
#planetName .renameW:hover, #nav #who .renameW:hover { background: var(--bg2); }
@media (pointer: coarse) {
  #planetName .renameW, #nav #who .renameW { opacity: .9; min-width: 40px; min-height: 40px; }
}

.fleetbanner {
  padding: 10px 16px; margin-bottom: 16px; text-align: center; letter-spacing: .08em;
  text-transform: uppercase; font-size: 12px; color: var(--dim);
  border: 1px solid var(--edge); border-radius: 10px; background: var(--panel);
}
.fleetbanner.active { color: var(--warn); border-color: #4a3a12; background: rgba(60,48,10,.35); }

.hero { display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  padding: 20px; margin-bottom: 18px; border: 1px solid var(--edge);
  border-radius: 14px; background:
    radial-gradient(900px 300px at 80% -40%, #16223c 0%, var(--panel) 70%); }
.globe-wrap { position: relative; width: 230px; height: 230px; flex: none; }
.disc { position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 42%, transparent 66%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 42%, transparent 66%); }
.globe-wrap::before { content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--atmo, #5a96ff) 30%, transparent) 0,
    transparent 72%);
  filter: blur(14px); opacity: .55; pointer-events: none; }

.ring { position: absolute; left: 6%; right: 6%; top: 45%; height: 21%;
  border-radius: 50%; border: 1px solid rgba(190,205,225,.34);
  box-shadow: 0 0 12px rgba(190,205,225,.16), 0 2px 0 -1px rgba(190,205,225,.14);
  transform: rotate(-14deg); pointer-events: none; }

.globe-wrap .moon { position: absolute; width: 15%; height: 15%; top: 9%; right: 7%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 36% 34%, #c3c9d2 0%, #9198a3 46%, #545a66 78%, #363b45 100%);
  box-shadow: 0 0 10px rgba(150,170,200,.28), inset -3px -3px 7px rgba(0,0,0,.55); }
.heroinfo { flex: 1 1 320px; min-width: 280px; }
.heroinfo .page { margin: 0 0 10px; }
table.facts { width: 100%; border-collapse: collapse; }
table.facts td { padding: 6px 0; border-bottom: 1px solid var(--edge); font-size: 13px; }
table.facts td:first-child { color: var(--dim); width: 42%; }
table.facts tr:last-child td { border-bottom: 0; }

.cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-bottom: 18px; }
.cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.card .body { padding: 12px 14px; }
.card.status .body { min-height: 84px; }
.card .body p { margin: 0; }

.job { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  align-items: center; padding: 6px 0; }
.job .jname { grid-column: 1 / -1; font-size: 13px; }
.job .qbar { grid-column: 1; }
.job .jeta { grid-column: 2; font-variant-numeric: tabular-nums; color: var(--accent); font-size: 13px; }

.prow { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.prow b { margin-left: auto; font-variant-numeric: tabular-nums; }

.fleetdetail:empty { display: none; }
.fleetdetail {
  margin-bottom: 16px; padding: 4px 16px;
  border: 1px solid var(--edge); border-radius: 10px; background: var(--panel);
}
.mv { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--edge); font-size: 13px; line-height: 1.5; }
.mv:last-child { border-bottom: 0; }
.mv.bad b { color: var(--bad); }
.mv-eta { text-align: right; white-space: nowrap; display: flex; flex-direction: column; gap: 1px; }
.mv-eta b { font-variant-numeric: tabular-nums; }
.mv-eta .mv-at { font-size: 12px; font-variant-numeric: tabular-nums; }
.mv-route { font-size: 12px; } .mv-route b { font-variant-numeric: tabular-nums; }
.mv-fold > summary { cursor: pointer; list-style: none; }
.mv-fold > summary::-webkit-details-marker { display: none; }
.mv-fold > summary > div:first-child::before { content: "▸ "; color: var(--dim); }
.mv-fold[open] > summary > div:first-child::before { content: "▾ "; }
.mv-fold[open] > summary { border-bottom: 1px solid var(--edge); }
.mv-fold > .mv { padding-left: 14px; }

.ic-img { display: inline-block; height: 1.35em; width: 1.35em; object-fit: contain;
  vertical-align: -0.3em; }
.ic-emoji { display: inline-block; }

.card .icon .ic-img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }

.chatdock { position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: flex-end; gap: 10px; font-size: 13px; }

body:has(.launchbar) .chatdock {
  bottom: calc(var(--launchbar-h) + env(safe-area-inset-bottom) + 10px); }
.chat-launcher { display: flex; align-items: center; gap: 7px; padding: 9px 14px;
  border: 1px solid var(--edge); border-radius: 22px; background: var(--panel); color: var(--ink);
  cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.4); position: relative; }
.chat-launcher:hover { border-color: var(--accent); }
.chat-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad);
  color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.chat-list[hidden], .chat-badge[hidden] { display: none; }

.chat-list { position: absolute; right: 0; bottom: 54px; width: 300px; max-height: 60vh;
  display: flex; flex-direction: column; border: 1px solid var(--edge); border-radius: 12px;
  background: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.5); overflow: hidden; }
.chat-list-head { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; font-weight: 700; border-bottom: 1px solid var(--edge); }
.chat-new { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--edge); }
.chat-new input { flex: 1; min-width: 0; }
.chat-convos { overflow-y: auto; }
.chat-convo { position: relative; display: block; width: 100%; text-align: left; padding: 9px 12px;
  background: none; border: 0; border-bottom: 1px solid var(--edge); color: var(--ink); cursor: pointer; }
.chat-convo:hover { background: var(--bg2); }
.chat-convo.unread { background: #12244033; }
.chat-convo-top { display: flex; justify-content: space-between; }
.chat-convo-top span { color: var(--dim); font-size: 11px; }
.chat-convo-last { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-convo-badge { position: absolute; right: 10px; bottom: 9px; background: var(--bad); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 9px; min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center; }
.chat-empty { color: var(--dim); text-align: center; padding: 16px; font-size: 12px; line-height: 1.5; }

.chat-windows { display: flex; align-items: flex-end; gap: 10px; }
.chat-win { display: flex; flex-direction: column; width: 300px; height: 400px;
  border: 1px solid var(--edge); border-radius: 12px 12px 0 0; background: var(--panel);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); overflow: hidden; }
.chat-win.min { height: auto; }
.chat-win.min .chat-body, .chat-win.min .chat-foot { display: none; }
.chat-win-head { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--edge); cursor: pointer; }
.chat-win-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-win-btns { display: flex; gap: 2px; flex: none; }
.chat-win-btns button, .chat-x { background: none; border: 0; color: var(--dim); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.chat-win-btns button:hover, .chat-x:hover { color: var(--ink); background: var(--bg2); }
.chat-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { display: flex; flex-direction: column; max-width: 82%; }
.chat-msg.me { align-self: flex-end; align-items: flex-end; }
.chat-msg.them { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: 7px 11px; border-radius: 12px; line-height: 1.35; word-wrap: break-word; white-space: pre-wrap; }
.chat-msg.me .chat-bubble { background: #1d4a86; color: #eaf3ff; border-bottom-right-radius: 4px; }
.chat-msg.them .chat-bubble { background: var(--bg2); border: 1px solid var(--edge); border-bottom-left-radius: 4px; }
.chat-meta { color: var(--dim); font-size: 10px; margin-top: 2px; }
.chat-report { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 10px; text-decoration: underline; padding: 0; }
.chat-report:hover { color: var(--bad); }
.chat-foot { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--edge); align-items: flex-end; }
.chat-input { flex: 1; resize: none; min-height: 34px; max-height: 96px; }
.chat-input:disabled { opacity: .55; cursor: not-allowed; }
.chat-send { flex: none; }

.chat-convo-ally b { color: var(--accent); }
.chat-win-ally .chat-win-head b { color: var(--accent); }

.chat-convo-support b { color: var(--ok); }
.chat-win-support .chat-win-head b { color: var(--ok); }
.chat-sub { padding: 5px 12px; font-size: 11px; color: var(--ok); border-bottom: 1px solid var(--edge);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.chat-origin .chat-bubble { background: #0b1424; border: 1px dashed var(--edge); }
.chat-origin .chat-bubble b { display: block; margin-bottom: 4px; }
.chat-origin-body { display: block; white-space: pre-wrap; color: var(--dim); }
.chat-closed { margin: 0; padding: 10px 12px; font-size: 11.5px; line-height: 1.45; color: var(--dim);
  border-top: 1px solid var(--edge); background: #0b1424; }
.chat-author { color: var(--accent); font-size: 11px; font-weight: 600; margin: 0 2px 1px; }
.chat-lock { font-size: 13px; }
.chat-foot.locked { opacity: .85; }


.sig { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 1px 5px;
  border: 1px solid var(--edge); border-radius: 5px; color: var(--accent); margin-left: 4px; }

.sig-entry { display: grid; gap: 10px; }
.sig-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sig-head .sig { margin-left: 0; font-size: 13px; }
.sig-when { margin-left: auto; font-size: 12px; }
.sig-sectors { display: flex; flex-wrap: wrap; gap: 6px; }
.sig-sec { font-family: var(--mono); font-size: 12px; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--edge); background: var(--ground-2, rgba(255,255,255,.03)); }
.sig-sec small { color: var(--dim); margin-left: 4px; font-size: 11px; }
.sig-sec .sig-seen { display: block; margin-left: 0; font-size: 11px; }
.sig-mass { font-size: 12px; }
.sig-sec .sig-mass-tag { margin-left: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.sig-sec .sig-mass-tag.heavy { color: var(--warn); }
.sig-sec .sig-mass-tag.medium { color: var(--fg); }
.sig-sec .sig-mass-tag.civil { opacity: .7; }

.rep-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.rep-chip { font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--edge); background: var(--panel); color: var(--dim); }
.rep-chip:hover { color: var(--ink); border-color: var(--accent); }
.rep-chip.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.rep-chip.pin.on { background: var(--warn); border-color: var(--warn); }
.rep-chip.nomad.on { background: var(--warn); border-color: var(--warn); }
#list { display: grid; gap: 8px; }
.rep-card { --kc: var(--edge); border: 1px solid var(--edge); border-left: 4px solid var(--kc);
  border-radius: 10px; background: var(--panel); overflow: hidden; }
.rep-card.pinned { border-color: var(--warn); border-left-color: var(--kc); }
.rep-card .rep-head { background: linear-gradient(90deg, color-mix(in srgb, var(--kc) 14%, transparent), transparent 55%); }
.k-battle { --kc: #ff4d4d; }
.k-defence { --kc: #ff9a3d; }
.k-espionage { --kc: #b48cff; }
.k-survey { --kc: #4da3ff; }
.k-recycle { --kc: #57d98a; }
.k-scuttle { --kc: #8f9bb3; }
.k-colonize { --kc: #6fd6ff; }
.k-transport { --kc: #e6c07b; }
.k-deploy { --kc: #7cf6c9; }
.rep-chip[data-type="battle"].on { background: #ff4d4d; border-color: #ff4d4d; }
.rep-chip[data-type="defence"].on { background: #ff9a3d; border-color: #ff9a3d; }
.rep-chip[data-type="espionage"].on { background: #b48cff; border-color: #b48cff; }
.rep-chip[data-type="recycle"].on { background: #57d98a; border-color: #57d98a; }
.rep-chip[data-type="scuttle"].on { background: #8f9bb3; border-color: #8f9bb3; }
.rep-chip[data-type="colonize"].on { background: #6fd6ff; border-color: #6fd6ff; }
.rep-chip[data-type="transport"].on { background: #e6c07b; border-color: #e6c07b; }
.rep-chip[data-type="deploy"].on { background: #7cf6c9; border-color: #7cf6c9; }

.rep-card.target { outline: 2px solid var(--accent); outline-offset: -1px; }
.rep-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.rep-card .rep-head:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--kc) 24%, transparent), rgba(255,255,255,.02) 55%); }
.rep-ic { font-size: 18px; flex: none; }
.rep-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rep-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-sum { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-badge { flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 6px; border: 1px solid var(--edge); }
.rep-badge.good { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.rep-badge.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.rep-badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.rep-when { flex: none; font-size: 12px; }
.rep-pin { flex: none; border: none; background: transparent; cursor: pointer; font-size: 15px;
  opacity: .3; filter: grayscale(1); }
.rep-pin:hover { opacity: .7; }
.rep-pin.on { opacity: 1; filter: none; }
.rep-del { flex: none; border: none; background: transparent; cursor: pointer; font-size: 14px;
  line-height: 1; padding: 2px 4px; color: var(--dim); opacity: .5; }
.rep-del:hover { color: var(--bad); opacity: 1; }
@media (pointer: coarse) { .rep-del { min-width: 34px; min-height: 34px; } }
.rep-share { flex: none; border: none; background: transparent; cursor: pointer; font-size: 14px;
  line-height: 1; padding: 2px 4px; opacity: .5; }
.rep-share:hover { opacity: 1; }
@media (pointer: coarse) { .rep-share { min-width: 34px; min-height: 34px; } }
.rep-sharebox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px;
  border-top: 1px solid var(--edge); font-size: 13px; }
.rep-sharebox label { display: flex; align-items: center; gap: 6px; }
.rep-sharebox select { padding: 4px 6px; }
.rep-sharebox .muted { font-size: 12px; }
.letter { display: grid; gap: 6px; min-width: 220px; white-space: normal; }
.letter-head { display: flex; align-items: center; gap: 8px; }
.letter-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
.letter-sum { font-size: 12px; opacity: .85; }
.letter-when { font-size: 11px; }
.letter-detail summary { cursor: pointer; font-size: 12px; opacity: .8; }
.letter-detail .rep-kv { font-size: 12px; }
.letter .rep-table { font-size: 12px; }
.chat-msg.me .letter .muted, .chat-msg.me .letter .rep-kv span { color: #b9d2f2; }
.rep-detail { display: grid; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--edge);
  background: var(--bg2); }
.rep-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.rep-kv span { color: var(--dim); flex: none; }
.rep-kv b { text-align: right; font-weight: 500; }
.rep-kv b .rname { font-weight: 400; opacity: .85; }

.rep-block { margin-top: 4px; }
.rep-blockhead { color: var(--dim); font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; margin: 6px 0 4px; }
table.rep-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.rep-table th, table.rep-table td { padding: 4px 8px; border-bottom: 1px solid var(--edge); }
table.rep-table th { color: var(--dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 500; text-align: left; }
table.rep-table th:last-child, table.rep-table td:last-child {
  text-align: right; width: 5.5em; font-variant-numeric: tabular-nums; }
table.rep-table tr:last-child td { border-bottom: 0; }
table.rep-table tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .022); }

table.rep-table td .u { display: block; }
.rep-globe { display: inline-flex; align-items: center; min-height: 32px; margin: -8px 0; color: var(--accent); text-decoration: underline dotted; text-underline-offset: 3px; }
.rep-globe:hover { text-decoration-style: solid; }
table.rep-table td .urole { display: block; color: var(--dim); font-size: 11px;
  text-transform: lowercase; letter-spacing: .01em; }
.rep-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.rep-page { font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--edge); background: var(--panel); color: var(--ink); }
.rep-page:disabled { opacity: .4; cursor: default; }
@media (max-width: 640px) { .rep-when { display: none; } }

.chat-bugreport { display: block; width: 100%; text-align: center; padding: 9px 12px;
  border: none; border-top: 1px solid var(--edge); background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; cursor: pointer; }
.chat-bugreport:hover { background: var(--panel-2, rgba(255,255,255,.04)); color: var(--ink, inherit); }
.bug-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow-y: auto; }
.bug-hint { margin: 0; font-size: 12px; color: var(--muted); }
.bug-form input, .bug-form textarea { width: 100%; resize: vertical; font: inherit; }
.bug-form textarea { min-height: 160px; }
.bug-count { font-size: 11px; color: var(--dim); text-align: right; margin-top: -4px; }
.bug-count.near { color: var(--accent); }
.bug-submit { align-self: stretch; padding: 8px; cursor: pointer; }
.bug-submit:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 620px) {
  .chat-win, .chat-list { width: calc(100vw - 32px); }
  .chat-windows { display: none; }
  .chatdock:has(.chat-win) .chat-windows { display: flex; }
}

.reg-h { margin-top: 0; }
.anom-h { margin-top: 26px; }
.ruin { border-left: 3px solid #6b5a3a; }
.ruin.ruin-dark { border-left-color: #3b4a5a; }
.ruin-count { margin: 0 0 10px; }
.ruin-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; }
.ruin-head .wchip { font-variant-numeric: tabular-nums; }
.ruin-kind { margin-left: auto; color: var(--accent); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; }
.ruin.ruin-dark .ruin-kind { color: var(--dim); }
.ruin-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem;
  font-size: 12px; margin-top: 6px; }
.ruin-act { color: var(--accent); text-decoration: underline dotted; text-underline-offset: 3px; }
.ruin-act:hover { text-decoration-style: solid; }
.ruin-sheet .rep-card { margin: 0; }
.ruin-sheet .rep-detail { padding-top: 8px; }
.ruin-sheet-foot { margin: 10px 0 0; font-size: 12px; }
.qtrade { color: var(--ichor); font-size: 11px; }
.tr-h { margin: 18px 0 8px; }
.tr-deal { padding: 12px 14px; }
.tr-deal.tr-past { opacity: .7; }
.tr-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.tr-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; border: 1px solid var(--edge);
  color: var(--dim); white-space: nowrap; }
.tr-pill.ok { color: var(--ok); border-color: #1f4d33; }
.tr-pill.bad { color: var(--bad); border-color: #4d1f1f; }
.tr-pill.acc { color: var(--accent); border-color: #1f3a5a; }
.tr-terms { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 8px 0;
  font-variant-numeric: tabular-nums; }
.tr-side { padding: 8px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--edge); }
.tr-arrow { color: var(--dim); text-align: center; }
.tr-form .lbl, .tr-side .lbl { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin: 8px 0 4px; }
.tr-side .lbl { margin-top: 0; }
.tr-meta { font-size: 12.5px; }
.tr-verdict.ok { color: var(--ok); }
.tr-verdict.warn { color: var(--warn); }
.tr-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.tr-leg { font-size: 12px; padding: 6px 8px; border-radius: 8px; border: 1px dashed var(--edge); }
.tr-leg.done { border-style: solid; }
.tr-bar { height: 3px; background: var(--edge); border-radius: 2px; margin-top: 5px; }
.tr-bar i { display: block; height: 3px; border-radius: 2px; background: var(--accent); }
.tr-due { margin: 6px 0 0; font-size: 12px; }
.tr-hist { margin-top: 8px; font-size: 12.5px; }
.tr-hist ul { margin: 6px 0 0; padding-left: 18px; }
.tr-hist li { padding: 2px 0; }
.tr-receive { margin-top: 10px; display: grid; gap: 4px; }
.tr-receive select { max-width: 100%; }
.tr-exp { border-left: 3px solid var(--bad); padding: 6px 10px; background: #150c10; border-radius: 0 8px 8px 0;
  font-size: 12.5px; color: #ffb3b3; margin: 8px 0 0; }
.tr-warn { color: var(--warn); font-size: 12.5px; }
.tr-actions { margin-top: 10px; }
.tr-form { margin-top: 10px; padding: 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--bg2); }
.tr-form h2, .tr-form h3 { margin: 0 0 6px; font-size: 14px; }
.tr-give { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 10px; }
.tr-cbox { display: grid; gap: 4px; }
.tr-cbox input { width: 100%; }
.tr-shipbox .hulls { margin: 8px 0; }
.tr-shipbox .mchips { margin: 8px 0; }
.tr-composer .tr-cstep { padding: 10px 0; border-top: 1px solid var(--edge); }
.tr-composer .tr-cstep:first-of-type { border-top: 0; }
.tr-composer .steph { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-weight: 600; }
.tr-composer .steph small { font-weight: 400; color: var(--dim); }
.tr-composer .stepn { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: #17325a; color: #bcd6ff; font-size: 11px; }
.tr-composer .mchips { margin-bottom: 8px; }
.tr-composer .mchip .dot { margin-right: 5px; }
.tr-step { display: flex; gap: 6px; align-items: center; }
.tr-step input { flex: 1 1 120px; min-width: 0; font-variant-numeric: tabular-nums; }
.tr-step button { flex: none; padding: 7px 9px; font-variant-numeric: tabular-nums; }
.tr-other { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.tr-composer input[list] { width: 100%; }
.tr-pastbox { margin-top: 16px; }
.tr-pastbox > summary { cursor: pointer; color: var(--dim); margin-bottom: 8px; }
#emporia-h { margin-top: 28px; }
.em-grid { display: grid; gap: 4px; margin: 8px 0; }
.em-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.em-row .dot { margin-right: 6px; }
.em-rel { font-variant-numeric: tabular-nums; color: var(--dim); }
.em-rel.em-dear { color: var(--ok); }
.em-rel.em-cheap { color: var(--warn); }
.em-slot:empty { display: none; }
.em-launchbox .em-legs { margin: 6px 0 10px; }
.em-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.em-stat { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--edge); border-radius: 8px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 3px; }
.em-stat .lbl { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.em-stat b { font-size: 15px; font-variant-numeric: tabular-nums; }
.em-stat b.ok { color: var(--ok); }
.em-stat b.bad { color: var(--bad); }
.em-stat small { font-size: 11px; }
.em-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.em-bar i { display: block; height: 100%; border-radius: 3px; background: var(--bad); }
.em-bar.ok i { background: var(--ok); }
.em-launchbox .steph { margin-top: 6px; }
.em-go { font-weight: 600; min-width: 200px; }
.em-go.bare { background: var(--warn); border-color: var(--warn); color: #1a1206; }
.em-hazard { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 13px; }
.em-hazard b { color: var(--warn); font-weight: 600; }
.em-hazard.bare { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.em-hazard.bare span { color: var(--bad); font-weight: 600; }
@media (max-width: 560px) {
  .tr-terms { grid-template-columns: 1fr; }
  .tr-arrow { transform: rotate(90deg); }
  .tr-legs, .tr-give { grid-template-columns: 1fr; }
}
.anom { border-left: 3px solid #3b4a5a; }
.anom-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem;
  align-items: baseline; }

.anom-at { font-family: var(--mono); font-size: 12px; padding: 2px 8px; border-radius: 6px;
  margin-right: auto; color: var(--dim);
  border: 1px solid var(--edge); background: var(--ground-2, rgba(255,255,255,.03)); }
.anom-text { margin: .5rem 0 0; opacity: .85; line-height: 1.5; }
.anom-whisper { border-left-color: #6b3b7a; background: linear-gradient(90deg, rgba(107,59,122,.12), transparent 60%); }
.anom-whisper .anom-text { font-style: italic; opacity: .95; }

#navToggle { display: none; }
#navScrim { display: none; }

@media (max-width: 820px) {
  #navToggle { display: inline-flex; font-size: 17px; line-height: 1; padding: 7px 11px; }

  #resbar { flex-wrap: nowrap; overflow: visible; gap: 8px; padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top)); }
  #resScroll { overflow-x: auto; scrollbar-width: none; gap: 8px; }
  #resScroll::-webkit-scrollbar { display: none; }
  #navToggle, #bell { flex: none; }
  #resbar .newschip:not([hidden]) { padding: 7px 9px; }
  #resbar .newschip .nclabel { display: none; }
  .res { min-width: 104px; padding: 3px 8px; flex: none; }
  .res .name { color: #b9c9e6; font-weight: 600; }
  .res .sub { display: none; }
  .res.full .sub { display: block; font-size: 11px; }
  .res.drain .sub { display: block; font-size: 11px; }
  .spacer { display: none; }

  #layout { grid-template-columns: 1fr; padding: 12px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  #nav { position: fixed; top: 0; bottom: 0; left: 0; width: 232px; z-index: 70;
    padding: 12px; padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
    background: var(--bg2); border-right: 1px solid var(--edge);
    overflow-y: auto; transform: translateX(-100%); transition: transform .18s ease-out; }
  body.nav-open #nav { transform: none; }
  body.nav-open { overflow: hidden; }
  #navScrim { display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(2,5,10,.6); opacity: 0; pointer-events: none; transition: opacity .18s; }
  body.nav-open #navScrim { opacity: 1; pointer-events: auto; }
  #nav a, #nav span { padding: 11px 12px; }

  .cards { grid-template-columns: 1fr; }
  h1.page { font-size: 18px; }

  .qitem { flex-wrap: wrap; }
  .qitem .qname { min-width: 0; flex: 1 1 100%; }
  .qitem input, .qitem select { max-width: 100%; }

  table.facts { display: block; overflow-x: auto; }

  #alertPanel { top: 48px; max-height: 72vh; }

  .chatdock { right: 8px; left: 8px; bottom: max(8px, env(safe-area-inset-bottom)); }

  .chat-launcher { margin-left: auto; }

  .chat-launcher { width: 46px; height: 46px; padding: 0; border-radius: 50%;
    justify-content: center; font-size: 19px; }
  .chat-launcher > span:not(.chat-badge) { display: none; }
  .chat-list { right: 0; left: 0; width: auto; max-height: 66vh; }
  .chat-windows { flex-direction: column; align-items: stretch; }
  .chat-win { width: auto; height: min(74vh, 460px); }
  .chat-win:not(:last-child) { display: none; }
}

@media (hover: none) {
  .chat-report { text-decoration: underline; color: var(--dim); }
  #nav a:hover { background: none; }
}

.infoBtn { width: 18px; height: 18px; padding: 0; margin-left: 6px; border-radius: 50%;
  font-size: 11px; font-weight: 700; line-height: 1; background: #16345c; border: 1px solid #245089;
  color: #cfe0ff; vertical-align: middle; }
.infoBtn:hover { background: #1d4577; color: #fff; }

#sheetModal { display: none; position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(3, 6, 12, .78); backdrop-filter: blur(3px);
  padding: max(24px, calc(env(safe-area-inset-top) + 10px)) max(16px, env(safe-area-inset-right))
           max(24px, calc(env(safe-area-inset-bottom) + 10px)) max(16px, env(safe-area-inset-left)); }
#sheetModal.on { display: block; }
.sheetWrap { position: relative; max-width: 780px; margin: 0 auto; border: 1px solid var(--edge);
  border-radius: 14px; background: var(--panel); box-shadow: 0 24px 60px rgba(0,0,0,.6); overflow: hidden; }
.sheetX { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(8,14,26,.7);
  border: 1px solid var(--edge); color: var(--ink); border-radius: 8px; padding: 4px 9px; }

@media (max-width: 820px) {
  .sheetX { position: fixed; top: max(34px, calc(env(safe-area-inset-top) + 20px));
    right: max(26px, calc(env(safe-area-inset-right) + 10px));
    width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 15px;
    display: grid; place-items: center; background: rgba(8,14,26,.92); }
}
.sheet .hero { position: relative; aspect-ratio: 16 / 9; background:
  radial-gradient(700px 300px at 60% 10%, #16294a 0%, #070d18 70%); overflow: hidden; }
.sheet .heroImg { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet .heroImg.missing { display: none; }

.sheet .hero > .ic-img.heroFallback,
.sheet .hero > .ic-emoji.heroFallback { margin: auto; width: 96px; height: 96px; font-size: 72px;
  display: block; opacity: .85; }
.sheet .heroCap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 20px 14px;
  background: linear-gradient(180deg, rgba(7,13,24,0) 0%, rgba(7,13,24,.92) 70%); }
.sheet .hname { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.sheet .hrole { color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.sheetBody { padding: 16px 20px 20px; }
.sheetBody h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim);
  margin: 16px 0 7px; }
.sheet .attrib { font-size: 12.5px; color: var(--dim); padding-bottom: 10px;
  border-bottom: 1px solid var(--edge); }
.sheet .attrib b { color: var(--ink); }
.sheet .doctrine { font-size: 14.5px; line-height: 1.62; margin: 12px 0; }
.sheet .limit { font-size: 13.5px; line-height: 1.55; color: var(--dim); margin: 0 0 4px;
  border-left: 2px solid #7a2540; padding-left: 11px; }
.sheet .limit b { color: #ffb3c0; }
.sheet .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sheet .rfrow { display: flex; flex-wrap: wrap; gap: 5px; }
.sheet .rf { font-size: 11.5px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--edge);
  background: var(--bg2); white-space: nowrap; }
.sheet .rf b { color: var(--warn); }

.sheet .rf img { width: 15px; height: 15px; vertical-align: -3px; border-radius: 3px; }
.sheet .rf { display: inline-flex; align-items: center; gap: 5px; }
.sheet .specs { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--dim); }
.sheet .specs b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sheet .ladder { display: flex; flex-direction: column; gap: 3px; }
.sheet .step { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 5px 9px;
  border-radius: 8px; background: #0c1526; }
.sheet .step.met { background: #0e2018; }
.sheet .step .i { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid;
  place-items: center; font-size: 11px; font-weight: 700; background: #16233a; }
.sheet .step.met .i { background: #2b6a3d; color: #eaf3ff; }
.sheet .step.unmet .i { background: #3a1a26; color: #ffb3c0; }
.sheet .step .what { flex: 1; }
.sheet .step .lvl { color: var(--dim); font-size: 12px; }
@media (max-width: 620px) { .sheet .grid2 { grid-template-columns: 1fr; } }

.sheet .small { font-size: 12px; margin: -2px 0 8px; }
.projWrap { overflow-x: auto; border: 1px solid var(--edge); border-radius: 10px; max-height: 60vh;
  overflow-y: auto; }
table.proj { width: 100%; border-collapse: collapse; font-size: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
table.proj th { position: sticky; top: 0; z-index: 1; background: #0c1526; color: var(--dim);
  font-weight: 600; text-align: right; padding: 7px 9px; border-bottom: 1px solid var(--edge);
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
table.proj td { padding: 5px 9px; text-align: right; border-bottom: 1px solid #101b2e; }
table.proj th.lv, table.proj td.lv { text-align: left; color: var(--dim); }
table.proj td.hl { color: var(--ink); font-weight: 600; }
table.proj tbody tr:hover td { background: #0d1728; }

table.proj tr.at td { background: #0e2018; color: var(--ink); }
table.proj tr.at td.lv { color: var(--ok); font-weight: 700; }
table.proj tr.next td { background: #101d33; }
table.proj tr.next td.lv { color: var(--accent); font-weight: 700; }
table.proj .up { color: var(--ok); }
table.proj .down { color: var(--bad); }
table.proj em { font-style: normal; font-size: 10.5px; opacity: .85; }
table.proj i { font-style: normal; }
table.proj i.rf { color: var(--ferrite); }
table.proj i.rs { color: var(--silex); }
table.proj i.ri { color: var(--ichor); }
@media (max-width: 620px) { .projWrap { max-height: 55vh; } table.proj { font-size: 11px; }
  table.proj td, table.proj th { padding: 4px 6px; } }

.ops-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ops-row > .ops-main { flex: 1 1 320px; min-width: 0; }
.ops-row > .ops-form { flex: 0 0 auto; margin-top: 0; }
.ops-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ops-form input { min-width: 120px; flex: 1 1 120px; }
.ops-form input.amb-sector { flex: 0 1 140px; }
@media (max-width: 820px) { .ops-form input { flex: 1 1 100%; } }

.billing-plans { display: grid; gap: 8px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.billing-plan { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 0;
  border: 1px solid #16233a; border-radius: 8px; padding: 10px; }
.billing-plan button { width: 100%; }
.billing-figure { display: flex; flex-direction: column; gap: 1px; }
.billing-figure b { font-size: 17px; font-variant-numeric: tabular-nums; }
.billing-figure .muted { font-size: 12px; }

.reqrow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px dashed #16233a; font-size: 13px; }
.reqrow:last-child { border-bottom: 0; }
.reqrow > span:first-child { color: var(--dim); }
.reqrow b { font-variant-numeric: tabular-nums; text-align: right; }
.reqrow.met b, .reqrow.met::after { color: var(--ok); }
.reqrow.unmet { color: var(--bad); }
.reqrow.unmet b { color: var(--bad); }

.firstrun { border: 1px solid var(--edge); border-left: 3px solid var(--accent);
  border-radius: 12px; background: linear-gradient(180deg, #101a2e, var(--panel));
  padding: 14px 16px; margin-bottom: 16px; }
.firstrun.done { border-left-color: var(--ok); }
.fr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fr-kick { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.fr-right { display: flex; align-items: center; gap: 8px; flex: none; }
.fr-count { font-variant-numeric: tabular-nums; color: var(--dim); font-size: 12.5px; }
.fr-toggle { font-size: 12.5px; padding: 5px 10px; }
.fr-bar { height: 4px; border-radius: 3px; background: #16233a; overflow: hidden; margin: 10px 0; }
.fr-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #245089, #4da3ff); }
.firstrun.done .fr-bar > span { background: linear-gradient(90deg, #1f6b45, var(--ok)); }
.fr-body { color: var(--dim); font-size: 13.5px; margin: 0; }
.fr-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.fr-list li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px dashed #16233a; }
.fr-list li.ok b { color: var(--dim); text-decoration: line-through; }
.fr-tick { color: var(--dim); flex: none; width: 16px; }
.fr-list li.ok .fr-tick { color: var(--ok); }
.fr-list p { margin: 2px 0 0; color: var(--dim); font-size: 12.5px; }
@media (max-width: 820px) { .fr-toggle { display: none; } .fr-list { display: grid !important; } }

.fr-go { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--edge)); border-radius: 8px;
  padding: 5px 11px; text-decoration: none; }
.fr-go:hover { border-color: var(--accent); }
.fr-go.small { margin-top: 6px; padding: 3px 9px; font-size: 12px; }
@media (pointer: coarse) { .fr-go { min-height: 44px; line-height: 32px; } }

#firstrunStrip { margin: 0 0 14px; }
.firstrun.slim { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin: 0; }
.firstrun.slim b { font-size: 13.5px; font-weight: 600; }
.firstrun.slim .fr-kick { flex: none; }
.firstrun.slim .fr-count { margin-left: auto; }
.firstrun.slim .fr-go { margin-top: 0; }

.danger-card { border-color: #5b2130; }
button.danger { background: #4a1626; border-color: #7a2540; color: #ffd0da; }
button.danger:hover { background: #611c31; }

.navdocs { margin-top: auto; padding: 8px 8px 2px; font-size: 12px;
  color: var(--dim); border-top: 1px solid var(--edge);
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 9px; row-gap: 0; }
#nav .navdocs a { display: inline-block; padding: 7px 0; border: 0; border-radius: 0;
  color: var(--dim); }
#nav .navdocs a:hover { color: var(--ink); background: none; text-decoration: underline; }
@media (pointer: coarse) { #nav .navdocs a { padding: 12px 0; } }
#nav .navdocs #verLink { margin-left: auto; font-variant-numeric: tabular-nums; }
#nav .navdocs #verLink.fresh { color: var(--ink); padding: 3px 9px; margin: 4px 0;
  border: 1px solid var(--accent); border-radius: 999px; background: rgba(77,163,255,.12); }
#nav .navdocs #verLink.fresh:hover { text-decoration: none; background: rgba(77,163,255,.22); }
@media (pointer: coarse) { #nav .navdocs #verLink.fresh { padding: 8px 11px; } }

.cl-versions { display: flex; flex-direction: column; gap: 22px; }
.cl-version { border: 1px solid var(--edge); border-radius: 10px; background: var(--panel); overflow: hidden; }
.cl-vhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; padding: 12px 14px;
  border-bottom: 1px solid var(--edge); }
.cl-vhead h2 { margin: 0; font-size: 17px; }
.cl-vhead .cl-current { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; padding: 1px 8px; }
.cl-vhead .cl-vdate { margin-left: auto; color: var(--dim); font-size: 13px; }
.cl-entry { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 12px 14px;
  border-top: 1px solid var(--edge); scroll-margin-top: 80px; }
.cl-entry:first-of-type { border-top: 0; }
.cl-entry.fresh { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cl-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  color: var(--dim); align-self: start; padding-top: 3px; }
.cl-kind.feature { color: var(--accent); }
.cl-kind.balance { color: var(--warn); }
.cl-entry h3 { margin: 0; font-size: 15px; }
.cl-entry p { margin: 4px 0 0; grid-column: 2; color: var(--ink); }
.cl-entry .cl-meta { grid-column: 2; color: var(--dim); font-size: 12px; margin-top: 4px; }
.cl-entry .cl-new { color: var(--accent); font-weight: 600; margin-right: 8px; }
@media (max-width: 560px) { .cl-entry { grid-template-columns: 1fr; } .cl-entry p, .cl-entry .cl-meta { grid-column: 1; } }

.spamnote {
  display: block;
  margin-top: 10px;
  padding: 9px 12px;
  border-left: 3px solid #d8a13a;
  border-radius: 0 8px 8px 0;
  background: rgba(216, 161, 58, .09);
  color: #c9b28a;
  font-size: 13px;
  line-height: 1.55;
}

.alworld { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #16233a; color: var(--dim); font-size: 12px; white-space: nowrap; }
.alworld .alcoords { opacity: .75; font-variant-numeric: tabular-nums; }

#moment { position: fixed; inset: 0; z-index: 90; display: none; align-items: center;
  justify-content: center; padding: 32px calc(24px + env(safe-area-inset-right))
  calc(32px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  background: rgba(4,7,14,.82); backdrop-filter: blur(3px); cursor: pointer; }
#moment.show { display: flex; animation: momentIn .5s ease-out both; }
#moment .m-in { max-width: 640px; text-align: center; }
#moment .m-head { font-size: clamp(26px, 6vw, 46px); font-weight: 200; letter-spacing: .01em;
  line-height: 1.18; color: #eaf1ff; text-shadow: 0 2px 26px rgba(0,0,0,.7); }
#moment .m-sub { margin-top: 16px; color: var(--dim); font-size: 15px; line-height: 1.5; }
#moment .m-hint { position: absolute; left: 0; right: 0;
  bottom: calc(30px + env(safe-area-inset-bottom)); color: var(--dim); opacity: .55;
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
@keyframes momentIn { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { #moment.show { animation: none } }

.installbar { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px;
  padding: 10px 12px; border: 1px solid #23406b; border-radius: 11px;
  background: linear-gradient(180deg, #0e1c33, #0b1526); }
.installbar .ico { font-size: 20px; line-height: 1.2; flex: none; }
.installbar .txt { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.45; }
.installbar .txt > b { display: block; color: var(--ink); }
.installbar .how b { color: var(--ink); }
.installbar .txt span { color: var(--dim); }
.installbar .how { margin-top: 5px; }
.installbar .how summary { color: var(--accent); cursor: pointer; font-size: 12px;
  list-style: none; padding: 3px 0; }
.installbar .how summary::-webkit-details-marker { display: none }
.installbar .how ol { margin: 6px 0 0 18px; padding: 0; color: var(--dim); line-height: 1.75; }
.installbar button { flex: none; align-self: flex-start; }
.tzbar { border-color: #2c4a2f; background: linear-gradient(180deg, #0e2018, #0b1a14); }
.installbar #installNo { padding: 6px 9px; line-height: 1; color: var(--dim); }
@media (pointer: coarse) {
  .installbar #installNo { padding: 11px 13px; }
  .installbar .how summary { padding: 8px 0; }
}

@media (pointer: coarse) {
  .rep-chip { min-height: 40px; padding: 8px 14px; }
  .infoBtn { width: 32px; height: 32px; font-size: 14px; }
  a.world-link { display: inline-block; padding: 8px 6px; margin: -6px 0; }
  a.altag { display: inline-block; padding: 8px 6px; margin: -8px 0; }
  .optin input, label.consent input[type=checkbox] { width: 22px; height: 22px; }
  .doc .back { padding: 10px 6px; margin-left: -6px; }
  .sendhint a, .job .muted a, .jobs .muted a, p.muted > a[href] { display: inline-block; padding: 8px 2px; }
}

.empire-research { margin: 0 0 12px; font-size: 13.5px; }
.emp-table { overflow-x: auto; border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); }
.emp-table table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 880px; }
.emp-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dim); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--edge); }
.emp-table td { padding: 8px 10px; border-bottom: 1px solid #16223a; vertical-align: top; }
.emp-table tr:last-child td { border-bottom: 0; }
.emp-table tr.emp-moon td { background: rgba(255, 255, 255, .015); }
.emp-world { display: grid; gap: 1px; text-align: left; background: none; border: 0; padding: 0;
  color: var(--ink); cursor: pointer; font: inherit; }
.emp-world span { font-size: 11.5px; }
.emp-world:hover b { color: var(--accent); }
.emp-world:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.emp-res { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.emp-res.full b { color: var(--warn); }
.emp-res.drain .muted { color: var(--bad); }
.emp-res .dot, .emp-lvl .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.emp-lvl { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.emp-factor { font-variant-numeric: tabular-nums; color: var(--ok); }
.emp-factor.low { color: var(--warn); }
.emp-warn { color: var(--bad); font-size: 12px; margin-top: 3px; }
.emp-ships summary { cursor: pointer; white-space: nowrap; }
.emp-ships ul { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; }
.emp-cards { display: none; gap: 10px; }
.emp-card { padding: 12px; display: grid; gap: 8px; }
.emp-card-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.emp-card-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; }
@media (max-width: 820px) {
  .emp-table { display: none; }
  .emp-cards { display: grid; }
}

.disp-status { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  justify-content: flex-start; text-align: left; padding: 12px 14px; margin-bottom: 12px; }
.disp-status .sp { flex: 1; }
.disp-intro { margin: 0 0 10px; color: var(--dim); max-width: 72ch; }
.disp-sec { padding: 14px; margin-bottom: 12px; display: grid; gap: 10px; }
.disp-sec h2 { margin: 0; font-size: 16px; }
.disp-table { overflow-x: auto; border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); }
.disp-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.disp-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--dim); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--edge); vertical-align: bottom; }
.disp-table td { padding: 8px 6px; border-bottom: 1px solid #16223a; vertical-align: top; }
.disp-table th:first-child, .disp-table td:first-child { padding-left: 10px; width: 200px; min-width: 160px; }
.disp-table .disp-lvl { display: inline-grid; justify-items: start; gap: 2px; }
.disp-table .disp-lvl .arr { display: none; }
.disp-table .disp-lvl .muted { font-size: 11px; }
.disp-table th:last-child, .disp-table td:last-child { padding-right: 10px; width: 160px; min-width: 140px; }
.disp-table td:first-child > div { overflow-wrap: break-word; }
.disp-table .world, .disp-card .world { display: grid; gap: 1px; }
.disp-table .world span, .disp-card .world span { font-size: 11.5px; }
.disp-cards { display: none; gap: 10px; }
.disp-keep { overflow-x: auto; border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); }
.disp-keep table { width: 100%; border-collapse: collapse; font-size: 13px; }
.disp-keep th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding: 8px 10px; }
.disp-keep td { padding: 8px 10px; border-bottom: 1px solid #16223a; vertical-align: top; }
.disp-keep .world { display: grid; gap: 1px; }
.disp-keep .world span { font-size: 11.5px; }
.disp-keep-in { width: 72px; padding: 4px 6px; }
.disp-lumen { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.disp-lumen input { width: auto; margin: 0; padding: 0; }
.disp-lumen-note { font-size: 11.5px; margin-top: 3px; max-width: 220px; }
@media (max-width: 700px) {
  .disp-keep th, .disp-keep td { padding: 6px 4px; }
  .disp-keep th { font-size: 10px; letter-spacing: .02em; }
  .disp-keep .disp-lvl { gap: 2px; }
  .disp-keep .disp-lvl .arr { display: none; }
  .disp-keep-in { width: 48px; padding: 4px; }
}
.disp-card { padding: 12px; display: grid; gap: 8px; }
.disp-card-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.disp-lvl { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.disp-lvl .arr { color: #3c5478; }
.disp-lvl.done input { color: var(--ok); }
.disp-in { width: 48px; padding: 4px 5px; }
.disp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.disp-field { display: grid; gap: 4px; font-size: 13px; }
.disp-field input, .disp-field select { width: 100%; }
.disp-check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.disp-picker { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.disp-picker .disp-field { width: 90px; }
.disp-colon { padding-bottom: 8px; font-size: 18px; color: var(--dim); }
.disp-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.disp-time { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: #173a5f; border: 1px solid #2c5f95; font-variant-numeric: tabular-nums; }
.disp-time button { padding: 0 6px; min-width: 0; line-height: 1.4; }
.disp-expo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.disp-expo div { background: #0a1322; border: 1px solid #16223a; border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; }
.disp-expo b { font-size: 18px; font-variant-numeric: tabular-nums; }
.disp-expo span { font-size: 12px; color: var(--dim); }
.disp-expo .ok { color: var(--ok); } .disp-expo .warn { color: var(--warn); } .disp-expo .bad { color: var(--bad); }
.disp-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.disp-sticky { position: sticky; bottom: 0; z-index: 3; justify-content: flex-start;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 70%, transparent); }
.disp-hint { margin: 0; font-size: 13.5px; color: var(--ink); max-width: 80ch; }
.disp-supply { margin-top: 4px; font-size: 12.5px; color: var(--accent); }
.disp-supply.bad { color: var(--bad); }
.disp-sub { margin: 6px 0 0; font-size: 14px; }
.disp-bad { color: var(--bad); }
.disp-review { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.disp-stops { padding: 12px 14px; margin-bottom: 12px; display: grid; gap: 8px; border-color: #6a2323; }
.disp-stop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.disp-log { display: grid; font-size: 13px; }
.disp-log-row { display: grid; grid-template-columns: minmax(120px, auto) 22px 1fr; gap: 8px; padding: 7px 2px; border-bottom: 1px solid #16223a; }
.disp-log-row time { color: var(--dim); font-size: 12px; }
.disp-log-row.lost span:last-child, .disp-log-row.stopped span:last-child { color: var(--bad); }
@media (max-width: 820px) {
  .disp-table { display: none; }
  .disp-cards { display: grid; }
  .disp-expo { grid-template-columns: 1fr; }
  .disp-log-row { grid-template-columns: 1fr; gap: 2px; }
}