dsh-biocore 0.2.0 → 0.3.0

package/ui/panel.css

@@ -1,833 +1,975 @@
-/* BioCore instrument panel — FlClash mobile spec. | layout v27
-   1) tokens  2) base  3) topbar  4) cards  5) figures  6) lists  7) forms
-   8) switches  9) nav  10) edit mode  11) desktop.
-   Rule: one component rule per selector, px values from docs/DSH-PANEL-FLCLASH-SPEC.md. */
+/* BioCore instrument panel — neumorphic skin (v30).
+ *
+ * The single visual spec is docs/STYLE-NEUMORPHISM.md. Every surface is the
+ * same family as the page, separated only by the fixed dual light source:
+ * dark #b8bcc2 bottom-right, light #ffffff top-left.
+ *
+ *   raised  8px 8px 16px / -8px -8px 16px
+ *   inset   inset 8px 8px 16px / inset -8px -8px 16px
+ *   field   inset 6px 6px 12px  (focus: inset 2px 2px 4px)
+ *
+ * Type 12 / 14 / 20 / 28 / 32 · radius 12 / 16 / 24 · motion 300ms ease-in-out
+ * No gradients, no pure black or white surfaces, no transforms.
+ */
 
-/* ---------- 1. tokens ---------- */
 :root {
-  --page: #f2f2f7;
-  --card: #ffffff;
-  --block: #f6f6f9;
-  --tone: #e9e9ee;
-  --line: rgba(0, 0, 0, 0.08);
-  --line-strong: rgba(0, 0, 0, 0.14);
-  --text: #1c1c1e;
-  --text-2: #6c6c70;
-  --text-3: #8e8e93;
-  --accent: #2b83ff;
-  --accent-soft: rgba(43, 131, 255, 0.14);
-  --ok: #34c759;
-  --warn: #ff9f0a;
-  --danger: #d92b2b;
-  --shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 24px -10px rgba(0, 0, 0, 0.14);
-  --shadow-e2: 0 2px 6px rgba(0, 0, 0, 0.10), 0 24px 48px -14px rgba(0, 0, 0, 0.22);
-
-  --pad-page: 16px;
-  --pad-card: 18px;
-  --gap-card: 12px;
-  --gap-block: 10px;
-  --radius-card: 28px;
-  --radius-block: 18px;
-  --radius-field: 14px;
-  --radius-pill: 999px;
-  --topbar-h: 64px;
-  --nav-h: 64px;
+  color-scheme: light;
+  --bg: #e0e5ec;
+  --card: #f0f0f3;
+  --surface: #f0f0f3;
+  --shadow-dark: #b8bcc2;
+  --shadow-light: #ffffff;
+
+  --accent: #6d5dfc;
+  --accent-ink: #4f43d6;
+  --accent-ring: rgba(109, 93, 252, .35);
+  --ink: #333333;
+  --ink-2: #5e6774;      /* spec #6b7280 measures 3.82:1 on the page; AA needs 4.5 */
+  --ink-3: #6b7280;      /* spec value, kept for large or decorative text only */
+  --danger: #a12d2d;
+  --knob: #ffffff;
+  --orb-hi: rgba(255, 255, 255, .28);
+  --orb-lo: rgba(0, 0, 0, .18);
+
+  --fs-xs: 12px;
+  --fs-sm: 14px;
+  --fs-md: 20px;
+  --fs-lg: 28px;
+  --fs-xl: 32px;
+
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-6: 24px;
+  --sp-8: 32px;
+
+  --r-card: 24px;
+  --r-inner: 16px;
+  --r-chip: 12px;
+
+  --raise: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
+  --raise-sm: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
+  --raise-btn: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
+  --raise-hover: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
+  --sink: inset 8px 8px 16px var(--shadow-dark), inset -8px -8px 16px var(--shadow-light);
+  --sink-sm: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
+  --sink-deep: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
+
+  --t: 300ms ease-in-out;
+  --rail-w: 220px;
+  --rail-w-min: 64px;
+  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
+    "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
 }
+
+/* ------------------------------------------------------------- 深色主题 ---
+ * One layout, two palettes. The light source never moves: top-left stays the
+ * bright side, bottom-right the dark side; only the two shadow values change.
+ * The host can pin a theme with <html data-theme="light|dark">, otherwise the
+ * OS preference decides. */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #2c2f36;
+  --card: #33373f;
+  --surface: #33373f;
+  --shadow-dark: #23262b;
+  --shadow-light: #3b4048;
+  --accent: #7c6bff;
+  --accent-ink: #a99cff;
+  --accent-ring: rgba(169, 156, 255, .4);
+  --ink: #e6e8ec;
+  --ink-2: #9aa0aa;
+  --ink-3: #9aa0aa;
+  --danger: #f19a9a;
+  --knob: #ffffff;
+  --orb-hi: rgba(255, 255, 255, .18);
+  --orb-lo: rgba(0, 0, 0, .32);
+}
+
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme="light"]) {
     color-scheme: dark;
-    --page: #111113;
-    --card: #1c1d1f;
-    --block: #252628;
-    --tone: #323234;
-    --line: rgba(255, 255, 255, 0.08);
-    --line-strong: rgba(255, 255, 255, 0.14);
-    --text: #f5f5f7;
-    --text-2: #a8a8ad;
-    --text-3: #6f6f75;
-    --shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.50), 0 10px 28px -8px rgba(0, 0, 0, 0.55);
-    --shadow-e2: 0 2px 6px rgba(0, 0, 0, 0.50), 0 32px 60px -14px rgba(0, 0, 0, 0.70);
+    --bg: #2c2f36;
+    --card: #33373f;
+    --surface: #33373f;
+    --shadow-dark: #23262b;
+    --shadow-light: #3b4048;
+    --accent: #7c6bff;
+    --accent-ink: #a99cff;
+    --accent-ring: rgba(169, 156, 255, .4);
+    --ink: #e6e8ec;
+    --ink-2: #9aa0aa;
+    --ink-3: #9aa0aa;
+    --danger: #f19a9a;
+    --knob: #ffffff;
+    --orb-hi: rgba(255, 255, 255, .18);
+    --orb-lo: rgba(0, 0, 0, .32);
   }
 }
-html[data-theme='light'] { color-scheme: light; }
-html[data-theme='dark'] {
-  color-scheme: dark;
-  --page: #111113; --card: #1c1d1f; --block: #252628; --tone: #323234;
-  --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.14);
-  --text: #f5f5f7; --text-2: #a8a8ad; --text-3: #6f6f75;
-  --shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.50), 0 10px 28px -8px rgba(0, 0, 0, 0.55);
-  --shadow-e2: 0 2px 6px rgba(0, 0, 0, 0.50), 0 32px 60px -14px rgba(0, 0, 0, 0.70);
-}
 
-/* ---------- 2. base ---------- */
-*, *::before, *::after { box-sizing: border-box; }
+* { box-sizing: border-box; }
 [hidden] { display: none !important; }
-html, body { min-height: 100%; }
+html, body { height: 100%; }
 body {
   margin: 0;
-  padding: calc(var(--topbar-h) + 24px) var(--pad-page) calc(var(--nav-h) + 28px + env(safe-area-inset-bottom, 0px));
-  background: var(--page);
-  color: var(--text);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
-  font-size: 15px;
-  line-height: 20px;
-  letter-spacing: -0.01em;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font);
+  font-size: var(--fs-sm);
+  line-height: 22px;
   -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: transparent;
 }
