botmux 2.62.0 → 2.63.0

package/dist/dashboard-web/style.css

@@ -1,3 +1,5 @@
+/* Base tokens — the default look (incl. the "数字员工工作台" redesign from
+   PR #123) is layered later in this file. Skins override these per [data-skin]. */
 :root {
   color-scheme: light;
   --bg: #f4f6f8;
@@ -59,6 +61,10 @@
   --shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
 }
 
+/* Named skins bring their own backdrop — hide PR #123's dark aurora overlay so
+   it doesn't tint them (it stays for the default skin's dark mode). */
+:root:not([data-skin="default"]):not([data-skin=""]) .aurora { display: none; }
+
 * { box-sizing: border-box; }
 
 body {
@@ -133,7 +139,7 @@ a { color: inherit; }
   align-items: center;
   min-height: 36px;
   padding: 8px 10px;
-  border-radius: 7px;
+  border-radius: var(--radius-sm);
   color: var(--muted);
   text-decoration: none;
   font-weight: 600;
@@ -234,6 +240,79 @@ a { color: inherit; }
   white-space: nowrap;
 }
 
+/* Theme dropdown — custom listbox so each option can show a real Lucide line
+   icon (a native <select> can't render SVG). Sits with the other topbar chips. */
+.theme-menu { position: relative; }
+
+.theme-menu-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 34px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: border-color .15s ease;
+}
+.theme-menu-btn:hover { border-color: var(--muted); }
+
+.tm-svg { display: block; width: 15px; height: 15px; }
+.theme-menu-btn .tm-chev .tm-svg { width: 14px; height: 14px; opacity: 0.6; }
+.tm-ic { display: inline-flex; }
+
+.theme-menu-pop {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  z-index: 50;
+  min-width: 192px;
+  max-height: min(70vh, 460px);
+  overflow: auto;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: var(--modal-shadow);
+}
+.theme-menu-pop[hidden] { display: none; }
+
+.tm-group {
+  padding: 7px 8px 3px;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+
+.tm-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start; /* override the base button{justify-content:center} */
+  gap: 9px;
+  width: 100%;
+  padding: 7px 9px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--fg);
+  font-size: 13px;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+.tm-item .tm-svg { color: var(--muted); flex: 0 0 auto; }
+.tm-item:hover { background: var(--surface-muted); }
+.tm-item.active { background: var(--accent-soft); color: var(--accent-strong); }
+.tm-item.active .tm-svg { color: var(--accent-strong); }
+
 main {
   width: 100%;
   max-width: 1480px;
@@ -283,6 +362,13 @@ main {
   box-shadow: var(--shadow);
 }
 
+/* Team pages: reserve a stable 2-line height for the heading lede so switching
+   between 我的团队 / 团队管理 (whose descriptions wrap to a different number of
+   lines) doesn't shift the sub-nav below it — no more flash on tab switch. */
+.tf-lede {
+  min-height: 41px;
+}
+
 .panel {
   overflow: hidden;
 }
@@ -308,6 +394,11 @@ main {
   font-size: 13px;
 }
 
+/* Keep the "View all →" action on one line; let the title block shrink instead
+   (narrow cards like Next Runs were wrapping the button onto two lines). */
+.panel-header > div { min-width: 0; }
+.panel-header .btn-link { white-space: nowrap; flex: 0 0 auto; }
+
 .metric-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(140px, 1fr));
@@ -378,22 +469,81 @@ main {
   box-shadow: var(--shadow);
 }
 
-input,
-select,
 button,
 .btn-link {
   font: inherit;
 }
 
-input::placeholder {
+/* ── Unified form controls ──────────────────────────────────────────────────
+   One consistent look for every text input, <select> and <textarea>: themed
+   surface, 1px border, var(--radius) corners, a custom dropdown chevron and a
+   soft accent focus ring. Native appearance is reset so WebKit search fields and
+   selects stop rendering their own mismatched pill/rounded shapes. */
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
+select,
+textarea {
+  min-height: 34px;
+  padding: 7px 11px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background-color: var(--surface-raised);
+  color: var(--fg);
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.4;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
+}
+
+textarea {
+  min-height: 84px;
+  resize: vertical;
+}
+
+select {
+  padding-right: 30px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23808a99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 11px center;
+  cursor: pointer;
+}
+
+/* Multi-selects show a list, not a single value — no chevron, full padding. */
+select[multiple] {
+  background-image: none;
+  padding-right: 8px;
+}
+
+input:not([type=checkbox]):not([type=radio]):hover:not(:disabled),
+select:hover:not(:disabled),
+textarea:hover:not(:disabled) {
+  border-color: var(--muted);
+}
+
+input:not([type=checkbox]):not([type=radio]):focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+input::placeholder,
+textarea::placeholder {
   color: var(--faint);
 }
 
+input:disabled,
+select:disabled,
+textarea:disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+
 button:focus-visible,
 .btn-link:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
 a:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
@@ -408,7 +558,7 @@ a:focus-visible {
   min-height: 34px;
   padding: 0 10px;
   border: 1px solid var(--border);
-  border-radius: 7px;
+  border-radius: var(--radius-sm);
   color: var(--fg);
   background: var(--surface-raised);
 }
@@ -432,6 +582,10 @@ a:focus-visible {
   width: 150px;
 }
 
+.sessions-view-toggle {
+  flex: 0 0 auto;
+}
+
 .filter-toggle {
   display: inline-flex;
   align-items: center;
@@ -478,11 +632,12 @@ a:focus-visible {
   min-height: 32px;
   padding: 0 7px;
   border: 1px solid var(--border);
-  border-radius: 7px;
+  border-radius: var(--radius-sm);
   background: var(--surface-raised);
   color: var(--muted);
   font-size: 11px;
   font-weight: 700;
+  line-height: 1;
 }
 
 .filter-check:hover {
@@ -544,9 +699,10 @@ button,
   gap: 6px;
   padding: 0 11px;
   border: 1px solid var(--border);
-  border-radius: 7px;
+  border-radius: var(--radius-sm);
   background: var(--surface-raised);
   color: var(--fg);
+  line-height: 1;
   text-decoration: none;
   cursor: pointer;
   -webkit-appearance: none;
@@ -581,11 +737,13 @@ button.primary {
 .status {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   min-height: 22px;
   padding: 0 8px;
-  border-radius: 999px;
+  border-radius: var(--radius-sm);
   font-size: 11px;
   font-weight: 800;
+  line-height: 1;
   text-transform: uppercase;
   letter-spacing: 0;
   text-decoration: none;
@@ -634,6 +792,275 @@ button.primary {
 .status-closed { background: var(--danger-soft); color: var(--danger); }
 .status-analyzing { background: var(--warning-soft); color: var(--warning); }
 .status-starting { background: var(--success-soft); color: var(--success); }
+.status-limited { background: var(--danger-soft); color: var(--danger); }
+
+/* ── Sessions board — "control-room signal wall" ─────────────────────────────
+   Each column is a signal channel: a LED dot + uppercase channel label in the
+   header, and every card inherits the channel color through `--col-signal`.
+   The needs-you channel pulses; everything else stays calm. Terminal-native
+   typography (mono labels, tabular numerals) over generic SaaS chrome. */
+.sessions-board {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(220px, 1fr));
+  gap: 12px;
+  align-items: start;
+  /* faint blueprint grid behind the wall — atmosphere, not decoration */
+  background-image:
+    repeating-linear-gradient(0deg, color-mix(in srgb, var(--border-soft) 38%, transparent) 0 1px, transparent 1px 24px),
+    repeating-linear-gradient(90deg, color-mix(in srgb, var(--border-soft) 38%, transparent) 0 1px, transparent 1px 24px);
+  border-radius: var(--radius);
+  padding: 10px;
+}
+
+.sessions-board[hidden] {
+  display: none;
+}
+
+.session-board-column {
+  --col-signal: var(--border);
+  min-width: 0;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius);
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.session-board-column > header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px;
+  border-bottom: 1px solid var(--border-soft);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--col-signal) 7%, transparent), transparent 80%),
+    var(--surface-muted);
+}
+
+.session-board-column h2 {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.4;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* channel LED */
+.session-board-column h2::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--col-signal);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--col-signal) 18%, transparent);
+  flex: none;
+}
+
+.session-board-column p {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.session-board-count {
+  min-width: 28px;
+  min-height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--col-signal) 10%, var(--surface-raised));
+  border: 1px solid color-mix(in srgb, var(--col-signal) 35%, var(--border));
+  color: color-mix(in srgb, var(--col-signal) 75%, var(--fg));
+  font-family: var(--mono);
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.session-board-list {
+  display: grid;
+  gap: 10px;
+  padding: 10px;
+}
+
+.session-board-empty {
+  min-height: 64px;
+  display: grid;
+  place-items: center;
+  color: var(--faint);
+  border: 1px dashed var(--border);
+  border-radius: var(--radius);
+  background: transparent;
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+}
+
+.session-board-needs-you {
+  --col-signal: var(--danger);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 4%, var(--surface)), var(--surface) 140px);
+}
+
+/* the one channel that's allowed to breathe */
+.session-board-needs-you h2::before {
+  animation: board-led-pulse 1.6s ease-in-out infinite;
+}
+
+.session-board-starting {
+  --col-signal: var(--warning);
+}
+
+.session-board-working {
+  --col-signal: var(--success);
+}
+
+.session-board-idle {
+  --col-signal: var(--faint);
+}
+
+@keyframes board-led-pulse {
+  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--col-signal) 18%, transparent); }
+  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--col-signal) 30%, transparent); }
+}
+
+.session-card {
+  display: grid;
+  gap: 10px;
+  padding: 11px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-raised);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
+}
+
+/* Entry animation ONLY on the board's first paint (.board-enter set by JS).
+ * SSE-driven re-renders rebuild the DOM — replaying the staggered reveal on
+ * every status update made the whole page flash. */
+.board-enter .session-board-list .session-card {
+  animation: board-card-in 280ms ease backwards;
+}
+
+/* stagger the first paint — one orchestrated reveal, then calm */
+.board-enter .session-board-list .session-card:nth-child(1) { animation-delay: 30ms; }
+.board-enter .session-board-list .session-card:nth-child(2) { animation-delay: 75ms; }
+.board-enter .session-board-list .session-card:nth-child(3) { animation-delay: 120ms; }
+.board-enter .session-board-list .session-card:nth-child(4) { animation-delay: 165ms; }
+.board-enter .session-board-list .session-card:nth-child(n+5) { animation-delay: 210ms; }
+
+@keyframes board-card-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+
+.session-card:hover {
+  border-color: color-mix(in srgb, var(--col-signal) 55%, var(--border));
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px color-mix(in srgb, var(--col-signal) 12%, rgba(15, 23, 42, 0.10));
+}
+
+/* whole-card selection (no checkbox) — accent ring + soft tint */
+.session-card.selected {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+  background: color-mix(in srgb, var(--accent) 5%, var(--surface-raised));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .session-card { animation: none; transition: none; }
+  .session-board-needs-you h2::before { animation: none; }
+  .session-card:hover { transform: none; }
+}
+
+.session-card-top {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) max-content;
+  align-items: start;
+  gap: 8px;
+}
+
+.session-card-title {
+  min-width: 0;
+}
+
+.session-card-title strong,
+.session-card-title span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.session-card-title strong {
+  color: var(--fg);
+  font-size: 13px;
+}
+
+.session-card-title span {
+  margin-top: 2px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.session-card-meta,
+.session-card-time,
+.session-card-actions {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.session-card-meta {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.session-card-time {
+  justify-content: space-between;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.session-signal {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 22px;
+  padding: 0 8px;
+  color: var(--danger);
+  font-family: var(--mono);
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--danger) 9%, transparent);
+  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
+}
+
+.session-card-actions {
+  padding-top: 2px;
+  justify-content: flex-end;
+}
+
+.session-card-actions button,
+.session-card-actions .btn-link {
+  min-height: 30px;
+  padding: 0 9px;
+  font-size: 12px;
+}
 
 dialog {
   width: min(680px, calc(100vw - 32px));
@@ -853,7 +1280,7 @@ input.row-select,
   width: 100%;
   padding: 9px 10px;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius);
   background: var(--surface);
   color: var(--text);
   font-size: 14px;
@@ -986,7 +1413,7 @@ input.row-select,
   color: var(--fg);
   background: var(--surface-raised);
   border: 1px solid var(--border);
-  border-radius: 7px;
+  border-radius: var(--radius);
   resize: vertical;
 }
 
@@ -1023,6 +1450,7 @@ input.row-select,
   }
   main {
     padding: 16px;
+    overflow-x: hidden;
   }
 }
 
