:root {
  --navy: #132238;
  --navy-2: #1d314d;
  --blue: #2463eb;
  --blue-soft: #eaf1ff;
  --ink: #182230;
  --muted: #667085;
  --line: #e4e7ec;
  --paper: #f5f7fa;
  --card: #fff;
  --ok: #16834b;
  --ok-soft: #e8f6ee;
  --warn: #b54708;
  --warn-soft: #fff3e6;
  --danger: #b42318;
  --danger-soft: #feeceb;
  --purple: #6941c6;
  --purple-soft: #f0eaff;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); }
body { min-height: 100vh; font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
body.login-mode .sidebar,
body.login-mode .topbar,
body.login-mode .page-head { display: none; }
body.login-mode .app-shell { display: block; }
body.login-mode .content { padding: 48px 24px 64px; max-width: 920px; margin: 0 auto; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 232px; z-index: 20;
  display: flex; flex-direction: column; padding: 22px 16px;
  color: #fff; background: linear-gradient(180deg, var(--navy), #0c1728);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 24px; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 8px; background: var(--blue); color: #fff; font-weight: 750;
}
.brand strong { display: block; font-size: 16px; letter-spacing: .02em; }
.brand small { display: block; margin-top: 3px; color: #98a9c1; font-size: 9px; letter-spacing: .15em; }
.nav { display: grid; gap: 5px; }
.nav button {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px;
  border: 0; border-radius: 7px; color: #c7d2e1; background: transparent; text-align: left;
}
.nav button span {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid #50627b; border-radius: 6px; font-size: 11px;
}
.nav button:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav button.active { background: #24466f; color: #fff; font-weight: 650; }
.nav button.active span { border-color: #78a7e4; background: rgba(255,255,255,.08); }
.nav-main { flex: none; }
.sidebar-bottom {
  margin-top: auto; flex-shrink: 0; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.nav-assistant { padding: 0 0 4px; }
.nav-assistant-btn {
  font-weight: 650; color: #eef4ff;
}
.nav-assistant-btn .nav-icon-assistant {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid #78a7e4; background: rgba(36,99,235,.22);
  font-size: 16px; font-weight: 800; letter-spacing: .02em;
}
.nav-assistant-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-assistant-btn.active {
  background: #24466f; color: #fff;
}
.nav-assistant-btn.active .nav-icon-assistant {
  border-color: #b2ccff; background: rgba(255,255,255,.12);
}
.sidebar-foot { padding: 8px 8px 2px; }
.sidebar-foot a { color: #d8e5f5; text-decoration: none; font-size: 12px; }
.sidebar-foot small { display: block; margin-top: 7px; color: #71839b; font-size: 11px; }

.workspace { grid-column: 2; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 15; height: 66px; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.mobile-brand { display: none; align-items: center; gap: 8px; }
.project-switch { display: flex; align-items: center; gap: 10px; min-width: 280px; }
.project-switch label { color: var(--muted); font-size: 12px; white-space: nowrap; }
.project-switch select { min-width: 220px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.user-chip {
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 12px;
  background: #fff; color: var(--ink); font-weight: 600;
}

.content { max-width: 1500px; margin: 0 auto; padding: 26px 30px 44px; }
.page-head { min-height: 58px; display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 22px; }
.page-head h1 { margin: 4px 0 0; font-size: 25px; line-height: 1.2; letter-spacing: -.02em; }
.eyebrow { margin: 0; color: var(--blue); font-size: 10px; font-weight: 750; letter-spacing: .15em; }
.page-lead { margin: 8px 0 0; max-width: 760px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.page-actions { display: flex; gap: 8px; }
.page-guide {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(240px, .85fr);
  gap: 18px; margin-bottom: 16px; padding: 16px 18px;
  border: 1px solid #d7e3f8; border-radius: 8px; background: #f7faff;
}
.page-guide-collapsed {
  margin-bottom: 14px; border: 1px solid #e4e7ec; border-radius: 8px; background: #fafbfc;
}
.page-guide-collapsed summary {
  cursor: pointer; padding: 10px 14px; color: var(--muted); font-size: 12px; font-weight: 650; list-style: none;
}
.page-guide-collapsed summary::-webkit-details-marker { display: none; }
.page-guide-collapsed summary::before { content: "？"; display: inline-block; margin-right: 8px; color: var(--blue); font-size: 11px; }
.page-guide-collapsed[open] summary { border-bottom: 1px solid #e4e7ec; color: var(--ink); }
.page-guide-collapsed .page-guide { margin: 0; border: 0; border-radius: 0; background: transparent; }
.sub-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sub-nav button.active { border-color: var(--blue); background: var(--blue-soft); color: #1849b9; }
.drawer-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 14px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.drawer-tabs button {
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 11px;
  background: #fff; color: var(--muted); font-size: 12px; font-weight: 600;
}
.drawer-tabs button.active { border-color: #84adff; background: #eff4ff; color: #1849b9; }
.drawer-panel { display: none; }
.drawer-panel.active { display: block; }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.ai-menu { display: grid; gap: 6px; margin-top: 10px; padding: 10px; border: 1px dashed #d9ccf8; border-radius: 7px; background: #fcfbff; }
.ai-menu[hidden] { display: none; }
body.shell-cross-project .project-switch,
body.shell-cross-project #quickTask { display: none !important; }
body.shell-help .project-switch,
body.shell-help #quickTask { display: none !important; }
.page-guide-main strong { display: block; margin-bottom: 8px; font-size: 14px; }
.page-guide-main p { margin: 0 0 8px; color: #344054; font-size: 13px; line-height: 1.7; }
.page-guide-main p:last-child { margin-bottom: 0; }
.page-guide-main ol { margin: 8px 0 0; padding-left: 18px; color: #344054; font-size: 13px; line-height: 1.7; }
.term-list { display: grid; gap: 10px; margin: 0; }
.term-list div { padding-bottom: 8px; border-bottom: 1px solid #e4e7ec; }
.term-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.term-list dt { font-size: 12px; font-weight: 700; }
.term-list dd { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.field-hint { display: block; margin-top: 4px; color: var(--muted); font-weight: 500; font-size: 11px; line-height: 1.5; }
.help-section { margin-bottom: 16px; }
.help-section h2 { margin: 0 0 10px; }
.help-section h3 { margin: 0; font-size: 16px; }
.help-section h4 { margin: 0 0 6px; font-size: 12px; color: #667085; }
.help-section p, .help-section li { color: #344054; font-size: 13px; line-height: 1.75; }
.help-section ol, .help-section ul { margin: 0; padding-left: 20px; }
.help-cast { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.help-cast span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: #344054; font-size: 12px;
}
.help-cast b { color: var(--ink); }
.help-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.help-ticket { padding: 10px 11px; border: 1px solid #e2e7ee; border-radius: 7px; background: #f8fafc; }
.help-ticket-btn {
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.help-ticket-btn:hover { border-color: #84adff; box-shadow: 0 0 0 3px #eff4ff; }
.guide-chat { display: grid; gap: 12px; }
.guide-messages {
  max-height: 360px; overflow: auto; display: grid; gap: 10px;
  padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe;
}
.guide-msg { padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.65; }
.guide-msg-user { background: #eff4ff; border: 1px solid #d1e0ff; }
.guide-msg-assistant { background: #fff; border: 1px solid #e4e7ec; }
.guide-msg-role { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
.guide-msg p { margin: 0; white-space: pre-wrap; }
.guide-actions, .guide-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-chip { border-radius: 999px; background: #f8fafc; }
.guide-compose { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.guide-compose textarea { min-height: 56px; resize: vertical; }
.help-ticket em { display: block; color: var(--muted); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .04em; }
.help-ticket strong { display: block; margin: 6px 0 4px; font-size: 12px; line-height: 1.45; }
.help-ticket p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.help-can { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.help-can h3 { margin: 0 0 8px; font-size: 13px; }
.help-can ul { margin: 0; padding-left: 18px; }
.help-ok { padding: 12px 14px; border: 1px solid #abefc6; border-radius: 7px; background: var(--ok-soft); }
.help-no { padding: 12px 14px; border: 1px solid #fecdca; border-radius: 7px; background: var(--danger-soft); }
.help-ok h3 { color: var(--ok); }
.help-no h3 { color: var(--danger); }
.help-map { display: grid; grid-template-columns: 88px 1fr; gap: 8px 12px; margin: 10px 0 0; }
.help-map dt { color: var(--blue); font-size: 12px; font-weight: 700; }
.help-map dd { margin: 0; color: #344054; font-size: 12px; line-height: 1.6; }
.help-branch {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; margin-top: 12px;
}
.help-branch > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.help-branch > i { align-self: center; color: #98a2b3; font-style: normal; font-size: 18px; }
.help-branch strong { display: block; margin-bottom: 4px; font-size: 12px; }
.help-faq { padding: 10px 0; border-bottom: 1px solid #e4e7ec; }
.help-faq:last-child { border-bottom: 0; }
.help-faq summary { cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.5; list-style: none; }
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary::before { content: "问"; display: inline-block; margin-right: 8px; color: var(--blue); font-size: 11px; }
.help-faq[open] summary { color: #1849b9; }
.help-faq p { margin: 8px 0 0 28px; }
.agent-guide { display: grid; gap: 12px; margin-top: 8px; }
.agent-guide section { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; }
.agent-guide h3 { margin: 0 0 8px; font-size: 13px; }
.agent-guide p, .agent-guide li { font-size: 12px; line-height: 1.65; color: #344054; }
.agent-guide ol, .agent-guide ul { margin: 6px 0 0; padding-left: 18px; }
.agent-status { padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.55; }
.agent-status.on { border: 1px solid #abefc6; background: var(--ok-soft); color: #067647; }
.agent-status.off { border: 1px solid #fedf89; background: #fffaeb; color: #b54708; }
.scope-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.scope-presets button { font-size: 11px; }
.scope-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 8px; }
.scope-table th, .scope-table td { border: 1px solid #e4e7ec; padding: 6px 8px; text-align: left; vertical-align: top; }
.scope-table th { background: #f2f4f7; }
.code-block { position: relative; margin: 8px 0 0; padding: 10px 36px 10px 10px; border-radius: 6px; background: #1e293b; color: #e2e8f0; font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.code-block button { position: absolute; top: 6px; right: 6px; font-size: 10px; padding: 2px 6px; }
.agent-key-card .scope-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.agent-key-card .scope-tags span { font-size: 10px; padding: 2px 6px; border-radius: 999px; background: #eef4ff; color: #1849b9; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-toc a { color: var(--blue); font-size: 12px; font-weight: 650; text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }
.guide-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 12px 0 0; }
.guide-flow b { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 12px; font-weight: 700; }
.guide-flow b.now { border-color: #84adff; background: #eff4ff; color: #1849b9; }
.guide-flow i { color: #98a2b3; font-style: normal; font-size: 12px; }
.guide-flow-note { margin: 10px 0 0; }
.guide-step { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e4e7ec; }
.guide-step:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.guide-step header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.guide-num { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #eff4ff; color: #1849b9; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.guide-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.guide-cols p { margin: 0; }
.guide-loop { margin-top: 8px; padding: 10px 12px; background: #f9fafb; border-radius: 6px; }
.charter-box small { display: block; margin: -2px 0 8px; color: #98a2b3; font-size: 11px; line-height: 1.5; }

.btn {
  border: 1px solid var(--line); border-radius: 6px; padding: 9px 13px;
  background: #fff; color: var(--ink); font-weight: 600;
}
.btn:hover { border-color: #b9c2d0; background: #f9fafb; }
.btn-primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.btn-primary:hover { border-color: #1849b9; background: #1849b9; }
.btn-danger { border-color: #fecdca; color: var(--danger); background: #fff; }
.btn-sm { padding: 6px 9px; font-size: 12px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.grid { display: grid; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 18px; box-shadow: 0 1px 2px rgba(16,24,40,.025);
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card h2, .card h3 { margin: 0; }
.card h2 { font-size: 16px; }
.card h3 { font-size: 14px; }
.card p { line-height: 1.6; }
.metric { position: relative; min-height: 115px; }
.metric-label { color: var(--muted); font-size: 12px; }
.metric-value { margin-top: 10px; font-size: 29px; line-height: 1; font-weight: 720; letter-spacing: -.03em; }
.metric-foot { margin-top: 12px; color: var(--muted); font-size: 11px; }
.metric-accent { position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 8px 0 0 8px; background: var(--blue); }

.supervise-table tbody tr[data-open-project] { cursor: pointer; }
.supervise-table tbody tr[data-open-project]:hover { background: #f8fafc; }
.supervise-links { white-space: nowrap; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.empty { padding: 30px 12px; text-align: center; color: var(--muted); }
.error-box { padding: 18px; border: 1px solid #fecdca; border-radius: 8px; background: var(--danger-soft); color: var(--danger); }
.success-box { padding: 12px; border: 1px solid #abefc6; border-radius: 6px; background: var(--ok-soft); color: var(--ok); }

.status, .priority, .pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 650; white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.todo { color: #475467; background: #f2f4f7; }
.status.doing { color: #175cd3; background: var(--blue-soft); }
.status.review { color: var(--purple); background: var(--purple-soft); }
.status.done { color: var(--ok); background: var(--ok-soft); }
.status.risk { color: var(--danger); background: var(--danger-soft); }
.priority { border-radius: 4px; background: #f2f4f7; color: #475467; }
.priority.high { background: var(--danger-soft); color: var(--danger); }
.priority.medium { background: var(--warn-soft); color: var(--warn); }

.progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: #eef1f5; }
.progress-fill { height: 100%; border-radius: inherit; background: var(--blue); }
.progress-line { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; margin: 12px 0; }
.progress-line strong { font-size: 12px; }
.progress-line span { color: var(--muted); text-align: right; font-size: 11px; }

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.segmented button { border: 0; border-radius: 5px; padding: 6px 10px; background: transparent; color: var(--muted); font-size: 12px; }
.segmented button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,24,40,.1); }
input, select, textarea {
  width: 100%; border: 1px solid #d0d5dd; border-radius: 6px;
  padding: 9px 11px; background: #fff; color: var(--ink); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #84adff; box-shadow: 0 0 0 3px rgba(36,99,235,.1); }
textarea { min-height: 100px; resize: vertical; }
label.field { display: grid; gap: 6px; color: #344054; font-size: 12px; font-weight: 600; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .wide { grid-column: 1 / -1; }

.kanban { display: grid; grid-template-columns: repeat(4, minmax(235px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 5px; }
.kanban-col { min-height: 420px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.kanban-title { display: flex; justify-content: space-between; align-items: center; margin: 2px 3px 11px; font-size: 12px; font-weight: 700; }
.kanban-count { min-width: 22px; padding: 2px 6px; border-radius: 99px; background: #e9edf3; color: var(--muted); text-align: center; font-size: 10px; }
.ticket-card {
  margin-bottom: 9px; padding: 12px; border: 1px solid #e2e7ee; border-radius: 7px;
  background: #fff; cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.ticket-card:hover { border-color: #9ebaf7; box-shadow: 0 3px 8px rgba(16,24,40,.07); }
.ticket-title { margin: 8px 0 11px; line-height: 1.45; font-size: 13px; font-weight: 650; }
.ticket-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.ticket-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 11px 10px; border-bottom: 1px solid #edf0f3; text-align: left; vertical-align: middle; }
.data-table th { color: var(--muted); font-size: 11px; font-weight: 650; background: #fafbfc; }
.data-table td { font-size: 12px; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: #f8faff; }

.timeline { display: grid; gap: 0; }
.timeline-item { position: relative; padding: 0 0 18px 25px; border-left: 1px solid #d5dbe4; margin-left: 6px; }
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-dot { position: absolute; left: -5px; top: 2px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.timeline-item h3 { margin: 0 0 5px; font-size: 12px; }
.timeline-item p { margin: 0; color: var(--muted); font-size: 11px; }

.feedback-pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
.feedback-step { padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; text-align: center; }
.feedback-step strong { display: block; font-size: 22px; }
.feedback-step span { color: var(--muted); font-size: 11px; }

.bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 90px 1fr 34px; align-items: center; gap: 10px; }
.bar-row label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.bar { height: 8px; overflow: hidden; border-radius: 99px; background: #eef1f5; }
.bar i { display: block; height: 100%; background: var(--blue); }
.bar-row b { text-align: right; font-size: 11px; }
.donut-wrap { display: flex; align-items: center; gap: 24px; }
.donut {
  flex: 0 0 auto; width: 130px; height: 130px; border-radius: 50%;
  display: grid; place-items: center; background: conic-gradient(#d0d5dd 0 var(--p1), var(--blue) var(--p1) var(--p2), var(--purple) var(--p2) var(--p3), var(--ok) var(--p3) 100%);
}
.donut::after { content: attr(data-value); display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; background: #fff; font-size: 21px; font-weight: 720; }
.legend { display: grid; gap: 8px; font-size: 11px; }
.legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 2px; background: var(--c); }

.ai-btn { border-color: #cbbcf4; color: var(--purple); background: #faf8ff; }
.ai-btn:hover { border-color: #9e77ed; color: #53389e; background: var(--purple-soft); }
.ai-note {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1px solid #d9ccf8; border-radius: 7px; background: #faf8ff; color: #53389e;
}
.ai-note strong { flex: 0 0 auto; font-size: 12px; }
.ai-note span { color: #6941c6; font-size: 11px; line-height: 1.5; }
.ai-structured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.ai-structured > div { min-width: 0; padding: 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ai-structured > div:nth-child(2n) { border-right: 0; }
.ai-structured > div.wide { grid-column: 1 / -1; border-right: 0; }
.ai-structured span, .ai-diff span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.ai-structured strong { font-size: 12px; }
.ai-structured p, .ai-structured ul { margin: 0; font-size: 12px; line-height: 1.6; }
.ai-questions { padding: 14px; border: 1px solid #fedf89; border-radius: 7px; background: #fffaeb; color: #93370d; }
.ai-questions strong { font-size: 12px; }
.ai-questions ol, .ai-questions ul { margin: 8px 0 0; padding-left: 20px; font-size: 12px; line-height: 1.7; }
.ai-result { padding: 14px; border: 1px solid #d9ccf8; border-radius: 7px; background: #fcfbff; }
.ai-result h3 { margin: 0 0 9px; color: #53389e; font-size: 12px; }
.ai-result p, .ai-result ul { margin: 0; font-size: 12px; line-height: 1.7; }
.ai-result ul { padding-left: 20px; }
.ai-diff { display: grid; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.ai-diff > div { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 12px; align-items: center; padding: 11px 13px; border-bottom: 1px solid var(--line); font-size: 12px; }
.ai-diff > div:last-child { border-bottom: 0; }
.ai-diff span { margin: 0; }
.ai-diff del { color: var(--muted); }

.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(15,23,42,.4); backdrop-filter: blur(2px); }
.drawer {
  position: absolute; inset: 0 0 0 auto; width: min(590px, 100%); overflow-y: auto;
  padding: 24px; background: #fff; box-shadow: -12px 0 35px rgba(16,24,40,.15);
}
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 7px 0 0; font-size: 19px; line-height: 1.4; }
.drawer-section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.drawer-section:last-child { border-bottom: 0; }
.close-btn { border: 0; background: transparent; color: var(--muted); font-size: 21px; }

.modal { position: absolute; top: 50%; left: 50%; width: min(620px, calc(100% - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; transform: translate(-50%, -50%); border-radius: 9px; background: #fff; box-shadow: 0 20px 45px rgba(16,24,40,.2); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-body { padding: 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: #fafbfc; }

.toast-root { position: fixed; top: 78px; right: 22px; z-index: 80; display: grid; gap: 8px; }
.toast { width: min(360px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 7px; background: #fff; box-shadow: 0 8px 24px rgba(16,24,40,.12); }
.toast.error { border-left-color: var(--danger); }
.toast strong { display: block; margin-bottom: 3px; font-size: 12px; }
.toast span { color: var(--muted); font-size: 11px; }

.skeleton { position: relative; overflow: hidden; min-height: 80px; background: #eef1f5; border-radius: 7px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

.nav-more-btn { display: none; }
.project-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.project-hero { display: grid; gap: 14px; }
.hero-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.people { display: flex; flex-wrap: wrap; gap: 8px; }
.person { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.person b { font-size: 12px; }
.person small { color: var(--muted); font-size: 10px; }
.phase-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.phase-card { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.phase-card.current { border-color: #84adff; box-shadow: 0 0 0 3px rgba(36,99,235,.08); }
.phase-card.done { border-color: #abefc6; }
.phase-card.blocked { border-color: #fecdca; }
.work-list { display: grid; gap: 8px; }
.work-item { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.work-item:hover { border-color: #9ebaf7; }
.charter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.charter-box { min-height: 88px; padding: 12px; border: 1px dashed #d0d5dd; border-radius: 8px; background: #fbfcfe; }
.charter-box strong { display: block; margin-bottom: 6px; font-size: 12px; }
.charter-box p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.more-sheet {
  position: fixed; inset: auto 8px 70px; z-index: 40;
  display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(16,24,40,.16);
}
.mention-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.kind-pills { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(4, 250px); }
}

@media (max-width: 760px) {
  .app-shell { display: block; padding-bottom: 65px; }
  .sidebar {
    position: fixed; inset: auto 0 0; width: auto; height: 62px; padding: 4px 6px;
    display: flex; align-items: stretch; gap: 4px;
    background: #fff; border-top: 1px solid var(--line);
  }
  .brand, .sidebar-foot { display: none; }
  .sidebar-bottom {
    flex: 0 0 68px; margin-top: 0; padding-top: 0; border-top: 0;
    border-left: 1px solid var(--line); display: flex; align-items: stretch;
  }
  .nav-main { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; min-height: 0; }
  .nav-assistant { flex: 1; padding: 0; }
  .sidebar-foot { display: none; }
  .nav-assistant-btn {
    height: 100%; display: grid; justify-items: center; align-content: center; gap: 2px;
    padding: 3px 2px; color: var(--blue); font-size: 10px; font-weight: 700;
  }
  .nav-assistant-btn .nav-icon-assistant {
    width: 28px; height: 28px; font-size: 14px;
    border-color: #84adff; background: var(--blue-soft); color: #1849b9;
  }
  .nav-assistant-btn.active { background: var(--blue-soft); color: #1849b9; }
  .hero-meta, .phase-rail, .charter-grid, .page-guide, .guide-cols, .help-board, .help-can, .help-branch { grid-template-columns: 1fr 1fr; }
  .nav button { display: grid; justify-items: center; gap: 2px; padding: 3px 2px; color: var(--muted); font-size: 10px; text-align: center; }
  .nav button span { width: 21px; height: 21px; border-color: #cbd2dc; }
  .nav button.active { background: var(--blue-soft); color: var(--blue); }
  .nav button:hover { background: #f5f7fa; color: var(--ink); }
  .workspace { min-width: 0; }
  .topbar { height: auto; min-height: 58px; padding: 10px 14px; flex-wrap: wrap; }
  .mobile-brand { display: flex; }
  .mobile-brand .brand-mark { width: 29px; height: 29px; }
  .project-switch { order: 3; width: 100%; min-width: 0; }
  .project-switch label { display: none; }
  .project-switch select { width: 100%; min-width: 0; }
  .top-actions #quickTask { display: none; }
  .content { padding: 20px 14px 32px; }
  .page-head { min-height: 48px; margin-bottom: 16px; }
  .page-head h1 { font-size: 21px; }
  .metrics, .grid-3, .form-grid, .help-board, .help-can { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-branch { grid-template-columns: 1fr; }
  .help-branch > i { display: none; }
  .feedback-pipeline { grid-template-columns: repeat(2, 1fr); }
  .kanban { grid-template-columns: repeat(4, 82vw); }
  .drawer { padding: 18px; }
  .ai-structured { grid-template-columns: 1fr; }
  .ai-structured > div { border-right: 0; }
  .ai-structured > div.wide { grid-column: auto; }
  .ai-diff > div { grid-template-columns: 1fr; gap: 5px; }
}

@media (max-width: 430px) {
  .metrics, .grid-3, .form-grid, .hero-meta, .phase-rail, .charter-grid, .page-guide, .guide-cols, .help-board, .help-can, .help-branch, .help-map { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .donut-wrap { align-items: flex-start; flex-direction: column; }
}