/* ============================================================
   hi-goose Cyber Bridge
   Implements the `is-="..."` / `box-="square"` / `variant-="..."` markup
   primitives (button, box, badge, select, table, forms) in the KeyWisdom Cyber
   neon palette, plus the kw-* bespoke chrome. Formerly layered over the WebTUI
   CDN; WebTUI was removed (2026-06) so these rules now stand alone.
   Loaded AFTER colors_and_type.css (tokens + global reset).
   ============================================================ */

:root {
  /* Backgrounds & foregrounds */
  --background0:  var(--bg-base);
  --background1:  var(--bg-raised);
  --background2:  var(--bg-overlay);
  --background3:  var(--bg-overlay);
  --foreground0:  var(--fg-1);
  --foreground1:  var(--fg-2);
  --foreground2:  var(--fg-3);

  /* Catppuccin -> Cyber accent remap */
  --base:         var(--bg-base);
  --mantle:       var(--bg-void);
  --crust:        var(--bg-inset);
  --surface0:     var(--bg-raised);
  --surface1:     var(--bg-overlay);
  --surface2:     var(--bg-overlay);
  --text:         var(--fg-1);
  --subtext0:     var(--fg-2);
  --subtext1:     var(--fg-2);
  --overlay0:     var(--fg-3);
  --overlay1:     var(--fg-3);
  --overlay2:     var(--fg-2);

  --green:        var(--neon-green);
  --teal:         var(--neon-green);
  --sky:          var(--neon-cyan);
  --blue:         var(--neon-cyan);
  --sapphire:     var(--neon-cyan);
  --lavender:     var(--neon-violet);
  --mauve:        var(--neon-violet);
  --pink:         var(--neon-magenta);
  --flamingo:     var(--neon-magenta);
  --rosewater:    var(--neon-magenta);
  --maroon:       var(--neon-red);
  --red:          var(--neon-red);
  --peach:        var(--neon-amber);
  --yellow:       var(--kw-yellow);
}

html { color-scheme: dark; }

body {
  background: var(--bg-void);
  background-image:
    radial-gradient(circle at 20% -10%, rgba(0,255,156,0.04), transparent 60%),
    radial-gradient(circle at 95% 105%, rgba(0,229,255,0.035), transparent 55%);
  color: var(--fg-1);
  min-height: 100vh;
}
/* statusbar 貼底：只對套了終端機外殼的頁（.kw-term-page）開 flex column，
   讓 body 直接子的 shell（internal）/ main（客戶面）撐開剩餘高度、把 statusbar
   推到視窗底。scope 到 class 才不會波及 portal.html 等「載 cyber-bridge.css
   但無 chrome 結構」的獨立頁佈局。 */
body.kw-term-page { display: flex; flex-direction: column; }
body.kw-term-page > .kw-shell,
body.kw-term-page > main.site-main { flex: 1 0 auto; }

/* ============================================================
   BRAND CHROME
   ============================================================ */

.kw-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 10, 15, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-1);
}

.kw-topbar__inner {
  max-width: 120ch;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.kw-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg-1);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.kw-brand:hover { color: var(--fg-1); }

.kw-brand__tag {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--neon-green);
}
.kw-brand__name { font-size: 17px; }
.kw-brand__suffix {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}

.kw-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.kw-nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.kw-nav a:hover {
  color: var(--fg-1);
  border-color: var(--border-2);
  background: rgba(0,255,156,0.04);
}
.kw-nav a.is-active {
  color: var(--neon-green);
  border-color: var(--border-glow);
  background: rgba(0,255,156,0.06);
}

/* Live status pill on topbar (e.g. "● LIVE · asia-east1") */
.kw-status-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--neon-green);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  background: rgba(0,255,156,0.05);
}
.kw-status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--neon-green);
  box-shadow: 0 0 8px var(--neon-green);
  animation: kw-pulse 2.4s var(--ease-out) infinite;
}
@keyframes kw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ============================================================
   PAGE LAYOUT
   ============================================================ */