@@ -1047,6 +1475,7 @@ input.row-select,
   }
   .page-heading {
     flex-direction: column;
+    align-items: stretch;
   }
   .filters {
     align-items: stretch;
@@ -1063,6 +1492,19 @@ input.row-select,
   .sessions-filters select {
     width: 100%;
   }
+  .sessions-view-toggle {
+    display: flex;
+    width: 100%;
+    max-width: calc(100vw - 32px);
+    min-width: 0;
+  }
+  .sessions-view-toggle button {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .sessions-board {
+    grid-template-columns: 1fr;
+  }
   .filter-check-group {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1271,7 +1713,7 @@ input.row-select,
   font-size: 13px;
   padding: 14px;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius);
   resize: vertical;
   line-height: 1.55;
   background: var(--surface-muted);
@@ -1421,7 +1863,7 @@ input.row-select,
 .wf-io-meta { margin-top: 0.35rem; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
 .wf-approval-box { margin-top: 0.6rem; padding: 0.55rem; border: 1px solid var(--warning); border-radius: 4px; background: var(--warning-soft); }
 .wf-approval-box label span { display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 12px; }
-.wf-approval-comment { width: 100%; resize: vertical; min-height: 48px; padding: 0.35rem 0.45rem; border: 1px solid var(--border); border-radius: 4px; font: inherit; background: var(--surface); color: var(--fg); }
+.wf-approval-comment { width: 100%; resize: vertical; min-height: 48px; padding: 0.35rem 0.45rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; background: var(--surface); color: var(--fg); }
 .wf-approval-actions { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.45rem; flex-wrap: wrap; }
 .wf-approval-status { margin: 0.5rem 0 0; }
 .wf-io-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.55rem; margin-top: 0.6rem; }
@@ -1444,7 +1886,7 @@ input.row-select,
 .catalog-head h2, .catalog-detail-head h2 { margin: 0 0 0.15rem; font-size: 18px; line-height: 1.25; }
 .catalog-run-form { display: grid; gap: 0.65rem; max-width: 900px; }
 .catalog-run-form label span, .catalog-param header { display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 12px; }
-.catalog-run-form textarea, .catalog-run-form input[type=text] { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--fg); background: var(--surface); }
+.catalog-run-form textarea, .catalog-run-form input[type=text] { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--fg); background: var(--surface); }
 .catalog-run-form textarea { resize: vertical; min-height: 150px; }
 .catalog-chat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
 .catalog-param-errors { background: var(--warning-soft); border-left: 3px solid var(--warning); padding: 0.45rem 0.65rem; border-radius: 3px; }
@@ -1476,3 +1918,2415 @@ input.row-select,
   .wf-approval-actions { flex-direction: column; align-items: stretch; }
   .wf-approval-actions button { width: 100%; }
 }
