/* 布局：应用壳 / 标题栏 / 侧栏 / 主区 / 状态栏 */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font:13px/1.55 var(--font);
  background:var(--canvas); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

.app{
  height:100vh; display:flex; flex-direction:column;
  background:var(--canvas);
}

/* ── 标题栏 ───────────────────────────── */
.titlebar{
  height:var(--titlebar-h); flex:0 0 var(--titlebar-h);
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px; padding:0 16px;
  user-select:none;
}
.titlebar .name{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.titlebar .model{
  margin-left:auto; display:flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--muted);
  background:var(--surface-sunk); border:1px solid var(--border-soft);
  height:24px; padding:0 10px; border-radius:12px;
}
.titlebar .model i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.titlebar .model.off i{background:var(--warn)}
.titlebar .model b{font-weight:600;color:var(--ink)}

/* ── 主体 ─────────────────────────────── */
.body{flex:1; display:flex; min-height:0}

/* ── 侧栏 ─────────────────────────────── */
.side{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:12px 0 8px;
  overflow-y:auto;
}
.brand{padding:0 16px 14px; display:flex; align-items:center; gap:10px}
.brand .logo{
  width:26px;height:26px;border-radius:7px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:0 0 26px;
}
.brand .logo svg{width:15px;height:15px}
.brand b{font-size:13.5px;letter-spacing:.01em;font-weight:600;line-height:1.25;display:block}
.brand span{display:block;font-size:10px;color:var(--faint);letter-spacing:.06em;margin-top:1px}

.proj{
  margin:0 12px 14px; padding:7px 9px;
  background:var(--surface-sunk); border:1px solid var(--border-soft); border-radius:var(--r-md);
  min-width:0;
}
.proj .k{font-size:10px;color:var(--faint);letter-spacing:.04em;display:block;line-height:1.2}
.proj .v{font-size:12.5px;font-weight:600;line-height:1.35;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj .v.empty{color:var(--faint);font-weight:500}

.group-label{
  font-size:10.5px; font-weight:600; letter-spacing:.09em; color:var(--faint);
  padding:0 16px; margin:8px 0 5px;
}
.nav{list-style:none}
.nav li{
  display:flex; align-items:center; gap:9px; height:32px; margin:0 8px; padding:0 9px;
  border-radius:5px; cursor:pointer; color:var(--muted); font-size:12.5px;
  position:relative; user-select:none;
}
.nav li:hover{background:var(--surface-sunk); color:var(--ink)}
.nav li.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
.nav li.on::before{
  content:""; position:absolute; left:-8px; top:5px; bottom:5px; width:3px;
  background:var(--accent); border-radius:0 2px 2px 0;
}
.nav li .idx{
  font-size:10px; width:16px; height:16px; flex:0 0 16px; border-radius:4px;
  display:flex;align-items:center;justify-content:center; font-weight:600;
  background:var(--neutral-soft); color:var(--faint);
}
.nav li.on .idx{background:var(--accent); color:#fff}
.nav li.done .idx{background:var(--ok-soft); color:var(--ok)}
.nav li .badge{
  margin-left:auto; font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:8px;
  background:var(--warn-soft); color:var(--warn);
}
.nav li .dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--warn)}
.nav li.locked{opacity:.45; cursor:not-allowed}
.nav li.locked:hover{background:none; color:var(--muted)}

.side .spacer{flex:1; min-height:12px}
.side .foot{padding:0 8px}

/* ── 主区 ─────────────────────────────── */
.main{flex:1; min-width:0; display:flex; flex-direction:column}
#screen{flex:1; min-height:0; display:flex; flex-direction:column}

.pagehead{
  flex:0 0 auto; padding:16px 22px 12px; display:flex; align-items:flex-start; gap:16px;
}
.pagehead h1{font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.3}
.pagehead p{font-size:12.5px; color:var(--muted); margin-top:2px}
.pagehead .acts{margin-left:auto; display:flex; gap:8px; align-items:center; flex:0 0 auto}

.content{flex:1; min-height:0; padding:0 22px 14px; display:flex; flex-direction:column; gap:10px}

/* ── 状态栏 ───────────────────────────── */
.statusbar{
  flex:0 0 var(--statusbar-h); height:var(--statusbar-h);
  background:var(--surface); border-top:1px solid var(--border);
  display:flex; align-items:center; gap:16px; padding:0 18px;
  font-size:11.5px; color:var(--muted);
}
.statusbar .seg{display:flex; align-items:center; gap:6px; white-space:nowrap}
.statusbar .seg b{font-weight:600; color:var(--ink)}
.statusbar .right{margin-left:auto; display:flex; align-items:center; gap:10px; white-space:nowrap}

/* ── 滚动条 ───────────────────────────── */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#C7D2DC; border-radius:5px; border:2px solid transparent; background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#A9B8C6; background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* Persistent, prominent task progress in the upper right. */
.titlebar{height:auto;min-height:64px;flex-basis:auto;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.titlebar .model{margin-left:0;flex-shrink:0}
.task-progress{margin-left:auto;display:flex;align-items:center;gap:10px;max-width:min(680px,60vw);min-width:260px;padding:7px 13px;border:1px solid var(--border);border-radius:7px;background:var(--surface-sunk);color:var(--muted)}
.task-progress .progress-copy{min-width:0;display:flex;flex-direction:column}
.task-progress b{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.task-progress small{font-size:11px;line-height:1.5}
.task-progress .spinner{width:15px;height:15px;flex:0 0 15px}
.progress-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.task-progress.running{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.task-progress.waiting{background:var(--warn-soft);color:var(--warn)}
.task-progress.done{background:var(--ok-soft);color:var(--ok)}
.task-progress.error{background:var(--warn-soft);color:var(--danger)}
.review-notice{padding:0 22px 8px;flex:0 0 auto}
.review-notice:empty{display:none}
@media(max-width:900px){.titlebar .name{display:none}.task-progress{max-width:none;flex:1;min-width:0}.titlebar .model{font-size:10px}}