:root{
  color-scheme:light;
  --bg:#eef1f5; --surface:#ffffff; --sunk:#f6f8fa; --ink:#18212c; --muted:#5b6978; --line:#d9e0e8;
  --accent:#2b5bc8; --accent-ink:#ffffff; --accent-soft:#e3ebfb;
  --wait:#a86a12; --wait-soft:#fbf0dc; --late:#bf3a31; --late-soft:#fbe5e2;
  --done:#2c7a52; --done-soft:#e0f2e8; --doing:#6b4fc2; --doing-soft:#ece7fa;
  --shadow:0 10px 30px rgba(20,32,50,.16);
  --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tabbar:0px;
  --weekend:rgba(40,60,90,.05); --grid:rgba(40,60,90,.07);
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --bg:#10141a; --surface:#181e26; --sunk:#141920; --ink:#e4e9ef; --muted:#93a0ae; --line:#29313c;
  --accent:#7098ef; --accent-ink:#0d1420; --accent-soft:#1d2a44;
  --wait:#e3a64b; --wait-soft:#33281a; --late:#f0726a; --late-soft:#3a1f1d;
  --done:#62c48f; --done-soft:#1a3226; --doing:#a893f0; --doing-soft:#2a2440;
  --shadow:0 10px 30px rgba(0,0,0,.5);
  --weekend:rgba(255,255,255,.035); --grid:rgba(255,255,255,.05);
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans)}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
/* iOS 對 16px 以下的輸入框會自動放大畫面 */
input,select,textarea{font-size:16px}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)} .small{font-size:13px}
.err{color:var(--late);margin:0;font-size:14px}
.ok{color:var(--done);margin:0;font-size:14px}

/* setup / login */
.screen{min-height:100dvh;display:grid;place-items:center;padding:calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}
.card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 18px;display:flex;flex-direction:column;gap:14px}
.card h1{margin:0;font-size:22px}
.card p{margin:0}

