/* ─── tokens ────────────────────────────────────────────────────
     参照 Discord 的深色层级：最左轨 #1e1f22 → 侧栏 #2b2d31 →
     会话底 #313338 → 浮起块 #383a40。品牌色用 blurple #5865f2。
     Agent 专属色取各自官方 logo 的品牌色，纯黑 logo 提亮到中性色。 */
  :root {
    --bg:      #1e1f22;
    --side:    #2b2d31;
    --chat:    #313338;
    --raise:   #383a40;
    --raise2:  #474b52;
    --border:  #3f4147;
    --hover:   #2e3238;
    --fg:      #f2f3f5;
    --fg2:     #b5bac1;
    --fg3:     #8e9297;

    --brand:     #5865f2;
    --brand-ink: #ffffff;

    --online: #23a55a;
    --dnd:    #f23f43;
    --idle:   #80848e;

    --run:   #23a55a;
    --done:  #5865f2;
    --fail:  #f23f43;
    --wait:  #faa61a;
    --claim: #80848e;

    --t-bash:  #eab308;
    --t-read:  #5865f2;
    --t-write: #23a55a;
    --t-grep:  #9b7fd4;
    --t-task:  #e06c9b;

    /* Agent 专属色 = 官方 logo 色 */
    --a-claude:   #d97757;
    --a-copilot:  #c3c9d4;
    --a-cursor:   #9fb0c8;
    --a-gemini:   #9b7fd4;
    --a-deepseek: #4d7cfe;
    --a-mistral:  #fa520f;
    --a-gpt:      #19a974;

    --r-xs: 4px; --r-sm: 8px; --r: 12px; --r-pill: 999px;
    --sh-pop: 0 8px 24px rgba(0, 0, 0, .42);
    --grid-line: #3f4147;

    --font-ui:   'gg sans', 'Segoe UI', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Consolas, 'SF Mono', monospace;
  }

  [data-theme="light"] {
    --bg:     #e3e5e8;
    --side:   #f2f3f5;
    --chat:   #ffffff;
    --raise:  #f2f3f5;
    --raise2: #e3e5e8;
    --border: #d4d7dc;
    --hover:  #ebedef;
    --fg:     #060607;
    --fg2:    #4e5058;
    --fg3:    #80848e;

    --online: #1a8f4c;
    --dnd:    #d33a3c;
    --idle:   #9a9ea3;

    --run:   #1a8f4c;
    --done:  #5865f2;
    --fail:  #d33a3c;
    --wait:  #a86a10;
    --claim: #9a9ea3;

    --t-bash:  #a97a05;
    --t-read:  #5865f2;
    --t-write: #1a8f4c;
    --t-grep:  #6f52c4;
    --t-task:  #b34a7c;

    --a-claude:   #c2552f;
    --a-copilot:  #3d434d;
    --a-cursor:   #46536a;
    --a-gemini:   #6f52c4;
    --a-deepseek: #2f5fe0;
    --a-mistral:  #d63f06;
    --a-gpt:      #0e7a55;

    --sh-pop: 0 8px 24px rgba(6, 6, 7, .14);
    --grid-line: #d4d7dc;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font-family: var(--font-ui); font-size: 13px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  button, input, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  p { margin: 0; }
  svg { display: block; }
  .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .ico { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .logo { fill: currentColor; }
  :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }

  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fg) 14%, transparent); border-radius: var(--r-pill); }
  ::-webkit-scrollbar-track { background: transparent; }

  .app { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); flex: 1; min-height: 0; height: auto; }

  /* ─── 顶部通栏 ─────────────────────────────────────────────────── */
  .topbar {
    display: flex; align-items: center; gap: 14px; height: 52px; padding-inline: 16px;
    background: var(--side); border-bottom: 1px solid var(--border);
  }
  .brand-wrap { display: flex; align-items: center; gap: 8px; }
  .brand-name { font-size: 15px; font-weight: 640; letter-spacing: .01em; }
  .pulse-dot { position: relative; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--online); flex: none; }
  .pulse-dot::after {
    content: ''; position: absolute; inset: -3px; border-radius: var(--r-pill);
    border: 1.5px solid var(--online); animation: breathe 2.6s ease-in-out infinite;
  }
  .status-chip {
    display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
    border-radius: var(--r-xs); background: var(--raise);
    font-size: 12px; color: var(--fg2);
  }
  .spacer { flex: 1; }
  .topbar-right { display: flex; align-items: center; gap: 6px; }

  .btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
    border-radius: var(--r-sm); color: var(--fg2); font-size: 13px; font-weight: 500;
    transition: color .12s ease, background .12s ease;
  }
  .btn:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
  .btn.is-on { color: var(--brand-ink); background: var(--brand); }
  .btn.is-on:hover { background: color-mix(in srgb, var(--brand) 84%, #ffffff); color: var(--brand-ink); }
  .btn-primary { background: var(--brand); color: var(--brand-ink); font-weight: 580; }
  .btn-primary:hover { background: color-mix(in srgb, var(--brand) 84%, #ffffff); color: var(--brand-ink); }

  .sel { position: relative; }
  .sel-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 10px;
    border-radius: var(--r-sm); color: var(--fg2); font-size: 13px; font-weight: 500;
  }
  .sel-btn:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
  .sel-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 168px;
    background: var(--raise); border-radius: var(--r-sm); box-shadow: var(--sh-pop); padding: 6px;
  }
  .sel-menu[hidden] { display: none; }
  .sel-item {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px;
    border-radius: var(--r-xs); color: var(--fg2); font-size: 13px; text-align: left;
  }
  .sel-item:hover { background: var(--brand); color: var(--brand-ink); }
  .sel-item[aria-selected="true"] { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }

  /* ─── 指标条 ───────────────────────────────────────────────────── */
  .metrics {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--side); border-bottom: 1px solid var(--border);
  }
  .metric {
    display: flex; align-items: center; gap: 12px; padding: 9px 16px 10px;
    border-right: 1px solid var(--border);
  }
  .metric:last-child { border-right: 0; }
  .metric-label { font-size: 12px; color: var(--fg3); }
  .metric-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 18px; line-height: 1.25; }
  .metric-spark { margin-left: auto; flex: none; }

  /* ─── 视图标签 ─────────────────────────────────────────────────── */
  .tabs { display: flex; align-items: center; gap: 4px; height: 42px; padding-inline: 12px; background: var(--chat); border-bottom: 1px solid var(--border); }
  .tab { height: 32px; padding: 0 12px; border-radius: var(--r-sm); color: var(--fg3); font-size: 13px; font-weight: 560; }
  .tab:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
  .tab[aria-selected="true"] { color: var(--fg2); background: var(--raise); }
  .tab:disabled { cursor: default; }
  .tab:disabled:hover { color: var(--fg3); background: none; }

  /* ─── 三栏 ─────────────────────────────────────────────────────── */
  .body { display: grid; grid-template-columns: 236px minmax(0, 1fr) 332px; min-height: 0; }
  .col { min-height: 0; overflow: auto; }
  .rail { background: var(--side); border-right: 1px solid var(--border); padding: 14px 8px; }
  .detail { background: var(--side); border-left: 1px solid var(--border); padding: 14px 10px; }

  .side-title { padding: 0 8px; margin-bottom: 6px; font-size: 12px; font-weight: 620; color: var(--fg3); letter-spacing: .02em; text-transform: uppercase; }
  .side-block + .side-block { margin-top: 18px; }

  /* Agent 头像：圆角方块 + 官方 logo 单色 + 角落在线点 */
  .av {
    position: relative; display: grid; place-items: center; flex: none;
    width: 32px; height: 32px; border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--c) 20%, var(--raise));
  }
  .av .logo { width: 18px; height: 18px; }
  .av.xs { width: 24px; height: 24px; border-radius: 6px; }
  .av.xs .logo { width: 14px; height: 14px; }
  .av.sm { width: 20px; height: 20px; border-radius: 6px; }
  .av.sm .logo { width: 12px; height: 12px; }
  .presence {
    position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px;
    border-radius: var(--r-pill); background: var(--online);
    box-shadow: 0 0 0 2.5px var(--chat);
  }
  .presence::after {
    content: ''; position: absolute; inset: -3px; border-radius: var(--r-pill);
    border: 1.5px solid var(--online); animation: breathe 2.6s ease-in-out infinite;
  }
  .av.on-side .presence { box-shadow: 0 0 0 2.5px var(--side); }
  .av.idle .presence { background: var(--idle); }
  .av.idle .presence::after { border-color: color-mix(in srgb, var(--idle) 55%, transparent); animation-duration: 4.4s; }

  .member { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border-radius: var(--r-sm); text-align: left; }
  .member:hover { background: var(--hover); }
  .member-body { min-width: 0; flex: 1; }
  .member-name { display: block; font-size: 13px; font-weight: 560; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .member-act { display: block; font-size: 12px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .member-bar { height: 3px; margin-top: 4px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 10%, transparent); overflow: hidden; }
  .member-bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c); }

  /* 频道：Discord 式圆角药丸，选中为浅浮起块，不是描边框 */
  .chan {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 8px;
    border-radius: var(--r-sm); color: var(--fg3); font-size: 13px; font-weight: 500; text-align: left;
  }
  .chan:hover { background: var(--hover); color: var(--fg2); }
  .chan[aria-selected="true"] { background: var(--raise); color: var(--fg); }
  .chan .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chan .badge {
    min-width: 16px; height: 16px; padding: 0 5px; border-radius: var(--r-pill);
    background: var(--fail); color: #fff; font-size: 11px; font-weight: 620;
    font-family: var(--font-mono); line-height: 16px; text-align: center;
  }
  .chan .pulse { width: 22px; height: 3px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden; flex: none; }
  .chan .pulse > i { display: block; height: 100%; width: 40%; border-radius: var(--r-pill); background: var(--online); animation: slide 2.8s ease-in-out infinite; }
  .chan .slot { width: 22px; flex: none; }

  /* ─── 中栏：会话 ───────────────────────────────────────────────── */
  .chat { display: flex; flex-direction: column; min-height: 0; background: var(--chat); }
  .chat[hidden], .board[hidden], .roles[hidden], .cost[hidden], .settings[hidden], .projects[hidden] { display: none; }
  .chat-head {
    display: flex; align-items: center; gap: 10px; height: 48px; padding-inline: 16px;
    border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
  }
  .chan-title { font-size: 15px; font-weight: 640; color: var(--fg); }
  .chan-topic { font-size: 12px; color: var(--fg3); }
  .stack { display: flex; margin-left: auto; }
  .stack .av { margin-left: -8px; box-shadow: 0 0 0 2px var(--chat); }

  .stream { flex: 1; overflow: auto; padding: 14px 0 10px; }
  .day-divider { display: flex; align-items: center; gap: 12px; margin: 14px 16px 10px; }
  .day-divider span { flex: none; padding: 2px 10px; border-radius: var(--r-pill); background: var(--raise); color: var(--fg3); font-size: 12px; font-weight: 560; }
  .day-divider::before, .day-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

  /* 消息：Discord 成组语法——同一人连发只在首条显示头像与名字，
     后续条缩进；时间戳 hover 时在右上浮出 */
  .msg {
    position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr);
    padding: 3px 20px 3px 0; margin-left: 16px; border-radius: var(--r-xs);
    text-align: left; width: calc(100% - 16px);
  }
  .msg:hover { background: color-mix(in srgb, var(--fg) 3.5%, transparent); }
  .msg[aria-selected="true"] { background: color-mix(in srgb, var(--fg) 6%, transparent); }
  .msg[aria-selected="true"]::before {
    content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px;
    border-radius: var(--r-pill); background: var(--brand);
  }
  .msg-ava { padding-top: 4px; }
  .msg-head { display: flex; align-items: baseline; gap: 8px; }
  .msg-name { font-size: 14px; font-weight: 640; color: var(--fg); }
  .msg-role { font-size: 12px; color: var(--fg3); }
  .tag {
    display: inline-flex; align-items: center; height: 19px; padding: 0 7px;
    border-radius: var(--r-xs); font-size: 12px; font-weight: 560;
    background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c);
  }
  [data-theme="light"] .tag { color: var(--fg); }
  .msg-time {
    position: absolute; right: 20px; top: -4px; z-index: 2;
    padding: 1px 6px; border-radius: var(--r-xs);
    background: var(--raise); color: var(--fg2);
    font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
    opacity: 0; transition: opacity .1s ease; pointer-events: none;
  }
  .msg:hover .msg-time, .msg:focus-visible .msg-time { opacity: 1; }
  .msg-body { display: block; grid-column: 2; margin-top: 1px; color: var(--fg); min-width: 0; }
  .msg-body > :first-child { margin-top: 0; }
  .msg-body code {
    padding: 1px 5px; border-radius: var(--r-xs);
    background: color-mix(in srgb, var(--fg) 10%, transparent);
    font-family: var(--font-mono); font-size: 12px;
  }
  .mention {
    padding: 0 3px; border-radius: 3px; background: color-mix(in srgb, var(--brand) 26%, transparent);
    color: var(--fg); font-weight: 560;
  }

  /* 当前动作：活文本 + 细进度 */
  .act {
    display: flex; align-items: center; gap: 10px; margin-top: 5px;
    padding: 5px 8px; border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--fg) 4%, transparent);
  }
  .act-tool { display: inline-flex; align-items: center; gap: 5px; flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--tt); }
  .act-tool i { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--tt); flex: none; }
  .act-text { flex: 1; min-width: 0; font-size: 12px; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .act-bar { position: relative; flex: 0 0 132px; height: 4px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden; }
  .act-bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--s); }
  .act-bar.live > i::after {
    content: ''; position: absolute; inset: 0; border-radius: var(--r-pill);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: sweep 2.4s linear infinite;
  }
  .act-num { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--fg2); font-variant-numeric: tabular-nums; }

  /* 产物引用：像同事甩过来的一段东西 */
  .ref {
    display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 10px;
    border-radius: var(--r-sm); border-left: 3px solid var(--a);
    background: color-mix(in srgb, var(--a) 12%, transparent);
  }
  .ref-name { font-family: var(--font-mono); font-size: 12px; color: var(--fg); }
  .ref-note { font-size: 12px; color: var(--fg2); }

  .typing { display: flex; align-items: center; gap: 10px; padding: 4px 16px 10px 64px; }
  .typing span { font-size: 12px; color: var(--fg3); }
  .dots { display: inline-flex; gap: 3px; }
  .dots i { width: 4px; height: 4px; border-radius: var(--r-pill); background: var(--fg3); animation: blink 1.25s ease-in-out infinite; }
  .dots i:nth-child(2) { animation-delay: .18s; }
  .dots i:nth-child(3) { animation-delay: .36s; }

  /* 输入区：Discord 的圆角大盒子 + 底部提示 */
  .composer { padding: 0 16px 14px; }
  .composer-box {
    position: relative;
    display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px;
    border-radius: var(--r); background: var(--raise);
  }
  .composer-box:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 62%, transparent); }
  .composer input { flex: 1; min-width: 0; height: 30px; background: none; border: 0; font-size: 13px; }
  .composer input:focus { outline: none; }
  .composer input::placeholder { color: var(--fg3); }
  .send { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--brand); color: var(--brand-ink); }
  .send:hover { background: color-mix(in srgb, var(--brand) 84%, #ffffff); }
  .composer-hint { margin-top: 6px; padding-inline: 4px; font-size: 12px; color: var(--fg3); }
  .composer-hint b { color: var(--fg2); font-weight: 560; }

  /* @ 提及补全：往输入框上方长，不挡住正在看的消息 */
  .mention-pop {
    position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 40;
    width: min(300px, 100%); max-height: 268px; overflow-y: auto; padding: 6px;
    border-radius: var(--r-sm); background: var(--raise); box-shadow: var(--sh-pop);
  }
  .mention-pop[hidden] { display: none; }
  .mention-item {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 8px;
    border-radius: var(--r-xs); color: var(--fg2); font-size: 13px; text-align: left;
  }
  .mention-item:hover, .mention-item[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); }
  .mention-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
  .mention-role { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 12px; opacity: .72; }

  /* ─── 右栏：详情 ───────────────────────────────────────────────── */
  .detail-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px; }
  .detail-title { font-size: 15px; font-weight: 640; color: var(--fg); }
  .card { padding: 12px; border-radius: var(--r); background: var(--raise); }
  .card + .card { margin-top: 10px; }
  .card-label { font-size: 12px; font-weight: 620; color: var(--fg3); letter-spacing: .02em; text-transform: uppercase; }
  .kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
  .kv + .kv { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
  .kv dt { font-size: 12px; color: var(--fg2); }
  .kv dd { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--fg); font-variant-numeric: tabular-nums; }
  .step { display: grid; grid-template-columns: 8px 46px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 0; }
  .step + .step { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
  .step-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--d); }
  .step-name { font-family: var(--font-mono); font-size: 12px; color: var(--fg2); }
  .step-track { height: 4px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden; }
  .step-track > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--s); }

  /* ─── 看板 ─────────────────────────────────────────────────────
     沿用会话的语法：卡片其实是「行」，选中态是左侧 3px 竖条，
     hover 只有一层很浅的浮起，不画卡片边框。 */
  .board { display: flex; flex-direction: column; min-height: 0; background: var(--chat); }
  .board-head {
    display: flex; align-items: center; gap: 10px; height: 48px; padding-inline: 16px;
    border-bottom: 1px solid var(--border);
  }
  .board-hint { margin-left: auto; font-size: 12px; color: var(--fg3); }
  .columns {
    flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px; background: var(--border);
  }
  .column { display: flex; flex-direction: column; min-height: 0; background: var(--chat); }
  .column.drop { background: color-mix(in srgb, var(--brand) 10%, var(--chat)); }
  .column-head {
    display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
    border-bottom: 1px solid var(--border); flex: none;
  }
  .column-name { font-size: 12px; font-weight: 620; color: var(--fg3); letter-spacing: .02em; text-transform: uppercase; }
  .column-count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-xs);
    background: var(--raise); color: var(--fg2);
    font-family: var(--font-mono); font-size: 11px; line-height: 18px; text-align: center;
  }
  .column-body { flex: 1; min-height: 0; overflow: auto; padding: 6px 6px 16px; }

  .task {
    position: relative; display: block; width: 100%; text-align: left;
    padding: 8px 10px 9px 12px; border-radius: var(--r-sm); cursor: grab;
  }
  .task:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
  .task[aria-selected="true"] { background: color-mix(in srgb, var(--fg) 7%, transparent); }
  .task[aria-selected="true"]::before {
    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
    border-radius: var(--r-pill); background: var(--brand);
  }
  .task.dragging { opacity: .4; }
  .task-title { font-size: 13px; font-weight: 560; color: var(--fg); }
  .task-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
  .task-who { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg2); min-width: 0; }
  .task-time { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--fg3); }
  .task-act {
    display: flex; align-items: center; gap: 8px; margin-top: 6px;
    padding: 3px 7px; border-radius: var(--r-xs);
    background: color-mix(in srgb, var(--fg) 4%, transparent);
  }
  .task-act-text { flex: 1; min-width: 0; font-size: 12px; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .task-act-bar { flex: 0 0 56px; height: 3px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 14%, transparent); overflow: hidden; }
  .task-act-bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--s); }

  /* ─── 角色 ────────────────────────────────────────────────────
     Discord 的角色语义：每个人身上若干角色 chip，权限用开关表达。 */
  .roles { display: flex; flex-direction: column; min-height: 0; background: var(--chat); }
  .roles-head { display: flex; align-items: center; gap: 10px; height: 48px; padding-inline: 16px; border-bottom: 1px solid var(--border); }
  .roles-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 20px; }
  .group-title { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; }
  .group-title:first-child { margin-top: 0; }
  .group-title span { font-size: 12px; font-weight: 620; color: var(--fg3); letter-spacing: .02em; text-transform: uppercase; }
  .group-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

  .person {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start;
    width: 100%; text-align: left; padding: 11px 12px; border-radius: var(--r-sm);
  }
  .person:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
  .person[aria-selected="true"] { background: color-mix(in srgb, var(--fg) 7%, transparent); }
  .person-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 620; }
  .person-sub { margin-top: 2px; font-size: 12px; color: var(--fg3); }
  .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
  .chip {
    display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
    border-radius: var(--r-xs); font-size: 12px; font-weight: 560;
    background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c);
  }
  [data-theme="light"] .chip { color: var(--fg); }
  .chip.line { background: none; color: var(--fg3); box-shadow: inset 0 0 0 1px var(--border); }

  /* 开关：Discord 的启停控件，轨道 + 圆点 */
  .switch {
    display: inline-flex; align-items: center; gap: 8px; height: 30px; flex: none;
    font-size: 12px; color: var(--fg3);
  }
  .switch-track {
    position: relative; width: 34px; height: 18px; border-radius: var(--r-pill);
    background: var(--raise2); transition: background .14s ease;
  }
  .switch-track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
    border-radius: var(--r-pill); background: #fff;
    transition: transform .14s ease;
  }
  .switch[aria-checked="true"] .switch-track { background: var(--run); }
  .switch[aria-checked="true"] .switch-track::after { transform: translateX(16px); }
  .switch[aria-checked="true"] { color: var(--fg2); }
  .switch:hover { color: var(--fg); }

  /* ─── 成本 ────────────────────────────────────────────────────
     图表全部手绘 SVG：细轴线、低饱和填充，不用图表库。 */
  .cost { display: flex; flex-direction: column; min-height: 0; background: var(--chat); }
  .cost .chat-head, .settings .settings-head {
    display: flex; align-items: center; gap: 10px; height: 48px; padding-inline: 16px;
    border-bottom: 1px solid var(--border);
  }
  .cost-body, .settings-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 20px; }
  .budget { padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .budget-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .budget-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 26px; line-height: 1.2; }
  .budget-num .of { font-size: 14px; color: var(--fg3); }
  .budget-track { position: relative; height: 6px; margin-top: 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden; }
  .budget-track > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--brand); }
  .budget-track > i.over { background: var(--wait); }
  .budget-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--fg3); }
  .budget-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .budget-legend i { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--brand); }
  .budget-legend i.left { background: color-mix(in srgb, var(--fg) 18%, transparent); }

  .cost-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; align-items: start; }
  .attrib { margin-top: 2px; }
  .attrib-row {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) 76px 54px; gap: 10px; align-items: center;
    width: 100%; padding: 7px 8px; border-radius: var(--r-sm); text-align: left;
  }
  .attrib-row:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
  .attrib-name { font-size: 13px; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .attrib-track { height: 5px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 10%, transparent); overflow: hidden; }
  .attrib-track > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c); }
  .attrib-num { font-family: var(--font-mono); font-size: 12px; text-align: right; }
  .attrib-pct { font-family: var(--font-mono); font-size: 12px; color: var(--fg3); text-align: right; }
  .chart-axis-note { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--fg3); }

  /* ─── 设置：参照 Open Design 设置页的分组列表写法 ──────────────── */
  .settings { display: flex; flex-direction: column; min-height: 0; background: var(--chat); }
  .settings-wrap { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 20px; padding: 14px 16px 24px; }
  .set-nav { display: flex; flex-direction: column; gap: 2px; }
  .set-nav-item {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px;
    border-radius: var(--r-sm); color: var(--fg3); font-size: 13px; text-align: left;
  }
  .set-nav-item:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); color: var(--fg2); }
  .set-nav-item[aria-selected="true"] { background: var(--raise); color: var(--fg); }
  .set-section[hidden] { display: none; }
  .set-group + .set-group { margin-top: 16px; }
  .set-group-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .set-group-title span { font-size: 12px; font-weight: 620; color: var(--fg3); letter-spacing: .02em; text-transform: uppercase; }
  .set-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 11px 14px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
  .set-row:first-child { border-radius: var(--r) var(--r) 0 0; }
  .set-row:last-child { border-bottom: 0; border-radius: 0 0 var(--r) var(--r); }
  .set-row:only-child { border-radius: var(--r); }
  .set-box { border-radius: var(--r); background: var(--raise); overflow: hidden; }
  .set-name { font-size: 13px; font-weight: 560; }
  .set-desc { font-size: 12px; color: var(--fg3); margin-top: 2px; max-width: 62ch; }
  .set-ctl { flex: none; }
  .input {
    height: 32px; min-width: 180px; padding-inline: 10px; border: 0; border-radius: var(--r-sm);
    background: var(--bg); color: var(--fg); font-size: 13px;
  }
  .input:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 62%, transparent); }
  .seg { display: inline-flex; padding: 2px; border-radius: var(--r-sm); background: var(--bg); }
  .seg button { height: 26px; padding-inline: 10px; border-radius: 6px; font-size: 12px; color: var(--fg3); }
  .seg button:hover { color: var(--fg); }
  .seg button[aria-selected="true"] { background: var(--raise2); color: var(--fg); font-weight: 560; }
  .conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg3); }

  /* ─── 项目 ─────────────────────────────────────────────────────
     Discord 的 guild 列语义：左栏顶部一列项目，切换即换整个工作台。 */
  .proj {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px;
    border-radius: var(--r-sm); text-align: left;
  }
  .proj:hover { background: var(--hover); }
  .proj[aria-selected="true"] { background: var(--raise); }
  .proj-glyph {
    position: relative; display: grid; place-items: center; flex: none;
    width: 26px; height: 26px; border-radius: 7px;
    background: color-mix(in srgb, var(--c) 24%, var(--raise));
    color: var(--c); font-size: 12px; font-weight: 620; line-height: 1;
  }
  .proj-glyph.remote::after {
    content: ''; position: absolute; right: -2px; bottom: -2px;
    width: 8px; height: 8px; border-radius: var(--r-pill);
    background: var(--brand); box-shadow: 0 0 0 2px var(--side);
  }
  .proj-body { min-width: 0; flex: 1; }
  .proj-name { font-size: 13px; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .proj-sub { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg3); white-space: nowrap; overflow: hidden; }
  .proj-dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--idle); flex: none; }
  .proj.live .proj-dot { background: var(--online); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--online) 22%, transparent); }

  /* 主机徽标：本机不带边框，远程带一枚品牌色点 */
  .host {
    display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px;
    border-radius: var(--r-xs); background: color-mix(in srgb, var(--fg) 8%, transparent);
    color: var(--fg3); font-family: var(--font-mono); font-size: 11px;
  }
  .host i { width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--brand); flex: none; }
  .host.me { background: none; color: var(--fg3); }
  .host.me i { background: var(--online); }
  .host.bad i { background: var(--dnd); }

  /* 项目视图：卡片是「行块」，靠浮起层级不靠描边 */
  .projects { display: flex; flex-direction: column; min-height: 0; background: var(--chat); }
  .projects .chat-head { display: flex; align-items: center; gap: 10px; height: 48px; padding-inline: 16px; border-bottom: 1px solid var(--border); }
  .projects-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 20px; }
  .proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
  .pcard {
    position: relative; display: block; width: 100%; text-align: left;
    padding: 13px 14px; border-radius: var(--r); background: var(--raise); cursor: pointer;
  }
  .pcard:hover { background: var(--raise2); }
  .pcard[aria-selected="true"]::before {
    content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
    border-radius: var(--r-pill); background: var(--brand);
  }
  .pcard-top { display: flex; align-items: flex-start; gap: 10px; }
  .pcard-title { display: block; font-size: 14px; font-weight: 620; }
  .pcard-repo { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pcard-host {
    display: inline-flex; align-items: center; flex: none; height: 18px; padding: 0 6px;
    border-radius: 999px; font-size: 11px; color: var(--fg2);
    background: color-mix(in srgb, var(--brand) 16%, transparent);
  }
.tpl-row, .new-proj {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px;
}
.tpl-row .role-input, .new-proj .role-input { min-width: 140px; }
.new-proj { padding: 12px; border-radius: var(--r); background: var(--raise); }
  .pcard-act { display: block; margin-top: 9px; font-size: 12.5px; color: var(--fg2); }
  .pcard-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
  .pcard-stack { display: flex; }
  /* 头像堆叠的描边环要跟所在卡片同色（浅色主题下 raise 更亮，否则会露出灰圈） */
  .pcard-stack .av { margin-left: -7px; box-shadow: 0 0 0 2px var(--raise); }
  .pcard:hover .pcard-stack .av { box-shadow: 0 0 0 2px var(--raise2); }
  .pcard-stack .av:first-child { margin-left: 0; }
  .pcard-num { margin-left: auto; display: flex; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--fg3); }

  @keyframes breathe { 0%, 100% { opacity: .28; transform: scale(1); } 50% { opacity: .9; transform: scale(1.3); } }
  @keyframes slide { 0% { transform: translateX(-50%); } 100% { transform: translateX(150%); } }
  @keyframes sweep { 0% { opacity: 0; transform: translateX(-100%); } 40% { opacity: .5; } 100% { opacity: 0; transform: translateX(100%); } }
  @keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

  @media (max-width: 1280px) {
    .body { grid-template-columns: 208px minmax(0, 1fr) 296px; }
    .act-bar { flex-basis: 96px; }
  }
  @media (max-width: 1040px) {
    .app { height: auto; flex: none; }
    body { height: auto; overflow: auto; }
    .topbar { flex-wrap: wrap; height: auto; padding-block: 10px; row-gap: 8px; }
    .btn, .sel-btn, .tab { height: 40px; }
    .tabs { overflow-x: auto; }
    .body { grid-template-columns: 1fr; }
    .col { overflow: visible; }
    .rail { border-right: 0; border-bottom: 1px solid var(--border); }
    .detail { border-left: 0; border-top: 1px solid var(--border); }
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric:nth-child(2n) { border-right: 0; }
    .metric:nth-child(n+3) { border-top: 1px solid var(--border); }
    .msg { grid-template-columns: 40px minmax(0, 1fr); }
    .typing { padding-left: 56px; }
    .act { flex-wrap: wrap; }
    .act-bar { flex-basis: 100%; order: 3; }
    body { overflow: auto; }
  }

