:root {
  --bg:#14171c; --panel:#1c2027; --raised:#262b34; --line:#39404c; --text:#e9e6df; --dim:#a3a8b2;
  --accent:#ff9d3c; --good:#6fcf97; --warn:#f2c94c; --bad:#ff7a70;
  --structure:#6b7482; --command:#e8c46a; --propulsion:#ef7d57; --tank:#5aa9c9; --power:#b6d65c;
  --thermal:#d184c4; --habitat:#7fc8a9; --mission:#8f9df0; --defense:#e56b7f;
  --mono:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { background:var(--bg); color:var(--text); font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overscroll-behavior:none; }
#app { height:100dvh; display:flex; flex-direction:column; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
h1,h2,h3,p { margin:0; }
h2 { font-size:20px; } h3 { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin:14px 0 6px; }
button,textarea { font:inherit; color:inherit; }
button { min-height:44px; padding:0 14px; background:var(--raised); border:1px solid var(--line); border-radius:6px; cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--dim); }
button:focus-visible,textarea:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--accent); border-color:var(--accent); color:#1b1206; font-weight:650; }
button.on { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.top { display:flex; align-items:center; gap:8px; padding:6px 12px; border-bottom:1px solid var(--line); background:var(--panel); flex:none; }
.brand { font-weight:750; letter-spacing:.14em; font-size:14px; color:var(--accent); }
.top .spacer { flex:1; } .top .meta { color:var(--dim); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto; } .top button { flex:none; }
@media (max-width:760px) { .top .meta { white-space:normal; line-height:1.2; font-size:12px; text-align:right; } .top { gap:6px; padding:6px 8px; } .top .brand { display:none; } }
.page { flex:1; overflow:auto; padding:16px; } .wrap { max-width:980px; margin:0 auto; }
.lead { color:var(--dim); margin:4px 0 14px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.card .kind { color:var(--accent); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.card .grow { flex:1; }
.facts { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; font-size:13px; margin:0; }
.facts dt { color:var(--dim); } .facts dd { margin:0; font-family:var(--mono); text-align:right; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.tag { font-size:12px; color:var(--warn); }
details { margin-top:16px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 14px; } summary { cursor:pointer; min-height:28px; }
details li { margin:4px 0; }
textarea { width:100%; min-height:90px; background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:8px; font-family:var(--mono); font-size:12px; }

/* Designer */
.design { flex:1; min-height:0; display:grid; grid-template-columns:270px minmax(0,1fr) 310px; }
.side { overflow:auto; padding:10px 12px; background:var(--panel); }
.side.left { border-right:1px solid var(--line); } .side.right { border-left:1px solid var(--line); }
.bench { min-width:0; min-height:0; display:flex; flex-direction:column; position:relative; }
.gridbox { flex:1; min-height:0; display:flex; padding:8px; overflow:auto; touch-action:none; }
.zoom { position:absolute; top:6px; right:6px; z-index:1; display:flex; gap:2px; opacity:.92; }
.zoom button { min-width:38px; min-height:38px; padding:0 6px; font:13px var(--mono); }
#ship { flex:none; margin:auto; touch-action:none; user-select:none; -webkit-user-select:none; }
.tools { display:flex; gap:6px; padding:6px 8px; border-top:1px solid var(--line); overflow-x:auto; flex:none; }
.tools button { flex:none; padding:0 11px; } .tools .primary { margin-left:auto; }
.tabs { display:none; }
.part { display:grid; grid-template-columns:34px 1fr auto; gap:8px; align-items:center; width:100%; text-align:left; padding:4px 8px; margin-bottom:4px; }
.chip { width:34px; height:34px; display:grid; place-items:center; } .icon { display:block; max-width:34px; max-height:34px; width:100%; height:100%; }
.part small { display:block; color:var(--dim); font-size:12px; line-height:1.25; } .part .sz { font:12px var(--mono); color:var(--dim); }
.part .loan { color:var(--accent); }
.detail { grid-column:1 / -1; padding:6px 0 4px; border-top:1px solid var(--line); margin-top:2px; font-size:13px; }
.detail .desc { display:block; margin-bottom:6px; }
.spec { display:grid; grid-template-columns:1fr auto; gap:1px 10px; font-size:12px; }
.spec span:nth-child(odd) { color:var(--dim); } .spec span:nth-child(even) { font-family:var(--mono); text-align:right; }
.spec .wide { grid-column:1 / -1; font-family:inherit; text-align:left; color:var(--warn); }
.overlay { position:fixed; inset:0; z-index:5; background:#0009; display:grid; place-items:center; padding:12px; }
.sheet { width:min(460px,100%); max-height:88dvh; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px; }
.sheet input { flex:1; min-width:0; min-height:44px; padding:0 10px; background:var(--bg); border:1px solid var(--line); border-radius:6px; font:inherit; color:inherit; }
.shiprow { display:flex; gap:6px; align-items:center; padding:6px 0; border-top:1px solid var(--line); }
.shiprow div { flex:1; min-width:0; overflow-wrap:anywhere; } .shiprow small { display:block; color:var(--dim); }
.check { display:grid; grid-template-columns:16px 1fr auto; gap:6px; font-size:13px; padding:2px 0; }
.check b { font-weight:400; font-family:var(--mono); text-align:right; }
.ok { color:var(--good); } .no { color:var(--bad); } .mid { color:var(--warn); }
.info { background:var(--raised); padding:8px 10px; border-radius:6px; font-size:13px; margin-bottom:8px; }
.obj { font-size:13px; padding:3px 0; }

/* Results */
.result { display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:16px; }
.scene { position:relative; background:radial-gradient(ellipse at 50% 40%,#0d1530,#03050b 70%); border:1px solid var(--line); border-radius:8px; overflow:hidden; align-self:start; }
.scene canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.scene .fx { z-index:2; } #rship { position:relative; z-index:1; padding:44px 22% 70px; }
.result svg { display:block; width:100%; max-height:52dvh; }
.log { font-size:14px; } .log div { padding:3px 0; border-bottom:1px solid var(--raised); }
.log span { color:var(--dim); font:12px var(--mono); margin-right:8px; }
.log .good { color:var(--good); } .log .bad { color:var(--bad); } .log .warn { color:var(--warn); }
.burnt { opacity:.16; transition:opacity .3s; }

@media (max-width:1000px) and (min-width:761px) { .design { grid-template-columns:230px minmax(0,1fr) 260px; } }
@media (max-width:760px) {
  .design { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto 30dvh; }
  .side { display:none; border:0 !important; border-top:1px solid var(--line) !important; grid-row:3; }
  .side.show { display:block; }
  .bench { grid-row:1; }
  .tabs { display:flex; grid-row:2; border-top:1px solid var(--line); }
  .tabs button { flex:1; border:0; border-radius:0; background:var(--panel); }
  .tabs button.on { box-shadow:inset 0 -2px 0 var(--accent); }
  .gridbox { padding:4px; }
  .result { grid-template-columns:1fr; } .result svg { max-height:30dvh; } #rship { padding:36px 18% 56px; }
  .top .hide-sm { display:none; }
}
@media (prefers-reduced-motion:reduce) { .burnt { transition:none; } }
.log .info { background:none; margin:0; padding:3px 0; border-radius:0; font-size:14px; }
@media (max-width:760px) { .tools { gap:4px; padding:6px; overflow:visible; } .tools button { flex:1 1 0; min-width:0; padding:0 2px; font-size:13px; } .tools .primary { margin-left:0; } }
.map { margin:8px 0 0; } .mapsvg { display:block; width:100%; height:auto; background:var(--bg); border:1px solid var(--line); border-radius:6px; }
.map figcaption { font-size:12px; margin-top:6px; } .map figcaption div { display:grid; grid-template-columns:22px 1fr auto; gap:6px; align-items:center; }
.map figcaption b { font:12px var(--mono); } .map figcaption p { color:var(--dim); margin-top:4px; }
.key { display:block; height:0; border-top:2px solid var(--accent); } .key.back { border-top:2px dashed var(--good); } .key.none { border-top:2px dotted var(--dim); } .key.stay { width:9px; height:9px; border:0; background:var(--accent); transform:rotate(45deg); margin-left:6px; }

/* Campaign */
.modes { display:flex; gap:4px; margin:4px 0 12px; }
.modes button { flex:none; padding:0 16px; }
.modes button.on { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.shipview { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:8px; margin:6px 0; }
.shipview svg { display:block; width:100%; max-height:220px; }
.pick { display:flex; align-items:center; gap:8px; margin:8px 0 0; font-size:14px; color:var(--dim); }
.pick select { flex:1; min-height:40px; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:0 8px; font:inherit; }