:root{
  --bg:#f6f7fb; --panel:#ffffff; --panel2:#fbfcfe; --line:#e6e8ef; --ink:#1b1f2a; --ink2:#5c6478;
  --ink3:#8a92a6; --acc:#3b6ef2; --acc-soft:#eaf0ff; --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
  --r:12px; --sh:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --task-soft:#fdf1e7; --task-ink:#b45309; --task-bar:#f59e0b;
  --all-soft:#eefbf3; --all-ink:#15803d; --all-bar:#22c55e;
}
[data-theme=dark]{
  --bg:#14171f; --panel:#1b1f29; --panel2:#171b24; --line:#2a2f3d; --ink:#e8ebf2; --ink2:#a4adc0;
  --ink3:#78829a; --acc:#6b93ff; --acc-soft:#1e2740; --sh:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  --task-soft:#3a2c18; --task-ink:#f0b968; --task-bar:#d98a20;
  --all-soft:#18301f; --all-ink:#7fd6a1; --all-bar:#2f9e5c;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.55 -apple-system,"Segoe UI","Microsoft YaHei","PingFang SC",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
#app{display:flex;height:100vh;overflow:hidden}

/* ---------- icons: 一套手写 SVG 描边图标，尺寸只有四档 ---------- */
.i{width:18px;height:18px;flex:0 0 auto;display:inline-block;vertical-align:-4px}
.i-sm{width:14px;height:14px;vertical-align:-2px}
.i-lg{width:22px;height:22px;vertical-align:-5px}
.i-xl{width:30px;height:30px;stroke-width:1.4}

/* ---------- rail ---------- */
#rail{width:216px;flex:0 0 216px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:14px 10px 10px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 14px}
.brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--acc),#8b5cf6);
  color:#fff;display:grid;place-items:center}
.brand .logo .i{width:19px;height:19px;stroke-width:2}
.brand b{display:block;font-size:15px;letter-spacing:.2px}
.brand small{color:var(--ink3);font-size:11px}
#nav{flex:1;overflow:auto;display:flex;flex-direction:column;gap:2px}
.navgrp{color:var(--ink3);font-size:11px;letter-spacing:.8px;padding:14px 10px 5px;text-transform:uppercase}
.navit{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;
  color:var(--ink2);border:0;background:transparent;width:100%;text-align:left;transition:background .12s}
.navit:hover{background:var(--panel2);color:var(--ink)}
.navit.on{background:var(--acc-soft);color:var(--acc);font-weight:600}
.navit .ic{width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;opacity:.9}
.navit .ic .i{width:19px;height:19px}
.navit .n{margin-left:auto;font-size:11px;background:var(--line);color:var(--ink2);
  border-radius:20px;padding:1px 7px;min-width:20px;text-align:center}
.navit.on .n{background:#fff;color:var(--acc)}
.rail-foot{display:flex;gap:6px;padding-top:8px;border-top:1px solid var(--line)}
.rail-foot button{flex:1}

/* ---------- main ---------- */
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#topbar{height:56px;display:flex;align-items:center;gap:12px;padding:0 18px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.search{flex:1;max-width:640px;display:flex;align-items:center;gap:8px;background:var(--bg);
  border:1px solid var(--line);border-radius:9px;padding:0 12px;height:34px;color:var(--ink3)}
.search input{flex:1;border:0;background:transparent;outline:0;color:var(--ink)}
.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
#bellBtn{position:relative}
#bellDot{position:absolute;top:2px;right:2px;width:8px;height:8px;background:var(--bad);border-radius:50%;
  border:2px solid var(--panel)}
#view{flex:1;overflow:auto;padding:18px}

/* ---------- atoms ---------- */
button{cursor:pointer}
/* 图标 + 文字的按钮统一走 inline-flex，让描边图标与中文基线对齐 */
.ghost,.primary,.tiny{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ghost{background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--ink2)}
.ghost:hover{background:var(--panel2);color:var(--ink)}
.primary{background:var(--acc);color:#fff;border:1px solid transparent;border-radius:8px;padding:7px 14px;font-weight:600}
.primary:hover{filter:brightness(1.07)}
.tiny{font-size:12px;padding:4px 8px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink2)}
.tiny:hover{border-color:var(--acc);color:var(--acc)}
.tiny.on{background:var(--acc);color:#fff;border-color:var(--acc)}
h2.title{margin:0 0 14px;font-size:19px;display:flex;align-items:center;gap:10px}
h2.title .sub{font-size:12px;color:var(--ink3);font-weight:400}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.pad{padding:14px}
.grid{display:grid;gap:12px}
.kpi{padding:14px}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-.5px}
.kpi .k{color:var(--ink3);font-size:12px;display:flex;align-items:center;gap:6px;margin-top:2px}
.kpi .k .i{width:14px;height:14px;opacity:.75}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--panel2);border:1px solid var(--line);
  border-radius:20px;padding:1px 9px;font-size:12px;color:var(--ink2)}