-.panel { width: min(560px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: var(--gap-card); }
-.num, strong, .sub-value strong, .relation-value, .memory-stat strong, .triple-col strong { font-variant-numeric: tabular-nums; }
+.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
+use { pointer-events: none; }
+h1, h2, h3, p, dl, dd, dt, ul, li { margin: 0; }
+button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* ---------------------------------------------------------------- shell --- */
+
+body {
+  display: grid;
+  grid-template-columns: var(--rail-w) minmax(0, 1fr);
+  transition: grid-template-columns var(--t);
+}
+body.rail-collapsed { grid-template-columns: var(--rail-w-min) minmax(0, 1fr); }
+
+.rail {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-4);
+  margin: var(--sp-4) 0 var(--sp-4) var(--sp-4);
+  padding: var(--sp-4);
+  border-radius: var(--r-card);
+  background: var(--card);
+  box-shadow: var(--raise);
+  overflow: hidden;
+}
+.rail-top { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; }
+.rail-mark {
+  flex: none; width: 36px; height: 36px; border-radius: var(--r-chip);
+  display: grid; place-items: center;
+  background: var(--card);
+  box-shadow: var(--raise-sm);
+  color: var(--accent);
+}
+.rail-mark svg { width: 18px; height: 18px; fill: currentColor; }
+.rail-word { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
+.rail-toggle {
+  margin-left: auto; flex: none;
+  width: 32px; height: 32px; border-radius: var(--r-chip);
+  display: grid; place-items: center;
+  background: var(--card);
+  box-shadow: var(--raise-btn);
+  color: var(--ink-2);
+  transition: box-shadow var(--t), color var(--t);
+}
+.rail-toggle svg { width: 18px; height: 18px; }
+.rail-toggle:hover { box-shadow: var(--raise-hover); }
+.rail-toggle:active { box-shadow: var(--sink); }
+body.rail-collapsed .rail-toggle svg { transform: none; }
+body.rail-collapsed .rail-word,
+body.rail-collapsed .rail-version,
+body.rail-collapsed .rail-item span { display: none; }
+body.rail-collapsed .rail-top { flex-direction: column; gap: var(--sp-2); }
+body.rail-collapsed .rail-toggle { margin: 0; }
+body.rail-collapsed .rail-item { justify-content: center; padding: 0; }
+
+.rail-nav { display: flex; flex-direction: column; gap: var(--sp-2); }
+.rail-item {
+  display: flex; align-items: center; gap: var(--sp-3);
+  height: 44px; padding: 0 var(--sp-3);
+  border-radius: var(--r-inner);
+  color: var(--ink-2);
+  font-size: var(--fs-sm); font-weight: 600;
+  transition: box-shadow var(--t), color var(--t), background-color var(--t);
+}
+.rail-item .ico { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+.rail-item:hover { box-shadow: var(--raise-sm); color: var(--ink); }
+.rail-item.active {
+  background: var(--card);
+  box-shadow: var(--sink-sm);
+  color: var(--accent-ink);
+}
+.rail-item.active .ico { color: var(--accent); }
+.rail-foot { margin-top: auto; padding: 0 var(--sp-2); }
+.rail-version { color: var(--ink-2); font-size: var(--fs-xs); }
+
+.panel {
+  min-width: 0;
+  min-height: 100vh;
+  padding: var(--sp-4) var(--sp-6) var(--sp-6) var(--sp-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-6);
+}
+body[data-tab="tools"] .grid { flex: 1 1 auto; align-content: stretch; }
+
+/* --------------------------------------------------------------- topbar --- */
 
-/* ---------- 3. topbar ---------- */
 .topbar {
-  position: fixed;
-  top: 0; left: 0; right: 0;
-  z-index: 30;
-  height: var(--topbar-h);
+  position: sticky;
+  top: 0;
+  z-index: 20;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 0 var(--pad-page);
-  background: var(--page);
+  gap: var(--sp-4);
+  min-height: 56px;
+  margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-6)) 0 calc(-1 * var(--sp-4));
+  padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-4);
+  background: var(--bg);
 }
-.topbar-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .topbar h1 {
-  margin: 0;
-  font-size: 24px;
-  line-height: 30px;
+  font-size: var(--fs-lg);
+  line-height: 34px;
   font-weight: 700;
-  letter-spacing: -0.02em;
-  color: var(--text);
+  letter-spacing: -.01em;
+  white-space: nowrap;
 }
-.link-button {
-  align-self: flex-start;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--accent);
-  font: inherit;
-  font-size: 13px;
-  line-height: 18px;
-  cursor: pointer;
+.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
+
+.seg {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-1);
+  padding: var(--sp-1);
+  border-radius: var(--r-inner);
+  background: var(--bg);
+  box-shadow: var(--sink-sm);
+}
+.seg-item {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 var(--sp-4);
+  border-radius: var(--r-chip);
+  color: var(--ink-2);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  transition: box-shadow var(--t), color var(--t), background-color var(--t);
 }
+.seg-item:hover { color: var(--ink); }
+.seg-item.active {
+  background: var(--card);
+  box-shadow: var(--raise-sm);
+  color: var(--accent-ink);
+}
+
 .icon-button {
-  display: grid;
-  place-items: center;
-  flex: 0 0 40px;
-  width: 40px;
+  width: 40px; height: 40px;
+  border-radius: var(--r-chip);
+  display: grid; place-items: center;
+  background: var(--card);
+  color: var(--ink-2);
+  box-shadow: var(--raise-btn);
+  transition: box-shadow var(--t), color var(--t);
+}
+.icon-button svg { width: 20px; height: 20px; }
+.icon-button:hover { box-shadow: var(--raise-hover); color: var(--ink); }
+.icon-button:active { box-shadow: var(--sink); }
+.icon-button-accent { color: var(--accent); }
+
+.ghost-button,
+.primary-button {
   height: 40px;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: var(--tone);
-  color: var(--text);
-  cursor: pointer;
+  padding: 0 var(--sp-4);
+  border-radius: var(--r-chip);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  background: var(--card);
+  box-shadow: var(--raise-btn);
+  transition: box-shadow var(--t), color var(--t), background-color var(--t);
+}
+.ghost-button { color: var(--ink-2); }
+.ghost-button:hover { box-shadow: var(--raise-hover); color: var(--ink); }
+.primary-button { color: var(--accent); box-shadow: var(--raise-sm); }
+.primary-button:hover { box-shadow: var(--raise-hover); }
+.ghost-button:active,
+.primary-button:active,
+.ghost-button.is-pressed,
+.primary-button.is-pressed {
+  background: var(--bg);
+  box-shadow: var(--sink);
+  color: var(--accent-ink);
+}
+.ghost-button:disabled,
+.primary-button:disabled {
+  color: var(--ink-3);
+  box-shadow: var(--raise-sm);
+  cursor: not-allowed;
+  opacity: .7;
 }