/* ─── 实况页：设计稿没有、但控制台必须有的控件 ─────────────────
   令牌全部来自上面的 Discord 色板。告警、模态、日志、成本图
   都挂在同一套面上，避免再长出一套「控制室」皮肤。 */

[hidden] { display: none !important; }

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.metrics { min-height: 48px; }
.stream { min-height: 0; }
.composer { flex-shrink: 0; }

.pulse-dot.off { background: var(--dnd); }
.pulse-dot.off::after { border-color: var(--dnd); animation: none; }
.status-chip.bad { color: var(--fail); }

.proj-select, .composer-kind, .role-filter {
  height: 32px; padding: 0 8px; border: 0; border-radius: var(--r-sm);
  background: var(--raise); color: var(--fg2); max-width: 240px;
}
.proj-select:hover, .composer-kind:hover { color: var(--fg); }
.role-filter { background: var(--bg); color: var(--fg); min-width: 140px; }

.av-fallback { font-size: 11px; font-weight: 640; color: var(--c); letter-spacing: .02em; }
.av.xs .av-fallback { font-size: 9px; }
.member[aria-pressed="true"] { background: var(--raise); }
.member.drop { background: color-mix(in srgb, var(--brand) 24%, transparent); }
.column-dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex: none; }

.empty-note, .detail-empty { color: var(--fg3); font-size: 12px; padding: 8px 10px; }
.hint { color: var(--fg3); font-size: 12px; font-weight: 500; }
.role-note { min-height: 18px; margin: 6px 0 10px; font-size: 12px; color: var(--fg3); }
.role-note.err { color: var(--fail); }
.role-note.ok { color: var(--run); }
.composer-note { min-height: 16px; }
.composer-note.err { color: var(--fail); }
.composer-note.warn { color: var(--wait); }