.chip .i{width:13px;height:13px;opacity:.8}
.chip.tag{background:var(--acc-soft);border-color:transparent;color:var(--acc)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 8px}
.muted{color:var(--ink3)}
.mono{font-family:var(--mono)}
.empty{padding:44px 20px;text-align:center;color:var(--ink3)}
.empty .big{display:flex;justify-content:center;margin-bottom:8px;opacity:.45}
.empty .big .i{width:42px;height:42px;stroke-width:1.15}

/* ---------- lists ---------- */
.list{display:flex;flex-direction:column}
.item{display:flex;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);align-items:flex-start;cursor:pointer}
.item:last-child{border-bottom:0}
.item:hover{background:var(--panel2)}
.item.sel{background:var(--acc-soft)}
.item .cb{margin-top:3px;width:16px;height:16px;accent-color:var(--acc)}
.item .t{font-weight:600}
.item .t .chip{margin-left:6px;font-weight:400;vertical-align:1px}
.item .m{font-size:12px;color:var(--ink3);display:flex;gap:10px;flex-wrap:wrap;margin-top:3px;align-items:center}
.item .m .i{width:13px;height:13px}
.item>.i{margin-top:1px;color:var(--ink2)}
.item.done .t{text-decoration:line-through;color:var(--ink3);font-weight:400}
.split{display:grid;grid-template-columns:minmax(300px,1fr) 1.35fr;gap:14px;align-items:start}
.sticky-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.sticky{padding:12px 14px;border-radius:10px;min-height:120px;cursor:pointer;border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--sh);white-space:pre-wrap;word-break:break-word}
.sticky b{display:block;margin-bottom:6px}
.sticky.sel{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- calendar ---------- */
.calbar{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cgrid .hd{background:var(--panel2);padding:6px;text-align:center;font-size:12px;color:var(--ink3)}
.ccell{background:var(--panel);min-height:96px;padding:6px;position:relative;cursor:pointer}
.ccell:hover{background:var(--panel2)}
.ccell.out{opacity:.42}
.ccell.today{outline:2px solid var(--acc);outline-offset:-2px}
.ccell .d{font-size:12px;color:var(--ink3)}
.ccell.today .d{color:var(--acc);font-weight:700}
.ev{font-size:12px;border-radius:5px;padding:2px 6px;margin-top:3px;background:var(--acc-soft);
  color:var(--acc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:3px solid var(--acc)}
.ev.task{background:var(--task-soft);color:var(--task-ink);border-left-color:var(--task-bar)}
.ev.all{background:var(--all-soft);color:var(--all-ink);border-left-color:var(--all-bar)}
.ev.done{text-decoration:line-through;opacity:.72}
.ev[draggable=true],.item[draggable=true]{cursor:grab}
.ev .i{width:12px;height:12px;vertical-align:-2px}
.dragging{opacity:.4}
.ccell.drop,.lane.drop,.card.drop,.quadcell.drop{outline:2px dashed var(--acc);outline-offset:-2px;background:var(--acc-soft)}
.lane.selrange,.lane.selrange:hover{background:var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc)}
.wk .lane{user-select:none}
.occtog{min-width:26px;padding:4px 6px}
.occtog .i{width:15px;height:15px}
.occtog.on{background:var(--ok);color:#fff;border-color:var(--ok)}
/* ---------- 日视图时间轴 ---------- */
.daywrap{display:grid;grid-template-columns:minmax(320px,1.5fr) minmax(280px,1fr);gap:14px;align-items:start}
@media (max-width:1100px){.daywrap{grid-template-columns:1fr}}
.allday{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding:8px 10px;border:1px dashed var(--line);
  border-radius:9px;min-height:34px;align-items:center}
.daytl{position:relative;margin-top:10px;overflow-x:hidden}
.daytl .lane{position:absolute;left:62px;right:0;border-top:1px solid var(--line);cursor:copy;z-index:1}
.daytl .lane:hover{background:var(--panel2)}
.daytl .hrlab{position:absolute;left:0;width:54px;text-align:right;font-family:var(--mono);font-size:11px;
  color:var(--ink3);transform:translateY(-50%)}
.daytl .blk{position:absolute;overflow:hidden;border-radius:7px;padding:3px 7px;font-size:12px;line-height:1.35;
  background:var(--acc-soft);color:var(--acc);border-left:3px solid var(--acc);cursor:grab;z-index:2}
.daytl .blk b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.daytl .blk small{font-family:var(--mono);font-size:10px;opacity:.8}
.daytl .blk.task{background:var(--task-soft);color:var(--task-ink);border-left-color:var(--task-bar)}
.daytl .blk.done{opacity:.7;text-decoration:line-through}
.daytl .nowline{position:absolute;left:56px;right:0;border-top:2px solid var(--bad);z-index:3;pointer-events:none}
.daytl .nowline::before{content:"";position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--bad)}
/* ---------- 四象限 ---------- */
.quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:900px){.quad{grid-template-columns:1fr}}
.quadcell{min-height:180px}
.quadcell .pad.row>.i{width:17px;height:17px;color:var(--ink2)}
.quadcell.qi{border-top:3px solid var(--bad)}
.quadcell.qni{border-top:3px solid var(--acc)}
.quadcell.qui{border-top:3px solid var(--warn)}
.quadcell.qnu{border-top:3px solid var(--ink3)}
.quadcell .qrow{max-height:52vh;overflow:auto}
/* ---------- 图标选择器 / 星级 / 等级 ---------- */
.iconpick{gap:6px;flex-wrap:wrap}
.ipick{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--ink2);display:inline-flex;align-items:center;justify-content:center}
.ipick:hover{border-color:var(--acc);color:var(--acc)}
.ipick.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}
.mood{gap:1px;padding:1px 6px}
.mood .ms{display:inline-flex;opacity:.28}
.mood .ms .i{fill:currentColor;stroke-width:1.2}
.mood .ms.on{opacity:1;color:var(--warn)}
.lvl{gap:5px}
.lvl .i{fill:currentColor;stroke-width:1.2}
.lvl.g1{color:#b45309} .lvl.g2{color:#64748b} .lvl.g3{color:#0e7490}
[data-theme=dark] .lvl.g1{color:#fbbf24}[data-theme=dark] .lvl.g2{color:#cbd5e1}[data-theme=dark] .lvl.g3{color:#22d3ee}
/* ---------- 习惯打卡 ---------- */
.hicon{width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.hicon .i{width:18px;height:18px}
.streak{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--acc);line-height:1.1}
.streak small{display:block;font-family:inherit;font-size:10px;font-weight:400;color:var(--ink3)}
.heat{display:flex;gap:3px;overflow-x:auto;padding:4px 0 2px}
.hcol{display:grid;grid-template-rows:repeat(7,10px);gap:3px;flex:0 0 auto}
.hc{width:10px;height:10px;border-radius:2px;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line)}
.hc.on{background:var(--ok);box-shadow:none}
.hc.miss{background:var(--line)}
.hc.fut{opacity:.35}
.hc.idle{background:transparent;box-shadow:none}
.hrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hchip{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--ink2)}
.hchip .i{width:15px;height:15px}
.hchip small{font-family:var(--mono);color:var(--ink3)}
.hchip.on{background:var(--ok);border-color:var(--ok);color:#fff}
.hchip.on small{color:#fff;opacity:.85}
.hbars{display:flex;gap:6px;align-items:flex-end;margin-top:10px;overflow-x:auto}
.hbar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;flex:1 1 0;min-width:34px;font-size:11px;color:var(--ink3)}
.hbar.now{color:var(--acc);font-weight:700}
.hbar small{font-family:var(--mono);font-size:10px}
.hbcol{height:46px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.hbcol i{width:60%;max-width:20px;background:var(--acc);border-radius:3px 3px 0 0;min-height:2px;opacity:.8}
/* ---------- 子任务与批量操作 ---------- */
.item.sub .t{font-size:13px}
.subprog{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin-left:6px}
.subbar{display:inline-block;width:52px;height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.subbar i{display:block;height:100%;background:var(--acc)}
.subprog small{font-family:var(--mono);font-size:10px;color:var(--ink3)}
.bulkbar{position:sticky;top:0;z-index:5;background:var(--panel);border:1px solid var(--acc);border-radius:var(--r);
  padding:8px 10px;margin-bottom:10px;box-shadow:var(--sh);flex-wrap:wrap;gap:6px}
.bulkbar .inp{width:auto;min-width:120px;padding:5px 8px;font-size:12px}
.tbl .cb,.list .cb{cursor:pointer}
.wk{display:grid;grid-template-columns:52px repeat(7,1fr);gap:1px;background:var(--line)}
.wk .lane{background:var(--panel);min-height:44px;position:relative;padding:2px 4px;font-size:11px}
.wk .lane:hover{background:var(--panel2)}
.wk .hr{background:var(--panel2);color:var(--ink3);font-size:11px;text-align:right;padding:2px 6px}
.wk .dhead{background:var(--panel2);text-align:center;font-size:12px;padding:6px;color:var(--ink2)}
.wk .dhead.today{color:var(--acc);font-weight:700}

/* ---------- forms ---------- */
label.f{display:block;margin-bottom:10px}
label.f>span{display:block;font-size:12px;color:var(--ink2);margin-bottom:4px}
div.f{display:block;margin-bottom:10px}
div.f>span{display:block;font-size:12px;color:var(--ink2);margin-bottom:4px}
.inp{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;outline:0}
.inp:focus{border-color:var(--acc);background:var(--panel)}
/* one visible keyboard focus ring everywhere, including the clickable rows that got a tabindex */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
.inp:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
textarea.inp{min-height:96px;resize:vertical}
select.inp{appearance:auto}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow:auto}
.tabs button{background:transparent;border:0;border-bottom:2px solid transparent;padding:8px 13px;color:var(--ink2);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tabs button .i{width:15px;height:15px;opacity:.85}
.tabs button.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:600}
.sheet-body{display:grid;grid-template-columns:repeat(2,1fr);gap:0 14px}
.sheet-body .full{grid-column:1/-1}
/* 富文本正文：工具条 + contenteditable，备忘录与文章共用 */
.rtbar{gap:5px;margin-bottom:6px}
.rt{min-height:180px;max-height:46vh;overflow:auto}
.rt:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.rt:empty::before{content:attr(data-ph);color:var(--ink3)}
.rt p{margin:0 0 8px}
.rt h2{font-size:17px;margin:12px 0 6px}
.rt ul,.rt ol{margin:0 0 8px;padding-left:22px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(12,16,26,.42);display:grid;place-items:start center;z-index:60;padding-top:9vh}
.modal .sheet{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);
  width:min(560px,94vw);overflow:hidden}
.modal .sheet.wide{width:min(880px,96vw);max-height:82vh;overflow:auto}
.sheet>header{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.sheet>header b{font-size:15px}
.sheet>footer{padding:10px 16px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;
  color:var(--ink3);font-size:12px}
.sheet .content{padding:16px}
#paletteList,#searchList{list-style:none;margin:0;padding:0;max-height:52vh;overflow:auto}
#paletteList li{padding:9px 16px;display:flex;gap:10px;align-items:center;cursor:pointer}
#paletteList li.i{background:var(--acc-soft);color:var(--acc)}
#paletteList li .k{margin-left:auto;color:var(--ink3);font-size:11px}
kbd{background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;
  padding:0 5px;font-family:var(--mono);font-size:11px}

/* ---------- misc ---------- */
.menu{position:fixed;background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:var(--sh);
  z-index:80;padding:4px;min-width:170px}
.menu div{padding:7px 11px;border-radius:6px;cursor:pointer;color:var(--ink2);display:flex;align-items:center;gap:8px}
.menu div .i{width:15px;height:15px;opacity:.85}
.menu div:hover{background:var(--acc-soft);color:var(--acc)}
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:90}
.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:10px;
  box-shadow:var(--sh);padding:10px 14px;min-width:240px;animation:in .18s ease-out}
