/* ===== colors.css ===== */
:root{
--accent:oklch(0.60 0.19 258);--accent-hover:oklch(0.56 0.20 258);--accent-soft:oklch(0.60 0.19 258 / .14);
--red:oklch(0.62 0.22 27);--orange:oklch(0.72 0.17 55);--yellow:oklch(0.83 0.16 90);--green:oklch(0.68 0.17 150);--teal:oklch(0.72 0.12 200);--indigo:oklch(0.55 0.18 285);--pink:oklch(0.66 0.21 355);--purple:oklch(0.60 0.20 310);
--text-primary:rgba(10,10,14,.88);--text-secondary:rgba(10,10,14,.55);--text-tertiary:rgba(10,10,14,.32);--text-quaternary:rgba(10,10,14,.16);--text-on-accent:#fff;
--material-ultrathin:rgba(255,255,255,.30);--material-thin:rgba(255,255,255,.48);--material-regular:rgba(255,255,255,.66);--material-thick:rgba(255,255,255,.82);--material-opaque:#f4f4f6;
--surface-window:var(--material-regular);--surface-sidebar:var(--material-thin);--surface-card:rgba(255,255,255,.55);--surface-popover:var(--material-thick);--surface-control:rgba(255,255,255,.55);--surface-control-hover:rgba(255,255,255,.75);--surface-inset:rgba(10,10,14,.05);
--stroke-hairline:rgba(10,10,14,.10);--stroke-glass:rgba(255,255,255,.65);--stroke-control:rgba(10,10,14,.12);
--selection:var(--accent-soft);
}
[data-theme="dark"]{
--accent:oklch(0.66 0.17 258);--accent-hover:oklch(0.71 0.16 258);--accent-soft:oklch(0.66 0.17 258 / .22);
--text-primary:rgba(255,255,255,.90);--text-secondary:rgba(255,255,255,.55);--text-tertiary:rgba(255,255,255,.30);--text-quaternary:rgba(255,255,255,.14);
--material-ultrathin:rgba(24,24,30,.35);--material-thin:rgba(24,24,30,.52);--material-regular:rgba(28,28,34,.68);--material-thick:rgba(30,30,36,.84);--material-opaque:#1e1e24;
--surface-window:var(--material-regular);--surface-sidebar:var(--material-thin);--surface-card:rgba(255,255,255,.07);--surface-popover:var(--material-thick);--surface-control:rgba(255,255,255,.09);--surface-control-hover:rgba(255,255,255,.15);--surface-inset:rgba(0,0,0,.25);
--stroke-hairline:rgba(255,255,255,.12);--stroke-glass:rgba(255,255,255,.18);--stroke-control:rgba(255,255,255,.14);
}
/* ===== typography.css ===== */
:root{
--font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--text-caption2:10px;--text-caption:11px;--text-footnote:12px;--text-body:13px;--text-callout:14px;--text-subhead:15px;--text-title3:17px;--text-title2:21px;--text-title1:26px;--text-largetitle:32px;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
--leading-tight:1.2;--leading-normal:1.45;
--tracking-tight:-0.02em;--tracking-normal:0;
}
/* ===== spacing.css ===== */
:root{
--space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;--space-5:12px;--space-6:16px;--space-7:20px;--space-8:24px;--space-9:32px;--space-10:40px;--space-11:56px;--space-12:72px;
--control-s:22px;--control-m:28px;--control-l:36px;--control-xl:44px;
}
/* ===== effects.css ===== */
:root{
--blur-thin:blur(12px) saturate(1.6);
--blur-glass:blur(24px) saturate(1.8);
--blur-heavy:blur(44px) saturate(2);
--shadow-1:0 1px 2px rgba(10,10,20,.08);--shadow-2:0 2px 8px rgba(10,10,20,.10),0 1px 2px rgba(10,10,20,.06);--shadow-3:0 8px 24px rgba(10,10,20,.14),0 2px 6px rgba(10,10,20,.08);--shadow-4:0 24px 60px rgba(10,10,20,.22),0 6px 16px rgba(10,10,20,.10);
--highlight-top:inset 0 1px 0 rgba(255,255,255,.55);
--highlight-rim:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.55);
--radius-xs:6px;--radius-s:9px;--radius-m:13px;--radius-l:18px;--radius-xl:26px;--radius-capsule:999px;
}
[data-theme="dark"]{
--shadow-1:0 1px 2px rgba(0,0,0,.35);--shadow-2:0 2px 8px rgba(0,0,0,.40),0 1px 2px rgba(0,0,0,.30);--shadow-3:0 8px 24px rgba(0,0,0,.50),0 2px 6px rgba(0,0,0,.35);--shadow-4:0 24px 60px rgba(0,0,0,.60),0 6px 16px rgba(0,0,0,.40);
--highlight-top:inset 0 1px 0 rgba(255,255,255,.14);
--highlight-rim:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.14);
}
/* ===== motion.css ===== */
:root{
--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.4,.44,1);--ease-in-out:cubic-bezier(.6,0,.3,1);
--dur-fast:120ms;--dur-base:200ms;--dur-slow:340ms;
}
/* ===== base.css ===== */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-normal);color:var(--text-primary);-webkit-font-smoothing:antialiased}
::selection{background:var(--selection)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.vt-glass{background:var(--material-regular);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);border:1px solid var(--stroke-glass);box-shadow:var(--shadow-3),var(--highlight-top)}
/* ===== components.css (prefix vt-) ===== */
.vt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-ui);font-size:var(--text-body);font-weight:var(--weight-medium);height:var(--control-m);padding:0 14px;border-radius:var(--radius-capsule);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);user-select:none}
.vt-btn:active{transform:scale(.965)}
.vt-btn:disabled{opacity:.4;pointer-events:none}
.vt-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.vt-btn--primary{background:var(--accent);color:var(--text-on-accent);box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.25)}
.vt-btn--primary:hover{background:var(--accent-hover)}
.vt-btn--glass{background:var(--surface-control);-webkit-backdrop-filter:var(--blur-thin);backdrop-filter:var(--blur-thin);border-color:var(--stroke-control);color:var(--text-primary);box-shadow:var(--shadow-1),var(--highlight-top)}
.vt-btn--glass:hover{background:var(--surface-control-hover)}
.vt-btn--plain{background:transparent;color:var(--accent)}
.vt-btn--plain:hover{background:var(--accent-soft)}
.vt-btn--destructive{background:var(--red);color:#fff;box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.25)}
.vt-btn--destructive:hover{filter:brightness(1.08)}
.vt-btn--s{height:var(--control-s);font-size:var(--text-footnote);padding:0 10px}
.vt-btn--l{height:var(--control-l);font-size:var(--text-callout);padding:0 18px}
.vt-iconbtn{padding:0;width:var(--control-m)}
.vt-iconbtn.vt-btn--s{width:var(--control-s)}
.vt-iconbtn.vt-btn--l{width:var(--control-l)}
.vt-icon{display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:var(--vt-icon-url) center/contain no-repeat;mask:var(--vt-icon-url) center/contain no-repeat;flex:none}
.vt-input{display:flex;align-items:center;gap:6px;height:var(--control-m);padding:0 10px;border-radius:var(--radius-s);background:var(--surface-control);border:1px solid var(--stroke-control);box-shadow:var(--highlight-top);font-family:var(--font-ui);font-size:var(--text-body);color:var(--text-primary);transition:box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.vt-input input{border:0;outline:0;background:transparent;font:inherit;color:inherit;width:100%}
.vt-input input::placeholder{color:var(--text-tertiary)}
.vt-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--highlight-top)}
.vt-input--capsule{border-radius:var(--radius-capsule)}
.vt-select{appearance:none;-webkit-appearance:none;height:var(--control-m);padding:0 26px 0 10px;border-radius:var(--radius-s);background:var(--surface-control);border:1px solid var(--stroke-control);box-shadow:var(--shadow-1),var(--highlight-top);font-family:var(--font-ui);font-size:var(--text-body);color:var(--text-primary);cursor:pointer}
.vt-select-wrap{position:relative;display:inline-flex}
.vt-select-wrap::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;transform:translateY(-50%);background:var(--text-secondary);-webkit-mask:var(--vt-chevron) center/contain no-repeat;mask:var(--vt-chevron) center/contain no-repeat;pointer-events:none}
.vt-check,.vt-radio{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-body);cursor:pointer;user-select:none}
.vt-check input,.vt-radio input{appearance:none;-webkit-appearance:none;margin:0;width:16px;height:16px;border:1px solid var(--stroke-control);background:var(--surface-control);box-shadow:var(--highlight-top);transition:background var(--dur-fast) var(--ease-out);cursor:pointer;flex:none}
.vt-check input{border-radius:5px}
.vt-radio input{border-radius:50%}
.vt-check input:checked,.vt-radio input:checked{background:var(--accent);border-color:var(--accent)}
.vt-switch{position:relative;display:inline-block;width:36px;height:22px;flex:none}
.vt-switch input{appearance:none;-webkit-appearance:none;margin:0;position:absolute;inset:0;border-radius:var(--radius-capsule);background:var(--surface-inset);border:1px solid var(--stroke-hairline);cursor:pointer;transition:background var(--dur-base) var(--ease-out)}
.vt-switch input:checked{background:var(--accent);border-color:transparent}
.vt-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-2);transition:transform var(--dur-base) var(--ease-spring);pointer-events:none}
.vt-switch:has(input:checked)::after{transform:translateX(14px)}
.vt-seg{display:inline-flex;gap:2px;padding:2px;border-radius:var(--radius-s);background:var(--surface-inset);border:1px solid var(--stroke-hairline)}
.vt-seg button{border:0;background:transparent;font-family:var(--font-ui);font-size:var(--text-footnote);font-weight:var(--weight-medium);color:var(--text-secondary);padding:3px 12px;border-radius:calc(var(--radius-s) - 3px);cursor:pointer;transition:color var(--dur-fast) var(--ease-out)}
.vt-seg button[aria-pressed="true"]{background:var(--surface-popover);color:var(--text-primary);box-shadow:var(--shadow-1),var(--highlight-top)}
.vt-tabs{display:flex;gap:2px}
.vt-tabs button{display:flex;align-items:center;gap:6px;border:0;background:transparent;font-family:var(--font-ui);font-size:var(--text-body);font-weight:var(--weight-medium);color:var(--text-secondary);padding:5px 12px;border-radius:var(--radius-capsule);cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
.vt-tabs button:hover{background:var(--surface-control)}
.vt-tabs button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
.vt-card{background:var(--surface-card);-webkit-backdrop-filter:var(--blur-thin);backdrop-filter:var(--blur-thin);border:1px solid var(--stroke-glass);border-radius:var(--radius-l);box-shadow:var(--shadow-2),var(--highlight-top);padding:var(--space-6)}
.vt-panel{background:var(--material-regular);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);border:1px solid var(--stroke-glass);border-radius:var(--radius-xl);box-shadow:var(--shadow-4),var(--highlight-rim)}
.vt-toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--material-thin);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);border-bottom:1px solid var(--stroke-hairline)}
.vt-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-capsule);background:var(--red);color:#fff;font-size:var(--text-caption);font-weight:var(--weight-semibold)}
.vt-badge--accent{background:var(--accent)}
.vt-badge--neutral{background:var(--text-tertiary)}
.vt-tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:var(--radius-capsule);font-size:var(--text-caption);font-weight:var(--weight-medium);background:var(--vt-tag-bg,var(--accent-soft));color:var(--vt-tag-fg,var(--accent))}
.vt-tooltip{position:relative;display:inline-flex}
.vt-sideitem{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:var(--radius-s);font-size:var(--text-body);color:var(--text-primary);cursor:pointer;user-select:none;transition:background var(--dur-fast) var(--ease-out)}
.vt-sideitem:hover{background:var(--surface-control)}
.vt-sideitem[aria-selected="true"]{background:var(--accent-soft);color:var(--accent);font-weight:var(--weight-medium)}