.alert-bar { display: flex; flex-direction: column; background: var(--bg); }
.alert-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--side);
}
.alert-item.critical { box-shadow: inset 3px 0 0 var(--fail); }
.alert-item.warning { box-shadow: inset 3px 0 0 var(--wait); }
.alert-item.info { box-shadow: inset 3px 0 0 var(--brand); }
.alert-item.resolved { box-shadow: inset 3px 0 0 var(--run); }
.alert-icon {
  flex: none; width: 18px; height: 18px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--raise); color: var(--fg); font-size: 11px;
}
.alert-main { min-width: 0; flex: 1; }
.alert-title { font-weight: 620; }
.alert-detail, .alert-hint { color: var(--fg2); font-size: 12px; }
.alert-badge {
  flex: none; height: 18px; padding: 0 6px; border-radius: var(--r-xs);
  background: var(--raise); color: var(--fg2); font-size: 11px; line-height: 18px;
}
.alert-badge.fresh { background: var(--fail); color: #fff; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; background: rgba(0, 0, 0, .55);
}
.modal {
  width: min(440px, calc(100vw - 32px)); padding: 16px;
  border-radius: var(--r); background: var(--raise); box-shadow: var(--sh-pop);
  display: flex; flex-direction: column; gap: 10px;
}
.modal h3 { margin: 0; font-size: 15px; font-weight: 640; }
.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg2); }
.modal input, .modal select, .modal textarea, .wd-input, .role-input, #steer-text, #ask-text {
  height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-sm);
  background: var(--bg); color: var(--fg); font: inherit;
}
.modal textarea, #steer-text, #ask-text { height: auto; padding: 8px 10px; resize: vertical; }
.modal input:focus, .modal select:focus, .modal textarea:focus,
.wd-input:focus, .role-input:focus, .composer-kind:focus, .proj-select:focus {
  outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 62%, transparent);
}
.modal-actions, .drawer-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
/* 登录层的错误提示：紧贴输入框下方，不抢主按钮的位置 */
.auth-hint { margin: 0; font-size: 12px; color: var(--fail); }
#auth-gate { background: var(--chat); }
.primary-btn, .ghost-btn, .adapter-btn, .adapter-copy, .role-card-del, .log-refresh, .log-close {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 10px; border-radius: var(--r-sm); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 560;
}
.primary-btn { background: var(--brand); color: var(--brand-ink); }
.primary-btn:hover { background: color-mix(in srgb, var(--brand) 84%, #fff); }
.ghost-btn, .adapter-btn, .adapter-copy, .log-refresh, .log-close, .role-card-del {
  background: transparent; color: var(--fg2);
}
.ghost-btn:hover, .adapter-btn:hover, .adapter-copy:hover, .log-refresh:hover, .log-close:hover {
  color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.adapter-btn.primary { background: var(--brand); color: var(--brand-ink); }

.toast {
  position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%);
  padding: 8px 14px; border-radius: var(--r-sm); background: var(--raise); color: var(--fg);
  box-shadow: var(--sh-pop); font-size: 13px;
}
.toast.err { color: var(--fail); }

.drawer {
  position: fixed; z-index: 45; top: 64px; right: 16px; width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 88px); overflow: auto; padding: 14px;
  border-radius: var(--r); background: var(--side); box-shadow: var(--sh-pop);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }

.role-defaults, .role-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0; }
.wd-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg3); }
.set-desc { color: var(--fg2); font-size: 12px; max-width: 68ch; margin-top: 4px; }
.role-input.wide { flex: 1 1 220px; }
.role-grid { display: flex; flex-direction: column; }
.role-card { padding: 8px 10px; border-radius: var(--r-sm); }
.role-card:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.role-card-top, .role-card-meta, .adapter-top, .adapter-meta, .adapter-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.role-card-name, .adapter-name { font-weight: 620; }
.role-card-desc, .adapter-meta, .adapter-step { color: var(--fg3); font-size: 12px; margin-top: 4px; }
.role-src, .adapter-badge {
  margin-left: auto; height: 18px; padding: 0 6px; border-radius: var(--r-xs);
  background: var(--raise); color: var(--fg2); font-size: 11px; line-height: 18px;
}
.adapter-card { padding: 12px; border-radius: var(--r); background: var(--raise); margin-bottom: 10px; }
.adapter-cmd {
  display: flex; align-items: center; gap: 8px; margin: 6px 0;
  padding: 6px 8px; border-radius: var(--r-sm); background: var(--bg);
}
.adapter-cmd code { flex: 1; min-width: 0; overflow: auto; font-family: var(--font-mono); font-size: 12px; }

