/* Layout concept: a chunky "sticker" game board. Big isometric scene on the left, a task card on the right, both outlined in ink with a hard offset shadow. */
:root {
  --paper: #E8F0EA;
  --paper-2: #DCE8DF;
  --card: #FFFFFF;
  --ink: #1C2830;
  --ink-2: #4A5B66;
  --ink-3: #7A8A94;
  --line: #C3D2CA;
  --letter: #FFC23D;
  --letter-deep: #C98A00;
  --ip: #2F6BFF;
  --ip-soft: #E3ECFF;
  --mac: #F2553F;
  --mac-soft: #FFE6E1;
  --ok: #1E9E62;
  --ok-soft: #DDF4E8;
  --bad: #D9412B;
  --bad-soft: #FDE5E0;
  --gold: #F4B400;
  --shadow: 4px 4px 0 var(--ink);
  --font-display: "Huninn", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { background: var(--paper); color: var(--ink); }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
a { color: var(--ip); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ip); outline-offset: 2px; }

.wrap {
  max-width: 1480px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Top bar */
.topbar { border-bottom: 2px solid var(--ink); background: var(--card); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-name { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.04em; }
.brand-sub { font-size: 13px; color: var(--ink-2); }
.nav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav a {
  text-decoration: none; color: var(--ink); font-size: 15px;
  padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card);
}
.nav a[aria-current="page"] { background: var(--letter); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-size: 17px; letter-spacing: 0.03em;
  padding: 10px 20px; border-radius: 14px; border: 2px solid var(--ink);
  background: var(--ink); color: #fff; cursor: pointer;
  box-shadow: 0 4px 0 #0A1014; transition: transform .08s ease, box-shadow .08s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #0A1014; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0A1014; }
.btn.alt { background: var(--card); color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.btn.go { background: var(--letter); color: var(--ink); box-shadow: 0 4px 0 var(--letter-deep); border-color: var(--letter-deep); }
.btn.small { font-size: 15px; padding: 6px 12px; border-radius: 10px; }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Level layout */
.level { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 22px; padding-block: 22px 40px; align-items: start; }
.stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.scene-card {
  position: relative; border: 2px solid var(--ink); border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow); background: #CFE6D2;
}
.scene-host { position: relative; width: 100%; aspect-ratio: 960 / 620; max-width: 100%; }
.scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-overlay { position: absolute; inset: 0; pointer-events: none; }
.scene-overlay > * { pointer-events: auto; }
.scene-tag {
  position: absolute; left: 14px; top: 12px; z-index: 3;
  font-family: var(--font-display); font-size: 15px; background: var(--card);
  border: 2px solid var(--ink); border-radius: 10px; padding: 2px 10px;
}
.stage-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.speed { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--ink-2); flex-wrap: wrap; }
.speed button {
  border: 2px solid var(--ink); background: var(--card); border-radius: 999px; padding: 2px 12px; cursor: pointer; font-size: 14px;
}
.speed button[aria-pressed="true"] { background: var(--letter); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; border: 1.5px solid var(--ink); }

/* Device labels + plates */
.dev-label {
  position: absolute; transform: translate(-50%, 6px); display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none; white-space: nowrap;
}
.dev-label b {
  font-family: var(--font-display); font-weight: 400; font-size: 13px; background: var(--card);
  border: 1.5px solid var(--ink); border-radius: 8px; padding: 0 7px; line-height: 1.6;
}
.plate { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; border-radius: 6px; padding: 0 6px; border: 1.5px solid; font-weight: 500; }
.plate.ip { background: var(--ip-soft); color: #1C46B8; border-color: var(--ip); }
.plate.gw { background: #F1F4F6; color: var(--ink-2); border-color: var(--ink-3); }
.plate.mac { background: var(--mac); color: #fff; border-color: #A82A18; font-size: 12px; }
.plate.bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.plate.flash { animation: flash .8s ease 2; }
@keyframes flash { 50% { transform: scale(1.15); } }
.zone-label {
  position: absolute; transform: translate(-50%, 0); font-size: 12px; color: #1C46B8; background: rgba(255,255,255,.85);
  border: 1.5px dashed var(--ip); border-radius: 8px; padding: 0 8px; white-space: nowrap; pointer-events: none;
}
.place-label {
  position: absolute; transform: translate(-50%, -100%); font-family: var(--font-display); font-size: 13px;
  background: var(--ink); color: #fff; border-radius: 8px; padding: 1px 9px; white-space: nowrap; pointer-events: none;
}

/* Thought bubbles */
.bubble {
  position: absolute; transform: translate(-50%, calc(-100% - 12px)); z-index: 5;
  width: max-content; max-width: 230px; background: var(--card); border: 2.5px solid var(--ink); border-radius: 16px;
  padding: 8px 12px; font-size: 14px; line-height: 1.55; box-shadow: 3px 3px 0 var(--ink);
  animation: pop .22s ease-out; pointer-events: none;
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -11px; width: 16px; height: 16px; background: var(--card);
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateX(calc(-50% + var(--tail, 0px))) rotate(45deg) scaleY(.7);
}
.bubble.below::after { bottom: auto; top: -11px; transform: translateX(calc(-50% + var(--tail, 0px))) rotate(225deg) scaleY(.7); }
.bubble .who { display: block; font-family: var(--font-display); font-size: 12px; color: var(--ink-2); }
.bubble.bad { border-color: var(--bad); box-shadow: 3px 3px 0 var(--bad); }
.bubble.bad::after { border-color: var(--bad); }
.bubble.ok { border-color: var(--ok); box-shadow: 3px 3px 0 var(--ok); }
.bubble.ok::after { border-color: var(--ok); }
@keyframes pop { from { transform: translate(-50%, calc(-100% - 2px)) scale(.7); opacity: 0; } }

/* Notebooks living in the scene */
.note {
  position: absolute; z-index: 4; background: #FFFCEF; border: 2px solid var(--ink); border-radius: 10px;
  padding: 6px 10px; font-size: 12px; line-height: 1.5; box-shadow: 3px 3px 0 var(--ink); min-width: 140px;
}
.note h4 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 13px; }
.note table { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: 12px; }
.note td { padding: 1px 4px; border-top: 1px dashed var(--line); }
.note .empty { color: var(--ink-3); font-style: normal; }
.note tr.new td { background: #FFF1B8; animation: flash .7s ease 1; }

/* Port hit targets in wiring mode */
.port-hit { cursor: pointer; }
.port-hit:hover .sock { filter: brightness(1.12); stroke-width: 3; }
.port-hit.sel .sock { stroke: var(--letter-deep); }
.cable-hit { cursor: pointer; }
.dev { cursor: default; }
.picking .dev { cursor: pointer; }
.picking .dev:hover { filter: brightness(1.08) drop-shadow(0 0 6px #FFC23D); }
.dev.picked { filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 8px #FFC23D); }

/* Panel */
.panel {
  position: sticky; top: 12px; background: var(--card); border: 2px solid var(--ink); border-radius: 20px;
  box-shadow: var(--shadow); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.lv-day { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); letter-spacing: .06em; }
.panel h1 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.35; margin: 2px 0 0; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.steps { display: flex; gap: 4px; list-style: none; padding: 0; margin: 4px 0 0; flex-wrap: wrap; }
.steps li {
  font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--ink-3); background: #fff;
}
.steps li.done { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.steps li.now { border-color: var(--ink); color: var(--ink); background: var(--letter); }
.lv-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lv-body p { margin: 0; }
.lv-body h2 { font-family: var(--font-display); font-weight: 400; font-size: 19px; margin: 0; }
.muted { color: var(--ink-2); font-size: 14px; }
.orig { font-size: 13px; color: var(--ink-2); border-top: 1.5px dashed var(--line); padding-top: 10px; }

.talk { display: flex; flex-direction: column; gap: 10px; }
.line { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; }
.line .say { background: #F4F8F5; border: 1.5px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 6px 12px; }
.line .say b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 13px; color: var(--ink-2); }
.line.narr { grid-template-columns: minmax(0, 1fr); }
.line.narr .say { background: var(--letter); border-color: var(--letter-deep); border-radius: 12px; font-family: var(--font-display); }
.avatar { width: 44px; height: 44px; }

.opts { display: flex; flex-direction: column; gap: 8px; }
.opt {
  text-align: left; border: 2px solid var(--ink); background: #fff; border-radius: 12px; padding: 8px 12px; cursor: pointer;
  display: flex; gap: 10px; align-items: center; font-size: 15px; line-height: 1.5;
}
.opt:hover { background: #FFF6DA; }
.opt[aria-pressed="true"] { background: var(--letter); }
.opt.right { background: var(--ok-soft); border-color: var(--ok); }
.opt.wrong { background: var(--bad-soft); border-color: var(--bad); }
.opt .k { font-family: var(--font-mono); font-size: 12px; border: 1.5px solid var(--ink); border-radius: 6px; padding: 0 6px; flex: none; }

.log { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.log-item { font-size: 14px; line-height: 1.55; border-left: 4px solid var(--line); padding: 2px 0 2px 10px; border-radius: 0; }
.log-item b { font-family: var(--font-display); font-weight: 400; color: var(--ink-2); margin-right: 6px; }
.log-item.bad { border-left-color: var(--bad); }
.log-item.ok { border-left-color: var(--ok); }
.result { border-radius: 12px; padding: 10px 14px; border: 2px solid; font-size: 15px; }
.result.ok { background: var(--ok-soft); border-color: var(--ok); }
.result.bad { background: var(--bad-soft); border-color: var(--bad); }
.result.info { background: #F4F8F5; border-color: var(--line); }

.explain { display: flex; flex-direction: column; gap: 10px; }
.concept { border: 2px solid var(--ink); border-radius: 14px; padding: 8px 12px; background: #fff; }
.concept h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.concept p { margin: 2px 0 0; font-size: 15px; }
.term { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }
.callout { background: #FFF6DA; border: 2px solid var(--letter-deep); border-radius: 14px; padding: 8px 12px; font-size: 15px; }
.mono { font-family: var(--font-mono); }

/* Mask machine */
.mask { border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; background: #FBFDFB; }
.mask-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: center; }
.mask-row label { font-size: 13px; color: var(--ink-2); }
.mask-row input { font-family: var(--font-mono); font-size: 15px; padding: 4px 8px; border: 2px solid var(--ink); border-radius: 8px; width: 100%; min-width: 0; }
.octets { display: flex; gap: 4px; font-family: var(--font-mono); font-size: 14px; grid-column: 2; flex-wrap: wrap; }
.oct { min-width: 46px; text-align: center; border: 1.5px solid var(--ink-3); border-radius: 6px; padding: 0 4px; background: #fff; position: relative; overflow: hidden; }
.oct.street { background: var(--ip-soft); border-color: var(--ip); color: #1C46B8; }
.oct.part { background: linear-gradient(90deg, var(--ip-soft) 0 50%, #fff 50% 100%); border-color: var(--ip); }
.mask-sel { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.mask-sel button { border: 2px solid var(--ink); background: #fff; border-radius: 8px; padding: 0 10px; font-family: var(--font-mono); cursor: pointer; }
.mask-sel button[aria-pressed="true"] { background: var(--letter); }
.verdict { font-family: var(--font-display); font-size: 16px; border-radius: 10px; padding: 4px 10px; }
.verdict.same { background: var(--ok-soft); color: #0F6B40; }
.verdict.diff { background: var(--bad-soft); color: var(--bad); }
.err { color: var(--bad); font-size: 13px; }

/* Plate editor */
.editor { border: 2px solid var(--ink); border-radius: 14px; padding: 12px; background: #FBFDFB; display: flex; flex-direction: column; gap: 10px; }
.addr { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 16px; flex-wrap: wrap; }
.addr input { width: 64px; font-family: var(--font-mono); font-size: 16px; padding: 3px 6px; border: 2px solid var(--ink); border-radius: 8px; text-align: center; }
.addr .fixed { color: var(--ink-2); }
.addr-label { font-size: 13px; color: var(--ink-2); }

/* Bag/envelope diagram */
.bagdemo { display: flex; justify-content: center; padding: 6px 0; }
.bag { background: var(--mac); color: #fff; border: 2px solid #A82A18; border-radius: 16px; padding: 8px 12px 12px; font-size: 13px; line-height: 1.5; }
.bag .mono { font-size: 12px; }
.envl { margin-top: 6px; background: var(--letter); color: var(--ink); border: 2px solid var(--letter-deep); border-radius: 6px; padding: 6px 10px; font-size: 13px; }
.books { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }

/* Stars + clear */
.stars { display: flex; gap: 10px; justify-content: center; }
.star-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--ink-2); }
.star { width: 46px; height: 46px; }
.star.got { animation: starpop .5s ease-out both; }
@keyframes starpop { from { transform: scale(.2) rotate(-40deg); } 70% { transform: scale(1.15); } }
.takeaway { word-break: keep-all; overflow-wrap: anywhere; font-family: var(--font-display); font-size: 20px; line-height: 1.5; background: var(--letter); border: 2px solid var(--letter-deep); border-radius: 14px; padding: 12px 14px; text-wrap: balance; }
details.adv { border: 2px solid var(--ink); border-radius: 14px; padding: 8px 12px; background: #fff; }
details.adv summary { cursor: pointer; font-family: var(--font-display); font-size: 16px; }
details.adv ul { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
details.adv li { margin-bottom: 6px; }
details.adv code, .lv-body code { font-family: var(--font-mono); font-size: 13px; background: #EEF3F0; border-radius: 5px; padding: 0 4px; }
.bin { overflow-x: auto; }
.bin table { font-family: var(--font-mono); font-size: 12px; border-collapse: collapse; }
.bin td { padding: 1px 8px 1px 0; white-space: nowrap; }

.cards-mini { display: flex; flex-wrap: wrap; gap: 8px; }

/* Collectible cards */
.card-tile {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center;
  border: 2px solid var(--ink); border-radius: 14px; padding: 8px 10px; background: #fff;
}
.card-tile .glyph {
  width: 46px; height: 46px; border-radius: 10px; border: 2px solid var(--ink); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-align: center; line-height: 1.1;
}
.card-tile b { font-family: var(--font-display); font-weight: 400; font-size: 15px; display: block; }
.card-tile span { font-size: 13px; color: var(--ink-2); line-height: 1.45; display: block; }
.card-tile.locked { background: transparent; border-style: dashed; border-color: var(--ink-3); }
.card-tile.locked .glyph { background: var(--paper-2); border-color: var(--ink-3); color: var(--ink-3); }

/* Modal */
.modal-back { position: fixed; inset: 0; background: rgba(20, 30, 36, .55); z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal {
  background: var(--card); border: 2px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow);
  max-width: 640px; width: 100%; max-height: calc(100% - 32px); overflow-y: auto; padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.modal h2 { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 0; }
.modal svg { width: 100%; height: auto; display: block; }
.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.part { border: 2px solid var(--ink); border-radius: 12px; padding: 6px 10px; font-size: 14px; }
.part b { font-family: var(--font-display); font-weight: 400; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.part i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--ink); display: inline-block; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  background: var(--ink); color: #fff; padding: 8px 16px; border-radius: 12px; font-size: 15px; max-width: calc(100% - 32px);
}

/* Map page */
.home { padding-block: 22px 48px; display: flex; flex-direction: column; gap: 26px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.hero h1 { word-break: keep-all; overflow-wrap: anywhere; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.15; margin: 0; letter-spacing: .02em; text-wrap: balance; }
.hero h1 em { font-style: normal; background: var(--letter); padding: 0 .12em; border-radius: 10px; }
.hero p { font-size: 17px; margin: 12px 0 18px; max-width: 34em; color: var(--ink-2); }
.hero-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.chip { font-size: 13px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 1px 10px; background: #fff; }
.map-card { border: 2px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; background: #CFE6D2; }
.map-card svg { display: block; width: 100%; height: auto; }
.map-plot { cursor: pointer; }
.map-plot:hover .plot-top { filter: brightness(1.1); }
.map-plot.locked { cursor: not-allowed; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin: 0; }
.districts { columns: 3 300px; column-gap: 14px; }
.districts .district { break-inside: avoid; margin-bottom: 14px; }
.district { border: 2px solid var(--ink); border-radius: 18px; background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.district h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.district h3 i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--ink); display: inline-block; }
.district p.d { margin: 0; font-size: 14px; color: var(--ink-2); }
.lvl-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-decoration: none; color: var(--ink);
  border-top: 1.5px dashed var(--line); padding-top: 6px;
}
.lvl-row .n { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.lvl-row .t { font-size: 14px; line-height: 1.45; }
.lvl-row .t small { display: block; color: var(--ink-3); font-size: 12px; }
.lvl-row.open .t { font-weight: 500; }
.lvl-row.open:hover .t { text-decoration: underline; }
.lvl-row .st { font-size: 12px; white-space: nowrap; }
.badge { border-radius: 999px; padding: 0 8px; border: 1.5px solid; font-size: 12px; }
.badge.open { background: var(--letter); border-color: var(--letter-deep); }
.badge.soon { color: var(--ink-3); border-color: var(--line); }
.badge.done { background: var(--ok-soft); color: #0F6B40; border-color: var(--ok); }
.dex { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.credit { border-top: 2px solid var(--ink); padding-top: 14px; font-size: 14px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Spec page */
.spec { padding-block: 26px 48px; display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.spec h1 { font-family: var(--font-display); font-weight: 400; font-size: 36px; margin: 0; }
.spec h2 { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 8px 0 0; }
.spec p, .spec li { max-width: 46em; }
.spec .tbl { overflow-x: auto; border: 2px solid var(--ink); border-radius: 14px; background: #fff; }
.spec table { border-collapse: collapse; width: 100%; font-size: 14px; }
.spec th, .spec td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { font-family: var(--font-display); font-weight: 400; background: var(--paper-2); }
.decisions { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.decision { border: 2px solid var(--ink); border-radius: 14px; background: #fff; padding: 10px 12px; }
.decision b { font-family: var(--font-display); font-weight: 400; font-size: 16px; display: block; }
.decision span { font-size: 14px; color: var(--ink-2); }

@media (max-width: 1080px) {
  .level { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; }
  .hero { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

.streets { display: flex; flex-direction: column; gap: 4px; border-top: 1.5px dashed var(--line); padding-top: 8px; }
.st-row { display: grid; grid-template-columns: 7.5em auto minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; }
.st-row > span { color: var(--ink-2); }
.st-row em { font-style: normal; font-size: 13px; border-radius: 999px; padding: 0 8px; justify-self: start; }
.st-row.ok em { background: var(--ok-soft); color: #0F6B40; }
.st-row.bad em { background: var(--bad-soft); color: var(--bad); }
.callout p { margin: 0 0 4px; }
.callout p:last-child { margin-bottom: 0; }

.street-pic { width: 100%; height: auto; display: block; }
.hint-pic { background: #FFF6DA; border: 2px solid var(--letter-deep); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.hint-pic p { margin: 0; }
.answer-pic { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.answer-pic p { margin: 0; }
.answer-pic .street-pic { background: #fff; border-radius: 10px; padding: 4px; }

.cable-label { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: #fff; border: 1.5px solid var(--ink); border-radius: 6px; padding: 0 5px; white-space: nowrap; pointer-events: none; }
.cable-label.cost { background: #FFF1B8; }
.cable-label.dim { color: var(--ink-3); border-color: var(--ink-3); }
.note.sign { background: #F6E7C8; border-color: #6B4F2A; box-shadow: 3px 3px 0 #6B4F2A; }
.note.sign h4::before { content: "告示牌・"; color: #6B4F2A; }
.note.guard { background: #FFF0F0; border-color: #A12A2F; box-shadow: 3px 3px 0 #A12A2F; }
.note.ledger { background: #EEF6FF; border-color: #1C46B8; box-shadow: 3px 3px 0 #1C46B8; }
.note .code { display: inline-block; min-width: 2.2em; font-weight: 700; color: #6B4F2A; margin-right: 4px; }
.note tr.hit td { background: #DDF4E8; }
.note tr.deny td { background: #FDE5E0; }
.note tr.dimrow td { color: var(--ink-3); }

/* kit: route editor + ACL editor */
.kit { border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: #FBFDFB; display: flex; flex-direction: column; gap: 8px; }
.kit-routes { background: #FBF4E6; border-color: #6B4F2A; }
.kr-head { font-family: var(--font-display); font-size: 15px; }
.kr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.kr-row select { font-family: var(--font-mono); font-size: 13px; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 4px; background: #fff; max-width: 100%; }
.kr-k { color: var(--ink-2); font-size: 13px; }
.kr-fixed { font-size: 13px; background: #fff; border: 1.5px dashed var(--ink-3); border-radius: 8px; padding: 0 6px; }
.kr-del { border: 2px solid var(--ink); background: #fff; border-radius: 8px; width: 28px; height: 28px; cursor: pointer; }
.kit-acl { background: #FFF6F6; border-color: #A12A2F; }
.ka-row { display: grid; grid-template-columns: 22px 56px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14px; border-top: 1px dashed var(--line); padding-top: 6px; }
.ka-n { font-family: var(--font-mono); font-weight: 700; text-align: center; }
.ka-act { border: 2px solid var(--ink); border-radius: 8px; font-family: var(--font-display); font-size: 13px; padding: 1px 6px; cursor: pointer; text-align: center; }
.ka-row.permit .ka-act { background: var(--ok-soft); color: #0F6B40; border-color: var(--ok); }
.ka-row.deny .ka-act { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.ka-ghost { color: var(--ink-3); }
.ka-ghost .ka-act { border-style: dashed; border-color: var(--ink-3); cursor: default; }
.ka-mv { display: flex; gap: 4px; }
.ka-mv button { border: 2px solid var(--ink); background: #fff; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; }
.ka-mv button:disabled { opacity: .3; cursor: default; }

/* Day 04 hop diagram, Day 07 LPM table */
.hops { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center; }
.hop { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hop-k { font-size: 12px; color: var(--ink-2); }
.hop-arrow { font-size: 13px; color: var(--ink-2); font-family: var(--font-display); }
.lpm { border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: #FBFDFB; display: flex; flex-direction: column; gap: 8px; }
.lpm-t { border-collapse: collapse; width: 100%; font-size: 13px; }
.lpm-t td { padding: 3px 6px; border-top: 1px dashed var(--line); }
.lpm-t tr.miss td { color: var(--ink-3); }
.lpm-t tr.hit td { background: #F4F8F5; }
.lpm-t tr.win td { background: var(--letter); font-weight: 500; }

/* batch b — Day 08–15 (OSPF district) */
.b-costs { gap: 8px; }
.b-num { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; align-items: center; font-size: 14px; }
.b-num input, .b-sel select { font-family: var(--font-mono); font-size: 15px; padding: 3px 6px; border: 2px solid var(--ink); border-radius: 8px; width: 100%; min-width: 0; text-align: center; background: #fff; }
.b-fixed { font-size: 14px; color: var(--ink-2); }
.b-paths { display: flex; flex-direction: column; gap: 4px; border: 2px dashed var(--line); border-radius: 12px; padding: 8px 12px; font-size: 14px; }
.b-win { font-style: normal; font-size: 12px; background: var(--ok-soft); color: #0F6B40; border-radius: 999px; padding: 0 8px; margin-left: 6px; }
.b-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-family: var(--font-display); }
.b-chips i { font-style: normal; color: var(--ink-3); }
.b-chip { font-size: 12px; border: 1.5px solid var(--line); border-radius: 999px; padding: 0 7px; background: #fff; color: var(--ink-3); }
.b-chip.done { border-color: var(--ok); background: var(--ok-soft); color: #0F6B40; }
.b-chip.now { border-color: var(--ink); background: var(--letter); color: var(--ink); }
.b-chip.stuck { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.note.b-stage { max-width: 420px; }
.b-steps { display: flex; flex-direction: column; gap: 6px; }
.b-steps > div { border: 2px solid var(--ink); border-radius: 12px; padding: 6px 10px; background: #fff; font-size: 14px; }
.b-steps b { font-family: var(--font-display); font-weight: 400; display: block; font-size: 15px; }
.b-sel { grid-template-columns: minmax(0, 1fr) 190px; }
.b-closed { margin: 0; color: var(--ink-3); font-size: 12px; }
.b-sq { display: inline-block; min-width: 22px; text-align: center; font-size: 10px; font-weight: 700; border: 1.5px solid var(--ink); border-radius: 4px; margin-right: 2px; padding: 0 1px; }
.b-sq.have { background: #8EDFB8; }
.b-sq.miss { background: #fff; color: var(--ink-3); border-style: dashed; border-color: var(--ink-3); }
.b-sq.old { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.b-sq.upd { background: #FFC23D; }
.b-legend { margin: 4px 0 0; font-size: 11px; color: var(--ink-2); }
.b-q { font-family: var(--font-display); font-size: 16px; }
.b-mesh { border: 2px solid var(--ink); border-radius: 14px; padding: 8px 12px; background: #FBFDFB; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.b-mesh input { width: 100%; }
.b-mesh p { margin: 0; }
.note.b-roles td:nth-child(2) { text-align: center; }
.b-pile { display: flex; flex-direction: column; gap: 6px; }
.b-card { border: 2px solid var(--ink); border-radius: 10px; background: #FFFCEF; padding: 4px 10px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.b-card:hover { background: #FFF6DA; }
.b-card.sel { background: var(--letter); box-shadow: 0 0 0 3px var(--letter-deep); }
.b-card.in { font-size: 13px; background: #fff; margin-top: 4px; }
.b-from { display: block; font-size: 12px; color: var(--ink-2); font-family: var(--font-display); }
.b-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.b-box { border: 2px solid var(--ink); border-radius: 12px; padding: 6px 8px; background: color-mix(in srgb, var(--bf, #fff) 35%, #fff); display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.b-box b { font-family: var(--font-display); font-weight: 400; font-size: 14px; }
.b-box span { color: var(--ink-2); font-size: 12px; }
.b-box.bin { cursor: pointer; min-height: 90px; border-style: dashed; }
.b-box.bin:hover { border-style: solid; }
.b-k { font-family: var(--font-mono); font-weight: 700; border: 1.5px solid var(--ink); border-radius: 5px; padding: 0 5px; margin-right: 6px; font-size: 11px; color: var(--ink); }
.b-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.b-check input { width: 18px; height: 18px; }
.note.b-cmd pre { margin: 0; font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; }
/* end batch b */

/* batch d — Day 20–24 (城門哨站、住宅公寓) */
.note .kd-foot { margin: 4px 0 0; font-size: 11px; color: #A12A2F; font-family: var(--font-display); }
.note.guard h4 { color: #A12A2F; }
.note.guard td:first-child { white-space: nowrap; }
.note.ledger h4 { color: #1C46B8; }
.note.ledger td { white-space: nowrap; }
.note.ledger tr.kd-lh td { font-family: var(--font-display); font-size: 11px; color: var(--ink-2); border-top: none; }
.note.ledger tr.kd-static td { color: #6B2FB8; }
.note .kd-tagx { margin-left: 4px; font-family: var(--font-display); font-size: 10px; background: #EFE6FF; color: #6B2FB8; border-radius: 999px; padding: 0 6px; }
.note.memo { background: #F4F0FF; border-color: #6B4FD6; box-shadow: 3px 3px 0 #6B4FD6; }
.note.memo td { white-space: nowrap; }
.note.memo h4 { color: #4A3BB8; }
.note .kd-empty { margin: 0; font-size: 12px; color: var(--ink-2); max-width: 240px; }
.kd-tray { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.kd-tray select, .kd-f select { font-size: 13px; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 4px; background: #fff; max-width: 100%; min-width: 0; }
.kd-tray select { flex: 1 1 220px; }
.kd-del { border: 2px solid var(--ink); background: #fff; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; }
.kd-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.kd-seg button { border: 2px solid var(--ink); background: #fff; border-radius: 10px; padding: 2px 10px; font-size: 14px; cursor: pointer; text-align: left; }
.kd-seg button[aria-pressed="true"] { background: var(--letter); }
.kd-set { background: #FBFDFB; }
.kd-f { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 8px; align-items: center; font-size: 14px; }
.kd-f span { color: var(--ink-2); font-size: 13px; }
.kd-demo { border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: #FFF6F6; display: flex; flex-direction: column; gap: 8px; }
.kd-pick { border: 2px solid #1C46B8; background: #EEF6FF; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.kd-chk { display: flex; gap: 8px; align-items: center; font-size: 14px; border-top: 1px dashed var(--line); padding-top: 6px; }
.kd-chk input { width: 18px; height: 18px; accent-color: #A12A2F; }
.kd-checks { display: flex; flex-direction: column; gap: 4px; }
.kd-check { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14px; border: 1.5px solid var(--line); border-radius: 10px; padding: 3px 8px; background: #fff; }
.kd-check i { font-style: normal; font-family: var(--font-mono); font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ink-3); color: var(--ink-3); font-size: 12px; }
.kd-check em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.kd-check.ok { border-color: var(--ok); background: var(--ok-soft); }
.kd-check.ok i { background: var(--ok); border-color: var(--ok); color: #fff; }
.kd-check.ok em { color: #0F6B40; }
.kd-check.bad { border-color: var(--bad); background: var(--bad-soft); }
.kd-check.bad i { background: var(--bad); border-color: var(--bad); color: #fff; }
.kd-check.bad em { color: var(--bad); }
.kd-found { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.kd-found > div { border: 2px solid var(--ink); border-radius: 12px; padding: 4px 10px; background: #fff; display: flex; flex-direction: column; }
.kd-found span { font-size: 12px; color: var(--ink-2); }
.kd-found b { font-size: 16px; }
.kd-step2 { display: flex; flex-direction: column; gap: 8px; border-top: 1.5px dashed var(--line); padding-top: 10px; }
.kd-range { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); margin-top: 6px; }
.kd-range i { position: relative; height: 10px; border-radius: 999px; background: #E3EAF0; border: 1.5px solid var(--ink-3); }
.kd-range i b { position: absolute; top: -5px; width: 4px; height: 18px; background: var(--bad); border-radius: 2px; }
.kd-fwd .kr-row select { font-size: 13px; }

/* batch c — Day 16–19 辦公大樓（色標 VLAN） */
.c-chip { display: inline-block; color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1.5; border-radius: 6px; padding: 0 6px; border: 1.5px solid #1C2830; white-space: nowrap; }
.note.cfg { background: #F6F4FF; border-color: #4B3FB8; box-shadow: 3px 3px 0 #4B3FB8; }
.note.cfg td { vertical-align: middle; white-space: nowrap; }
.note .c-on { font-weight: 700; color: #0F6B40; }
.note .c-off { font-weight: 700; color: var(--bad); }
.c-card { border: 2px solid #4B3FB8; border-radius: 14px; padding: 10px 12px; background: #F6F4FF; display: flex; flex-direction: column; gap: 8px; }
.c-card + .c-card { margin-top: 10px; }
.c-head { font-family: var(--font-display); font-size: 15px; }
.c-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.c-row .k { color: var(--ink-2); font-size: 13px; min-width: 7.5em; }
.c-row select { font-family: var(--font-mono); font-size: 13px; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 4px; background: #fff; max-width: 100%; }
.c-ports { display: flex; flex-direction: column; gap: 8px; }
.c-port { display: flex; flex-direction: column; gap: 3px; border-top: 1px dashed var(--line); padding-top: 6px; }
.c-port .who { font-size: 13px; line-height: 1.4; }
.c-port .who .muted { font-size: 11px; }
.c-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.c-seg button { border: 2px solid var(--ink); background: #fff; border-radius: 8px; padding: 0 9px; font-size: 13px; line-height: 1.7; cursor: pointer; }
.c-seg button[aria-pressed="true"] { background: var(--sel, var(--letter)); color: var(--sel-ink, var(--ink)); box-shadow: inset 0 0 0 2px #fff; }
.c-check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.c-check input { width: 16px; height: 16px; accent-color: #4B3FB8; }
.c-pic { width: 100%; height: auto; display: block; background: #fff; border: 2px solid var(--ink); border-radius: 12px; }
.c-steps { margin: 0; padding-left: 22px; font-size: 15px; }
.c-steps li { margin-bottom: 4px; }
.c-tbl { overflow-x: auto; border: 2px solid var(--ink); border-radius: 12px; background: #fff; }
.c-tbl table { border-collapse: collapse; width: 100%; font-size: 13px; }
.c-tbl th, .c-tbl td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.c-tbl th { font-family: var(--font-display); font-weight: 400; background: var(--paper-2); }
/* end batch c */
.kd-res { border-radius: 12px; padding: 8px 12px; border: 2px solid; font-size: 15px; }
.kd-res.ok { background: var(--ok-soft); border-color: var(--ok); }
.kd-res.bad { background: var(--bad-soft); border-color: var(--bad); }
.kd-diag { display: flex; flex-direction: column; gap: 8px; }

/* season 2: LEDs, terminal window, SOP ladder, tickets */
.led-blink { animation: ledblink .9s steps(2, start) infinite; }
.led-flicker { animation: ledflick 2.6s linear infinite; }
@keyframes ledblink { to { opacity: .15; } }
@keyframes ledflick { 0%, 70% { opacity: 1; } 72% { opacity: .1; } 74% { opacity: 1; } 86% { opacity: .1; } 90%, 100% { opacity: 1; } }
.note.term { background: #0C1115; color: #D7E3EA; border-color: #0C1115; box-shadow: 3px 3px 0 #3A444C; padding: 0; overflow: hidden; }
.note.term .term-bar { background: #2B343B; color: #C3CBD2; font-family: var(--font-body); font-size: 11px; padding: 2px 8px; display: flex; justify-content: space-between; }
.note.term pre { margin: 0; padding: 6px 10px 8px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; max-height: 230px; overflow: auto; }
.note.term .hl { color: #FFC23D; font-weight: 700; }
.note.term .bad { color: #FF7A6B; font-weight: 700; }
.note.term .ok { color: #5BE08F; font-weight: 700; }
.note.ladder { min-width: 170px; }
.ladder-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: 12px; border-top: 1px dashed var(--line); padding: 2px 0; }
.ladder-row b { font-family: var(--font-mono); font-size: 11px; text-align: center; border: 1.5px solid var(--ink); border-radius: 6px; }
.ladder-row .st { font-size: 11px; border-radius: 999px; padding: 0 6px; white-space: nowrap; }
.ladder-row .st.todo { color: var(--ink-3); border: 1px dashed var(--ink-3); }
.ladder-row .st.ok { background: var(--ok-soft); color: #0F6B40; }
.ladder-row .st.bad { background: var(--bad-soft); color: var(--bad); font-weight: 700; }
.ticket { border: 2px solid var(--ink); border-radius: 14px; background: #FFFDF5; overflow: hidden; }
.ticket-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; background: var(--ink); color: #fff; padding: 4px 12px; font-family: var(--font-mono); font-size: 12px; }
.ticket-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ticket-meta { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 2px 8px; font-size: 13px; color: var(--ink-2); }
.ticket-meta b { color: var(--ink); font-weight: 500; }
.ticket-quote { font-family: var(--font-display); font-size: 18px; background: #fff; border: 1.5px dashed var(--ink-3); border-radius: 10px; padding: 6px 10px; }
.prio { border-radius: 999px; padding: 0 8px; font-size: 12px; border: 1.5px solid; }
.prio.p1 { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.prio.p2 { background: #FFF1B8; color: #854F0B; border-color: var(--letter-deep); }
.prio.p3 { background: #F4F8F5; color: var(--ink-2); border-color: var(--line); }
.chat { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; padding-right: 4px; }
.chat .q, .chat .a { border-radius: 12px; padding: 5px 10px; font-size: 14px; max-width: 88%; }
.chat .q { align-self: flex-end; background: #E3ECFF; border: 1.5px solid var(--ip); border-bottom-right-radius: 3px; }
.chat .a { align-self: flex-start; background: #F4F8F5; border: 1.5px solid var(--line); border-bottom-left-radius: 3px; }
.chat .a b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 12px; color: var(--ink-2); }
.symptoms { display: flex; flex-wrap: wrap; gap: 6px; }
.symptom { background: #FFF1B8; border: 1.5px solid var(--letter-deep); border-radius: 8px; padding: 1px 8px; font-size: 13px; }
.symptoms .empty { color: var(--ink-3); font-size: 13px; }
.toolbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.tool { border: 2px solid var(--ink); background: #fff; border-radius: 12px; padding: 6px 8px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 1px; }
.tool:hover { background: #FFF6DA; }
.tool[aria-pressed="true"] { background: var(--letter); }
.tool b { font-family: var(--font-display); font-weight: 400; font-size: 14px; }
.tool span { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
.tool.reboot { border-style: dashed; }
.targets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.targets button { border: 2px solid var(--ink); background: #fff; border-radius: 999px; padding: 1px 10px; cursor: pointer; font-size: 13px; }
.targets button:hover { background: #FFF6DA; }
.clues .log-item .lay { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--ink-3); border-radius: 5px; padding: 0 4px; margin-right: 6px; color: var(--ink-2); }
.report { border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: #FFFDF5; display: flex; flex-direction: column; gap: 8px; }
.report label { font-size: 13px; color: var(--ink-2); }
.report select { font-size: 14px; border: 2px solid var(--ink); border-radius: 8px; padding: 3px 6px; width: 100%; max-width: 100%; background: #fff; }
.season-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.season-tabs a { text-decoration: none; color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; padding: 6px 14px; background: var(--card); display: flex; flex-direction: column; line-height: 1.3; }
.season-tabs a small { font-size: 12px; color: var(--ink-2); }
.season-tabs a[aria-current="page"] { background: var(--letter); box-shadow: 0 3px 0 var(--letter-deep); }
.bldg-room { cursor: pointer; }
.bldg-room:hover .room-glass { filter: brightness(1.08); }
.bldg-room.locked { cursor: not-allowed; }

.toolbox.busy { opacity: .55; pointer-events: none; }

/* s2 batch C */
.c10-clock { float: right; font-family: var(--font-mono); font-size: 12px; background: var(--ink); color: #fff; border-radius: 6px; padding: 0 6px; }
.c10-tl { display: flex; flex-direction: column; gap: 3px; }
.c10-row { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 6px; align-items: center; font-size: 11px; }
.c10-row > span { white-space: nowrap; color: var(--ink-2); }
.c10-bar { display: flex; height: 12px; border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden; background: #EEF3F0; }
.c10-bar i { flex: 1 1 0; min-width: 0; }
.c10-bar i.ok { background: #2FCB72; }
.c10-bar i.bad { background: #E5484D; }
.c10-bar i.todo { background: #EEF3F0; }
.c10-axis > div { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.c10-axis b { font-weight: 500; }
.c10-sum { margin: 3px 0 0; font-size: 12px; }
.c10-sum .bad { color: var(--bad); font-weight: 700; }
.c10-sum .ok { color: #0F6B40; font-weight: 700; }
/* end s2 batch C */

/* s2 batch D — S2-11～13（色標排錯） */
.d-cli { margin: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; background: #0C1115; color: #D7E3EA; border-radius: 10px; padding: 6px 10px; white-space: pre-wrap; word-break: break-word; }
.d-cli .p { color: #5BE08F; }
.note .d-hist { margin-top: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); line-height: 1.4; border-top: 1px dashed var(--line); padding-top: 3px; }
.c-card .c-on { font-weight: 700; color: #0F6B40; }
.c-card .c-off { font-weight: 700; color: var(--bad); }
.c-tbl .d-nw { white-space: nowrap; }
/* end s2 batch D */

/* s2 batch b — S2-04～07: path builder, topology / plan / DORA / change notes */
.b2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.b2-chip { border: 2px solid var(--ink); background: #fff; border-radius: 999px; padding: 3px 12px; font-size: 14px; cursor: pointer; font-family: inherit; }
.b2-chip:hover { background: #FFF6DA; }
.b2-chip:disabled { opacity: .35; cursor: default; background: #EEF3F0; }
.b2-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 30px; border: 2px dashed var(--ink-3); border-radius: 12px; padding: 4px 8px; background: #FBFDFB; font-size: 13px; }
.b2-path span { background: #E3ECFF; border: 1.5px solid #3A8DDE; border-radius: 8px; padding: 0 6px; }
.b2-path span.empty { background: none; border: none; color: var(--ink-3); }
.b2-path i { font-style: normal; color: var(--ink-2); }
.note.b2-topo { background: #F3F7FF; border-color: #1C46B8; box-shadow: 3px 3px 0 #1C46B8; }
.note.b2-topo h4 { color: #1C46B8; }
.note.b2-plan { background: #F2FBF6; border-color: #0F6B55; box-shadow: 3px 3px 0 #0F6B55; }
.note.b2-plan h4 { color: #0F6B55; }
.note.b2-dora { background: #FFFBEA; border-color: #854F0B; box-shadow: 3px 3px 0 #854F0B; }
.note.b2-dora h4 { color: #854F0B; }
.note.b2-chg { background: #F7F4FF; border-color: #4B3FB8; box-shadow: 3px 3px 0 #4B3FB8; }
.note.b2-chg h4 { color: #4B3FB8; }
.note.b2-topo td, .note.b2-plan td, .note.b2-dora td, .note.b2-chg td { font-family: var(--font-body); font-size: 12px; vertical-align: top; }
.note.b2-topo td:first-child, .note.b2-plan td:first-child, .note.b2-chg td:first-child { white-space: nowrap; font-family: var(--font-mono); }
.note tr.b2-cur td { background: #FFF1B8; font-weight: 700; }
.note .b2-foot { margin: 4px 0 0; font-size: 12px; color: #A12A2F; font-family: var(--font-display); }
.note .b2-q { color: var(--ink-2); font-size: 11px; }
.note.b2-guard td { font-family: var(--font-body); font-size: 11px; vertical-align: top; }
.note.b2-guard td:first-child, .note.b2-guard td:last-child { white-space: nowrap; }
.b2-wire { font-size: 14px; line-height: 1.6; }
/* end s2 batch b */

/* season 3: budget, gauges, drill events, build options */
.b3-budget { border: 2px solid var(--ink); border-radius: 12px; padding: 6px 10px; background: #FBFDFB; display: flex; flex-direction: column; gap: 4px; }
.b3-bud-row { display: flex; justify-content: space-between; font-size: 14px; }
.b3-bud-row b.bad { color: var(--bad); }
.b3-bar { height: 10px; border-radius: 999px; background: #E3EAE5; overflow: hidden; border: 1.5px solid var(--ink); }
.b3-bar i { display: block; height: 100%; background: var(--ok); }
.b3-bar i.bad { background: var(--bad); }
.b3-needs { margin: 0; padding-left: 20px; font-size: 14px; }
.g3-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.g3 { display: flex; flex-direction: column; align-items: center; gap: 0; border: 2px solid var(--ink); border-radius: 14px; padding: 6px 10px 8px; background: #fff; min-width: 150px; }
.g3 svg { width: 128px; height: 76px; }
.g3 b { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.2; }
.g3 b.bad { color: var(--bad); }
.g3 span { font-size: 13px; color: var(--ink-2); }
.g3 small { font-size: 11px; color: var(--ink-3); }
.b3-events { display: flex; flex-direction: column; gap: 6px; }
.b3-ev { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 2px solid var(--line); border-radius: 12px; padding: 5px 10px; background: #fff; }
.b3-ev-n { font-family: var(--font-mono); font-weight: 700; text-align: center; }
.b3-ev-t b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 15px; }
.b3-ev-t small { display: block; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.b3-ev-s { font-size: 13px; text-align: right; color: var(--ink-3); }
.b3-ev-s small { display: block; font-family: var(--font-mono); font-size: 11px; }
.b3-ev.run { border-color: var(--letter-deep); background: #FFF6DA; }
.b3-ev.ok { border-color: var(--ok); background: var(--ok-soft); }
.b3-ev.ok .b3-ev-s { color: #0F6B40; }
.b3-ev.bad { border-color: var(--bad); background: var(--bad-soft); }
.b3-ev.bad .b3-ev-s { color: var(--bad); font-weight: 700; }
.b3-groups { display: flex; flex-direction: column; gap: 10px; }
.b3-group { border: 2px solid var(--ink); border-radius: 14px; padding: 6px 10px 10px; margin: 0; background: #FBFDFB; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.b3-group legend { font-family: var(--font-display); font-size: 15px; padding: 0 6px; }
.b3-help { margin: 0; font-size: 13px; color: var(--ink-2); }
.b3-choice { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; border: 2px solid var(--line); border-radius: 10px; background: #fff; padding: 5px 8px; cursor: pointer; }
.b3-choice:hover { border-color: var(--ink); }
.b3-choice.on { border-color: var(--ink); background: #FFF6DA; }
.b3-tick { font-size: 15px; }
.b3-txt b { display: block; font-weight: 500; font-size: 14px; }
.b3-txt small { display: block; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.b3-cost { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.b3-count { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b3-count button { width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; cursor: pointer; font-size: 16px; }
.b3-count b { font-size: 18px; min-width: 1.5em; text-align: center; }

/* s3 batch d */
.d3-rules { gap: 6px; }
.d3-sec { font-family: var(--font-display); font-size: 13px; color: var(--ink-2); border-top: 2px dashed var(--line); padding-top: 4px; margin-top: 2px; }
.d3-rule { display: grid; grid-template-columns: auto 1.6em 2.6em minmax(0, 1fr) auto; gap: 6px; align-items: center; border: 2px solid var(--line); border-radius: 10px; padding: 4px 6px; background: #fff; font-size: 13px; line-height: 1.4; }
.d3-rule.pass { border-left: 6px solid var(--ok); }
.d3-rule.block { border-left: 6px solid var(--bad); }
.d3-rule.off { opacity: .55; background: #F1F4F2; }
.d3-rule.off .d3-txt { text-decoration: line-through; }
.d3-rule.d3-final { grid-template-columns: 1.6em 2.6em minmax(0, 1fr); background: var(--bad-soft); margin-left: 0; }
.d3-mv { display: flex; flex-direction: column; gap: 2px; }
.d3-mv button, .d3-tg button { border: 1.5px solid var(--ink); border-radius: 6px; background: #fff; cursor: pointer; font-size: 11px; line-height: 1.2; padding: 1px 5px; }
.d3-mv button:disabled { opacity: .3; cursor: default; }
.d3-tg { display: flex; flex-direction: column; gap: 2px; }
.d3-tg button[aria-pressed="true"] { background: var(--letter); }
.d3-act { font-weight: 700; font-size: 12px; }
.d3-rule.pass .d3-act { color: var(--ok); }
.d3-rule.block .d3-act { color: var(--bad); }
.d3-txt { min-width: 0; }
.note .d3-lg { display: inline-block; margin-left: 3px; padding: 0 3px; border-radius: 4px; background: #A12A2F; color: #fff; font-size: 10px; line-height: 1.4; }
.note.d3-w td { font-family: var(--font-body); font-size: 11.5px; }
.d3-mx table { border-collapse: collapse; width: 100%; font-size: 13px; }
.d3-mx th, .d3-mx td { border-top: 1px dashed var(--line); padding: 3px 4px; text-align: center; }
.d3-mx th:first-child { text-align: left; font-weight: 500; }
.d3-mx th small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-2); line-height: 1.3; }
.d3-mx thead th { font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.d3-cell { width: 34px; height: 28px; border: 2px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-weight: 700; color: var(--ink-3); }
.d3-cell[aria-pressed="true"] { border-color: var(--ink); background: var(--ok-soft); color: #0F6B40; }
.d3-sign .kr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; border-top: 1px dashed var(--line); padding-top: 4px; }
.d3-sign .kr-row small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.d3-seg { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.d3-seg button { border: 0; background: #fff; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.d3-seg button + button { border-left: 2px solid var(--ink); }
.d3-seg button[aria-pressed="true"] { background: var(--letter); font-weight: 700; }
.d3-belt { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.d3-belt .d3-stop { border: 2px solid var(--ink); border-radius: 10px; padding: 3px 8px; text-align: center; font-size: 13px; background: #F4F6F8; position: relative; }
.d3-belt .d3-stop + .d3-slot::before, .d3-belt .d3-slot + .d3-stop::before { content: "↓"; position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font-size: 12px; color: var(--ink-2); }
.d3-slot { position: relative; margin: 6px 14% 6px; border: 2px dashed var(--ink-3); border-radius: 10px; padding: 4px 8px; background: #fff; cursor: pointer; font-size: 13px; line-height: 1.4; text-align: center; }
.d3-slot small { font-size: 11px; color: var(--ink-2); }
.d3-slot:hover { border-color: var(--ink); }
.d3-slot[aria-pressed="true"] { border: 2px solid var(--ink); background: var(--letter); font-weight: 700; }
.d3-slot.mirror { margin: 8px 0 0; border-style: dotted; }
.d3-slot.mirror::before { content: none !important; }
/* end s3 batch d */

/* s3 batch c */
.c3-place { gap: 6px; }
.c3-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; border-top: 1px dashed var(--line); padding-top: 6px; }
.c3-prow:first-of-type { border-top: none; }
.c3-pname b { display: block; font-weight: 500; font-size: 14px; }
.c3-pname small { display: block; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.c3-prow select { grid-column: 1 / -1; font-size: 13px; border: 2px solid var(--ink); border-radius: 8px; padding: 3px 4px; background: #fff; max-width: 100%; }
.c3-tbl table { border-collapse: collapse; width: 100%; font-size: 13px; }
.c3-tbl th { text-align: left; font-weight: 500; font-size: 12px; color: var(--ink-2); padding: 2px 4px; }
.c3-tbl td { border-top: 1px dashed var(--line); padding: 3px 4px; vertical-align: top; }
.c3-tbl td small { display: block; font-size: 11px; color: var(--ink-3); }
.c3-tbl td.mono b { color: #A12A2F; }
.c3-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ink); margin-right: 6px; vertical-align: -1px; }
/* end s3 batch c */

/* s3 batch g */
.note .g-foot { margin: 4px 0 0; font-size: 11px; color: #A12A2F; font-family: var(--font-display); }
.note .g-foot.ok { color: #0F6B40; }
.note.g-ledger td:first-child { white-space: nowrap; }
.note.g-ledger td:last-child { font-family: var(--font-body); }
.g28-tl.off { opacity: .6; }
.g28-read { display: flex; align-items: baseline; gap: 10px; }
.g28-read b { font-size: 26px; line-height: 1.1; }
.g28-read span { font-size: 13px; color: var(--ink-2); }
.g28-track { position: relative; height: 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: #E3EAE5; margin-top: 14px; }
.g28-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #BFE8D0; border-radius: 999px; }
.g28-kai { position: absolute; top: -17px; transform: translateX(-50%); font-size: 11px; color: #A12A2F; white-space: nowrap; }
.g28-kai::after { content: ""; position: absolute; left: 50%; top: 15px; width: 2px; height: 14px; background: #A12A2F; }
.g28-tl input[type=range] { width: 100%; margin: 2px 0 0; accent-color: var(--ink); }
.g28-ticks { position: relative; height: 16px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.g28-ticks span { position: absolute; transform: translateX(-50%); }
.g28-ticks span:first-child { transform: none; }
.g28-ticks span:last-child { transform: translateX(-100%); }
.g28-nudge { display: flex; gap: 4px; flex-wrap: wrap; }
.g28-nudge button { flex: 1 1 0; min-width: 52px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; font-size: 12px; padding: 3px 2px; cursor: pointer; }
.g28-nudge button:disabled { opacity: .45; cursor: not-allowed; }
.g28-prev { border-radius: 10px; border: 2px solid var(--line); padding: 6px 10px; font-size: 13px; line-height: 1.5; background: #fff; }
.g28-prev.ok { border-color: var(--ok); background: var(--ok-soft); }
.g28-prev.bad { border-color: var(--bad); background: var(--bad-soft); }
.g28-prev.warn { border-color: var(--letter-deep); background: #FFF6DA; }
.g29-rule { border: 2px solid var(--line); border-radius: 12px; padding: 6px 10px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.g29-rule.off { background: #F4F6F4; border-style: dashed; }
.g29-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.g29-name b { font-family: var(--font-display); font-weight: 400; font-size: 15px; }
.g29-miss { font-size: 12px; color: var(--bad); }
.g29-normal { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.g29-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; align-items: center; font-size: 13px; }
.g29-row > span:first-child { color: var(--ink-2); }
.g29-row select { width: 100%; font-size: 13px; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 4px; background: #fff; }
.g30-test { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; border: 2px solid var(--line); border-radius: 10px; background: #fff; padding: 5px 8px; cursor: pointer; }
.g30-test:hover { border-color: var(--ink); }
.g30-test.on { border-color: var(--ink); background: #FFF6DA; }
.g30-bar { position: relative; height: 22px; border: 1.5px solid var(--ink); border-radius: 6px; background: #F4F6F4; overflow: hidden; }
.g30-b { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; border: 1px solid rgba(28,40,48,.5); }
.g30-b.prep { background: #C3D2CA; }
.g30-b.test { background: #FFC23D; }
.g30-b.wait { background: repeating-linear-gradient(45deg, #fff 0 3px, #DCE8DF 3px 6px); }
.g30-b.batch { background: repeating-linear-gradient(45deg, #F7C1C1 0 4px, #E5484D 4px 8px); }
.g30-b.fake { background: #B4BDC4; }
.g30-end { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bad); z-index: 1; }
.g30-scale { position: relative; height: 16px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.g30-scale span { position: absolute; left: 0; }
.g30-scale span + span { transform: translateX(-50%); color: var(--bad); }
.g30-total { margin: 0; font-size: 13px; font-weight: 500; }
.g30-total.ok { color: #0F6B40; }
.g30-total.bad { color: var(--bad); }
.g30-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.g30-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 6px; padding: 1px 4px; border-radius: 6px; }
.g30-list li.wait { color: var(--ink-3); font-size: 11.5px; }
.g30-list li.batch { background: var(--bad-soft); }
.g30-list li.fake { color: var(--ink-3); text-decoration: line-through; }
.g30-list li.prep { background: #EEF3EF; }
.g30-list li.empty { display: block; color: var(--ink-3); }
.note.g30-plan td:first-child { white-space: nowrap; }
.note.g30-plan td:last-child { font-family: var(--font-body); }
.g30-banner { border: 2px solid var(--ink); border-radius: 14px; padding: 10px 14px; background: linear-gradient(120deg, #FFE9A8, #DDF4E8 55%, #E3ECFF); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.g30-banner b { font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.g30-banner span { font-size: 14px; color: var(--ink-2); }
.g30-rep td { font-size: 12.5px; }
.g30-rep tr:first-child td { color: var(--ink-3); font-size: 11.5px; }
.g30-find { color: var(--bad); font-weight: 700; }
.g30-recap, .g30-cert { margin: 4px 0 0; padding-left: 0; list-style: none; font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; }
.g30-recap a, .g30-cert a { font-family: var(--font-mono); font-size: 12px; margin-right: 6px; }
.g30-cert { max-height: 46vh; overflow: auto; }
.g30-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.g30-confetti i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; animation: g30fall 3s ease-in forwards; opacity: .9; }
@keyframes g30fall { to { transform: translateY(640px) rotate(540deg); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .g30-confetti { display: none; } }
/* end s3 batch g */

/* s3 batch e — S3-19～23: ID card, door rules, slider, host ballots, lease timeline */
.e3-idwrap { display: flex; flex-direction: column; gap: 10px; }
.e3-id { position: relative; border: 2px solid var(--ink); border-radius: 14px; padding: 8px 12px 10px; background: linear-gradient(135deg, #F3F7FF 0%, #FFFDF4 100%); box-shadow: 3px 3px 0 #1C46B8; }
.e3-id-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px dashed #9FB3D9; padding-bottom: 4px; margin-bottom: 4px; }
.e3-id-top b { font-family: var(--font-display); font-weight: 400; font-size: 15px; color: #1C46B8; }
.e3-seal { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #D9412B; color: #D9412B; font-size: 10px; line-height: 1.15; display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(-12deg); font-weight: 700; }
.e3-id-row { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 6px; font-size: 13px; padding: 2px 0; }
.e3-id-row > span { color: var(--ink-2); }
.e3-name { display: inline-block; font-style: normal; font-family: var(--font-mono); font-size: 12px; background: #fff; border: 1.5px solid #1C46B8; border-radius: 6px; padding: 0 5px; margin: 0 4px 2px 0; }
.e3-chips { display: flex; flex-direction: column; gap: 6px; }
.e3-chip { text-align: left; border: 2px solid var(--line); border-radius: 10px; background: #fff; padding: 4px 8px; font-family: var(--font-mono); font-size: 13px; cursor: pointer; }
.e3-chip small { display: block; font-family: var(--font-body); font-size: 12px; color: var(--ink-2); }
.e3-chip.on { border-color: var(--ink); background: #FFF6DA; }
.e3-chip.on::before { content: "☑ "; }
.e3-chip:not(.on)::before { content: "☐ "; }
.e3-chip:disabled { cursor: default; opacity: .8; }
.e3-range { width: 100%; accent-color: #1C2830; margin: 2px 0 0; }
.e3-ticks { display: flex; justify-content: space-between; gap: 4px; font-size: 12px; color: var(--ink-3); }
.e3-ticks span { flex: 1; text-align: center; }
.e3-ticks span:first-child { text-align: left; }
.e3-ticks span:last-child { text-align: right; }
.e3-ticks span.on { color: var(--ink); font-weight: 700; }
.e3-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.e3-rules li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px 28px 28px; gap: 5px; align-items: center; border: 2px solid var(--line); border-radius: 10px; background: #fff; padding: 4px 6px; font-size: 14px; }
.e3-rules li.deny { background: #FDE5E0; border-color: #E9A79B; }
.e3-rules button { width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; padding: 0; }
.e3-rules button:disabled { opacity: .3; cursor: default; }
.e3-rn { text-align: center; font-weight: 700; }
.e3-rt small { display: block; font-size: 12px; color: var(--ink-2); }
.e3-pool { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); }
.e3-add { border: 2px dashed var(--ink-3); background: #FBFDFB; border-radius: 999px; padding: 2px 10px; font-size: 13px; cursor: pointer; font-family: inherit; }
.e3-add:hover { border-style: solid; border-color: var(--ink); }
.e3-capbar { position: relative; height: 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: #E3EAE5; overflow: visible; margin: 4px 0 16px; }
.e3-capbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.e3-capbar i.free { background: #BFE8D0; }
.e3-capbar i.cap { background: repeating-linear-gradient(45deg, #F5A524 0 6px, #FFD27A 6px 12px); opacity: .9; }
.e3-capbar span { position: absolute; top: 15px; transform: translateX(-50%); font-size: 11px; color: var(--ink-2); white-space: nowrap; border-left: 2px solid var(--ink); padding-left: 3px; }
.note .e3-dbar { height: 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; margin: 2px 0 4px; }
.note .e3-dbar i { display: block; height: 100%; background: var(--ok); transition: width .25s; }
.note .e3-dbar i.warn { background: #F5A524; }
.note .e3-dbar i.bad { background: var(--bad); }
.e3-hostrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.e3-host { border: 2px solid #1E9E62; border-radius: 12px; background: #fff; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.e3-ballots { min-height: 22px; display: flex; gap: 3px; align-items: center; }
.e3-ballots i { width: 16px; height: 18px; border-radius: 4px; background: #B9B2F8; border: 1.5px dashed #1C2830; }
.e3-ballots em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.e3-host .b3-count { justify-content: center; gap: 6px; }
.e3-quorum { font-size: 14px; text-align: center; background: #EEEDFE; border-radius: 10px; padding: 4px 8px; }
.e3-step { display: grid; grid-template-columns: minmax(0, 1fr) 30px 4.6em 30px; gap: 6px; align-items: center; font-size: 14px; }
.e3-step button { width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; cursor: pointer; padding: 0; }
.e3-step button:disabled { opacity: .3; cursor: default; }
.e3-step b { text-align: center; font-size: 15px; }
.e3-sn small { display: block; font-size: 12px; color: var(--ink-2); }
.e3-rule { font-size: 13px; border-radius: 8px; padding: 3px 8px; }
.e3-rule.ok { background: var(--ok-soft); color: #0F6B40; }
.e3-rule.bad { background: var(--bad-soft); color: var(--bad); font-weight: 700; }
.e3-tl { width: 100%; height: auto; background: #fff; border: 1.5px solid var(--line); border-radius: 10px; }
/* end s3 batch e */

/* s3 batch b */
.plate.vote { background: #DDF4E8; color: #0F6B40; border-color: #1E9E62; font-weight: 700; }
.plate.novote { background: #EEF1F3; color: var(--ink-3); border-color: var(--ink-3); text-decoration: line-through; }
.bb-disks { gap: 6px; }
.bb-lay { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; border: 2px solid var(--line); border-radius: 10px; background: #fff; padding: 5px 8px; cursor: pointer; font: inherit; color: inherit; }
.bb-lay:hover { border-color: var(--ink); }
.bb-lay.on { border-color: var(--ink); background: #FFF6DA; }
.bb-dk { display: flex; gap: 3px; }
.bb-dk i { display: inline-grid; place-items: center; width: 19px; height: 24px; border: 1.5px solid #6F7C87; border-radius: 4px; background: #D7DEE4; font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #33424C; }
.bb-dk i.p { background: #FFF1B8; border-color: #C98A00; color: #7A5300; }
.bb-dk i.m { background: #E3ECFF; border-color: #3A8DDE; color: #1C46B8; }
.bb-status { margin: 0; min-height: 1.4em; font-size: 13px; }
.bb-vmrow { border-top: 1px dashed var(--line); padding-top: 6px; }
.bb-vmrow label { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.bb-vmrow .mono { min-width: 3.6em; font-weight: 700; }
.bb-sp { flex: 1; }
.bb-sw { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--ink); display: inline-block; }
.bb-chip { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid #1C2830; margin-right: 4px; vertical-align: -1px; }
.note .bb-wrap { white-space: normal; font-family: var(--font-body); }
.bb-board { display: flex; flex-direction: column; gap: 10px; }
.bb-bin { border: 2px solid var(--ink); border-radius: 14px; padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 6px; background: #FBFDFB; }
.bb-bin-tpl { background: #FFF8E1; border-color: #C98A00; }
.bb-bin-ci { background: #EEF4FF; border-color: #3A8DDE; }
.bb-bin-no { background: #F6F7F8; border-color: var(--ink-3); }
.bb-bin h4 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 15px; display: flex; align-items: baseline; gap: 8px; }
.bb-bin h4 small { font-family: var(--font-body); font-size: 12px; color: var(--ink-2); }
.bb-n { margin-left: auto; font-family: var(--font-mono); font-size: 12px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 7px; background: #fff; }
.bb-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; border: 2px solid var(--line); border-radius: 10px; background: #fff; padding: 5px 8px; }
.bb-mv { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.bb-mv button { font: inherit; font-size: 12px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; padding: 1px 8px; cursor: pointer; }
.bb-mv button:hover { background: #FFF6DA; }
.bb-mx-grid { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 4px 6px; align-items: center; font-size: 13px; }
.bb-mx-grid .mono { font-weight: 700; display: flex; flex-direction: column; line-height: 1.2; }
.bb-mx-grid .mono small { font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--ink-2); }
.bb-mx-h { font-size: 12px; color: var(--ink-2); text-align: center; }
.bb-mx-c { border: 2px solid var(--line); border-radius: 8px; background: #fff; padding: 3px 0; cursor: pointer; font-size: 15px; }
.bb-mx-c:hover { border-color: var(--ink); }
.bb-mx-c.on { border-color: var(--ink); background: #FFF6DA; }
.bb-mx-strict { display: flex; flex-direction: column; gap: 6px; }
/* end s3 batch b */

/* s3 batch f */
.f-order .f-step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 4px 6px 4px 8px; font-size: 14px; }
.f-order .f-num { font-weight: 700; text-align: center; background: #FFF1B8; border: 1.5px solid var(--ink); border-radius: 8px; line-height: 1.6; }
.f-order .f-mvs { display: flex; gap: 4px; }
.f-order .f-mv { width: 30px; height: 28px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; cursor: pointer; font-size: 12px; }
.f-order .f-mv:disabled { opacity: .3; cursor: default; }
.f-order .f-mv:not(:disabled):hover { background: #FFF6DA; }
.note.term .f-tt { width: 100%; border-collapse: collapse; font-size: 11.5px; margin: 0 0 6px; }
.note.term .f-tt th { text-align: left; font-weight: 500; color: #8FA0AC; padding: 1px 8px; font-family: var(--font-body); }
.note.term .f-tt td { padding: 1px 8px; border-top: 1px dashed #2B343B; font-family: var(--font-mono); vertical-align: top; }
.note.term pre + .f-tt { margin-top: -4px; }
.f-matrix .f-mx-wrap { overflow-x: auto; }
.f-mx { border-collapse: collapse; width: 100%; font-size: 13px; }
.f-mx th, .f-mx td { padding: 3px 4px; text-align: center; border-top: 1px dashed var(--line); }
.f-mx thead th { font-family: var(--font-display); font-weight: 400; font-size: 13px; white-space: nowrap; border-top: 0; }
.f-mx thead th i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ink); margin-right: 4px; vertical-align: -1px; }
.f-mx tbody th { text-align: left; font-weight: 500; }
.f-mx td.na { color: var(--ink-3); }
.f-cell { width: 34px; height: 30px; border: 2px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 16px; }
.f-cell.on { border-color: var(--ink); background: #FFF6DA; }
.f-mx-chk select { width: 100%; max-width: 132px; font-size: 12px; border: 2px solid var(--ink); border-radius: 8px; padding: 2px; background: #fff; }
.f-sliders .f-sl { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 4.2em; gap: 8px; align-items: center; font-size: 14px; }
.f-sliders input[type=range] { width: 100%; accent-color: #7B6CF6; }
.f-sliders .f-sl b { text-align: right; font-size: 14px; }
.f-sl-sum { margin: 0; font-size: 13px; background: #FFF6DA; border: 1.5px dashed var(--letter-deep); border-radius: 8px; padding: 3px 8px; }
.f-path-wrap { display: flex; flex-direction: column; gap: 10px; }
.f-path-row { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; }
.f-arrow { align-self: center; color: var(--ink-3); font-size: 14px; }
.f-stop { flex: 1 1 0; min-width: 72px; display: flex; flex-direction: column; align-items: center; gap: 1px; border: 2px solid var(--line); border-radius: 10px; background: #fff; padding: 4px 4px; cursor: pointer; }
.f-stop b { font-family: var(--font-display); font-weight: 400; font-size: 14px; }
.f-stop small { font-size: 11px; color: var(--ink-2); }
.f-stop .f-val { font-size: 11px; font-family: var(--font-mono); background: #F1F4F6; border-radius: 6px; padding: 0 5px; margin-top: 2px; }
.f-stop.on { border-color: var(--ink); background: #FFF6DA; box-shadow: 2px 2px 0 var(--ink); }
/* end s3 batch f */
/* s3 batch g (2) */
.g30-list li small { display: block; font-size: 11px; color: var(--ink-3); line-height: 1.3; }
/* end s3 batch g (2) */
/* s3 batch e (2) */
.e3-key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; border: 1px solid var(--ink); vertical-align: -1px; margin-right: 3px; }
.e3-key.cap { background: repeating-linear-gradient(45deg, #F5A524 0 4px, #FFD27A 4px 8px); }
.e3-key.free { background: #BFE8D0; }
.e3-host .b3-count { flex-wrap: nowrap; gap: 4px; }
.e3-host .b3-count button { width: 28px; height: 28px; }
/* end s3 batch e (2) */
/* s3 batch f (2) */
.f-matrix .f-mx-chk { flex-wrap: nowrap; }
.f-matrix .f-mx-chk .kr-k { min-width: 7.5em; display: flex; align-items: center; gap: 4px; }
.f-matrix .f-mx-chk .kr-k i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ink); }
.f-matrix .f-mx-chk select { flex: 1; min-width: 0; font-family: var(--font-body); }
/* end s3 batch f (2) */
/* s3 batch g (3) */
.g30-methods .b3-cost { display: none; }
/* end s3 batch g (3) */
/* s3 batch f (3) */
.f-matrix label.f-mx-chk select { max-width: none; width: auto; }
/* end s3 batch f (3) */

/* s3 batch c (2): S3-13 zone matrix */
.c3-mx table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: center; }
.c3-mx th { font-weight: 500; font-size: 12px; padding: 2px; white-space: nowrap; }
.c3-mx td { padding: 2px; border-top: 1px dashed var(--line); }
.c3-mx td button { width: 100%; min-width: 30px; height: 30px; border: 2px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 15px; color: var(--ink-3); }
.c3-mx td button[aria-pressed="true"] { border-color: var(--ink); background: var(--ok-soft); color: #0F6B40; font-weight: 700; }
.c3-mx td button:hover { border-color: var(--ink); }
.c3-same { display: block; font-size: 11px; color: var(--ink-3); background: #F1F3F2; border-radius: 8px; padding: 6px 0; }
.c3-isp .ticket-meta { grid-template-columns: 5em minmax(0, 1fr); }
/* end s3 batch c (2) */

/* keep the scene in view while a long panel (build options, fix tools) scrolls */
@media (min-width: 1081px) and (min-height: 760px) {
  .level > .stage { position: sticky; top: 12px; }
}

/* ===== season 4: command-card lab ===== */
.k4-lab { display: flex; flex-direction: column; gap: 12px; }
.k4-sec { border: 2px solid var(--ink); border-radius: 14px; background: #FBFDFB; padding: 8px 10px 10px; }
.k4-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; flex-wrap: wrap; }
.k4-head b { font-family: var(--font-display); font-weight: 400; font-size: 16px; }
.k4-head small { color: var(--ink-3); font-size: 12px; }
.k4-script { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.k4-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px; align-items: start; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; padding: 5px 6px; }
.k4-row.ok { border-color: var(--ok); background: #F3FBF6; }
.k4-row.err { border-color: var(--bad); background: var(--bad-soft); }
.k4-n { font-family: var(--font-mono); font-weight: 700; font-size: 12px; text-align: center; padding-top: 2px; color: var(--ink-2); }
.k4-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.k4-body b { font-weight: 500; font-size: 14px; }
.k4-body code, .k4-card code, .k4-look code { font-family: var(--font-mono); font-size: 11.5px; color: #24323B; background: #EEF3F0; border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; white-space: normal; line-height: 1.6; }
.k4-body code select, .k4-look code select { font: inherit; font-weight: 700; color: #1C46B8; background: #E3ECFF; border: 1px solid #9DB5F5; border-radius: 5px; padding: 0 2px; max-width: 13em; }
.k4-body small { font-size: 12px; }
.k4-ctl { display: flex; gap: 2px; }
.k4-ctl button { width: 26px; height: 26px; border: 1.5px solid var(--ink); border-radius: 7px; background: #fff; cursor: pointer; font-size: 11px; line-height: 1; }
.k4-ctl button:disabled { opacity: .3; cursor: default; }
.k4-ctl button:hover:not(:disabled) { background: var(--paper-2); }
.k4-hand { display: flex; flex-direction: column; gap: 8px; }
.k4-grp { display: flex; flex-direction: column; gap: 5px; }
.k4-gname { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }
.k4-card { text-align: left; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; padding: 6px 9px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; box-shadow: 2px 2px 0 var(--ink); }
.k4-card:hover:not([aria-disabled="true"]) { background: #FFF8E6; }
.k4-card[aria-disabled="true"] { opacity: .4; box-shadow: none; cursor: default; }
.k4-card b { font-weight: 500; font-size: 14px; }
.k4-card small { font-size: 12px; color: var(--ink-2); }
.k4-tests { display: flex; flex-direction: column; gap: 6px; }
.k4-tests:empty { display: none; }
.k4-looks { display: flex; flex-direction: column; gap: 6px; }
.k4-look { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.note.term.k4-term pre { max-height: 252px; }
.b4-brief .ticket-head { background: #2E3A44; }
/* S4-02 envelopes */
.k4-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.k4-tab { border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; padding: 4px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.k4-tab[aria-pressed="true"] { background: var(--letter); }
.k4-nest { display: flex; justify-content: center; padding: 6px 0; }
.k4-env { border: 2.5px solid var(--c); border-radius: 10px; padding: 18px 8px 8px; position: relative; background: color-mix(in srgb, var(--c) 10%, #fff); }
.k4-env-l { position: absolute; top: 2px; left: 8px; font-size: 11.5px; font-weight: 700; color: var(--c); white-space: nowrap; }
.k4-paper { background: #FFFDF2; border: 1.5px dashed #C98A00; border-radius: 6px; padding: 6px 10px; font-family: var(--font-mono); font-size: 12px; }
.k4-stamps { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.k4-stamps select { font: inherit; border: 1.5px solid var(--ink); border-radius: 7px; padding: 2px 4px; }
.k4-rep { font-weight: 700; color: #1C46B8; }

/* s4 batch c — S4-10 配對對講管・拆規則 */
.c4-match { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.c4-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; padding: 6px 8px; }
.c4-mrow.ok { border-color: var(--ok); background: #F3FBF6; }
.c4-who { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.c4-who i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--ink); flex: none; }
.c4-who small { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; margin-left: auto; }
.c4-mrow select { font-family: var(--font-mono); font-size: 12px; border: 1.5px solid var(--ink); border-radius: 7px; padding: 3px 4px; min-width: 0; flex: 1 1 140px; }
.c4-mrow code { font-family: var(--font-mono); font-size: 12px; background: #EEF3F0; border-radius: 6px; padding: 2px 6px; }
.c4-st { font-size: 13px; color: #0F6B40; font-weight: 700; }
.c4-note { font-size: 12px; margin: 6px 0 0; }
.c4-locked { opacity: .5; }
.c4-rules { display: flex; flex-direction: column; gap: 6px; }
.c4-rules .opt { padding: 6px 10px; font-size: 13px; }
.c4-rules .opt:disabled { cursor: default; }
.c4-rt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.c4-rt code { font-family: var(--font-mono); font-size: 11.5px; overflow-wrap: anywhere; }
.c4-rt small { font-size: 12px; color: var(--ink-2); }
.c4-q { font-size: 14px; margin: 10px 0 4px; }
.c4-pred { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.c4-out { margin-top: 8px; }
/* end s4 batch c */

/* s4 batch b: S4-05 kernel form, S4-06 line counter, S4-07 32 lamps */
.b4-kern { scroll-margin-top: 12px; }
.b4-form { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.b4-form label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-2); }
.b4-form select { font: inherit; font-family: var(--font-mono); font-size: 12px; border: 1.5px solid var(--ink); border-radius: 7px; padding: 3px 4px; min-width: 0; width: 100%; background: #fff; }
.b4-fixed { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); background: #F4F6F8; border-radius: 8px; padding: 5px 8px; overflow-wrap: anywhere; }
.b4-arp { margin-top: 8px; border-top: 1.5px dashed var(--line); padding-top: 8px; }
.b4-kres:empty, .b4-mres:empty { display: none; }
.b4-kres, .b4-mres { margin-top: 8px; }
.b4-range { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.b4-range input { flex: 1; min-width: 0; }
.b4-mesh { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.b4-mesh figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; padding: 4px; }
.b4-mesh svg { width: 100%; max-width: 140px; height: auto; }
.b4-mesh figcaption { text-align: center; font-size: 13px; display: flex; flex-direction: column; }
.b4-mesh figcaption small { color: var(--ink-3); font-size: 12px; }
.b4-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; margin: 0 0 6px; }
.b4-key { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #8D99A4; border-radius: 3px; background: #fff; vertical-align: -2px; }
.b4-key.net { background: #CFE0FF; border-color: #3A6FD8; }
.b4-key.diff { border: 2px solid var(--bad); }
.b4-key.edge { background: none; border: none; border-right: 3px solid var(--bad); border-radius: 0; width: 6px; }
.b4-bits { display: flex; flex-direction: column; gap: 4px; touch-action: none; user-select: none; -webkit-user-select: none; }
.b4-oct { display: grid; grid-template-columns: 3.4em auto minmax(0, 1fr); gap: 6px; align-items: center; }
.b4-oc { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.b4-row { display: grid; grid-template-columns: repeat(8, 26px); gap: 2px; cursor: ew-resize; }
.b4-bit { position: relative; display: flex; flex-direction: column; align-items: center; border: 1.5px solid #B4BDC4; border-radius: 5px; background: #fff; font-family: var(--font-mono); font-size: 12px; line-height: 1.25; padding: 1px 0; }
.b4-bit i, .b4-dec i { font-style: normal; }
.b4-bit i + i { border-top: 1px dashed #C9D1D7; width: 100%; text-align: center; }
.b4-bit.net { background: #CFE0FF; border-color: #3A6FD8; color: #1C46B8; font-weight: 700; }
.b4-bit.diff { border: 2px solid var(--bad); }
.b4-bit.edge::after, .b4-bit.edge0::before { content: ""; position: absolute; top: -4px; bottom: -4px; width: 4px; border-radius: 2px; background: var(--bad); }
.b4-bit.edge::after { right: -4px; }
.b4-bit.edge0::before { left: -5px; }
.b4-dec { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 12px; line-height: 1.25; color: var(--ink-2); padding-left: 2px; }
.b4-line { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; }
.b4-line input { flex: 1; min-width: 0; }
.b4-line b { font-family: var(--font-mono); min-width: 2.6em; text-align: right; }
.b4-info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; background: #F7FAF8; border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.b4-info > div { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 6px; align-items: baseline; }
.b4-info > div small { grid-column: 2; color: var(--ink-3); font-size: 11.5px; }
.b4-info span { color: var(--ink-3); font-size: 12px; }
.b4-info b { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; overflow-wrap: anywhere; }
.b4-info .ok b { color: #0F6B40; font-family: inherit; }
.b4-info .bad b { color: var(--bad); font-family: inherit; }
.b4-miss { margin-top: 10px; border-top: 1.5px dashed var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.b4-miss p { margin: 0; }
.note .b4-nempty { margin: 0; font-size: 12px; color: var(--ink-3); }
/* end s4 batch b */
/* s4 batch c (2) */
.note.c4-board td:first-child { white-space: nowrap; }
.note.c4-board td { white-space: nowrap; }
/* end s4 batch c (2) */
/* s4 batch d */
.note.term .d4dim { color: #8FA3B0; }
.note .d4-led td { font-size: 11px; padding: 1px 3px; }
.d4-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.d4-step { border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 10px; font-size: 13px; background: #fff; }
.d4-step.now { background: var(--letter); }
.d4-step.done { background: var(--ok-soft); }
.d4-letter { border: 2px solid var(--ink); border-radius: 12px; background: #FFFDF2; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.d4-letter.reply { background: #FFF1D6; }
.d4-mono { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.d4-book { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0; }
.d4-book th { text-align: left; font-weight: 500; font-size: 12px; color: var(--ink-3); padding: 2px 4px; }
.d4-book td { border-top: 1px dashed var(--line); padding: 4px; vertical-align: middle; }
.d4-book td.m { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.d4-book .btn.small { padding: 3px 8px; font-size: 12px; white-space: nowrap; }
.d4-q code { font-size: 12px; }
.note .d4-tline { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; }
.note .d4-tline b { font-weight: 500; font-size: 11.5px; }
.note .d4-tix { display: flex; gap: 4px; }
.note .d4-tk { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.3; border: 1.5px solid var(--ink); border-radius: 6px; padding: 1px 4px; background: #fff; flex: 1; text-align: center; }
.note .d4-tk.use { background: #FFE9A8; }
.note .d4-tk.tw { background: #FDE5E0; border-color: #A12A2F; color: #7A1E22; }
.note .d4-cnt { margin: 2px 0 0; font-size: 11px; color: var(--ink-2); }
.d4-log { margin: 6px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.d4-log .ok { color: #0F6B40; } .d4-log .bad { color: var(--bad); }
.d4-fix .opt { align-items: flex-start; }
.d4-fix .opt > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.d4-fix .opt code { font-family: var(--font-mono); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; color: #24323B; background: #EEF3F0; border-radius: 6px; padding: 2px 6px; }
.d4-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.d4-cell { border: 1.5px solid var(--ink); border-radius: 8px; text-align: center; font-size: 11px; line-height: 1.3; padding: 3px 2px; font-family: var(--font-mono); }
.d4-cell.ok { background: var(--ok-soft); border-color: var(--ok); }
.d4-cell.bad { background: var(--bad-soft); border-color: var(--bad); }
/* end s4 batch d */
/* s4 batch f */
.f4-case { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; border: 2px solid var(--ink); border-radius: 14px; background: #FFFCEF; padding: 8px 10px; }
.f4-case p { margin: 0 0 4px; font-size: 15px; }
.f4-case .b3-needs { margin: 0; }
.f4-case-n { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 12px; background: #fff; padding: 4px 0; }
.f4-case-n b { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.f4-case-n small { font-size: 11px; color: var(--ink-2); }
.f4-h { margin: 6px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 16px; }
.f4-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.f4-door b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.f4-real { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.f4-door code { font-family: var(--font-mono); font-size: 11px; color: #24323B; background: #EEF3F0; border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; }
.f4-door.ok { background: #F3FBF6; border-color: var(--ok); box-shadow: 2px 2px 0 var(--ok); opacity: 1; }
.f4-door.no { background: var(--bad-soft); border-color: var(--bad); box-shadow: 2px 2px 0 var(--bad); }
.f4-stamp { border-collapse: collapse; width: 100%; font-size: 13px; }
.f4-stamp th, .f4-stamp td { padding: 4px 4px; border-top: 1px dashed var(--line); text-align: left; vertical-align: top; }
.f4-stamp thead th { font-weight: 500; color: var(--ink-2); font-size: 12px; border-top: none; }
.f4-stamp tbody th { font-weight: 500; white-space: nowrap; }
.f4-stamp tbody th small { display: block; color: var(--ink-3); font-weight: 400; }
.f4-stamp select, .f4-ph select, .f4-st select { font: inherit; font-size: 13px; border: 1.5px solid var(--ink); border-radius: 7px; padding: 2px 4px; width: 100%; max-width: 100%; background: #fff; }
.f4-stamp select.f4-wrong, .f4-ph select.f4-wrong { border-color: var(--bad); background: var(--bad-soft); }
.f4-ph { display: flex; flex-direction: column; gap: 4px; font-size: 14px; margin-top: 6px; }
.f4-tips { margin: 4px 0 0; padding-left: 20px; font-size: 14px; }
.note.f4-cp { min-width: 0; padding: 0 8px; border-radius: 999px; background: #1C2830; color: #fff; font-size: 12px; box-shadow: 2px 2px 0 #FFC23D; white-space: nowrap; }
.note.f4-esc { background: #F4F0FF; border-color: #4B3FB8; box-shadow: 3px 3px 0 #4B3FB8; }
.note.f4-esc h4 { color: #4B3FB8; }
.note.f4-esc td { font-family: var(--font-display); font-size: 12px; }
.note.f4-esc td:first-child, .note.f4-esc td:last-child { font-family: var(--font-mono); white-space: nowrap; }
.note .f4-sm { margin: 4px 0 0; font-size: 11px; color: #6B4F2A; }
.f4-board { margin-top: 10px; border: 2px solid var(--ink); border-radius: 14px; background: #FBFDFB; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.f4-stations { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.f4-st { border: 1.5px solid var(--line); border-radius: 10px; background: #fff; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.f4-st.ok { border-color: var(--ok); background: #F3FBF6; }
.f4-st.bad { border-color: var(--bad); background: var(--bad-soft); }
.f4-st-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.f4-st-h b { font-weight: 500; font-size: 14px; }
.f4-st-h small { color: var(--ink-3); font-size: 12px; flex: 1; }
.f4-st-n { font-family: var(--font-mono); font-weight: 700; font-size: 12px; width: 20px; text-align: center; }
.f4-st small.err { font-size: 12px; }
/* s4 batch e */
.note.ledger.e4-led td { white-space: normal; }
.note.ledger.e4-led p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; }
.e4-led .e4-rule { font-family: var(--font-mono); font-size: 11px; color: #24323B; background: #fff; border: 1px dashed #9DB5F5; border-radius: 6px; padding: 3px 6px; }
.e4-led .e4-rule b { color: var(--bad); }
.e4-led .e4-meter { height: 8px; border: 1.5px solid var(--ink); border-radius: 99px; background: #fff; overflow: hidden; padding: 0; }
.e4-led .e4-meter span { display: block; height: 100%; background: var(--bad); transition: width .2s; }
.e4-led tr.e4-miss td { color: var(--bad); font-weight: 700; background: var(--bad-soft); }
.e4-led tr.e4-good td { color: var(--ok); font-weight: 700; background: var(--ok-soft); }
.e4-led .e4-sigs { margin: 2px 0 0; padding-left: 16px; font-size: 12px; line-height: 1.45; }
.e4-box { border: 2px solid var(--ink); border-radius: 14px; background: #FBFDFB; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.e4-slider { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.e4-slider input { width: 100%; accent-color: var(--bad); }
.e4-check { font-size: 13px; display: flex; gap: 6px; align-items: flex-start; line-height: 1.4; }
.e4-chats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.e4-chat { border: 2px solid var(--ink); border-radius: 12px; background: #fff; padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.e4-chat.tcp { border-color: var(--ok); }
.e4-chat.udp { border-color: var(--letter-deep); }
.e4-chat-h { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.e4-chat-h b { font-family: var(--font-display); font-weight: 400; font-size: 15px; }
.e4-chat-h small, .e4-chat small { font-size: 11px; color: var(--ink-3); }
.e4-from { margin: 0; font-size: 13px; display: flex; flex-direction: column; }
.e4-screen { background: #0C1115; border-radius: 8px; padding: 3px 6px 5px; }
.e4-screen small { color: #9FB0BC !important; }
.e4-screen div { font-size: 19px; letter-spacing: 1px; color: #D7E3EA; min-height: 30px; line-height: 1.5; }
.e4-screen span.wait { color: #6E7E89; text-decoration: underline dotted; }
.e4-screen span.gap { color: #FF7A6B; }
.e4-timers { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: 11px; }
.e4-timers i { font-style: normal; color: var(--ink-3); }
.e4-tm { border: 1.5px solid var(--ok); background: var(--ok-soft); border-radius: 99px; padding: 0 6px; font-family: var(--font-mono); font-weight: 700; }
.e4-tm.bad { border-color: var(--bad); background: var(--bad-soft); }
.e4-stat { margin: 0; font-size: 12px; line-height: 1.5; }
.e4-lock { margin: 0 0 8px; font-size: 13px; }
.e4-sort { margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.e4-srow { display: flex; flex-direction: column; gap: 3px; border: 1.5px solid var(--line); border-radius: 10px; padding: 5px 7px; background: #fff; font-size: 14px; }
.e4-srow.ok { border-color: var(--ok); background: #F3FBF6; }
.e4-srow.bad { border-color: var(--bad); background: var(--bad-soft); }
.e4-seg2 { display: flex; gap: 6px; }
.e4-seg2 button { flex: 1; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; padding: 2px 6px; font-size: 13px; cursor: pointer; }
.e4-seg2 button[aria-pressed="true"] { background: var(--letter); font-weight: 700; }
.e4-res:empty { display: none; }
.e4-res { margin-top: 8px; }
.e4-hintwrap { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.e4-trace { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 14px; }
.e4-trace label { display: flex; align-items: center; gap: 6px; }
.e4-trace input { accent-color: var(--ip); }
.e4-trace b { font-family: var(--font-mono); font-size: 16px; min-width: 1em; }
.e4-hops { margin: 6px 0 0; padding-left: 26px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; }
.e4-hops li.e4-star { color: var(--ink-3); }
.e4-tools { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 8px; align-items: center; }
.e4-tools code { font-family: var(--font-mono); font-size: 11.5px; background: #EEF3F0; border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; }
.e4-tools select { font: inherit; font-weight: 700; color: #1C46B8; background: #E3ECFF; border: 1px solid #9DB5F5; border-radius: 5px; }
.e4-file { border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; margin-bottom: 6px; background: #fff; }
.e4-file-h { background: #2B343B; color: #C3CBD2; font-family: var(--font-mono); font-size: 11px; padding: 1px 8px; }
.e4-line { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-top: 1px dashed var(--line); }
.e4-line:first-of-type { border-top: none; }
.e4-line code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.e4-line code i { color: var(--ink-3); font-style: normal; }
.e4-line code b { background: var(--letter); border-radius: 4px; padding: 0 3px; }
.e4-line code select { font: inherit; font-weight: 700; color: #1C46B8; background: #E3ECFF; border: 1px solid #9DB5F5; border-radius: 5px; }
.e4-line button { flex: none; border: 1.5px solid var(--ink); border-radius: 7px; background: #fff; font-size: 12px; padding: 1px 7px; cursor: pointer; }
.e4-line.del code { text-decoration: line-through; color: var(--ink-3); }
.e4-line.del button { background: var(--letter); }
.e4-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.e4-seg button { text-align: left; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; padding: 5px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.e4-seg button b { font-weight: 700; font-size: 13.5px; }
.e4-seg button small { font-size: 11.5px; color: var(--ink-2); }
.e4-seg button[aria-pressed="true"] { background: var(--letter); box-shadow: 2px 2px 0 var(--ink); }
.e4-reqs { display: flex; flex-direction: column; gap: 4px; }
.e4-req { font-size: 13px; border-left: 6px solid var(--c); background: #fff; border-radius: 6px; padding: 1px 8px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.e4-req b { font-family: var(--font-mono); margin-right: 6px; color: var(--c); }
.e4-board { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.e4-srv { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 6px; align-items: center; border: 1.5px solid var(--ok); background: #F3FBF6; border-radius: 9px; padding: 3px 7px; font-size: 13px; }
.e4-srv.bad { border-color: var(--bad); background: var(--bad-soft); }
.e4-srv small { font-size: 12px; }
.e4-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.e4-chips i { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: #fff; background: var(--c); border-radius: 5px; padding: 0 5px; border: 1.5px solid var(--ink); }
.e4-chips i.x { text-decoration: line-through; opacity: .55; }
.e4-board .err { margin: 2px 0 0; }
.e4-pk { border: 2px solid var(--ink); border-radius: 14px; background: #FBFDFB; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; }
.e4-envl, .e4-paperbox { border-radius: 10px; padding: 5px 8px; display: flex; flex-direction: column; gap: 3px; }
.e4-envl { background: #FFF6DA; border: 2px solid var(--letter-deep); }
.e4-envl .mono { font-size: 12.5px; overflow-wrap: anywhere; }
.e4-envl b { color: var(--bad); }
.e4-envl small, .e4-paperbox small { font-size: 11px; color: var(--ink-3); }
.e4-paperbox { background: #fff; border: 2px dashed var(--ink-3); align-items: flex-start; }
.e4-paperbox.open { border-style: solid; border-color: var(--ip); background: #F4F8FF; align-items: stretch; }
.e4-hex { font-size: 11.5px; color: #1C46B8; overflow-wrap: anywhere; }
.e4-txt { font-family: var(--font-mono); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.e4-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.e4-app { border: 1.5px solid var(--ink); border-radius: 9px; background: #fff; padding: 4px 8px; font-size: 13px; cursor: pointer; text-align: left; box-shadow: 2px 2px 0 var(--ink); }
.e4-app:hover { background: #FFF8E6; }
.e4-app:last-child { grid-column: 1 / -1; }
.e4-checks { margin: 4px 0 0; padding-left: 4px; list-style: none; font-size: 13px; }
.e4-tablebox .lpm-t { margin: 4px 0; }
/* end s4 batch e */
/* s4 batch c (3) */
.note.c4-guard td:first-child { white-space: nowrap; }
.note.c4-guard td { overflow-wrap: anywhere; }
/* end s4 batch c (3) */
/* s4 batch b (2): lamp rows shrink on phones instead of clipping the numbers */
.b4-oct { grid-template-columns: 3.4em minmax(0, 1fr) 2.1em; }
.b4-row { grid-template-columns: repeat(8, minmax(0, 26px)); }
/* end s4 batch b (2) */
/* s4 batch e (2) */
.e4-led .e4-rule { white-space: pre; font-size: 10.5px; line-height: 1.5; overflow: hidden; }
/* end s4 batch e (2) */
.f4-k td:first-child { white-space: nowrap; }
/* ^ s4 batch f (2): .f4-k */
/* s4 batch e (3) */
.e4-tabs6 { gap: 4px; }
.e4-tabs6 .k4-tab { padding: 3px 8px; font-size: 12.5px; }
.e4-led td small { font-size: 10.5px; color: var(--ink-3); }
/* end s4 batch e (3) */
/* s4 batch f (3) */
.f4-stamp { display: flex; flex-direction: column; gap: 6px; }
.f4-cpbox { border: 1.5px solid var(--line); border-radius: 10px; background: #fff; padding: 6px 8px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 6px; align-items: center; font-size: 13px; }
.f4-cpbox > b { grid-column: 1 / -1; font-weight: 500; font-size: 14px; }
.f4-cpbox > b small { color: var(--ink-3); font-weight: 400; margin-left: 4px; }
.f4-cpbox label { display: contents; color: var(--ink-2); }
.f4-cpbox select { font: inherit; font-size: 13px; border: 1.5px solid var(--ink); border-radius: 7px; padding: 2px 4px; width: 100%; background: #fff; }
.f4-cpbox select.f4-wrong { border-color: var(--bad); background: var(--bad-soft); }
/* end s4 batch f (3) */

/* s4 batch g */
.g4-say { margin: 6px 0; font-size: 14px; }
.g4-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 30px; margin: 4px 0 8px; }
.g4-chip { font-size: 13px; border: 1.5px solid #FF8A3D; background: #FFF1E6; border-radius: 999px; padding: 1px 9px; }
.g4-arrow { color: var(--ink-3); font-size: 13px; }
.g4-stations { display: flex; flex-wrap: wrap; gap: 6px; }
.g4-msg:empty { display: none; }
.g4-msg .result, .g4-unlock { margin-top: 8px; }
.g4-mini { margin-bottom: 10px; font-size: 14px; }
.g4-meter { position: relative; height: 22px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; margin: 4px 0 8px; }
.g4-meter i { position: absolute; inset: 0 auto 0 0; background: #FFC23D; }
.g4-meter span { position: relative; display: block; text-align: center; font-size: 12px; line-height: 19px; }
.g4-swgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.g4-of { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.g4-flow { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; font-size: 12px; }
.lv-body .g4-flow code { font-family: var(--font-mono); font-size: 12px; background: #0C1115; color: #9FE8B5; border-radius: 8px; padding: 6px 8px; overflow-wrap: anywhere; }
.g4-out:empty { display: none; }
.g4-out .result { margin-top: 8px; }
.note.ledger td.g4-wrap { white-space: normal; overflow-wrap: anywhere; }
.g4-bar { height: 12px; border: 1.5px solid #1C46B8; border-radius: 999px; background: #fff; overflow: hidden; margin-top: 4px; }
.g4-bar i { display: block; height: 100%; background: #3A8DDE; }
.g4-bar.full { border-color: #A12A2F; }
.g4-bar.full i { background: #E5484D; }
.note .g4-full { margin: 4px 0 0; font-size: 12px; color: #A12A2F; font-weight: 700; }
.g4-charts { display: flex; flex-direction: column; gap: 8px; }
.g4-charts:empty { display: none; }
.g4-chart { margin: 0; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; padding: 6px 8px; }
.g4-chart figcaption { font-size: 13px; color: var(--ink-2); }
.g4-chart svg { display: block; width: 100%; height: auto; }
.g4-ax { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); }
.g4-read { font-size: 12px; min-height: 1.4em; }
.g4-ans { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.g4-ans p { margin: 0; font-size: 13px; background: #F6F8F7; border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 9px; }
.g4-ans p b { display: block; font-size: 12px; color: var(--ink-3); font-weight: 700; }
.g4-job { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; }
.g4-job small { font-size: 12px; color: var(--ink-2); }
.g4-diploma { position: relative; text-align: center; border: 3px double #B8860B; border-radius: 16px; background: linear-gradient(#FFFBEA, #FFF3C4); padding: 16px 14px 12px; box-shadow: 3px 3px 0 #B8860B; }
.g4-diploma h3 { margin: 4px 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: #7A5A00; }
.g4-diploma p { font-size: 14px; margin: 6px 0; }
.g4-seal { font-size: 34px; line-height: 1; animation: g4pop .7s ease-out; }
.g4-floors { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 10px 0 4px; }
.g4-floors a { font-family: var(--font-mono); font-size: 12px; text-decoration: none; color: #1C2830; background: #fff; border: 1.5px solid #B8860B; border-radius: 7px; padding: 3px 0; }
.g4-floors a:hover { background: #FFC23D; }
@keyframes g4pop { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.2) rotate(6deg); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .g4-seal { animation: none; } }

/* ========================= season 5: 封包鎮鑑識所 ========================= */
.level.s5 .stage { gap: 14px; }
.s5-scene .scene-host { aspect-ratio: 960 / 420; }
.s5-replay { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 2px solid var(--ink); background: var(--card); flex-wrap: wrap; }
.s5-ev { padding: 0; background: var(--card); }
.ev-tabs { display: flex; gap: 6px; padding: 8px 10px 0; flex-wrap: wrap; }
.ev-tab { border: 2px solid var(--ink); border-bottom: none; background: #EEF3F0; border-radius: 10px 10px 0 0; padding: 5px 12px; font-family: var(--font-display); font-size: 14px; cursor: pointer; }
.ev-tab[aria-pressed="true"] { background: var(--letter); }
.ev-host { padding: 10px; }

/* packet viewer */
.pcap { display: flex; flex-direction: column; gap: 8px; }
.pcap-filter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pf-tag { font-family: var(--font-display); font-size: 13px; background: var(--ink); color: #fff; border-radius: 8px; padding: 3px 10px; }
.pf-in { flex: 1; min-width: 180px; font-family: var(--font-mono); font-size: 13px; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; }
.pf-in.good { background: #EFFBF3; border-color: var(--ok); }
.pf-in.bad { background: var(--bad-soft); border-color: var(--bad); }
.pf-go, .pf-x { border: 2px solid var(--ink); background: #fff; border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: 14px; }
.pf-go { background: var(--letter); }
.pf-say { font-size: 13px; color: var(--ink-2); min-height: 18px; line-height: 1.5; }
.pf-say.err { color: var(--bad); font-weight: 500; }
.pf-say.warn { color: var(--letter-deep); }
.pcap-list { border: 2px solid var(--ink); border-radius: 10px; overflow: auto; max-height: 300px; background: #fff; }
.pk-row { display: grid; grid-template-columns: 56px 62px minmax(60px,1fr) minmax(60px,1fr) 64px 46px minmax(90px,1.6fr); gap: 2px; align-items: center; font-size: 12px; padding: 3px 6px; border-bottom: 1px solid #ECF1EE; cursor: pointer; font-family: var(--font-mono); }
.pk-row:hover { background: #FFF6DA; }
.pk-head { position: sticky; top: 0; background: #E9EEF2; font-family: var(--font-display); font-weight: 400; color: var(--ink-2); z-index: 1; cursor: default; }
.pk-head:hover { background: #E9EEF2; }
.pk-ip, .pk-info { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-no { display: flex; align-items: center; gap: 4px; }
.pk-chk { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--ink); border-radius: 4px; text-align: center; line-height: 12px; font-size: 10px; background: #fff; }
.pk-pr { font-weight: 700; }
.proto-TCP { background: #EAF1F8; } .proto-UDP { background: #EAF6EF; } .proto-DNS { background: #F2ECFB; }
.proto-HTTP { background: #E6F7EC; } .proto-ICMP { background: #FBE9EF; } .proto-ARP { background: #FCF3D9; }
.proto-TLSv12 { background: #ECECEC; }
.pk-row.sel { outline: 2.5px solid var(--ink); outline-offset: -2px; background: var(--letter) !important; }
.pk-row.marked { box-shadow: inset 4px 0 0 var(--ok); }
.pk-row.marked .pk-chk { background: var(--ok); color: #fff; border-color: var(--ok); }
.pcap-detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.9fr); gap: 8px; }
.pd-tree { border: 2px solid var(--ink); border-radius: 10px; background: #fff; padding: 6px 8px; max-height: 240px; overflow: auto; font-size: 13px; }
.pd-hint { font-size: 13px; }
.pd-layer > summary { cursor: pointer; font-family: var(--font-display); font-size: 13.5px; padding: 2px 0; }
.pd-rows { padding: 2px 0 6px 14px; display: flex; flex-direction: column; gap: 2px; }
.pd-r { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.pd-r b { font-family: var(--font-mono); color: var(--ink); font-weight: 700; }
.pd-apply { font-size: 11px; border: 1.5px solid var(--ip); color: #1C46B8; background: var(--ip-soft); border-radius: 6px; padding: 0 6px; cursor: pointer; }
.pd-bytes { margin: 0; border: 2px solid var(--ink); border-radius: 10px; background: #0C1115; color: #C7D3DC; padding: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; max-height: 240px; overflow: auto; }
.hx-row { white-space: pre; } .hx-off { color: #5E6B75; margin-right: 10px; } .hx-b { } .hx-a { color: #8FA7B5; margin-left: 12px; }
.hx-b .bh, .hx-a .bh { background: #F4B400; color: #1C2830; }

/* log viewer */
.logv { display: flex; flex-direction: column; gap: 8px; }
.logv-name { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.logv-body { border: 2px solid var(--ink); border-radius: 10px; background: #0C1115; max-height: 320px; overflow: auto; padding: 4px; }
.lg-row { display: grid; grid-template-columns: 34px 1fr; gap: 6px; align-items: baseline; padding: 2px 4px; cursor: pointer; border-radius: 6px; }
.lg-row:hover { background: #1b242c; }
.lg-row code { font-family: var(--font-mono); font-size: 11.5px; color: #CCD8E0; white-space: pre-wrap; word-break: break-all; }
.lg-row mark { background: #F4B400; color: #1C2830; border-radius: 3px; }
.lg-n { font-family: var(--font-mono); font-size: 11px; color: #5E6B75; text-align: right; }
.lg-row.marked { background: #14331f; box-shadow: inset 3px 0 0 var(--ok); }
.lg-row.marked .lg-n { color: #5BE08F; }
.lg-row.bad code { color: #FF9C8C; }

/* terminal */
.termv.note.term { position: static; box-shadow: none; border: 2px solid var(--ink); }
.tv-out { margin: 0; padding: 8px 10px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; color: #D7E3EA; white-space: pre-wrap; min-height: 90px; max-height: 240px; overflow: auto; }
.tv-out .hl { color: #FFC23D; } .tv-out .bad { color: #FF7A6B; } .tv-out .dim { color: #7E8D98; }
.tv-in { display: flex; align-items: center; gap: 6px; border-top: 1px solid #2B343B; padding: 4px 8px; }
.tv-ps { font-family: var(--font-mono); font-size: 11.5px; color: #FFC23D; }
.tv-in input { flex: 1; background: transparent; border: none; color: #D7E3EA; font-family: var(--font-mono); font-size: 11.5px; outline: none; }
.tv-cards { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border-top: 1px solid #2B343B; }
.tv-card { font-family: var(--font-mono); font-size: 11px; border: 1.5px solid #3A444C; background: #1b242c; color: #C7D3DC; border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.tv-card:hover { border-color: #FFC23D; }

/* case file + findings */
.s5-casefile { background: #FFFCEF; padding: 0; }
.s5-casefile.closed { background: #EFFBF3; }
.cf-head { display: flex; justify-content: space-between; gap: 8px; background: var(--ink); color: #fff; padding: 6px 14px; font-family: var(--font-display); font-size: 14px; flex-wrap: wrap; }
.cf-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.cf-meta { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.cf-meta span { color: var(--ink-2); font-size: 13px; }
.cf-quote { font-size: 17px; line-height: 1.6; border-left: 4px solid var(--letter-deep); padding-left: 12px; }
.cf-needs { margin: 0; padding-left: 20px; font-size: 14px; display: flex; flex-direction: column; gap: 3px; }
.find-done { display: flex; flex-direction: column; gap: 4px; }
.find-chk { font-size: 13px; color: var(--ok); background: var(--ok-soft); border: 1.5px solid var(--ok); border-radius: 8px; padding: 4px 10px; }
.find-card { border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.find-q { display: flex; gap: 8px; align-items: flex-start; }
.find-no { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--letter); border: 2px solid var(--ink); text-align: center; line-height: 19px; font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.find-q b { font-size: 15px; line-height: 1.5; }
.find-out:empty { display: none; }

@media (max-width: 1080px) {
  .pcap-detail { grid-template-columns: 1fr; }
}

/* s5 batch F: endpoints statistics panel */
.pcap-stats { border: 2px solid var(--ink); border-radius: 10px; background: #fff; max-height: 300px; overflow: auto; padding: 8px 10px; }
.st-head { font-family: var(--font-display); font-size: 14px; margin-bottom: 6px; }
.st-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-tbl th { text-align: left; color: var(--ink-2); font-weight: 500; border-bottom: 1.5px solid var(--line); padding: 3px 8px; }
.st-tbl td { padding: 3px 8px; border-bottom: 1px solid #ECF1EE; }
.st-tbl tr:first-child td, .st-tbl tr:nth-child(2) td { font-weight: 700; }
.pf-stats[aria-pressed="true"] { background: var(--letter); }