/*! 任务助手 · 界面样式
 * 设计令牌与需求说明书/交互原型说明的文档体系保持一致，语义色沿用同一套。
 * 类型标识色不写在这里 —— 它来自配置表，由 util.typeColorVars() 注入 --tc / --tc-bg / --tc-bd。
 */

:root{
  --bg:#ffffff; --bg-page:#f6f7f6; --bg2:#f1f2f0; --bg3:#e9eae7;
  --fg:#1a1a18; --fg2:#5f5e5a; --fg3:#8a8a83;
  --bd:rgba(0,0,0,.14); --bd-soft:rgba(0,0,0,.07);
  --accent:#185FA5; --accent-bg:#E6F1FB; --accent-bd:#B5D4F4;
  --warn:#854F0B; --warn-bg:#FAEEDA; --warn-bd:#FAC775;
  --danger:#A32D2D; --danger-bg:#FCEBEB; --danger-bd:#F7C1C1;
  --ok:#3B6D11; --ok-bg:#EAF3DE; --ok-bd:#C0DD97;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sb:260px; --detail:360px; --topbar-h:60px;
  --radius:10px; --radius-lg:14px;
}
html[data-theme="dark"]{
  --bg:#1e1e1c; --bg-page:#171716; --bg2:#262624; --bg3:#2f2f2c;
  --fg:#ededea; --fg2:#b4b2a9; --fg3:#8a8a83;
  --bd:rgba(255,255,255,.18); --bd-soft:rgba(255,255,255,.09);
  --accent:#85B7EB; --accent-bg:#0C447C; --accent-bd:#185FA5;
  --warn:#FAC775; --warn-bg:#412402; --warn-bd:#854F0B;
  --danger:#F09595; --danger-bg:#501313; --danger-bd:#A32D2D;
  --ok:#C0DD97; --ok-bg:#173404; --ok-bd:#3B6D11;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg-page); color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
button{cursor:pointer; background:none; border:none; padding:0}
::selection{background:var(--accent-bg)}
:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-radius:4px}

/* ============ 布局 ============ */
.app{ display:grid; height:100vh; height:100dvh;
  grid-template-columns: var(--sb) minmax(0,1fr);
  grid-template-rows: 100%;
  transition:grid-template-columns .18s ease; }
.app.with-detail{ grid-template-columns: var(--sb) minmax(0,1fr) var(--detail); }
.app.rail{ --sb:64px }
.app.with-detail.rail{ grid-template-columns: var(--sb) minmax(0,1fr) var(--detail); }

/* ============ 侧边导航 ============ */
.sidebar{ background:var(--bg); border-right:1px solid var(--bd-soft); display:flex; flex-direction:column; min-height:0 }
.brand{ display:flex; align-items:center; gap:9px; padding:14px 16px 12px; }
.brand-mark{ width:22px; height:22px; border-radius:6px; background:var(--accent); flex:0 0 auto;
  display:grid; place-items:center; color:#fff; font-size:13.5px; font-weight:600 }
.brand-text{ font-size:15px; font-weight:600; letter-spacing:-.01em; white-space:nowrap }
.app.rail .brand-text{ display:none }
.app.rail .brand{ justify-content:center }

.nav{ flex:1; overflow-y:auto; padding:2px 9px 14px; min-height:0 }
.nav-group{ margin-bottom:10px }
.nav-head{ display:flex; align-items:center; justify-content:space-between; gap:6px;
  font-size:12px; color:var(--fg3); letter-spacing:.07em; padding:7px 8px 4px; white-space:nowrap }
.nav-head .nav-toggle{ font-size:12px; color:var(--fg3) }
.app.rail .nav-head{ justify-content:center; font-size:0 }
.app.rail .nav-head::first-letter{ font-size:0 }

.nav-item{ display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:6px 8px; border-radius:8px; color:var(--fg2); font-size:14px; line-height:1.45; }
.nav-item:hover{ background:var(--bg2); color:var(--fg) }
.nav-item.on{ background:var(--accent-bg); color:var(--accent); font-weight:500 }
.nav-item .ni-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.nav-item .ni-count{ font-size:12px; color:var(--fg3); font-variant-numeric:tabular-nums }
.nav-item.on .ni-count{ color:var(--accent) }
.nav-item .ni-caret{ width:12px; flex:0 0 12px; color:var(--fg3); font-size:11px; transition:transform .15s }
.nav-item .ni-caret.open{ transform:rotate(90deg) }
.nav-item .ni-dot{ width:8px; height:8px; border-radius:2px; flex:0 0 8px; background:var(--tc,var(--fg3)) }
.nav-sub{ padding-left:10px }
.nav-sub .nav-item{ font-size:12.5px; padding-left:16px }
.nav-sub .nav-item .ni-label::before{ content:''; }
.app.rail .nav-item .ni-label,
.app.rail .nav-item .ni-count,
.app.rail .nav-item .ni-caret{ display:none }
.app.rail .nav-item{ justify-content:center; padding:8px 0 }
.app.rail .nav-sub{ padding-left:0 }
.app.rail .nav-sub .nav-item{ padding-left:0 }

.sidebar-foot{ border-top:1px solid var(--bd-soft); padding:9px; display:flex; flex-direction:column; gap:4px }
.rail-btn{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px;
  color:var(--fg2); font-size:12.5px; width:100%; text-align:left }
.rail-btn:hover{ background:var(--bg2); color:var(--fg) }
.app.rail .rail-btn .rb-label{ display:none }
.app.rail .rail-btn{ justify-content:center }

/* ============ 主区 ============ */
.main{ display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--bg-page) }
.topbar{ height:var(--topbar-h); flex:0 0 var(--topbar-h); display:flex; align-items:center; gap:10px;
  padding:0 16px; border-bottom:1px solid var(--bd-soft); background:var(--bg) }