-.icon-button-accent { background: var(--accent); color: #fff; }
 
-/* ---------- 4. cards ---------- */
-.cards { display: grid; grid-template-columns: 1fr; gap: var(--gap-card); }
-.cards > [data-card-id] { grid-column: span 1; min-width: 0; }
-.card, .masthead, .add-cards {
+/* ----------------------------------------------------------------- grid --- */
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: var(--sp-4);
+  align-items: stretch;
+}
+.span-3 { grid-column: span 3; }
+.span-4 { grid-column: span 4; }
+.span-6 { grid-column: span 6; }
+.span-8 { grid-column: span 8; }
+.span-12 { grid-column: span 12; }
+.h-120 { min-height: 120px; }
+.h-176 { min-height: 176px; }
+.h-200 { min-height: 200px; }
+.h-208 { min-height: 208px; }
+.h-232 { min-height: 232px; }
+.h-280 { min-height: 280px; }
+.h-380 { min-height: 380px; }
+.h-420 { min-height: 380px; }
+
+/* ---------------------------------------------------------------- cards --- */
+
+.card {
   position: relative;
-  padding: var(--pad-card);
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+  padding: var(--sp-6);
+  border-radius: var(--r-card);
   background: var(--card);
-  border: 0;
-  border-radius: var(--radius-card);
-  box-shadow: var(--shadow-e1);
+  box-shadow: var(--raise);
 }
-.card-flush { padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
-.card-head, .section-head {
+.card-head {
   display: flex;
   align-items: center;
-  gap: 8px;
-  min-height: 22px;
-  margin-bottom: 12px;
+  gap: var(--sp-3);
+  min-height: 28px;
+  flex: none;
 }
-.card-head h2, .section-head h2, .trace-summary h2, .memory-head h2 {
-  margin: 0;
-  font-size: 17px;
-  line-height: 22px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
+.card-ico {
+  flex: none;
+  width: 36px; height: 36px;
+  border-radius: var(--r-chip);
+  display: grid; place-items: center;
+  background: var(--card);
+  box-shadow: var(--raise-sm);
+  color: var(--accent);
+}
+.card-ico svg {
+  width: 20px; height: 20px;
+  fill: none; stroke: currentColor; stroke-width: 1.5;
+  stroke-linecap: round; stroke-linejoin: round;
 }
-.card-icon { display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; color: var(--text-2); }
-.card-icon svg { display: block; width: 18px; height: 18px; }
-.card-aside, .section-head .hint, .trace-summary .hint {
+.card-head h2 {
+  font-size: var(--fs-md);
+  line-height: 28px;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.card-trail {
   margin-left: auto;
-  color: var(--text-3);
-  font-size: 13px;
-  line-height: 18px;
+  color: var(--ink-2);
+  font-size: var(--fs-xs);
+  line-height: 24px;
   white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  max-width: 55%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.card-trail.up { color: var(--accent-ink); }
+.card-trail.down { color: var(--ink-2); }
+
+.hint,
+.state-note {
+  color: var(--ink-2);
+  font-size: var(--fs-xs);
+  line-height: 18px;
+}
+.state-note { color: var(--ink); }
+.group-title {
+  color: var(--ink-2);
+  font-size: var(--fs-xs);
+  line-height: 18px;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+.card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-1); }
+
+.well {
+  border-radius: var(--r-inner);
+  background: var(--bg);
+  box-shadow: var(--sink-deep);
+  padding: var(--sp-3);
+  min-height: 0;
+}
+
+/* loading skeleton: solid plate, no gradient */
+.is-booting .card > *:not(.card-head) { opacity: 0; }
+.is-booting .card-trail { visibility: hidden; }
+.is-booting .card::after {
+  content: "";
+  position: absolute;
+  inset: 76px var(--sp-6) var(--sp-6);
+  border-radius: var(--r-inner);
+  background: var(--bg);
+  box-shadow: var(--sink-deep);
+  animation: sk-pulse 1.2s ease-in-out infinite;
+}
+@keyframes sk-pulse {
+  0%, 100% { opacity: .55; }
+  50% { opacity: .95; }
+}
+
+/* ------------------------------------------------------------- status ---- */
+
+.status-card {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--sp-6);
+}
+.orb-wrap {
+  flex: none;
+  width: 96px; height: 96px;
+  border-radius: var(--r-card);
+  display: grid; place-items: center;
+  background: var(--bg);
+  box-shadow: var(--sink);
+}
+.orb {
+  position: relative;
+  width: 64px; height: 64px;
+  border-radius: var(--r-inner);
+  background: var(--accent);
+  box-shadow: inset -4px -4px 10px var(--orb-lo), inset 4px 4px 10px var(--orb-hi);
+}
+.orb-ring {
+  position: absolute;
+  inset: -8px;
+  border-radius: var(--r-card);
+  border: 1px solid var(--accent-ring);
+}
+.status-body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
+.status-body h2 { font-size: var(--fs-md); line-height: 28px; font-weight: 700; }
+.status-body .motivation {
+  color: var(--ink-2);
+  font-size: var(--fs-sm);
+  line-height: 22px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.status { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink-2); font-size: var(--fs-xs); }
+.status .dot {
+  width: 10px; height: 10px; border-radius: var(--r-chip);
+  background: var(--card);
+  box-shadow: var(--raise-sm);
 }
-.card-aside::after, .section-head .hint::after { content: ' ›'; opacity: 0.6; }
-
-/* masthead: orb centered, identity under it */
-.masthead { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 22px var(--pad-card) 18px; }
-.masthead .orb-wrap { width: 88px; height: 88px; flex: 0 0 88px; display: grid; place-items: center; }
-.identity { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
-.identity h1 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
-.motivation { margin: 0; color: var(--text-2); font-size: 15px; line-height: 20px; }
-.status { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--text-3); font-size: 13px; line-height: 18px; }
-.status .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--text-3); }
-.status.on .dot { background: var(--ok); }
-.status.off .dot { background: var(--danger); }
-.empty-hint { margin: 2px 0 0; color: var(--text-3); font-size: 12px; line-height: 16px; }
-
-/* orb (unchanged silhouette, sized for 88px box) */
-.orb { position: relative; width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(86, 134, 254, 0) 0 15%, #5686fe 16% 100%); animation: breathe 7s ease-in-out infinite; }
-.orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 28px 6px var(--orb-glow); opacity: 0.88; z-index: -1; pointer-events: none; }
-.orb-ring { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--line-strong); opacity: 0.55; animation: ring-breathe 7s ease-in-out infinite; pointer-events: none; }
-@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
-@keyframes ring-breathe { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.07); opacity: 0.22; } }
-@media (prefers-reduced-motion: reduce) { .orb, .orb-ring { animation: none; } }
-
-/* ---------- 5. figures / sub blocks ---------- */
-.sub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-block); }
-.sub-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.subblock {
+.status.on .dot { background: var(--accent); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .2); }
+.status.off .dot { background: var(--bg); box-shadow: var(--sink-sm); }
+.fact-list {
+  margin-left: auto;
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-  padding: 14px;
-  background: var(--block);
-  border-radius: var(--radius-block);
-}
-.sub-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: 12px; line-height: 16px; }
-.sub-trend { display: inline-flex; align-items: baseline; gap: 4px; color: var(--text-3); font-size: 12px; line-height: 16px; }
-.sub-trend b { font-weight: 600; }
-.delta { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
-.delta.up { color: var(--ok); }
-.delta.down { color: var(--danger); }
-.sub-value { display: flex; align-items: baseline; gap: 6px; letter-spacing: -0.02em; }
-.sub-value strong { font-size: 20px; line-height: 26px; font-weight: 700; }
-.channels-card .sub-value strong { font-size: 20px; line-height: 26px; }
-.mood-card .sub-value strong { font-size: 30px; line-height: 34px; }
-.unit { display: none; }
-.sub-status { margin-left: auto; color: var(--text-2); font-size: 13px; line-height: 18px; letter-spacing: 0; }
-.sub-note { color: var(--text-3); font-size: 12px; line-height: 16px; min-height: 16px; }
-.figure-caption { color: var(--text-3); font-size: 12px; line-height: 16px; }
-.mood-card .figure-caption { display: none; }
-.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
-.chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; background: var(--block); border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; }
-.chip b { color: var(--text-3); font-size: 12px; font-weight: 400; }
-.chip strong { color: var(--text); font-size: 13px; font-weight: 600; }
-
-/* single-metric mood card: one hero number, drop the duplicated tension block */
-.mood-card .sub-grid.two { grid-template-columns: 1fr; }
-.mood-card .sub-grid.two > .subblock + .subblock { display: none; }
-
-/* progress bar (6px, radius 3) */
-.bar { position: relative; height: 6px; border-radius: 3px; background: var(--block); overflow: visible; }
-.bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width .4s ease; }
-.bar-over { position: absolute; top: 0; left: 65%; height: 100%; width: 0; border-radius: 3px; background: var(--warn); }
-.subblock .bar { margin-top: 2px; background: var(--card); }
-.subblock .bar i { background: var(--accent); }
-.subblock .bar-over { background: var(--warn); }
-.bar-legend { display: flex; align-items: center; gap: 12px; margin-top: 6px; color: var(--text-3); font-size: 12px; line-height: 16px; }
-.legend-dot { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 3px; background: var(--accent); }
-.legend-dot.warn { background: var(--warn); }
-
-/* chart */
-canvas#moodChart { display: block; width: 100%; height: 150px; }
-
-/* ---------- 6. lists ---------- */
-.memory-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; max-height: 300px; overflow: auto; }
-.memory-list li { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
-.memory-list li:first-child { padding-top: 0; }
-.memory-list li:last-child { border-bottom: 0; padding-bottom: 0; }
-.memory-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
-.memory-list time { color: var(--text-3); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
-.memory-tag { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--block); color: var(--text-2); font-size: 11px; line-height: 15px; }
-.memory-text { display: block; color: var(--text); font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
-.memory-list li.empty { color: var(--text-3); border: 0; font-size: 13px; padding: 4px 0; }
-.memory-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
-.memory-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px; background: var(--block); border-radius: var(--radius-block); }
-.memory-stat span { color: var(--text-2); font-size: 12px; line-height: 16px; }
-.memory-stat strong { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
-.memory-stat em { color: var(--text-2); font-size: 12px; font-style: normal; }
-.memory-summary-card .capacity { margin-top: 14px; }
-.capacity { margin-top: 12px; }
-.capacity .bar { margin-top: 6px; }
-
-/* relation */
-.relation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
-.relation-col { display: flex; flex-direction: column; gap: 2px; }
-.relation-label { color: var(--text-2); font-size: 12px; line-height: 16px; }
-.relation-value { font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
-.relation-note { margin: 2px 0 0; color: var(--text-3); font-size: 12px; line-height: 16px; }
-.relation-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 12px; line-height: 18px; }
-
-/* trace */
-.trace-card { padding: 0; }
-.trace-summary { display: flex; align-items: center; gap: 8px; padding: var(--pad-card); cursor: pointer; list-style: none; }
-.trace-summary::-webkit-details-marker { display: none; }
-.trace-list { display: flex; flex-direction: column; gap: 12px; padding: 0 var(--pad-card) var(--pad-card); }
-.trace-list .empty { margin: 0; color: var(--text-3); font-size: 13px; }
-.trace-row { padding-top: 12px; border-top: 1px solid var(--line); }
-.trace-row:first-child { padding-top: 0; border-top: 0; }
-.trace-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: var(--text-3); font-size: 12px; }
-.trace-grid { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 8px; margin: 0; font-size: 12px; line-height: 18px; }
-.trace-grid dt { color: var(--text-3); }
-.trace-grid dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
-.trace-badge { padding: 0 6px; border-radius: var(--radius-pill); background: var(--block); color: var(--text-3); font-size: 11px; }
-
-/* ---------- 7. forms ---------- */
-.persona-text {
-  width: 100%;
-  min-height: 96px;
-  resize: vertical;
-  padding: 12px;
-  color: var(--text);
-  background: var(--block);
-  border: 0;
-  border-radius: var(--radius-field);
-  font: inherit;
-  font-size: 15px;
-  line-height: 22px;
-  outline: none;
+  gap: var(--sp-2);
+  min-width: 148px;
+  padding: var(--sp-3);
+  border-radius: var(--r-inner);
+  background: var(--bg);
+  box-shadow: var(--sink-sm);
 }
-.persona-text:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
-.persona-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
-.persona-save {
-  min-height: 40px;
-  padding: 0 18px;
-  font: inherit;
-  font-size: 15px;
-  font-weight: 600;
-  color: #fff;
+.fact-list div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
+.fact-list dt { color: var(--ink-2); font-size: var(--fs-xs); }
+.fact-list dd { color: var(--ink); font-size: var(--fs-sm); font-weight: 700; }
+
+/* --------------------------------------------------------- metric cards -- */
+
+.metric { display: flex; align-items: baseline; gap: var(--sp-2); }
+.metric strong {
+  font-size: var(--fs-xl);
+  line-height: 38px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -.02em;
+}
+.metric-sm strong { font-size: var(--fs-lg); line-height: 34px; }
+.metric-word { color: var(--ink-2); font-size: var(--fs-xs); }
+.metric-word:empty { display: none; }
+body.is-empty .empty-hide { display: none; }
+
+.subblock { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; }
+.data-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--sp-2);
+  color: var(--ink-2);
+  font-size: var(--fs-xs);
+}
+.data-row b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
+.data-row b.up { color: var(--accent-ink); }
+.data-row b.down { color: var(--ink-2); }
+
+.bar {
+  position: relative;
+  height: 10px;
+  border-radius: var(--r-chip);
+  background: var(--bg);
+  box-shadow: var(--sink-sm);
+  overflow: hidden;
+}
+.bar > i {
+  position: absolute;
+  inset: 2px auto 2px 2px;
+  width: 0;
+  border-radius: var(--r-chip);
   background: var(--accent);
-  border: 0;
-  border-radius: var(--radius-field);
-  cursor: pointer;
+  box-shadow: 1px 1px 2px var(--shadow-dark);
+}
+.bar > .bar-over {
+  position: absolute;
+  top: 0; bottom: 0;
+  left: 65%;
+  width: 0;
+  background: var(--ink-2);
+  opacity: .35;
 }
