/* 如期 Duly —— 设计规范见 redesign-plan.md §2.2：系统中文字体、4px 间距、三层阴影、半透明细描边、等宽数字 */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
  --r-sm:8px;--r:12px;--r-lg:16px;--r-xl:20px;
  --t-xs:12px;--t-sm:13px;--t-md:14px;--t-lg:16px;--t-xl:20px;--t-2xl:28px;
  --brand:#6366f1;--brand-2:#8b5cf6;--brand-soft:rgba(99,102,241,.10);--brand-ring:rgba(99,102,241,.55);
  --bg:#f6f7fb;--bg-tint:#eef0fa;--panel:#fff;--panel-2:#fafbfd;--input:#fafbfd;
  --text:#14161f;--text-2:#5b6072;--muted:#9097a8;
  --line:rgba(20,22,31,.07);--line-2:rgba(20,22,31,.11);
  --green:#16a34a;--amber:#e8890c;--red:#e5484d;
  --sh-1:0 1px 0 rgba(20,22,31,.03),0 1px 2px rgba(20,22,31,.05);
  --sh-2:0 1px 2px rgba(20,22,31,.04),0 4px 12px rgba(20,22,31,.05),0 12px 32px -12px rgba(20,22,31,.10);
  --sh-3:0 2px 4px rgba(20,22,31,.05),0 24px 64px -16px rgba(20,22,31,.28);
  --glow-a:rgba(139,92,246,.10);--glow-b:rgba(99,102,241,.08);
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light}
html.dark{
  --bg:#0e0f14;--bg-tint:#15161d;--panel:#16171f;--panel-2:#1b1c25;--input:#1b1c25;
  --text:#ecedf3;--text-2:#a3a7b7;--muted:#6c7184;
  --line:rgba(255,255,255,.06);--line-2:rgba(255,255,255,.10);--brand:#818cf8;--brand-soft:rgba(129,140,248,.14);
  --sh-1:0 0 0 1px rgba(255,255,255,.03);
  --sh-2:0 0 0 1px rgba(255,255,255,.02),0 8px 24px rgba(0,0,0,.35);
  --sh-3:0 0 0 1px rgba(255,255,255,.06),0 30px 80px rgba(0,0,0,.6);
  --glow-a:rgba(139,92,246,.13);--glow-b:rgba(99,102,241,.06);
  color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:var(--t-md)/1.5 var(--font);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto 0;height:420px;pointer-events:none;z-index:0;
  background:radial-gradient(60% 100% at 70% 0,var(--glow-a),transparent 70%),radial-gradient(50% 80% at 20% 0,var(--glow-b),transparent 70%)}
#root{position:relative;z-index:1}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
a{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--brand-ring)!important;border-radius:var(--r-sm)}
.boot{min-height:100vh;display:grid;place-items:center}
.logo-img{width:28px;height:28px;flex:none;display:block}
.boot .logo-img{width:48px;height:48px;animation:pulse 1.2s var(--ease) infinite alternate}
@keyframes pulse{to{transform:scale(.88);opacity:.6}}
svg.i{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 布局：侧栏 + 居中内容（最宽 1680） ---------- */
.wrap{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
aside.side{position:sticky;top:0;height:100vh;padding:var(--s5) var(--s3);display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 70%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px;font-weight:650;font-size:16px;letter-spacing:.02em;text-decoration:none;color:var(--text)}
.brand small{display:block;font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.08em;line-height:1.2}
.nav a{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-sm);color:var(--text-2);text-decoration:none;font-size:var(--t-sm);font-weight:500;transition:background-color .15s,color .15s}
.nav a svg{width:16px;height:16px;flex:none}
.nav a:hover{background:var(--brand-soft);color:var(--text)}
.nav a.on{background:var(--panel);color:var(--text);box-shadow:var(--sh-1),0 0 0 1px var(--line)}
.nav a.on svg{color:var(--brand)}
.nav a .k{margin-left:auto;font:11px var(--mono);color:var(--muted)}
.nav .sep{height:1px;background:var(--line);margin:10px 8px}
.side .foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding:10px;font-size:12px;color:var(--muted);line-height:1.4}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.15);flex:none}
.dot.off{background:var(--muted);box-shadow:0 0 0 3px rgba(144,151,168,.15)}
.dot.bad{background:var(--red);box-shadow:0 0 0 3px rgba(229,72,77,.15)}
main.content{width:100%;max-width:1680px;margin:0 auto;padding:0 var(--s8) var(--s10);min-width:0}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s3);padding:var(--s5) 0 var(--s4);margin-bottom:var(--s2);
  background:linear-gradient(var(--bg) 62%,transparent)}