.topbar h1{ margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }
.topbar .tb-sub{ font-size:13.5px; color:var(--fg3); white-space:nowrap; font-variant-numeric:tabular-nums }
.spacer{ flex:1 }
.icon-btn{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  color:var(--fg2); font-size:15px; flex:0 0 auto }
.icon-btn:hover{ background:var(--bg2); color:var(--fg) }
.search{ display:flex; align-items:center; gap:6px; background:var(--bg2); border:1px solid transparent;
  border-radius:8px; padding:0 9px; height:30px; width:220px; transition:width .15s, border-color .15s }
.search:focus-within{ border-color:var(--accent-bd); background:var(--bg) }
.search input{ border:none; background:none; outline:none; width:100%; font-size:14px }
.search input::placeholder{ color:var(--fg3) }

.sync-dot{ display:flex; align-items:center; gap:6px; height:30px; padding:0 9px; border-radius:8px;
  font-size:13.5px; color:var(--fg2); white-space:nowrap }
.sync-dot:hover{ background:var(--bg2) }
.sync-dot .dot{ width:8px; height:8px; border-radius:50%; background:var(--fg3); flex:0 0 8px }
.sync-dot.s-synced .dot{ background:#9aa0a6 }
.sync-dot.s-syncing .dot{ background:var(--accent); animation:pulse 1s ease-in-out infinite }
.sync-dot.s-pending .dot{ background:var(--warn-bd) }
.sync-dot.s-failed .dot{ background:var(--danger-bd) }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* 统计两层（FR-FL-10）：默认副标题安静不抢视觉，点开展开完整概览 */
.stat-sub{ display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 9px;
  border-radius:8px; font-size:12.5px; color:var(--fg2); white-space:nowrap;
  font-variant-numeric:tabular-nums }
.stat-sub:hover{ background:var(--bg2); color:var(--fg) }
.stat-sub .st-arrow{ display:inline-flex; transition:transform .18s ease; color:var(--fg3) }
.stat-sub .st-arrow.open{ transform:rotate(180deg) }

.stat-panel{ flex:0 0 auto; padding:12px 16px 14px; background:var(--bg);
  border-bottom:1px solid var(--bd-soft); animation:slideDown .18s ease }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.stat-panel .sp-grid{ display:flex; gap:10px; margin-bottom:10px }
.stat-panel .sp-big{ flex:1; border:1px solid var(--bd-soft); border-radius:var(--radius-lg);
  padding:12px 16px; background:var(--bg-page) }
.stat-panel .sp-big.danger .spb-n{ color:var(--danger) }
.stat-panel .spb-n{ font-size:32px; font-weight:600; line-height:1.2; font-variant-numeric:tabular-nums }
.stat-panel .spb-l{ font-size:13.5px; color:var(--fg3); margin-top:2px }
.stat-panel .sp-small{ display:flex; gap:16px; flex-wrap:wrap; font-size:13.5px; color:var(--fg3);
  font-variant-numeric:tabular-nums; margin-bottom:10px }
.stat-panel .sp-small b{ font-weight:600; color:var(--fg2) }
.stat-panel .sp-actions{ display:flex; gap:8px; flex-wrap:wrap }

.viewhost{ flex:1; overflow-y:auto; min-height:0; display:flex; flex-direction:column }

/* ============ 录入条 ============ */
.composer-slot{ padding:12px 16px 10px; background:var(--bg-page); flex:0 0 auto }
.composer-wrap{ }
.composer{ display:flex; gap:8px; align-items:stretch; background:var(--bg);
  border:1px solid var(--bd); border-radius:var(--radius); padding:6px 6px 6px 12px;
  box-shadow:var(--shadow); transition:border-color .15s }
.composer:focus-within{ border-color:var(--accent) }
.composer input{ flex:1; border:none; background:none; outline:none; min-width:0;
  font-size:15px; height:34px; line-height:34px }
.composer input::placeholder{ color:var(--fg3) }
.send-btn{ flex:0 0 auto; min-width:64px; height:44px; padding:0 16px; border-radius:8px;
  background:var(--accent); color:#fff; font-size:13.5px; font-weight:500; }
.send-btn:hover:not(:disabled){ filter:brightness(1.08) }
.send-btn:disabled{ background:var(--bg3); color:var(--fg3); cursor:not-allowed }
.send-btn .spin{ display:inline-block; width:12px; height:12px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; vertical-align:-2px }
@keyframes spin{ to{ transform:rotate(360deg) } }
/* ============ 录入后归类条（屏三，FR-IN-05 / FR-GD-03） ============ */
/* 从底部升起，不抢焦点、不阻塞连续录入；与录入条同住 composer-wrap，5 秒倒计时后自动收起 */
.sortbar{ margin:0 0 8px; padding:12px 14px 8px; background:var(--bg);
  border:1px solid var(--bd-soft); border-bottom:none; border-radius:16px 16px 0 0;
  box-shadow:var(--shadow); font-size:14px; animation:slideUp .2s ease }
@keyframes slideUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.sortbar .sb-head{ display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ok); font-weight:500 }
.sortbar .sb-title{ font-size:15px; font-weight:500; margin:6px 0 2px; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.sortbar .sb-time{ display:flex; align-items:center; gap:5px; font-size:13.5px; color:var(--fg2); margin-top:4px }
.sortbar .sb-q{ font-size:11.5px; color:var(--fg3); margin-top:10px }
.sortbar .sb-cands{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px }
.sortbar .sb-cand{ display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px;
  border:1px solid var(--tc-bd,var(--bd)); background:var(--tc-bg,var(--bg2)); color:var(--tc,var(--fg2));
  font-size:12.5px; max-width:100% }
.sortbar .sb-cand.ghost{ background:var(--bg); border-style:dashed; color:var(--accent); border-color:var(--accent-bd) }
.sortbar .sb-skip{ display:block; margin:10px auto 4px; font-size:13.5px; color:var(--fg3) }
.sortbar .sb-skip:hover{ color:var(--fg2) }
.sortbar .sb-progress{ height:3px; border-radius:2px; background:var(--bg3); overflow:hidden; margin-top:8px }
.sortbar .sb-progress > i{ display:block; height:100%; background:var(--accent); transform-origin:left;
  animation:sbShrink 5s linear forwards }
@keyframes sbShrink{ from{ transform:scaleX(1) } to{ transform:scaleX(0) } }

/* ============ 筛选条 ============ */
.filterbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:0 16px 10px; background:var(--bg-page) }
.chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  border:1px solid var(--bd); background:var(--bg); color:var(--fg2); font-size:13.5px }
.chip:hover{ color:var(--fg); border-color:var(--bd) }
.chip.on{ background:var(--accent-bg); border-color:var(--accent-bd); color:var(--accent); font-weight:500 }
.chip .c-count{ font-size:12px; opacity:.7; font-variant-numeric:tabular-nums }
.chip .c-dot{ width:7px; height:7px; border-radius:2px; background:var(--tc,var(--fg3)) }
.filterbar .fb-label{ font-size:12px; color:var(--fg3); letter-spacing:.05em }
.filterbar .fb-group{ display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.fb-divider{ width:1px; height:18px; background:var(--bd-soft) }
select.mini{ height:26px; border-radius:7px; border:1px solid var(--bd); background:var(--bg);
  font-size:13.5px; padding:0 6px; color:var(--fg2) }

/* ============ 列表 ============ */
.listwrap{ padding:0 16px 24px; flex:1 }
/* 分组头：4px 类型色条 + 类型名 + 计数（组内按截止时间正序，不按时效档分组，FR-FL-07/08） */
.group-head{ position:sticky; top:0; z-index:2; background:var(--bg-page);
  display:flex; align-items:center; gap:8px; padding:10px 2px 6px; font-size:12.5px; color:var(--fg2); font-weight:500 }
.group-head .gh-bar{ width:4px; height:14px; border-radius:2px; background:var(--tc,var(--fg3)); flex:0 0 4px }
.group-head .gh-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.group-head .gh-count{ font-variant-numeric:tabular-nums; color:var(--fg3); font-weight:400 }

/* 待归类提示条：轻量提醒，不是待办债务提示 */
.uncat-hint{ display:flex; align-items:center; gap:8px; width:calc(100% - 32px); margin:0 16px 10px;
  padding:8px 12px; border:1px solid var(--bd-soft); border-radius:var(--radius);
  background:var(--bg); font-size:12.5px; color:var(--fg2); text-align:left }
.uncat-hint:hover{ background:var(--bg2) }
.uncat-hint .uh-bar{ width:4px; height:14px; border-radius:2px; background:var(--fg3); flex:0 0 4px }
.uncat-hint .uh-go{ margin-left:auto; color:var(--accent) }

.uncat-head{ padding:2px 16px 0 }
.uncat-head .uh-sub{ font-size:12.5px; color:var(--fg3); font-variant-numeric:tabular-nums }

.rows{ background:var(--bg); border:1px solid var(--bd-soft); border-radius:var(--radius); overflow:hidden }
.rows + .group-head{ margin-top:8px }

/* 任务行：左勾选圈 + 主体（标题两行 + 元信息行）+ 右侧 ⋯ 更多按钮 */
.row{ display:grid; align-items:center; gap:8px;
  grid-template-columns: 84px minmax(0,1fr) 40px;
  padding:2px 8px 2px 0; min-height:44px; border-bottom:1px solid var(--bd-soft); position:relative }
.row:last-child{ border-bottom:none }
.row:hover{ background:var(--bg2) }
.r-body{ min-width:0; display:flex; flex-direction:column; gap:3px; padding:6px 0 }
.row .r-title{ min-width:0; font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* 长标题按两行截断（界面通用要求 8.4） */
.row .r-title.clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal }
.rowwrap{ position:relative; overflow:hidden }
.rowwrap > .row{ border-bottom:1px solid var(--bd-soft) }
.rows > .rowwrap:last-child > .row{ border-bottom:none }
.rowwrap > .row{ position:relative; z-index:2; background:var(--bg) }
.rowwrap > .row:hover{ background:var(--bg2) }
.rowwrap > .row.done{ background:var(--bg-page) }
.row .r-meta{ font-size:13.5px; color:var(--fg3); display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap }
.row .r-due{ font-size:13.5px; color:var(--fg2); display:inline-flex; align-items:center; gap:4px;
  font-variant-numeric:tabular-nums; white-space:nowrap }
.row .r-due.overdue{ color:var(--danger); font-weight:500 }
.svg-ico{ display:inline-flex; align-items:center }
.svg-ico svg{ display:block }
/* 时效档标签：纯展示，不可点、无锁定图标（FR-CAT-03） */
.hz-tag{ font-size:12px; color:var(--fg3); border:1px solid var(--bd-soft); background:var(--bg2);
  border-radius:5px; padding:0 6px; line-height:17px; white-space:nowrap }
.hz-tag.ovd{ color:var(--danger); border-color:var(--danger-bd); background:var(--danger-bg) }
/* 更多按钮：负责「改这条任务」（分类标签只负责「看这个项目」） */
.row .r-more{ width:40px; height:40px; font-size:20px; border-radius:10px; display:grid; place-items:center;
  color:var(--fg3); font-size:16px; line-height:1 }
.row .r-more:hover{ background:var(--bg3); color:var(--fg) }

/* 完成圈：视觉 21px，热区 44×44（交互原型 2.5） */
.done-btn{ height:40px; min-width:76px; padding:0 16px; border-radius:10px;
  border:1px solid var(--bd); background:var(--bg); color:var(--fg2);
  font-size:15px; font-weight:500; cursor:pointer; flex:0 0 auto;
  transition:all .15s ease }
.done-btn:hover{ border-color:var(--accent-bd); background:var(--accent-bg); color:var(--accent) }
.done-btn.is-done{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok) }
.done-btn.is-done:hover{ background:var(--bg3) }
  display:grid; place-items:center; color:transparent; font-size:12px; transition:.12s ease }

