/* ANCHOR 2.0 web: design tokens. Terminal is the default; Corona and Star Admin carry the console's own
   values (frontend/refcon/theme.py) so every existing theme survives the move off Streamlit. */
:root, [data-theme="terminal"] {
  --bg: #000000; --panel: #0d0b0a; --panel-2: #141110; --surface: #1a1714; --surface-2: #211e1a; --hover: #1e1a16;
  --border-1: #222018; --border-2: #302a22; --border-3: #44403a;
  --text: #ede8c8; --text-hi: #fff2cc; --dim: #aaa080; --muted: #968769; --ghost: #8a806a;
  --accent: #ff7722; --on-accent: #000000; --amber: #ffaa33; --gold: #ffc844;
  --up: #00dd66; --up-dim: #00bb44; --down: #ff4444; --down-dim: #cc2222; --info: #44aaff; --cyan: #33dddd;
  --font: "IBM Plex Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
  --font-ui: var(--font);
  --radius: 0px;
  --upper: uppercase;
}
[data-theme="corona"] {
  --bg: #000000; --panel: #191c24; --panel-2: #191c24; --surface: #0f1015; --surface-2: #2c2e33; --hover: #22252e;
  --border-1: #2c2e33; --border-2: #2c2e33; --border-3: #6c7293;
  --text: #ffffff; --text-hi: #ffffff; --dim: #b3b8d0; --muted: #8f95b2; --ghost: #6c7293;
  --accent: #0090e7; --on-accent: #ffffff; --amber: #ffab00; --gold: #ffab00;
  --up: #00d25b; --up-dim: #00a651; --down: #fc424a; --down-dim: #e8323a; --info: #8f5fe8; --cyan: #4db3f0;
  --font: "IBM Plex Mono", Consolas, monospace;
  --font-ui: Rubik, "Segoe UI", system-ui, sans-serif;
  --radius: 4px;
  --upper: none;
}
[data-theme="star"] {
  --bg: #1f2127; --panel: #252730; --panel-2: #252730; --surface: #191b20; --surface-2: #4a4c55; --hover: #2c2e38;
  --border-1: #4a4c55; --border-2: #4a4c55; --border-3: #808191;
  --text: #d8d9e3; --text-hi: #ffffff; --dim: #a3a4a5; --muted: #9c9fa6; --ghost: #808191;
  --accent: #3a61f6; --on-accent: #ffffff; --amber: #deb103; --gold: #deb103;
  --up: #34b1aa; --up-dim: #2a9690; --down: #f95f53; --down-dim: #d94a3f; --info: #a3a4a5; --cyan: #7c93ff;
  --font: "IBM Plex Mono", Consolas, monospace;
  --font-ui: Manrope, "Segoe UI", system-ui, sans-serif;
  --radius: 12px;
  --upper: none;
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 13px; line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
a { color: var(--info); }

/* ---- shell ---- */
.shell { display: grid; grid-template-rows: 28px 34px 1fr; grid-template-columns: 184px 1fr; height: 100%; }
.statusbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: var(--panel-2);
  border-bottom: 1px solid var(--border-1); font-size: 11px; letter-spacing: .08em; text-transform: var(--upper); color: var(--dim);
  font-family: var(--font); white-space: nowrap; overflow: hidden; }
.mark { color: var(--text); font-weight: 500; }
.mark b { color: var(--accent); font-weight: 500; }
.statusbar .right { margin-left: auto; color: var(--muted); }
.cmdbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--panel);
  border-bottom: 1px solid var(--border-1); font-family: var(--font); }
.cmdbar .prompt { color: var(--accent); }
.cmdbar input { flex: 0 1 380px; background: transparent; border: none; outline: none; font-size: 12px; min-width: 120px; }
.cmdbar input::placeholder { color: var(--ghost); }
.cmdbar .sel { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.rail { background: var(--panel); border-right: 1px solid var(--border-1); overflow-y: auto; padding: 6px 0; font-family: var(--font); }
.rail button { display: block; width: 100%; text-align: left; background: none; border: none; border-left: 2px solid transparent;
  padding: 6px 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); cursor: pointer; }