/* =====================================================================
   seekdeep app styles — written only against the Vitrine tokens above.
   ===================================================================== */

:root {
  /* Kind colors (read from TS via cssVar(), which resolves the alias). */
  --c-model: var(--green);
  --c-tool: var(--accent);
  --c-turn: var(--teal);
  --c-subagent: var(--purple);
  --c-idle: var(--text-quaternary);
  --c-other: var(--text-tertiary);
  --c-session: var(--indigo);
  --c-cache-read: var(--green);
  --c-cache-write: var(--orange);
  --c-input: var(--red);
  --text-on-span: rgba(255, 255, 255, 0.95);
  --detail-w: 340px;
  --names-w: 300px;
  --wallpaper: linear-gradient(115deg, #6db3f2 0%, #8fa3f5 30%, #b58cf0 55%, #ff9ec0 80%, #ffc98a);
}
[data-theme="dark"] {
  --wallpaper: linear-gradient(115deg, #151d33 0%, #3a2258 45%, #5c2340 80%, #241a4d);
  --text-on-span: rgba(255, 255, 255, 0.92);
}

/* ---- shell ---------------------------------------------------------- */

html, body { height: 100%; }
body {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--wallpaper);
  transition: background var(--dur-slow) var(--ease-out);
}
body.resizing { cursor: col-resize; user-select: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--text-quaternary); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
[hidden] { display: none !important; }

/* text utilities */
.muted { color: var(--text-secondary); }
.caption { font-size: var(--text-caption); }
.footnote { font-size: var(--text-footnote); color: var(--text-secondary); }
.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }
.spacer { flex: 1 1 auto; }
.section-cap {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.icon { flex: none; }
.vt-btn .icon { display: block; }
.vt-btn--plain.icon-plain { color: var(--text-secondary); }
.vt-btn--plain.icon-plain:hover { color: var(--text-primary); }
button.vt-btn { font: inherit; font-size: var(--text-body); font-weight: var(--weight-medium); }
button.vt-btn.vt-btn--s { font-size: var(--text-footnote); }
label.vt-btn input[type="file"] { display: none; }
.vt-select-wrap > .icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }
.vt-select-wrap::after { display: none; }
.vt-badge--neutral { background: var(--text-quaternary); color: var(--text-secondary); }