.log-panel { margin-bottom: 10px; border-radius: var(--r); background: var(--raise); overflow: hidden; }
.log-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; color: var(--fg2); font-size: 12px;
}
.log-body {
  max-height: 280px; overflow: auto; padding: 4px 10px 10px;
  background: var(--bg); font-family: var(--font-mono); font-size: 12px;
}
.log-line { display: flex; gap: 8px; padding: 3px 0; color: var(--fg2); }
.log-line.thought { color: var(--fg3); font-style: italic; }
.log-badge {
  flex: none; height: 18px; padding: 0 6px; border-radius: var(--r-xs);
  background: var(--raise2); color: var(--fg); font-size: 11px; line-height: 18px;
}
.log-line.tool-bash .log-badge { color: var(--t-bash); }
.log-line.tool-read .log-badge { color: var(--t-read); }
.log-line.tool-write .log-badge, .log-line.tool-edit .log-badge { color: var(--t-write); }
.log-line.tool-grep .log-badge { color: var(--t-grep); }
.log-line.outcome { color: var(--run); }

.detail-sec { margin-bottom: 10px; }
.detail-sec h4 { margin: 0 0 6px; font-size: 12px; font-weight: 620; color: var(--fg3); letter-spacing: .02em; text-transform: uppercase; }
.detail-note { color: var(--fg3); font-size: 12px; }
.tl-item { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 8px; padding: 6px 0; }
.tl-item + .tl-item { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.tl-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: var(--r-pill); background: var(--brand); }
.tl-item.failure .tl-dot, .tl-item.failed .tl-dot { background: var(--fail); }
.tl-item.success .tl-dot, .tl-item.done .tl-dot { background: var(--run); }
.tl-sum { font-size: 12px; }
.tl-meta { font-size: 11px; color: var(--fg3); font-family: var(--font-mono); }
.diff-stat, .diff-file { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.diff-file { padding: 4px 0; }
.diff-file .p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); }
.diff-add { color: var(--run); }
.diff-del { color: var(--fail); }