.top>div:first-child{min-width:0}
h1{font-size:var(--t-2xl);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.15}
.sub{color:var(--text-2);font-size:var(--t-sm);margin-top:4px}
.top .sp{flex:1}
h2{font-size:var(--t-lg);margin:0 0 14px;font-weight:650}
h3{font-size:var(--t-md);margin:18px 0 8px;font-weight:650}
.search{display:flex;align-items:center;gap:8px;height:36px;padding:0 8px 0 12px;width:280px;border-radius:var(--r);background:var(--panel);box-shadow:var(--sh-1);border:1px solid var(--line);color:var(--muted);font-size:var(--t-sm);cursor:pointer;text-align:left}
.search svg{width:15px;height:15px;flex:none}
.search span{flex:1}
.kbd{font:11px var(--mono);padding:2px 6px;border-radius:6px;border:1px solid var(--line-2);color:var(--muted);background:var(--panel-2);white-space:nowrap}

/* ---------- 按钮 / 表单 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r);border:0;color:#fff;white-space:nowrap;cursor:pointer;
  font-weight:600;font-size:var(--t-sm);text-decoration:none;
  background:linear-gradient(180deg,#7577f5,#5b5bea);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(60,60,200,.3),0 6px 16px -6px rgba(91,91,234,.6);
  transition:transform .15s var(--ease),box-shadow .2s,opacity .2s,background-color .2s}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(60,60,200,.3),0 10px 22px -8px rgba(91,91,234,.75)}
.btn:active{transform:scale(.97)}
.btn svg{width:15px;height:15px;flex:none;stroke-width:2.2}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn.ghost{background:var(--panel);color:var(--text);border:1px solid var(--line-2);box-shadow:var(--sh-1)}
.btn.ghost:hover{background:var(--panel-2)}
.btn.danger{background:linear-gradient(180deg,#ef5b60,#d93d42);box-shadow:0 6px 16px -6px rgba(229,72,77,.6)}
.btn.small{height:30px;padding:0 12px;font-size:12px;border-radius:9px}
.btn.link{background:none;box-shadow:none;color:var(--brand);padding:0 6px;height:auto;border:0}
.btn.plain{background:transparent;box-shadow:none;color:var(--text-2);border:0}
label.f{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin:12px 0 5px}
.input,select.input,textarea.input{width:100%;height:38px;background:var(--input);border:1px solid var(--line-2);border-radius:10px;padding:0 12px;font-size:var(--t-md);outline:none;transition:border-color .15s,box-shadow .15s,background-color .15s}
textarea.input{height:auto;min-height:72px;padding:9px 12px;resize:vertical}
input[type=file].input{height:auto;padding:7px 10px}
.input:focus{border-color:transparent;background:var(--panel);box-shadow:0 0 0 1px var(--brand),0 0 0 4px rgba(99,102,241,.16)!important}
.input.bad{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,72,77,.12)}
.row{display:flex;gap:12px}.row>*{flex:1;min-width:0}
.hint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.6}
.hint.e{color:var(--red)}
.hint u{cursor:pointer}
.err{color:var(--red);font-size:13px;margin-top:10px;min-height:1em}
.switch{display:flex;align-items:center;gap:10px;font-size:var(--t-md);cursor:pointer;margin:12px 0}
.switch input{appearance:none;-webkit-appearance:none;width:34px;height:20px;border-radius:99px;background:var(--line-2);position:relative;cursor:pointer;transition:background-color .2s;flex:none;margin:0}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s var(--spring)}
.switch input:checked{background:var(--brand)}
.switch input:checked::after{transform:translateX(14px)}
.seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--bg-tint);border:1px solid var(--line);gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:4px 10px;border-radius:7px;font-size:var(--t-xs);color:var(--text-2);font-weight:500;cursor:pointer;transition:background-color .15s,color .15s}
.seg button.on{background:var(--panel);color:var(--text);box-shadow:var(--sh-1),0 0 0 1px var(--line)}

/* ---------- 卡片 ---------- */
.card{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--sh-2);border:1px solid var(--line)}
.enter{animation:up .5s var(--ease) both}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s6)}
.stat{padding:var(--s4) var(--s5);position:relative;overflow:hidden;min-height:104px}
.stat .l{font-size:var(--t-xs);color:var(--text-2);font-weight:500}
.stat .v{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:6px;line-height:1.2;white-space:nowrap}
.stat .v small{font-size:var(--t-md);color:var(--muted);font-weight:600;margin-left:3px}
.stat .v.bad{color:var(--red)}
.stat .d{font-size:var(--t-xs);color:var(--muted);margin-top:2px}
.stat svg.spark{position:absolute;right:14px;bottom:14px;width:84px;height:28px}
.dash{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s6);align-items:start}
.dash>*{min-width:0}
@media (min-width:1800px){.dash{grid-template-columns:minmax(0,1fr) 400px}}
.rail{display:flex;flex-direction:column;gap:var(--s4);position:sticky;top:96px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:var(--s4) var(--s5) 0;font-weight:650}
.card-h .lnk{font-weight:500;font-size:var(--t-xs);color:var(--muted);text-decoration:none}
.card-h .lnk:hover{color:var(--brand)}
.card-h .nb{border:0;background:none;color:var(--muted);cursor:pointer;width:24px;height:24px;border-radius:6px;font-size:15px}
.card-h .nb:hover{background:var(--bg-tint);color:var(--text)}
.card-b{padding:var(--s4) var(--s5) var(--s5)}
.sec-h{display:flex;align-items:center;gap:10px;margin:0 0 var(--s3);flex-wrap:wrap}
.sec-h h2{margin:0}
.sec-h .seg{margin-left:auto}