.row.done .r-title{ text-decoration:line-through; color:var(--fg3) }
.row.done .r-meta, .row.done .r-due{ opacity:.55 }
.row.done{ background:var(--bg-page) }

/* 类型 · 分类标签：色点 + 名称；有二级分类时可点进项目视图 */
.tagpair{ display:inline-flex; align-items:center; gap:5px; max-width:100%; min-width:0 }
.tagpair .tp-type{ display:inline-flex; align-items:center; gap:5px; color:var(--tc,var(--fg2));
  background:var(--tc-bg,var(--bg2)); border:1px solid var(--tc-bd,var(--bd-soft));
  border-radius:5px; padding:0 7px; height:19px; font-size:11.5px; white-space:nowrap; max-width:200px }
.tagpair .tp-type.clickable{ cursor:pointer }
.tagpair .tp-type.clickable:hover{ border-color:var(--tc,var(--accent)) }
.tagpair .tp-dot{ width:6px; height:6px; border-radius:2px; background:var(--tc,var(--fg3)); flex:0 0 6px }
.tagpair .tp-type span:last-child{ overflow:hidden; text-overflow:ellipsis }
/* 未分类：灰色虚线标签，不用警示色（未分类不是异常状态） */
.tagpair .tp-unc{ border:1px dashed var(--bd); background:var(--bg2); color:var(--fg3);
  border-radius:5px; padding:0 7px; height:19px; font-size:11.5px; white-space:nowrap }