/* glass surfaces */
.glass-panel {
  background: var(--material-regular);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--stroke-glass);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-3), var(--highlight-rim);
  overflow: hidden;
}
.card {
  background: var(--surface-card);
  -webkit-backdrop-filter: var(--blur-thin);
  backdrop-filter: var(--blur-thin);
  border: 1px solid var(--stroke-glass);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1), var(--highlight-top);
  min-width: 0;
}

/* kind tags (picker, inspector) */
.vt-tag { text-transform: none; white-space: nowrap; }
.tag-claude, .tag-tool { --vt-tag-bg: var(--accent-soft); --vt-tag-fg: var(--accent); }
.tag-codex { --vt-tag-bg: color-mix(in oklch, var(--green) 16%, transparent); --vt-tag-fg: color-mix(in oklch, var(--green) 80%, var(--text-primary)); }
.tag-drip, .tag-session { --vt-tag-bg: color-mix(in oklch, var(--indigo) 16%, transparent); --vt-tag-fg: var(--indigo); }
.tag-opencode { --vt-tag-bg: color-mix(in oklch, var(--teal) 18%, transparent); --vt-tag-fg: color-mix(in oklch, var(--teal) 75%, var(--text-primary)); }
.tag-pi { --vt-tag-bg: color-mix(in oklch, var(--purple) 16%, transparent); --vt-tag-fg: var(--purple); }
.tag-model { --vt-tag-bg: color-mix(in oklch, var(--green) 16%, transparent); --vt-tag-fg: color-mix(in oklch, var(--green) 80%, var(--text-primary)); }
.tag-turn { --vt-tag-bg: color-mix(in oklch, var(--teal) 18%, transparent); --vt-tag-fg: color-mix(in oklch, var(--teal) 75%, var(--text-primary)); }
.tag-subagent { --vt-tag-bg: color-mix(in oklch, var(--purple) 16%, transparent); --vt-tag-fg: var(--purple); }
.tag-idle, .tag-other { --vt-tag-bg: var(--surface-inset); --vt-tag-fg: var(--text-secondary); }
.tag-failed { --vt-tag-bg: color-mix(in oklch, var(--red) 16%, transparent); --vt-tag-fg: var(--red); }