.wrap{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:16px;
  padding:calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(40px + var(--tabbar) + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}

header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hgroup{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
h1{margin:0;font-size:22px;font-weight:700;letter-spacing:.02em}
.date-now{font-family:var(--mono);color:var(--muted);font-size:13px}
.hright{display:flex;align-items:center;gap:8px;position:relative}
.sync{font-size:12px;color:var(--muted);white-space:nowrap}
.sync.warn{color:var(--wait)}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:140px;z-index:15;overflow:hidden}
.menu button{border:0;background:none;text-align:left;padding:12px 14px}
.menu button + button{border-top:1px solid var(--line)}

.add{display:flex;gap:8px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px}
.add input{flex:1 1 260px;min-width:0;border:0;background:transparent;padding:8px 6px;outline:none}
.add-opts{display:flex;gap:8px;flex:0 1 auto;margin-left:auto}
.add select{border:1px solid var(--line);background:var(--sunk);border-radius:8px;padding:6px 8px}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 12px;white-space:nowrap}
.btn:active{background:var(--sunk)}
@media (hover:hover){.btn:hover{background:var(--sunk)}}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.big{padding:12px;font-size:16px}
.btn.link{border:0;background:none;color:var(--accent);padding:4px}
.btn.icon{padding:2px 12px;font-size:20px;line-height:1.4}
.btn.danger{color:var(--late)}
.btn.danger.armed{background:var(--late);border-color:var(--late);color:#fff}
.hint{font-size:12.5px;color:var(--muted);margin:-8px 4px 0}
@media (max-width:720px){.hint{display:none}}
.hint code{font-family:var(--mono);background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:0 4px}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:620px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;text-align:left;display:flex;flex-direction:column;gap:2px}
.stat b{font-family:var(--mono);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.stat span{font-size:13px;color:var(--muted)}
.stat.wait b{color:var(--wait)} .stat.late b{color:var(--late)} .stat.doing b{color:var(--doing)} .stat.done b{color:var(--done)}
.stat.zero b{color:var(--muted)}

.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters select,.filters input{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 8px;max-width:100%}
.filters input{flex:1 1 140px;min-width:0}

/* tabs：寬螢幕在上方，手機固定在底部 */
.tabs{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px;max-width:980px;margin:0 auto}
.tab{flex:1;border:0;background:transparent;border-radius:7px;padding:7px 12px;color:var(--muted);white-space:nowrap;display:flex;gap:6px;align-items:center;justify-content:center}
.tab[aria-selected="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
@media (min-width:721px){
  #app{display:flex;flex-direction:column}
  #app .tabs{order:-1;margin-top:calc(12px + env(safe-area-inset-top));width:calc(100% - 32px)}
  #app .wrap{padding-top:14px}
}
@media (max-width:720px){
  :root{--tabbar:62px}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:12;border-radius:0;border-width:1px 0 0;padding:4px 8px calc(4px + env(safe-area-inset-bottom))}
  .tab{flex-direction:column;gap:0;font-size:11.5px;padding:4px}
  .tab .ti{font-size:19px;line-height:1.3}
  .tab[aria-selected="true"]{background:transparent}
}

section.group{display:flex;flex-direction:column;gap:6px}
.group h2{margin:6px 2px 0;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.06em;display:flex;gap:8px;align-items:center}
.group h2 .n{font-family:var(--mono);font-size:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0 7px}
#view{display:flex;flex-direction:column;gap:14px}
.list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.check{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--muted);background:transparent;padding:0;display:grid;place-items:center}
.row.is-done .check{background:var(--done);border-color:var(--done)}
.row.is-done .check::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;background:none;border:0;text-align:left;padding:0}
.t{font-weight:500;overflow-wrap:anywhere}
.row.is-done .t{color:var(--muted);text-decoration:line-through}
.meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--muted);align-items:center}
.pill{font-size:11.5px;border-radius:4px;padding:1px 6px;font-weight:600;white-space:nowrap}
.pill.todo{background:var(--sunk);color:var(--muted);border:1px solid var(--line)}
.pill.doing{background:var(--doing-soft);color:var(--doing)}
.pill.waiting{background:var(--wait-soft);color:var(--wait)}
.pill.done{background:var(--done-soft);color:var(--done)}
.proj{color:var(--accent)}
.prio-high{color:var(--late);font-weight:700}
.d{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.d.late{color:var(--late);font-weight:600}
.d.today{color:var(--wait);font-weight:600}
.who{color:var(--wait);font-weight:600}
.defer{font-size:11.5px;border-radius:4px;padding:1px 6px;font-weight:700;background:var(--late-soft);color:var(--late);white-space:nowrap}
.defer.once{background:var(--wait-soft);color:var(--wait)}
.urgent{font-size:11.5px;border-radius:4px;padding:1px 6px;font-weight:700;border:1px solid var(--late);color:var(--late);white-space:nowrap}
.acts{display:flex;gap:6px;flex:none}
.acts .btn{font-size:13px;padding:5px 10px}
@media (max-width:560px){.row{flex-wrap:wrap}.acts{width:100%;padding-left:36px}}

.empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:14px}
.banner{background:var(--wait-soft);color:var(--wait);border-radius:8px;padding:8px 12px;font-size:13.5px}