/* 列表行 */
.list{padding:6px;display:flex;flex-direction:column}
.list.bare{padding:0;gap:10px}
.grp{font-size:11px;font-weight:650;color:var(--muted);letter-spacing:.06em;padding:12px 14px 6px}
.item{display:grid;grid-template-columns:40px minmax(0,1fr) 112px 104px 40px 86px;align-items:center;gap:var(--s4);padding:10px 14px;border-radius:var(--r);cursor:pointer;
  position:relative;transition:background-color .15s,transform .2s var(--ease);will-change:transform}
.item:hover{background:var(--panel-2)}
.list.bare .item{background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-1)}
.list.bare .item:hover{box-shadow:var(--sh-2)}
.item.compact{grid-template-columns:40px minmax(0,1fr) auto auto}
.ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;flex:none;position:relative;overflow:hidden;
  background:var(--g,#6366f1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.3),0 2px 6px -2px rgba(0,0,0,.25);letter-spacing:-.02em}
.ic svg{width:20px;height:20px}
.ic.sm{width:24px;height:24px;border-radius:7px;font-size:11px}.ic.sm svg{width:13px;height:13px}
.ic.lg{width:44px;height:44px;border-radius:12px}
.meta{min-width:0}
.meta b,.nm{display:block;font-weight:600;font-size:var(--t-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta .line2{font-size:var(--t-xs);color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:var(--t-xs);font-weight:600;white-space:nowrap;justify-self:start}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.r{color:var(--red);background:rgba(229,72,77,.10)}.a{color:var(--amber);background:rgba(232,137,12,.11)}.g{color:var(--green);background:rgba(22,163,74,.10)}.n{color:var(--muted);background:rgba(144,151,168,.12)}
.price{text-align:right;font-weight:650;white-space:nowrap}
.price small{display:block;font-weight:500;font-size:11px;color:var(--muted)}
.ring{width:40px;height:40px;position:relative;flex:none}
.ring svg{transform:rotate(-90deg);display:block;width:40px;height:40px}
.ring .bar{transition:stroke-dashoffset 1s var(--ease),stroke .3s}
.ring em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}
.ok{height:30px;padding:0 12px;border:1px solid var(--line-2);background:var(--panel);color:var(--text);border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;position:relative;
  box-shadow:var(--sh-1);white-space:nowrap;transition:transform .15s var(--ease),background-color .25s,color .25s,border-color .25s}
.ok:hover{border-color:var(--brand);color:var(--brand)}
.ok:active{transform:scale(.92)}
.ok.done{background:var(--green);color:#fff;border-color:var(--green);animation:pop .5s var(--spring)}
@keyframes pop{0%{transform:scale(.85)}100%{transform:scale(1)}}
.acts{display:flex;gap:6px;justify-content:flex-end}

/* 右栏：迷你日历 / 时间线 / 环图 */
.mcal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:12px}
.mcal .w{color:var(--muted);font-size:11px;padding-bottom:4px}
.mcal .c{height:32px;display:grid;place-items:center;border-radius:8px;position:relative;color:var(--text-2);border:0;background:none;font:inherit;font-size:12px;cursor:default}
.mcal .c.has{cursor:pointer}
.mcal .c.has:hover{background:var(--bg-tint)}
.mcal .c.o{opacity:.35}
.mcal .c.t{background:var(--brand);color:#fff;font-weight:700}
.mcal .c .ds{position:absolute;bottom:3px;left:0;right:0;display:flex;gap:2px;justify-content:center}
.mcal .c .ds i{width:4px;height:4px;border-radius:50%;background:var(--c)}
.mcal .c.t .ds i{background:#fff}
.tl{position:relative;padding-left:18px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(var(--red),var(--amber) 30%,var(--line-2) 70%)}
.ti{position:relative;display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;border-radius:8px}
.ti::before{content:"";position:absolute;left:-17px;width:10px;height:10px;border-radius:50%;background:var(--panel);border:2px solid var(--c,var(--muted))}
.ti .when{width:46px;flex:none;font-size:11px;color:var(--muted);font-weight:600}
.ti .what{flex:1;min-width:0;font-size:var(--t-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti .how{font-size:var(--t-sm);font-weight:650;white-space:nowrap}
.ti.none .what{color:var(--muted);font-weight:400}
.donut{display:flex;gap:var(--s5);align-items:center}
.donut svg{width:132px;height:132px;flex:none}
.donut svg circle.arc{transition:stroke-dasharray .9s var(--ease)}
.legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;font-size:12px}
.legend div{display:flex;align-items:center;gap:8px}
.legend i{width:8px;height:8px;border-radius:3px;background:var(--c);flex:none}
.legend span{flex:1;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{text-align:center;padding:44px 20px;color:var(--text-2)}
.empty svg.art{width:120px;height:90px;margin-bottom:8px}
.empty h2{margin:6px 0}
.banner{padding:11px 14px;border-radius:var(--r);margin-bottom:var(--s4);font-size:var(--t-sm);display:flex;gap:10px;align-items:center;justify-content:space-between}
.banner.warn{background:rgba(229,72,77,.08);color:var(--red);border:1px solid rgba(229,72,77,.22)}
.banner.info{background:var(--brand-soft);color:var(--text);border:1px solid rgba(99,102,241,.22)}

/* ---------- 庆祝小点 ---------- */
.confetti{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.confetti i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--c);left:-3px;top:-3px;animation:burst .7s var(--ease) forwards}
@keyframes burst{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--x),var(--y)) scale(.3);opacity:0}}

/* ---------- 骨架屏（带一道很淡的光） ---------- */
.skel{position:relative;overflow:hidden;background:var(--bg-tint);border-radius:10px}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);transform:translateX(-100%);animation:shimmer 1.4s var(--ease) infinite}
html.dark .skel::after{background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.05) 50%,transparent 80%)}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ---------- 工具栏 / 筛选 ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:var(--s4)}
.toolbar .input{max-width:280px}
.toolbar select.input{max-width:160px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:28px;padding:0 10px;display:inline-flex;align-items:center;border-radius:8px;border:1px solid var(--line-2);font-size:12px;color:var(--text-2);background:var(--panel);text-decoration:none;cursor:pointer;transition:all .15s}
.chip:hover{color:var(--text);background:var(--panel-2)}
.chip.on{border-color:transparent;background:var(--brand-soft);color:var(--brand);font-weight:600;box-shadow:inset 0 0 0 1px rgba(99,102,241,.35)}