/* ---- toolbar -------------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px;
  background: var(--material-thin);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid var(--stroke-hairline);
  box-shadow: var(--highlight-top);
  flex: none;
  min-width: 0;
}
.brand { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.brand-name { font-size: var(--text-subhead); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.brand-sub { font-size: var(--text-footnote); color: var(--text-secondary); }
.toolbar-divider { width: 1px; height: 20px; background: var(--stroke-hairline); margin: 0 4px; flex: none; }
.drop-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-capsule);
  border: 1px dashed var(--stroke-control);
  color: var(--text-secondary);
  font-size: var(--text-footnote);
  white-space: nowrap;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.drop-pill.dragover, .drop-pill:focus-visible { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#drop-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 24rem; }
#drop-status:empty { display: none; }
#drop-status.error { color: var(--red); }
@media (max-width: 1100px) {
  .brand-sub, .toolbar .drop-pill { display: none; }
}

/* ---- content column -------------------------------------------------- */

.content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px 16px;
  min-height: 0;
}
.page-head { display: flex; align-items: center; gap: 10px; flex: none; padding: 0 2px; min-width: 0; }
.page-title { font-size: var(--text-title3); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }

/* ---- session picker -------------------------------------------------- */

.picker { flex: 1 1 auto; display: flex; min-height: 0; }
.picker-side {
  width: 240px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  min-height: 0;
  background: var(--surface-sidebar);
  border-right: 1px solid var(--stroke-hairline);
}
.picker-side .section-cap { padding: 4px 10px 6px; }
.picker-side .section-cap--gap { padding-top: 12px; }
.picker-source { width: 100%; text-align: left; border: 0; font: inherit; font-size: var(--text-body); }
button.picker-source { background: transparent; }
button.picker-source:hover { background: var(--surface-control); }
button.picker-source:disabled { opacity: 0.5; cursor: default; }
.picker-source .icon { color: var(--text-secondary); }
.picker-source[aria-selected="true"] .icon { color: inherit; }
.picker-source-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-source-action { color: var(--accent); font-weight: var(--weight-medium); }
.picker-forget {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-tertiary); cursor: pointer; opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.picker-source:hover .picker-forget, .picker-forget:focus-visible { opacity: 1; }
.picker-forget:hover { background: var(--surface-inset); color: var(--red); }
.picker-projects { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.picker-project {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: var(--radius-s);
  cursor: pointer; user-select: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.picker-project:hover { background: var(--surface-control); }
.picker-project[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); font-weight: var(--weight-medium); }
.picker-project-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-project-n { color: var(--text-tertiary); }
.picker-project[aria-selected="true"] .picker-project-n { color: inherit; opacity: 0.8; }
.picker-note { margin: 4px 10px; color: var(--text-tertiary); line-height: 1.4; }
.picker-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 2px; border-top: 1px solid var(--stroke-hairline);
  color: var(--text-tertiary); flex: none;
}
.picker-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.picker-head {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px; flex: none;
  border-bottom: 1px solid var(--stroke-hairline);
}
.picker-title { font-size: var(--text-subhead); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); white-space: nowrap; }
.picker-filter { width: 220px; color: var(--text-secondary); }
.picker-filter input { color: var(--text-primary); }
.picker-filter input::-webkit-search-cancel-button { -webkit-appearance: none; }
.picker-rows { flex: 1 1 auto; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.picker-block { display: flex; flex-direction: column; }
.picker-session {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px 8px 6px;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
  outline: none;
}
.picker-session:hover, .picker-session:focus-visible { background: var(--surface-control); }
.picker-session--child { grid-template-columns: auto minmax(0, 1fr) auto; padding: 6px 10px; }
.picker-chevron {
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); border-radius: 4px;
}
.picker-chevron:hover { background: var(--surface-inset); color: var(--text-primary); }
.picker-chevron--none { opacity: 0; pointer-events: none; }
.picker-session-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.picker-session-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
.picker-session--child .picker-session-title { font-weight: var(--weight-regular); font-size: var(--text-footnote); }
.picker-session-meta { color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-session-cols { display: flex; align-items: center; gap: 14px; white-space: nowrap; color: var(--text-secondary); }
.picker-drip-count { display: inline-flex; align-items: center; gap: 5px; color: var(--indigo); min-width: 3em; }
.picker-col--size { width: 56px; text-align: right; }
.picker-col--dur { width: 56px; text-align: right; }
.picker-col--when { width: 110px; text-align: right; }
.picker-go { width: 12px; display: inline-flex; color: var(--text-tertiary); }
.picker-children {
  display: flex; flex-direction: column;
  margin: 0 0 4px 22px; padding-left: 10px;
  border-left: 1px solid var(--stroke-hairline);
}
.picker-empty { margin: auto; padding: 40px; color: var(--text-tertiary); text-align: center; }
@media (max-width: 900px) {
  .picker-side { width: 200px; }
  .picker-col--size, .picker-drip-count { display: none; }
}

/* ---- trace screen ---------------------------------------------------- */

#app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.session-tabs { flex: none; flex-wrap: wrap; padding: 0 2px; }
.session-tabs button { max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; font-size: var(--text-footnote); font-weight: var(--weight-medium); }
.session-tab-close {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 2px; padding: 1px; border-radius: 4px;
  color: var(--text-tertiary);
}
.session-tab-close:hover { color: var(--text-primary); }
.session-tab-close .icon { display: block; }
.crumbs { display: flex; align-items: center; gap: 8px; flex: none; padding: 0 2px; min-width: 0; }
.crumb-project { white-space: nowrap; }
.crumb-sep { color: var(--text-quaternary); }
.crumb-title { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crumb-meta { color: var(--text-tertiary); white-space: nowrap; }
.breadcrumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }

.summary { flex: none; display: flex; flex-direction: column; gap: 8px; }
.stat-cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.stat-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  background: var(--surface-card);
  -webkit-backdrop-filter: var(--blur-thin);
  backdrop-filter: var(--blur-thin);
  border: 1px solid var(--stroke-glass);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1), var(--highlight-top);
  min-width: 0;
}
.stat-k { font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; }
.stat-v { font-size: var(--text-title3); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--leading-tight); }
.stat-sub { font-size: var(--text-caption); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }
@media (max-width: 1200px) { .stat-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.warn-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 12px; border-radius: var(--radius-m);
  background: var(--surface-card);
  -webkit-backdrop-filter: var(--blur-thin);
  backdrop-filter: var(--blur-thin);
  border: 1px solid var(--stroke-glass);
  box-shadow: var(--shadow-1), var(--highlight-top);
  flex: none; min-width: 0;
}
.warn-bar .icon { color: var(--orange); }
.warn-count { font-weight: var(--weight-medium); white-space: nowrap; }
.warn-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.details { flex: none; padding: 0 14px; }
.details > summary { cursor: pointer; padding: 8px 0; user-select: none; list-style: none; display: flex; align-items: center; gap: 6px; }
.details > summary::before { content: ''; width: 0; height: 0; border-left: 4px solid var(--text-tertiary); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--dur-fast) var(--ease-out); }
.details[open] > summary::before { transform: rotate(90deg); }
#details-body { padding: 0 0 12px; max-height: 32vh; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
#details-body h3 { margin: 0 0 4px; font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); }
#details-body table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--text-footnote); }
#details-body td, #details-body th { padding: 3px 6px; text-align: left; border-bottom: 1px solid var(--stroke-hairline); white-space: nowrap; }
#details-body th { color: var(--text-secondary); font-weight: var(--weight-medium); }
#details-body td:first-child { white-space: normal; }
#details-body td:last-child, #details-body th:last-child { text-align: right; }

