/* Full Thrust Fleet Manager: Layout C (docs/mockups/layout-c-dockyard-fleet.html).
   IBM Plex Sans is vendored in static/fonts/ (OFL, licence alongside); the same TTFs serve the
   PDF. The web build inlines this file into every page and rewrites url(fonts/...) to
   static/fonts/ (web/index.html renderPage). */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; src: url("fonts/IBMPlexSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; src: url("fonts/IBMPlexSans-Italic.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; src: url("fonts/IBMPlexSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; src: url("fonts/IBMPlexSans-Bold.ttf") format("truetype"); }

:root {
  --bg: #eef1f5; --panel: #ffffff; --panel-2: #f6f8fb; --ink: #17202c; --muted: #5d6b7c;
  --line: #d6dde6; --accent: #1f5fa8; --accent-soft: #e3edf9; --ok: #237a4b; --ok-soft: #e2f3ea;
  --warn: #9a5b00; --warn-soft: #fcf0dc; --bad: #b3261e; --bad-soft: #fbe6e4;
  --chrome: #101826; --chrome-ink: #e8eef7; --chrome-muted: #93a3b8;
  /* Status colours (PLAN 9): ready green, damaged amber, docked blue, lost grey. */
  --st-ready: #237a4b; --st-damaged: #d98a00; --st-docked: #1f5fa8; --st-lost: #9aa6b4;
  /* Ruleset accents (PLAN 9.2). */
  --rs-ft2: #d98a00; --rs-fb: #1f5fa8; --rs-ftcd: #237a4b; --rs-ftpc: #6b3fa0;
  --rs-current: #2d3b52;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink);
  font: 14px/1.45 "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
a { color: var(--accent); }

/* ---- Top bar ---- */
/* Sticky, not fixed: it keeps its place in the flow, so nothing below starts hidden under it.
   The z-index keeps it above SSD and record-sheet SVGs as they scroll past. */
.topbar { background: var(--chrome); color: var(--chrome-ink); position: sticky; top: 0; z-index: 10; }
/* On a short window the bar (which wraps onto several rows when narrow) would eat the page. */
@media (max-height: 520px), print { .topbar { position: static; } }
.ruleset-strip { height: 3px; background: var(--rs-current); }
.topbar-row { display: flex; align-items: center; gap: 14px; padding: 10px 16px; flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: .3px; white-space: nowrap; color: var(--chrome-ink); text-decoration: none; }
.brand small { color: var(--chrome-muted); font-weight: 400; margin-left: 6px; }
.chrome-field { --chrome-field: #1c2738; position: relative; display: inline-flex; align-items: center;
  background: var(--chrome-field); border: 1px solid #2d3b52; color: var(--chrome-ink); border-radius: 6px;
  white-space: nowrap; max-width: 100%; }
/* The select fills the field and takes its colours; the field draws the arrow so it reads on dark chrome. */
.chrome-field select { appearance: none; -webkit-appearance: none; background: transparent; color: inherit;
  border: 0; border-radius: inherit; font: inherit; font-size: 13.5px; padding: 6px 28px 6px 10px; cursor: pointer;
  max-width: 100%; text-overflow: ellipsis; }
.chrome-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chrome-field select option { background: var(--chrome-field); color: var(--chrome-ink); }
.chrome-field::after { content: "\25BE"; position: absolute; right: 10px; pointer-events: none; color: var(--chrome-muted); }
.chrome-field form { display: contents; }
.fleet-select select { min-width: 200px; max-width: 280px; }
.fleet-select .muted-chrome { padding: 6px 10px; }
.fleet-select:has(.muted-chrome)::after { content: none; }
.muted-chrome { color: var(--chrome-muted); }
.tabs { display: flex; gap: 2px; }
.tabs a { padding: 6px 13px; border-radius: 6px; color: var(--chrome-muted); text-decoration: none;
  white-space: nowrap; font-size: 13.5px; }
.tabs a:hover { color: #fff; }
.tabs a.on { background: #23324a; color: #fff; font-weight: 600; }
.spacer { flex: 1; }
.topbar-end { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.meter { min-width: 160px; }
.meter .lbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--chrome-muted); }
.meter .lbl b { color: var(--chrome-ink); }
.bar { height: 7px; border-radius: 4px; background: #2a3950; overflow: hidden; margin-top: 3px; }
.bar > i { display: block; height: 100%; background: #4f9be8; }

/* ---- Controls ---- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); border-radius: 6px; padding: 6px 12px; font: inherit; cursor: pointer; white-space: nowrap; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 3px 8px; font-size: 12px; }
.input { border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; background: #fff; font: inherit; min-width: 0; }
.chip { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 10px; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chip.ok { background: var(--ok-soft); border-color: #bfe3cf; color: var(--ok); }
.chip.warn { background: var(--warn-soft); border-color: #f0d6a8; color: var(--warn); }
.chip.bad { background: var(--bad-soft); border-color: #f1c3be; color: var(--bad); }
.chip.info { background: var(--accent-soft); border-color: #c4d8f1; color: var(--accent); }
a.chip { text-decoration: none; }
a.chip:hover { text-decoration: underline; }
.muted { color: var(--muted); }

/* ---- Flash messages ---- */
.flashes { list-style: none; margin: 12px 12px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.flash { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); }
.flash.success { background: var(--ok-soft); border-color: #bfe3cf; color: var(--ok); }
.flash.error { background: var(--bad-soft); border-color: #f1c3be; color: var(--bad); }

/* ---- Work area: left pane, centre, right pane ---- */
.work { display: grid; gap: 12px; padding: 12px; }
.work.cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 1100px; }
.work.cols-2 { grid-template-columns: 250px minmax(0, 1fr); }
.work.cols-3 { grid-template-columns: 250px minmax(0, 1fr) 330px; }
.main-col, .side-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.panel h3 { margin: 0; padding: 10px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.panel h3.sep { border-top: 1px solid var(--line); }
/* Foldable left-pane sections (static/collapse.js) */
.panel h3.fold { cursor: pointer; user-select: none; }
.panel h3.fold::after { content: "\25BE"; font-size: 11px; }
.panel h3.fold:hover, .panel h3.fold:focus-visible { color: var(--ink); }
.panel h3.fold[aria-expanded="false"] { border-bottom: 0; }
.panel h3.fold[aria-expanded="false"]::after { content: "\25B8"; }
.panel h3.fold[aria-expanded="false"] + .body { display: none; }
.panel .body, .panel.body { padding: 12px 14px; }
.panel.head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; }
.panel.head h2 { margin: 0; font-size: 19px; }
.panel.empty { padding: 28px 14px; text-align: center; color: var(--muted); }

/* Design tab workbench (PLAN 9.4) */
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.system-picker .system-filter { width: 9rem; }
.stack { display: flex; flex-direction: column; gap: 8px; }
label.field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.grow { flex: 1; }
.workbench { display: flex; flex-direction: column; gap: 12px; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #fff;
  background: var(--rs-current); border-radius: 4px; padding: 2px 7px; }
.badge.rs-fb { background: var(--rs-fb); }
.badge.rs-ft2 { background: var(--rs-ft2); }
.badge.rs-ftcd { background: var(--rs-ftcd); }
.badge.rs-ftpc { background: var(--rs-ftpc); }
.lib .body { padding: 10px 12px; }
.lib-group { margin-bottom: 8px; }
.lib-group summary { cursor: pointer; font-size: 12px; font-weight: 600; }
.lib-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.lib-list a { color: var(--ink); text-decoration: none; }
.lib-list a:hover { text-decoration: underline; }
.lib-list a.on { font-weight: 700; color: var(--accent); }
.lib-list .lib-faction { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
.grid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.grid-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.grid-fields .field-group { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.faction-picker { gap: 4px; }
.faction-picker label.check { font-size: 12px; }
.grid-fields label.check, label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 6px 10px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.arcs { display: flex; gap: 6px; flex-wrap: wrap; }
/* Cross Dimensions loadout: one fieldset per hangar or magazine, one row per fighter group. */
.loadout-group { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px 8px; margin: 0;
  display: flex; flex-direction: column; gap: 6px; }
.loadout-group legend { font-size: 12px; font-weight: 600; padding: 0 4px; }
.loadout-group legend .muted { font-weight: 400; margin-left: 6px; }
.loadout-row { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.loadout-row > label:not(.check) { display: flex; align-items: center; gap: 6px; }
.loadout-row .swing summary { cursor: pointer; color: var(--muted); }
.loadout-row .swing[open] { flex-basis: 100%; }
.loadout-row .swing .row { margin-top: 4px; }
/* Add ship: the Selected factions checklist opens as a small popover over the panel. */
.ship-list-filter { align-items: center; }
.popover { position: relative; }
.popover > summary { list-style: none; cursor: pointer; }
.popover > summary::-webkit-details-marker { display: none; }
.popover-body { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: max-content; max-width: min(380px, 90vw);
  max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.arc, .param { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
/* The aft arcs start a little apart from the fore ones. */
.arc.aft { margin-left: 8px; }
.input.sm { padding: 2px 5px; width: 62px; font-size: 12px; }
.input.sm.name { width: 140px; }
/* An open-ended setting's write-in field, shown once its dropdown says "More". */
.param .more { display: none; }
.param:has(option[value="more"]:checked) .more { display: inline-block; }
.input.wide { width: 100%; }
.meter.light .lbl { color: var(--muted); }
.meter.light .lbl b { color: var(--ink); }
.meter.light .bar { background: var(--panel-2); border: 1px solid var(--line); }
.meter.light .bar > i { background: var(--accent); }
.ssd-wrap svg { width: 100%; height: auto; background: #fff; }
.issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.issues li { border-left: 3px solid var(--accent); padding-left: 8px; }
.issues li.violation { border-color: var(--bad); color: var(--bad); }
.notice { margin: 0; padding: 8px 12px; border-radius: 6px; background: var(--warn-soft);
  border: 1px solid #f0d6a8; color: var(--warn); font-size: 13px; }

/* Fleet overview (PLAN 9.3) */
.ruleset-strip.rs-fb { background: var(--rs-fb); }
.ruleset-strip.rs-ft2 { background: var(--rs-ft2); }
.ruleset-strip.rs-ftcd { background: var(--rs-ftcd); }
.ruleset-strip.rs-ftpc { background: var(--rs-ftpc); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.views { display: flex; gap: 4px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.tile b { font-size: 21px; }
.tile .bar { background: var(--panel-2); border: 1px solid var(--line); }
.tile .bar > i { background: var(--accent); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex;
  flex-direction: column; gap: 6px; background: var(--panel-2); font-size: 13px; }
.card header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card .mini svg { width: 100%; height: auto; max-height: 220px; background: #fff; }
.card.st-destroyed, tr.st-destroyed { opacity: .55; }
.chip.st-ready { background: var(--ok-soft); color: var(--ok); }
.chip.st-damaged { background: var(--warn-soft); color: var(--warn); }
.chip.st-docked { background: var(--accent-soft); color: var(--accent); }
.chip.st-hulk, .chip.st-destroyed { background: var(--panel-2); color: var(--muted); }
.sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.sheet { margin: 0; }
.sheet figcaption { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.sheet svg { width: 100%; height: auto; background: #fff; }
.options { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; display: flex;
  gap: 14px; flex-wrap: wrap; }
.options legend { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

/* Below ~1100 px the panes stack (PLAN 9.7). */
@media (max-width: 1100px) {
  .work.cols-2, .work.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .meter { min-width: 140px; }
}

/* Campaign tab (PLAN 9.5) */
.ship-grid { display: grid; grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); gap: 16px; }
.campaign-ship h3 { display: flex; align-items: center; gap: 8px; }
.ssd-click [data-ref] { cursor: pointer; }
.ssd-click [data-ref]:hover { opacity: .55; }
.repair { border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 800px) { .ship-grid { grid-template-columns: minmax(0, 1fr); } }

/* Rulebook viewer (PLAN 12) */
.viewer { padding: 0; overflow: hidden; }
.viewer iframe { width: 100%; height: 78vh; border: 0; display: block; }

/* A field the rules compute rather than the player setting it (a Sa'Vasku thrust rating, which
   is bought with power each turn): reads like an input, but is not one. */
.input.static { display: block; background: var(--panel-2, #f3f4f6); color: var(--muted, #555); }

/* ---- Appearance (Settings): eight looks, keyed on <html data-theme> (store.THEMES; Admiralty
   is the default). The unscoped rules above are their shared base and are not offered as a
   look of their own; each block below redefines the variables and restyles colour, type and
   borders only. Ship diagrams stay black ink on a light ground in every theme, and the
   ruleset and status colours keep their meaning. ---- */

/* Bridge: a dark tactical console. */
:root[data-theme="bridge"] { --bg: #0b111b; --panel: #121b29; --panel-2: #0f1724; --ink: #dce6f2; --muted: #8597ad; --line: #22324a; --accent: #4fb3ff; --accent-soft: #10263d; --ok: #4fd18b; --ok-soft: #0f2a1f; --warn: #ffb547; --warn-soft: #2e2210; --bad: #ff6b5e; --bad-soft: #321614; --chrome: #070b12; --chrome-ink: #e8f1fb; --chrome-muted: #7f93ab; --st-ready: #4fd18b; --st-damaged: #ffb547; --st-docked: #4fb3ff; --st-lost: #5d6b7c; --rs-ft2: #ffb547; --rs-fb: #4fb3ff; --rs-ftcd: #4fd18b; --rs-ftpc: #b48cff; --rs-current: #2a3a55; }
[data-theme="bridge"] body { background: radial-gradient(1200px 600px at 70% -10%, #13233b 0%, transparent 60%), var(--bg); background-attachment: fixed; }
[data-theme="bridge"] .topbar { background: linear-gradient(180deg, #0c1420, #070b12); border-bottom: 1px solid #1d2b40; box-shadow: 0 4px 18px rgba(0,0,0,.45); }
[data-theme="bridge"] .ruleset-strip { height: 2px; }
[data-theme="bridge"] .ruleset-strip.rs-fb { box-shadow: 0 0 12px var(--rs-fb); }
[data-theme="bridge"] .ruleset-strip.rs-ft2 { box-shadow: 0 0 12px var(--rs-ft2); }
[data-theme="bridge"] .ruleset-strip.rs-ftcd { box-shadow: 0 0 12px var(--rs-ftcd); }
[data-theme="bridge"] .ruleset-strip.rs-ftpc { box-shadow: 0 0 12px var(--rs-ftpc); }
[data-theme="bridge"] .brand { text-transform: uppercase; letter-spacing: 2.5px; font-size: 13px; }
[data-theme="bridge"] .brand small { color: var(--accent); letter-spacing: 1px; }
[data-theme="bridge"] .chrome-field { --chrome-field: #0e1726; border-color: #22324a; }
[data-theme="bridge"] .tabs a { font-weight: 600; border-radius: 3px; }
[data-theme="bridge"] .tabs a.on { background: transparent; color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
[data-theme="bridge"] .bar { background: #16233a; border-radius: 1px; }
[data-theme="bridge"] .bar > i { background: linear-gradient(90deg, #2a7fd4, #4fb3ff); box-shadow: 0 0 8px rgba(79,179,255,.7); }
[data-theme="bridge"] .panel, [data-theme="bridge"] .tile { border-radius: 4px; border-color: var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
[data-theme="bridge"] .panel h3 { color: var(--accent); letter-spacing: 1.6px; font-size: 11px; background: linear-gradient(90deg, rgba(79,179,255,.08), transparent 60%); }
[data-theme="bridge"] .panel.head { border-left: 3px solid var(--accent); }
[data-theme="bridge"] .tile b { color: #fff; font-variant-numeric: tabular-nums; }
[data-theme="bridge"] .btn { background: #16223a; border-color: #2a3c58; color: var(--ink); border-radius: 3px; }
[data-theme="bridge"] .btn:hover { border-color: var(--accent); }
[data-theme="bridge"] .btn.primary { background: var(--accent); border-color: var(--accent); color: #04121f; box-shadow: 0 0 14px rgba(79,179,255,.35); }
[data-theme="bridge"] .input, [data-theme="bridge"] select.input { background: #0a1220; color: var(--ink); border-color: #263852; border-radius: 3px; }
[data-theme="bridge"] .input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
[data-theme="bridge"] .input.static { background: #0f1724; }
[data-theme="bridge"] .chip { border-radius: 2px; }
[data-theme="bridge"] .chip.ok, [data-theme="bridge"] .chip.st-ready { background: var(--ok-soft); border-color: #1d5a3c; color: var(--ok); }
[data-theme="bridge"] .chip.warn, [data-theme="bridge"] .chip.st-damaged { background: var(--warn-soft); border-color: #6a4a12; color: var(--warn); }
[data-theme="bridge"] .chip.bad { background: var(--bad-soft); border-color: #6b2620; color: var(--bad); }
[data-theme="bridge"] .chip.info, [data-theme="bridge"] .chip.st-docked { background: var(--accent-soft); border-color: #1f4a72; color: var(--accent); }
[data-theme="bridge"] .badge { border-radius: 2px; color: #04121f; }
[data-theme="bridge"] .card { background: var(--panel-2); border-radius: 4px; }
[data-theme="bridge"] .card header b, [data-theme="bridge"] .card header strong { color: #fff; }
[data-theme="bridge"] .card .mini svg, [data-theme="bridge"] .ssd-wrap svg, [data-theme="bridge"] .sheet svg { background: #e9f1fa; border-radius: 3px; box-shadow: 0 0 0 1px #2a3c58, 0 0 18px rgba(79,179,255,.12); }
[data-theme="bridge"] .tbl th { color: var(--accent); }
[data-theme="bridge"] .tbl td { border-color: #1b2940; }
[data-theme="bridge"] .tbl tr:hover td { background: rgba(79,179,255,.04); }
[data-theme="bridge"] a { color: var(--accent); }
[data-theme="bridge"] .lib-list a { color: var(--ink); }
[data-theme="bridge"] .notice { background: var(--warn-soft); border-color: #6a4a12; }
[data-theme="bridge"] .flash.success { border-color: #1d5a3c; }
[data-theme="bridge"] .flash.error { border-color: #6b2620; }
[data-theme="bridge"] input[type=checkbox] { accent-color: var(--accent); }

/* Admiralty: a warm printed-wargame look, oxblood and brass. Georgia is a system serif; the
   stack falls back to Times and then any serif, so nothing is fetched. */
:root[data-theme="admiralty"] { --bg: #ece5d6; --panel: #fbf8f1; --panel-2: #f4eee2; --ink: #221c17; --muted: #6b5f51; --line: #d8ccb6; --accent: #8c2320; --accent-soft: #f4e2dc; --ok: #3d6b33; --ok-soft: #e5eedb; --warn: #9a6512; --warn-soft: #f7ead0; --bad: #a32a1f; --bad-soft: #f6dfda; --chrome: #231b17; --chrome-ink: #f3e9d6; --chrome-muted: #b9a585; --st-ready: #3d6b33; --st-damaged: #c48a1f; --st-docked: #2f4f7a; --st-lost: #a79c8c; --rs-ft2: #c48a1f; --rs-fb: #2f4f7a; --rs-ftcd: #3d6b33; --rs-ftpc: #6b3f7a; --rs-current: #4a3d33; --brass: #c9a25a; }
[data-theme="admiralty"] body { background: var(--bg); }
[data-theme="admiralty"] h2, [data-theme="admiralty"] .panel.head h2, [data-theme="admiralty"] .tile b { font-family: Georgia, "Times New Roman", serif; }
[data-theme="admiralty"] .topbar { background: linear-gradient(180deg, #2b211c, #1d1613); border-bottom: 2px solid var(--brass); }
[data-theme="admiralty"] .ruleset-strip { height: 4px; }
[data-theme="admiralty"] .brand { font-family: Georgia, serif; font-size: 17px; letter-spacing: .5px; color: #f3e9d6; }
[data-theme="admiralty"] .brand small { color: var(--brass); font-family: "IBM Plex Sans", sans-serif; }
[data-theme="admiralty"] .chrome-field { --chrome-field: #31261f; border-color: #4a3b30; }
[data-theme="admiralty"] .tabs a { color: var(--chrome-muted); }
[data-theme="admiralty"] .tabs a.on { background: var(--brass); color: #231b17; border-radius: 3px; }
[data-theme="admiralty"] .tabs a:hover { color: #fff3dc; }
[data-theme="admiralty"] .bar { background: #3a2d25; }
[data-theme="admiralty"] .bar > i { background: var(--brass); }
[data-theme="admiralty"] .btn { border-radius: 3px; background: var(--panel); border-color: #cbbb9f; }
[data-theme="admiralty"] .btn.primary { background: var(--accent); border-color: #6e1714; color: #fff6ea; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
[data-theme="admiralty"] .topbar .btn.primary { background: var(--brass); border-color: var(--brass); color: #231b17; }
[data-theme="admiralty"] .panel, [data-theme="admiralty"] .tile { border-radius: 2px; border-color: var(--line); box-shadow: 0 1px 0 rgba(60,40,20,.08); }
[data-theme="admiralty"] .panel h3 { color: var(--accent); border-bottom: 2px solid var(--accent); font-weight: 700; letter-spacing: 1.4px; }
[data-theme="admiralty"] .panel.head { border-top: 4px double var(--accent); }
[data-theme="admiralty"] .panel.head h2 { font-size: 22px; }
[data-theme="admiralty"] .tile { border-top: 3px solid var(--brass); }
[data-theme="admiralty"] .tile b { font-size: 24px; }
[data-theme="admiralty"] .input { background: #fffdf8; border-color: #cbbb9f; border-radius: 2px; }
[data-theme="admiralty"] .input:focus { outline: 2px solid rgba(140,35,32,.25); border-color: var(--accent); }
[data-theme="admiralty"] .chip { border-radius: 2px; letter-spacing: .3px; }
[data-theme="admiralty"] .chip.ok, [data-theme="admiralty"] .chip.st-ready { border-color: #bdd1b0; }
[data-theme="admiralty"] .chip.warn, [data-theme="admiralty"] .chip.st-damaged { border-color: #e6cc99; }
[data-theme="admiralty"] .chip.info, [data-theme="admiralty"] .chip.st-docked { background: #e3e9f1; border-color: #bccbe0; color: #2f4f7a; }
[data-theme="admiralty"] .badge { border-radius: 2px; }
[data-theme="admiralty"] .card { background: var(--panel); border-color: var(--line); border-radius: 2px; box-shadow: 2px 2px 0 rgba(60,40,20,.08); }
[data-theme="admiralty"] .card .mini svg, [data-theme="admiralty"] .ssd-wrap svg, [data-theme="admiralty"] .sheet svg { background: #fffdf8; border: 1px solid #e3d8c3; }
[data-theme="admiralty"] .tbl th { color: var(--accent); }
[data-theme="admiralty"] .tbl tr:nth-child(even) td { background: rgba(201,162,90,.07); }
[data-theme="admiralty"] .lib-list a.on { color: var(--accent); }
[data-theme="admiralty"] input[type=checkbox] { accent-color: var(--accent); }

/* Carbon Armor: graphite plating over a carbon-weave ground, hazard-amber accent, hard edges. */
:root[data-theme="carbon-armor"] { --bg: #121314; --panel: #1c1d1f; --panel-2: #17181a; --ink: #e6e3dd; --muted: #9a958c; --line: #303134; --accent: #f29a2e; --accent-soft: #33240f; --ok: #6cc785; --ok-soft: #182a1e; --warn: #f2c14e; --warn-soft: #2f2812; --bad: #f0675a; --bad-soft: #351b18; --chrome: #0b0b0c; --chrome-ink: #f1eee8; --chrome-muted: #8d887f; --st-ready: #6cc785; --st-damaged: #f2c14e; --st-docked: #6aa6e8; --st-lost: #66625c; --rs-ft2: #e0a23c; --rs-fb: #4f8fe0; --rs-ftcd: #4fae74; --rs-ftpc: #a07ad6; --rs-current: #3a3b3e; color-scheme: dark; }
[data-theme="carbon-armor"] body { background: repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 2px, transparent 2px 6px), var(--bg); }
[data-theme="carbon-armor"] .topbar { background: linear-gradient(180deg, #1b1c1e, #0b0b0c); border-bottom: 2px solid var(--accent); }
[data-theme="carbon-armor"] .brand { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; }
[data-theme="carbon-armor"] .brand small { color: var(--accent); }
[data-theme="carbon-armor"] .chrome-field { --chrome-field: #161719; border-color: #303134; }
[data-theme="carbon-armor"] .tabs a { font-weight: 600; border-radius: 0; }
[data-theme="carbon-armor"] .tabs a.on { background: #26272a; color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
[data-theme="carbon-armor"] .bar { background: #26272a; border-radius: 0; }
[data-theme="carbon-armor"] .bar > i { background: repeating-linear-gradient(-45deg, var(--accent) 0 6px, #c97a1c 6px 12px); }
[data-theme="carbon-armor"] .panel, [data-theme="carbon-armor"] .tile, [data-theme="carbon-armor"] .card { border-radius: 0; border-color: var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 0 rgba(0,0,0,.4); }
[data-theme="carbon-armor"] .panel h3 { color: var(--accent); letter-spacing: 1.4px; background: linear-gradient(180deg, #222326, #1c1d1f); }
[data-theme="carbon-armor"] .panel.head { border-left: 4px solid var(--accent); }
[data-theme="carbon-armor"] .tile b { color: #fff; }
[data-theme="carbon-armor"] .btn { background: #26272a; border-color: #3a3b3f; color: var(--ink); border-radius: 0; }
[data-theme="carbon-armor"] .btn:hover { border-color: var(--accent); }
[data-theme="carbon-armor"] .btn.primary { background: var(--accent); border-color: var(--accent); color: #1a1004; }
[data-theme="carbon-armor"] .input { background: #141517; color: var(--ink); border-color: #3a3b3f; border-radius: 0; }
[data-theme="carbon-armor"] .input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
[data-theme="carbon-armor"] .chip, [data-theme="carbon-armor"] .badge { border-radius: 0; }
[data-theme="carbon-armor"] .chip.ok, [data-theme="carbon-armor"] .chip.st-ready { border-color: #2d5a3a; }
[data-theme="carbon-armor"] .chip.warn, [data-theme="carbon-armor"] .chip.st-damaged { border-color: #6a5418; }
[data-theme="carbon-armor"] .chip.bad { border-color: #6b2a24; }
[data-theme="carbon-armor"] .chip.info, [data-theme="carbon-armor"] .chip.st-docked { background: #172333; border-color: #2c4566; color: #6aa6e8; }
[data-theme="carbon-armor"] .tbl th { color: var(--accent); }
[data-theme="carbon-armor"] .notice { border-color: #6a5418; }
[data-theme="carbon-armor"] .card .mini svg, [data-theme="carbon-armor"] .ssd-wrap svg, [data-theme="carbon-armor"] .sheet svg { background: #ecebe7; box-shadow: 0 0 0 1px #3a3b3f; }
[data-theme="carbon-armor"] input[type=checkbox] { accent-color: var(--accent); }

/* Night Sky: deep indigo with a faint starfield, starlight-gold accent, soft rounded panels. */
:root[data-theme="night-sky"] { --bg: #0c0f24; --panel: #151a36; --panel-2: #11152d; --ink: #e8e9f5; --muted: #9da3c7; --line: #283058; --accent: #f2c96d; --accent-soft: #2e2a2a; --ok: #7fd6a4; --ok-soft: #15302a; --warn: #f2b36d; --warn-soft: #33281f; --bad: #f2837a; --bad-soft: #36202a; --chrome: #080a1a; --chrome-ink: #eef0fb; --chrome-muted: #8f95bd; --st-ready: #7fd6a4; --st-damaged: #f2b36d; --st-docked: #9cb6ff; --st-lost: #5f6590; --rs-ft2: #f2b36d; --rs-fb: #8aa8ff; --rs-ftcd: #6fcf99; --rs-ftpc: #c49cff; --rs-current: #2b3260; --lavender: #b9b4ff; color-scheme: dark; }
[data-theme="night-sky"] body { background: radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 140px 90px, rgba(255,255,255,.35), transparent), radial-gradient(1.5px 1.5px at 260px 170px, rgba(255,255,255,.45), transparent), radial-gradient(1px 1px at 330px 40px, rgba(242,201,109,.5), transparent), radial-gradient(1px 1px at 90px 230px, rgba(255,255,255,.3), transparent), radial-gradient(900px 500px at 85% -10%, #1d2457 0%, transparent 70%), var(--bg); background-size: 360px 260px, 360px 260px, 360px 260px, 360px 260px, 360px 260px, auto, auto; background-attachment: fixed; }
[data-theme="night-sky"] .topbar { background: linear-gradient(180deg, #121637, #080a1a); border-bottom: 1px solid #252c55; }
[data-theme="night-sky"] .brand small { color: var(--accent); }
[data-theme="night-sky"] .chrome-field { --chrome-field: #11152d; border-color: #283058; }
[data-theme="night-sky"] .tabs a { border-radius: 999px; }
[data-theme="night-sky"] .tabs a.on { background: rgba(185,180,255,.16); color: #fff; }
[data-theme="night-sky"] .bar { background: #20264a; border-radius: 999px; }
[data-theme="night-sky"] .bar > i { background: linear-gradient(90deg, var(--lavender), var(--accent)); }
[data-theme="night-sky"] .panel, [data-theme="night-sky"] .tile, [data-theme="night-sky"] .card { border-radius: 12px; border-color: var(--line); background-color: rgba(21,26,54,.92); }
[data-theme="night-sky"] .card { background-color: rgba(17,21,45,.92); }
[data-theme="night-sky"] .panel h3 { color: var(--lavender); }
[data-theme="night-sky"] .tile b { color: #fff; }
[data-theme="night-sky"] .btn { background: #1d2346; border-color: #313a6a; color: var(--ink); border-radius: 999px; }
[data-theme="night-sky"] .btn:hover { border-color: var(--lavender); }
[data-theme="night-sky"] .btn.primary { background: var(--accent); border-color: var(--accent); color: #1a1530; }
[data-theme="night-sky"] .input { background: #0f1329; color: var(--ink); border-color: #313a6a; border-radius: 8px; }
[data-theme="night-sky"] .input:focus { outline: 2px solid rgba(185,180,255,.35); border-color: var(--lavender); }
[data-theme="night-sky"] .chip.ok, [data-theme="night-sky"] .chip.st-ready { border-color: #2c5a48; }
[data-theme="night-sky"] .chip.warn, [data-theme="night-sky"] .chip.st-damaged { border-color: #6a4f2c; }
[data-theme="night-sky"] .chip.bad { border-color: #6b3040; }
[data-theme="night-sky"] .chip.info, [data-theme="night-sky"] .chip.st-docked { background: #1e2550; border-color: #39448a; color: #9cb6ff; }
[data-theme="night-sky"] a, [data-theme="night-sky"] .lib-list a.on { color: var(--lavender); }
[data-theme="night-sky"] .tbl th { color: var(--lavender); }
[data-theme="night-sky"] .notice { border-color: #6a4f2c; }
[data-theme="night-sky"] .card .mini svg, [data-theme="night-sky"] .ssd-wrap svg, [data-theme="night-sky"] .sheet svg { background: #eef0fa; border-radius: 8px; }
[data-theme="night-sky"] input[type=checkbox] { accent-color: var(--lavender); }

/* Lunar: pale full-moon greys, silvery panels with a soft moonglow and faint mare shadows, and a deep teal accent. */
:root[data-theme="lunar"] { --bg: #d6d8db; --panel: #eceded; --panel-2: #e2e4e6; --ink: #1d2126; --muted: #535961; --line: #c4c8cd; --accent: #0e6f7e; --accent-soft: #dcf0f2; --ok: #256b42; --ok-soft: #e1f2e7; --warn: #875500; --warn-soft: #fbefd9; --bad: #b3261e; --bad-soft: #fbe6e4; --chrome: #e6e7e9; --chrome-ink: #1d2126; --chrome-muted: #5d636b; --st-ready: #2b7a4b; --st-damaged: #d98a00; --st-docked: #0e6f7e; --st-lost: #9aa1ab; --rs-ft2: #d98a00; --rs-fb: #2c64b0; --rs-ftcd: #2b7a4b; --rs-ftpc: #6b3fa0; --rs-current: #b7bdc6; }
[data-theme="lunar"] body { background: radial-gradient(900px 900px at 100% -10%, rgba(255,255,252,.85) 0%, rgba(240,241,240,.4) 35%, transparent 65%), radial-gradient(260px 200px at 18% 70%, rgba(150,155,162,.12) 0%, transparent 70%), radial-gradient(180px 150px at 62% 88%, rgba(150,155,162,.10) 0%, transparent 70%), radial-gradient(220px 170px at 40% 30%, rgba(150,155,162,.08) 0%, transparent 70%), var(--bg); background-attachment: fixed; }
[data-theme="lunar"] .topbar { border-bottom: 1px solid var(--line); box-shadow: 0 1px 8px rgba(30,40,55,.06); }
[data-theme="lunar"] .brand { letter-spacing: 1.5px; text-transform: uppercase; font-size: 13px; }
[data-theme="lunar"] .brand small { color: var(--accent); }
[data-theme="lunar"] .chrome-field { --chrome-field: var(--panel-2); border-color: var(--line); }
[data-theme="lunar"] .tabs a:hover { color: var(--ink); }
[data-theme="lunar"] .tabs a.on { background: var(--accent-soft); color: var(--accent); }
[data-theme="lunar"] .bar { background: #e1e4e8; }
[data-theme="lunar"] .bar > i { background: var(--accent); }
[data-theme="lunar"] .panel, [data-theme="lunar"] .tile { border-radius: 10px; box-shadow: 0 1px 2px rgba(30,40,55,.05); }
[data-theme="lunar"] .panel h3 { color: var(--accent); }
[data-theme="lunar"] .btn { border-radius: 8px; }
[data-theme="lunar"] .btn.primary { background: var(--accent); border-color: var(--accent); }
[data-theme="lunar"] .input { border-radius: 8px; background: #f7f7f6; }
[data-theme="lunar"] .input:focus { outline: 2px solid rgba(14,111,126,.25); border-color: var(--accent); }
[data-theme="lunar"] .chip.info, [data-theme="lunar"] .chip.st-docked { border-color: #a9d8de; }
[data-theme="lunar"] .lib-list a.on { color: var(--accent); }
[data-theme="lunar"] input[type=checkbox] { accent-color: var(--accent); }

/* Nebula: the colourful one. Violet space with magenta and teal gas clouds, hot-pink and teal
   accents; panels stay dark enough that text and the diagrams read cleanly. */
:root[data-theme="nebula"] { --bg: #170b2e; --panel: #23123f; --panel-2: #1d0f36; --ink: #f4ecff; --muted: #b9a6d9; --line: #3d2766; --accent: #ff4fa3; --accent-soft: #3d1640; --teal: #2de2c8; --ok: #2de2a0; --ok-soft: #12302d; --warn: #ffc24f; --warn-soft: #362a1a; --bad: #ff6b6b; --bad-soft: #3a1630; --chrome: #12082a; --chrome-ink: #fff3ff; --chrome-muted: #b8a2dc; --st-ready: #2de2a0; --st-damaged: #ffc24f; --st-docked: #4fc3ff; --st-lost: #7a6a99; --rs-ft2: #ffb347; --rs-fb: #4fa3ff; --rs-ftcd: #2de2a0; --rs-ftpc: #c77dff; --rs-current: #4a2f7a; color-scheme: dark; }
[data-theme="nebula"] body { background: radial-gradient(700px 420px at 12% 18%, rgba(255,79,163,.22), transparent 70%), radial-gradient(800px 500px at 88% 30%, rgba(45,226,200,.16), transparent 70%), radial-gradient(900px 600px at 50% 110%, rgba(125,79,255,.28), transparent 70%), var(--bg); background-attachment: fixed; }
[data-theme="nebula"] .topbar { background: linear-gradient(90deg, #3a0f4f, #1f0f4a 50%, #0d3b4f); border-bottom: 1px solid rgba(255,255,255,.08); }
[data-theme="nebula"] .ruleset-strip { height: 3px; }
[data-theme="nebula"] .brand small { color: var(--teal); }
[data-theme="nebula"] .chrome-field { --chrome-field: #22103f; background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.12); }
[data-theme="nebula"] .tabs a { border-radius: 999px; color: #d9c9f5; }
[data-theme="nebula"] .tabs a.on { background: linear-gradient(90deg, #c42f75, #8f3bd6); color: #fff; }
[data-theme="nebula"] .bar { background: rgba(0,0,0,.3); border-radius: 999px; }
[data-theme="nebula"] .bar > i { background: linear-gradient(90deg, var(--accent), #b44fff, var(--teal)); }
[data-theme="nebula"] .panel, [data-theme="nebula"] .tile, [data-theme="nebula"] .card { border-radius: 12px; border-color: var(--line); background-color: rgba(35,18,63,.9); }
[data-theme="nebula"] .card { background-color: rgba(29,15,54,.9); }
[data-theme="nebula"] .panel h3 { color: var(--teal); }
[data-theme="nebula"] .panel.head h2, [data-theme="nebula"] .tile b { color: #fff; }
[data-theme="nebula"] .tile { border-top: 3px solid var(--accent); }
[data-theme="nebula"] .btn { background: #2e1a52; border-color: #4a3178; color: var(--ink); border-radius: 999px; }
[data-theme="nebula"] .btn:hover { border-color: var(--teal); }
[data-theme="nebula"] .btn.primary { background: linear-gradient(90deg, #c42f75, #8f3bd6); border-color: transparent; color: #fff; }
[data-theme="nebula"] .input { background: #1a0d31; color: var(--ink); border-color: #4a3178; border-radius: 8px; }
[data-theme="nebula"] .input:focus { outline: 2px solid rgba(45,226,200,.35); border-color: var(--teal); }
[data-theme="nebula"] .chip.ok, [data-theme="nebula"] .chip.st-ready { border-color: #1f6a5a; }
[data-theme="nebula"] .chip.warn, [data-theme="nebula"] .chip.st-damaged { border-color: #6a5320; }
[data-theme="nebula"] .chip.bad { border-color: #6b2848; }
[data-theme="nebula"] .chip.info, [data-theme="nebula"] .chip.st-docked { background: #13284a; border-color: #2c5a8a; color: #4fc3ff; }
[data-theme="nebula"] a, [data-theme="nebula"] .lib-list a.on { color: var(--teal); }
[data-theme="nebula"] .tbl th { color: var(--teal); }
[data-theme="nebula"] .notice { border-color: #6a5320; }
[data-theme="nebula"] .card .mini svg, [data-theme="nebula"] .ssd-wrap svg, [data-theme="nebula"] .sheet svg { background: #f6f1ff; border-radius: 8px; }
[data-theme="nebula"] input[type=checkbox] { accent-color: var(--accent); }

/* Aurora: the green one. Deep spruce space under a northern-lights glow, soft jade and sage
   accents with a touch of violet at the sky's edge. */
:root[data-theme="aurora"] { --bg: #08171a; --panel: #0f2427; --panel-2: #0c1e21; --ink: #d9e9e3; --muted: #93ada6; --line: #1f4044; --accent: #5bbf94; --accent-soft: #143329; --mint: #aedccb; --ok: #5bbf94; --ok-soft: #143329; --warn: #f0c75e; --warn-soft: #2e2a17; --bad: #ff7a6b; --bad-soft: #36201d; --chrome: #051012; --chrome-ink: #dcece6; --chrome-muted: #86ada2; --st-ready: #5bbf94; --st-damaged: #f0c75e; --st-docked: #5fc8ff; --st-lost: #56736c; --rs-ft2: #f0b45e; --rs-fb: #5fa8ff; --rs-ftcd: #5bbf94; --rs-ftpc: #b98cff; --rs-current: #24494c; color-scheme: dark; }
[data-theme="aurora"] body { background: radial-gradient(1400px 620px at 25% 0%, rgba(91,191,148,.16), transparent 70%), radial-gradient(1000px 500px at 70% 5%, rgba(95,200,255,.10), transparent 70%), radial-gradient(700px 420px at 98% 10%, rgba(185,140,255,.10), transparent 70%), var(--bg); background-attachment: fixed; }
[data-theme="aurora"] .topbar { background: linear-gradient(90deg, #06201a, #071a1d 55%, #0b1830); border-bottom: 1px solid rgba(91,191,148,.25); }
[data-theme="aurora"] .brand small { color: var(--accent); }
[data-theme="aurora"] .chrome-field { --chrome-field: #0a1c1f; border-color: #1f4044; }
[data-theme="aurora"] .tabs a { border-radius: 6px; }
[data-theme="aurora"] .tabs a.on { background: rgba(91,191,148,.16); color: var(--mint); }
[data-theme="aurora"] .bar { background: #143034; }
[data-theme="aurora"] .bar > i { background: linear-gradient(90deg, #3e9c74, var(--accent), var(--mint)); box-shadow: 0 0 6px rgba(91,191,148,.3); }
[data-theme="aurora"] .panel, [data-theme="aurora"] .tile, [data-theme="aurora"] .card { border-radius: 10px; border-color: var(--line); background-color: rgba(15,36,39,.92); }
[data-theme="aurora"] .card { background-color: rgba(12,30,33,.92); }
[data-theme="aurora"] .panel h3 { color: var(--mint); }
[data-theme="aurora"] .panel.head { border-left: 3px solid var(--accent); }
[data-theme="aurora"] .tile b { color: var(--ink); }
[data-theme="aurora"] .btn { background: #143034; border-color: #24494c; color: var(--ink); }
[data-theme="aurora"] .btn:hover { border-color: var(--accent); }
[data-theme="aurora"] .btn.primary { background: var(--accent); border-color: var(--accent); color: #032014; }
[data-theme="aurora"] .input { background: #0a1c1f; color: var(--ink); border-color: #24494c; }
[data-theme="aurora"] .input:focus { outline: 2px solid rgba(91,191,148,.3); border-color: var(--accent); }
[data-theme="aurora"] .chip.ok, [data-theme="aurora"] .chip.st-ready { border-color: #1e6a46; }
[data-theme="aurora"] .chip.warn, [data-theme="aurora"] .chip.st-damaged { border-color: #6a5a20; }
[data-theme="aurora"] .chip.bad { border-color: #6b2e28; }
[data-theme="aurora"] .chip.info, [data-theme="aurora"] .chip.st-docked { background: #0f2a3a; border-color: #23506a; color: #5fc8ff; }
[data-theme="aurora"] a, [data-theme="aurora"] .lib-list a.on { color: var(--mint); }
[data-theme="aurora"] .tbl th { color: var(--mint); }
[data-theme="aurora"] .notice { border-color: #6a5a20; }
[data-theme="aurora"] .card .mini svg, [data-theme="aurora"] .ssd-wrap svg, [data-theme="aurora"] .sheet svg { background: #eef7f3; border-radius: 6px; }
[data-theme="aurora"] input[type=checkbox] { accent-color: var(--accent); }

/* Asteroid: mid-tone rock greys, a cratered ground and deep-orange accents, like a hot strike on stone.
   Deep orange fills (buttons, bars, rules) carry white text; text in the accent uses a lighter ember. */
:root[data-theme="asteroid"] { --bg: #3d4044; --panel: #474b51; --panel-2: #42464b; --ink: #f4f2ef; --muted: #cfccc7; --line: #62666c; --accent: #d9480f; --accent-soft: #6a4a3c; --ember: #ffc09a; --ok: #9be0a9; --ok-soft: #4c5f52; --warn: #ffd57a; --warn-soft: #66604a; --bad: #ffb3a8; --bad-soft: #6a4f4c; --chrome: #2f3235; --chrome-ink: #f4f2ef; --chrome-muted: #c2bfba; --st-ready: #7fd391; --st-damaged: #ffc24d; --st-docked: #8cc4ff; --st-lost: #8f9298; --rs-ft2: #ffb34d; --rs-fb: #7fb2ff; --rs-ftcd: #7fd391; --rs-ftpc: #c9a2ff; --rs-current: #7a7e84; color-scheme: dark; }
[data-theme="asteroid"] body { background: radial-gradient(240px 180px at 15% 65%, rgba(0,0,0,.10), transparent 70%), radial-gradient(160px 130px at 70% 85%, rgba(0,0,0,.08), transparent 70%), radial-gradient(200px 150px at 45% 25%, rgba(255,255,255,.04), transparent 70%), radial-gradient(900px 600px at 100% -10%, rgba(217,72,15,.10), transparent 65%), var(--bg); background-attachment: fixed; }
[data-theme="asteroid"] .topbar { background: var(--chrome); border-bottom: 2px solid var(--accent); }
[data-theme="asteroid"] .brand small { color: var(--ember); }
[data-theme="asteroid"] .chrome-field { --chrome-field: #3a3d42; border-color: #575b61; }
[data-theme="asteroid"] .tabs a { border-radius: 6px; }
[data-theme="asteroid"] .tabs a.on { background: #474b51; color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
[data-theme="asteroid"] .bar { background: #3a3d42; }
[data-theme="asteroid"] .bar > i { background: var(--accent); }
[data-theme="asteroid"] .panel, [data-theme="asteroid"] .tile, [data-theme="asteroid"] .card { border-radius: 8px; border-color: var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
[data-theme="asteroid"] .panel h3 { color: var(--ember); }
[data-theme="asteroid"] .panel.head { border-left: 4px solid var(--accent); }
[data-theme="asteroid"] .tile b { color: #fff; }
[data-theme="asteroid"] .btn { background: #575b61; border-color: #6e7278; color: var(--ink); border-radius: 6px; }
[data-theme="asteroid"] .btn:hover { border-color: var(--accent); }
[data-theme="asteroid"] .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="asteroid"] .btn.primary:hover { background: #b83c0b; border-color: #b83c0b; }
[data-theme="asteroid"] .input { background: #3a3d42; color: var(--ink); border-color: #7a7e84; }
[data-theme="asteroid"] .input::placeholder { color: #b5b2ad; }
[data-theme="asteroid"] .input:focus { outline: 2px solid rgba(217,72,15,.45); border-color: var(--accent); }
[data-theme="asteroid"] .chip.info, [data-theme="asteroid"] .chip.st-docked { background: #4f5a68; border-color: #6f849c; color: #cfe5ff; }
[data-theme="asteroid"] a, [data-theme="asteroid"] .lib-list a.on { color: var(--ember); }
[data-theme="asteroid"] .tbl th { color: var(--ember); }
[data-theme="asteroid"] .card .mini svg, [data-theme="asteroid"] .ssd-wrap svg, [data-theme="asteroid"] .sheet svg { background: #f1efec; border-radius: 6px; }
[data-theme="asteroid"] input[type=checkbox] { accent-color: var(--accent); }