.site-main {
  max-width: 120ch;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ============================================================
   STACK / GRID HELPERS  (preserved from original app.css, restyled)
   ============================================================ */

.page-stack  { display: flex; flex-direction: column; gap: 32px; }
.panel-stack { display: flex; flex-direction: column; gap: 16px; }

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.nav-links { display: flex; gap: 8px; align-items: center; }
.inline-cluster { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.grid-2       { display: grid; grid-template-columns: 1fr; gap: 16px; }
.grid-3       { display: grid; grid-template-columns: 1fr; gap: 16px; }
.grid-2-1     { display: grid; grid-template-columns: 1fr; gap: 16px; }
.workers-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 60ch) {
  .grid-2       { grid-template-columns: repeat(2, 1fr); }
  .grid-3       { grid-template-columns: repeat(3, 1fr); }
  .workers-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 100ch) {
  .grid-2-1     { grid-template-columns: 2fr 1fr; }
  .workers-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   CARDS (WebTUI box overrides)
   ============================================================ */

/* box-="square": a simple bordered panel. (Previously this also suppressed
   WebTUI's ::before ASCII-fieldset line and forced the border with !important;
   WebTUI is gone, so there is no pseudo-element to fight and the overrides are
   dropped.) */
[box-="square"] {
  background: var(--bg-raised);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  position: relative;
}
[box-="square"]:hover { border-color: var(--border-2); }
[box-="round"] { border-radius: var(--r-pill); }

/* 面板:取代散落的 `box-="square" style="padding:20px"`。單一規格,模板用 class。 */
.panel {
  background: var(--bg-raised);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  padding: 20px;
}
.panel--pad-sm { padding: 8px; }

/* WebTUI `[is-="button"]` 對 <button> 有效,但對 <a> 沒套 border / 沒 reset
   default underline → 顯示成 ugly underlined link。下面 rule 把 anchor 變
   成跟 <button is-="button"> 視覺一致的 button shape。 */
a[is-="button"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px !important;
  border: 1px solid var(--border-2) !important;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-1);
  text-decoration: none !important;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
  cursor: pointer;
}
a[is-="button"]:hover {
  border-color: var(--fg-2) !important;
  background: rgba(255, 255, 255, 0.02);
}
a[is-="button"][variant-="green"] {
  border-color: var(--neon-green) !important;
  color: var(--neon-green);
}
a[is-="button"][variant-="green"]:hover {
  background: rgba(0, 255, 156, 0.08);
  box-shadow: 0 0 12px -2px rgba(0, 255, 156, 0.4);
}
a[is-="button"][variant-="cyan"] {
  border-color: var(--neon-cyan) !important;
  color: var(--neon-cyan);
}
a[is-="button"][variant-="cyan"]:hover {
  background: rgba(0, 229, 255, 0.08);
  box-shadow: 0 0 12px -2px rgba(0, 229, 255, 0.4);
}
a[is-="button"][variant-="yellow"],
a[is-="button"][variant-="brand"] {
  border-color: var(--kw-yellow) !important;
  color: var(--kw-yellow);
}
a[is-="button"][variant-="red"],
a[is-="button"][variant-="danger"] {
  border-color: var(--neon-red) !important;
  color: var(--neon-red);
}

/* ============================================================
   LIST TOOLBAR (compact refresh + opt-in auto-refresh)
   Shared by list pages via internal/_list_toolbar.html. Refresh is an
   auxiliary action, so its button + interval select render smaller than
   the default full-size action buttons to stay visually subordinate.
   ============================================================ */
.list-toolbar { gap: 12px; }
.list-toolbar button[is-="button"] {
  padding: 2px 10px;
  /* >=16px on touch: the sibling <select> below must avoid iOS Safari focus-zoom,
     and the button rides along so the toolbar pair stays a matched size. */
  font-size: 16px;
  letter-spacing: 0.06em;
}
.list-toolbar__auto { gap: 6px; }
.list-toolbar__auto .t-eyebrow { white-space: nowrap; }
.list-toolbar select[is-="select"] {
  padding: 2px 8px;
  font-size: 16px;
}
/* Restore the compact subordinate size only on pure non-touch devices, keyed on the
   ABSENCE of any coarse pointer — not the primary `pointer`. Hybrids (iPad + trackpad,
   touchscreen laptops) report `pointer: fine` yet still focus-zoom via the touchscreen,
   so they must keep the >=16px base; `any-pointer` catches the whole touch class. */
@media not all and (any-pointer: coarse) {
  .list-toolbar button[is-="button"],
  .list-toolbar select[is-="select"] { font-size: 11px; }
}

/* ============================================================
   METRIC TILES
   ============================================================ */

.metric { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 0; }
.metric__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}
.metric__value {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.metric__value--green  { color: var(--neon-green);  text-shadow: 0 0 16px rgba(0,255,156,0.35); }
.metric__value--blue   { color: var(--neon-cyan);   text-shadow: 0 0 16px rgba(0,229,255,0.30); }
.metric__value--yellow { color: var(--kw-yellow);   text-shadow: 0 0 16px rgba(245,197,24,0.35); }

/* ============================================================
   STATUS / BADGES (cyber neon mapping)
   Used by both Tera neon-style classes and inline style overrides.
   ============================================================ */

.kw-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.02);
}
.kw-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.kw-pill--pending      { color: var(--fg-3); }
.kw-pill--provisioning { color: var(--neon-violet); }
.kw-pill--dispatching  { color: var(--neon-amber); }
.kw-pill--running      { color: var(--neon-green); }
.kw-pill--cancelling   { color: var(--kw-yellow); }
.kw-pill--cancelled    { color: var(--fg-3); }
.kw-pill--completed    { color: var(--neon-cyan); }
.kw-pill--failed       { color: var(--neon-magenta); }
.kw-pill--ok           { color: var(--neon-green); }
.kw-pill--warn         { color: var(--neon-amber); }
.kw-pill--down         { color: var(--neon-magenta); }

