/* Dark, dense console look: flat panels, hairline grids, uppercase labels, one blue accent. */
:root {
  --bg: #12161c; --panel: #1a1f27; --cell: #0e1116; --raised: #232a34; --line: #2c3542; --line-strong: #3b4656;
  --text: #e6eaf0; --muted: #8d98a8; --accent: #1e9bf0; --accent-soft: #11304b; --accent-text: #fff;
  --warn: #ff9f1a; --bad: #ff5257; --good: #3ddc68; --lqi: #b44dff; --soft: #232a34; --tile: #2a3039; --tile-head: #3a424e;
  --caps: .1em;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.4 "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
h2 { font-size: 12px; margin: 0; text-transform: uppercase; letter-spacing: var(--caps); font-weight: 700; }
h3 { font-size: 11px; margin: 16px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: var(--caps); font-weight: 700; }
code { background: var(--cell); border: 1px solid var(--line); padding: 0 5px; border-radius: 2px; font: 12px ui-monospace, Menlo, monospace; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: #fff; }
* { scrollbar-color: var(--line-strong) transparent; }

button, select, input { font: inherit; color: inherit; }
button { background: var(--raised); border: 1px solid var(--line-strong); border-radius: 3px; padding: 4px 11px; cursor: pointer; white-space: nowrap; font-weight: 600; font-size: 12.5px; }
button:hover:not(:disabled) { border-color: var(--accent); background: #2a323e; }
button:disabled { opacity: .38; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.primary:hover:not(:disabled) { background: #3aabf5; }
button.danger { color: var(--bad); }
button.danger:hover:not(:disabled) { border-color: var(--bad); }
button.link { border: 0; background: none; color: var(--accent); padding: 2px 4px; }
button.link:hover:not(:disabled) { background: none; text-decoration: underline; }
button.small { padding: 2px 8px; font-size: 12px; }
input[type=text], input[type=password], input[type=number], input[type=search], select { background: var(--cell); border: 1px solid var(--line); border-radius: 2px; padding: 4px 7px; min-width: 0; }
input[type=text]:hover, input[type=number]:hover, input[type=search]:hover, select:hover { border-color: var(--line-strong); }
input[type=number] { width: 66px; }
input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); }
::placeholder { color: #5d6878; font-style: italic; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }

/* top bar */
.top { background: #0d1015; border-bottom: 1px solid var(--line); z-index: 5; }
.topRow { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 10px 18px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand b { display: block; font-size: 15px; letter-spacing: .02em; }
.brand small { display: block; color: var(--muted); font-size: 11.5px; }
.logo { width: 30px; height: 30px; background: var(--text); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 22% 78%, 50% 78%, 78% 22%, 50% 22%, 22% 78%); }
.doc { flex: 1; min-width: 140px; color: var(--muted); display: flex; align-items: center; justify-content: flex-end; gap: 10px; overflow: hidden; white-space: nowrap; font-size: 12px; }
.doc b { color: var(--text); font-size: 13px; }
.doc .state { color: var(--good); text-transform: uppercase; letter-spacing: var(--caps); font-size: 10.5px; font-weight: 700; }
.actions { display: flex; gap: 6px; }

.modes { display: flex; border-top: 1px solid var(--line); }
.modes button { flex: 1; border: 0; border-right: 1px solid var(--line); border-bottom: 2px solid transparent; border-radius: 0; background: var(--panel); padding: 9px 12px 7px; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; font-weight: 700; }
.modes button:last-child { border-right: 0; }
.modes button:hover:not(:disabled) { background: var(--raised); color: var(--text); border-color: var(--line); border-bottom-color: transparent; }
.modes button.on, .modes button.on:hover { color: var(--accent); border-bottom-color: var(--accent); background: #10141a; }

.seg { display: inline-flex; }
.seg button { border-radius: 0; margin-left: -1px; color: var(--muted); }
.seg button:first-child { border-radius: 3px 0 0 3px; margin-left: 0; }
.seg button:last-child { border-radius: 0 3px 3px 0; }
.seg button.on { background: var(--accent); border-color: var(--accent); color: #fff; position: relative; }

/* pages */
.page { flex: 1; min-height: 0; overflow: auto; padding: 18px; }
.page.split { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#side { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 18px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; }
#side button { display: inline-flex; align-items: center; gap: 7px; border-color: transparent; background: none; color: var(--text); padding: 4px 10px; }
#side button:hover { background: var(--raised); border-color: var(--line-strong); }
#side button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#side .count { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--cell); border-radius: 2px; padding: 0 5px; }
#side button.on .count { background: rgb(0 0 0 / .25); color: #fff; }
#side .count.issues { background: var(--warn); color: #000; }
#side hr { border: 0; border-left: 1px solid var(--line-strong); align-self: stretch; margin: 2px 8px; }
#panel { flex: 1; min-width: 0; overflow: auto; padding: 16px 18px 60px; }

.head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.head h2 { margin-right: 8px; }
.head h2::before { content: "▾"; margin-right: 8px; color: var(--muted); }
.head .grow, .bar .grow { flex: 1; }
.note { color: var(--muted); font-size: 12px; margin: 4px 0 12px; max-width: 95ch; }
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bulk { position: sticky; top: -16px; z-index: 3; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 3px; padding: 7px 10px; margin-bottom: 8px; }
.bulk .sep { width: 1px; align-self: stretch; background: var(--line-strong); }

/* capacity meter in section heads */
.usage { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); }
.usage .track { width: 140px; height: 7px; background: var(--raised); }
.usage .track i { display: block; height: 100%; background: var(--accent); }
.usage.over .track i { background: var(--bad); }
.usage b { color: var(--text); letter-spacing: 0; }

/* list rows: read as one table */
.item { background: var(--cell); border: 1px solid var(--line); margin-top: -1px; position: relative; }
.item:hover { border-color: var(--accent); z-index: 1; }
.item.planned { border-left: 3px solid var(--warn); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 3px 8px; min-height: 34px; }
.row .slot { width: 30px; color: var(--muted); font-size: 12px; text-align: right; }
.row .name { width: 170px; font-weight: 600; }
.row input.name { background: transparent; border-color: transparent; }
.row input.name:hover { border-color: var(--line-strong); }
.row input.name:focus { background: var(--accent-soft); }
.row .chips { flex: 1; min-width: 160px; display: flex; gap: 3px; overflow: hidden; }
.row .summary { flex: 1; color: var(--muted); font-size: 12px; }
.row label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: var(--caps); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.row label input, .row label select { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--text); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 7px; border-radius: 2px; background: var(--raised); border: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.chip.none { color: var(--muted); background: none; border-style: dashed; }
.chip i, .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.tag { font-size: 10.5px; padding: 1px 6px; border-radius: 2px; background: var(--raised); color: var(--muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.tag.plan { background: var(--warn); color: #000; }
.tag.ok { color: var(--good); } .tag.diff { color: var(--warn); }
.detail { border-top: 1px solid var(--line); background: var(--panel); padding: 2px 14px 12px; }
.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 4px 28px; }
.line { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.line .k { width: 48px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.line select { flex: 1; }
.line select.narrow { flex: 0 0 112px; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--muted); }

/* tables */
table { border-collapse: separate; border-spacing: 0; }
.tbl { width: 100%; background: var(--cell); border: 1px solid var(--line); }
.tbl th, .tbl td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: var(--caps); background: var(--panel); }
.tbl tr:last-child td, .tbl tr:last-child th { border-bottom: 0; }
.tbl tr:hover td { background: #131820; }
.sev-error { color: var(--bad); font-weight: 700; } .sev-warn { color: var(--warn); font-weight: 700; } .sev-info { color: var(--muted); }
.added { color: var(--good); } .removed { color: var(--bad); }

.scroll { overflow: auto; border: 1px solid var(--line); background: var(--cell); max-height: calc(100vh - 250px); }
.sheet th, .sheet td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0; white-space: nowrap; }
.sheet th { position: sticky; top: 0; z-index: 2; background: var(--panel); font-size: 11px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: var(--caps); padding: 7px 8px; text-align: left; border-bottom-color: var(--line-strong); }
.sheet .fix { position: sticky; left: 0; z-index: 1; background: var(--cell); }
.sheet th.fix { z-index: 3; background: var(--panel); }
.sheet td.ro { padding: 0 8px; color: var(--muted); font-size: 12px; }
.sheet td.rowname { padding: 5px 10px; font-weight: 600; }
.sheet input, .sheet select { border: 0; border-radius: 0; background: transparent; width: 100%; padding: 5px 8px; }
.sheet input:focus, .sheet select:focus { outline: 1px solid var(--accent); outline-offset: -1px; background: var(--accent-soft); }
.sheet tbody tr:hover td { background: #141a23; }
.sheet tbody tr:focus-within td { background: #0f2032; border-bottom-color: var(--accent); }
.sheet tbody tr:hover td.fix, .sheet tbody tr:focus-within td.fix { color: var(--text); }
.sheet td.key, .sheet tbody tr:hover td.key { background: var(--accent-soft); box-shadow: inset 2px 0 var(--accent); }
.sheet td.listen select { color: var(--muted); }
.sheet td.off select { color: transparent; }
.sheet td.off select:focus, .sheet td.off:hover select { color: var(--muted); }
.sheet tr.planned td.ro { color: var(--warn); box-shadow: inset 3px 0 var(--warn); }
.sheet th .dot { margin-right: 6px; }

/* shows */
.shows { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; margin-top: 12px; }
.show { background: var(--tile); border: 1px solid var(--line-strong); display: flex; flex-direction: column; }
.show > div:first-child { padding: 0 0 10px; }
.show .t { font-weight: 700; font-size: 13px; background: var(--tile-head); padding: 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show .m { color: var(--muted); font-size: 11.5px; padding: 8px 10px 0; }
.show .bar { background: var(--cell); border-top: 1px solid var(--line); padding: 6px 8px; gap: 4px; margin-top: auto; }
.show.current { border-color: var(--accent); }
.show.current .t { background: var(--accent); color: #fff; }
.show.new { border-style: dashed; background: none; align-items: center; justify-content: center; text-align: center; color: var(--muted); min-height: 104px; }
.show.new > div:first-child { padding: 10px; }
.wrap { max-width: 1280px; margin: 0 auto; }

/* live monitor: tiles */
.banner { background: #2e2210; border: 1px solid #5a4317; border-left: 4px solid var(--warn); padding: 7px 12px; margin-bottom: 14px; font-size: 12px; }
#live h2 { margin: 16px 0 8px; color: var(--muted); }
.cards { display: flex; flex-wrap: wrap; gap: 6px; }
.tile { width: 148px; background: var(--tile); border: 1px solid var(--line-strong); display: flex; flex-direction: column; }
.tile.wide { width: 200px; }
.tile .hd { background: var(--tile-head); padding: 5px 8px; text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .bd { padding: 8px; display: grid; gap: 7px; flex: 1; }
.tile .kv { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.tile .kv b { color: var(--text); font-size: 12px; letter-spacing: 0; text-transform: none; }
.tile .big { font-size: 20px; font-weight: 700; text-align: center; letter-spacing: .02em; }
.tile .big small { font-size: 12px; color: var(--muted); font-weight: 600; }
.lqi { display: flex; gap: 2px; flex: 1; margin-left: 8px; }
.lqi i { flex: 1; height: 11px; background: var(--cell); border: 1px solid #58606c; }
.lqi i.on { background: var(--lqi); border-color: var(--lqi); }
.batt { display: flex; align-items: center; gap: 6px; }
.batt .cell { flex: 1; height: 15px; background: var(--cell); border: 1px solid #58606c; position: relative; }
.batt .cell::after { content: ""; position: absolute; right: -4px; top: 3px; width: 3px; height: 7px; background: #58606c; }
.batt .cell i { display: block; height: 100%; background: var(--good); }
.batt .cell i.mid { background: var(--warn); } .batt .cell i.low { background: var(--bad); }
.batt b { width: 34px; text-align: right; font-size: 12px; }
.stat { width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 900; color: #06210f; background: var(--good); }
.stat.bad { background: none; color: var(--bad); font-size: 14px; border-radius: 0; }
.tile .ft { background: var(--cell); border-top: 1px solid var(--line); padding: 4px 6px 4px 8px; font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 30px; }
.tile .ft span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile.off .bd { opacity: .35; }
.tile.alert { border-color: var(--bad); } .tile.alert .hd { background: #6b2226; }
.tile.locating { border-color: var(--accent); } .tile.locating .hd { background: var(--accent); color: #fff; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .55; } }
.track { height: 7px; background: var(--cell); border: 1px solid #58606c; }
.track i { display: block; height: 100%; background: var(--accent); }

/* overlays */
dialog { border: 1px solid var(--line-strong); border-radius: 4px; background: var(--panel); color: var(--text); padding: 0; width: min(460px, 92vw); box-shadow: 0 20px 60px rgb(0 0 0 / .6); }
dialog.wide { width: min(780px, 94vw); }
dialog::backdrop { background: rgb(0 0 0 / .6); }
dialog h2 { background: #0d1015; border-bottom: 1px solid var(--line); padding: 11px 16px; }
dialog .body { max-height: 60vh; overflow: auto; padding: 14px 16px 4px; }
dialog .body p { margin: 0 0 10px; }
dialog .body input[type=text] { width: 100%; }
dialog .body ul { margin: 4px 0 10px; padding-left: 18px; }
dialog .body .warnbox { border-left: 3px solid var(--warn); padding: 6px 10px; background: #2e2210; margin-bottom: 10px; }
dialog .buttons { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--cell); margin-top: 10px; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--raised); border: 1px solid var(--accent); color: var(--text); padding: 8px 16px; border-radius: 3px; max-width: 90vw; z-index: 20; box-shadow: 0 8px 30px rgb(0 0 0 / .5); }
.toast.error { background: #4a1518; border-color: var(--bad); }
.drop { position: fixed; inset: 12px; border: 2px dashed var(--accent); background: rgb(13 16 21 / .88); display: flex; align-items: center; justify-content: center; font-size: 16px; text-transform: uppercase; letter-spacing: var(--caps); font-weight: 700; z-index: 30; pointer-events: none; }

/* patch sheet */
.paper { background: var(--cell); border: 1px solid var(--line); padding: 22px; }
.paper h2 { font-size: 16px; text-transform: none; letter-spacing: 0; }
.paper table { width: 100%; margin: 8px 0 20px; }
.paper th, .paper td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left; font-size: 12.5px; }
.paper th { font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); }

@media (max-width: 700px) {
  .topRow { gap: 8px; padding: 8px 12px; } .brand small { display: none; }
  .page, #panel { padding: 12px; } #side { padding: 6px 12px; }
}
@media print {
  :root { --bg: #fff; --panel: #fff; --cell: #fff; --raised: #eee; --text: #000; --muted: #444; --line: #bbb; --line-strong: #999; --soft: #eee; color-scheme: light; }
  .top, #side, .noprint, .toast { display: none !important; }
  body, .page, #panel { display: block; overflow: visible; padding: 0; height: auto; }
  .paper { border: 0; padding: 0; }
}

/* key plan */
:root { --k-dest: #2c6a45; --k-partyline: #7c4416; --k-fourwire: #5b3b90; --k-group: #2558ab; }
.kp-top { display: grid; gap: 4px; margin-bottom: 10px; }
.kp-top input { background: transparent; border-color: transparent; padding: 3px 6px; }
.kp-top input:hover:not(:disabled) { border-color: var(--line-strong); }
.kp-title { font-size: 20px; font-weight: 700; }
.kp-note { color: var(--warn); font-weight: 600; }
.kp-legend { margin-bottom: 8px; gap: 4px; }
.kp-chip { padding: 3px 12px; font-size: 11.5px; font-weight: 700; color: #fff; }
.kp-chip.k-unknown { background: var(--cell); border: 1px solid var(--line); color: var(--muted); position: relative; }
.kp-count { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); }
.k-dest { background: var(--k-dest); } .k-partyline { background: var(--k-partyline); } .k-fourwire { background: var(--k-fourwire); } .k-group { background: var(--k-group); }
.kp-scroll { max-height: none; }
.sheet.kp thead th { background: var(--k-dest); color: #fff; border-color: #22543a; }
.sheet.kp th.num, .sheet td.num, .sheet th.num { text-align: center; }
.sheet.kp td.k { min-width: 118px; position: relative; }
.sheet.kp td.k input { color: #fff; font-weight: 500; cursor: pointer; }
.sheet.kp tbody tr:hover td.k-dest, .sheet.kp tbody tr:focus-within td.k-dest { background: var(--k-dest); }
.sheet.kp tbody tr:hover td.k-partyline, .sheet.kp tbody tr:focus-within td.k-partyline { background: var(--k-partyline); }
.sheet.kp tbody tr:hover td.k-fourwire, .sheet.kp tbody tr:focus-within td.k-fourwire { background: var(--k-fourwire); }
.sheet.kp tbody tr:hover td.k-group, .sheet.kp tbody tr:focus-within td.k-group { background: var(--k-group); }
.sheet.kp td.k input:focus { background: rgb(255 255 255 / .14); outline: 2px solid #fff; outline-offset: -2px; }
.sheet.kp td.k- input:focus { background: var(--accent-soft); outline: 1px solid var(--accent); outline-offset: -1px; }
.sheet.kp td.k-unknown::after, .kp-chip.k-unknown::after { content: ""; position: absolute; top: 0; right: 0; border: 5px solid transparent; border-top-color: var(--bad); border-right-color: var(--bad); pointer-events: none; }
.sheet .rowname-in input { font-weight: 700; }
.sheet.kp td.bank { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-align: right; padding: 0 6px; min-width: 20px; }
.sheet.kp td.nokey { background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(255 255 255 / .035) 6px 7px); }
.sheet.kp tr.first td { border-top: 1px solid var(--line-strong); }
.sheet.kp tr.more td.bank { color: var(--muted); }
.sheet.kp td[rowspan] { vertical-align: top; }
.sheet.kp td.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { box-shadow: inset 0 0 0 2px #fff; } 100% { box-shadow: inset 0 0 0 2px transparent; } }
.kp-list td.mode { width: 84px; }
.sheet td.tools { padding: 0 4px; white-space: nowrap; border-right: 0; }
.sheet td.tools button { padding: 2px 5px; color: var(--muted); }
.sheet td.tools button:hover:not(:disabled) { color: var(--text); text-decoration: none; }
.sheet td.tools button.danger:hover:not(:disabled) { color: var(--bad); }
.sheet td.zero { color: #4a5464; }
.kp-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin-top: 16px; align-items: start; }
.kp-list { width: 100%; border: 1px solid var(--line); background: var(--cell); }
.kp-list thead tr th { background: inherit; color: #fff; position: static; }
.kp-list tr.k-partyline th { background: var(--k-partyline); } .kp-list tr.k-fourwire th { background: var(--k-fourwire); } .kp-list tr.k-group th { background: var(--k-group); }
.kp-list td.ro { width: 34px; text-align: center; }
.kp-list td.num { width: 90px; font-weight: 700; color: var(--text); font-size: 13px; }
.kp-problems { border: 1px solid #5a4317; border-left: 4px solid var(--warn); background: #2e2210; padding: 8px 12px; margin: 10px 0 0; font-size: 12px; }
.kp-problems ul { margin: 4px 0 0; padding-left: 18px; }
.kp-notes { width: 100%; background: var(--cell); border: 1px solid var(--line); color: inherit; font: inherit; padding: 8px; resize: vertical; }
textarea { background: var(--cell); border: 1px solid var(--line); color: inherit; font: 12px ui-monospace, Menlo, monospace; padding: 8px; }
@media print {
  #plan { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #plan .kp-scroll { overflow: visible; border: 0; }
  #plan select, #plan input, #plan textarea { appearance: none; -webkit-appearance: none; border: 0; background: none; }
  #plan .sheet.kp td.k input, .sheet.kp thead th, .kp-list thead th { color: #fff; }
  #plan .sheet.kp td.k { min-width: 0; } #plan .sheet { font-size: 10px; width: 100%; }
  .kp-note { color: #a04b00; }
  #plan .sheet.kp td.k-unknown input, #plan .sheet.kp td.k- input { color: #000; }
  #plan :disabled { opacity: 1; }
  @page { size: landscape; margin: 10mm; }
}

/* key cell combobox */
.sheet.kp td.k input { text-overflow: ellipsis; cursor: default; }
.sheet.kp td.k input:focus { cursor: text; }
.kp-pop { position: fixed; z-index: 40; max-height: 300px; max-width: 360px; overflow: auto; background: var(--panel); border: 1px solid var(--accent); box-shadow: 0 10px 30px rgb(0 0 0 / .55); font-size: 13px; }
.kp-pop .opt { display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.kp-pop .opt i { width: 10px; height: 10px; flex: none; }
.kp-pop .opt span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.kp-pop .opt small { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.kp-pop .opt:hover { background: var(--raised); }
.kp-pop .opt.on { background: var(--accent); color: #fff; } .kp-pop .opt.on small { color: #fff; }
.kp-pop .none { padding: 8px 10px; color: var(--muted); font-size: 12px; }
.kp-list tr.sub td { background: #151a22; }
.kp-list tr.sub td.rowname-in { display: flex; align-items: center; }
.kp-list tr.sub .dir { flex: none; width: 34px; margin-left: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #b79cf0; }

/* row tools stay in view at the right edge, however wide the grid is */
.sheet.kp td.tools, .sheet.kp th.tools { position: sticky; right: 0; z-index: 1; background: var(--panel); border-left: 1px solid var(--line-strong); }
.sheet.kp th.tools { z-index: 3; background: var(--k-dest); }
.sheet.kp td.tools button.danger { color: var(--bad); font-size: 12px; }
.kp-list.kp-types thead th { background: #3a424e; }
/* Short number headers may wrap, so the widest list (Types) fits its grid column instead of spilling off the page. */
.kp-list th.num { white-space: normal; line-height: 1.25; }
.kp-list td.numin { width: 76px; } .kp-list td.numin input { text-align: center; width: 100%; }
.kp-lists { grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); }
.kp-list td.rowname-in { min-width: 150px; }
.kp-list td.mode { min-width: 84px; }