/* the main glass panel: waterfall column | splitter | inspector */
.trace-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6px var(--detail-w);
  grid-template-rows: minmax(0, 1fr);
  position: relative;
}
.trace-column { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.trace-splitter { cursor: col-resize; position: relative; touch-action: none; background: var(--surface-sidebar); }
.trace-splitter::before { content: ''; position: absolute; inset: 0; left: 0; width: 1px; background: var(--stroke-hairline); }
.trace-splitter::after { content: ''; position: absolute; top: 50%; left: 1px; width: 3px; height: 28px; transform: translateY(-50%); border-radius: 2px; background: var(--text-quaternary); }
.trace-splitter:hover::after, body.resizing .trace-splitter::after { background: var(--accent); }
@media (max-width: 760px) {
  .trace-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); }
  .trace-splitter { display: none; }
  .detail-pane { border-left: 0; border-top: 1px solid var(--stroke-hairline); }
}

.waterfall-head {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px; flex: none;
  border-bottom: 1px solid var(--stroke-hairline);
  min-width: 0;
}
.waterfall-head .hint { color: var(--text-tertiary); margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) { .waterfall-head .hint { display: none; } }

.trace {
  position: relative;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 160px;
  outline: none;
  font-size: var(--text-body);
}
.trace:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.trace-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  height: 26px;
  background: var(--material-thick);
  -webkit-backdrop-filter: var(--blur-thin);
  backdrop-filter: var(--blur-thin);
  border-bottom: 1px solid var(--stroke-hairline);
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.trace-names {
  flex: 0 0 var(--names-w);
  width: var(--names-w);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
  position: sticky;
  left: 0;
  z-index: 2;
  overflow: hidden;
  white-space: nowrap;
}
.trace-names-h { padding-left: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.trace-track { flex: 1 1 auto; position: relative; min-width: 0; border-left: 1px solid var(--stroke-hairline); }
.trace-axis .tick {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding-left: 4px;
  border-left: 1px solid var(--stroke-hairline);
  white-space: nowrap;
}
.trace-axis .tick.edge { border-left: 0; }
.trace-body { position: relative; padding: 4px 0; }
.trace-grid { position: absolute; inset: 0; left: var(--names-w); pointer-events: none; }
.trace-grid .gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--stroke-hairline); opacity: 0.6; }
.trace-rows { position: absolute; inset: 4px 0; }
.trace-row {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 26px;
  display: flex;
  align-items: stretch;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background var(--dur-fast) var(--ease-out);
}
.trace-row:hover { background: var(--surface-control); }
.trace-row.selected { background: var(--accent-soft); }
.trace-row .trace-names { flex-basis: calc(var(--names-w) - 6px); width: calc(var(--names-w) - 6px); background: transparent; }
.trace-row .name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.trace-row.selected .name { color: var(--accent); font-weight: var(--weight-medium); }
.trace-row .dur { flex: 0 0 auto; color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: var(--text-footnote); }
.caret, .caret-spacer {
  flex: 0 0 14px; width: 14px; height: 14px; padding: 0; border: none; background: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); cursor: pointer; border-radius: 3px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.caret:hover { background: var(--surface-inset); color: var(--text-primary); }