.kw-pill--gen-prepared { color: var(--neon-violet); }
.kw-pill--gen-active   { color: var(--neon-green); }
.kw-pill--gen-spent    { color: var(--fg-3); }

.kw-pill--running::before { animation: kw-pulse 2.4s var(--ease-out) infinite; }

/* Badge — local replacement for WebTUI's [is-~="badge"] (removed with the CDN).
   WebTUI drew the chip via a gradient + ::before/::after caps; we render the
   visual equivalent as a solid inline chip. variant- maps to the neon palette
   via --badge-color / --badge-text. `<code is-="badge">` keeps its mono/inset
   look from the `code` rule (colors_and_type.css) — we only restore inline-flex;
   `:not(code)` badges (e.g. <span>) take the variant fill. */
[is-~="badge"] {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
[is-~="badge"]:not(code) {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: var(--badge-color, var(--bg-raised));
  color: var(--badge-text, var(--fg-1));
}
[is-~="badge"][variant-="background1"] { --badge-color: var(--bg-raised); --badge-text: var(--fg-1); }
[is-~="badge"][variant-="background0"] { --badge-color: var(--bg-base);   --badge-text: var(--fg-1); }
[is-~="badge"][variant-="green"]       { --badge-color: var(--neon-green); --badge-text: var(--bg-void); }
[is-~="badge"][variant-="danger"],
[is-~="badge"][variant-="red"]         { --badge-color: var(--neon-red);   --badge-text: var(--bg-void); }

/* 警示橫幅:收斂散落 3 處的 inline amber 警告 + tenants_delete 的 inline danger 邊框。 */
.kw-banner {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-1);
}
.kw-banner--warn {
  color: var(--neon-amber);
  border-color: rgba(255, 176, 32, 0.4);
  background: rgba(255, 176, 32, 0.06);
}
.kw-banner--danger {
  color: var(--danger);
  border-color: rgba(255, 51, 68, 0.4);
  background: rgba(255, 51, 68, 0.06);
}
.kw-banner--ok {
  color: var(--neon-green);
  border-color: rgba(0, 255, 156, 0.4);
  background: rgba(0, 255, 156, 0.06);
}