.tagpair .tp-unc.pickable{ color:var(--fg2); cursor:pointer }
.tagpair .tp-unc.pickable:hover{ color:var(--accent); border-color:var(--accent-bd) }

.showmore{ display:flex; align-items:center; gap:6px; width:100%; text-align:left;
  padding:10px 12px; border-top:1px solid var(--bd-soft); color:var(--fg2); font-size:12.5px }
.showmore:hover{ background:var(--bg2); color:var(--fg) }

.empty{ padding:56px 20px; text-align:center; color:var(--fg3); font-size:14px }
.empty .em-ico{ font-size:32px; opacity:.5; display:block; margin-bottom:10px }

/* ============ 详情面板 ============ */
.detail{ background:var(--bg); border-left:1px solid var(--bd-soft); overflow-y:auto; min-height:0;
  display:flex; flex-direction:column }
.detail-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--bd-soft) }
.detail-head h2{ margin:0; font-size:14px; font-weight:600; flex:1 }
.detail-body{ padding:12px 14px 24px; display:flex; flex-direction:column; gap:14px }
.field{ display:flex; flex-direction:column; gap:5px }
.field > label{ font-size:11.5px; color:var(--fg3); letter-spacing:.04em }
.field .val{ font-size:13.5px }
.inp{ width:100%; height:34px; padding:0 10px; border-radius:8px; border:1px solid var(--bd);
  background:var(--bg); outline:none; font-size:13.5px }