.caret.closed { transform: rotate(-90deg); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }
.k-model { background: var(--c-model); }
.k-tool { background: var(--c-tool); }
.k-turn { background: var(--c-turn); }
.k-subagent { background: var(--c-subagent); }
.k-idle { background: repeating-linear-gradient(135deg, var(--text-quaternary) 0 3px, transparent 3px 6px); }
.k-session { background: var(--c-session); }
.k-other { background: var(--c-other); }
.bar {
  position: absolute;
  top: 6px;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--text-on-span);
  font-size: var(--text-caption);
  line-height: 14px;
  padding: 0 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--shadow-1);
}
.bar.k-idle { box-shadow: none; color: transparent; }
.trace-row.selected .bar { box-shadow: 0 0 0 2px var(--accent); }
.bar.failed { box-shadow: 0 0 0 2px var(--red); }
.bar-label { pointer-events: none; }

.trace-foot { flex: none; border-top: 1px solid var(--stroke-hairline); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cache-track { position: relative; height: 44px; border-radius: var(--radius-xs); background: var(--surface-inset); padding: 0 2px; overflow: hidden; }
.cache-track canvas { display: block; width: 100%; height: 44px; }
.legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.legend-sep { width: 1px; height: 14px; background: var(--stroke-hairline); margin: 0 4px; }
.legend-cap { color: var(--text-tertiary); }
.sw {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px; border-radius: var(--radius-capsule);
  font-size: var(--text-caption); font-weight: var(--weight-medium);
  background: var(--surface-inset); color: var(--text-secondary);
  user-select: none;
}
.sw::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sw-color, var(--text-tertiary)); flex: none; }
.sw.model { --sw-color: var(--c-model); }
.sw.tool { --sw-color: var(--c-tool); }
.sw.turn { --sw-color: var(--c-turn); }
.sw.subagent { --sw-color: var(--c-subagent); }
.sw.idle { --sw-color: var(--c-idle); }
.sw.other { --sw-color: var(--c-other); }
.sw.session { --sw-color: var(--c-session); }
.sw.seg-read { --sw-color: var(--c-cache-read); }
.sw.seg-write { --sw-color: var(--c-cache-write); }
.sw.seg-input { --sw-color: var(--c-input); }
.sw.dotted { background: transparent; padding: 0 4px; font-weight: var(--weight-regular); }