.rail button:hover { background: var(--hover); color: var(--text); }
.rail button.active { border-left-color: var(--accent); color: var(--text-hi); background: var(--surface); }
.rail .code { color: var(--muted); display: inline-block; width: 52px; }
.rail .sep { height: 1px; background: var(--border-1); margin: 6px 0; }
.main { overflow: auto; padding: 1px; background: var(--border-1); }
.grid { display: grid; gap: 1px; grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* ---- panel ---- */
.panel { background: var(--panel); min-width: 0; display: flex; flex-direction: column; border-radius: var(--radius); }
.panel-h { height: 24px; display: flex; align-items: center; gap: 8px; padding: 0 8px; background: var(--panel-2);
  border-bottom: 1px solid var(--border-2); font-family: var(--font); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text); }
.panel-h .meta { margin-left: auto; color: var(--muted); text-transform: none; letter-spacing: 0; }
.panel-b { padding: 8px; min-width: 0; overflow: auto; }
.badge { display: inline-block; font-size: 10px; line-height: 1.3; padding: 1px 5px; border: 1px solid var(--border-3);
  text-transform: uppercase; letter-spacing: .08em; color: var(--text); font-family: var(--font); border-radius: var(--radius); }
.badge.accent { border-color: var(--accent); color: var(--accent); }
.badge.up { border-color: var(--up-dim); color: var(--up); }
.badge.amber { border-color: var(--amber); color: var(--amber); }
.badge.down { border-color: var(--down-dim); color: var(--down); }

/* ---- KPI tiles ---- */
.kpis { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: var(--border-1); }
.kpi { background: var(--panel); padding: 8px 10px; border-left: 2px solid var(--kpi-accent, var(--accent)); }
.kpi .l { font-family: var(--font); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kpi .v { font-family: var(--font); font-size: 24px; color: var(--text-hi); line-height: 1.25; }
.kpi .v small { font-size: 12px; color: var(--muted); margin-left: 4px; }
.kpi .s { font-size: 11px; color: var(--dim); font-family: var(--font); }

/* ---- tables ---- */
table.t { border-collapse: collapse; width: 100%; font-family: var(--font); font-size: 12px; }
table.t th { position: sticky; top: 0; background: var(--panel-2); color: var(--muted); font-weight: 500; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--border-2);
  white-space: nowrap; cursor: pointer; user-select: none; }
table.t td { height: 22px; padding: 2px 8px; border-bottom: 1px solid var(--border-1); white-space: nowrap; }
table.t td.n, table.t th.n { text-align: right; }
table.t tr:hover td { background: var(--hover); }
.pos { color: var(--up); } .neg { color: var(--down); }

/* ---- controls ---- */
.btn { background: transparent; border: 1px solid var(--border-3); color: var(--text); padding: 4px 10px; cursor: pointer;
  text-transform: var(--upper); letter-spacing: .06em; font-size: 11px; font-family: var(--font); border-radius: var(--radius); }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.08); color: var(--on-accent); }
select.in, input.in { background: var(--surface); border: 1px solid var(--border-2); padding: 3px 6px; font-size: 12px;
  font-family: var(--font); border-radius: var(--radius); }
.lbl { font-family: var(--font); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--dim); }
.err { color: var(--down); font-family: var(--font); font-size: 12px; }
ul.movers { margin: 0; padding-left: 16px; } ul.movers li { margin: 2px 0; }
.footer { color: var(--ghost); font-size: 11px; padding: 8px; background: var(--panel); font-family: var(--font); }

/* ---- login ---- */
.login { min-height: 100%; display: grid; place-items: center; }
.login .panel { width: min(380px, 92vw); }
.login form { display: grid; gap: 8px; padding: 12px; }
.login input { width: 100%; }