.inp:focus{ border-color:var(--accent) }
textarea.inp{ height:auto; min-height:64px; padding:8px 10px; resize:vertical; line-height:1.55 }
.btnrow{ display:flex; gap:6px; flex-wrap:wrap }
.opt{ padding:5px 11px; border-radius:7px; border:1px solid var(--bd); background:var(--bg);
  font-size:12.5px; color:var(--fg2); white-space:nowrap }
.opt:hover{ color:var(--fg) }
.opt.on{ background:var(--accent-bg); border-color:var(--accent-bd); color:var(--accent); font-weight:500 }
.btn{ padding:6px 12px; border-radius:8px; border:1px solid var(--bd); font-size:12.5px; color:var(--fg2) }
.btn:hover{ background:var(--bg2); color:var(--fg) }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff }
.btn.primary:hover{ filter:brightness(1.08) }
.btn.danger{ color:var(--danger); border-color:var(--danger-bd) }
.btn.danger:hover{ background:var(--danger-bg) }
.collapse{ border:1px solid var(--bd-soft); border-radius:var(--radius); overflow:hidden }
.collapse > summary{ padding:8px 11px; font-size:12.5px; color:var(--fg2); cursor:pointer; list-style:none }
.collapse > summary::-webkit-details-marker{ display:none }
.collapse > summary::before{ content:'▸'; display:inline-block; width:12px; color:var(--fg3); transition:transform .15s }
.collapse[open] > summary::before{ transform:rotate(90deg) }
.collapse .cs-body{ padding:0 11px 11px; font-size:12.5px; color:var(--fg2) }
.reason{ display:flex; gap:7px; padding:5px 0; border-bottom:1px dashed var(--bd-soft); font-size:12.5px }
.reason:last-child{ border-bottom:none }
.reason .rk{ flex:0 0 auto; font-size:10.5px; padding:0 6px; border-radius:4px; height:18px; line-height:18px;
  background:var(--bg2); color:var(--fg3) }