+
+/* ════════════════════════════════════════════════════════════════════════════
+   数字员工工作台 — 统一视觉层（未来 / 科技 / 数字人）
+   设计语言：深空底 + 蓝青极光氛围、玻璃面板、胶囊按钮与标签、
+   每个 bot 一颗专属色相的"数字生命球"。强视觉只在品牌区（团队卡），
+   工作面（board / 表格 / 表单页）保持密度与可扫描性。
+   状态光语义：青=执行中 · 绿=就绪 · 琥珀=需要你 · 红=异常 · 蓝=启动中
+   ══════════════════════════════════════════════════════════════════════════ */
+
+:root {
+  --info: #2779d8;
+  --info-soft: rgba(39, 121, 216, 0.12);
+  --accent: #0a8bbf;
+  --accent-strong: #066d99;
+  --accent-soft: rgba(10, 139, 191, 0.10);
+  --radius: 14px;
+  --radius-sm: 9px;
+  --sidebar-width: 250px;
+}
+
+:root[data-theme="dark"] {
+  --bg: #07090f;
+  --bg-soft: #0b0f17;
+  --surface: #0e141d;
+  --surface-raised: #151d29;
+  --surface-muted: #0b1018;
+  --fg: #eef2f8;
+  --muted: #99a3b3;
+  --faint: #5d6675;
+  --border: #25303f;
+  --border-soft: #1a2330;
+  --accent: #5be3ff;
+  --accent-strong: #8feeff;
+  --accent-soft: rgba(91, 227, 255, 0.13);
+  --success: #4ee69a;
+  --success-soft: rgba(78, 230, 154, 0.13);
+  --warning: #ffc24d;
+  --warning-soft: rgba(255, 194, 77, 0.13);
+  --danger: #ff6b81;
+  --danger-soft: rgba(255, 107, 129, 0.13);
+  --info: #4f8bff;
+  --info-soft: rgba(79, 139, 255, 0.14);
+  --on-accent: #051018;
+  --on-danger: #1c0508;
+  --shadow: 0 14px 40px rgba(0, 0, 0, 0.34);
+}
+
+/* ── 极光底（dark 专属氛围；紫色只允许出现在这里）─────────────────────────── */
+.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
+.aurora i { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.30; }
+.aurora .a1 { width: 520px; height: 420px; left: -20px; top: -200px; background: #1b4dff; opacity: 0.18; }
+.aurora .a2 { width: 520px; height: 440px; right: -90px; top: -80px; background: #00c2d8; opacity: 0.17; }
+.aurora .a3 { width: 620px; height: 420px; left: 38%; bottom: -280px; background: #6b3df0; opacity: 0.13; }
+:root[data-theme="light"] .aurora { display: none; }
+
+.app-shell { position: relative; z-index: 1; }
+
+/* ── 固定侧栏（标准后台布局：齐顶到底、直角、细分割线，背景与主区连续）─────── */
+.sidebar {
+  margin: 0;
+  top: 0;
+  height: 100vh;
+  border: 0;
+  border-right: 1px solid var(--border);
+  border-radius: 0;
+  background: var(--surface);
+}
+:root[data-theme="dark"] .sidebar {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(20px);
+  border-right-color: var(--border);
+}
+
+/* 品牌：发光的数字生命球 */
+.brand-mark {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 32% 28%, #aef4ff, var(--accent) 38%, #4f8bff 68%, #0a1530 105%);
+  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent), inset 0 0 8px rgba(255, 255, 255, 0.3);
+}
+
+.sidebar-nav { gap: 2px; }
+.sidebar-nav a {
+  gap: 11px;
+  border-radius: 11px;
+  font-size: 13px;
+}
+.sidebar-nav a svg {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.sidebar-nav a.active {
+  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--info) 10%, transparent));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
+  color: var(--accent-strong);
+}
+
+/* ── 顶栏：透明玻璃，仅右侧操作区（品牌只在侧栏出现一次，顶栏不重复）──────── */
+.topbar {
+  background: color-mix(in srgb, var(--bg) 70%, transparent);
+  border-bottom: 1px solid var(--border);
+  justify-content: flex-end;
+}
+.topbar-title { display: none; }
+
+/* ── 全局 attention strip（任何页面常驻，待处理最高优先级）────────────────── */
+.attention-strip {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 14px 24px 0;
+  padding: 9px 16px;
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
+  background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 14%, transparent), color-mix(in srgb, var(--warning) 4%, transparent) 70%);
+  font-size: 13px;
+}
+.attention-strip[hidden] { display: none; }
+.attention-strip b { color: var(--warning); }
+.attention-strip-ic {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  flex: none;
+  display: grid;
+  place-items: center;
+  background: var(--warning);
+  color: #2a1c00;
+  font-size: 11px;
+  font-weight: 800;
+  animation: strip-pulse 2s ease-in-out infinite;
+}
+@keyframes strip-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 40%, transparent); }
+  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning) 18%, transparent); }
+}
+.attention-strip-longest {
+  color: var(--muted);
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.attention-strip-go {
+  margin-left: auto;
+  flex: none;
+  padding: 5px 14px;
+  border-radius: 999px;
+  background: var(--warning);
+  color: #2a1c00;
+  font-size: 12px;
+  font-weight: 700;
+  text-decoration: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .attention-strip-ic { animation: none; }
+}
+
+/* ── 胶囊化：按钮 / 标签 / 分段控件 ──────────────────────────────────────── */
+button,
+.btn-link {
+  border-radius: 999px;
+  padding: 0 13px;
+}
+button.primary,
+.btn-link.primary {
+  background: linear-gradient(120deg, var(--accent), var(--info));
+  border-color: transparent;
+  color: var(--on-accent);
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent);
+}
+button.contrast {
+  background: transparent;
+  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
+  color: var(--danger);
+}
+button.contrast:hover { background: var(--danger-soft); border-color: var(--danger); }
+.segmented { border-radius: 999px; }
+.segmented button { border-radius: 999px; }
+.segmented button.active {
+  background: linear-gradient(120deg, var(--accent), var(--info));
+  color: var(--on-accent);
+}
+.badge,
+.status {
+  border-radius: 999px;
+  text-transform: none;
+  font-weight: 700;
+}
+
+/* 状态光语义重排：青=执行中 · 蓝=启动 · 绿=就绪 · 琥珀/红=要人管 */
+.status-working,
+.status-active { background: var(--accent-soft); color: var(--accent); }
+.status-analyzing { background: var(--accent-soft); color: var(--accent); }
+.status-starting { background: var(--info-soft); color: var(--info); }
+.status-idle { background: var(--success-soft); color: var(--success); }
+.status-limited { background: var(--danger-soft); color: var(--danger); }
+
+/* ── 玻璃面板（dark 下生效；light 保持实底）─────────────────────────────── */
+:root[data-theme="dark"] .panel,
+:root[data-theme="dark"] .metric-card,
+:root[data-theme="dark"] .bd-card,
+:root[data-theme="dark"] .filters {
+  background: rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(18px);
+  border-color: rgba(255, 255, 255, 0.08);
+  background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.045), transparent 40%);
+}
+
+/* ── 数字生命球（bot avatar，全站统一）──────────────────────────────────── */
+.orb-avatar {
+  position: relative;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  flex: none;
+  background: radial-gradient(circle at 32% 28%, #d8fbff, var(--c1, #5be3ff) 38%, var(--c2, #4f8bff) 72%, #060d1c 105%);
+  box-shadow: 0 0 16px color-mix(in srgb, var(--c1, #5be3ff) 32%, transparent), inset 0 0 9px rgba(255, 255, 255, 0.28);
+}
+.orb-avatar-sm {
+  width: 24px;
+  height: 24px;
+  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.28);
+}
+.orb-dot {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid var(--bg);
+}
+.orb-dot-ok { background: var(--success); }
+.orb-dot-busy { background: var(--accent); }
+.orb-dot-warn { background: var(--warning); }
+.orb-dot-off { background: var(--faint); }
+
+/* ── 工作台首页 ─────────────────────────────────────────────────────────── */
+.hero-pills { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 7px 14px;
+  border-radius: 999px;
+  background: var(--surface);
+  border: 1px solid var(--border-soft);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+:root[data-theme="dark"] .pill { background: rgba(255, 255, 255, 0.045); }
+.pill b { color: var(--fg); font-size: 14px; }
+.pill-hot { border-color: color-mix(in srgb, var(--warning) 45%, transparent); color: var(--warning); }
+.pill-hot b { color: var(--warning); }
+
+.sect-head { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
+.sect-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
+.sect-head span { color: var(--faint); font-size: 12px; }
+.sect-head a { margin-left: auto; color: var(--accent); font-size: 12px; text-decoration: none; font-weight: 600; }
+
+.team-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+  gap: 13px;
+}
+.mate {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px 15px 13px;
+  border-radius: 16px;
+  border: 1px solid var(--border-soft);
+  background: var(--surface);
+  box-shadow: var(--shadow);
+}
+:root[data-theme="dark"] .mate {
+  background: rgba(255, 255, 255, 0.045);
+  backdrop-filter: blur(20px);
+  border-color: rgba(255, 255, 255, 0.09);
+  background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.05), transparent 38%);
+}
+.mate-attn {
+  border-color: color-mix(in srgb, var(--warning) 42%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 18%, transparent), 0 10px 32px color-mix(in srgb, var(--warning) 9%, transparent);
+}
+.mate-off { opacity: 0.55; }
+.mate-top { display: flex; align-items: center; gap: 11px; }
+.mate-id { min-width: 0; }
+.mate-id b { display: block; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.mate-role {
+  display: inline-block;
+  margin-top: 3px;
+  font-size: 10.5px;
+  font-weight: 600;
+  color: var(--muted);
+  background: var(--surface-muted);
+  border: 1px solid var(--border-soft);
+  padding: 1px 9px;
+  border-radius: 999px;
+}
+:root[data-theme="dark"] .mate-role { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.1); }
+.mate-task {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.5;
+  min-height: 36px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.mate-task b { color: var(--fg); font-weight: 600; }
+.mate-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--faint);
+}
+.tag {
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 10.5px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.tag-run { color: var(--accent); background: var(--accent-soft); }
+.tag-ok { color: var(--success); background: var(--success-soft); }
+.tag-warn { color: var(--warning); background: var(--warning-soft); }
+.tag-off { color: var(--faint); background: var(--surface-muted); }
+:root[data-theme="dark"] .tag-off { background: rgba(255, 255, 255, 0.06); }
+
+/* 需要你处理 — 队列卡 */
+.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
+.qcard {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 15px;
+  border-radius: 14px;
+  border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent);
+  background: linear-gradient(120deg, color-mix(in srgb, var(--warning) 10%, transparent), transparent 60%), var(--surface);
+}
+:root[data-theme="dark"] .qcard {
+  background: linear-gradient(120deg, color-mix(in srgb, var(--warning) 10%, transparent), transparent 60%), rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(18px);
+}
+.qcard-empty {
+  border-style: dashed;
+  border-color: var(--border);
+  background: transparent;
+  color: var(--faint);
+  font-size: 12px;
+  justify-content: center;
+}
+.qcard-tx { min-width: 0; flex: 1; }
+.qcard-tx b { display: block; font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.qcard-tx span { color: var(--muted); font-size: 11.5px; }
+.qcard-go {
+  flex: none;
+  padding: 6px 14px;
+  border-radius: 999px;
+  background: var(--warning);
+  color: #2a1c00;
+  font-size: 12px;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+/* 下方两栏 */
+.overview-cols { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; align-items: start; }
+.overview-side { display: grid; gap: 14px; }
+.sess-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 18px;
+  border-bottom: 1px solid var(--border-soft);
+}
+.sess-row:last-child { border-bottom: 0; }
+.sess-tx { min-width: 0; flex: 1; }
+.sess-tx b { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.sess-tx span { color: var(--faint); font-size: 11px; }
+
+/* 此刻概览圆环 */
+.donut-row { display: flex; align-items: center; gap: 18px; padding: 14px 18px; }
+.donut-wrap { position: relative; width: 92px; height: 92px; flex: none; }
+.donut {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  -webkit-mask: radial-gradient(farthest-side, transparent 63%, #000 64%);
+  mask: radial-gradient(farthest-side, transparent 63%, #000 64%);
+}
+/* flex 列整体居中：grid 两行会均分高度，把数字顶上、标签压到环上 */
+.donut-center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  text-align: center;
+}
+.donut-center b { display: block; font-size: 20px; line-height: 1.1; }
+.donut-center span {
+  display: block;
+  font-size: 9px;
+  line-height: 1.2;
+  color: var(--faint);
+  max-width: 54px; /* 限制在中心孔内，英文 Active Sessions 折两行 */
+}
+.donut-legend { display: grid; gap: 7px; font-size: 12px; color: var(--muted); }
+.donut-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
+
+/* ── 会话看板：工作面收敛（弱玻璃 + 高密度 + 新状态光）───────────────────── */
+.sessions-board {
+  background-image: none;
+  padding: 0;
+}
+.session-board-column { border-radius: 16px; }
+:root[data-theme="dark"] .session-board-column {
+  background: rgba(255, 255, 255, 0.03);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+:root[data-theme="dark"] .session-board-column > header {
+  background: linear-gradient(180deg, color-mix(in srgb, var(--col-signal) 8%, transparent), transparent 85%);
+  border-color: rgba(255, 255, 255, 0.07);
+}
+.session-board-column h2 {
+  font-family: inherit;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  font-size: 13px;
+}
+.session-board-count { border-radius: 999px; font-family: inherit; }
+.session-board-needs-you { --col-signal: var(--warning); }
+.session-board-needs-you { background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 4%, var(--surface)), var(--surface) 140px); }
+.session-board-starting { --col-signal: var(--info); }
+.session-board-working { --col-signal: var(--accent); }
+.session-board-idle { --col-signal: var(--success); }
+:root[data-theme="dark"] .session-board-needs-you {
+  background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 6%, transparent), transparent 140px), rgba(255, 255, 255, 0.03);
+}
+.session-card { border-radius: 12px; }
+:root[data-theme="dark"] .session-card {
+  background: rgba(13, 17, 26, 0.6);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+.session-card-top {
+  grid-template-columns: max-content minmax(0, 1fr) max-content;
+  align-items: center;
+}
+.session-signal {
+  color: var(--warning);
+  background: color-mix(in srgb, var(--warning) 10%, transparent);
+  border-color: color-mix(in srgb, var(--warning) 32%, transparent);
+  font-family: inherit;
+  border-radius: 999px;
+}
+
+/* 表格 hover 行 */
+:root[data-theme="dark"] table { background: rgba(255, 255, 255, 0.03); }
+:root[data-theme="dark"] th { background: rgba(255, 255, 255, 0.04); }
+
+/* ── 会话筛选条：一行轻量胶囊，不再是一面板 checkbox 墙 ─────────────────── */
+.sessions-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 9px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+.sessions-filters input[type=search] {
+  flex: 0 1 300px;
+  min-width: 200px;
+  min-height: 36px;
+  padding: 0 16px;
+  border-radius: 999px;
+  background: var(--surface);
+  border: 1px solid var(--border-soft);
+}
+.sessions-filters select {
+  width: auto;
+  min-height: 36px;
+  padding: 0 30px 0 14px;
+  border-radius: 999px;
+  background-color: var(--surface);
+  border: 1px solid var(--border-soft);
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2399a3b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  color: var(--muted);
+  font-weight: 600;
+  font-size: 12.5px;
+  cursor: pointer;
+}
+:root[data-theme="dark"] .sessions-filters input[type=search],
+:root[data-theme="dark"] .sessions-filters select {
+  background-color: rgba(255, 255, 255, 0.045);
+  border-color: rgba(255, 255, 255, 0.09);
+}
+.sessions-filters input[type=search]:focus,
+.sessions-filters select:focus {
+  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+}
+
+/* 「仅活跃」toggle chip：checkbox 隐藏，整个胶囊就是开关 */
+.sessions-filters .filter-toggle {
+  min-height: 36px;
+  padding: 0 16px;
+  border-radius: 999px;
+  border: 1px solid var(--border-soft);
+  background: var(--surface);
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+}
+:root[data-theme="dark"] .sessions-filters .filter-toggle {
+  background: rgba(255, 255, 255, 0.045);
+  border-color: rgba(255, 255, 255, 0.09);
+}
+.sessions-filters .filter-toggle input { position: absolute; opacity: 0; pointer-events: none; }
+.sessions-filters .filter-toggle span::before {
+  content: "";
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  margin-right: 7px;
+  background: var(--faint);
+  vertical-align: 1px;
+}
+.sessions-filters .filter-toggle:has(input:checked) {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  background: var(--accent-soft);
+}
+.sessions-filters .filter-toggle:has(input:checked) span::before {
+  background: var(--accent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
+}
+
+/* CLI 下拉 chip + 弹层 */
+.filter-cli { position: relative; }
+.filter-cli summary {
+  list-style: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 36px;
+  padding: 0 30px 0 16px;
+  border-radius: 999px;
+  border: 1px solid var(--border-soft);
+  background-color: var(--surface);
+  color: var(--muted);
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2399a3b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+}
+.filter-cli summary::-webkit-details-marker { display: none; }
+:root[data-theme="dark"] .filter-cli summary {
+  background-color: rgba(255, 255, 255, 0.045);
+  border-color: rgba(255, 255, 255, 0.09);
+}
+.filter-cli summary b { font-weight: 700; color: var(--fg); }
+.filter-cli summary b.cli-filter-active { color: var(--accent); }
+.filter-cli[open] summary {
+  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+  color: var(--fg);
+}
+.filter-cli-pop {
+  position: absolute;
+  z-index: 30;
+  top: calc(100% + 8px);
+  left: 0;
+  width: 340px;
+  max-width: calc(100vw - 48px);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  padding: 13px;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  background: var(--surface-raised);
+  box-shadow: var(--modal-shadow);
+}
+:root[data-theme="dark"] .filter-cli-pop {
+  background: #131a26;
+  border-color: rgba(255, 255, 255, 0.12);
+}
+.filter-cli-pop .filter-check {
+  min-height: 28px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid var(--border-soft);
+  background: transparent;
+  color: var(--muted);
+  font-size: 11.5px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.filter-cli-pop .filter-check input { position: absolute; opacity: 0; pointer-events: none; }
+.filter-cli-pop .filter-check:has(input:checked) {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  background: var(--accent-soft);
+}
+
+@media (max-width: 720px) {
+  .sessions-filters input[type=search] { flex: 1 1 100%; }
+  .filter-cli-pop { left: auto; right: 0; }
+}
+
+/* ── Bot 配置 → 数字员工档案（master-detail）────────────────────────────── */
+.bd-layout {
+  display: grid;
+  grid-template-columns: 252px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+/* 左：员工名册 */
+.bd-roster {
+  border-radius: 16px;
+  border: 1px solid var(--border-soft);
+  background: var(--surface);
+  padding: 8px;
+  display: grid;
+  gap: 3px;
+  position: sticky;
+  top: 84px;
+}
+:root[data-theme="dark"] .bd-roster {
+  background: rgba(255, 255, 255, 0.045);
+  backdrop-filter: blur(18px);
+  border-color: rgba(255, 255, 255, 0.09);
+}
+.bd-roster-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 10px;
+  border-radius: 11px;
+  cursor: pointer;
+}
+.bd-roster-item:hover { background: var(--surface-muted); }
+:root[data-theme="dark"] .bd-roster-item:hover { background: rgba(255, 255, 255, 0.06); }
+.bd-roster-item.on {
+  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--info) 8%, transparent));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+.bd-roster-tx { min-width: 0; flex: 1; }
+.bd-roster-tx b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bd-roster-tx span { display: block; color: var(--faint); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bd-roster-flag {
+  flex: none;
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--warning);
+  border: 1px solid color-mix(in srgb, var(--warning) 42%, transparent);
+  border-radius: 999px;
+  padding: 1px 7px;
+}
+
+/* 右：档案 */
+.bd-profile { max-width: none; padding: 0; background: transparent; border: 0; box-shadow: none; }
+:root[data-theme="dark"] .bd-profile { background: transparent; backdrop-filter: none; background-image: none; }
+.bd-profile-head {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 0;
+  padding: 18px 20px;
+  border-radius: 18px;
+  border: 1px solid var(--border-soft);
+  background: var(--surface);
+  box-shadow: var(--shadow);
+}
+:root[data-theme="dark"] .bd-profile-head {
+  background: rgba(255, 255, 255, 0.045);
+  backdrop-filter: blur(18px);
+  border-color: rgba(255, 255, 255, 0.09);
+  background-image: linear-gradient(160deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 45%);
+}
+.bd-profile-head .orb-avatar { width: 54px; height: 54px; }
+.bd-profile-id { min-width: 0; }
+.bd-profile-id strong { display: block; font-size: 18px; }
+.bd-profile-id .mate-role { margin-top: 5px; }
+.bd-profile-id code {
+  display: block;
+  margin-top: 5px;
+  padding: 0;
+  background: transparent;
+  color: var(--faint);
+  font-size: 10.5px;
+}
+.bd-profile-meta {
+  margin: 0 0 0 auto;
+  display: grid;
+  gap: 5px;
+  text-align: right;
+  flex: none;
+}
+.bd-profile-meta small { color: var(--muted); font-size: 11.5px; }
+.bd-profile-meta .bd-meta-ok { color: var(--success); }
+
+/* 配置 tile 两栏 */
+.bd-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  align-items: start;
+  margin-top: 14px;
+}
+.bd-tile {
+  border-radius: 16px;
+  border: 1px solid var(--border-soft);
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  padding: 4px 18px 16px;
+}
+:root[data-theme="dark"] .bd-tile {
+  background: rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(18px);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+.bd-tile .bd-section { padding-top: 14px; }
+.bd-tile .bd-section + .bd-section { margin-top: 14px; border-top: 1px solid var(--border-soft); }
+.bd-tile .bd-section-title {
+  font-size: 12.5px;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  color: var(--fg);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.bd-tile .bd-section-title::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
+  flex: none;
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: minmax(320px, 760px);
+  gap: 14px;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.settings-card {
+  padding: 4px 18px 16px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.settings-card .bd-section { padding-top: 14px; }
+.settings-card .bd-section + .bd-section { margin-top: 14px; border-top: 1px solid var(--border-soft); }
+.settings-actions { margin-top: 8px; }
+.settings-card .toggle-row { min-width: 0; }
+.settings-card .toggle-tx { min-width: 0; }
+.settings-card .toggle-tx strong,
+.settings-card .toggle-tx small {
+  overflow-wrap: anywhere;
+}
+.settings-card .toggle-tx small {
+  -webkit-line-clamp: unset;
+  color: var(--muted);
+}
+
+/* toggle 开关行：checkbox 隐藏，switch 是视觉开关 */
+.toggle-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 9px 0;
+  cursor: pointer;
+  color: var(--fg);
+}
+.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
+.toggle-row .switch {
+  width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  background: var(--border);
+  position: relative;
+  flex: none;
+  margin-top: 1px;
+  transition: background 140ms ease;
+}
+.toggle-row .switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--muted);
+  transition: left 140ms ease, background 140ms ease;
+}
+.toggle-row input:checked + .switch {
+  background: linear-gradient(120deg, var(--accent), var(--info));
+  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent);
+}
+.toggle-row input:checked + .switch::after { left: 18px; background: #fff; }
+.toggle-row input:disabled + .switch { opacity: 0.4; }
+.toggle-tx { min-width: 0; }
+.toggle-tx strong { display: block; font-size: 12.5px; font-weight: 600; }
+.toggle-tx small {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin-top: 2px;
+  color: var(--faint);
+  font-size: 11px;
+  line-height: 1.5;
+  cursor: pointer;
+}
+.toggle-tx small:hover { color: var(--muted); }
+.toggle-tx small.open { -webkit-line-clamp: unset; color: var(--muted); }
+/* toggle 行之外的长帮助文字（签名/额度说明）同样默认一行，点开展开 */
+.bd-tile small.bd-help {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: var(--faint);
+  font-size: 11px;
+  line-height: 1.5;
+  cursor: pointer;
+}
+.bd-tile small.bd-help:hover { color: var(--muted); }
+.bd-tile small.bd-help.open { -webkit-line-clamp: unset; color: var(--muted); }
+@media (prefers-reduced-motion: reduce) {
+  .toggle-row .switch, .toggle-row .switch::after { transition: none; }
+}
+
+.bd-tile textarea,
+.bd-tile input[type=text],
+.bd-tile input[type=number] {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 9px 13px;
+  border: 1px solid var(--border);
+  border-radius: 11px;
+  background: var(--surface-raised);
+  color: var(--fg);
+  font: 12px/1.5 var(--mono);
+}
+:root[data-theme="dark"] .bd-tile textarea,
+:root[data-theme="dark"] .bd-tile input[type=text],
+:root[data-theme="dark"] .bd-tile input[type=number] {
+  background: rgba(13, 17, 26, 0.55);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 980px) {
+  .bd-layout { grid-template-columns: 1fr; }
+  .bd-roster { position: static; display: flex; overflow-x: auto; }
+  .bd-roster-item { flex: 0 0 auto; }
+  .bd-grid { grid-template-columns: 1fr; }
+  .bd-profile-head { flex-wrap: wrap; }
+  .bd-profile-meta { text-align: left; margin-left: 0; }
+}
+
+/* ── 全站收尾：长尾页面对齐设计语言 ──────────────────────────────────────── */
+
+/* 兜底表单控件基线（零特异性 :where，不会压过上面的胶囊规则）：
+   接入点 / 团队 / 弹窗里的裸 input、select、textarea 统一圆角与底色 */
+.page :where(input:not([type=checkbox], [type=radio]), select, textarea),
+dialog :where(input:not([type=checkbox], [type=radio]), select, textarea) {
+  border: 1px solid var(--border);
+  border-radius: 11px;
+  background: var(--surface-raised);
+  color: var(--fg);
+  padding: 8px 12px;
+  font: inherit;
+}
+:root[data-theme="dark"] .page :where(input:not([type=checkbox], [type=radio]), select, textarea),
+:root[data-theme="dark"] dialog :where(input:not([type=checkbox], [type=radio]), select, textarea) {
+  background: rgba(13, 17, 26, 0.55);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* 筛选条统一（群组 / 定时 / 工作流共用 .filters）：去面板底，控件胶囊化 */
+.filters {
+  padding: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+.filters input[type=search],
+.filters input[type=text],
+.filters select {
+  min-height: 36px;
+  border-radius: 999px;
+  padding: 0 16px;
+  background: var(--surface);
+  border: 1px solid var(--border-soft);
+}
+.filters select {
+  padding-right: 30px;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2399a3b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  color: var(--muted);
+  font-weight: 600;
+  font-size: 12.5px;
+  cursor: pointer;
+}
+:root[data-theme="dark"] .filters input[type=search],
+:root[data-theme="dark"] .filters input[type=text],
+:root[data-theme="dark"] .filters select {
+  background-color: rgba(255, 255, 255, 0.045);
+  border-color: rgba(255, 255, 255, 0.09);
+}
+.filters .filter-toggle {
+  min-height: 36px;
+  padding: 0 16px;
+  border-radius: 999px;
+  border: 1px solid var(--border-soft);
+  background: var(--surface);
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+}
+:root[data-theme="dark"] .filters .filter-toggle {
+  background: rgba(255, 255, 255, 0.045);
+  border-color: rgba(255, 255, 255, 0.09);
+}
+.filters .filter-toggle:has(input:checked) {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  background: var(--accent-soft);
+}
+.filters .filter-toggle input { position: absolute; opacity: 0; pointer-events: none; }
+/* 文本没包 span 的旧式 toggle（群组/定时页）：状态点画在 label 上 */
+.filters .filter-toggle:not(:has(> span))::before {
+  content: "";
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  margin-right: 7px;
+  background: var(--faint);
+}
+.filters .filter-toggle:not(:has(> span)):has(input:checked)::before {
+  background: var(--accent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
+}
+
+/* 通用 .card（接入点等页面在用）→ 玻璃面板 */
+.card {
+  border: 1px solid var(--border-soft);
+  border-radius: 16px;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  padding: 16px 18px;
+}
+:root[data-theme="dark"] .card {
+  background: rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(18px);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+/* 角色管理：树面板对齐名册风格 */
+:root[data-theme="dark"] .roles-tree-panel,
+:root[data-theme="dark"] .roles-editor-panel {
+  background: rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(18px);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+.roles-tree-panel,
+.roles-editor-panel { border-radius: 16px; }
+.roles-group-icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  color: var(--muted);
+}
+.roles-group-icon svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.roles-bot-row.selected {
+  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--info) 8%, transparent));
+  border-left: 0;
+  padding-left: 20px;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+.roles-group-row.selected { background: var(--accent-soft); }
+.roles-badge { border-radius: 999px; }
+
+/* ── 看板列顺序自定义：列头可拖拽 + hover 出现 ‹/› 按钮 ──────────────────── */
+.session-board-column > header[draggable] { cursor: grab; }
+.session-board-column > header[draggable]:active { cursor: grabbing; }
+.session-board-head-right {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+}
+.session-board-move { display: inline-flex; gap: 3px; opacity: 0; transition: opacity 120ms ease; }
+.session-board-column > header:hover .session-board-move,
+.session-board-move:focus-within { opacity: 1; }
+@media (hover: none) {
+  .session-board-move { opacity: 1; }
+}
+.session-board-move button {
+  min-height: 22px;
+  min-width: 22px;
+  padding: 0;
+  border-radius: 999px;
+  font-size: 13px;
+  line-height: 1;
+  color: var(--muted);
+  background: transparent;
+  border: 1px solid var(--border-soft);
+}
+.session-board-move button:hover:not(:disabled) {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+}
+.session-board-move button:disabled { opacity: 0.3; }
+.session-board-column.dragging { opacity: 0.55; }
+.session-board-column.drag-over {
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
+}
+@media (prefers-reduced-motion: reduce) {
+  .session-board-move { transition: none; }
+}
+
+/* 工作流子导航：下划线 tab → 胶囊段 */
+.wf-subnav { border-bottom: 0; gap: 6px; }
+.wf-subnav a {
+  border: 1px solid transparent;
+  border-radius: 999px;
+  padding: 6px 16px;
+  margin-bottom: 0;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.wf-subnav a.active {
+  color: var(--accent-strong);
+  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
+  background: var(--accent-soft);
+  border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+@media (max-width: 980px) {
+  .sidebar { margin: 0; height: auto; border-radius: 0; top: 0; }
+  .overview-cols { grid-template-columns: 1fr; }
+  .attention-strip { margin: 12px 16px 0; }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   "2077" CYBERPUNK SKIN
+   Distilled from the kaboo webui (frontend/src/styles/cyberpunk.css). The whole
+   dashboard is variable-driven, so re-pointing the design tokens under
+   :root[data-skin="cyber"] re-skins every component; the rest of this section
+   adds the neon flourishes (grid, scanlines, data-rain, glow, sharp corners).
+   Placed last in the file so it wins over the light/dark token blocks via source
+   order (equal specificity). The light/dark mode is intentionally ignored here —
+   2077 ships its own dark neon palette.
+   ════════════════════════════════════════════════════════════════════════════ */
+
+:root[data-skin="cyber"] {
+  color-scheme: dark;
+  --bg: hsl(240 44% 6%);
+  --bg-soft: hsl(240 40% 8%);
+  --surface: hsl(236 40% 9% / 0.72);
+  --surface-raised: hsl(238 42% 12% / 0.84);
+  --surface-muted: hsl(236 30% 14% / 0.7);
+  --fg: hsl(188 72% 88%);
+  --muted: hsl(196 30% 64%);
+  --faint: hsl(196 22% 52%);
+  --border: hsl(196 82% 44% / 0.5);
+  --border-soft: hsl(196 70% 40% / 0.3);
+  --accent: hsl(186 100% 56%);
+  --accent-strong: hsl(186 100% 72%);
+  --accent-soft: hsl(186 100% 52% / 0.16);
+  --success: hsl(150 85% 58%);
+  --success-soft: hsl(150 85% 50% / 0.16);
+  --warning: hsl(56 97% 60%);
+  --warning-soft: hsl(56 97% 52% / 0.16);
+  --danger: hsl(330 100% 64%);
+  --danger-soft: hsl(330 100% 58% / 0.18);
+  --on-accent: hsl(240 60% 6%);
+  --on-danger: hsl(240 60% 6%);
+  --modal-shadow: 0 24px 80px hsl(240 70% 2% / 0.7), 0 0 36px hsl(186 100% 52% / 0.18);
+  --modal-backdrop: hsl(240 60% 3% / 0.72);
+  --qr-surface: #ffffff;
+  --shadow: 0 14px 40px hsl(240 70% 3% / 0.55), 0 0 0 1px hsl(186 100% 52% / 0.06);
+  --radius: 4px;
+}
+
+:root[data-skin="cyber"] body {
+  background-color: hsl(240 46% 5%);
+  background-image: linear-gradient(
+    180deg,
+    hsl(240 44% 6%) 0%,
+    hsl(252 46% 4%) 58%,
+    hsl(240 48% 5%) 100%
+  );
+  background-attachment: fixed;
+  color: var(--fg);
+}
+
+/* Lift the real UI above the fixed FX layer (the FX sits at z-index:0). */
+:root[data-skin="cyber"] .app-shell {
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Fixed background FX: neon grid + glow + scanlines + vignette + data-rain ─ */
+.cyber-fx {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.cyber-fx-grid {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(ellipse at 78% 112%, hsl(186 100% 52% / 0.18), transparent 44%),
+    radial-gradient(ellipse at 16% 104%, hsl(330 100% 58% / 0.16), transparent 42%),
+    linear-gradient(0deg, hsl(56 97% 52% / 0.05), transparent 28%),
+    repeating-linear-gradient(0deg, hsl(186 100% 52% / 0.05) 0 1px, transparent 1px 44px),
+    repeating-linear-gradient(90deg, hsl(330 100% 58% / 0.04) 0 1px, transparent 1px 44px);
+  opacity: 0.85;
+}
+
+.cyber-fx-scan {
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    hsl(186 100% 52% / 0.04) 0 1px,
+    transparent 1px 3px
+  );
+  opacity: 0.6;
+}
+
+/* CRT vignette darkens the corners. */
+.cyber-fx::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at 50% 44%, transparent 55%, hsl(240 70% 3% / 0.6) 100%);
+}
+
+.cyber-rain {
+  position: absolute;
+  inset: 0;
+}
+
+.cyber-rain-col {
+  position: absolute;
+  top: 0;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  font-family: var(--mono);
+  font-size: var(--sz, 14px);
+  line-height: 1;
+  letter-spacing: 1px;
+  color: hsl(var(--rc, 186 100% 60%));
+  opacity: var(--op, 0.4);
+  text-shadow: 0 0 6px hsl(var(--rc, 186 100% 60%) / 0.7);
+  white-space: nowrap;
+  /* bright leading glyph (bottom) → fading trail (top) */
+  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #fff 100%);
+  mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #fff 100%);
+  animation: cyber-rain-fall var(--dur, 8s) linear var(--delay, 0s) infinite;
+  will-change: transform;
+}
+
+@keyframes cyber-rain-fall {
+  from { transform: translateY(-115%); }
+  to { transform: translateY(115vh); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cyber-rain-col { animation: none; opacity: 0.12; }
+}
+
+/* ── Chrome: glassy neon sidebar + topbar ───────────────────────────────────*/
+:root[data-skin="cyber"] .sidebar {
+  background: hsl(240 40% 7% / 0.78);
+  -webkit-backdrop-filter: blur(14px) saturate(1.15);
+  backdrop-filter: blur(14px) saturate(1.15);
+  border-right-color: hsl(186 90% 50% / 0.28);
+}
+
+:root[data-skin="cyber"] .topbar {
+  background: hsl(240 40% 6% / 0.7);
+  border-bottom-color: hsl(186 90% 50% / 0.3);
+  -webkit-backdrop-filter: blur(16px) saturate(1.15);
+  backdrop-filter: blur(16px) saturate(1.15);
+}
+
+:root[data-skin="cyber"] .brand-mark {
+  background: linear-gradient(135deg, hsl(186 100% 52%), hsl(330 100% 60%));
+  color: hsl(240 60% 6%);
+  border-radius: 4px;
+  box-shadow: 0 0 14px hsl(186 100% 52% / 0.5);
+}
+
+:root[data-skin="cyber"] .brand strong,
+:root[data-skin="cyber"] .topbar-title strong {
+  font-family: var(--mono);
+  letter-spacing: 1px;
+  text-shadow: 0 0 12px hsl(186 100% 60% / 0.45);
+}
+
+/* ── Navigation: neon active rail ───────────────────────────────────────────*/
+:root[data-skin="cyber"] .sidebar-nav a:hover {
+  background: hsl(186 100% 52% / 0.08);
+  color: var(--accent-strong);
+}
+
+:root[data-skin="cyber"] .sidebar-nav a.active {
+  background: linear-gradient(135deg, hsl(186 80% 26% / 0.45), hsl(330 70% 24% / 0.3));
+  color: hsl(186 100% 74%);
+  box-shadow: inset 2px 0 0 hsl(186 100% 56%), 0 0 16px hsl(186 100% 52% / 0.18);
+}
+
+/* ── Headings ───────────────────────────────────────────────────────────────*/
+:root[data-skin="cyber"] .page-heading h1 {
+  font-family: var(--mono);
+  text-shadow: 0 0 18px hsl(186 100% 60% / 0.35);
+}
+
+:root[data-skin="cyber"] .eyebrow {
+  color: var(--warning) !important;
+  text-shadow: 0 0 10px hsl(56 97% 60% / 0.4);
+}
+
+/* ── Cards & metrics: faint inner neon edge + glowing figures ────────────────*/
+:root[data-skin="cyber"] .panel,
+:root[data-skin="cyber"] .metric-card,
+:root[data-skin="cyber"] .bd-card {
+  border-color: hsl(196 82% 44% / 0.4);
+  box-shadow: var(--shadow), inset 0 1px 0 hsl(186 100% 60% / 0.07);
+}
+
+:root[data-skin="cyber"] .metric-card strong {
+  color: var(--accent-strong);
+  text-shadow: 0 0 14px hsl(186 100% 60% / 0.4);
+}
+
+/* ── Primary actions: neon gradient ─────────────────────────────────────────*/
+:root[data-skin="cyber"] .btn-link.primary,
+:root[data-skin="cyber"] button.primary {
+  background: linear-gradient(135deg, hsl(186 100% 52%), hsl(56 97% 56%));
+  color: hsl(240 60% 6%);
+  border-color: hsl(186 100% 56%);
+  box-shadow: 0 0 16px hsl(186 100% 52% / 0.3);
+}
+
+/* ── Segmented switchers (incl. the skin switcher itself) ────────────────────*/
+:root[data-skin="cyber"] .segmented {
+  border-color: hsl(186 80% 46% / 0.35);
+  background: hsl(240 36% 9% / 0.6);
+}
+
+:root[data-skin="cyber"] .segmented button.active {
+  background: linear-gradient(135deg, hsl(186 100% 52%), hsl(186 100% 62%));
+  color: hsl(240 60% 6%);
+  box-shadow: 0 0 12px hsl(186 100% 52% / 0.35);
+}
+
+/* ── Status + badges ────────────────────────────────────────────────────────*/
+:root[data-skin="cyber"] .connection-status.online::before {
+  box-shadow: 0 0 8px hsl(150 85% 58% / 0.85);
+}
+
+/* CLI badges: fold the light hard-coded palette into the neon surface tokens
+   (mirrors the existing dark-theme treatment). */
+:root[data-skin="cyber"] .cli-claude-code,
+:root[data-skin="cyber"] .cli-codex,
+:root[data-skin="cyber"] .cli-codex-app,
+:root[data-skin="cyber"] .cli-cursor,
+:root[data-skin="cyber"] .cli-gemini,
+:root[data-skin="cyber"] .cli-opencode,
+:root[data-skin="cyber"] .cli-mtr,
+:root[data-skin="cyber"] .cli-hermes,
+:root[data-skin="cyber"] .cli-mira,
+:root[data-skin="cyber"] .cli-pi,
+:root[data-skin="cyber"] .cli-aiden,
+:root[data-skin="cyber"] .cli-coco {
+  background: var(--surface-muted);
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+/* Themed form controls in 2077 — inner glow + accent-cyan focus ring. */
+:root[data-skin="cyber"] input:not([type=checkbox]):not([type=radio]),
+:root[data-skin="cyber"] select,
+:root[data-skin="cyber"] textarea {
+  background-color: hsl(240 36% 9% / 0.7);
+  box-shadow: inset 0 0 12px hsl(186 100% 52% / 0.06);
+}
+:root[data-skin="cyber"] input:focus,
+:root[data-skin="cyber"] select:focus,
+:root[data-skin="cyber"] textarea:focus {
+  box-shadow: 0 0 0 3px hsl(186 100% 52% / 0.18), 0 0 14px hsl(186 100% 52% / 0.25);
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   2077 MOTION FX — CRT flicker / roll line, HUD frame, random glitches, and the
+   KIROSHI NETLINK boot loader. Ported from kaboo's cyberpunk.css. DOM nodes are
+   injected by cyber-fx.ts only while the skin is active.
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/* CRT flicker + scrolling roll line (inside the behind-content #cyber-fx). */
+.cyber-flicker {
+  position: absolute;
+  inset: 0;
+  background: hsl(186 100% 52% / 0.04);
+  mix-blend-mode: screen;
+  animation: cyber-flicker 0.18s steps(2, end) infinite;
+}
+
+@keyframes cyber-flicker {
+  0% { opacity: 0.85; }
+  100% { opacity: 0.42; }
+}
+
+.cyber-rollline {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, hsl(330 100% 64% / 0.5), transparent);
+  box-shadow: 0 0 12px hsl(330 100% 64% / 0.4);
+  opacity: 0.5;
+  animation: cyber-roll 9s linear infinite;
+}
+
+@keyframes cyber-roll {
+  0% { transform: translateY(-6vh); opacity: 0; }
+  8% { opacity: 0.5; }
+  60% { opacity: 0.5; }
+  72%, 100% { transform: translateY(112vh); opacity: 0; }
+}
+
+/* Full-screen HUD corner brackets + NETWATCH tag (above content). */
+.cyber-hud {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  pointer-events: none;
+}
+
+.cyber-hud-corner {
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  border: 2px solid hsl(186 100% 60% / 0.55);
+  opacity: 0.7;
+  filter: drop-shadow(0 0 6px hsl(186 100% 52% / 0.4));
+}
+
+.cyber-hud-corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
+.cyber-hud-corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
+.cyber-hud-corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
+.cyber-hud-corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
+
+.cyber-hud-tag {
+  position: absolute;
+  left: 16px;
+  bottom: 14px;
+  font-family: var(--mono);
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  color: hsl(56 97% 64% / 0.6);
+  text-shadow: 0 0 8px hsl(56 97% 52% / 0.5);
+}
+
+/* Random page-glitch overlay (above content); cp-fx-* on <body> drive it. */
+.cyber-glitch {
+  position: fixed;
+  inset: 0;
+  z-index: 9000;
+  pointer-events: none;
+  mix-blend-mode: screen;
+  opacity: 0;
+}
+
+body.cp-fx-tear .cyber-glitch {
+  background: linear-gradient(
+    180deg,
+    transparent 0 46%,
+    hsl(330 100% 60% / 0.6) 46% 48%,
+    hsl(186 100% 60% / 0.6) 48% 50%,
+    hsl(56 96% 58% / 0.45) 50% 52%,
+    transparent 52%
+  );
+  animation: cp-fx-tear 0.4s steps(2, end);
+}
+
+@keyframes cp-fx-tear {
+  0% { opacity: 0; transform: translateY(0); }
+  15% { opacity: 0.9; transform: translateY(-26vh) translateX(-8px); }
+  35% { opacity: 0.5; transform: translateY(28vh) translateX(9px); }
+  55% { opacity: 0.85; transform: translateY(8vh) translateX(-5px); }
+  75% { opacity: 0.4; transform: translateY(-14vh) translateX(6px); }
+  100% { opacity: 0; transform: translateY(40vh); }
+}
+
+body.cp-fx-invert .cyber-glitch {
+  mix-blend-mode: difference;
+  background: hsl(186 100% 60%);
+  animation: cp-fx-invert 0.22s steps(1, end);
+}
+
+@keyframes cp-fx-invert {
+  0%, 100% { opacity: 0; }
+  25% { opacity: 0.95; }
+  50% { opacity: 0.1; }
+  75% { opacity: 0.7; }
+}
+
+body.cp-fx-blackout .cyber-glitch {
+  mix-blend-mode: normal;
+  background: hsl(240 40% 2%);
+  animation: cp-fx-blackout 0.26s steps(1, end);
+}
+
+@keyframes cp-fx-blackout {
+  0%, 100% { opacity: 0; }
+  18% { opacity: 0.92; }
+  34% { opacity: 0.08; }
+  52% { opacity: 0.85; }
+  70% { opacity: 0; }
+}
+
+body.cp-fx-shake main { animation: cp-fx-shake 0.28s steps(1, end); }
+
+@keyframes cp-fx-shake {
+  0%, 100% { transform: translate(0, 0) skewX(0deg); }
+  15% { transform: translate(-3px, 1px) skewX(0.6deg); }
+  30% { transform: translate(4px, -2px) skewX(-0.8deg); }
+  45% { transform: translate(-2px, 1px); }
+  60% { transform: translate(3px, 0) skewX(0.5deg); }
+  80% { transform: translate(-1px, -1px); }
+}
+
+body.cp-fx-rgb main { animation: cp-fx-rgb 0.34s steps(2, end); }
+
+@keyframes cp-fx-rgb {
+  0%, 100% { filter: none; transform: none; }
+  25% {
+    filter: drop-shadow(3px 0 hsl(330 100% 60% / 0.7)) drop-shadow(-3px 0 hsl(186 100% 60% / 0.7));
+    transform: translateX(-2px);
+  }
+  50% {
+    filter: drop-shadow(-4px 0 hsl(330 100% 60% / 0.6)) drop-shadow(4px 0 hsl(186 100% 60% / 0.6));
+    transform: translateX(2px);
+  }
+  75% {
+    filter: drop-shadow(2px 0 hsl(330 100% 60% / 0.7)) drop-shadow(-2px 0 hsl(186 100% 60% / 0.7));
+  }
+}
+
+body.cp-fx-slice main { animation: cp-fx-slice 0.32s steps(2, end); }
+
+@keyframes cp-fx-slice {
+  0%, 100% { transform: none; }
+  20% { transform: translateX(-12px) skewX(7deg); }
+  40% { transform: translateX(10px) skewX(-5deg); }
+  60% { transform: translateX(-6px) skewX(3deg); }
+  80% { transform: translateX(4px) skewX(-1deg); }
+}
+
+/* ── Boot decrypt loader (plays once when switching into 2077) ───────────────*/
+.cyber-boot {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  background:
+    radial-gradient(ellipse at center, hsl(252 50% 6%) 0%, hsl(252 60% 3%) 100%),
+    repeating-linear-gradient(0deg, hsl(186 100% 52% / 0.06) 0 1px, transparent 1px 3px);
+  animation: cyber-boot-fade 3.2s ease forwards;
+}
+
+.cyber-boot::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at 50% 50%, transparent 50%, hsl(252 70% 2% / 0.85) 100%);
+}
+
+.cyber-boot-grid {
+  position: absolute;
+  inset: 0;
+  background:
+    repeating-linear-gradient(0deg, hsl(186 100% 52% / 0.05) 0 1px, transparent 1px 40px),
+    repeating-linear-gradient(90deg, hsl(330 100% 58% / 0.04) 0 1px, transparent 1px 40px);
+  -webkit-mask-image: radial-gradient(ellipse at center, #000 28%, transparent 74%);
+  mask-image: radial-gradient(ellipse at center, #000 28%, transparent 74%);
+  animation: cyber-grid-pan 3.2s linear;
+}
+
+@keyframes cyber-boot-fade {
+  0%, 84% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes cyber-blink { 50% { opacity: 0; } }
+
+@keyframes cyber-grid-pan {
+  from { background-position: 0 -40px, -40px 0; opacity: 0.3; }
+  to { background-position: 0 0, 0 0; opacity: 1; }
+}
+
+.cyber-loader {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  font-family: var(--mono);
+}
+
+.cyber-loader-frame {
+  position: relative;
+  width: min(440px, 86vw);
+  padding: 16px 22px;
+  overflow: hidden;
+  color: hsl(186 100% 72%);
+  background: linear-gradient(135deg, hsl(252 50% 8% / 0.92), hsl(240 60% 5% / 0.94));
+  border: 1px solid hsl(186 100% 52% / 0.4);
+  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
+  box-shadow: 0 0 36px hsl(186 100% 52% / 0.18), inset 0 0 50px hsl(186 100% 52% / 0.06);
+  text-shadow: 0 0 8px hsl(186 100% 52% / 0.45);
+}
+
+.cyber-loader-frame::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: -40%;
+  width: 40%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, hsl(56 96% 56%), transparent);
+  box-shadow: 0 0 10px hsl(56 96% 56% / 0.7);
+  animation: cyber-loader-scan 1.6s linear infinite;
+}
+
+@keyframes cyber-loader-scan {
+  from { left: -40%; }
+  to { left: 100%; }
+}
+
+.cyber-loader-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  padding-bottom: 8px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid hsl(186 100% 52% / 0.22);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  color: hsl(56 96% 70%);
+}
+
+.cyber-loader-jp { color: hsl(330 100% 70% / 0.7); letter-spacing: 0.28em; }
+
+.cyber-loader-line {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: clamp(13px, 2.4vw, 16px);
+}
+
+.cyber-loader-prompt { color: hsl(56 96% 64%); }
+
+.cyber-loader-text {
+  letter-spacing: 0.08em;
+  color: hsl(186 100% 80%);
+  transition: color 0.2s ease;
+}
+
+.cyber-loader-text.done {
+  color: hsl(56 96% 80%);
+  text-shadow: 0 0 10px hsl(56 96% 56% / 0.6);
+}
+
+.cyber-loader-cursor {
+  color: hsl(56 96% 70%);
+  animation: cyber-blink 1s steps(1, end) infinite;
+}
+
+.cyber-loader-stream {
+  margin-top: 10px;
+  font-size: 11px;
+  letter-spacing: 2px;
+  color: hsl(186 60% 52% / 0.6);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cyber-flicker,
+  .cyber-rollline,
+  .cyber-glitch,
+  .cyber-boot,
+  .cyber-boot-grid,
+  .cyber-loader-frame::after,
+  .cyber-loader-cursor,
+  body.cp-fx-shake main,
+  body.cp-fx-rgb main,
+  body.cp-fx-slice main {
+    animation: none;
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   EXTRA SKINS — palettes distilled from the kaboo webui (frontend/src/styles/*).
+   Each is a self-contained token override (variable system re-skins everything);
+   they ship their own light/dark palette and ignore the base light/dark mode.
+   Placed after the base :root blocks so they win by source order.
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/* 原神 Genshin — light, Teyvat parchment + teal primary + gold accent */
+:root[data-skin="genshin"] {
+  color-scheme: light;
+  --bg: hsl(216 72% 97%);
+  --bg-soft: hsl(214 56% 94%);
+  --surface: hsl(0 0% 100%);
+  --surface-raised: hsl(0 0% 100%);
+  --surface-muted: hsl(214 48% 95%);
+  --fg: hsl(219 36% 17%);
+  --muted: hsl(219 18% 41%);
+  --faint: hsl(219 16% 55%);
+  --border: hsl(208 34% 82%);
+  --border-soft: hsl(208 34% 88%);
+  --accent: hsl(199 70% 42%);
+  --accent-strong: hsl(199 74% 33%);
+  --accent-soft: hsl(198 68% 92%);
+  --success: hsl(160 60% 35%);
+  --success-soft: hsl(160 52% 92%);
+  --warning: hsl(36 86% 42%);
+  --warning-soft: hsl(42 90% 90%);
+  --danger: hsl(0 72% 48%);
+  --danger-soft: hsl(0 80% 96%);
+  --on-accent: hsl(0 0% 100%);
+  --on-danger: hsl(0 0% 100%);
+  --modal-shadow: 0 24px 80px hsl(219 40% 30% / 0.22);
+  --modal-backdrop: hsl(219 36% 17% / 0.4);
+  --qr-surface: #ffffff;
+  --shadow: 0 18px 44px hsl(216 50% 40% / 0.1);
+  --radius: 10px;
+}
+
+/* Fallout — Pip-Boy phosphor green terminal on near-black */
+:root[data-skin="fallout"] {
+  color-scheme: dark;
+  --bg: hsl(140 32% 5%);
+  --bg-soft: hsl(140 30% 7%);
+  --surface: hsl(140 26% 8%);
+  --surface-raised: hsl(140 26% 11%);
+  --surface-muted: hsl(140 22% 13%);
+  --fg: hsl(140 84% 80%);
+  --muted: hsl(140 28% 56%);
+  --faint: hsl(140 22% 44%);
+  --border: hsl(140 48% 22%);
+  --border-soft: hsl(140 45% 17%);
+  --accent: hsl(138 92% 52%);
+  --accent-strong: hsl(138 92% 66%);
+  --accent-soft: hsl(138 92% 52% / 0.15);
+  --success: hsl(120 80% 55%);
+  --success-soft: hsl(120 70% 50% / 0.16);
+  --warning: hsl(44 96% 56%);
+  --warning-soft: hsl(44 96% 52% / 0.16);
+  --danger: hsl(8 90% 62%);
+  --danger-soft: hsl(8 88% 55% / 0.18);
+  --on-accent: hsl(140 40% 6%);
+  --on-danger: hsl(140 40% 6%);
+  --modal-shadow: 0 24px 80px hsl(140 60% 2% / 0.7), 0 0 30px hsl(138 92% 52% / 0.12);
+  --modal-backdrop: hsl(140 50% 2% / 0.7);
+  --qr-surface: #ffffff;
+  --shadow: 0 14px 40px hsl(140 60% 2% / 0.6);
+  --radius: 2px;
+}
+
+/* PRTS (Arknights) — Rhodes Island slate-blue + cyan primary + amber */
+:root[data-skin="prts"] {
+  color-scheme: dark;
+  --bg: hsl(213 50% 5%);
+  --bg-soft: hsl(213 46% 7%);
+  --surface: hsl(213 44% 8%);
+  --surface-raised: hsl(213 44% 11%);
+  --surface-muted: hsl(213 32% 14%);
+  --fg: hsl(194 65% 92%);
+  --muted: hsl(203 22% 62%);
+  --faint: hsl(203 18% 50%);
+  --border: hsl(194 48% 23%);
+  --border-soft: hsl(194 45% 18%);
+  --accent: hsl(190 95% 52%);
+  --accent-strong: hsl(190 95% 66%);
+  --accent-soft: hsl(190 95% 52% / 0.15);
+  --success: hsl(150 75% 50%);
+  --success-soft: hsl(150 70% 48% / 0.16);
+  --warning: hsl(28 96% 56%);
+  --warning-soft: hsl(28 96% 52% / 0.16);
+  --danger: hsl(0 84% 64%);
+  --danger-soft: hsl(0 80% 55% / 0.18);
+  --on-accent: hsl(213 70% 6%);
+  --on-danger: hsl(213 70% 6%);
+  --modal-shadow: 0 24px 80px hsl(213 60% 2% / 0.7);
+  --modal-backdrop: hsl(213 60% 3% / 0.7);
+  --qr-surface: #ffffff;
+  --shadow: 0 14px 40px hsl(213 60% 2% / 0.55);
+  --radius: 3px;
+}
+
+/* 蔚蓝档案 Blue Archive — deep navy + bright blue primary + halo gold */
+:root[data-skin="bluearchive"] {
+  color-scheme: dark;
+  --bg: hsl(218 51% 12%);
+  --bg-soft: hsl(218 48% 15%);
+  --surface: hsl(217 48% 18%);
+  --surface-raised: hsl(217 48% 21%);
+  --surface-muted: hsl(218 36% 18%);
+  --fg: hsl(0 0% 96%);
+  --muted: hsl(0 0% 76%);
+  --faint: hsl(213 20% 64%);
+  --border: hsl(213 56% 56% / 0.5);
+  --border-soft: hsl(213 56% 56% / 0.3);
+  --accent: hsl(209 100% 52%);
+  --accent-strong: hsl(209 100% 70%);
+  --accent-soft: hsl(209 100% 56% / 0.18);
+  --success: hsl(150 65% 55%);
+  --success-soft: hsl(150 60% 50% / 0.16);
+  --warning: hsl(47 88% 60%);
+  --warning-soft: hsl(47 88% 56% / 0.18);
+  --danger: hsl(0 80% 66%);
+  --danger-soft: hsl(0 78% 58% / 0.18);
+  --on-accent: hsl(0 0% 100%);
+  --on-danger: hsl(0 0% 100%);
+  --modal-shadow: 0 24px 80px hsl(218 60% 4% / 0.6);
+  --modal-backdrop: hsl(218 51% 8% / 0.55);
+  --qr-surface: #ffffff;
+  --shadow: 0 18px 44px hsl(218 60% 4% / 0.4);
+  --radius: 10px;
+}
+
+/* 绝区零 ZZZ — acid lime on charcoal, bold hollow vibe */
+:root[data-skin="zzz"] {
+  color-scheme: dark;
+  --bg: hsl(240 24% 8%);
+  --bg-soft: hsl(244 26% 10%);
+  --surface: hsl(244 28% 11%);
+  --surface-raised: hsl(244 28% 14%);
+  --surface-muted: hsl(244 22% 15%);
+  --fg: hsl(75 90% 86%);
+  --muted: hsl(280 18% 66%);
+  --faint: hsl(280 14% 52%);
+  --border: hsl(75 60% 40% / 0.55);
+  --border-soft: hsl(75 50% 36% / 0.32);
+  --accent: hsl(75 90% 60%);
+  --accent-strong: hsl(75 95% 74%);
+  --accent-soft: hsl(75 90% 60% / 0.16);
+  --success: hsl(140 75% 55%);
+  --success-soft: hsl(140 70% 50% / 0.16);
+  --warning: hsl(48 100% 62%);
+  --warning-soft: hsl(48 100% 56% / 0.16);
+  --danger: hsl(340 90% 66%);
+  --danger-soft: hsl(340 85% 58% / 0.18);
+  --on-accent: hsl(240 30% 8%);
+  --on-danger: hsl(240 30% 8%);
+  --modal-shadow: 0 24px 80px hsl(240 40% 2% / 0.7);
+  --modal-backdrop: hsl(240 30% 3% / 0.7);
+  --qr-surface: #ffffff;
+  --shadow: 0 14px 40px hsl(240 40% 2% / 0.55);
+  --radius: 4px;
+}
+
+/* Terminal-flavoured skins: monospace + glow on brand / page titles. */
+:root[data-skin="fallout"] .brand strong,
+:root[data-skin="fallout"] .topbar-title strong,
+:root[data-skin="fallout"] .page-heading h1,
+:root[data-skin="prts"] .brand strong,
+:root[data-skin="prts"] .topbar-title strong,
+:root[data-skin="prts"] .page-heading h1 {
+  font-family: var(--mono);
+  letter-spacing: 0.5px;
+}
+:root[data-skin="fallout"] .page-heading h1 { text-shadow: 0 0 14px hsl(138 92% 52% / 0.4); }
+:root[data-skin="prts"] .page-heading h1 { text-shadow: 0 0 14px hsl(190 95% 52% / 0.4); }
+
+/* Genshin/Blue Archive carry a gold secondary — tint the brand mark with it. */
+:root[data-skin="genshin"] .brand-mark { background: linear-gradient(135deg, hsl(199 70% 42%), hsl(42 78% 58%)); color: #fff; }
+:root[data-skin="bluearchive"] .brand-mark { background: linear-gradient(135deg, hsl(209 100% 52%), hsl(47 88% 60%)); color: hsl(218 51% 12%); }
+
+/* ════════════════════════════════════════════════════════════════════════════
+   SKIN BACKGROUNDS — the layered neon-glow / grid backgrounds + decorative art
+   that make each theme recognisable (ported from kaboo's body.<skin>-mode rules).
+   Surfaces are made translucent so the fixed background shows through the chrome
+   and cards. Raster art is referenced from kaboo's CDN (loads on-network; if it
+   404s off-network the gradient layers still carry the theme).
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/* translucent surfaces so the fixed page background reads through chrome + cards */
+:root[data-skin="genshin"]     { --surface: hsl(0 0% 100% / 0.74); --surface-raised: hsl(0 0% 100% / 0.88); --surface-muted: hsl(214 48% 95% / 0.7); }
+:root[data-skin="fallout"]     { --surface: hsl(140 26% 8% / 0.7); --surface-raised: hsl(140 26% 11% / 0.82); --surface-muted: hsl(140 22% 13% / 0.64); }
+:root[data-skin="prts"]        { --surface: hsl(213 44% 8% / 0.7); --surface-raised: hsl(213 44% 11% / 0.82); --surface-muted: hsl(213 32% 14% / 0.64); }
+:root[data-skin="bluearchive"] { --surface: hsl(217 48% 18% / 0.74); --surface-raised: hsl(217 48% 21% / 0.86); --surface-muted: hsl(218 36% 18% / 0.66); }
+:root[data-skin="zzz"]         { --surface: hsl(244 28% 11% / 0.7); --surface-raised: hsl(244 28% 14% / 0.82); --surface-muted: hsl(244 22% 15% / 0.64); }
+
+/* lift content above any fixed ::before art layer */
+:root[data-skin="genshin"] .app-shell,
+:root[data-skin="fallout"] .app-shell,
+:root[data-skin="prts"] .app-shell,
+:root[data-skin="bluearchive"] .app-shell,
+:root[data-skin="zzz"] .app-shell { position: relative; z-index: 0; }
+
+/* 原神 — gentle-breeze parchment + Teyvat glow */
+:root[data-skin="genshin"] body {
+  background:
+    linear-gradient(180deg, hsl(216 72% 97% / 0.68) 0%, hsl(202 78% 96% / 0.58) 42%, hsl(42 72% 95% / 0.74) 100%),
+    radial-gradient(circle at 20% 16%, hsl(42 88% 78% / 0.36), transparent 28%),
+    radial-gradient(circle at 82% 26%, hsl(198 86% 74% / 0.34), transparent 30%),
+    radial-gradient(circle at 70% 78%, hsl(154 66% 78% / 0.3), transparent 28%),
+    repeating-linear-gradient(115deg, hsl(42 78% 58% / 0.055) 0 1px, transparent 1px 48px),
+    url('/assets/skins/genshin-breeze.webp');
+  background-position: center, 20% 16%, 82% 26%, 70% 78%, center, center;
+  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
+  background-size: cover, cover, cover, cover, 100% 100%, cover;
+  background-attachment: fixed;
+}
+
+/* Fallout — phosphor glow + CRT scanlines, Vault-Boy watermark bottom-right */
+:root[data-skin="fallout"] body {
+  background:
+    radial-gradient(ellipse at 50% -6%, hsl(138 92% 52% / 0.16), transparent 36%),
+    radial-gradient(ellipse at 86% 90%, hsl(96 80% 46% / 0.1), transparent 34%),
+    linear-gradient(180deg, hsl(140 36% 6%) 0%, hsl(150 34% 4%) 52%, hsl(140 40% 5%) 100%),
+    repeating-linear-gradient(0deg, hsl(138 92% 52% / 0.05) 0 1px, transparent 1px 4px),
+    repeating-linear-gradient(90deg, hsl(138 92% 52% / 0.04) 0 1px, transparent 1px 44px);
+  background-attachment: fixed;
+}
+:root[data-skin="fallout"] body::before {
+  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
+  background: url('/assets/skins/fallout-vaultboy.webp') right -1% bottom -8% / auto min(100vh, 1100px) no-repeat;
+  opacity: 0.12;
+  filter: drop-shadow(0 0 24px hsl(138 92% 52% / 0.35));
+}
+
+/* PRTS — Rhodes Island operator console (cyan glow + fine grid) */
+:root[data-skin="prts"] body {
+  background:
+    radial-gradient(ellipse at 18% 12%, hsl(190 95% 52% / 0.18), transparent 34%),
+    radial-gradient(ellipse at 88% 78%, hsl(28 96% 56% / 0.12), transparent 30%),
+    linear-gradient(180deg, hsl(216 56% 6%) 0%, hsl(213 50% 4%) 58%, hsl(217 56% 5%) 100%),
+    repeating-linear-gradient(90deg, hsl(190 95% 52% / 0.055) 0 1px, transparent 1px 72px),
+    repeating-linear-gradient(0deg, hsl(190 95% 52% / 0.045) 0 1px, transparent 1px 36px);
+  background-attachment: fixed;
+}
+:root[data-skin="prts"] body::before {
+  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
+  background: url('/assets/skins/prts-priestess.webp') right -2% bottom / auto min(94vh, 1000px) no-repeat;
+  opacity: 0.16;
+  filter: saturate(1.1);
+}
+
+/* 蔚蓝档案 — halo gradients + soft grid, Kei sunset hero bottom-right */
+:root[data-skin="bluearchive"] body {
+  background:
+    radial-gradient(ellipse at 14% 12%, hsl(209 100% 34% / 0.34), transparent 36%),
+    radial-gradient(ellipse at 88% 16%, hsl(47 88% 60% / 0.2), transparent 30%),
+    radial-gradient(ellipse at 50% 92%, hsl(213 60% 60% / 0.22), transparent 38%),
+    radial-gradient(ellipse at 86% 78%, hsl(188 76% 56% / 0.16), transparent 32%),
+    linear-gradient(180deg, hsl(218 51% 10%) 0%, hsl(217 48% 16%) 48%, hsl(213 42% 14%) 100%),
+    linear-gradient(90deg, hsl(213 56% 56% / 0.08) 1px, transparent 1px),
+    linear-gradient(0deg, hsl(47 88% 60% / 0.06) 1px, transparent 1px);
+  background-size: cover, cover, cover, cover, cover, 40px 40px, 40px 40px;
+  background-attachment: fixed;
+}
+:root[data-skin="bluearchive"] body::before {
+  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
+  background: url('/assets/skins/bluearchive-hero.webp') right bottom / auto min(86vh, 920px) no-repeat;
+  opacity: 0.2;
+}
+
+/* 绝区零 — lime/violet glow + Hollow heatmap pattern */
+:root[data-skin="zzz"] body {
+  background:
+    radial-gradient(ellipse at 50% -6%, hsl(75 90% 60% / 0.14), transparent 36%),
+    radial-gradient(ellipse at 86% 90%, hsl(280 60% 50% / 0.14), transparent 34%),
+    linear-gradient(180deg, hsl(244 30% 7%) 0%, hsl(252 32% 5%) 52%, hsl(244 30% 7%) 100%),
+    repeating-linear-gradient(0deg, hsl(75 90% 60% / 0.05) 0 1px, transparent 1px 56px),
+    repeating-linear-gradient(90deg, hsl(75 90% 60% / 0.04) 0 1px, transparent 1px 56px);
+  background-attachment: fixed;
+}
+:root[data-skin="zzz"] body::before {
+  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
+  background: url('/assets/skins/zzz-hero.webp') center / cover no-repeat;
+  opacity: 0.62;
+}
+/* keep the Hollow heatmap pattern as a faint overlay above the wallpaper */
+:root[data-skin="zzz"] body::after {
+  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
+  background: url('/assets/skins/zzz-pattern.svg') center / 420px repeat;
+  opacity: 0.16;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   2077 EASTER EGG — "BREACH PROTOCOL". Over-scroll past the bottom of the page
+   to detonate a full-screen RGB-split glitch storm. Driven by cyber-fx.ts.
+   Ported from kaboo's CyberpunkBreach.
+   ════════════════════════════════════════════════════════════════════════════ */
+.cyber-breach {
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.cyber-breach-flash {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, hsl(186 100% 52% / 0.5), hsl(330 100% 58% / 0.4));
+  mix-blend-mode: screen;
+  animation: cyber-breach-flash 4.2s ease-out forwards;
+}
+
+.cyber-breach-grid {
+  position: absolute;
+  inset: 0;
+  background:
+    repeating-linear-gradient(0deg, hsl(186 100% 52% / 0.12) 0 1px, transparent 1px 3px),
+    repeating-linear-gradient(90deg, hsl(330 100% 58% / 0.1) 0 1px, transparent 1px 38px);
+  animation: cyber-breach-grid 4.2s steps(8, end) forwards;
+}
+
+.cyber-breach-shards { position: absolute; inset: 0; }
+
+.cyber-breach-shard {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: hsl(var(--hue, 186 100% 52%) / 0.4);
+  mix-blend-mode: screen;
+  opacity: 0;
+  animation: cyber-breach-shard var(--dur, 0.4s) steps(2, end) var(--delay, 0s) infinite;
+}
+
+.cyber-breach-banner {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 34%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 0 16px;
+  text-align: center;
+  font-family: var(--mono);
+  animation: cyber-breach-caption 4.2s ease forwards;
+}
+
+.cyber-breach-tag {
+  font-size: clamp(11px, 2vw, 16px);
+  letter-spacing: 0.24em;
+  color: hsl(186 100% 70%);
+  text-shadow: 0 0 12px hsl(186 100% 52% / 0.8);
+}
+
+.cyber-breach-caption,
+.cyber-breach-sub {
+  position: relative;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  color: hsl(56 96% 84%);
+}
+
+.cyber-breach-caption {
+  font-size: clamp(20px, 5vw, 54px);
+  text-shadow: 0 0 18px hsl(330 100% 58% / 0.9), 0 0 4px hsl(186 100% 70% / 0.85);
+}
+
+.cyber-breach-sub {
+  font-size: clamp(13px, 2.6vw, 28px);
+  color: hsl(186 96% 78%);
+  text-shadow: 0 0 12px hsl(186 100% 52% / 0.8);
+}
+
+.cyber-breach-caption::before,
+.cyber-breach-caption::after,
+.cyber-breach-sub::before,
+.cyber-breach-sub::after {
+  content: attr(data-text);
+  position: absolute;
+  inset: 0;
+  mix-blend-mode: screen;
+}
+
+.cyber-breach-caption::before,
+.cyber-breach-sub::before {
+  color: hsl(330 100% 60%);
+  animation: cyber-breach-glitch-a 0.4s steps(2, end) infinite;
+}
+
+.cyber-breach-caption::after,
+.cyber-breach-sub::after {
+  color: hsl(186 100% 56%);
+  animation: cyber-breach-glitch-b 0.4s steps(2, end) infinite;
+}
+
+.cyber-breach-quake .app-shell {
+  animation: cyber-breach-quake 0.76s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+
+@keyframes cyber-breach-flash {
+  0% { opacity: 0; }
+  3% { opacity: 1; }
+  18% { opacity: 0.4; }
+  100% { opacity: 0; }
+}
+
+@keyframes cyber-breach-grid {
+  0% { opacity: 0; transform: translateY(-6px); }
+  10% { opacity: 1; }
+  86% { opacity: 0.9; }
+  100% { opacity: 0; transform: translateY(6px); }
+}
+
+@keyframes cyber-breach-shard {
+  0%, 100% { opacity: 0; transform: translateX(0); }
+  40% { opacity: 0.85; transform: translateX(var(--shift, 10px)); }
+  60% { opacity: 0.5; transform: translateX(calc(var(--shift, 10px) * -0.6)); }
+}
+
+@keyframes cyber-breach-glitch-a {
+  0%, 100% { transform: translate(-2px, 0); }
+  50% { transform: translate(-5px, 1px); }
+}
+
+@keyframes cyber-breach-glitch-b {
+  0%, 100% { transform: translate(2px, 0); }
+  50% { transform: translate(5px, -1px); }
+}
+
+@keyframes cyber-breach-caption {
+  0%, 16% { opacity: 0; }
+  30% { opacity: 1; }
+  84% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes cyber-breach-quake {
+  10%, 90% { transform: translate(-2px, 1px); }
+  20%, 80% { transform: translate(4px, -2px); }
+  30%, 50%, 70% { transform: translate(-7px, 2px); }
+  40%, 60% { transform: translate(7px, -1px); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cyber-breach-flash,
+  .cyber-breach-shards { display: none; }
+  .cyber-breach-grid,
+  .cyber-breach-banner { animation: none; opacity: 1; }
+  .cyber-breach-caption::before,
+  .cyber-breach-caption::after,
+  .cyber-breach-sub::before,
+  .cyber-breach-sub::after { display: none; }
+  .cyber-breach-quake .app-shell { animation: none; }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   七龙珠 Dragon Ball — warm shonen energy: Goku-gi orange + Super-Saiyan gold,
+   sunlit cream sky, and the Dragon Ball orb art bottom-right.
+   Orb art: "Dragon ball.svg" by Frédéric Mahé, CC-BY-3.0, via Wikimedia Commons.
+   ════════════════════════════════════════════════════════════════════════════ */
+:root[data-skin="dragonball"] {
+  color-scheme: light;
+  --bg: hsl(36 92% 96%);
+  --bg-soft: hsl(33 86% 93%);
+  --surface: hsl(0 0% 100% / 0.8);
+  --surface-raised: hsl(0 0% 100% / 0.92);
+  --surface-muted: hsl(35 80% 93% / 0.78);
+  --fg: hsl(24 50% 17%);
+  --muted: hsl(26 22% 40%);
+  --faint: hsl(28 18% 54%);
+  --border: hsl(32 58% 80%);
+  --border-soft: hsl(33 64% 87%);
+  --accent: hsl(26 95% 48%);
+  --accent-strong: hsl(18 92% 42%);
+  --accent-soft: hsl(35 95% 88%);
+  --success: hsl(145 60% 36%);
+  --success-soft: hsl(145 55% 90%);
+  --warning: hsl(42 100% 44%);
+  --warning-soft: hsl(45 100% 88%);
+  --danger: hsl(2 80% 50%);
+  --danger-soft: hsl(2 85% 95%);
+  --on-accent: hsl(0 0% 100%);
+  --on-danger: hsl(0 0% 100%);
+  --modal-shadow: 0 24px 80px hsl(26 60% 30% / 0.25);
+  --modal-backdrop: hsl(24 50% 17% / 0.4);
+  --qr-surface: #ffffff;
+  --shadow: 0 18px 44px hsl(26 70% 40% / 0.12);
+  --radius: 12px;
+}
+
+:root[data-skin="dragonball"] .app-shell { position: relative; z-index: 0; }
+
+:root[data-skin="dragonball"] body {
+  background:
+    radial-gradient(circle at 18% 14%, hsl(45 100% 75% / 0.45), transparent 30%),
+    radial-gradient(circle at 84% 20%, hsl(26 95% 62% / 0.28), transparent 34%),
+    /* warm veil over the wallpaper so cards + text stay readable */
+    linear-gradient(180deg, hsl(38 92% 96% / 0.78), hsl(30 86% 93% / 0.66) 50%, hsl(45 80% 95% / 0.8)),
+    url('/assets/skins/dragonball-goku.webp') center / cover no-repeat;
+  background-attachment: fixed;
+}
+
+:root[data-skin="dragonball"] .brand-mark {
+  background: linear-gradient(135deg, hsl(26 95% 52%), hsl(45 100% 55%));
+  color: #fff;
+}
+:root[data-skin="dragonball"] .page-heading h1 {
+  text-shadow: 0 2px 0 hsl(45 100% 72% / 0.55);
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   中分鸡 iKun — 唱跳 rap 篮球 meme skin: stage-purple backdrop, basketball
+   orange + hot-pink/cyan spotlight glows, and an original basketball motif.
+   (No real-person photo / no song lyrics — original artwork only.)
+   ════════════════════════════════════════════════════════════════════════════ */
+:root[data-skin="ikun"] {
+  color-scheme: dark;
+  --bg: hsl(268 38% 8%);
+  --bg-soft: hsl(270 36% 10%);
+  --surface: hsl(268 34% 12% / 0.74);
+  --surface-raised: hsl(268 34% 15% / 0.86);
+  --surface-muted: hsl(268 26% 16% / 0.66);
+  --fg: hsl(40 60% 94%);
+  --muted: hsl(280 16% 66%);
+  --faint: hsl(280 13% 52%);
+  --border: hsl(28 70% 50% / 0.5);
+  --border-soft: hsl(28 60% 46% / 0.3);
+  --accent: hsl(24 95% 55%);
+  --accent-strong: hsl(28 100% 67%);
+  --accent-soft: hsl(24 95% 55% / 0.16);
+  --success: hsl(150 70% 52%);
+  --success-soft: hsl(150 65% 48% / 0.16);
+  --warning: hsl(45 100% 58%);
+  --warning-soft: hsl(45 100% 52% / 0.16);
+  --danger: hsl(330 90% 62%);
+  --danger-soft: hsl(330 85% 58% / 0.18);
+  --on-accent: hsl(268 50% 8%);
+  --on-danger: hsl(268 50% 8%);
+  --modal-shadow: 0 24px 80px hsl(270 50% 2% / 0.7);
+  --modal-backdrop: hsl(270 40% 3% / 0.7);
+  --qr-surface: #ffffff;
+  --shadow: 0 14px 40px hsl(270 50% 2% / 0.55);
+  --radius: 14px;
+}
+
+:root[data-skin="ikun"] .app-shell { position: relative; z-index: 0; }
+
+:root[data-skin="ikun"] body {
+  background:
+    radial-gradient(ellipse at 50% -8%, hsl(24 95% 55% / 0.22), transparent 38%),
+    radial-gradient(ellipse at 12% 92%, hsl(330 90% 60% / 0.16), transparent 36%),
+    radial-gradient(ellipse at 88% 86%, hsl(190 90% 55% / 0.14), transparent 36%),
+    linear-gradient(180deg, hsl(270 40% 8%) 0%, hsl(276 42% 6%) 55%, hsl(268 40% 8%) 100%);
+  background-attachment: fixed;
+}
+:root[data-skin="ikun"] body::before {
+  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
+  background: url('/assets/skins/ikun-hero.webp') center / cover no-repeat;
+  opacity: 0.6;
+}
+
+:root[data-skin="ikun"] .brand-mark {
+  background: linear-gradient(135deg, hsl(24 95% 55%), hsl(330 90% 60%));
+  color: #fff;
+}
+
+/* ── Skin ↔ PR #123 bridge ───────────────────────────────────────────────────
+   PR #123 hardcodes panel/card backgrounds under [data-theme="dark"] (glass look)
+   instead of using --surface, so dark skins would all look alike. Re-point the
+   prominent surfaces to the active skin's --surface so switching is visible.
+   Appended last → wins over the PR's [data-theme="dark"] rules by source order. */
+:root:not([data-skin="default"]) .panel,
+:root:not([data-skin="default"]) .metric-card,
+:root:not([data-skin="default"]) .bd-card,
+:root:not([data-skin="default"]) .qcard,
+:root:not([data-skin="default"]) .mate,
+:root:not([data-skin="default"]) .session-card,
+:root:not([data-skin="default"]) .session-board-column,
+:root:not([data-skin="default"]) .filters {
+  background: var(--surface);
+}
+:root:not([data-skin="default"]) .session-board-column > header {
+  background: var(--surface-muted);
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   SKIN SWITCH-IN INTROS — short, original per-skin transitions (mounted by
+   skin-intro.ts; 2077 uses its own boot loader). All fade out via si-fade.
+   ════════════════════════════════════════════════════════════════════════════ */
+.skin-intro {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  pointer-events: none;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  /* frosted mask so the page dims softly behind the intro (less abrupt) */
+  -webkit-backdrop-filter: blur(7px);
+  backdrop-filter: blur(7px);
+  animation: si-fade var(--si-dur, 2s) ease forwards;
+}
+/* ease IN at the start + OUT at the end, instead of popping on instantly */
+@keyframes si-fade {
+  0% { opacity: 0; }
+  11% { opacity: 1; }
+  80% { opacity: 1; }
+  100% { opacity: 0; visibility: hidden; }
+}
+
+/* —— 原神: "原神，启动" — ZZZ-style text loader in Genshin's cream/teal/gold —— */
+.si-genshin {
+  background:
+    radial-gradient(circle at 50% 46%, hsl(42 92% 82% / 0.5), transparent 42%),
+    radial-gradient(circle at 50% 46%, hsl(198 80% 74% / 0.4), transparent 60%),
+    linear-gradient(180deg, hsl(214 66% 97% / 0.82), hsl(204 72% 94% / 0.82));
+}
+.si-genshin .si-gi-shine {
+  position: absolute; inset: 0;
+  background: linear-gradient(100deg, transparent 36%, hsl(42 95% 82% / 0.6) 48%, hsl(198 92% 86% / 0.55) 52%, transparent 66%);
+  background-size: 250% 100%;
+  animation: si-gi-shine var(--si-dur, 2s) ease forwards;
+}
+.si-genshin .si-gi-text {
+  position: relative;
+  font-weight: 900;
+  font-size: clamp(30px, 7vw, 64px);
+  letter-spacing: 0.12em;
+  background: linear-gradient(100deg, hsl(199 76% 40%), hsl(186 72% 46%) 42%, hsl(42 88% 50%));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  filter: drop-shadow(0 2px 0 hsl(0 0% 100% / 0.6)) drop-shadow(0 0 28px hsl(42 90% 62% / 0.6));
+  animation: si-gi-pop var(--si-dur, 2s) cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
+}
+@keyframes si-gi-shine {
+  0% { background-position: 120% 0; opacity: 0; }
+  25% { opacity: 1; }
+  75% { background-position: -40% 0; opacity: 1; }
+  100% { opacity: 0; }
+}
+@keyframes si-gi-pop {
+  0% { transform: scale(0.6); opacity: 0; letter-spacing: 0.5em; }
+  35% { transform: scale(1.06); opacity: 1; letter-spacing: 0.12em; }
+  60% { transform: scale(1); }
+  100% { transform: scale(1); opacity: 1; }
+}
+@keyframes si-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
+
+/* —— 绝区零: TV static / channel-switch "NOW LOADING" —— */
+.si-zzz { background: rgba(7, 7, 13, 0.85); }
+.si-zzz .si-static {
+  position: absolute; inset: 0;
+  background:
+    repeating-linear-gradient(0deg, hsl(75 90% 60% / 0.05) 0 2px, transparent 2px 4px),
+    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 3px);
+  mix-blend-mode: screen;
+  animation: si-zzz-static 0.12s steps(2) infinite, si-zzz-off var(--si-dur, 1.9s) ease forwards;
+}
+.si-zzz .si-roll {
+  position: absolute; left: 0; right: 0; height: 14%;
+  background: linear-gradient(180deg, transparent, hsl(75 90% 60% / 0.18), transparent);
+  animation: si-zzz-roll 0.7s linear infinite;
+}
+.si-zzz .si-now {
+  position: relative; font-family: var(--mono);
+  font-size: clamp(20px, 5vw, 40px); font-weight: 800; letter-spacing: 0.22em;
+  color: hsl(75 95% 64%); text-shadow: 0 0 18px hsl(75 90% 55% / 0.7);
+  animation: si-blink 0.7s steps(2, end) infinite;
+}
+@keyframes si-zzz-static { 0% { transform: translateY(0); } 100% { transform: translateY(-3px); } }
+@keyframes si-zzz-roll { from { top: -14%; } to { top: 100%; } }
+@keyframes si-zzz-off { 0%, 78% { transform: scaleY(1); opacity: 1; } 90% { transform: scaleY(0.02); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } }
+
+/* —— 七龙珠: 悟空骑筋斗云 whooshing across with speed lines —— */
+.si-dragonball {
+  background: linear-gradient(180deg, hsl(205 85% 72% / 0.8), hsl(198 80% 86% / 0.78) 60%, hsl(45 90% 92% / 0.8));
+}
+.si-dragonball .si-cloud {
+  display: block;
+  width: clamp(150px, 26vw, 280px); height: auto;
+  filter: drop-shadow(0 12px 18px hsl(38 80% 35% / 0.45));
+  animation: si-db-fly var(--si-dur, 1.9s) cubic-bezier(0.4, 0.02, 0.45, 1) forwards;
+}
+.si-dragonball .si-speed {
+  position: absolute; inset: 0;
+  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 2px, transparent 2px 26px);
+  opacity: 0; mix-blend-mode: overlay;
+  animation: si-db-speed var(--si-dur, 1.9s) ease forwards;
+}
+@keyframes si-db-fly {
+  0% { transform: translateX(-65vw) translateY(22px) rotate(-6deg) scale(0.9); }
+  50% { transform: translateX(0) translateY(-22px) rotate(3deg) scale(1.05); }
+  100% { transform: translateX(72vw) translateY(16px) rotate(-4deg) scale(0.92); }
+}
+@keyframes si-db-speed { 0% { opacity: 0; } 25%, 70% { opacity: 0.85; } 100% { opacity: 0; } }
+
+/* —— ikun: bouncing 3D basketball (shaded sphere + only the seams spin) —— */
+.si-ikun {
+  background:
+    radial-gradient(circle at 50% 46%, hsl(24 95% 55% / 0.22), transparent 46%),
+    linear-gradient(180deg, hsl(270 42% 9% / 0.84), hsl(276 44% 6% / 0.84));
+}
+.si-ikun .si-bball {
+  position: relative;
+  width: clamp(108px, 19vw, 168px);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  transform-origin: 50% 100%;
+  background: radial-gradient(circle at 35% 28%, #ffbf80 0%, #ef8033 34%, #cf6020 66%, #8f3d0e 100%);
+  box-shadow:
+    inset -12px -14px 30px rgba(60, 20, 0, 0.55),
+    inset 9px 9px 20px rgba(255, 210, 150, 0.4),
+    0 20px 32px rgba(0, 0, 0, 0.5);
+  animation: si-ikun-bounce var(--si-dur, 1.9s) cubic-bezier(0.5, 0, 0.5, 1) forwards;
+}
+.si-ikun .si-bball::after {
+  content: '';
+  position: absolute;
+  left: 18%; top: 12%;
+  width: 32%; height: 24%;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 72%);
+  filter: blur(3px);
+}
+.si-ikun .si-bball-seams {
+  position: absolute;
+  inset: 0;
+  animation: si-spin 0.6s linear infinite;
+}
+.si-ikun .si-bball-seams svg { display: block; width: 100%; height: 100%; }
+@keyframes si-spin { to { transform: rotate(360deg); } }
+/* uniform scale only — never distort the circle (no squash → always round) */
+@keyframes si-ikun-bounce {
+  0% { transform: translateY(-135%) scale(0.72); }
+  34% { transform: translateY(0) scale(1); }
+  52% { transform: translateY(-38%) scale(1); }
+  70% { transform: translateY(0) scale(1); }
+  84% { transform: translateY(-13%) scale(1); }
+  100% { transform: translateY(0) scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skin-intro { display: none; }
+}