/* ---------- 弹窗 ---------- */
.overlay{position:fixed;inset:0;background:rgba(12,13,20,.36);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:50;padding:24px;animation:fade .2s ease both}
.overlay.out{animation:fade .18s ease reverse both}
.modal{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-3);width:100%;max-width:560px;max-height:calc(100vh - 48px);overflow:auto;padding:var(--s6);animation:zoom .28s var(--ease) both;border:1px solid var(--line)}
.modal.wide{max-width:760px}
.overlay.out .modal{animation:zoom .18s ease reverse both}
.modal .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.modal .head h2{margin:0;font-size:var(--t-xl)}
.x{border:0;background:var(--bg-tint);width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:17px;color:var(--text-2)}
.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;flex-wrap:wrap}
.modal .actions .left{margin-right:auto}
@keyframes fade{from{opacity:0}}
@keyframes zoom{from{opacity:0;transform:scale(.96) translateY(8px)}}
@keyframes sheet{from{transform:translateY(100%)}}

/* ---------- 提示条 ---------- */
#toast-root{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#1b1d27;color:#fff;padding:10px 14px;border-radius:var(--r);font-size:var(--t-sm);box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;gap:12px;align-items:center;pointer-events:auto;animation:toast .35s var(--ease) both}
html.dark .toast{background:#ecedf3;color:#14161f}
.toast.out{animation:toast .25s ease reverse both}
.toast button{background:none;border:0;color:#a5b4fc;font-weight:600;cursor:pointer;padding:0}
html.dark .toast button{color:#4f46e5}
.toast.error{background:var(--red);color:#fff}
@keyframes toast{from{opacity:0;transform:translateY(16px) scale(.96)}}

/* ---------- 登录 / 向导 ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth .card{width:100%;max-width:420px;padding:30px;box-shadow:var(--sh-3)}
.auth .brand{justify-content:center;margin-bottom:4px;font-size:20px;padding:0 0 6px}
.auth .brand .logo-img{width:36px;height:36px}
.steps{display:flex;gap:6px;justify-content:center;margin:14px 0 18px}
.steps i{width:28px;height:5px;border-radius:9px;background:var(--line-2);transition:background-color .3s}
.steps i.on{background:var(--brand)}
.step{animation:slide .35s var(--ease) both}
@keyframes slide{from{opacity:0;transform:translateX(24px)}}

/* ---------- 设置页 ---------- */
.settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.settings>.sec{margin:0}
.settings>.sec.full{grid-column:1/-1}
@media (max-width:1180px){.settings{grid-template-columns:minmax(0,1fr)}}
.sec{padding:var(--s5) var(--s6);margin-bottom:var(--s4)}
.sec>h2{display:flex;align-items:center;gap:8px}
.kv{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:var(--t-md);gap:12px}
.kv:first-of-type{border-top:0}
.mono{font-family:var(--mono);font-size:13px}
.codebox{background:var(--input);border:1px solid var(--line);border-radius:var(--r);padding:12px;white-space:pre-wrap;word-break:break-all;font-size:13px;line-height:1.6;max-height:320px;overflow:auto}
table.t{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
table.t td,table.t th{padding:9px 8px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
table.t th{color:var(--muted);font-weight:500;font-size:12px;border-top:0}
details.help{background:var(--bg-tint);border-radius:var(--r);padding:10px 14px;margin-top:12px;font-size:13px;line-height:1.75}
details.help summary{cursor:pointer;color:var(--brand);font-weight:600}
.timeline .ev{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:flex-start}
.timeline .ev:first-child{border-top:0}
.timeline .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);margin-top:6px;flex:none;box-shadow:0 0 0 3px var(--brand-soft)}
.timeline .ev.undone{opacity:.5}
.timeline .ev .body{flex:1;min-width:0;font-size:var(--t-md)}
.timeline .ev .when{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- 模板 ---------- */
.tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;margin:10px 0 4px}
.tpl{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel);cursor:pointer;font-size:12px;transition:transform .15s var(--ease),border-color .15s;text-align:left;min-width:0}
.tpl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl:hover{transform:translateY(-1px);border-color:var(--brand)}

/* ---------- 日历页 ---------- */
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cal-head .hint{margin:0 0 0 auto}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cal .wd{font-size:12px;color:var(--muted);text-align:center;padding-bottom:4px}
.cal .day{min-height:104px;padding:8px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);font-size:12px;display:flex;flex-direction:column;gap:4px;overflow:hidden;box-shadow:var(--sh-1)}
.cal .day.out{opacity:.35;box-shadow:none}
.cal .day.today{box-shadow:0 0 0 2px var(--brand),var(--sh-2)}
.cal .day .d{font-weight:650;color:var(--text-2)}
.cal .ev{display:flex;align-items:center;gap:5px;border-radius:6px;padding:2px 6px;background:var(--bg-tint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal .ev i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}

/* ---------- 时间线页 ---------- */
.content.narrow>*{max-width:1180px;margin-left:auto;margin-right:auto}
.tday{display:grid;grid-template-columns:92px minmax(0,1fr);gap:var(--s4);position:relative;padding-bottom:var(--s4)}
.tday::before{content:"";position:absolute;left:99px;top:18px;bottom:-4px;width:2px;background:var(--line-2);border-radius:2px}
.tday:last-child::before{display:none}
.tday .date{text-align:right;padding-top:12px}
.tday .date b{display:block;font-size:var(--t-md)}
.tday .date span{font-size:12px;color:var(--muted)}
.tday .date.today b{color:var(--brand)}
.tday .date.past b{color:var(--red)}
.tday .evs{display:flex;flex-direction:column;gap:8px;padding-left:18px;position:relative}
.tday .evs::before{content:"";position:absolute;left:-1px;top:17px;width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--c,var(--muted));transform:translateX(-50%)}

.tday .item.proj{opacity:.7}
.tday .item.proj .ok{display:none}

/* ---------- 手机底部导航：5 等分、中间是“添加” ---------- */
.tabbar{display:none}
.mhead{display:none}
@media (max-width:1180px){.dash{grid-template-columns:minmax(0,1fr)}.rail{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.item{grid-template-columns:40px minmax(0,1fr) auto 40px 86px}}
@media (max-width:700px){
  .wrap{display:block}
  aside.side{display:none}
  main.content{padding:0 14px calc(104px + env(safe-area-inset-bottom))}
  .top{display:none}
  .mhead{position:sticky;top:0;z-index:20;margin:0 -14px 14px;padding:12px 16px 10px;display:flex;align-items:center;gap:10px;
    background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--line)}
  .mhead .logo-img{width:26px;height:26px}
  .mhead b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mhead .sp{flex:1}
  .mhead .icb{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--panel);box-shadow:var(--sh-1);border:1px solid var(--line);color:var(--text-2);cursor:pointer;flex:none;padding:0}
  .mhead .icb svg{width:16px;height:16px}
  h1{font-size:22px}
  .stats{display:none}
  .hero{display:block!important}
  .rail{grid-template-columns:minmax(0,1fr)}
  .item{grid-template-columns:40px minmax(0,1fr) auto;gap:12px;padding:10px}
  .item .ring,.item .ok,.item .ok-ph,.item .acts{display:none}
  .list{padding:4px}
  .tabbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));height:64px;border-radius:22px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;z-index:40;
    background:color-mix(in srgb,var(--panel) 82%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);box-shadow:var(--sh-3);border:1px solid var(--line)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;color:var(--muted);text-decoration:none;font-weight:500;height:100%;min-width:0}
  .tabbar a svg{width:21px;height:21px}
  .tabbar a.on{color:var(--brand);font-weight:600}
  .tabbar .fab{justify-self:center;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;border:0;cursor:pointer;padding:0;
    background:linear-gradient(180deg,#7577f5,#5b5bea);box-shadow:0 8px 18px -6px rgba(91,91,234,.7);transition:transform .2s var(--spring)}
  .tabbar .fab:active{transform:scale(.9)}
  .tabbar .fab svg{stroke:#fff;width:22px;height:22px;stroke-width:2.4}
  .overlay{align-items:flex-end;padding:0}
  .modal{border-radius:22px 22px 0 0;max-height:92vh;animation:sheet .32s var(--ease) both;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .overlay.out .modal{animation:sheet .2s ease reverse both}
  .row{flex-direction:column;gap:0}
  .cal{gap:3px}.cal .day{min-height:58px;padding:4px;border-radius:8px}.cal .ev span{display:none}.cal .ev{padding:2px;justify-content:center}
  .cal-head .hint{margin-left:0;width:100%}
  .toolbar .input,.toolbar select.input{max-width:none}
  #toast-root{bottom:calc(92px + env(safe-area-inset-bottom))}
  table.t .hide-m{display:none}
  .sec{padding:var(--s4)}
  .tday{grid-template-columns:56px minmax(0,1fr);gap:10px}
  .tday::before{left:63px}
  .tday .evs{padding-left:14px}
}
.hero{display:none;border-radius:var(--r-xl);padding:18px;color:#fff;margin-bottom:var(--s5);position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0,#a78bfa 0,#6366f1 45%,#4f46e5 100%);box-shadow:0 14px 30px -14px rgba(79,70,229,.7)}
.hero .l{font-size:12px;opacity:.85}
.hero .v{font-size:34px;font-weight:750;letter-spacing:-.02em;margin:4px 0 12px;line-height:1.1}
.hero .row2{display:flex;gap:18px;font-size:12px}
.hero .row2 b{display:block;font-size:16px}
.hero svg{position:absolute;right:-30px;top:-30px;width:150px;height:150px;opacity:.18}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* 行内状态标签：桌面在单独一列（.gp），窄屏放进第二行（.mp） */
.pill.mp{display:none}
@media (max-width:1000px){.item .pill.gp{display:none}}
@media (max-width:700px){.item .pill.mp{display:inline-flex;height:20px;margin-right:6px;vertical-align:1px}.item .pill.gp{display:none}}

/* ---------- 添加 / 编辑弹窗（v1.2） ---------- */
.modal.edit{max-width:920px;padding:0;overflow:hidden;display:flex}
.ef{display:grid;grid-template-columns:minmax(0,1fr) 300px;width:100%;max-height:calc(100vh - 48px)}
.mform{padding:var(--s6) var(--s6) 0;overflow:auto;min-width:0}
.mhd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:var(--s4)}
.mhd h2{margin:0;font-size:var(--t-xl);letter-spacing:-.01em}
.mhd .sub{color:var(--muted)}
.fs{border:0;margin:0 0 var(--s5);padding:0;min-width:0}
.fs legend{font-size:11px;font-weight:650;letter-spacing:.08em;color:var(--muted);margin-bottom:2px;padding:0}
.fs .fld>label.f{margin-top:8px}
.f3{display:grid;grid-template-columns:1fr .8fr auto;gap:var(--s3);align-items:start}
.f3 .seg{height:38px;align-items:center;flex-wrap:nowrap}
details.more summary{cursor:pointer;font-size:var(--t-sm);font-weight:600;color:var(--text-2);list-style:none}
details.more summary::before{content:"›";display:inline-block;margin-right:6px;transition:transform .2s var(--ease)}
details.more[open] summary::before{transform:rotate(90deg)}
.custom-rem{margin-top:6px}
.cp{border:1px solid var(--line-2);border-radius:var(--r);padding:var(--s3);background:var(--panel-2);margin-top:6px}
.sw{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:7px;align-items:center}
.sw button{aspect-ratio:1;width:100%;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--c);color:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .15s var(--spring),box-shadow .15s}
.sw button:hover{transform:scale(1.1)}
.sw button.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px currentColor}
.sw .auto{font-size:9px;font-weight:700;color:#fff;background:conic-gradient(#f43f5e,#f59e0b,#22c55e,#06b6d4,#6366f1,#d946ef,#f43f5e)}
.sw .auto.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--brand)}
.huerow{margin-top:var(--s3);display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-2)}
.huerow>span{white-space:nowrap}
input.hue{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:10px;border-radius:99px;margin:0;cursor:pointer;
  background:linear-gradient(90deg,hsl(0,75%,55%),hsl(60,75%,50%),hsl(120,60%,45%),hsl(180,65%,45%),hsl(240,70%,60%),hsl(300,65%,55%),hsl(360,75%,55%));box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
input.hue::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--thumb,#6366f1);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
input.hue::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--thumb,#6366f1);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
input.hex{width:84px;height:28px;padding:0 8px;border-radius:7px;background:var(--panel);border:1px solid var(--line-2);font-size:12px;outline:none}
input.hex.bad{border-color:var(--red)}
.auto-note{font-size:12px;color:var(--muted);margin-top:var(--s3)}
.mfoot{position:sticky;bottom:0;display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:var(--s4) 0 var(--s5);margin-top:var(--s2);background:linear-gradient(transparent,var(--panel) 30%)}
.mfoot .l{margin-right:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.prev{background:linear-gradient(180deg,var(--bg-tint),var(--bg));border-left:1px solid var(--line);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s4);overflow:auto}
.prev .cap{font-size:11px;font-weight:650;letter-spacing:.08em;color:var(--muted)}
.pcard{border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--sh-2);border:1px solid var(--line);padding:var(--s4)}
.pcard .t{display:flex;gap:12px;align-items:center;min-width:0}
.pcard .big{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:var(--s4) 0 2px;line-height:1.2}
.pcard .line2{font-size:12px;color:var(--muted);margin-top:2px}
.pbar{height:6px;border-radius:9px;background:var(--bg-tint);overflow:hidden;margin:var(--s3) 0 8px}
.pbar i{display:block;height:100%;border-radius:9px;background:var(--g,var(--brand));transition:width .5s var(--ease)}
.facts{font-size:12px;color:var(--text-2);display:flex;flex-direction:column;gap:8px}
.facts div{display:flex;justify-content:space-between;gap:10px}
.facts b{color:var(--text);font-weight:600;text-align:right}
@media (max-width:860px){.ef{grid-template-columns:minmax(0,1fr)}.prev{display:none}}
@media (max-width:700px){
  .modal.edit{max-height:94vh}
  .ef{max-height:94vh}
  .mform{padding:var(--s5) var(--s4) 0}
  .f3{grid-template-columns:1fr 1fr}.f3>.fld:last-child{grid-column:1/-1}
  .sw{grid-template-columns:repeat(7,minmax(0,1fr))}
  .mfoot{padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom))}
  .mfoot .l.keys{display:none}
}
/* 1.3 汇率 */
.switch.tight{margin:0}
.lockc{display:flex;align-items:center;gap:6px;flex:none;font-size:var(--t-sm);color:var(--muted);cursor:pointer}
.lockc input{accent-color:var(--brand)}
/* 2.0 命令面板 */
.modal.pal{width:min(640px,calc(100vw - 32px));padding:0;overflow:hidden;align-self:flex-start;margin-top:12vh}
.palette{display:flex;flex-direction:column;max-height:min(560px,70vh)}
.pal-q{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pal-q svg{width:18px;height:18px;color:var(--muted);flex:none}
.palette input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:var(--t-lg);color:var(--text);padding:4px 0}
.pal-list{overflow-y:auto;padding:6px 8px 8px;flex:1}
.pal-g{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted);padding:10px 10px 4px}
.pal-i{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-sm,8px);cursor:pointer;color:var(--text);font-size:var(--t-md)}
.pal-i.on{background:var(--brand-soft,rgba(99,102,241,.1))}
.pal-i.on .pal-t{color:var(--brand)}
.pal-i .av{width:28px;height:28px;font-size:12px;border-radius:8px}
.pal-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--panel-2);color:var(--text-2);flex:none}
.pal-ic svg{width:16px;height:16px}
.pal-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-m{font-size:var(--t-sm);color:var(--muted)}
.pal-empty{padding:28px 12px;text-align:center;color:var(--muted);font-size:var(--t-sm)}
.pal-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
@media (max-width:700px){.modal.pal{margin-top:8px;align-self:flex-start;border-radius:var(--r-lg,16px)}.pal-foot{display:none}}
/* 2.0 续费成功：整行弹一下并短暂泛绿 */
.item.renewed{animation:renewed .7s var(--spring)}
@keyframes renewed{0%{transform:scale(1)}30%{transform:scale(1.015);background:rgba(34,197,94,.10)}100%{transform:scale(1)}}
.tick{display:inline-block;font-variant-numeric:tabular-nums}
@media (max-width:700px){.overlay:has(.pal){align-items:flex-start;padding:10px}.modal.pal{border-radius:var(--r-lg);animation:zoom .22s var(--ease) both;padding-bottom:0;max-height:80vh}}
/* 2.0.1 对话框（替代浏览器自带弹窗） */
.modal.dlg-box{max-width:440px;padding:var(--s6)}
.dlg{display:flex;gap:16px;align-items:flex-start}
.dlg-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none}
.dlg-ic svg{width:22px;height:22px}
.dlg-ic.danger{background:rgba(229,72,77,.12);color:var(--red)}
.dlg-ic.q,.dlg-ic.info{background:var(--brand-soft);color:var(--brand)}
.dlg-b{flex:1;min-width:0}
.dlg-b h2{margin:2px 0 6px;font-size:var(--t-lg);line-height:1.35}
.dlg-b p{margin:0;color:var(--text-2);font-size:var(--t-md);line-height:1.6;overflow-wrap:anywhere}
.dlg-in{margin-top:14px}
.dlg-in .input{width:100%}
.dlg-in .input[aria-invalid=true]{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,72,77,.15)}
.dlg-err{min-height:18px;margin-top:6px;font-size:var(--t-sm);color:var(--red)}
.modal.dlg-box .actions{margin-top:22px}
.modal.shake{animation:shake .32s var(--ease)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media (max-width:700px){.modal.dlg-box{max-width:none}.modal.dlg-box .actions{display:grid;grid-template-columns:1fr 1fr}.modal.dlg-box .actions .btn:only-child{grid-column:1/-1}}
/* 原生日期输入：统一外观 */
input[type=date].input{min-height:40px;color-scheme:light;font-variant-numeric:tabular-nums}
html.dark input[type=date].input{color-scheme:dark}
input[type=date].input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55;border-radius:6px;padding:4px;transition:opacity .15s,background-color .15s}
input[type=date].input::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--brand-soft)}
html.dark select.input{color-scheme:dark}