.reason.k-keyword .rk{ background:var(--accent-bg); color:var(--accent) }
.reason.k-warn .rk{ background:var(--warn-bg); color:var(--warn) }
.reason.k-time .rk{ background:var(--ok-bg); color:var(--ok) }
.rawinput{ font-family:var(--mono); font-size:13.5px; background:var(--bg2); padding:8px 10px;
  border-radius:8px; color:var(--fg2); word-break:break-all }

/* ============ 归类选择器（两级：先类型后分类，交互原型 3.5） ============ */
.big-opts{ display:flex; gap:8px; flex-wrap:wrap }
.big-opt{ flex:1 1 120px; min-height:46px; border-radius:10px; border:1px solid var(--tc-bd,var(--bd));
  background:var(--tc-bg,var(--bg2)); color:var(--tc,var(--fg2)); font-size:13.5px; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:7px }
.big-opt:hover{ filter:brightness(.97) }
.big-opt.ghost{ background:var(--bg); border-style:dashed; color:var(--fg3); flex:0 1 auto; min-width:96px }

.pick-tabs{ display:flex; gap:6px; flex-wrap:wrap }
.pick-tab{ padding:6px 13px; border-radius:999px; border:1px solid var(--bd); background:var(--bg);
  color:var(--fg2); font-size:12.5px; white-space:nowrap }
.pick-tab.on{ background:var(--tc-bg,var(--accent-bg)); border-color:var(--tc-bd,var(--accent-bd));
  color:var(--tc,var(--accent)); font-weight:500 }
.pick-list{ border:1px solid var(--bd-soft); border-radius:var(--radius); max-height:280px; overflow-y:auto }
.pick-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border-bottom:1px solid var(--bd-soft); font-size:13.5px; color:var(--fg) }
.pick-row:last-child{ border-bottom:none }
.pick-row:hover{ background:var(--bg2) }
.pick-row.on{ background:var(--accent-bg); color:var(--accent) }
.pick-row.archived{ opacity:.6 }
.pick-row .pr-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pick-row .pr-type{ font-size:11.5px; color:var(--fg3); white-space:nowrap }
.pick-row.on .pr-type{ color:var(--accent) }
.pick-arch{ display:block; width:100%; text-align:left; padding:9px 12px; font-size:13.5px; color:var(--fg3) }
.pick-arch:hover{ color:var(--fg2) }

/* 「这条任务」菜单（交互原型 3.6） */
.menu-opts{ display:flex; flex-direction:column; gap:2px }
.menu-opts .mi{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 10px; border:none; border-bottom:1px solid var(--bd-soft); border-radius:0;
  font-size:13.5px; color:var(--fg) }
.menu-opts .mi:last-child{ border-bottom:none }
.menu-opts .mi:hover{ background:var(--bg2) }
.menu-opts .mi .mi-right{ font-size:13.5px; color:var(--fg3); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:50% }
.menu-opts .mi.danger{ color:var(--danger) }

/* ============ 项目视图（屏二） ============ */
.projectview{ padding:0 16px 24px; flex:1 }
.pv-back{ display:inline-flex; align-items:center; gap:4px; padding:7px 10px 5px; margin-left:-10px;
  color:var(--fg2); font-size:14px }
