cortico 0.1.0

package/src/web/public/styles.css

@@ -0,0 +1,1715 @@
+@import "tailwindcss";
+
+@theme inline {
+  --color-background: var(--background);
+  --color-surface: var(--surface);
+  --color-surface-hover: var(--surface-hover);
+  --color-hover: var(--hover);
+  --color-foreground: var(--foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-ring: var(--accent);
+  --color-danger: var(--danger);
+}
+
+:root {
+    /* 无脚本时的回退值；运行时由统一方案注册表写入。 */
+    --paper:   #f4f5f4;
+    --paper-2: #ecedec;
+    --sheet:   #fbfbfb;
+    --sheet-2: #f2f3f2;
+    --sheet-3: #e8e9e8;
+    --ink:     #1b1a1e;
+    --ink-soft:#5c5c60;
+    --ink-dim: #8b8b8f;
+    --line:    #e3e4e3;
+    --line-2:  #d0d2d0;
+    --line-strong: #aeb0ae;
+    --accent:  #00a870;
+    --accent-2:#54b494;
+    --ink-blue:#238268;
+    --ok:  #19815e;
+    --warn:#96743b;
+    --danger:#b45950;
+    --violet:#25765e;
+    --on-accent:#082a1e;
+    --agent-surface:#f4f5f4;
+    --world-bg:#f0f1f0;
+    --world-ink:#4a4a4e;
+    --bubble-bg:#e6e9e7;
+    --bubble-ink:#1f2221;
+    --tool-result:#087452;
+    --chart-hit:#19815e;
+    --chart-miss:#96743b;
+    --chart-output:#00a870;
+    --chart-1:#00a870;
+    --chart-2:#54b494;
+    --chart-3:#348f86;
+    --chart-4:#72967f;
+    --chart-5:#b59564;
+    --chart-6:#9b8071;
+    --chart-7:#4a8f9a;
+    --chart-8:#889460;
+    --shadow-soft: color-mix(in srgb, var(--ink) 7%, transparent);
+    --shadow-strong: color-mix(in srgb, var(--ink) 20%, transparent);
+    --overlay: color-mix(in srgb, var(--ink) 44%, transparent);
+    --sans: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
+    --mono: ui-monospace, "Cascadia Mono", "Sarasa Mono SC", Consolas, "PingFang SC", "Microsoft YaHei", monospace;
+    --background: var(--paper);
+    --surface: var(--sheet);
+    --surface-hover: var(--sheet-2);
+    --hover: color-mix(in srgb, var(--ink) 3.5%, transparent);
+    --foreground: var(--ink);
+    --muted-foreground: var(--ink-soft);
+    --border: var(--line);
+    --border-strong: var(--line-2);
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-composer: 17px;
+    --sidebar-width: 280px;
+    --conversation-width: 760px;
+    --content-width: 1120px;
+    --page-gutter: clamp(20px, 3.1vw, 44px);
+    --section-gap: 28px;
+    --text-detail: 13px;
+  }
+  * { box-sizing: border-box; }
+  html, body { height: 100%; }
+  body {
+    margin: 0; background: var(--paper); color: var(--ink);
+    font: 15px/1.72 var(--sans);
+    display: flex; overflow: hidden;
+    -webkit-font-smoothing: antialiased;
+  }
+  ::-webkit-scrollbar { width: 10px; height: 10px; }
+  ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: padding-box; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  .hidden { display: none !important; }
+  a { color: var(--ink-blue); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  button { font-family: inherit; }
+
+
+  #rail {
+    width: 262px; flex: none; background: var(--paper-2);
+    border-right: 1px solid var(--line-2);
+    display: flex; flex-direction: column; min-height: 0;
+  }
+  .brand { padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
+  /* 字标是一整块笔画,颜色由 currentColor 取,所以只需要给高度。 */
+  .brand .wordmark { display: block; width: auto; height: 30px; color: var(--ink); }
+  /* 两只眼睛与两个字母 o 跟主题的强调色走,横幅上它们本来就是另一个颜色。 */
+  .wordmark .accent, .brandmark .accent { stroke: var(--accent); }
+
+  nav.stack { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 24px; }
+  .stacklabel { font-size: 10.5px; letter-spacing: .18em; color: var(--ink-dim); margin: 14px 8px 7px; text-transform: uppercase; }
+
+  .navitem {
+    position: relative; display: flex; align-items: center; gap: 10px;
+    padding: 9px 12px 9px 14px; margin: 3px 0; cursor: pointer;
+    border: 1px solid transparent; border-radius: 8px 9px 8px 9px;
+    color: var(--ink-soft); font-size: 14.5px; user-select: none;
+    transition: background .12s, color .12s, border-color .12s;
+  }
+  .navitem .tag { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--line-2); transition: background .12s, top .12s, bottom .12s; }
+
+  .navitem .lbl {
+    font-size: 16px; letter-spacing: .3px;
+    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .navitem:hover { background: var(--sheet-2); color: var(--ink); }
+  .navitem.active { background: var(--sheet); color: var(--ink); border-color: var(--line); }
+  .navitem.active .tag { background: var(--accent); top: 4px; bottom: 4px; }
+  .navitem.active .lbl { color: var(--accent); }
+  /* 状态灯。灰(本体色)=关着,三色是 online/loading/error。 */
+  .navdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim); flex: none; }
+  .navdot[hidden] { display: none; }
+  /* 一排灯(一条链路一颗,至多七颗)。导航行里推到行尾,别处贴着自己那行文字。 */
+  .navlamps { display: inline-flex; align-items: center; gap: 4px; flex: none; }
+  .navlamps[hidden] { display: none; }
+  .navitem > .navlamps { margin-left: auto; padding-left: 8px; }
+  .navdot.on { background: var(--ok); }
+  .navdot.warn { background: var(--warn); }
+  .navdot.bad { background: var(--danger); }
+
+  .railfoot { padding: 10px 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-dim); display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
+  .rail-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
+  .rail-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--ink); }
+
+
+  .pagehead {
+    flex: none; padding: 18px 30px 0; }
+  .pagetitle { font: 600 22px/1.3 var(--sans); color: var(--ink); margin: 5px 0 2px; letter-spacing: .5px; }
+  .pagetitle .navlamps { margin-left: 10px; vertical-align: middle; }
+  .pagedesc { font-size: 13px; color: var(--ink-soft); max-width: 68ch; }
+
+  .scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 30px 40px; }
+  .measure { max-width: 1080px; }
+
+
+  .subtabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 12px 30px 0; flex: none; }
+
+
+  .sheet {
+    background: var(--sheet); border: 1px solid var(--line);
+    border-radius: 12px 13px 11px 12px; padding: 18px 20px; margin-bottom: 16px;
+  }
+  .sheet.tabbed { position: relative; }
+  .sheet.tabbed::before {
+    content: ''; position: absolute; left: 22px; top: -1px; width: 46px; height: 6px;
+    background: var(--accent-2); border-radius: 0 0 4px 4px; opacity: .8;
+  }
+  .sheet h3 { font: 600 15.5px/1.3 var(--sans); color: var(--ink); margin: 0 0 3px; letter-spacing: .3px; }
+  .sheet .sh-desc { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 14px; }
+  .sheet h3 .en { font: 10.5px var(--sans); color: var(--ink-dim); margin-left: 8px; letter-spacing: .04em; }
+
+
+  details.sheet.fold { padding: 0; }
+  details.sheet.fold > summary {
+    display: flex; align-items: baseline; gap: 10px; padding: 13px 20px;
+    list-style: none; cursor: pointer; user-select: none;
+  }
+  details.sheet.fold > summary::-webkit-details-marker { display: none; }
+  details.sheet.fold > summary::after { content: '＋'; margin-left: auto; color: var(--ink-dim); font: 13px var(--mono); }
+  details.sheet.fold[open] > summary::after { content: '−'; }
+  details.sheet.fold > summary:hover h3 { color: var(--accent); }
+  details.sheet.fold > summary h3 { margin: 0; }
+  details.sheet.fold .foldnote { margin-left: auto; font: var(--text-detail)/1.4 var(--sans); color: var(--ink-soft); }
+  details.sheet.fold .foldnote.bad { color: var(--danger); }
+  details.sheet.fold > .foldbody { padding: 0 20px 16px; }
+  details.sheet.fold > .foldbody > .sh-desc { margin-top: -2px; }
+
+
+  .statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
+  /* 网格里只剩一句占位时横跨整行，不缩在第一格 */
+  .statgrid > .placeholder { grid-column: 1 / -1; }
+  .stat {
+    background: var(--sheet-2); border: 1px solid var(--line); border-radius: 10px 11px 9px 10px;
+    padding: 12px 14px;
+  }
+  .stat .k { font-size: var(--text-detail); color: var(--ink-soft); letter-spacing: .02em; margin-bottom: 5px; }
+  .stat .v { font: 600 22px/1.15 var(--sans); color: var(--ink); word-break: break-word; }
+  .stat .v small { font: 400 var(--text-detail)/1.4 var(--sans); color: var(--ink-soft); }
+  .stat.accent .v { color: var(--accent); }
+
+  .kvtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
+  .kvtable td { padding: 5px 2px; border-top: 1px solid var(--line); vertical-align: top; }
+  .kvtable tr:first-child td { border-top: none; }
+  .kvtable td:first-child { color: var(--ink-soft); width: 40%; }
+  .kvtable td:last-child { font-family: var(--mono); font-size: 12.5px; word-break: break-word; }
+
+
+  .btn {
+    background: var(--sheet-2); color: var(--ink-soft); border: 1px solid var(--line-2);
+    border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer;
+    transition: color .12s, border-color .12s, background .12s;
+  }
+  .btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--sheet); }
+  .btn:disabled { opacity: .45; cursor: default; }
+  .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
+  .btn.primary:hover { filter: brightness(1.06); color: var(--on-accent); }
+  .btn.warn:hover { color: var(--warn); border-color: var(--warn); }
+  .btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
+  .btn.danger:hover { background: color-mix(in srgb, var(--danger) 9%, transparent); border-color: var(--danger); }
+  .btn.sm { padding: 4px 11px; font-size: var(--text-detail); }
+
+  .msgline { font: var(--text-detail)/1.45 var(--sans); min-height: 16px; color: var(--ok); }
+  .msgline:empty { display: none; }
+  .msgline.bad { color: var(--danger); }
+  .placeholder { color: var(--ink-dim); font-size: 13px; text-align: center; padding: 30px 12px; }
+  .rowbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
+  .rowbar .grow { flex: 1; }
+  label.check { display: inline-flex; gap: 7px; align-items: center; font-size: var(--text-detail); color: var(--ink-soft); cursor: pointer; }
+
+
+  .tablewrap { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--sheet); }
+  table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
+  table.data th { position: sticky; top: 0; background: var(--sheet-3); color: var(--ink-soft); font-weight: 600; text-align: left; padding: 8px 12px; font-size: var(--text-detail); white-space: nowrap; border-bottom: 1px solid var(--line-2); }
+  table.data td { padding: 6px 12px; border-top: 1px solid var(--line); vertical-align: top; }
+  td.mono { font-family: var(--mono); font-size: var(--text-detail); color: var(--ink-soft); white-space: nowrap; }
+  td.txt { word-break: break-word; white-space: pre-wrap; }
+  .lv { font: 600 11.5px var(--mono); }
+  .lv-error { color: var(--danger); } .lv-warn { color: var(--warn); }
+  .lv-info { color: var(--ok); } .lv-debug { color: var(--ink-dim); }
+  .data-extra { color: var(--ink-dim); font: 11.5px var(--mono); word-break: break-all; }
+
+
+  .liveband {
+    flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+    padding: 12px 30px; border-bottom: 1px solid var(--line);
+  }
+  .chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
+  .chip { font: 11.5px/1 var(--sans); color: var(--ink-soft); background: var(--sheet-2); border: 1px solid var(--line); border-radius: 20px; padding: 5px 11px; white-space: nowrap; }
+  .chip b { color: var(--ink); font-weight: 600; }
+  .chip.warnc { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 42%, transparent); }
+  .chip.dreamc { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 42%, transparent); }
+  .sesscards { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
+  .sesscard {
+    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
+    font: 11.5px/1 var(--sans); color: var(--ink-soft); background: var(--sheet-2);
+    border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; white-space: nowrap;
+    transition: border-color .12s, color .12s;
+  }
+  .sesscard:hover { border-color: var(--accent-2); color: var(--ink); }
+  .sesscard.sel { border-color: var(--accent); }
+  .sesscard b { color: var(--ink); font-weight: 600; }
+  .sesscard .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim); flex: none; }
+  .sesscard.running .sdot { background: var(--ok); }
+  .sesscard.running.r-dream .sdot { background: var(--ink-blue); }
+  .sesscard .shr { color: var(--ink-blue); }
+
+
+  .ctxanchor { position: static; display: inline-grid; place-items: center; }
+  .ctxdonut {
+    position: relative; width: 32px; height: 32px; padding: 0; border: none;
+    background: var(--ctx-ring, conic-gradient(var(--line-2) 0 100%));
+    cursor: pointer; display: grid; place-items: center; border-radius: 50%;
+    transition: transform .12s, box-shadow .12s;
+  }
+  .ctxdonut:hover { transform: scale(1.04); }
+  .ctxdonut::before { position: absolute; inset: 4px; content: ''; border-radius: 50%; background: var(--surface); }
+  .ctxdonut .ctxpct { position: relative; z-index: 1; font: 650 10.5px/1 var(--mono); color: var(--ink); letter-spacing: -.25px; }
+  .ctxdonut.warn { box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 24%, transparent); }
+  .ctxdonut.danger { box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 34%, transparent); }
+
+  .ctxpanel {
+    position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 60;
+    width: min(336px, calc(100vw - 28px));
+    background: var(--sheet); border: 1px solid var(--line-2); border-radius: 11px 12px 11px 10px;
+    box-shadow: 0 14px 40px -12px var(--shadow-strong); padding: 14px 15px 13px;
+    font-family: var(--sans); animation: ctxpop .13s ease;
+    max-height: calc(100vh - 108px); overflow-y: auto;
+  }
+  @keyframes ctxpop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
+  .ctxpanel .cx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
+  .ctxpanel .cx-title { font: 600 13.5px/1 var(--sans); color: var(--ink); letter-spacing: .3px; }
+  .ctxpanel .cx-total { font: 12px/1 var(--mono); color: var(--ink-soft); }
+  .ctxpanel .cx-total b { color: var(--ink); }
+  .ctxpanel .cx-sub { font-size: 11px; color: var(--ink-dim); margin-bottom: 10px; }
+  .ctxpanel .cx-bar {
+    display: flex; height: 9px; border-radius: 5px; overflow: hidden; margin-bottom: 12px;
+    background: var(--sheet-3); border: 1px solid var(--line);
+  }
+  .ctxpanel .cx-bar > span { height: 100%; min-width: 1px; }
+  .ctxpanel .cx-grp { font-size: 10px; letter-spacing: .14em; color: var(--ink-dim); text-transform: uppercase; margin: 9px 2px 4px; }
+  .ctxpanel .cx-grp:first-of-type { margin-top: 0; }
+  .ctxpanel .cx-row { display: flex; align-items: center; gap: 8px; padding: 3px 2px; font-size: 12.5px; }
+  .ctxpanel .cx-sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
+  .ctxpanel .cx-lbl { color: var(--ink-soft); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .ctxpanel .cx-lbl .cx-note { color: var(--ink-dim); font-size: 11px; }
+  .ctxpanel .cx-val { font: 12px/1 var(--mono); color: var(--ink); flex: none; }
+  .ctxpanel .cx-pctcol { font: 11px/1 var(--mono); color: var(--ink-dim); flex: none; width: 34px; text-align: right; }
+  .ctxpanel .cx-foot { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-dim); line-height: 1.5; }
+  .ctxpanel .cx-foot b { color: var(--ink-soft); font-weight: 600; }
+
+  .forkbanner {
+    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
+    background: var(--sheet-3); border: 1px solid color-mix(in srgb, var(--violet) 42%, transparent); border-radius: 10px;
+    padding: 9px 15px; margin-bottom: 5px; color: var(--violet); font-size: 12.5px;
+  }
+  .forkbanner b { color: var(--ink); }
+  .forkbanner .meta2 { color: var(--ink-dim); }
+
+  .anim-in { animation: fadein .18s ease-out; }
+  @keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+  .slide-in { animation: slidein .26s ease-out; }
+  @keyframes slidein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
+  .clps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
+  .clps.open { grid-template-rows: 1fr; }
+  .clps > div { overflow: hidden; min-height: 0; }
+  .chev { display: inline-block; transition: transform .2s; color: var(--ink-dim); font-size: 10px; }
+  .chev.up { transform: rotate(180deg); }
+
+  .tcard { background: var(--sheet); border: 1px solid var(--line); border-radius: 12px 13px 11px 12px; padding: 11px 15px; }
+  .badge { display: inline-block; font: 10px/1 var(--mono); letter-spacing: .08em; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink-soft); flex: none; }
+  .meta { color: var(--ink-dim); font: 11px var(--sans); }
+  pre.mono { margin: 0; font: 12.5px/1.62 var(--mono); white-space: pre-wrap; word-break: break-word; color: var(--ink); }
+
+  .syscard .cardhead { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; }
+  .syscard .badge { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
+  .syscard .headtxt { color: var(--ink-soft); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+  .syscard pre.mono { margin-top: 10px; max-height: 420px; overflow-y: auto; color: var(--ink-soft); }
+
+
+  .grp { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; align-items: start; }
+  .grp.r { grid-template-columns: minmax(0, 1fr) 32px; }
+  .gutter { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--sheet-3); border: 1px solid var(--line-2); color: var(--ink-soft); font: 600 13px/1 var(--sans); }
+  .gutter .glyph { font: 600 11.5px/1 var(--mono); letter-spacing: -.02em; }
+  .avatar-image { width: 100%; height: 100%; display: block; object-fit: cover; }
+  .gcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+  .gcol.r { align-items: flex-end; }
+  .ghead { display: flex; align-items: center; gap: 8px; min-height: 32px; min-width: 0; }
+  .ghead .headtxt { color: var(--ink-dim); font-size: 11.5px; }
+  .ordinal { cursor: help; }
+
+  .kv { display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--kv-line); font: 10.5px/1 var(--mono); letter-spacing: .04em; min-width: 0; }
+  .kv-k { color: var(--kv-line); flex: none; }
+  .kv-v { color: var(--ink); overflow-wrap: anywhere; }
+
+  .kv-tool_name { --kv-line: color-mix(in srgb, var(--ink-blue) 60%, transparent); }
+  .kv-call_id { --kv-line: color-mix(in srgb, var(--accent-2) 75%, transparent); }
+  .kv-合成 { --kv-line: color-mix(in srgb, var(--warn) 75%, transparent); }
+  .turn { background: var(--agent-surface); border-left: 3px solid var(--ink-blue); }
+  .turnhead { width: 100%; }
+  /* 一段里没有任何可画的 Item(空 reasoning、空正文):组头后面标个「空」,原始 Item 里仍看得到它们 */
+  .turn.empty .turnstatus:empty { display: inline; }
+  .turn.empty .turnstatus:empty::after { content: '（空）'; color: var(--ink-dim); font: 11px var(--sans); }
+  .turnhead .badge { color: var(--ink-blue); border-color: color-mix(in srgb, var(--ink-blue) 42%, transparent); }
+  .turnhead .grow { flex: 1; }
+  .turnhead .turnstatus:empty { display: none; }
+  .turnhead .turnstatus { color: var(--warn); }
+
+  .turnbody { display: flex; flex-direction: column; gap: 10px; }
+  .turnbody:empty { display: none; }
+  .rawtoggle { cursor: pointer; user-select: none; }
+  .rawtoggle:hover { color: var(--ink-soft); }
+  .turnraw pre.mono { color: var(--ink-dim); font-size: 11.5px; max-height: 420px; overflow-y: auto; border-top: 1px dashed var(--line); padding-top: 8px; }
+  .think { border-left: 3px solid color-mix(in srgb, var(--accent-2) 65%, transparent); padding-left: 12px; }
+  .think-head { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
+  .think-label { color: var(--violet); font-size: 11px; letter-spacing: .1em; }
+  .think-body { margin-top: 6px; color: var(--ink-soft); font-size: 13.5px; font-style: italic; white-space: pre-wrap; word-break: break-word; cursor: pointer; }
+  .think-sub { margin-top: 8px; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--accent-2) 40%, transparent); }
+  .typing::after { content: '▍'; color: var(--violet); animation: blink .9s steps(1) infinite; font-style: normal; }
+  @keyframes blink { 50% { opacity: 0; } }
+
+  .think-enc { color: color-mix(in srgb, var(--violet) 62%, var(--ink-dim)); }
+
+
+  .monolog { align-self: flex-start; max-width: 90%; min-width: 0; background: var(--bubble-bg); color: var(--bubble-ink); border: 1px solid color-mix(in srgb, var(--bubble-ink) 26%, transparent); border-radius: 4px 14px 14px 14px; padding: 8px 14px; }
+  .monolog-label { color: color-mix(in srgb, var(--bubble-ink) 62%, transparent); font: 10.5px var(--sans); letter-spacing: .08em; margin-bottom: 3px; }
+  .monolog.refusal .monolog-label { color: var(--danger); }
+  .monolog-body { color: var(--bubble-ink); white-space: pre-wrap; word-break: break-word; font-size: 14px; }
+
+
+  .toolcall { width: 90%; align-self: flex-start; background: var(--sheet-2); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 8px 12px; }
+  /* 合成调用对:虚线要稀,浏览器的虚线长度随线宽走,所以线加粗、颜色压淡 */
+  .toolcall.evframe { border: 2px dashed color-mix(in srgb, var(--line-2) 75%, transparent); }
+  .toolhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
+  .toolhead .badge { color: var(--ink-blue); border-color: color-mix(in srgb, var(--ink-blue) 42%, transparent); }
+  .toolargs { margin-top: 6px; }
+  .toolargs pre.mono { color: var(--ink-soft); font-size: 12px; }
+  .foldhead { cursor: pointer; color: var(--ink-dim); font-size: 11.5px; user-select: none; }
+  .foldhead:hover { color: var(--ink-soft); }
+  .toolresult { margin-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--accent-2) 40%, transparent); padding-top: 7px; }
+  .toolresult.pending { color: var(--ink-dim); font-size: 11.5px; }
+  .toolresult pre.mono { color: var(--tool-result); font-size: 12px; }
+
+
+  .world { max-width: 90%; min-width: 0; border: 1px solid color-mix(in srgb, var(--world-ink) 36%, transparent); background: var(--world-bg); border-radius: 14px 4px 14px 14px; padding: 8px 14px; }
+  .world-line { font: 12.5px/1.7 var(--mono); color: var(--world-ink); white-space: pre-wrap; word-break: break-word; }
+  .usergrp .badge { color: var(--world-ink); border-color: color-mix(in srgb, var(--world-ink) 42%, transparent); }
+  .usergrp .gutter { color: var(--world-ink); }
+
+  .standalone .cardhead { display: flex; align-items: center; gap: 8px; }
+  .standalone .badge { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 42%, transparent); }
+  .standalone pre.mono { margin-top: 8px; }
+  .divider { text-align: center; color: var(--ink-dim); font-size: 11px; letter-spacing: .2em; display: flex; align-items: center; gap: 12px; }
+  .divider::before, .divider::after { content: ''; flex: 1; border-top: 1px dashed var(--line-2); }
+
+  .divider.sessionhead { color: color-mix(in srgb, var(--ink-dim) 70%, transparent); letter-spacing: .12em; font-size: 10.5px; }
+  .divider.sessionhead::before, .divider.sessionhead::after { border-top-color: var(--line); }
+
+  .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); animation: pulse 1.15s ease-in-out infinite; }
+  @keyframes pulse { 0%,100% { opacity: .3; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.15); } }
+
+  @keyframes toast { 0% { opacity: 0; transform: translate(-50%, 8px); } 12% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -8px); } }
+
+  .toast {
+    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
+    background: var(--sheet); border: 1px solid var(--line-2); color: var(--ink-soft);
+    font-size: 12px; border-radius: 16px; padding: 5px 15px; white-space: nowrap;
+    pointer-events: none; animation: toast 1.9s ease forwards;
+    box-shadow: 0 12px 32px -16px var(--shadow-strong);
+  }
+  .toast.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
+
+
+  .treerow { padding: 4px 10px; cursor: pointer; border-radius: 7px; display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; font-size: 13.5px; color: var(--ink); }
+  .treerow:hover { background: var(--sheet-2); }
+  .treerow.dir { color: var(--accent); }
+  .treerow.sel { background: var(--sheet-3); }
+  .treerow .fsize { color: var(--ink-dim); font: 10.5px var(--mono); }
+
+
+  .toolgroup { margin-bottom: 18px; }
+  .toolgroup .gt { font: 600 13.5px var(--sans); color: var(--accent); margin-bottom: 8px; letter-spacing: .3px; }
+  .schema-groups { margin-top: 18px; }
+  .schema-group { display: grid; gap: 8px; }
+  .tool-schema-card {
+    border: 1px solid var(--line); background: var(--sheet-2); border-radius: 5px 12px 7px 4px;
+    overflow: clip; box-shadow: 2px 3px 0 -1px var(--paper-2);
+    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
+  }
+  .tool-schema-card[open] { background: var(--sheet); border-color: var(--line-strong); box-shadow: 3px 4px 0 -1px var(--paper-2), 0 12px 24px var(--shadow-soft); }
+  .tool-schema-summary {
+    min-height: 54px; display: grid; grid-template-columns: minmax(140px, .5fr) minmax(220px, 1.5fr) auto;
+    gap: 12px; align-items: center; padding: 10px 13px; cursor: pointer; list-style: none;
+  }
+  .tool-schema-summary::-webkit-details-marker { display: none; }
+  .tool-schema-summary::before { content: '＋'; grid-column: 1; grid-row: 1; width: 18px; color: var(--ink-dim); font: 14px var(--mono); }
+  .tool-schema-card[open] > .tool-schema-summary::before { content: '−'; }
+  .tool-schema-title { grid-column: 1; grid-row: 1; padding-left: 24px; color: var(--ink); font: 600 13px var(--mono); }
+  .tool-schema-short {
+    grid-column: 2; color: var(--ink-soft); font-size: 12px; line-height: 1.45;
+    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  }
+  .tool-schema-summary .pill { grid-column: 3; white-space: nowrap; }
+  .tool-schema-body { border-top: 1px solid var(--line); padding: 14px; animation: schemaPaperIn .18s ease-out; }
+  @keyframes schemaPaperIn { from { opacity: 0; transform: translateY(-5px); } }
+  .schema-safety-note {
+    padding: 9px 11px; border-left: 3px solid var(--ink); background: var(--sheet-2);
+    color: var(--ink-soft); font-size: 11.5px; line-height: 1.55;
+  }
+  .schema-root-description { margin-top: 10px; padding: 8px 10px; color: var(--ink-soft); background: var(--sheet-2); font-size: 12px; }
+  .schema-param-wrap { margin-top: 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: 4px 9px 6px 3px; }
+  .schema-param-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 11.5px; }
+  .schema-param-table th {
+    padding: 8px 10px; text-align: left; color: var(--ink-dim); background: var(--sheet-2);
+    border-bottom: 1px solid var(--line); font: 10px var(--mono); letter-spacing: .05em;
+  }
+  .schema-param-table td { padding: 9px 10px; color: var(--ink-soft); border-top: 1px solid var(--line); vertical-align: top; }
+  .schema-param-table tbody tr:first-child td { border-top: 0; }
+  .schema-param-path, .schema-param-type { font-family: var(--mono); color: var(--ink) !important; }
+  .schema-param-required { white-space: nowrap; color: var(--ink-dim) !important; }
+  .schema-param-description { min-width: 220px; line-height: 1.5; }
+  .schema-empty-params { margin-top: 10px; }
+  .schema-raw { margin-top: 12px; border: 1px dashed var(--line-2); background: var(--sheet-2); }
+  .schema-raw > summary { cursor: pointer; padding: 9px 11px; color: var(--ink-soft); font: 11px var(--sans); }
+  .schema-raw-tools { display: flex; justify-content: flex-end; padding: 0 10px 7px; }
+  .schema-raw pre { max-height: 460px; overflow: auto; margin: 0; padding: 13px; border-top: 1px solid var(--line); color: var(--ink); font-size: 11.5px; background: var(--sheet); }
+
+  .pill { font: 10.5px var(--sans); color: var(--ink-soft); background: var(--sheet-3); border: 1px solid var(--line); border-radius: 20px; padding: 3px 9px; }
+  .pill.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 42%, transparent); }
+  /* 关闭/静默：与 .on 对称的写法，取比中性 .pill 更淡的灰——三态里 off 必须一眼
+     能跟"没给 tone 的中性态"分开，否则那个 tone 等于没写。 */
+  .pill.off { color: var(--ink-dim); border-color: color-mix(in srgb, var(--ink-dim) 42%, transparent); }
+
+
+  .iogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
+  .iocard { margin: 0; }
+
+  .iocard-hidden { opacity: .62; }
+
+  .iocard-missing { border-style: dashed; opacity: .78; }
+  .iocard-missing h3 { color: var(--ink-soft); }
+  .iocard-inactive { border-style: dashed; opacity: .85; }
+  .iocard-inactive h3 { color: var(--ink-soft); }
+
+
+  .mountrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
+  .mountrow .mname { width: 6.2em; flex: none; font-size: 13px; color: var(--ink); }
+  .mountrow .mstate { font: 12px var(--sans); white-space: nowrap; }
+  .mountrow .mdetail { flex: 1; min-width: 0; font: 11.5px var(--mono); color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .mountrow .macts { display: flex; gap: 6px; flex: none; }
+
+  textarea.field { width: 100%; background: var(--sheet-2); border: 1px solid var(--line-2); color: var(--ink); border-radius: 9px; padding: 9px 12px; font: 13px var(--mono); outline: none; resize: vertical; min-height: 58px; }
+  textarea.field:focus { border-color: var(--accent); }
+  input.field, select.field { background: var(--sheet-2); border: 1px solid var(--line-2); color: var(--ink); border-radius: 8px; padding: 6px 10px; font: var(--text-detail)/1.4 var(--mono); outline: none; }
+  input.field:focus, select.field:focus { border-color: var(--accent); }
+
+
+  .tsection { font-size: 13.5px; font-weight: 600; color: var(--ink-blue); letter-spacing: .02em; margin: 16px 0 2px; padding-bottom: 5px; border-bottom: 1px solid var(--line-strong); display: flex; align-items: baseline; gap: 7px; }
+  .tsection:first-child { margin-top: 2px; }
+
+  .tsection .ttag { font: 10px var(--sans); font-weight: 400; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; }
+  .tsecdesc { color: var(--ink-soft); font-size: var(--text-detail); line-height: 1.55; margin: 5px 0 2px; }
+  .trow { display: grid; grid-template-columns: 200px 180px 1fr; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
+  .trow .tlabel { font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+  .trow .ttag { font-size: 10px; color: var(--warn); border: 1px solid var(--line-strong); border-radius: 5px; padding: 0 4px; }
+  .trow .tdesc { color: var(--ink-soft); font-size: var(--text-detail); line-height: 1.55; }
+  .trow .tfield { display: flex; align-items: center; gap: 6px; min-width: 0; }
+  .trow .tfield input.field, .trow .tfield select.field { width: 100%; min-width: 0; }
+  .trow .tunit { color: var(--ink-soft); font-size: 12.5px; white-space: nowrap; }
+  .trow .pairfield { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }
+  .trow .pairfield input.field { width: 100%; min-width: 0; }
+  .trow .pairsep { color: var(--ink-dim); }
+  .pathfield { display: grid; gap: 5px; width: 100%; min-width: 0; }
+  .pathfield-controls { display: flex; align-items: center; gap: 6px; min-width: 0; }
+  .pathfield-controls input.field { flex: 1; width: auto; min-width: 0; }
+  .btn.pathpick { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
+  .pathpick .icon { width: 16px; height: 16px; flex: none; }
+  .pathfield-meta { display: flex; align-items: center; gap: 6px 10px; min-width: 0; flex-wrap: wrap; font-size: 11px; line-height: 1.4; }
+  .pathrecommended { min-width: 0; color: var(--ink-dim); overflow-wrap: anywhere; }
+  .pathdownload { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-blue); white-space: nowrap; }
+  .pathdownload .icon { width: 13px; height: 13px; }
+
+
+  .strow { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 9px; background: var(--sheet-2); }
+  .strow .stinfo { flex: 1; min-width: 0; }
+  .strow .stlabel { font-size: 13.5px; color: var(--ink); }
+  .strow .stloc { color: var(--ink-soft); font: 12.5px/1.4 var(--mono); margin-left: 8px; }
+  .strow .stnote { color: var(--ink-soft); font-size: var(--text-detail); line-height: 1.5; margin-top: 2px; }
+  .strow .ststat { font: var(--text-detail)/1.4 var(--mono); color: var(--ink-blue); white-space: nowrap; }
+
+
+  .modal { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 30; animation: fadein .14s ease-out; }
+  .modalcard { background: var(--paper); border: 1px solid var(--line-strong); border-radius: 14px; width: min(880px, 92vw); max-height: min(84vh, 920px); display: flex; flex-direction: column; box-shadow: 0 20px 50px -24px var(--shadow-strong); }
+  .modalhead { flex: none; display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
+  .modaltitle { font: 600 15px var(--sans); color: var(--ink); flex: 1; }
+  .modalbody { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }
+
+
+  .segwrap { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
+  .seg { background: var(--sheet); border: none; border-right: 1px solid var(--line-2); color: var(--ink-soft); font: 12.5px var(--sans); padding: 5px 12px; cursor: pointer; }
+  .seg:last-child { border-right: none; }
+  .seg.active { background: var(--accent); color: var(--on-accent); }
+  .seg:hover:not(.active) { background: var(--sheet-3); }
+
+  .usagebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
+  .urange { display: inline-flex; align-items: center; gap: 6px; font: var(--text-detail)/1.4 var(--sans); color: var(--ink-soft); }
+  .urange.hidden { display: none; }
+  .ulabel { font: var(--text-detail)/1.4 var(--sans); color: var(--ink-soft); }
+  .ubkhint, .urangehint { font: var(--text-detail)/1.4 var(--sans); color: var(--ink-soft); }
+  .segwrap.sm .seg { padding: 4px 10px; font-size: var(--text-detail); }
+  .usagecards { margin-bottom: 16px; }
+
+
+  #u-comp .compbar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); background: var(--sheet); }
+  #u-comp .compseg { min-width: 2px; }
+  #u-comp .compleg { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
+  #u-comp .compitem { display: inline-flex; align-items: center; gap: 6px; font: var(--text-detail)/1.4 var(--sans); color: var(--ink-soft); }
+  #u-comp .compsw { width: 11px; height: 11px; border-radius: 3px; }
+  #u-comp .compamt { font: var(--text-detail)/1.4 var(--mono); color: var(--ink); }
+  #u-comp .comppct { font: var(--text-detail)/1.4 var(--mono); color: var(--ink-soft); }
+
+
+  .chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 2px; }
+  .chart-legend:empty { display: none; }
+  .legitem { display: inline-flex; align-items: center; gap: 6px; font: var(--text-detail)/1.4 var(--sans); color: var(--ink-soft); }
+  .legsw { width: 11px; height: 11px; border-radius: 3px; }
+  #usagechart, #usagecalls { margin-top: 10px; overflow-x: auto; }
+  #usagechart svg, #usagecalls svg { display: block; }
+  .barg .bseg { transition: opacity .1s; }
+  .barg:hover .bseg { opacity: .82; }
+  .barg .bhit { cursor: crosshair; }
+  .bseg.seghi { stroke: var(--ink); stroke-width: 1.4; }
+  #usagechart .axis, #usagecalls .axis { stroke: var(--line-2); stroke-width: 1; }
+  #usagechart .glabel, #usagechart .vlabel, #usagecalls .glabel, #usagecalls .vlabel { fill: var(--ink-soft); font: var(--text-detail) var(--mono); }
+  .usagetables { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
+
+
+  .u-tip { position: fixed; z-index: 90; pointer-events: none; box-sizing: border-box; width: max-content; max-width: min(268px, calc(100vw - 16px)); background: var(--sheet); border: 1px solid var(--line-strong); border-radius: 9px; padding: 9px 11px; box-shadow: 0 6px 22px var(--shadow-soft); font: 12px var(--sans); color: var(--ink); overflow-wrap: anywhere; }
+  .u-tip.hidden { display: none; }
+  .u-tip .tt-h { font: 600 12.5px var(--mono); color: var(--accent); margin-bottom: 3px; }
+  .u-tip .tt-tot { font: 12px var(--mono); color: var(--ink-soft); margin-bottom: 4px; }
+  .u-tip .tt-row { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: start; gap: 6px; margin: 2px 0; }
+  .u-tip .tt-sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
+  .u-tip .tt-l { min-width: 0; overflow-wrap: anywhere; }
+  .u-tip .tt-v { white-space: nowrap; text-align: right; font: 12px var(--mono); color: var(--ink); padding-left: 6px; }
+  .u-tip .tt-extra { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); font: 11px var(--mono); color: var(--ink-dim); }
+  .u-tip .tt-cur { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: start; gap: 6px; font: 600 12px var(--sans); color: var(--accent); margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px dashed var(--line-2); }
+  .u-tip .tt-row.cur { background: var(--sheet-3); border-radius: 4px; margin: 2px -4px; padding: 1px 4px; font-weight: 600; color: var(--ink); }
+
+  .histrow { padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: var(--sheet-2); cursor: pointer; }
+  .histrow:hover { border-color: var(--line-strong); }
+  .histrow .hh { display: flex; gap: 10px; align-items: baseline; }
+  .histrow .hhash { font: 11px var(--mono); color: var(--accent); }
+  .histrow .hauthor { font-size: 12px; color: var(--violet); }
+  .histrow .hdate { font: 10.5px var(--mono); color: var(--ink-dim); margin-left: auto; }
+  .histrow .hmsg { font-size: 12.5px; color: var(--ink); margin-top: 2px; }
+  .diffbox { font: 11.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 6px 0 12px; max-height: 420px; overflow: auto; }
+  .diffbox .di-add { color: var(--ok); }
+  .diffbox .di-del { color: var(--danger); }
+  .diffbox .di-hunk { color: var(--ink-blue); }
+
+
+  body { background: var(--background); }
+  #rail { background: var(--paper-2); border-right: 0; box-shadow: none; }
+  .brand { padding-top: 22px; border-bottom: 0; }
+  .navitem { min-height: 40px; transition: background-color .15s ease, color .15s ease; }
+  .navitem:hover { text-decoration: none; }
+  .navitem.active { box-shadow: none; }
+
+  .btn {
+    min-height: 36px;
+    transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
+  }
+  .btn.primary, .seg.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+  input.field, select.field, textarea.field { min-height: 40px; }
+  input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, [tabindex]:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px;
+  }
+  .modal { background: var(--overlay); animation: modalFade .15s ease-out; }
+  .modalcard { background: var(--sheet); animation: modalPaperIn .16s ease-out; }
+  @keyframes modalFade { from { opacity: 0; } }
+  @keyframes modalPaperIn { from { opacity: 0; transform: translateY(6px); } }
+
+
+  .treerow { min-height: 34px; align-items: center; border-radius: 3px 8px 4px 2px; transition: background .14s, transform .14s; }
+  .treerow:hover { transform: translateX(2px); }
+  .treerow.sel { background: var(--accent); color: var(--on-accent); }
+  .treerow.sel .fsize { color: color-mix(in srgb, var(--on-accent) 72%, transparent); }
+
+
+  .theme-current {
+    flex: none; padding: 6px 10px; border: 1px solid var(--line); background: var(--sheet-2);
+    color: var(--ink-soft); font: 11px var(--sans); border-radius: 4px 9px 6px 3px;
+  }
+  .theme-schemes {
+    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
+  }
+  .theme-scheme {
+    min-width: 0; padding: 11px 12px; text-align: left; cursor: pointer; color: var(--ink);
+    background: var(--sheet-2); border: 1px solid var(--line); border-radius: 5px 12px 7px 4px;
+    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
+  }
+  .theme-scheme:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 2px 3px 0 var(--line); }
+  .theme-scheme.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent-2); background: var(--sheet); }
+  .theme-scheme-head { display: flex; align-items: center; gap: 8px; font: 600 13px var(--sans); }
+  .theme-scheme-kind { margin-left: auto; color: var(--ink-dim); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
+  .theme-scheme-note { min-height: 32px; margin: 4px 0 8px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
+  .theme-swatches { display: flex; height: 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; }
+  .theme-swatches span { flex: 1; }
+  .theme-workbench { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .75fr); gap: 16px; align-items: start; }
+  .theme-palette { display: flex; flex-direction: column; gap: 13px; }
+  .theme-color-group { border-top: 1px solid var(--line); padding-top: 9px; }
+  .theme-color-group:first-child { border-top: 0; padding-top: 0; }
+  .theme-color-group h4 { margin: 0 0 7px; color: var(--ink-soft); font: 600 11px var(--sans); letter-spacing: .08em; }
+  .theme-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 7px; }
+  .theme-color {
+    display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto;
+    column-gap: 8px; align-items: center; padding: 6px 7px; background: var(--sheet-2);
+    border: 1px solid var(--line); border-radius: 4px 8px 5px 3px;
+  }
+  .theme-color input[type="color"] {
+    grid-row: 1 / 3; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-2);
+    background: transparent; border-radius: 5px; cursor: pointer;
+  }
+  .theme-color-label { min-width: 0; color: var(--ink-soft); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .theme-color input[type="text"] {
+    width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink);
+    outline: none; font: 11px var(--mono); text-transform: uppercase;
+  }
+  .theme-color.invalid { border-color: var(--danger); }
+  .theme-actions { justify-content: flex-end; }
+  .theme-preview-sheet { position: sticky; top: 0; }
+  .theme-specimen { display: flex; flex-direction: column; gap: 11px; }
+  .theme-specimen .tcard { margin: 0; }
+  .theme-chart-preview {
+    height: 116px; display: flex; align-items: flex-end; gap: 8px; padding: 14px 12px 10px;
+    background: var(--sheet-2); border: 1px solid var(--line); border-radius: 4px 10px 6px 3px;
+  }
+  .theme-chart-preview span { flex: 1; min-width: 12px; border-radius: 3px 3px 1px 1px; transition: height .2s ease, background .2s ease; }
+
+  @media (max-width: 720px) {
+    body { display: block; overflow: auto; }
+    #rail { width: 100%; height: auto; position: sticky; top: 0; z-index: 100; border-right: 0; border-bottom: 1px solid var(--line); }
+    .brand { display: none; }
+    nav.stack { display: flex; gap: 5px; overflow-x: auto; padding: 8px; }
+    .stacklabel { display: none; }
+    .navitem { flex: none; padding: 7px 11px; margin: 0; min-height: 38px; }
+    .navitem .tag { display: none; }
+    .railfoot { display: none; }
+    .pagehead { padding-top: 14px; }
+    .pagedesc { max-width: none; }
+    .modalcard { width: 96vw; max-height: 92dvh; }
+    .theme-workbench { grid-template-columns: 1fr; }
+    .theme-preview-sheet { position: static; }
+    .theme-color-grid { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
+  }
+
+  @media (max-width: 900px) {
+    .usagetables { grid-template-columns: 1fr; }
+    .theme-workbench { grid-template-columns: 1fr; }
+    .theme-preview-sheet { position: static; }
+    #rail { width: 210px; }
+    .scroll, .pagehead, .subtabs, .liveband { padding-left: 16px; padding-right: 16px; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
+  }
+
+
+
+
+  .fieldrow { display: block; margin: 14px 0 0; }
+  .fieldrow .fieldlabel { display: block; font-size: 10.5px; letter-spacing: .18em; color: var(--ink-dim); text-transform: uppercase; margin-bottom: 7px; }
+  .fieldrow > input.field, .fieldrow > textarea.field { width: 100%; }
+
+
+  .modal.busy { cursor: progress; }
+  .busytext { font-size: 13px; color: var(--ink-soft); white-space: pre-wrap; }
+
+
+
+
+  .logview { border: 1px solid var(--line); border-radius: 11px; background: var(--sheet); overflow: auto; padding: 4px 0; }
+  .logline { font: 12px/1.58 var(--mono); color: var(--ink); padding: 2px 12px; white-space: pre-wrap; word-break: break-word; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
+  .logview > .logline:first-child { border-top: none; }
+  .logline.dim  { color: var(--ink-dim); }
+  .logline.warn { color: var(--warn); }
+  .logline.bad  { color: var(--danger); background: color-mix(in srgb, var(--danger) 5%, transparent); }
+
+
+  .attachstrip { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; font: 12px var(--sans); }
+  .attachcell {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 112px; height: 84px; padding: 0; overflow: hidden;
+    border: 1px solid var(--line); border-radius: 9px; background: var(--paper-2);
+    color: var(--ink-dim); cursor: zoom-in;
+  }
+  .attachcell:disabled { cursor: default; }
+  .attachcell.missing { font-size: 11px; }
+  .attachcell img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .imgzoom { display: block; max-width: 100%; max-height: min(76vh, 860px); margin: 0 auto; border-radius: 8px; }
+
+
+  .progress { margin: 12px 0 0; }
+  .progresshead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
+  .progresslabel { font-size: 11.5px; color: var(--ink-dim); letter-spacing: .04em; }
+  .progressnum { margin-left: auto; font: 11.5px/1 var(--mono); color: var(--ink-soft); }
+  .progresstrack { height: 6px; border-radius: 20px; background: var(--sheet-3); border: 1px solid var(--line); overflow: hidden; }
+  .progressfill { height: 100%; background: var(--accent); transition: width .18s ease; }
+  .progress.warnc .progressfill { background: var(--warn); }
+  .progress.dreamc .progressfill { background: var(--violet); }
+
+
+
+
+  .liveview, .coreview { flex: 1; min-height: 0; height: 100%; display: flex; flex-direction: column; }
+  .liveview { position: relative; }
+
+
+  .tlwrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+  .tlscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 10px; }
+  .tlinner { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 13px; }
+  .tlthink { flex: none; display: flex; align-items: center; gap: 9px; color: var(--violet); font-size: 12.5px; padding: 6px 24px; max-width: 880px; margin: 0 auto; width: 100%; }
+  .tljump { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 4; }
+
+
+  #kernel-root { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+  #kernel-root > div { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+  #kernel-root > div:empty { flex: none; display: none; }
+
+
+  #boot-note { margin: auto; text-align: center; color: var(--ink-dim); }
+  #boot-note .boot-hint { margin-top: 10px; font-size: 12.5px; }
+  #boot-note code { font-family: var(--mono); }
+
+
+  body {
+    background: var(--background);
+    color: var(--foreground);
+    font: 15px/1.62 var(--sans);
+  }
+
+  #rail {
+    width: var(--sidebar-width);
+    background: var(--paper-2);
+    border: 0;
+    box-shadow: none;
+  }
+  .brand { padding: 22px 18px 10px; border: 0; }
+  .brand .wordmark { height: 26px; color: var(--foreground); }
+  nav.stack { padding: 16px 10px 20px; }
+  .navgroup { display: flex; flex-direction: column; gap: 1px; }
+  .navgroup + .navgroup {
+    margin-top: 14px;
+    padding-top: 14px;
+    border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
+  }
+  .stacklabel {
+    margin: 0 10px 7px;
+    color: var(--muted-foreground);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: .07em;
+  }
+  .navitem {
+    min-height: 36px;
+    margin: 0;
+    padding: 7px 10px;
+    border: 0;
+    border-radius: var(--radius-md);
+    color: var(--muted-foreground);
+    gap: 9px;
+  }
+  .navicon { width: 16px; height: 16px; flex: none; color: color-mix(in srgb, currentColor 82%, transparent); }
+  .navitem .lbl { font: 450 14px/1.35 var(--sans); letter-spacing: 0; }
+  .navitem:hover { background: var(--hover); color: var(--foreground); }
+  .navitem:focus-visible,
+  .rail-action:focus-visible,
+  .rail-avatar:focus-visible,
+  .settings-jump:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
+    outline-offset: 1px;
+  }
+  .navitem.active { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--foreground); }
+  .navitem.active .navicon { color: var(--accent); }
+  .navitem.active .lbl { color: inherit; font-weight: 550; }
+
+  .navgroup-provider .navitem { min-height: 36px; padding-block: 6px; }
+  .navgroup-provider .navitem .lbl { font-size: 13.5px; font-weight: 500; }
+  .navgroup-primary .navitem {
+    color: var(--foreground);
+    font-weight: 520;
+  }
+  .navgroup-world-tree {
+    position: relative;
+    gap: 1px;
+  }
+  .navgroup-world-tree > .navitem {
+    color: var(--foreground);
+    font-weight: 520;
+  }
+  .navmodule-list {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    margin: 1px 0 0 18px;
+    padding: 3px 0 2px 11px;
+  }
+  .navmodule-list::before {
+    position: absolute;
+    top: 0;
+    bottom: 6px;
+    left: 0;
+    width: 1px;
+    content: '';
+    background: color-mix(in srgb, var(--border) 84%, transparent);
+  }
+  .navmodule-list .navitem {
+    position: relative;
+    min-height: 34px;
+    padding-block: 5px;
+  }
+  .navmodule-list .navitem::before {
+    position: absolute;
+    top: 50%;
+    left: -11px;
+    width: 7px;
+    height: 1px;
+    content: '';
+    background: color-mix(in srgb, var(--border) 84%, transparent);
+  }
+  .navdot { width: 6px; height: 6px; }
+  .railfoot { min-height: 62px; padding: 10px 16px 14px; border: 0; gap: 9px; }
+  .rail-avatar-wrap {
+    display: grid;
+    flex: none;
+    place-items: center;
+    padding: 2px;
+    border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent);
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--surface) 68%, transparent);
+  }
+  .rail-avatar {
+    position: relative;
+    width: 34px;
+    height: 34px;
+    flex: none;
+    overflow: hidden;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: var(--surface);
+    color: var(--foreground);
+    cursor: pointer;
+  }
+  .rail-avatar-image { width: 100%; height: 100%; display: block; object-fit: cover; }
+  .rail-avatar-fallback { display: grid; width: 100%; height: 100%; place-items: center; font: 600 14px/1 var(--sans); }
+  .rail-avatar-edit {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    background: color-mix(in srgb, var(--foreground) 52%, transparent);
+    color: var(--surface);
+    opacity: 0;
+    transition: opacity .15s ease;
+  }
+  .rail-avatar-edit .icon { width: 15px; height: 15px; }
+  .rail-avatar:hover .rail-avatar-edit { opacity: 1; }
+  .rail-actions { display: flex; gap: 3px; }
+  .rail-name { color: var(--foreground); }
+  .rail-action {
+    width: 34px;
+    height: 34px;
+    display: grid;
+    place-items: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--muted-foreground);
+    cursor: pointer;
+    transition: background-color .15s ease, color .15s ease;
+  }
+  .rail-action:hover { background: var(--hover); color: var(--foreground); }
+
+  .rail-shutdown:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--danger) 12%, transparent);
+    color: var(--danger);
+  }
+  .rail-action.active { background: color-mix(in srgb, var(--foreground) 6%, transparent); color: var(--foreground); }
+  .rail-action:disabled { opacity: .35; cursor: default; }
+  .rail-action .icon { width: 17px; height: 17px; }
+  .rail-run:not(.paused) { color: var(--accent); }
+  .visually-hidden {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    white-space: nowrap !important;
+  }
+
+  #kernel-root {
+    margin: 0;
+    overflow: hidden;
+    background: transparent;
+    border-radius: 0;
+  }
+  #kernel-root > div { overflow: hidden; }
+  .featureslot,
+  .panelslot {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    container: console-content / inline-size;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 30px var(--page-gutter) 56px;
+    scrollbar-gutter: stable;
+  }
+  .providerchrome {
+    flex: none;
+    min-width: 0;
+    padding: 30px var(--page-gutter) 0;
+  }
+  .panelslot { padding-top: 8px; }
+  .featureslot > :not(.viewport-overlay),
+  .providerchrome > *,
+  .panelslot > :not(.viewport-overlay) {
+    flex: none;
+    width: 100%;
+    max-width: var(--content-width);
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .featureslot-live,
+  .featureslot-core {
+    overflow: hidden;
+    padding: 0;
+  }
+  .coreview .measure {
+    width: min(100%, var(--conversation-width));
+    margin-right: auto;
+    margin-left: 0;
+  }
+  .featureslot-live > *,
+  .featureslot-core > * {
+    flex: 1;
+    min-height: 0;
+    max-width: none;
+  }
+  .pagehead {
+    width: 100%;
+    max-width: calc(var(--content-width) + var(--page-gutter) + var(--page-gutter));
+    margin: 0 auto;
+    padding: 30px var(--page-gutter) 0;
+  }
+  .featureintro { flex: none; }
+  .featureintro .pagetitle { margin: 0; }
+  .featureintro .pagedesc { max-width: 64ch; margin: 6px 0 0; }
+  .providerintro .rowbar { margin-top: 14px; }
+  .providerintro .msgline { margin-top: 10px; }
+  .pagetitle { margin-top: 7px; font: 600 22px/1.3 var(--sans); letter-spacing: -.025em; }
+  .pagedesc { margin-top: 5px; color: var(--muted-foreground); font-size: 13px; line-height: 1.55; }
+  .scroll { padding: 22px var(--page-gutter) 48px; scrollbar-gutter: stable; }
+  .measure { width: min(100%, var(--content-width)); margin-inline: auto; }
+  .subtabs {
+    width: 100%;
+    max-width: calc(var(--content-width) + var(--page-gutter) + var(--page-gutter));
+    margin: 10px auto 0;
+    padding: 0 var(--page-gutter);
+    gap: 2px;
+  }
+  .sheet {
+    margin-block: 0;
+    padding: 22px 0;
+    background: transparent;
+    border: 0;
+    border-top: 1px solid var(--border);
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .sheet:first-child { border-top: 0; }
+  .sheet.tabbed::before { display: none; }
+  .sheet h3 { font: 600 15px/1.4 var(--sans); letter-spacing: -.01em; }
+  .sheet h3 .en { font-size: 11.5px; }
+  .sheet .sh-desc { max-width: 68ch; margin-top: 3px; margin-bottom: 16px; line-height: 1.55; }
+  details.sheet.fold,
+  .iogrid > .sheet {
+    padding: 16px 18px;
+    background: color-mix(in srgb, var(--surface) 70%, transparent);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+  }
+  details.sheet.fold { margin-bottom: 10px; }
+  details.sheet.fold > summary { padding: 0; }
+  details.sheet.fold > .foldbody { padding: 14px 0 0; }
+  .featureslot > :not(.sheet) + .sheet,
+  .featureslot > .sheet + .sheet,
+  .panelslot > :not(.sheet) + .sheet,
+  .panelslot > .sheet + .sheet,
+  .measure > .sheet + .sheet,
+  .measure > div > .sheet + .sheet { margin-top: var(--section-gap); }
+  .featureslot > :where(.iogrid, .theme-workbench, .usagetables) {
+    margin-top: var(--section-gap);
+  }
+  .featureslot > .featureintro + .sheet {
+    margin-top: 24px;
+    padding-top: 0;
+    border-top: 0;
+  }
+  .theme-workbench > .sheet,
+  .usagetables > .sheet {
+    padding-top: 0;
+    border-top: 0;
+  }
+  .usagetables {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--section-gap);
+  }
+  .usagetables > .sheet { min-width: 0; }
+  .sheetbody > .rowbar:last-child,
+  .foldbody > .rowbar:last-child { margin-bottom: 0; }
+  /* 为无自有间距的相邻卡片内容补间距；已有间距的标题、操作行和列表行除外。 */
+  .sheetbody > :not(.sh-desc, .sectionhead, .rowbar) + :where(
+    input.field, select.field, textarea.field,
+    .tablewrap, .logview, .statgrid, .msgline, .rowbar:not(.actionbar)
+  ),
+  .foldbody > :not(.sh-desc, .sectionhead, .rowbar) + :where(
+    input.field, select.field, textarea.field,
+    .tablewrap, .logview, .statgrid, .msgline, .rowbar:not(.actionbar)
+  ) { margin-top: 14px; }
+  .sectionhead {
+    margin: 28px 0 14px;
+    padding-top: 22px;
+    border-top: 1px solid var(--border);
+  }
+  .sheetbody > .sectionhead:first-child,
+  .foldbody > .sectionhead:first-child,
+  .sh-desc + .sectionhead {
+    margin-top: 8px;
+    padding-top: 0;
+    border-top: 0;
+  }
+  .sectionhead h4 {
+    margin: 0;
+    color: var(--foreground);
+    font: 600 13px/1.4 var(--sans);
+    letter-spacing: -.005em;
+  }
+  .sectiondesc {
+    max-width: 68ch;
+    margin-top: 4px;
+    color: var(--muted-foreground);
+    font-size: var(--text-detail);
+    line-height: 1.5;
+  }
+  .actionbar {
+    justify-content: flex-end;
+    margin: 24px 0 0;
+    padding-top: 16px;
+    border-top: 1px solid var(--border);
+  }
+  .actionbar + .sectionhead {
+    padding-top: 0;
+    border-top: 0;
+  }
+  .measure .actionbar { justify-content: flex-start; }
+  .measure .run-actions .grow { flex: 0; }
+  .prompt-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 24px;
+    padding-bottom: 18px;
+    border-bottom: 1px solid var(--border);
+  }
+  .prompt-toolbar .msgline { min-width: 0; overflow-wrap: anywhere; }
+  .featureslot-prompts > .prompt-library,
+  .panelslot > .prompt-library { margin-top: 28px; }
+  .prompt-card textarea.field {
+    width: 100%;
+    min-height: 300px;
+    resize: vertical;
+    padding: 14px 16px;
+    font: 13.5px/1.7 var(--mono);
+  }
+  .prompt-card .actionbar { align-items: center; }
+  .prompt-card .actionbar .grow { flex: 1; }
+  .prompt-state { min-width: 0; flex: 0 1 auto; overflow-wrap: anywhere; }
+  .prompt-warn { color: var(--warn); font-size: 12px; }
+  .prompt-warn:empty { display: none; }
+
+
+  .prompt-vars {
+    margin-top: 12px;
+    padding: 10px 12px;
+    border-left: 3px solid var(--border);
+    background: var(--sheet-2);
+    font-size: 12px;
+  }
+  .prompt-vars > b { display: block; margin-bottom: 8px; color: var(--ink-soft); }
+  .prompt-var + .prompt-var { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
+  .prompt-var-head { display: flex; align-items: center; gap: 8px; }
+  .prompt-var-name { font-family: var(--mono); }
+  .prompt-var-desc { margin: 4px 0; color: var(--ink-soft); }
+  .prompt-var-value {
+    max-height: 120px;
+    overflow: auto;
+    margin: 0;
+    padding: 6px 8px;
+    background: var(--sheet);
+    color: var(--ink-soft);
+    font-size: 11.5px;
+    white-space: pre-wrap;
+  }
+
+  /* 前缀块对应编辑器中的行区间；标签与右栏按块位置定位。 */
+  .prefix-stage { position: relative; display: flex; align-items: flex-start; gap: 0; margin-top: 24px; }
+  .prefix-host { flex: 1; min-width: 0; }
+
+
+  .prefix-grip {
+    flex: 0 0 10px;
+    align-self: stretch;
+    min-height: 40px;
+    cursor: col-resize;
+  }
+  .prefix-grip:hover, .prefix-grip.grip-dragging {
+    background: linear-gradient(var(--border) 0 100%) center / 2px 100% no-repeat;
+  }
+
+  /* CodeMirror 默认颜色使用当前主题变量覆盖。 */
+  .prefix-host .cm-editor { border: 1px solid var(--border); background: var(--sheet); color: var(--ink); }
+  .prefix-host .cm-editor.cm-focused { outline: 0; }
+  .prefix-host .cm-scroller { font: 13px/1.7 var(--mono); }
+  .prefix-host .cm-content { padding: 0; caret-color: var(--accent); }
+  .prefix-host .cm-cursor, .prefix-host .cm-dropCursor {
+    border-left: 2px solid var(--accent);
+  }
+  .prefix-host .cm-selectionBackground,
+  .prefix-host .cm-content ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
+  .prefix-host .cm-gutters {
+    border: 0;
+    background: transparent;
+    color: var(--ink-soft);
+  }
+  .prefix-host .cm-activeLine { background: transparent; }
+
+  /* 块首行预留边界高度，分割线由跨列的 prefix-divider 绘制。 */
+  .cm-block { padding-left: 10px; }
+  .cm-block-persona { background: color-mix(in srgb, var(--accent) 8%, transparent); }
+  .cm-block-world { background: color-mix(in srgb, var(--ok) 10%, transparent); }
+  .cm-block-derived { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-soft); }
+  .cm-block-first { border-top: 2px solid transparent; }
+
+
+  .prefix-dividers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
+  .prefix-divider { position: absolute; right: 0; height: 2px; background: var(--border); }
+  .prefix-divider.tone-persona { background: var(--accent); }
+  .prefix-divider.tone-world { background: var(--ok); }
+
+  /* 保存提示使用行伪元素，避免 contentEditable 节点影响空行退格；不参与选取或指针命中。 */
+  .cm-line[data-save-hint]::after {
+    content: attr(data-save-hint);
+    margin-left: 16px;
+    padding: 0 6px;
+    border-radius: 3px;
+    background: color-mix(in srgb, var(--ink) 8%, transparent);
+    color: var(--ink-dim);
+    font-size: 11px;
+    pointer-events: none;
+  }
+  .cm-line.cm-save-dirty::after { color: var(--accent); }
+  .cm-line.cm-save-saved::after { color: var(--ok); }
+  /* 仅隐藏带提示空行的 br，避免伪元素另起一行；行高由 strut 保持。 */
+  .cm-line[data-save-hint] > br:only-child { display: none; }
+
+  /* hover 与 active 通过行装饰覆盖整块。 */
+  .cm-block-hover { background-image: linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 0 100%); }
+  .cm-block-active {
+    background-image: linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent) 0 100%);
+  }
+
+  /* 块标签使用矩形与固定高度三角形；三角形向内重叠 1px 以覆盖舍入误差。 */
+  .prefix-flags { position: relative; flex: 0 0 158px; }
+  .prefix-flag {
+    position: absolute;
+    left: 0;
+    right: 9px;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 24px;
+    padding: 4px 8px 4px 9px;
+    background: var(--sheet-3);
+    color: var(--ink-soft);
+    transform: translateY(-50%);
+    font-size: 10.5px;
+    line-height: 1.35;
+  }
+  .prefix-flag::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    width: 10px;
+    height: 20px;
+    margin-left: -1px;
+    transform: translateY(-50%);
+    background: inherit;
+    clip-path: polygon(0 0, 100% 50%, 0 100%);
+  }
+
+  .prefix-flag:hover { z-index: 5; }
+  .prefix-flag-text { overflow-wrap: break-word; }
+  .prefix-flag.tone-persona {
+    background: color-mix(in srgb, var(--accent) 26%, var(--sheet));
+    color: var(--accent);
+  }
+  .prefix-flag.tone-world {
+    background: color-mix(in srgb, var(--ok) 26%, var(--sheet));
+    color: var(--ok);
+  }
+  .prefix-flag.flag-readonly { color: var(--ink-dim); }
+
+
+  .prefix-host .cm-lineNumbers .cm-gutterElement {
+    padding: 0 8px 0 10px;
+    color: var(--ink-dim);
+    font-size: 11px;
+  }
+
+
+  .prefix-rail { position: relative; flex: 0 0 190px; }
+  .prefix-railcell {
+    position: absolute;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    padding-top: 4px;
+  }
+  .prefix-railnote { color: var(--ink-dim); font-size: 11px; }
+  .prefix-railwarn { color: var(--warn); font-size: 11px; overflow-wrap: anywhere; }
+  .varchip { max-width: 100%; font-size: 11.5px; overflow-wrap: anywhere; text-align: left; }
+  .varchip-unused { opacity: .5; }
+
+  /*
+   * 浮层通过 right: 100% 向左展开，避免遮挡触发 chip，使再次点击能够关闭。
+   */
+  .varpop {
+    position: absolute;
+    right: 100%;
+    top: 0;
+    z-index: 30;
+    width: 320px;
+    margin-right: 10px;
+    padding: 12px 14px;
+    border: 1px solid var(--border-strong, var(--border));
+    background: var(--sheet);
+    box-shadow: 0 8px 28px rgb(0 0 0 / 28%);
+  }
+  .varpop-name { font-size: 12px; font-weight: 600; }
+  .varpop-desc { margin: 6px 0 10px; color: var(--ink-soft); font-size: 12px; }
+  .varpop-label { color: var(--ink-soft); font-size: 10.5px; letter-spacing: .04em; }
+  .varpop-value {
+    max-height: 200px;
+    overflow: auto;
+    margin: 4px 0 0;
+    padding: 6px 8px;
+    background: var(--sheet-2);
+    font-size: 11.5px;
+    white-space: pre-wrap;
+  }
+  .iogrid { align-items: stretch; gap: 12px; }
+  .iogrid > .sheet { display: flex; min-width: 0; flex-direction: column; position: relative; }
+
+  .iogrid > .sheet > h3 { padding-right: 104px; }
+  .iocorner { position: absolute; top: 10px; right: 12px; display: flex; gap: 2px; }
+  .iobtn {
+    width: 30px;
+    height: 30px;
+    display: grid;
+    place-items: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--muted-foreground);
+    cursor: pointer;
+    transition: background-color .15s ease, color .15s ease;
+  }
+  .iobtn:hover:not(:disabled) { background: var(--hover); color: var(--foreground); }
+  .iobtn:disabled { opacity: .35; cursor: default; }
+  .iobtn .icon { width: 16px; height: 16px; }
+  .iobtn-visible { color: var(--accent); }
+  .iobtn-start { color: var(--accent); }
+
+  .iobtn-stop:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--danger) 12%, transparent);
+    color: var(--danger);
+  }
+  .iogrid > .sheet > .sheetbody { display: flex; flex: 1; min-height: 0; flex-direction: column; }
+  .iogrid .actionbar { margin-top: auto; margin-bottom: 0; }
+
+  .statgrid, .usagecards {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 18px 28px;
+  }
+  .usagecards {
+    margin-bottom: 0;
+  }
+  .usagecontrols {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 24px;
+    padding-bottom: 18px;
+    border-bottom: 1px solid var(--border);
+  }
+  .usagecontrols .usagebar { margin-bottom: 0; }
+  .usagecontrols + .usagecards { margin-top: 24px; }
+  .stat {
+    min-width: 0;
+    min-height: 0;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .stat .v { margin-top: 0; overflow-wrap: anywhere; font-family: var(--sans); font-weight: 600; letter-spacing: -.025em; }
+  .stat .v small {
+    display: block;
+    margin-top: 3px;
+    line-height: 1.35;
+  }
+  .strow {
+    margin: 0;
+    padding: 12px 0;
+    background: transparent;
+    border: 0;
+    border-top: 1px solid var(--border);
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .btn {
+    min-height: 34px;
+    padding: 6px 11px;
+    background: transparent;
+    color: var(--muted-foreground);
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    box-shadow: none;
+  }
+  .btn:hover { background: var(--hover); color: var(--foreground); border-color: transparent; box-shadow: none; }
+  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+  .btn.primary:hover { background: color-mix(in srgb, var(--accent) 90%, var(--ink)); filter: none; }
+  :root[data-theme-scheme="mint"] .btn.primary {
+    background: color-mix(in srgb, var(--accent) 78%, var(--sheet-2));
+    border-color: color-mix(in srgb, var(--accent) 78%, var(--sheet-2));
+  }
+  :root[data-theme-scheme="mint"] .btn.primary:hover {
+    background: color-mix(in srgb, var(--accent) 86%, var(--sheet-2));
+    border-color: color-mix(in srgb, var(--accent) 86%, var(--sheet-2));
+  }
+  .btn.danger { color: var(--danger); border: 0; }
+  .btn.danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }
+
+  input.field, select.field, textarea.field {
+    background: var(--surface);
+    border-color: var(--border);
+    border-radius: var(--radius-md);
+    font-family: var(--sans);
+    font-size: 13px;
+  }
+  input.field:focus, select.field:focus, textarea.field:focus { border-color: var(--border-strong); }
+  .fieldrow .fieldlabel { margin-bottom: 6px; color: var(--muted-foreground); font-size: 11px; letter-spacing: 0; text-transform: none; }
+  .segwrap { gap: 2px; padding: 2px; background: var(--surface-hover); border: 0; border-radius: var(--radius-md); }
+  .seg { border: 0; border-radius: calc(var(--radius-md) - 2px); background: transparent; }
+  .seg.active { background: var(--surface); color: var(--foreground); }
+  .pill, .chip { background: transparent; border-color: var(--border); }
+
+  .tablewrap, .logview {
+    background: color-mix(in srgb, var(--surface) 62%, transparent);
+    border-color: var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: none;
+  }
+  .tablewrap { overflow: auto; }
+  table.data th { background: var(--surface-hover); border-color: var(--border); }
+  table.data td, .logline { border-color: color-mix(in srgb, var(--border) 65%, transparent); }
+  .logview.conversation { padding: 8px 2px; background: transparent; border: 0; }
+  .logview.conversation .logline {
+    padding: 7px 10px;
+    border: 0;
+    color: var(--foreground);
+    font: 14.5px/1.62 var(--sans);
+  }
+  .logview.conversation .logline.dim { color: var(--muted-foreground); }
+
+  .tlscroll { padding: 24px 32px 18px; }
+  .tlinner { max-width: var(--conversation-width); gap: 18px; }
+  .tcard { padding: 2px 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
+  .turn { background: transparent; border: 0; }
+  .gcol { gap: 12px; }
+  .gutter { background: var(--surface-hover); border-color: var(--border); }
+  .turnbody { gap: 12px; }
+  .turnhead .badge { color: var(--muted-foreground); border-color: var(--border); }
+  .turnraw pre.mono { border-color: var(--border); }
+  .syscard, .standalone {
+    padding: 10px 12px;
+    background: color-mix(in srgb, var(--surface-hover) 72%, transparent);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+  }
+  .toolcall {
+    padding: 10px 12px;
+    background: color-mix(in srgb, var(--surface-hover) 72%, transparent);
+    border: 1px solid var(--border);
+    border-radius: 4px 15px 15px 15px;
+  }
+  .toolcall.evframe { border: 2px dashed color-mix(in srgb, var(--border-strong) 70%, transparent); }
+  .world { padding: 10px 14px; border: 0; border-radius: 15px 4px 15px 15px; }
+  .monolog { border: 0; border-radius: 4px 15px 15px 15px; }
+  .liveband {
+    width: 100%;
+    max-width: calc(var(--content-width) + var(--page-gutter) + var(--page-gutter));
+    margin-inline: auto;
+    padding: 12px var(--page-gutter) 10px;
+    border-color: var(--border);
+    align-items: stretch;
+    flex-direction: column;
+    gap: 7px;
+  }
+  .live-summary { display: flex; min-width: 0; align-items: center; gap: 10px; }
+  .live-summary .grow { flex: 1; }
+  .live-summary .chips { gap: 2px 10px; }
+  .live-summary .chip,
+  .live-summary .pill { padding: 2px 0; border: 0; background: transparent; }
+  .liveband .sesscards {
+    width: 100%;
+    margin-left: 0;
+    padding-bottom: 2px;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .liveband .sesscards::-webkit-scrollbar { display: none; }
+  .liveband .sesscard { padding: 4px 8px; background: transparent; border-color: transparent; }
+  .liveband .sesscard:hover,
+  .liveband .sesscard.sel { background: var(--hover); border-color: var(--border); }
+
+  .prompt-input-host { width: min(100%, var(--conversation-width)); margin: 18px auto 0; }
+  .prompt-input-host textarea:focus-visible { outline: none; }
+  .liveview > .prompt-input-host {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    z-index: 12;
+    width: min(
+      calc(100% - 64px + var(--radius-composer) + var(--radius-composer)),
+      calc(var(--conversation-width) + var(--radius-composer) + var(--radius-composer))
+    );
+    margin: 0;
+    padding: 10px 0 18px;
+    transform: translateX(calc(-50% - 5px));
+  }
+  .liveview > .prompt-input-host > form { position: relative; background: color-mix(in srgb, var(--surface) 94%, transparent); }
+  .liveview .tlscroll { padding-bottom: 154px; }
+
+  .settings-layout {
+    display: grid;
+    grid-template-columns: 150px minmax(0, 1fr);
+    gap: 34px;
+    margin-top: 28px;
+  }
+  .settings-index {
+    position: sticky;
+    top: 0;
+    display: flex;
+    align-self: start;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .settings-jump {
+    width: 100%;
+    padding: 7px 9px;
+    border: 0;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--muted-foreground);
+    text-align: left;
+    font-size: 13px;
+    cursor: pointer;
+  }
+  .settings-jump:hover { background: var(--hover); color: var(--foreground); }
+  .settings-jump.active { background: color-mix(in srgb, var(--foreground) 5%, transparent); color: var(--foreground); font-weight: 550; }
+  .settings-section { display: none; }
+  .settings-section.active { display: block; }
+  .settings-section-head h2 { margin: 0; font: 600 18px/1.35 var(--sans); letter-spacing: -.02em; }
+  .settings-section-head p { max-width: 64ch; margin: 5px 0 20px; color: var(--muted-foreground); font-size: 13px; }
+  .settings-section-body > .sheet:first-child { padding-top: 0; border-top: 0; }
+  .settings-section-body > .prompt-toolbar:first-child { margin-top: 0; }
+
+  /* Provider 页:左侧次级菜单是供应模块清单,右侧是嵌入的控制台页宿主(页头 + 面板槽)。
+     宿主自带的整页内边距与滚动在这里让位给外层页面。 */
+  .providerhub-jump { display: flex; align-items: center; gap: 8px; }
+  .providerhub-jump .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .providerhub .settings-content { min-width: 0; }
+  .providerhub .providerchrome,
+  .providerhub .panelslot { display: block; flex: none; padding: 0; overflow: visible; container: none; }
+  .providerhub .panelslot { margin-top: 22px; }
+  .providerhub .providerchrome > *,
+  .providerhub .panelslot > :not(.viewport-overlay) { max-width: none; }
+  .providerhub .providerintro .pagetitle { margin: 0; font-size: 18px; }
+  .providerhub .providerintro .pagedesc { margin-top: 4px; }
+  .providerhub .providerintro .rowbar { margin-top: 10px; }
+
+  .avatar-editor { display: flex; flex-direction: column; align-items: center; gap: 18px; }
+  .avatar-canvas {
+    width: min(100%, 300px);
+    height: auto;
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    background: var(--surface-hover);
+    cursor: grab;
+    touch-action: none;
+  }
+  .avatar-canvas:active { cursor: grabbing; }
+  .avatar-zoom-row { width: min(100%, 300px); display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; color: var(--muted-foreground); font-size: 13px; }
+  .avatar-zoom { width: 100%; accent-color: var(--accent); }
+  .avatar-note { max-width: 42ch; margin: 0; color: var(--muted-foreground); font-size: 12.5px; text-align: center; }
+  .avatar-editor .actionbar { width: 100%; }
+  .modalcard, .ctxpanel, .u-tip {
+    border-color: var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 18px 48px -28px var(--shadow-strong);
+  }
+  .tool-schema-card, .tool-schema-card[open], .theme-scheme, .theme-scheme.active { box-shadow: none; }
+  .tool-schema-card, .theme-scheme { border-radius: var(--radius-md); }
+  .tool-schema-card:hover, .theme-scheme:hover { transform: none; box-shadow: none; background: var(--surface-hover); }
+
+  @media (max-width: 900px) {
+    #rail { width: 232px; }
+    .pagehead, .scroll, .subtabs, .liveband, .tlscroll { padding-left: 20px; padding-right: 20px; }
+    .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
+    .settings-index { position: static; flex-direction: row; overflow-x: auto; }
+    .settings-jump { width: auto; white-space: nowrap; }
+  }
+
+  @media (max-width: 720px) {
+    #rail { width: 100%; border-bottom: 1px solid var(--border); }
+    #kernel-root { height: calc(100dvh - 54px); margin: 0; border-radius: 0; }
+    nav.stack { padding: 7px 8px; }
+    .navgroup { display: contents; }
+    .navitem { min-height: 36px; }
+    .navgroup-provider .navitem { padding: 7px 11px; }
+    .pagehead { padding-top: 22px; }
+    .sheet { padding-block: 18px; }
+    .prompt-input-host { margin-top: 14px; }
+  }
+
+  @container console-content (max-width: 720px) {
+    .statgrid,
+    .usagecards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+
+    .usagetables,
+    .theme-workbench { grid-template-columns: minmax(0, 1fr); }
+    .theme-preview-sheet { position: static; }
+  }
+
+  @container console-content (max-width: 560px) {
+    .iogrid { grid-template-columns: minmax(0, 1fr); }
+
+    .tool-schema-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; }
+    .tool-schema-title { grid-column: 1; }
+    .tool-schema-short { grid-column: 1 / -1; grid-row: 2; padding-left: 24px; }
+    .tool-schema-summary .pill { grid-column: 2; grid-row: 1; }
+
+    .forkbanner {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+    .forkbanner > span { min-width: 0; overflow-wrap: anywhere; }
+
+    .trow {
+      grid-template-columns: minmax(0, 1fr);
+      gap: 7px;
+      align-items: stretch;
+      padding: 14px 0;
+    }
+    .trow .tdesc { line-height: 1.5; }
+
+    .strow {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 8px 12px;
+      align-items: center;
+    }
+    .strow .stinfo { grid-column: 1 / -1; }
+    .strow .stloc { display: block; margin: 3px 0 0; overflow-wrap: anywhere; }
+
+    .mountrow {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      gap: 7px 9px;
+      align-items: center;
+      padding: 12px 0;
+    }
+    .mountrow .mname { width: auto; }
+    .mountrow .mdetail,
+    .mountrow .macts { grid-column: 2 / -1; }
+    .mountrow .mdetail { white-space: normal; overflow-wrap: anywhere; }
+    .mountrow .macts { flex-wrap: wrap; }
+
+    .usagebar { gap: 8px; }
+    .usagebar > .grow { display: none; }
+  }
+
+  @container console-content (max-width: 380px) {
+    .statgrid,
+    .usagecards { grid-template-columns: minmax(0, 1fr); }
+  }
+
+  /* 开场引导:终端页时间线上方那一组 Cortico 气泡。 */
+  .onboarding { padding: 4px 0 14px; }
+  .ob-grid {
+    display: grid;
+    grid-template-columns: 32px minmax(0, 1fr);
+    column-gap: 10px;
+    align-items: start;
+    width: min(100%, var(--conversation-width));
+    margin: 0 auto;
+  }
+  .ob-mark { color: var(--foreground); }
+  .ob-mark .brandmark { width: 19px; height: 19px; }
+  .ob-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+  .ob-who { font: 600 12px/1 var(--sans); color: var(--muted-foreground); }
+  .ob-state { margin-top: 6px; font: 12.5px/1.4 var(--sans); color: color-mix(in srgb, var(--bubble-ink) 62%, transparent); }
+  .ob-state.ok { color: var(--ok); }
+  .ob-state.bad { color: var(--danger); }
+  .ob-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
+  .onboarding .monolog { max-width: 100%; }
+  .ob-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; transition: background .15s ease, filter .15s ease; }
+  .ob-btn:hover:not(:disabled) { background: var(--hover); }
+  .ob-btn .icon { width: 14px; height: 14px; }
+  .ob-btn:disabled { opacity: .55; cursor: not-allowed; }
+  .ob-btn.ob-go { background: var(--accent); color: var(--on-accent); }
+  .ob-btn.ob-go:hover:not(:disabled) { filter: brightness(1.06); }