.main { overflow-x: hidden; }
.panel-b > div { max-width: 100%; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: 28px auto auto 1fr; }
  .cmdbar { flex-wrap: wrap; padding: 4px 10px; gap: 6px; }
  .cmdbar input { flex: 1 1 100%; }
  .cmdbar .sel { margin-left: 0; flex-wrap: wrap; }
  .statusbar .right { display: none; }
  .rail { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border-1); padding: 0; }
  .rail button { width: auto; white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
  .rail button.active { border-bottom-color: var(--accent); }
  .rail .code, .rail .sep { display: none; }
  .grid > * { grid-column: 1 / -1 !important; }
}

/* ---- chips, tabs, collapsibles, instrument ---- */
.picks { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 8px; }
.chip { background: var(--panel); border: 1px solid var(--border-2); color: var(--dim); padding: 2px 8px; font-size: 11px;
  font-family: var(--font); letter-spacing: .06em; cursor: pointer; border-radius: var(--radius); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip:hover:not(.on) { border-color: var(--accent); color: var(--text); }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-2); margin-bottom: 6px; }
.tabs button { background: none; border: none; border-bottom: 2px solid transparent; padding: 4px 12px; color: var(--dim);
  font-family: var(--font); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.tabs button.on { border-bottom-color: var(--accent); color: var(--text-hi); }
.collapse { border: 1px solid var(--border-1); margin-bottom: 4px; border-radius: var(--radius); }
.collapse-h { width: 100%; text-align: left; display: flex; gap: 8px; align-items: center; background: var(--panel-2);
  border: none; padding: 4px 8px; font-family: var(--font); font-size: 12px; letter-spacing: .04em; cursor: pointer; color: var(--text); }
.collapse-h .caret { color: var(--accent); width: 10px; }
.collapse-b { padding: 8px; }
.instrument { display: grid; grid-template-columns: auto 1fr; gap: 2px 18px; font-family: var(--font); font-size: 14px;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-1); width: max-content; max-width: 100%; border-radius: var(--radius); }
.instrument .k { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; align-self: center; }
.instrument .v { text-align: right; color: var(--text-hi); }
.instrument .cap { grid-column: 1 / -1; color: var(--dim); font-size: 11px; letter-spacing: .08em; margin-bottom: 4px; }
.subtotal { display: flex; gap: 18px; justify-content: flex-end; font-family: var(--font); padding: 4px 8px;
  border-top: 1px solid var(--border-3); background: var(--panel-2); }
.subtotal b { font-weight: 500; color: var(--text-hi); }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.note { color: var(--dim); font-size: 12px; margin: 6px 0; }
.ok { color: var(--up); } .bad { color: var(--down); }
tr.sel td { background: var(--surface-2) !important; }
.qrow { display: flex; gap: 10px; align-items: center; padding: 4px 8px; border: 1px solid var(--border-1); margin-bottom: 4px; }
.qrow b { font-weight: 500; }
.qbody p { margin: 6px 0; }
pre.log { background: var(--bg); border: 1px solid var(--border-1); padding: 8px; max-height: 560px; overflow: auto; font-size: 11px;
  font-family: var(--font); color: var(--dim); white-space: pre-wrap; }
.goto { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border-1); }
.goto-b { text-align: left; background: var(--panel); border: none; padding: 8px 10px; cursor: pointer; display: grid; gap: 2px; }
.goto-b span { font-family: var(--font); text-transform: var(--upper); letter-spacing: .06em; color: var(--text-hi); }
.goto-b small { color: var(--dim); }
.goto-b:hover:not(:disabled) { background: var(--hover); box-shadow: inset 2px 0 0 var(--accent); }
.goto-b:disabled { opacity: .5; cursor: default; }
/* ---- Materials step list ---- */
.sharebar { display: flex; height: 14px; border: 1px solid var(--border-2); margin: 8px 0 4px; overflow: hidden; border-radius: var(--radius); }
.sharebar div { height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--dim); font-family: var(--font); margin-bottom: 6px; }
.legend i, .fwd i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; }
.steps { display: grid; gap: 1px; }
.srow { display: grid; grid-template-columns: 22px minmax(0, 3.6fr) minmax(0, 1.7fr) minmax(0, 2.3fr); gap: 8px; align-items: center;
  padding: 4px 6px; background: var(--panel); border: 1px solid var(--border-1); }