.pv-back:hover{ color:var(--accent) }
.pv-head{ display:flex; align-items:center; gap:9px; margin-top:2px }
.pv-dot{ width:9px; height:9px; border-radius:3px; background:var(--tc,var(--fg3)); flex:0 0 9px }
.pv-title{ margin:0; font-size:20px; font-weight:600; letter-spacing:-.01em; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pv-sub{ font-size:12.5px; color:var(--fg3); margin:2px 0 10px; font-variant-numeric:tabular-nums }

/* ============ 设置页 ============ */
.manage{ padding:18px 16px 60px; max-width:1080px; margin:0 auto; width:100% }
.manage .set-group-title{ font-size:11.5px; color:var(--fg3); letter-spacing:.07em;
  margin:22px 0 10px; font-weight:500 }
.manage .set-group-title:first-child{ margin-top:4px }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--bd-soft); margin-bottom:16px; flex-wrap:wrap }
.tab{ padding:7px 12px; font-size:14px; color:var(--fg2); border-bottom:2px solid transparent; margin-bottom:-1px }
.tab:hover{ color:var(--fg) }
.tab.on{ color:var(--accent); border-bottom-color:var(--accent); font-weight:500 }
.panel{ background:var(--bg); border:1px solid var(--bd-soft); border-radius:var(--radius-lg); overflow:hidden }
.panel-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--bd-soft); flex-wrap:wrap }
.panel-head h3{ margin:0; font-size:13.5px; font-weight:600 }
.panel-head .ph-sub{ font-size:13.5px; color:var(--fg3) }
.panel-body{ padding:0; overflow-x:auto }
table.grid{ width:100%; min-width:720px; border-collapse:collapse; font-size:14px }
table.grid th{ text-align:left; font-size:11.5px; color:var(--fg3); font-weight:500; letter-spacing:.04em;
  padding:8px 12px; border-bottom:1px solid var(--bd-soft); background:var(--bg-page); white-space:nowrap }
table.grid td{ padding:8px 12px; border-bottom:1px solid var(--bd-soft); vertical-align:top }
table.grid tr:last-child td{ border-bottom:none }
table.grid tbody tr:hover{ background:var(--bg2) }
table.grid .c{ text-align:center; white-space:nowrap }
table.grid td .badge{ white-space:nowrap }
table.grid td .btnrow{ flex-wrap:nowrap }
/* 别名直接展开在行内，不藏进弹窗：维护别名时的典型动作是「扫一眼全部别名」 */
.alias-cell{ display:flex; flex-wrap:wrap; gap:4px; align-items:center }
.alias{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; padding:1px 7px;
  border-radius:999px; border:1px solid var(--bd); background:var(--bg2); color:var(--fg2) }
.alias.primary{ border-color:var(--accent-bd); background:var(--accent-bg); color:var(--accent) }
.alias button{ font-size:11px; opacity:.55; color:inherit }
.alias button:hover{ opacity:1; color:var(--danger) }
.alias-add{ font-size:11.5px; color:var(--accent); border:1px dashed var(--accent-bd); background:none;
  border-radius:999px; padding:1px 7px }
.num{ font-variant-numeric:tabular-nums }
.mini-input{ width:62px; height:26px; border-radius:6px; border:1px solid var(--bd); background:var(--bg);
  padding:0 6px; font-size:13.5px; outline:none }
.mini-input:focus{ border-color:var(--accent) }
.badge{ font-size:12px; border-radius:5px; padding:0 6px; height:19px; line-height:19px; display:inline-block;
  border:1px solid var(--bd); background:var(--bg2); color:var(--fg2) }
.badge.ok{ border-color:var(--ok-bd); background:var(--ok-bg); color:var(--ok) }
.badge.warn{ border-color:var(--warn-bd); background:var(--warn-bg); color:var(--warn) }
.badge.off{ opacity:.55 }
.alert{ display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:var(--radius);
  font-size:12.5px; margin-bottom:14px; border:1px solid; }
.alert.warn{ border-color:var(--warn-bd); background:var(--warn-bg); color:var(--warn) }
.alert.danger{ border-color:var(--danger-bd); background:var(--danger-bg); color:var(--danger) }
.alert.info{ border-color:var(--accent-bd); background:var(--accent-bg); color:var(--accent) }

/* ============ 撤销条 / 提示 ============ */
.toastbar{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:80;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:min(520px,92vw) }
.toast{ pointer-events:auto; display:flex; align-items:center; gap:12px; width:100%;
  background:var(--fg); color:var(--bg); border-radius:10px; padding:9px 12px; font-size:14px;
  box-shadow:var(--shadow); animation:toastIn .18s ease }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.toast .t-msg{ flex:1; min-width:0 }
.toast .t-act{ color:inherit; font-weight:600; font-size:12.5px; border:1px solid currentColor;
  border-radius:6px; padding:3px 9px; opacity:.85 }
.toast .t-act:hover{ opacity:1 }
.toast .t-bar{ position:absolute; }
.toast.err{ background:var(--danger) }