/* editor：手機上是全螢幕面板 */
.scrim{position:fixed;inset:0;background:rgba(10,16,24,.45);display:flex;justify-content:flex-end;z-index:20}
.panel{background:var(--surface);width:min(480px,100%);height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow);
  padding:calc(18px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.panel h3{margin:0;font-size:17px}
.f{display:flex;flex-direction:column;gap:4px}
.f label,.f .lab{font-size:12.5px;color:var(--muted)}
.f input,.f select,.f textarea,.card input{border:1px solid var(--line);background:var(--sunk);border-radius:8px;padding:9px 10px;width:100%}
.f input[type="date"]{min-height:42px;-webkit-appearance:none;appearance:none}
.f textarea{min-height:80px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:0;border-left:1px solid var(--line);background:var(--sunk);padding:9px 4px;font-size:14px}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"][data-s="todo"]{background:var(--ink);color:var(--surface)}
.seg button[aria-pressed="true"][data-s="doing"]{background:var(--doing);color:#fff}
.seg button[aria-pressed="true"][data-s="waiting"]{background:var(--wait);color:#fff}
.seg button[aria-pressed="true"][data-s="done"]{background:var(--done);color:#fff}
.delegate{border:1px dashed var(--wait);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:10px;background:var(--wait-soft)}
.delegate .lab-h{font-size:12.5px;color:var(--wait);font-weight:600}
.chk{display:flex;gap:8px;align-items:center;font-size:15px;min-height:42px}
.chk input{width:20px;height:20px;accent-color:var(--late)}
.dnote{font-size:13px;color:var(--late)}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.log li{display:flex;gap:10px}
.log .d{color:var(--muted);flex:none;padding-top:1px}
.logadd{display:flex;gap:6px}
.logadd input{flex:1;min-width:0;border:1px solid var(--line);background:var(--sunk);border-radius:8px;padding:8px 10px}
.pfoot{display:flex;gap:8px;justify-content:space-between;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.pfoot div{display:flex;gap:8px}

.toast{position:fixed;left:50%;bottom:calc(20px + var(--tabbar) + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:9px 14px;border-radius:9px;font-size:14px;z-index:30;max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:no-preference){.panel{animation:slide .18s ease-out}@keyframes slide{from{transform:translateX(24px);opacity:.6}}}

/* ---------- 大計劃 ---------- */
.plans-mode .stats,.plans-mode .hint,.plans-mode .add{display:none}
.goal-open .filters{display:none}
.center{text-align:center}
.ptools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.segs{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.segs button{border:0;background:transparent;padding:6px 12px;color:var(--muted)}
.segs button + button{border-left:1px solid var(--line)}
.segs button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.btn.on{border-color:var(--accent);color:var(--accent)}

.goals{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.goal-card{display:flex;flex-direction:column;gap:8px;text-align:left;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--gc);border-radius:12px;padding:14px}
.goal-card.is-done{opacity:.7}
.gc-top{display:flex;gap:8px;align-items:center;justify-content:space-between}
.gc-title{font-size:16px;font-weight:700;overflow-wrap:anywhere}
.gc-desc{font-size:13.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.progress{display:block;height:6px;border-radius:3px;background:var(--sunk);border:1px solid var(--line);overflow:hidden}
.progress span{display:block;height:100%;background:var(--gc,var(--accent));border-radius:3px}
.goal-chip{font-size:11.5px;border-radius:4px;padding:1px 6px;font-weight:600;color:var(--gc);border:1px solid var(--gc);white-space:nowrap;max-width:14em;overflow:hidden;text-overflow:ellipsis}

.gdetail{display:flex;flex-direction:column;gap:14px}
.gd-nav{display:flex;justify-content:space-between;align-items:center}
.gd-head{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--gc);border-radius:12px;padding:14px}
.gd-title{margin:0;font-size:20px;overflow-wrap:anywhere}
.gd-desc{margin:0;color:var(--muted);font-size:14px;white-space:pre-wrap}
.breakdown{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px dashed var(--gc);border-radius:12px;padding:12px}
.breakdown > label{font-size:13px;color:var(--muted);font-weight:600}
.breakdown textarea{border:1px solid var(--line);background:var(--sunk);border-radius:8px;padding:8px 10px;resize:vertical;min-height:70px}
.bd-foot{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bd-foot .chk{min-height:auto;font-size:13.5px}
.bd-foot select{border:1px solid var(--line);background:var(--sunk);border-radius:7px;padding:3px 6px}
.bd-foot .btn{margin-left:auto}

.swatches{display:flex;gap:10px}
.sw{width:32px;height:32px;border-radius:50%;background:var(--c);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}

/* ---------- 甘特圖 ---------- */
.gantt{--gl:220px;--rh:40px;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--surface);border:1px solid var(--line);border-radius:12px;max-height:70vh;overscroll-behavior-x:contain}
@media (max-width:720px){.gantt{--gl:118px;max-height:62vh}}
.grow{display:flex;min-width:calc(var(--gl) + var(--W));height:var(--rh);border-top:1px solid var(--line)}
.grow:first-child{border-top:0}
.gl{position:sticky;left:0;z-index:3;flex:0 0 var(--gl);width:var(--gl);background:var(--surface);border-right:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 8px;min-width:0}
.gt{position:relative;flex:0 0 var(--W);width:var(--W);
  background-image:
    linear-gradient(90deg, transparent calc(var(--tx) - 1px), var(--accent) calc(var(--tx) - 1px), var(--accent) calc(var(--tx) + 1px), transparent calc(var(--tx) + 1px)),
    repeating-linear-gradient(90deg, transparent 0, transparent var(--we), var(--weekend) var(--we), var(--weekend) calc(var(--dw) * 7));}
.z-day .gt{background-image:
    linear-gradient(90deg, transparent calc(var(--tx) - 1px), var(--accent) calc(var(--tx) - 1px), var(--accent) calc(var(--tx) + 1px), transparent calc(var(--tx) + 1px)),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--dw) - 1px), var(--grid) calc(var(--dw) - 1px), var(--grid) var(--dw)),
    repeating-linear-gradient(90deg, transparent 0, transparent var(--we), var(--weekend) var(--we), var(--weekend) calc(var(--dw) * 7));}
.z-month .gt{background-image:linear-gradient(90deg, transparent calc(var(--tx) - 1px), var(--accent) calc(var(--tx) - 1px), var(--accent) calc(var(--tx) + 1px), transparent calc(var(--tx) + 1px))}
.ghead{position:sticky;top:0;z-index:4;height:46px;background:var(--surface)}
.ghead .gl{z-index:5;font-size:12px;color:var(--muted);font-weight:600}
.ghead .gt{background:var(--surface);border-bottom:1px solid var(--line)}
.gms,.gds{position:absolute;left:0;right:0}
.gms{top:2px;height:18px}
.gds{bottom:2px;height:22px}
.gm{position:absolute;font-size:12px;font-weight:600;color:var(--ink);padding-left:4px;border-left:1px solid var(--line);white-space:nowrap}
.gd{position:absolute;top:0;font-size:11px;color:var(--muted);text-align:center;font-family:var(--mono);line-height:22px;white-space:nowrap}
.gd.we{color:var(--late);opacity:.7}
.gd.td{background:var(--accent);color:var(--accent-ink);border-radius:5px;font-weight:700;opacity:1}
.ggroup{background:var(--sunk)}
.ggroup .gl{background:var(--sunk)}
.gname{border:0;background:none;padding:0;text-align:left;font-size:13.5px;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.ggroup .gname{font-weight:700;color:var(--ink)}
.gname .dot{flex:none;width:10px;height:10px;border-radius:3px;background:var(--gc)}
.gname.task{padding-left:4px}
.gname.is-done{color:var(--muted);text-decoration:line-through}
.gpct{font-size:11.5px;color:var(--muted);font-family:var(--mono)}
.pill-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.pill-dot.doing{background:var(--doing)} .pill-dot.waiting{background:var(--wait)} .pill-dot.done{background:var(--done)}

.bar{position:absolute;top:7px;height:calc(var(--rh) - 15px);border-radius:6px;background:var(--gc);color:#fff;display:flex;align-items:center;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.18);user-select:none;-webkit-user-select:none;cursor:pointer}
.bar .bl{flex:1;min-width:0;padding:0 8px;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar.done{opacity:.45}
.bar.waiting{background:repeating-linear-gradient(135deg, var(--gc) 0 6px, color-mix(in srgb, var(--gc) 70%, #fff) 6px 12px)}
.bar.late{outline:2px solid var(--late);outline-offset:1px}
.bar .h{flex:none;width:0;align-self:stretch}
.editable .bar{touch-action:none;cursor:grab}
.editable .bar .h{width:14px;cursor:ew-resize;background:rgba(255,255,255,.28)}
.editable .bar .h-l{border-radius:6px 0 0 6px} .editable .bar .h-r{border-radius:0 6px 6px 0}
.bar.dragging{cursor:grabbing;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:2}
.gbar-sum{position:absolute;top:14px;height:12px;border-radius:6px;background:color-mix(in srgb, var(--gc) 30%, transparent);border:1px solid var(--gc);overflow:hidden}
.gbar-sum span{display:block;height:100%;background:var(--gc)}
.gdue{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--late);transform:rotate(45deg);border-radius:1px;pointer-events:none}
.unsched{position:absolute;top:50%;transform:translateY(-50%);font-size:11.5px;color:var(--muted);border:1px dashed var(--line);border-radius:6px;padding:2px 8px;white-space:nowrap;pointer-events:none;background:var(--surface)}
.gtip{position:absolute;z-index:6;background:var(--ink);color:var(--surface);font-size:12px;padding:3px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;font-family:var(--mono)}
.hint2{font-size:12.5px;color:var(--muted);margin:-6px 4px 0}