/* Drill operator-gate action result (extracted from drill_run_detail.html inline <style>; JS toggles --ok/--warn). */
.gate-result { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); font-family: var(--font-mono, monospace); white-space: pre-wrap; }
.gate-result--ok   { color: var(--neon-green, #16a34a); border: 1px solid rgba(22, 163, 74, 0.4); background: rgba(22, 163, 74, 0.06); }
.gate-result--warn { color: var(--neon-amber, #f59e0b); border: 1px solid rgba(255, 176, 32, 0.4); background: rgba(255, 176, 32, 0.06); }

/* ============================================================
   FORMS
   ============================================================ */

input, select, textarea {
  font-family: var(--font-mono);
  /* 16px (not --t-body=15px): iOS Safari auto-zooms the viewport when a focused
     control is < 16px. Also matches the pre-removal size, so forms render identically. */
  font-size: 16px;
  line-height: var(--lh-snug);
  background: var(--bg-inset);
  color: var(--fg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--fg-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--neon-green);
  box-shadow: 0 0 0 1px var(--neon-green), 0 0 16px -4px rgba(0,255,156,0.5);
}

/* Drill phase builder drag-and-drop (extracted from job_new.html inline <style>) */
.phase-row { cursor: grab; }
.phase-row.dragging { opacity: 0.4; cursor: grabbing; }
.phase-row.drop-target { outline: 1px dashed var(--neon-cyan); }

/* ============================================================
   BUTTONS  — bridge WebTUI variants to neon palette
   ============================================================ */

button[is-="button"], .kw-btn {
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--fg-1);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
button[is-="button"]:hover, .kw-btn:hover {
  border-color: var(--neon-green);
  background: rgba(0,255,156,0.06);
  color: var(--fg-1);
}
button[is-="button"][variant-="green"], .kw-btn--brand {
  border-color: var(--neon-green);
  background: var(--neon-green);
  color: var(--bg-void);
  box-shadow: var(--glow-green-soft);
}
button[is-="button"][variant-="green"]:hover, .kw-btn--brand:hover {
  background: var(--neon-green);
  color: var(--bg-void);
  box-shadow: var(--glow-green);
  transform: translateY(-1px);
}
.kw-btn--yellow {
  border-color: var(--kw-yellow);
  background: var(--kw-yellow);
  color: var(--bg-void);
  font-weight: 700;
  box-shadow: var(--glow-yellow);
}

/* 破壞性操作(DELETE / RELEASE / 刪除…)統一外觀。先前散落 4 處
   inline style="border-color: var(--neon-magenta)…" + settings 用裸 variant-="red"
   (CSS 只有 a[is-="button"] 版,<button> 沒套到)→ 兩種紅、三種寫法。
   收斂到既有語意 token --danger(= neon-red),attr 一律 variant-="danger"。 */
button[is-="button"][variant-="red"],
button[is-="button"][variant-="danger"],
.kw-btn--danger {
  border-color: var(--danger);
  color: var(--danger);
}
button[is-="button"][variant-="red"]:hover,
button[is-="button"][variant-="danger"]:hover,
.kw-btn--danger:hover {
  border-color: var(--danger);
  background: rgba(255, 51, 68, 0.08);
  color: var(--danger);
}

/* ============================================================
   TABLES (data console look)
   ============================================================ */

/* Pure data console: no outer frame, just a column-bottom hairline (the
   thead/tbody rules below own the look). Previously also suppressed WebTUI's
   ::before/::after ASCII-fieldset pseudo-elements; WebTUI is gone so that
   suppressor block was removed. */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
}
thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-base);
}
tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-1);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
tbody tr:hover { background: var(--bg-overlay); }

/* ============================================================
   UTILITIES
   ============================================================ */