-.persona-save:disabled { opacity: 0.55; cursor: progress; }
-.persona-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; margin-top: 14px; font-size: 12px; line-height: 18px; }
-.persona-preview div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; color: var(--text-3); }
-.persona-preview strong { color: var(--text); font-weight: 600; font-size: 13px; }
-.persona-status-error { color: var(--danger); }
-.persona-status-ok { color: var(--ok); }
 
-.model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
-.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 16px; color: var(--text-2); }
-.field input, .field select {
-  height: 40px;
-  padding: 0 12px;
-  font: inherit;
-  font-size: 15px;
-  color: var(--text);
-  background: var(--block);
-  border: 0;
-  border-radius: var(--radius-field);
-  outline: none;
+/* ---------------------------------------------------------- data lists --- */
+
+.data-list { display: flex; flex-direction: column; gap: 2px; }
+.data-list div {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--sp-4);
+  padding: var(--sp-2) var(--sp-1);
+  border-radius: var(--r-chip);
 }
-.field input:focus, .field select:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
-.model-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
-.model-test {
-  min-height: 40px;
-  padding: 0 16px;
-  font: inherit;
-  font-size: 15px;
-  color: var(--text);
-  background: var(--block);
-  border: 0;
-  border-radius: var(--radius-field);
-  cursor: pointer;
+
+.data-list dt { color: var(--ink-2); font-size: var(--fs-xs); white-space: nowrap; }
+.data-list dd {
+  color: var(--ink);
+  font-size: var(--fs-sm);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
+.data-list dd small { color: var(--ink-2); font-size: var(--fs-xs); font-weight: 400; margin-left: var(--sp-1); }
 
-/* ---------- 8. switches + advanced ---------- */
-.switches { display: flex; flex-direction: column; gap: 10px; }
-.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; background: var(--block); border-radius: var(--radius-block); }
-.switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.switch-label { font-size: 15px; line-height: 20px; font-weight: 600; }
-.switch-desc { color: var(--text-3); font-size: 12px; line-height: 16px; }
-.switch-state { color: var(--text-2); font-size: 12px; line-height: 16px; }
-.switch-row input { accent-color: var(--accent); width: 22px; height: 22px; }
-
-.advanced-info { margin: 0; display: flex; flex-direction: column; }
-.advanced-info div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
-.advanced-info div:last-child { border-bottom: 0; }
-.advanced-info dt { color: var(--text-2); font-size: 12px; line-height: 16px; }
-.advanced-info dd { margin: 0; color: var(--text); font-size: 15px; line-height: 20px; text-align: right; }
-.advanced-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
-.advanced-button {
-  min-height: 36px;
-  padding: 0 14px;
-  font: inherit;
-  font-size: 14px;
-  color: var(--text);
-  background: var(--block);
-  border: 0;
-  border-radius: var(--radius-field);
-  cursor: pointer;
+.avg-card .data-list div { padding: var(--sp-1); }
+.data-list-inline {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  column-gap: var(--sp-3);
+  align-content: start;
 }
+.data-inline { display: flex; align-items: baseline; gap: var(--sp-2); }
+.data-inline span { color: var(--ink-2); font-size: var(--fs-xs); }
+.data-inline b { font-size: var(--fs-sm); font-weight: 700; }
 
-/* three-column stats */
-.triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
-.triple-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px; background: var(--block); border-radius: var(--radius-block); }
-.triple-col strong { font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
-.triple-col span { color: var(--text-2); font-size: 12px; line-height: 16px; }
+/* ------------------------------------------------------------- triple ---- */
 
-/* footer */
-.footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 0; color: var(--text-3); font-size: 12px; line-height: 16px; }
+.triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
+.triple-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-1);
+  min-width: 0;
+  padding: var(--sp-3);
+  border-radius: var(--r-inner);
+  background: var(--bg);
+  box-shadow: var(--sink-sm);
+}
+.triple-col span { color: var(--ink-2); font-size: var(--fs-xs); line-height: 18px; }
+.triple-col strong {
+  font-size: var(--fs-md);
+  line-height: 28px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-/* ---------- 9. bottom nav ---------- */
-.tabbar {
-  position: fixed;
-  left: 50%;
-  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
-  z-index: 35;
+/* ------------------------------------------------------------- chart ----- */
+
+.chart-well { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: var(--sp-3); }
+.chart-well canvas { display: block; width: 100%; height: 150px; }
+.chart-empty { margin: auto 0; color: var(--ink-2); font-size: var(--fs-xs); line-height: 18px; }
+
+/* ------------------------------------------------------------- memory ---- */
+
+.table-head,
+.memory-list li {
+  display: grid;
+  grid-template-columns: 96px 64px minmax(0, 1fr);
+  gap: var(--sp-3);
+  align-items: baseline;
+}
+.table-head {
+  padding: 0 var(--sp-3) var(--sp-1);
+  color: var(--ink-2);
+  font-size: var(--fs-xs);
+}
+.list-well {
+  flex: 1 1 auto;
+  min-height: 0;
   display: flex;
-  align-items: stretch;
-  gap: 2px;
-  width: min(430px, calc(100% - 32px));
-  height: var(--nav-h);
-  padding: 8px;
-  transform: translateX(-50%);
-  background: var(--tone);
-  border-radius: var(--radius-pill);
-  box-shadow: var(--shadow-e2);
-}
-.tab-item {
-  flex: 1 1 0;
+  flex-direction: column;
+  overflow: hidden;
+}
+.memory-list {
+  list-style: none;
+  padding: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 3px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-width: thin;
+}
+.memory-list li {
+  padding: var(--sp-2) var(--sp-3);
+  border-radius: var(--r-chip);
+  transition: box-shadow var(--t), background-color var(--t);
+}
+.memory-list li:hover { background: var(--card); box-shadow: var(--raise-sm); }
+.memory-list time { color: var(--ink-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
+.memory-kind { color: var(--ink-2); font-size: var(--fs-xs); }
+.memory-text {
+  color: var(--ink);
+  font-size: var(--fs-sm);
+  line-height: 20px;
   min-width: 0;
-  padding: 4px 6px;
-  border: 0;
-  border-radius: var(--radius-pill);
-  background: transparent;
-  color: var(--text-2);
-  font: inherit;
-  font-size: 11px;
-  line-height: 13px;
-  cursor: pointer;
-  transition: background .15s ease, color .15s ease;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.memory-list li.empty {
+  display: block;
+  color: var(--ink-2);
+  font-size: var(--fs-sm);
+  padding: var(--sp-4) var(--sp-3);
 }
-.tab-item svg { display: block; width: 20px; height: 20px; }
-.tab-item.active { background: var(--accent); color: #fff; }
 
-/* tab visibility */
-.panel:not(.tab-dashboard) .masthead { display: none; }
-.layout-editing .masthead { display: flex; }
-.layout-editing .tabbar { display: none; }
+/* ----------------------------------------------------------- relation ---- */
 
-/* ---------- 10. edit mode ---------- */
-.card-hide {
-  display: none;
-  position: absolute;
-  top: -8px; right: -8px;
-  z-index: 3;
-  place-items: center;
-  width: 28px; height: 28px;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: var(--danger);
-  color: #fff;
-  font-size: 18px;
-  line-height: 1;
-  cursor: pointer;
+.relation { display: flex; flex-direction: column; gap: var(--sp-3); }
+.relation .data-list { flex: 1 1 auto; }
+.relation-foot {
+  display: flex;
+  gap: var(--sp-6);
+  padding: var(--sp-2) var(--sp-3);
+  border-radius: var(--r-inner);
+  background: var(--bg);
+  box-shadow: var(--sink-sm);
+  color: var(--ink-2);
+  font-size: var(--fs-xs);
 }
-.layout-editing .card-hide { display: grid; }
-.layout-editing .cards > [data-card-id] { touch-action: none; }
-.cards > [data-card-id].dragging { opacity: 0.8; outline: 2px dashed var(--accent); outline-offset: 2px; }
-[data-card-id].is-hidden, [data-card-id].tab-hidden { display: none !important; }
-.add-cards { border: 1px dashed var(--line-strong); box-shadow: none; }
-.add-cards h3 { margin: 0 0 12px; color: var(--text-2); font-size: 15px; line-height: 20px; font-weight: 600; }
-.add-list { display: flex; flex-wrap: wrap; gap: 8px; }
-.add-chip {
-  min-height: 34px;
-  padding: 0 12px;
-  border: 0;
-  border-radius: var(--radius-field);
-  background: var(--block);
-  color: var(--text);
+.relation-foot b { color: var(--ink); font-weight: 700; margin-left: var(--sp-1); }
+
+/* ------------------------------------------------------------ controls --- */
+
+.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
+.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
+.field-wide { grid-column: span 2; }
+.field > span { color: var(--ink-2); font-size: var(--fs-xs); line-height: 16px; }
+input[type="text"], input[type="url"], input[type="password"], input[type="number"], select, textarea {
+  width: 100%;
+  height: 40px;
+  background: var(--bg);
+  border: 1px solid transparent;
+  border-radius: var(--r-inner);
+  box-shadow: var(--sink-deep);
+  color: var(--ink);
   font: inherit;
-  font-size: 14px;
+  font-size: var(--fs-sm);
+  padding: 0 var(--sp-3);
+  transition: box-shadow var(--t), border-color var(--t);
+}
+textarea { height: auto; min-height: 96px; padding: var(--sp-2) var(--sp-3); line-height: 22px; resize: vertical; }
+input:hover, select:hover, textarea:hover { box-shadow: var(--sink); }
+input:focus, select:focus, textarea:focus {
+  outline: none;
+  box-shadow: var(--sink-sm);
+  border-color: var(--accent);
+}
+input:disabled, select:disabled, textarea:disabled {
+  color: var(--ink-2);
+  background: var(--bg);
+  box-shadow: var(--sink-sm);
+  cursor: not-allowed;
+}
+::placeholder { color: var(--ink-2); }
+.field-block { gap: var(--sp-2); }
+.persona-card .field-block { flex: 1 1 auto; min-height: 0; }
+.persona-text { height: 100%; min-height: 140px; }
+
+.switch-row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-2) var(--sp-3);
+  border-radius: var(--r-inner);
+  background: var(--bg);
+  box-shadow: var(--sink-sm);
   cursor: pointer;
+  transition: box-shadow var(--t);
 }
-.layout-toast {
-  position: fixed;
-  left: 50%;
-  bottom: calc(var(--nav-h) + 32px + env(safe-area-inset-bottom, 0px));
-  z-index: 30;
-  transform: translateX(-50%);
-  max-width: calc(100% - 32px);
-  padding: 10px 16px;
-  border: 0;
-  border-radius: var(--radius-field);
+.switch-row:hover { box-shadow: var(--sink-deep); }
+.switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.switch-label { font-size: var(--fs-sm); line-height: 20px; color: var(--ink); font-weight: 600; }
+.switch-desc { color: var(--ink-2); font-size: var(--fs-xs); line-height: 16px; }
+.switch-row input[type="checkbox"] {
+  margin-left: auto;
+  appearance: none;
+  flex: none;
+  position: relative;
+  width: 48px; height: 28px;
+  border-radius: var(--r-chip);
+  background: var(--bg);
+  box-shadow: var(--sink-deep);
+  cursor: pointer;
+  transition: box-shadow var(--t), background-color var(--t);
+}
+.switch-row input[type="checkbox"]::after {
+  content: "";
+  position: absolute;
+  top: 4px; left: 4px;
+  width: 20px; height: 20px;
+  border-radius: var(--r-chip);
   background: var(--card);
-  box-shadow: var(--shadow-e2);
-  color: var(--text);
-  font-size: 13px;
-  line-height: 18px;
+  box-shadow: var(--raise-sm);
+  transition: left var(--t), background-color var(--t);
 }
+.switch-row input[type="checkbox"]:checked { background: var(--accent); }
+.switch-row input[type="checkbox"]:checked::after { left: 24px; background: var(--knob); }
+.switch-row input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .7; }
 
-/* ---------- 11. desktop ---------- */
-@media (min-width: 600px) {
-  :root { --pad-page: 24px; --pad-card: 20px; --radius-card: 32px; }
-  body { font-size: 15px; }
-  .panel { width: min(640px, 100%); }
-  .tabbar { width: min(560px, calc(100% - 48px)); }
+.switches {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: var(--sp-3);
+  row-gap: var(--sp-2);
+  align-content: start;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-width: thin;
 }
-@media (max-width: 359px) {
-  .sub-grid.two { grid-template-columns: 1fr; }
-  .relation-grid { gap: 8px 12px; }
+.switch-group {
+  grid-column: 1 / -1;
+  color: var(--ink-2);
+  font-size: var(--fs-xs);
+  line-height: 18px;
+  padding-top: var(--sp-2);
 }
+.switches .switch-group:first-child { padding-top: 0; }
 
-/* ---------- 12. meta text ---------- */
-.hint { color: var(--text-3); font-size: 12px; line-height: 16px; }
-.persona-actions .hint, .model-actions .hint { flex: 1 1 auto; min-width: 0; }
-.empty { color: var(--text-3); font-size: 13px; line-height: 18px; }
+#personaHint.persona-status-error, #personaStatus.persona-status-error { color: var(--danger); }
+#personaHint.persona-status-ok, #personaStatus.persona-status-ok { color: var(--accent-ink); }
 
-/* --- expression length constraint card --- */
-.expression-fields {
+.advanced-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-6);
+}
+.advanced-row .card-actions { margin: 0; padding: 0; }
+
+/* --------------------------------------------------------------- trace --- */
+
+.trace-head-row,
+.trace-row {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 14px;
-  margin-top: 10px;
-}
-.expression-fields[hidden] { display: none !important; }
-.expression-toggle { margin-top: 10px; }
-@media (max-width: 620px) {
-  .expression-fields { grid-template-columns: 1fr; }
-}
-
-/* bug fix: whole channels block (title included) leaves non-dashboard tabs */
-.panel:not(.tab-dashboard):not(.layout-editing) .channels-wrap { display: none; }
-
-/* ---------- 13. layout guards (防止旧版/串版样式压扁版面) ---------- */
-html, body { overflow-x: clip; }
-body { max-width: 100%; }
-.panel { max-width: 100%; }
-.channels-wrap { min-width: 0; max-width: 100%; }
-.masthead { height: auto; max-height: none; overflow: visible; }
-.masthead .orb-wrap { min-width: 88px; min-height: 88px; overflow: visible; }
-.masthead .orb { flex: 0 0 auto; }
-.identity { align-self: center; width: 100%; }
-.channels-wrap { position: relative; }
-.channels-wrap > .channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
-
-/* ---------- 14. channels: four independent cards (2×2) ---------- */
-.channels-wrap { position: relative; }
-.channel-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 2px 4px 10px; }
-.channel-title-row h2 { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; }
-.channel-aside { color: var(--text-3); font-size: 13px; line-height: 18px; }
-.channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
-.channel-card {
+  grid-template-columns: 48px minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 1fr) 64px minmax(0, 1.1fr);
+  gap: var(--sp-4);
+  align-items: baseline;
+}
+.trace-head-row {
+  color: var(--ink-2);
+  font-size: var(--fs-xs);
+  padding: 0 var(--sp-3);
+}
+.trace-list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
+.trace-row { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-chip); }
+.trace-row:nth-child(odd) { background: var(--card); box-shadow: var(--raise-sm); }
+.trace-row span { font-size: var(--fs-xs); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.trace-row .trace-time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
+.trace-list .state-note { padding: var(--sp-4) var(--sp-3); }
+
+/* -------------------------------------------------------------- footer --- */
+
+.footer {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-  max-width: 100%;
-  padding: 14px;
-  background: var(--card);
-  border-radius: 20px;
-  box-shadow: var(--shadow-e1);
-}
-.channel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
-.channel-label { color: var(--text-2); font-size: 12px; line-height: 16px; }
-.channel-card .sub-trend { color: var(--text-3); font-size: 12px; line-height: 16px; }
-.channel-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; row-gap: 2px; min-width: 0; }
-.channel-value strong { font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
-.channel-card .sub-status { white-space: nowrap; margin-left: auto; color: var(--text-2); font-size: 13px; line-height: 18px; }
-.channel-card .sub-note { margin: 0; color: var(--text-3); font-size: 11px; line-height: 15px; min-height: 15px; overflow-wrap: anywhere; }
-.channel-card .bar { margin-top: 2px; }
-.channel-card .bar-legend { margin-top: 4px; gap: 10px; font-size: 11px; line-height: 15px; }
-.channel-card .bar-legend .legend-dot { width: 5px; height: 5px; border-radius: 2.5px; margin-right: 3px; }
-@media (min-width: 360px) {
-  .channels-wrap .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  justify-content: space-between;
+  gap: var(--sp-4);
+  padding: 0 var(--sp-2);
+  color: var(--ink-2);
+  font-size: var(--fs-xs);
+  line-height: 18px;
 }
-@media (max-width: 359px) {
-  .channels-wrap .channel-grid { grid-template-columns: 1fr; }
+
+.layout-toast {
+  position: fixed;
+  left: 50%;
+  bottom: var(--sp-6);
+  padding: var(--sp-3) var(--sp-6);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  box-shadow: var(--raise);
+  color: var(--ink);
+  font-size: var(--fs-sm);
+  z-index: 40;
 }
 
-/* --- model card: embedding / rerank sections --- */
-.model-section-title {
-  margin: 14px 0 8px;
-  color: var(--text-2);
-  font-size: 11px;
-  line-height: 14px;
-  font-weight: 600;
+/* ---------------------------------------------------------- edit mode ---- */
+
+.card-hide {
+  display: none;
+  position: absolute;
+  top: var(--sp-3);
+  right: var(--sp-3);
+  width: 32px; height: 32px;
+  border-radius: var(--r-chip);
+  place-items: center;
+  background: var(--card);
+  box-shadow: var(--raise-sm);
+  color: var(--accent);
+  font-size: var(--fs-md);
+  line-height: 1;
+  font-weight: 700;
+  z-index: 3;
+  transition: box-shadow var(--t);
 }
-.model-card .model-section-title:first-of-type { margin-top: 0; }
-.rerank-toggle { margin: 0 0 10px; }
-.rerank-grid[hidden] { display: none !important; }
+.card-hide:hover { box-shadow: var(--raise-hover); }
+.card-hide:active { box-shadow: var(--sink-sm); }
+body.layout-editing .card-hide { display: grid; }
+body.layout-editing .card { cursor: grab; }
+body.layout-editing .card.dragging { opacity: .6; cursor: grabbing; }
+body.layout-editing .card.is-hidden { display: none; }
+.card.tab-off, .is-hidden { display: none !important; }
+
+.add-cards {
+  padding: var(--sp-6);
+  border-radius: var(--r-card);
+  background: var(--card);
+  box-shadow: var(--raise);
+}
+.add-cards h3 { font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--sp-3); color: var(--ink); }
+.add-list { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
+.add-chip {
+  padding: var(--sp-2) var(--sp-4);
+  border-radius: var(--r-chip);
+  background: var(--card);
+  box-shadow: var(--raise-sm);
+  color: var(--ink-2);
+  font-size: var(--fs-xs);
+  transition: box-shadow var(--t), color var(--t);
+}
+.add-chip:hover { box-shadow: var(--raise-hover); color: var(--ink); }
+.add-chip:active { box-shadow: var(--sink-sm); }
 
-/* ---------- 15. desktop (>=1024): left rail + 12-col dashboard ---------- */
-.rail, .desk { display: none; }
+/* ------------------------------------------------------------ tabbar ----- */
 
-@media (min-width: 1024px) {
-  :root {
-    --rail-w: 220px;
-    --radius-card: 32px;
-    --pad-card: 20px;
-    --gap-card: 12px;
-  }
-  body { padding: 0; }
-  body.rail-collapsed { --rail-w: 64px; }
+.tabbar { display: none; }
 
-  .panel {
-    width: auto;
-    max-width: none;
-    min-height: 100vh;
-    margin: 0 0 0 var(--rail-w);
-    padding: 16px 24px 24px 16px;
-    display: grid;
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-    gap: 12px;
-    align-content: start;
-    transition: margin-left 160ms ease;
-  }
+/* ============================================================ mobile ===== */
 
-  /* --- left rail --- */
-  .rail {
-    position: fixed;
-    inset: 0 auto 0 0;
-    z-index: 40;
-    width: var(--rail-w);
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding: 12px 10px;
-    background: var(--page);
-    border-right: 1px solid var(--line);
-    overflow: hidden;
-    transition: width 160ms ease, padding 160ms ease;
+@media (max-width: 1023px) {
+  body { grid-template-columns: minmax(0, 1fr); }
+  .rail { display: none; }
+  .panel {
+    padding: var(--sp-3) var(--sp-3) calc(96px + env(safe-area-inset-bottom, 0px));
+    gap: var(--sp-4);
   }
-  .rail-toggle {
-    display: grid;
-    place-items: center;
-    width: 40px;
-    height: 40px;
-    margin: 0 0 8px 2px;
-    padding: 0;
-    border: 0;
-    border-radius: 10px;
-    background: transparent;
-    color: var(--text-2);
-    cursor: pointer;
-    transition: background 160ms ease, color 160ms ease;
+  .topbar {
+    min-height: 52px;
+    margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3)) 0;
+    padding: var(--sp-2) var(--sp-3);
   }
-  .rail-toggle:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
-  .rail-toggle svg { width: 20px; height: 20px; }
-  .rail-nav { display: flex; flex-direction: column; gap: 2px; }
-  .rail-item {
-    position: relative;
+  .topbar h1 { font-size: var(--fs-md); line-height: 28px; }
+  .seg { display: none; }
+  .grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
+  .span-3, .span-4, .span-6, .span-8, .span-12 { grid-column: auto; }
+  .h-120, .h-176, .h-200, .h-208, .h-232, .h-280, .h-380, .h-420 { min-height: 0; }
+  .card { padding: var(--sp-4); gap: var(--sp-3); border-radius: var(--r-card); }
+
+  .status-card { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
+  .fact-list { width: 100%; min-width: 0; flex-direction: row; gap: var(--sp-4); }
+  .fact-list div { flex: 1; }
+  .orb-wrap { width: 80px; height: 80px; }
+  .orb { width: 52px; height: 52px; }
+
+  .memory-list { flex: 0 1 auto; }
+  .table-head, .memory-list li { grid-template-columns: 88px 56px minmax(0, 1fr); }
+  .memory-text { white-space: normal; }
+  .field-grid { grid-template-columns: minmax(0, 1fr); }
+  .field-wide { grid-column: auto; }
+  .data-list-inline { grid-template-columns: minmax(0, 1fr); }
+  .switches { grid-template-columns: minmax(0, 1fr); overflow: visible; }
+  .trace-head-row { display: none; }
+  .trace-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-3); }
+  .trace-row span::before { content: attr(data-label) " "; color: var(--ink-2); }
+  .advanced-row { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
+  .is-booting .card::after { inset: 76px var(--sp-4) var(--sp-4); }
+  .card-actions { gap: var(--sp-2); }
+  .ghost-button, .primary-button { height: 38px; }
+
+  .tabbar {
     display: flex;
-    align-items: center;
-    gap: 10px;
-    height: 40px;
-    padding: 0 12px;
-    border: 0;
-    border-radius: 8px;
-    background: transparent;
-    color: var(--text-2);
-    font: inherit;
-    font-size: 14px;
-    line-height: 20px;
-    text-align: left;
-    white-space: nowrap;
-    overflow: hidden;
-    cursor: pointer;
-    transition: background 160ms ease, color 160ms ease;
-  }
-  .rail-item svg { flex: 0 0 20px; width: 20px; height: 20px; }
-  .rail-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
-  .rail-item.active { background: rgba(255, 255, 255, 0.06); color: var(--text); }
-  .rail-item.active::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 8px;
-    bottom: 8px;
-    width: 2px;
-    border-radius: 2px;
-    background: var(--accent);
-  }
-  body.rail-collapsed .rail-item { justify-content: center; padding: 0; }
-  body.rail-collapsed .rail-item span { display: none; }
-
-  /* --- header --- */
-  .topbar { position: static; height: 56px; padding: 0; grid-column: 1 / -1; }
-  .topbar h1 { font-size: 22px; line-height: 28px; }
-  .masthead { display: none; }
-  .tabbar { display: none; }
-  .footer { grid-column: 1 / -1; padding: 0 4px; }
-
-  /* --- desktop dashboard: 12 col x 5 rows --- */
-  .desk {
-    display: grid;
-    grid-column: 1 / -1;
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-    grid-template-rows: 208px 64px 176px minmax(200px, auto) minmax(120px, auto);
-    gap: 12px;
+    position: fixed;
+    left: var(--sp-3);
+    right: var(--sp-3);
+    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
+    z-index: 30;
+    gap: var(--sp-1);
+    padding: var(--sp-2);
+    border-radius: var(--r-card);
+    background: var(--card);
+    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
   }
-  .desk-card {
-    position: relative;
+  .tab-item {
+    flex: 1;
     min-width: 0;
-    padding: 20px;
-    border-radius: 32px;
-    overflow: hidden;
-  }
-  .desk-card-head {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 8px;
-    margin-bottom: 10px;
-  }
-  .desk-card-head h2 { margin: 0; font-size: 15px; line-height: 24px; font-weight: 600; }
-  .desk-status, .desk-seg, .desk-memory, .desk-chart { grid-column: span 6; }
-  .desk-metric, .desk-switch, .desk-tile { grid-column: span 3; }
-  .desk-stat { grid-column: span 4; }
-
-  .desk-status { display: flex; align-items: center; gap: 20px; }
-  .desk-orb { width: 88px; height: 88px; flex: 0 0 88px; display: grid; place-items: center; }
-  .desk-status-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
-  .desk-status-body h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; }
-  .desk-status-body .motivation { margin: 0; color: var(--text-2); font-size: 15px; line-height: 22px; }
-
-  .desk-metric { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
-  .desk-metric-head {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 8px;
-    color: var(--text-2);
-    font-size: 13px;
-    line-height: 18px;
-  }
-  .desk-metric-value { display: flex; align-items: baseline; gap: 10px; }
-  .desk-metric-value strong {
-    font-size: 40px;
-    line-height: 44px;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    font-variant-numeric: tabular-nums;
-  }
-  .desk-metric-value .sub-status { margin-left: auto; color: var(--text-2); font-size: 13px; }
-
-  .desk-seg { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 32px; background: var(--tone); box-shadow: none; }
-  .seg-item {
-    flex: 1 1 0;
-    height: 52px;
-    border: 0;
-    border-radius: 16px;
-    background: transparent;
-    color: var(--text-2);
-    font: inherit;
-    font-size: 14px;
-    cursor: pointer;
-    transition: background 160ms ease, color 160ms ease;
-  }
-  .seg-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
-  .seg-item.active { background: var(--accent); color: #ffffff; }
-
-  .desk-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-  .desk-switch-label { font-size: 15px; line-height: 24px; font-weight: 600; }
-  .desk-switch-control { display: flex; align-items: center; gap: 8px; }
-  .desk-switch-control input { width: 22px; height: 22px; accent-color: var(--accent); }
-  .desk-switch-state { color: var(--text-3); font-size: 12px; line-height: 16px; }
-
-  .desk-tile { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
-  .desk-tile-head {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    color: var(--text-2);
-    font-size: 12px;
+    gap: 2px;
+    padding: var(--sp-2) 0;
+    border-radius: var(--r-inner);
+    color: var(--ink-2);
+    font-size: var(--fs-xs);
     line-height: 16px;
+    transition: box-shadow var(--t), color var(--t);
   }
-  .desk-tile strong {
-    font-size: 22px;
-    line-height: 28px;
-    font-weight: 600;
-    letter-spacing: -0.01em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .desk-tile-note { color: var(--text-3); font-size: 12px; line-height: 16px; }
-  .desk-tile-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: 13px; line-height: 18px; }
-  .desk-tile-row b { color: var(--text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
-  .desk-chevron { color: var(--text-3); font-size: 14px; }
-  .desk-copy {
-    height: 24px;
-    padding: 0 10px;
-    border: 0;
-    border-radius: 8px;
-    background: var(--block);
-    color: var(--text-2);
-    font: inherit;
-    font-size: 12px;
-    cursor: pointer;
-  }
+  .tab-item .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+  .tab-item.active { color: var(--accent-ink); background: var(--card); box-shadow: var(--sink-sm); }
+  .tab-item.active .ico { color: var(--accent); }
+  .layout-toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
+}
 
-  .desk-memory { display: flex; flex-direction: column; }
-  .desk-memory .memory-list { max-height: none; }
-  .desk-chart { display: flex; flex-direction: column; }
-  #deskChart { width: 100%; height: 100%; min-height: 110px; display: block; }
+@media (max-width: 359px) {
+  .tab-item span { display: none; }
+  .tab-item { padding: var(--sp-2) 0; }
+}
 
-  .desk-stat { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
-  .desk-stat-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 8px;
-    color: var(--text-2);
-    font-size: 13px;
-    line-height: 18px;
-  }
-  .desk-stat-row b { color: var(--text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
-
-  /* --- tab switching on desktop --- */
-  .panel.tab-dashboard #cards { display: none; }
-  .panel:not(.tab-dashboard) .desk { display: none; }
-  .panel:not(.tab-dashboard) #cards {
-    display: grid;
-    grid-column: 1 / -1;
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-    gap: 12px;
-  }
-  .panel:not(.tab-dashboard) #cards { align-content: start; }
-  .panel:not(.tab-dashboard) #cards > * { grid-column: span 6; }
-  .panel:not(.tab-dashboard) #cards > [data-card-id="metrics"] { grid-column: span 8; }
-  .panel:not(.tab-dashboard) #cards > [data-card-id="trace"] { grid-column: span 8; }
-  .panel:not(.tab-dashboard) #cards > [data-card-id="runtime"] { grid-column: span 4; }
-  .panel:not(.tab-dashboard) #cards > [data-card-id="model"] { grid-column: span 12; }
-  .panel:not(.tab-dashboard) #cards > .channels-wrap { grid-column: span 12; }
-  .panel:not(.tab-dashboard) .channels-wrap .channel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-  .panel:not(.tab-dashboard) .add-cards { grid-column: 1 / -1; }
-  .layout-editing #cards { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
-  .layout-editing #cards > * { grid-column: span 6; }
-
-  /* --- desktop edit mode (hide chips on desk cards) --- */
-  .desk-hide {
-    display: none;
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    z-index: 3;
-    place-items: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    border: 0;
-    border-radius: 50%;
-    background: var(--danger);
-    color: #ffffff;
-    font-size: 18px;
-    line-height: 1;
-    cursor: pointer;
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: .001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: .001ms !important;
   }
-  .layout-editing .desk-hide { display: grid; }
-  .desk-card.is-desk-hidden { display: none !important; }
 }