.srow:hover { background: var(--hover); }
.srow small { color: var(--dim); font-size: 10.5px; letter-spacing: .03em; }
.srow .l small { display: block; }
.srow .m, .srow .r { text-align: right; line-height: 1.3; }
.tog button, .tog-b { background: none; border: 1px solid var(--border-3); color: var(--accent); width: 18px; height: 18px; line-height: 14px;
  padding: 0; cursor: pointer; font-size: 11px; border-radius: var(--radius); }
.sbox { border-left: 1px dashed var(--border-3); margin: 2px 0 4px 10px; padding: 4px 0 4px 8px; }
.mono { font-family: var(--font); }
.fwd { display: grid; grid-template-columns: minmax(0, 5fr) 1fr 1fr; gap: 8px; padding: 3px 6px; border-bottom: 1px solid var(--border-1); }
.fwd .n, .c6row > :nth-child(2), .c6row > :nth-child(3) { text-align: right; }
.c6row { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 2.6fr) minmax(0, 1fr); gap: 8px; padding: 3px 6px; border-bottom: 1px solid var(--border-1); }
.c6row small { color: var(--dim); }
@media (max-width: 900px) { .srow { grid-template-columns: 22px 1fr; } .srow .m, .srow .r { grid-column: 2; text-align: left; } }
/* ---- Network ---- */
.canvas-host { width: 100%; min-height: 640px; }
.inspector { margin-top: 8px; border-top: 1px solid var(--border-2); padding-top: 8px; display: grid; gap: 6px; }
.insp-head { font-family: var(--font); font-size: 14px; color: var(--text-hi); }
.insp-head b { font-weight: 500; }
.insp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.bstrip { height: 8px; background: var(--border-2); margin: 2px 0 6px; border-radius: var(--radius); }
.bstrip div { height: 8px; border-radius: var(--radius); }
.history { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
@media (max-width: 900px) { .insp-grid { grid-template-columns: 1fr; } }
.lever { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--border-1); }
.lever > span:first-child { flex: 1; min-width: 0; }
/* ---- Run ---- */
.runprog { border: 1px solid var(--border-1); padding: 8px; margin: 6px 0; display: grid; gap: 6px; }
.pbar { height: 6px; background: var(--border-2); } .pbar div { height: 6px; background: var(--accent); transition: width .5s; }
.theatre { width: 100%; min-height: 200px; }
.chk { display: flex; gap: 6px; align-items: center; margin: 4px 0; font-size: 12px; }
/* ---- banners, chat, editable table ---- */
.banner { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 10px; font-family: var(--font); font-size: 12px; }
.banner.amber { background: color-mix(in srgb, var(--amber) 14%, var(--panel)); color: var(--amber); }
.banner.bad { background: color-mix(in srgb, var(--down) 14%, var(--panel)); color: var(--down); }
.chat { display: grid; gap: 6px; max-height: 60vh; overflow: auto; margin: 6px 0; }
.msg { border-left: 2px solid var(--border-3); padding: 4px 8px; background: var(--panel-2); }
.msg.assistant { border-left-color: var(--accent); }
.msg .body { white-space: pre-wrap; }
table.t.edit td { padding: 0 2px; }
table.t.edit input { width: 100%; min-width: 80px; background: transparent; border: 1px solid transparent; padding: 2px 4px; font: inherit; color: inherit; }
table.t.edit input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
table.t.edit tr.flag td { background: color-mix(in srgb, var(--amber) 10%, transparent); }
details.collapse > summary { list-style: none; } details.collapse > summary::-webkit-details-marker { display: none; }