.toast.warn{border-left-color:var(--warn)} .toast.bad{border-left-color:var(--bad)}
.toast b{display:block}
.toast-act{float:right;margin:2px 0 6px 12px}
@keyframes in{from{transform:translateY(8px);opacity:0}}
.bar{height:8px;border-radius:6px;background:var(--line);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--acc)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--ink3);font-weight:500;font-size:12px;padding:8px 10px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--panel);white-space:nowrap}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl tr:hover td{background:var(--panel2)}
.num{text-align:right;font-family:var(--mono)}
.pos{color:var(--ok)} .neg{color:var(--bad)}
.spark{display:flex;align-items:flex-end;gap:3px;height:56px}
.spark>i{flex:1;background:var(--acc);border-radius:3px 3px 0 0;min-height:2px;opacity:.8}
.html{line-height:1.75;word-break:break-word}
.html img{max-width:100%;border-radius:8px}
.html blockquote{margin:0;padding:4px 12px;border-left:3px solid var(--acc);color:var(--ink2)}
.progress-list{display:flex;flex-direction:column;gap:9px}
@media (max-width:960px){#rail{width:60px;flex:0 0 60px}#rail .brand div,#rail .navit span.lb,#rail .navgrp,#rail .navit .n{display:none}
 .split{grid-template-columns:1fr}.sheet-body{grid-template-columns:1fr}}