.cost-body .trend-stats, .chart-grid-2 { display: grid; gap: 10px; }
.trend-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.chart-grid-2 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.trend-stat, .chart-card {
  padding: 12px; border-radius: var(--r); background: var(--raise); margin-top: 10px;
}
.trend-stats .trend-stat { margin-top: 0; }
.trend-stat .k, .chart-title { font-size: 12px; color: var(--fg3); font-weight: 620; }
.trend-stat .v { font-family: var(--font-mono); font-size: 18px; margin-top: 2px; }
.chart-title .unit { font-weight: 500; }
.chart-card svg { display: block; width: 100%; height: auto; }
.chart-grid { stroke: var(--grid-line); stroke-width: 1; }
.chart-axis-text { fill: var(--fg3); font-size: 10px; font-family: var(--font-mono); }
.chart-bar-cost { fill: var(--wait); }
.chart-dot { fill: var(--brand); }
.role-bars, .hist-row { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.role-bar-row, .hist-row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  font-size: 12px;
}
.role-bar-track, .hist-track {
  height: 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 10%, transparent); overflow: hidden;
  display: flex;
}
.role-bar-seg.ok, .hist-fill { background: var(--run); height: 100%; }
.role-bar-seg.bad { background: var(--fail); height: 100%; }
.role-bar-val, .hist-count { font-family: var(--font-mono); color: var(--fg3); font-size: 11px; }
.note-bar {
  display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12px; color: var(--fg3);
}
.note-bar .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--wait); }

@media (max-width: 1040px) {
  .trend-stats, .chart-grid-2, .cost-grid { grid-template-columns: 1fr; }
  .settings-wrap { grid-template-columns: 1fr; }
}