a { color: var(--neon-green); }
a:hover { color: var(--neon-green); text-shadow: 0 0 8px rgba(0,255,156,0.5); }

.muted        { color: var(--fg-3); }
.t-warn       { color: var(--neon-amber); }
.status-line  { color: var(--fg-2); min-height: 1.25rem; font-size: 13px; }
.input-full   { width: 100%; box-sizing: border-box; }
.input-full input,
.input-full select,
.input-full textarea { width: 100%; }
.hidden       { display: none !important; }
.status-grid  { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* table 空狀態列:先前每處各寫一份 inline padding(32px 12px / 24px 12px),
   收斂成單一 utility,搭配 .muted 使用。 */
.table-empty  { text-align: center; padding: 32px 12px; }
.status-row   { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.env-banner   { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.form-inline  { display: inline; }
.kw-back-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  text-decoration: none;
}
.kw-back-link:hover { color: var(--neon-green); }

/* Topbar right cluster: env-banner + status pill + avatar */
.kw-topbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kw-avatar {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--kw-yellow) 0%, var(--kw-yellow-hot) 100%);
  color: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.dot--green   { background: var(--neon-green);   box-shadow: 0 0 6px 0 var(--neon-green); }
.dot--amber   { background: var(--neon-amber);   box-shadow: 0 0 6px 0 var(--neon-amber); }
.dot--magenta { background: var(--neon-magenta); box-shadow: 0 0 6px 0 var(--neon-magenta); }
.dot--idle    { background: var(--fg-3); }
.mono-kv      { display: flex; flex-direction: column; gap: 4px; }
.mono-kv > *  { display: flex; gap: 12px; }
.mono-kv dt   { color: var(--fg-3); min-width: 8ch; font-family: var(--font-mono); font-size: 12px; }

.worker-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.worker-card__actions { margin-top: 8px; display: flex; gap: 8px; }

@media (min-width: 60ch) {
  .status-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   P3-δ-1 T23: layer modifier tokens — visual differentiation
   for probe / app / net layer chart cards.
   ============================================================ */

.layer-app {
  --layer-accent: hsl(189 100% 50%);      /* ≈ --neon-cyan #00e5ff */
  --layer-tint: hsl(189 100% 50% / 0.06);
  --layer-icon: "🌐";
}
.layer-net {
  --layer-accent: hsl(330 100% 58%);      /* ≈ --neon-magenta #ff2e88 */
  --layer-tint: hsl(330 100% 58% / 0.06);
  --layer-icon: "⚡";
}
.layer-probe {
  --layer-accent: hsl(158 100% 50%);      /* ≈ --neon-green #00ff9c */
  --layer-tint: hsl(158 100% 50% / 0.06);
  --layer-icon: "💚";
}

section.layer-app,
section.layer-net,
section.layer-probe {
  background: var(--layer-tint);
  border-left: 3px solid var(--layer-accent);
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
}

section.layer-app .kw-section__nm::before,
section.layer-net .kw-section__nm::before,
section.layer-probe .kw-section__nm::before {
  content: var(--layer-icon);
  margin-right: 0.5rem;
}

.kw-shell{display:flex;gap:0}
.kw-subnav{display:flex;flex-direction:column;gap:.25rem;padding:1rem;min-width:180px;border-right:1px solid var(--kw-border,#313244)}
.kw-subnav a{padding:.4rem .6rem;text-decoration:none}
.kw-subnav a.is-active{background:var(--kw-accent-bg,#313244)}
.kw-shell .site-main{flex:1;padding:1rem}

/* ============================================================
   TERMINAL CHROME — TUI 氛圍層（全站 chrome）
   參考 Key-Reporter cef-tui 的「終端機視窗」母題，延續 KeyWisdom
   Cyber 既有 token。強度 = A·氛圍層 + 借 B 的 ┌─[NN] section 編號：
   加外殼 / CRT / statusbar / 編號，但保留既有混排字體與乾淨資料台
   （不轉純 mono、不還原被 cyber-bridge 壓抑的 WebTUI ASCII 框）。
   ============================================================ */

/* CRT 掃描線：啟用 colors_and_type.css 既有但沉睡的 --scanlines token。
   scope 到 .kw-term-page（與 body flex 同 gate），fixed overlay 蓋滿視窗
   （不隨內容高度 repeat 失準），蓋在 z-index:auto 內容之上模擬 CRT 螢幕；
   topbar(z-index:50)仍浮在上。scope 才不波及 portal/404 等無 chrome 的獨立頁。 */
body.kw-term-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: var(--scanlines);
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* ── 終端機 dots（併入 topbar 最左、brand 內最前）──
   compact 單層設計：廢獨立 termbar（省 ~28px fold-above），dots 移進
   topbar 保留終端機視窗識別；path 移到底部 statusbar、ctl 省略。 */
.kw-dots { display: inline-flex; gap: 7px; flex-shrink: 0; }
.kw-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.kw-dots .r { background: #ff5f56; box-shadow: 0 0 7px rgba(255,95,86,0.5); }
.kw-dots .y { background: #ffbd2e; }
.kw-dots .g { background: #27c93f; box-shadow: 0 0 7px rgba(39,201,63,0.5); }

/* CRT 開機閃：原綁 termbar，改綁 topbar（單層後 topbar 是頂部 chrome）。
   reduced-motion 關閉。 */
.kw-topbar { animation: kw-boot var(--dur-slow) var(--ease-out) both; }
@keyframes kw-boot {
  from { opacity: 0; transform: translateY(8px); filter: brightness(1.25); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ── 底部 vim-style statusbar ── */
.kw-statusbar {
  border-top: 1px solid var(--border-1);
  background: var(--bg-void);
}
.kw-statusbar__inner {
  max-width: 120ch;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
/* per-segment overflow 防禦（Codex P2）：seg 太長時截斷 ellipsis 而非撐破
   statusbar。path 段目前固定短 + flex-wrap 已能換行，此為未來放動態長內容
   （完整路徑、長 tenant slug）的防護。 */
.kw-statusbar .seg { padding: 6px 13px; letter-spacing: 0.04em; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-statusbar .seg--mode { background: var(--neon-green); color: var(--bg-void); font-weight: 700; }
.kw-statusbar .seg--a    { background: #0d2030; color: var(--neon-cyan); }
.kw-statusbar .seg--b    { background: var(--bg-raised); color: var(--fg-3); }
.kw-statusbar .seg--sp   { flex: 1; background: var(--bg-raised); }
.kw-statusbar .seg--r    { background: var(--neon-cyan); color: var(--bg-void); font-weight: 700; }

/* ── 區段標題：┌─[NN] 編號（mono）+ 比例字標題 + 漸層 rule ──
   A·為主借 B 的編號母題：框角/編號走 mono 給 TUI 識別，標題保留
   Space Grotesk（既有品牌字體層級不丟）。 */

/* per-page section auto-numbering: counter emits ┌─[NN] in DOM order,
   replacing literal numbers in templates. display:none / unrendered
   .kw-section elements do not increment → conditional & loop sections
   stay gapless with zero template arithmetic. */
main.site-main          { counter-reset: kw-sec; }
.kw-section             { counter-increment: kw-sec; }
.kw-section__id::before { content: "┌─[" counter(kw-sec, decimal-leading-zero) "]"; }

.kw-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0 14px;
}
.kw-section__id {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--neon-magenta);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.kw-section__nm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.kw-section__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-2), transparent);
}

/* 頁標題:與區段 h2 區隔。套在 h1.kw-section__nm 上放大字級;頁標題不掛
   ┌─[NN] 編號(移除 .kw-section__id span),且不佔編號序列 →
   counter-increment:none 取消 .kw-section 的遞增,讓第一個真區段仍是 [01]。
   .kw-pagehead 宣告在 .kw-section 之後,同特異性(0,1,0)後者勝。 */
.kw-pagehead { counter-increment: none; }
.kw-pagehead .kw-section__nm { font-size: var(--t-h1); font-weight: 700; }

/* ── shell prompt header（可選；置於頁面內容開頭，非 chrome 必需）── */
.kw-prompt {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--neon-green);
  margin: 0 0 16px;
  line-height: 1.7;
}
.kw-prompt .p1  { color: var(--neon-cyan); }
.kw-prompt .p2  { color: var(--neon-magenta); }
.kw-prompt .cmd { color: var(--fg-1); }
.kw-prompt .sep { color: var(--fg-3); }
.kw-prompt__caret {
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  background: var(--neon-green);
  vertical-align: -2px;
  box-shadow: var(--glow-green-soft);
  animation: kw-caret-blink 1.05s step-end infinite;
}
@keyframes kw-caret-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .kw-topbar { animation: none; }
  .kw-prompt__caret { animation: none; }
}

/* ============================================================
   RESPONSIVE — tablet/phone (spec 2026-06-05-internal-ui-responsive)
   ≥768 desktop unchanged · 767.98↓ stack+scroll · 599.98↓ card-ize
   ============================================================ */

/* always-on: let flex children shrink so .table-wrap can scroll inside shell */
.kw-shell .site-main { min-width: 0; }

/* wide-table horizontal scroll wrapper (always-on; no scrollbar when it fits) */
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap > table { width: 100%; }

/* chart grids (job_detail) — class-based so narrow can collapse them */
.chart-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.chart-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

/* ── tablet / narrow desktop: stack shell, subnav → horizontal tab row ── */
@media (max-width: 767.98px) {
  .kw-shell { flex-direction: column; }
  .kw-subnav {
    flex-direction: row;
    overflow-x: auto;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--kw-border, #313244);
    gap: .5rem;
  }
  .kw-subnav a { white-space: nowrap; }
  #kw-tenant-switch { width: 100%; margin: .5rem 0 0; }
  #kw-tenant-switch select { width: 100%; }
}

/* ── phone: opt-in card-ize list tables + layout touch-ups ── */
@media (max-width: 599.98px) {
  .table--cards-mobile,
  .table--cards-mobile tbody,
  .table--cards-mobile tr,
  .table--cards-mobile td { display: block; }
  .table--cards-mobile thead { display: none; }
  .table--cards-mobile tr {
    border: 1px solid var(--border-1);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--bg-raised);
  }
  .table--cards-mobile td {
    display: flex;
    flex-wrap: wrap;            /* crammed action cells (e.g. settings toggle+delete) wrap instead of squashing */
    justify-content: space-between;
    gap: 12px;
    border-bottom: none;
    padding: 4px 0;
  }
  /* Card label: render the column name above the value. (Historically this also had to
     out-specify the global td::before suppressor and override WebTUI's absolute-positioned
     ::before; both are gone now, but block + static stay explicit so the label stacks
     correctly inside the flex card cell instead of leaving flow.) */
  .table--cards-mobile tbody td::before {
    content: attr(data-label) !important;
    display: block !important;
    position: static !important;
    color: var(--fg-3);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  /* action/empty-header cells get no data-label (base.html JS skips them) → suppress the empty ::before gutter */
  .table--cards-mobile tbody td:not([data-label])::before { display: none !important; }
  .table--cards-mobile td code { overflow-wrap: anywhere; }

  /* layout touch-ups — scoped to .kw-term-page so they don't leak to
     portal / errors / customer pages that also load this stylesheet */
  .kw-term-page .chart-grid-3, .kw-term-page .chart-grid-2 { grid-template-columns: 1fr; }
  .kw-term-page .kw-section { flex-wrap: wrap; }
  .kw-term-page .kw-section__rule { display: none; }
  .kw-term-page .site-main { padding: 1rem; }
  .kw-term-page .inline-cluster { flex-direction: column; align-items: stretch; }
  .kw-term-page textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
}