/* ============ 弹层 ============ */
.modal-root{ position:fixed; inset:0; z-index:90; display:none }
.modal-root.open{ display:block }
.scrim{ position:absolute; inset:0; background:rgba(0,0,0,.35) }
.modal{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(520px,92vw);
  max-height:86vh; overflow-y:auto; background:var(--bg); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); border:1px solid var(--bd-soft) }
.modal-head{ padding:14px 16px; border-bottom:1px solid var(--bd-soft); font-size:15px; font-weight:600 }
.modal-body{ padding:16px; display:flex; flex-direction:column; gap:14px }
.modal-foot{ padding:12px 16px; border-top:1px solid var(--bd-soft); display:flex; justify-content:flex-end; gap:8px }
.field .fhint{ font-size:11.5px; color:var(--fg3) }
.fielderr{ font-size:11.5px; color:var(--danger) }

/* ============ 移动端 ============ */
/* 底部标签栏的结构样式无条件声明，仅用 .only-mobile 控制显隐，避免断点里漏样式 */
.mobile-tabbar{ display:none; flex:0 0 auto; border-top:1px solid var(--bd-soft); background:var(--bg) }
.mobile-tabbar button{ flex:1; height:54px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; font-size:10.5px; color:var(--fg3); position:relative }
.mobile-tabbar button.on{ color:var(--accent) }
.mobile-tabbar button.on::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:22px; height:2px; border-radius:0 0 2px 2px; background:var(--accent) }
.mobile-tabbar .mt-ico{ font-size:16px; line-height:1 }
.mobile-tabbar .mt-badge{ position:absolute; top:6px; left:calc(50% + 7px); min-width:16px; height:16px;
  border-radius:8px; background:var(--danger); color:#fff; font-size:11px; line-height:16px;
  padding:0 4px; font-variant-numeric:tabular-nums }
.only-mobile{ display:none }
.drawer-scrim{ display:none }

@media (max-width:1279px){
  .app{ grid-template-columns:var(--sb) minmax(0,1fr) }
  .app.with-detail{ grid-template-columns:var(--sb) minmax(0,1fr) }
  .detail{ position:fixed; right:0; top:0; bottom:0; width:min(380px,92vw); z-index:70;
    transform:translateX(100%); transition:transform .2s ease; box-shadow:var(--shadow) }
  .app.detail-open .detail{ transform:none }
}
@media (max-width:900px){ .app{ --sb:64px } }

@media (max-width:767px){
  .only-mobile{ display:grid }
  .mobile-tabbar.only-mobile{ display:flex }
  .sidebar{ display:none }
  .app{ grid-template-columns:minmax(0,1fr) }
  .app.with-detail{ grid-template-columns:minmax(0,1fr) }

  /* 顶栏：视图名 + 统计副标题 + 搜索 + 同步点 */
  .topbar{ padding:0 12px; gap:8px }
  .topbar .spacer{ display:none }
  .topbar .search{ flex:1 1 auto; width:auto; min-width:0 }
  .topbar .search input{ min-width:0 }
  .sync-dot{ padding:0 7px }
  .sync-dot #syncText{ display:none }
  .stat-panel .sp-big{ padding:10px 14px }
  .stat-panel .spb-n{ font-size:25px }

  /* 录入条移到最底部常驻，位于底部标签栏之上；归类条紧贴录入条上沿 */
  .composer-slot{ order:5; padding:8px 12px; border-top:1px solid var(--bd-soft); background:var(--bg) }
  .viewhost{ order:1 }
  .mobile-tabbar{ order:9 }

  .row{ grid-template-columns:84px minmax(0,1fr) 36px; padding:2px 6px 2px 0; min-height:60px;
    align-items:flex-start }
  .row .r-title{ font-size:17px }
  .rowwrap > .row{ margin-left:6px }
  .row .done-btn{ min-width:64px; padding:0 12px; height:38px }
  .row .r-more{ width:36px; height:44px; font-size:20px }

  /* 横向滚动的筛选条：顶部留出间距，否则 chip 会紧贴顶栏分隔线，看起来像被切掉一半 */
  .filterbar{ padding:7px 12px 9px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none;
    -webkit-overflow-scrolling:touch }
  .filterbar::-webkit-scrollbar{ display:none }
  .listwrap{ padding:0 12px 16px }
  .uncat-hint{ width:calc(100% - 24px); margin:0 12px 10px }
  .uncat-head{ padding:2px 12px 0 }
  .projectview{ padding:0 12px 24px }
  .manage{ padding:14px 12px 24px }
  .toastbar{ bottom:76px }
}