.tooltip {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  background: var(--surface-popover);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--stroke-glass);
  border-radius: var(--radius-s);
  padding: 6px 10px;
  font-size: var(--text-caption);
  box-shadow: var(--shadow-3);
  max-width: min(26rem, calc(100vw - 8px));
  max-height: calc(100dvh - 8px);
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: var(--text-primary);
}

/* ---- inspector ------------------------------------------------------- */

.detail-pane {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  background: var(--surface-sidebar);
  overflow: hidden;
  font-size: var(--text-body);
}
.detail-pane .empty { margin: auto; padding: 24px; color: var(--text-tertiary); font-size: var(--text-footnote); }
.detail-head {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 8px 0 14px; flex: none;
  border-bottom: 1px solid var(--stroke-hairline);
}
.detail-title { flex: 1; font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.detail-body { flex: 1 1 auto; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-section { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.detail-fold > summary { cursor: pointer; list-style: none; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-variant-numeric: tabular-nums; }
.kv dt { color: var(--text-secondary); white-space: nowrap; }
.kv dd { margin: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-inset); }
.token-bar .seg { display: block; height: 100%; }
.seg-read { background: var(--c-cache-read); }
.seg-write { background: var(--c-cache-write); }
.seg-input { background: var(--c-input); }
.payload {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  background: var(--surface-inset);
  border: 1px solid var(--stroke-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 240px;
  overflow: auto;
}
.context-list { display: flex; flex-direction: column; gap: 4px; }
.context-item summary { cursor: pointer; font-size: var(--text-footnote); }
.context-item .role { font-size: var(--text-caption2); text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: var(--radius-capsule); background: var(--surface-inset); color: var(--text-secondary); }
.context-item.role-tool_result .role { background: var(--accent-soft); color: var(--accent); }
.context-item.role-user .role { background: color-mix(in oklch, var(--purple) 16%, transparent); color: var(--purple); }
.child-list { display: flex; flex-direction: column; gap: 2px; }
.child-row {
  display: flex; align-items: center; gap: 8px;
  height: 26px; padding: 0 8px; border: 0; border-radius: var(--radius-xs);
  background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: left;
  min-width: 0;
}
.child-row:hover { background: var(--surface-control); }
.child-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); }

/* ---- focus mode -------------------------------------------------------- */

body.focus .toolbar, body.focus .crumbs, body.focus .summary, body.focus .session-tabs { display: none; }
body.focus .content { padding: 8px; }

/* ---- activity page ---------------------------------------------------- */

#activity { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding-right: 2px; }
#activity-host { display: flex; flex-direction: column; gap: 12px; }
.activity-toolbar { flex-wrap: wrap; }
/* Harness multiselect — dropdown checklist; anchors to the toolbar control it wraps with. */
.vt-multiselect { position: relative; display: inline-flex; }
.vt-multiselect__trigger { max-width: 260px; }
.vt-multiselect__trigger .vt-multiselect__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-multiselect__trigger[aria-expanded="true"] { background: var(--surface-control-hover); }
.vt-multiselect__menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 200px; max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: var(--radius-m); background: var(--surface-popover); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border: 1px solid var(--stroke-glass); box-shadow: var(--shadow-3), var(--highlight-rim); }
.vt-multiselect__menu[hidden] { display: none; }
.vt-multiselect__option { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-xs); cursor: pointer; user-select: none; font-size: var(--text-body); color: var(--text-primary); }
.vt-multiselect__option:hover { background: var(--surface-control); }
.vt-multiselect__option--master { font: inherit; font-weight: var(--weight-medium); color: var(--text-secondary); border: 0; background: transparent; text-align: left; }
.vt-multiselect__option--master[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.vt-multiselect__option--master:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.vt-multiselect__check { visibility: hidden; width: 14px; flex: none; font-size: var(--text-footnote); line-height: 1; text-align: center; color: var(--accent); }
.vt-multiselect__option--master[aria-pressed="true"] .vt-multiselect__check { visibility: visible; }
.vt-multiselect__box { appearance: none; -webkit-appearance: none; margin: 0; width: 16px; height: 16px; flex: none; border: 1px solid var(--stroke-control); border-radius: 5px; background: var(--surface-control); box-shadow: var(--highlight-top); transition: background var(--dur-fast) var(--ease-out); cursor: pointer; }
.vt-multiselect__box:checked { background: var(--accent); border-color: var(--accent); }
.vt-multiselect__box:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.vt-multiselect__option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-status { font-variant-numeric: tabular-nums; }
.activity-empty { padding: 40px; text-align: center; color: var(--text-tertiary); }
.stat-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; flex: none; }
@media (max-width: 1100px) { .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat-row .stat-card { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
.stat-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.stat-row .stat-v { font-size: var(--text-title2); }
.stat-delta { font-size: var(--text-caption); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-delta.good { color: var(--green); }
.stat-delta.bad { color: var(--red); }
.stat-vs { color: var(--text-tertiary); }
.sparkline { width: 88px; height: 32px; flex: none; overflow: visible; }
.sparkline-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.sparkline-area { fill: var(--accent-soft); }

.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; flex: none; }
@media (max-width: 900px) { .chart-grid { grid-template-columns: minmax(0, 1fr); } }
.chart-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.chart-panel h3 { margin: 0; font-size: var(--text-body); font-weight: var(--weight-semibold); }
.chart { display: block; width: 100%; height: auto; }
.chart-gridline { stroke: var(--stroke-hairline); }
.chart-label { fill: var(--text-tertiary); font-size: 11px; font-family: var(--font-ui); }
.chart rect:hover { opacity: 0.8; }
.chart-headline { font-size: var(--text-body); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.chart-sub { margin: 0; }
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 12px;
  font-size: var(--text-caption);
  color: var(--text-secondary);
  /* About three rows visible; the rest stay reachable by scrolling. */
  max-height: calc(3 * 1.5em + 6px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--stroke-control) transparent;
  padding-right: 2px;
}
.chart-legend::-webkit-scrollbar { width: 8px; }
.chart-legend::-webkit-scrollbar-thumb { background: var(--stroke-control); border-radius: 4px; }
.chart-legend::-webkit-scrollbar-track { background: transparent; }
/* Legend keys are controls: click isolates the series, shift-click hides it. */
.legend-item {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.legend-item:hover .legend-label { text-decoration: underline; }
.legend-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.legend-item--muted { opacity: .4; }
.legend-item--isolated { font-weight: 600; color: var(--accent); }
.legend-item--isolated .legend-swatch { box-shadow: 0 0 0 2px var(--accent); }
.legend-swatch { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }

.activity-table-wrap { overflow-x: auto; flex: none; }
.activity-table { min-width: 960px; }
.activity-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr repeat(10, 0.8fr);
  gap: 0 12px;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-bottom: 1px solid var(--stroke-hairline);
  white-space: nowrap;
  color: var(--text-primary);
}
.activity-row:last-child { border-bottom: 0; }
.activity-row--head { height: auto; padding: 8px 14px; }
.activity-row > span { text-align: right; overflow: hidden; text-overflow: ellipsis; }
.activity-row > span:first-child, .activity-row > span:nth-child(2) { text-align: left; }
.activity-row > span:nth-child(2) { color: var(--text-secondary); }
.activity-row > span:last-child { font-weight: var(--weight-semibold); }
.activity-model { display: flex; align-items: center; gap: 8px; min-width: 0; }
.activity-model .legend-swatch { width: 8px; height: 8px; border-radius: 2px; }
.activity-model .mono { overflow: hidden; text-overflow: ellipsis; }
.activity-table .activity-empty { padding: 20px; }

/* ---- settings page ---------------------------------------------------- */

#settings { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; max-width: 880px; }
.settings-card { display: flex; flex-direction: column; flex: none; }
.settings-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--stroke-hairline); }
.settings-row:last-child { border-bottom: 0; }
.settings-row--head { padding-bottom: 8px; border-bottom: 0; }
.settings-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.settings-title { font-weight: var(--weight-semibold); }
.pricing-grid {
  display: grid;
  /* model · five rate columns · remove */
  grid-template-columns: minmax(0, 1fr) repeat(5, 110px) 24px;
  gap: 6px 12px;
  padding: 0 14px 14px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.pricing-model { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.pricing-name { padding: 0 8px; }
.pricing-name input { font-family: var(--font-mono); font-size: var(--text-footnote); }
.pricing-remove { display: flex; align-items: center; justify-content: center; }
.pricing-remove button { color: var(--text-tertiary); }
.pricing-remove button:hover { color: var(--red); }
.pricing-status { margin: 0; padding: 0 14px 12px; min-height: 1em; }
.pricing-input { width: 110px; padding: 0 8px; }
.pricing-input input { font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pricing-input input::-webkit-outer-spin-button, .pricing-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 800px) {
  .pricing-grid { grid-template-columns: minmax(0, 1fr) repeat(5, 80px) 24px; }
  .pricing-input { width: 80px; }
}

/* ---- activity chart hover ------------------------------------------------ */

.chart-tooltip { min-width: 12rem; }
.chart-tooltip-title { font-weight: var(--weight-semibold); font-family: var(--font-mono); font-size: var(--text-caption); }
.chart-tooltip-line { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.chart rect { transition: opacity var(--dur-fast) var(--ease-out); }
.chart-h { height: auto; }
.chart-htrack { fill: var(--surface-inset); }
.chart-hrow { cursor: default; }
.chart-hrow:hover rect:not(.chart-htrack) { opacity: 0.8; }
.chart-hlabel { font-family: var(--font-mono); fill: var(--text-secondary); }
.chart-hvalue { fill: var(--text-primary); font-variant-numeric: tabular-nums; }

.chart-plot { display: block; }

.legend-reset {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-control);
  border: 1px solid var(--stroke-control);
  border-radius: 999px;
  padding: 1px 8px;
  font: inherit;
  font-size: 11px;
  color: inherit;
  cursor: pointer;
}
.legend-reset:hover { background: var(--surface-control-hover); }