/* BuzzBoard：安靜的 Kanban 看板（類別標準，精緻度對標 Linear） */
:root{
  color-scheme:light;
  --bg:#f7f7f8; --side:#f0f0f2; --surface:#ffffff; --col:#efeff2; --hover:rgba(28,29,33,.045);
  --line:#e2e2e6; --line-2:#cfd0d6; --ink:#1c1d21; --ink-2:#3d4047; --muted:#62666f; --faint:#666a73;
  --accent:#5e6ad2; --accent-fill:#5e6ad2; --accent-hover:#4d59c2; --on-accent:#ffffff; --accent-soft:rgba(94,106,210,.1);
  --bad:#cf3f3f; --bad-soft:rgba(207,63,63,.08); --warn:#9a5b00; --doing:#5e6ad2; --waiting:#7c818b;
  --shadow-card:0 1px 2px rgba(20,21,26,.04);
  --shadow-pop:0 12px 32px rgba(20,21,26,.14), 0 2px 6px rgba(20,21,26,.06);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang TC","Noto Sans TC","Microsoft JhengHei","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tabbar:0px; --side-w:224px;
  --weekend:rgba(28,29,33,.035); --grid:rgba(28,29,33,.06);
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --bg:#111214; --side:#0d0e10; --surface:#1b1c20; --col:#16171a; --hover:rgba(255,255,255,.045);
  --line:#28292f; --line-2:#383a42; --ink:#e7e7ea; --ink-2:#c3c5cb; --muted:#9a9ea7; --faint:#878b94;
  --accent:#7f88e6; --accent-fill:#5e6ad2; --accent-hover:#5360c8; --on-accent:#ffffff; --accent-soft:rgba(127,136,230,.16);
  --bad:#ee6b6b; --bad-soft:rgba(238,107,107,.12); --warn:#e0a44a; --doing:#7f88e6; --waiting:#8b8f99;
  --shadow-card:0 1px 2px rgba(0,0,0,.3);
  --shadow-pop:0 16px 40px rgba(0,0,0,.55), 0 0 0 1px #2c2e35;
  --weekend:rgba(255,255,255,.025); --grid:rgba(255,255,255,.045);
}}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans);font-variant-numeric:tabular-nums;caret-color:var(--accent);accent-color:var(--accent);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-soft);color:inherit}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--muted)} .small{font-size:12.5px}
.err{color:var(--bad);margin:0;font-size:13px}
.ok{color:var(--accent);margin:0;font-size:13px}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
kbd,.kbd{font:500 11px/1 var(--sans);color:var(--muted);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:2px 5px;background:var(--surface)}

/* ---------- 按鈕與欄位 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:0 11px;height:30px;white-space:nowrap;font-weight:500;color:var(--ink);box-shadow:var(--shadow-card);transition:background .12s,border-color .12s}
@media (hover:hover){.btn:hover{background:var(--bg);border-color:var(--line-2)}}
.btn:active{background:var(--hover)}
.btn.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
@media (hover:hover){.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}}
.btn.big{height:40px;font-size:15px}
.btn.link{border:0;background:none;box-shadow:none;padding:0 4px;color:var(--muted)}
@media (hover:hover){.btn.link:hover{color:var(--ink);background:none}}
.btn.icon{border:0;background:none;box-shadow:none;padding:0;width:30px;color:var(--muted)}
@media (hover:hover){.btn.icon:hover{background:var(--hover);color:var(--ink)}}
.btn.danger{color:var(--bad)}
.btn.danger.armed{background:var(--bad);border-color:var(--bad);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
select,input[type="search"]{height:30px;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:0 8px;font-size:13px;color:var(--ink-2)}
select{padding-right:4px;min-width:0;max-width:100%}

/* ---------- 登入 ---------- */
.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))}
.login{width:min(360px,100%);display:flex;flex-direction:column;gap:14px}
.login-logo{border-radius:10px;align-self:flex-start}
.login h1{margin:0 0 4px;font-size:20px;font-weight:600;letter-spacing:-.01em}

/* ---------- 版面：側欄＋主區 ---------- */
#app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100dvh}
.side{position:sticky;top:0;height:100dvh;background:var(--side);border-right:1px solid var(--line);padding:calc(14px + env(safe-area-inset-top)) 10px 16px max(10px, env(safe-area-inset-left));display:flex;flex-direction:column;gap:18px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;padding:2px 8px}
.brand img{border-radius:5px}
.side-nav{display:flex;flex-direction:column;gap:1px}
.side-nav button,.side-proj{display:flex;align-items:center;gap:10px;border:0;background:none;border-radius:6px;padding:0 8px;height:30px;text-align:left;color:var(--ink-2);font-weight:500;width:100%}
@media (hover:hover){.side-nav button:hover,.side-proj:hover{background:var(--hover);color:var(--ink)}}
.side-nav button[aria-current="page"],.side-proj.on{background:var(--hover);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.side-nav .ic{color:var(--muted)}
.side-nav button[aria-current="page"] .ic{color:var(--accent)}
.side-h{font-size:12px;font-weight:500;color:var(--muted);padding:0 8px 6px}
.side-proj{font-size:13px;font-weight:400}
.side-proj .pdot{width:8px;height:8px;border-radius:2px;border:1.5px solid var(--faint);flex:none}
.side-proj.on .pdot{background:var(--accent);border-color:var(--accent)}
.side-proj .pname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-proj .n{margin-left:auto;color:var(--faint);font-size:12px;flex:none}
.side-empty{font-size:12.5px;color:var(--faint);padding:0 8px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(48px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 24px;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.tb-title{display:flex;align-items:baseline;gap:10px;min-width:0}
.tb-title h1{margin:0;font-size:15px;font-weight:600}
.tb-date{color:var(--muted);font-size:13px;white-space:nowrap}
.tb-right{display:flex;align-items:center;gap:8px;flex:none}
.topbar .filters{flex:1;justify-content:flex-end;flex-wrap:nowrap;min-width:0}
.filter-btn{display:none!important;position:relative}
.filter-btn.active::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sync{font-size:12px;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.sync::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.sync.warn{color:var(--ink-2)} .sync.warn::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-pop);display:flex;flex-direction:column;min-width:150px;z-index:15;padding:4px}
.menu button{border:0;background:none;text-align:left;padding:0 10px;height:32px;border-radius:5px}
@media (hover:hover){.menu button:hover{background:var(--hover)}}

.wrap{display:flex;flex-direction:column;gap:12px;padding:16px max(20px, env(safe-area-inset-right)) calc(40px + var(--tabbar) + env(safe-area-inset-bottom)) 24px;max-width:1400px;width:100%}

/* 快速新增 */
.add{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 5px 5px 12px;box-shadow:var(--shadow-card);transition:border-color .12s, box-shadow .12s}
.add:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.add-ic{color:var(--faint)}
.add input{flex:1 1 240px;min-width:0;border:0;background:transparent;height:30px;outline:none;font-size:14px}
.add input::placeholder{color:var(--faint)}
.add:focus-within .kbd{display:none}
.add-opts{display:flex;gap:6px;margin-left:auto}
.add select{border-color:transparent;background:var(--bg)}
.hint{display:none;font-size:12px;color:var(--faint);margin:-4px 2px 0}
.add:focus-within + .hint{display:block}
.hint code{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--hover);border-radius:4px;padding:1px 5px}

.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.search{position:relative;display:flex;align-items:center;flex:0 1 220px;min-width:120px}
.search .ic{position:absolute;left:8px;color:var(--faint);width:14px;height:14px;pointer-events:none}
.search input{width:100%;padding-left:28px}

#view{display:flex;flex-direction:column;gap:14px;min-width:0}
.banner{background:var(--bad-soft);color:var(--bad);border-radius:6px;padding:8px 12px;font-size:13px}
.empty{padding:40px 16px;text-align:center;color:var(--muted);font-size:13.5px}

/* ---------- Kanban ---------- */
.colnav{display:none}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.col{background:var(--col);border-radius:10px;padding:6px 6px 8px;display:flex;flex-direction:column;min-height:180px;transition:box-shadow .12s, background .12s}
.col.over{box-shadow:inset 0 0 0 1.5px var(--accent);background:color-mix(in srgb, var(--accent) 5%, var(--col))}
.col-h{margin:0;display:flex;align-items:center;gap:8px;padding:6px 8px 10px;font-size:13px;font-weight:600;color:var(--ink)}
.col-h .n{color:var(--muted);font-weight:400}
.col-body{display:flex;flex-direction:column;gap:6px}
.col-empty{margin:0;padding:18px 10px;text-align:center;font-size:12.5px;color:var(--faint);border:1px dashed var(--line-2);border-radius:6px}
.col-foot{margin-top:6px;border:0;background:none;color:var(--muted);font-size:12.5px;text-align:left;padding:6px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;align-self:flex-start}
.col-foot .ic{width:13px;height:13px}
@media (hover:hover){.col-foot:hover{background:var(--hover);color:var(--ink)}}

/* 狀態圖示 */
.sti{width:15px;height:15px;flex:none;display:block}
.sti-todo{color:var(--faint)} .sti-doing{color:var(--doing)} .sti-waiting{color:var(--waiting)} .sti-done{color:var(--accent)}

/* 卡片 */
.card{position:relative;display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:9px 10px 9px 9px;box-shadow:var(--shadow-card);transition:border-color .12s, box-shadow .12s}
@media (hover:hover){.card:hover{border-color:var(--line-2)}}
.card:focus-within{border-color:var(--line-2)}
@media (hover:hover){.card{cursor:pointer}}
.st-btn{position:relative;z-index:1;border:0;background:none;padding:0;margin-top:2px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center}
.st-btn::after{content:"";position:absolute;inset:-8px -3px -8px -8px}
@media (hover:hover){.st-btn:hover .sti{color:var(--accent)} .st-btn:hover .sti-done{opacity:.7}}
.card-main{min-width:0;display:flex;flex-direction:column;gap:5px}
.card-t{border:0;background:none;padding:0;text-align:left;font-weight:500;font-size:14px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere;cursor:pointer}
.card.is-done .card-t{color:var(--muted)}
.prio{display:inline-flex;vertical-align:-2px;margin-right:5px;color:var(--bad)}
.prio svg{width:13px;height:13px}
.card-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.mk{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);white-space:nowrap;max-width:100%}
.mk .ic{width:12px;height:12px;stroke-width:2}
.mk.bad{color:var(--bad)}
.mk.warn{color:var(--warn)}
.mk.strong{color:var(--ink);font-weight:500}
.mk.goal i{width:8px;height:8px;border-radius:2px;border:1.5px solid var(--faint);flex:none}
.mk.goal,.mk.proj{max-width:100%;min-width:0}
.mk .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-qa{justify-self:start;grid-column:2;margin-top:7px;border:1px solid var(--line);background:var(--surface);border-radius:5px;height:24px;padding:0 8px;font-size:12px;color:var(--ink-2);font-weight:500}
@media (hover:hover){
  .card-qa{position:absolute;right:8px;bottom:8px;margin:0;opacity:0;transition:opacity .12s;z-index:1}
  .card.has-qa .card-meta{padding-right:80px}
  .card.has-qa:not(:has(.card-meta)) .card-t{padding-right:80px}
  .card:hover .card-qa,.card:focus-within .card-qa{opacity:1}
  .card-qa:hover{border-color:var(--line-2);color:var(--ink)}
}

/* 拖曳 */
.card.placeholder{opacity:.35;border-style:dashed;box-shadow:none}
.card.ghost{position:fixed;left:0;top:0;z-index:40;pointer-events:none;box-shadow:var(--shadow-pop);border-color:var(--line-2)}
body.dragging-card{cursor:grabbing;user-select:none;-webkit-user-select:none}
@media (hover:hover) and (pointer:fine){.board .card{cursor:grab}}

/* 計劃內的任務清單：同一張卡片排成列 */
.list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.list .card{border:0;border-radius:0;box-shadow:none;border-top:1px solid var(--line);padding:10px 12px;grid-template-columns:16px minmax(0,1fr) auto;align-items:start}
.list .card:first-child{border-top:0}
.list .card-main{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.list .card-qa{position:static;opacity:1;grid-column:3;margin:0}
@media (hover:hover){.list .card:hover{background:var(--hover)} .list .card-qa{opacity:0} .list .card:hover .card-qa,.list .card:focus-within .card-qa{opacity:1}}

/* ---------- 手機 ---------- */
@media (max-width:760px){
  :root{--tabbar:56px}
  #app{display:block}
  .side{display:none}
  .topbar{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(10px, env(safe-area-inset-right))}
  .wrap{padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));gap:10px}
  input,select,textarea{font-size:16px!important}
  .add input{font-size:16px}
  .kbd,.hint,.add:focus-within + .hint{display:none}
  .add-opts{width:100%} .add-opts select{flex:1}
  .add:not(:focus-within) .add-opts{display:none}
  .filter-btn{display:inline-flex!important}
  .topbar{flex-wrap:wrap;height:auto;min-height:calc(48px + env(safe-area-inset-top));row-gap:0}
  .tb-title{order:1;flex:1;min-height:48px;align-items:center}
  .tb-right{order:2;min-height:48px}
  .topbar .filters{display:none;order:3;flex:1 1 100%;flex-wrap:wrap;justify-content:stretch;padding:0 0 10px}
  .show-filters .topbar .filters{display:flex}
  .topbar .search{flex:1 1 100%}
  .topbar .filters select{flex:1}
  select,input[type="search"]{height:40px}
  .btn.icon{width:40px;height:40px}
  .card-qa{border:0;background:none;color:var(--accent);padding:0;height:32px;margin-top:2px;font-size:13px}
  .colnav{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--col);border-radius:8px;padding:3px;position:sticky;top:calc(48px + env(safe-area-inset-top));z-index:5}
  .colnav button{border:0;background:none;border-radius:6px;height:34px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;font-weight:500;color:var(--muted);padding:0 2px;white-space:nowrap}
  .colnav button .sti{width:13px;height:13px}
  .colnav button .n{color:var(--faint);font-size:12px}
  .colnav button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card)}
  .board{display:block}
  .board .col{display:none;background:none;padding:0;min-height:0}
  .board[data-active="todo"] .col[data-col="todo"],.board[data-active="doing"] .col[data-col="doing"],
  .board[data-active="waiting"] .col[data-col="waiting"],.board[data-active="done"] .col[data-col="done"]{display:flex}
  .board .col-h{display:none}
  .card{padding:12px 12px 12px 11px}
  .st-btn{width:22px;height:22px;margin:-3px 0 0 -3px}
  .st-btn::after{inset:-11px -4px -11px -11px}
  .card{grid-template-columns:18px minmax(0,1fr)}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:12;display:grid;grid-template-columns:repeat(4,1fr);background:color-mix(in srgb, var(--surface) 92%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:0 0 env(safe-area-inset-bottom)}
  .tabbar button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--tabbar);font-size:11px;font-weight:500;color:var(--muted)}
  .tabbar .ic{width:22px;height:22px}
  .tabbar button[aria-current="page"]{color:var(--accent)}
}
@media (min-width:761px){.tabbar{display:none}}
/* 中等寬度：側欄縮成圖示列，讓四欄都放得下 */
@media (min-width:761px) and (max-width:1100px){
  :root{--side-w:60px}
  .side{padding-left:10px;padding-right:10px;align-items:center}
  .side .lbl,.side-sec{display:none}
  .brand{padding:2px}
  .side-nav button{width:40px;height:36px;justify-content:center;padding:0}
  .side-nav .ic{width:18px;height:18px}
  .topbar .search{flex-basis:150px}
  .board{gap:8px}
  .card.has-qa .card-meta,.card.has-qa:not(:has(.card-meta)) .card-t{padding-right:0}
  .card-qa{box-shadow:-18px 0 12px -4px var(--surface)}
}

/* ---------- 編輯面板 ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,10,14,.32);display:flex;justify-content:flex-end;z-index:20}
.panel{background:var(--surface);width:min(460px,100%);height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow-pop);border-left:1px solid var(--line);
  padding:calc(18px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.panel h3{margin:0;font-size:15px;font-weight:600}
.f{display:flex;flex-direction:column;gap:5px}
.f label,.f .lab{font-size:12px;color:var(--muted);font-weight:500}
.f input,.f select,.f textarea,.login input{border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:0 10px;height:36px;width:100%;font-size:14px;color:var(--ink)}
.f textarea{height:auto;min-height:84px;padding:8px 10px;resize:vertical;line-height:1.5}
.f input:focus,.f select:focus,.f textarea:focus,.login input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--surface)}
.f input[type="date"]{-webkit-appearance:none;appearance:none}
.login input{height:40px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.two > *{min-width:0}
.f input{min-width:0;max-width:100%}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--col);border-radius:8px;padding:3px}
.seg button{border:0;background:none;border-radius:6px;height:32px;font-size:13px;font-weight:500;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card), 0 0 0 1px var(--line)}
.delegate{border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.delegate .lab-h{font-size:12.5px;color:var(--ink-2);font-weight:600}
.chk{display:flex;gap:8px;align-items:center;font-size:14px;min-height:36px}
.chk input{width:16px;height:16px}
.dnote{font-size:12.5px;color:var(--bad);background:var(--bad-soft);padding:8px 10px;border-radius:6px}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font-size:13px}
.log li{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.log li:last-child{border-bottom:0}
.log .d{color:var(--faint);flex:none;font-family:var(--mono);font-size:12px;padding-top:1px}
.logadd{display:flex;gap:6px}
.logadd input{flex:1;min-width:0;border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:0 10px;height:30px}
.pfoot{display:flex;gap:8px;justify-content:space-between;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.pfoot div{display:flex;gap:8px;align-items:center}

.toast{position:fixed;left:50%;bottom:calc(20px + var(--tabbar) + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;z-index:30;max-width:calc(100% - 32px);box-shadow:var(--shadow-pop)}
@media (prefers-reduced-motion:no-preference){
  .panel{animation:slide .2s cubic-bezier(.16,1,.3,1)}
  @keyframes slide{from{transform:translateX(24px);opacity:.5}}
  .toast{animation:rise .2s cubic-bezier(.16,1,.3,1)}
  @keyframes rise{from{transform:translate(-50%,8px);opacity:0}}
  .menu{animation:pop .12s ease-out}
  @keyframes pop{from{transform:translateY(-4px);opacity:0}}
}

/* 設定 */
.set-sec{display:flex;flex-direction:column;gap:10px}
.set-sec h4{margin:0;font-size:14px;font-weight:600}
.set-sec p{margin:0}
.set-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.set-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.set-status.on{color:var(--ink)} .set-status.on::before{background:var(--accent)}
.set-status span{font-family:var(--mono);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.set-note{font-size:13px;color:var(--ink-2);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:10px}
.set-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.set-help{font-size:13px;color:var(--ink-2)}
.set-help summary{cursor:pointer;color:var(--accent);font-weight:500}
.set-help ol{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}

/* ---------- 計劃 ---------- */
.plans-mode .add,.plans-mode .hint{display:none}
.goal-open .filters{display:none}
.center{text-align:center}
.ptools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.segs{display:inline-flex;gap:2px;background:var(--col);border-radius:7px;padding:2px}
.segs button{border:0;background:none;border-radius:5px;height:26px;padding:0 10px;font-size:13px;font-weight:500;color:var(--muted)}
.segs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card)}
.btn.on{color:var(--accent)}

.pj-list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pj-head,.pj-row{display:grid;grid-template-columns:minmax(0,1fr) 180px 64px 120px;column-gap:20px;align-items:center;padding:0 16px}
.pj-head{height:34px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);background:var(--bg)}
.pj-row{width:100%;border:0;background:none;text-align:left;min-height:56px;padding-top:10px;padding-bottom:10px;border-top:1px solid var(--line)}
.pj-head + .pj-row{border-top:0}
@media (hover:hover){.pj-row:hover{background:var(--hover)}}
.pj-row.is-done{opacity:.6}
.pj-name{display:flex;align-items:center;gap:10px;min-width:0}
.pj-icon{width:22px;height:22px;border-radius:6px;background:color-mix(in srgb, var(--gc) 16%, transparent);color:var(--gc);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.pj-title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-flags{display:inline-flex;gap:8px;margin-left:4px}
.pj-prog{display:flex;align-items:center;gap:10px}
.pbar{flex:1;height:4px;border-radius:2px;background:var(--col);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--gc);border-radius:2px}
.pj-pct{font-size:12px;color:var(--muted);width:34px;text-align:right}
.pj-count,.pj-date{font-size:12.5px;color:var(--muted);white-space:nowrap}
@media (max-width:760px){
  .pj-head{display:none}
  .pj-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px;padding:12px 14px}
  .pj-prog{grid-column:1 / -1;order:3}
  .pj-count{display:none}
}

.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:10px;padding:4px 2px 14px;border-bottom:1px solid var(--line)}
.gd-title{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere;display:flex;align-items:center;gap:10px}
.gd-title .pj-icon{width:28px;height:28px;font-size:14px;border-radius:7px}
.gd-desc{margin:0;color:var(--muted);font-size:14px;white-space:pre-wrap}
.gd-prog{display:flex;align-items:center;gap:12px;max-width:420px}
.gd-head .card-meta{gap:4px 14px}
.breakdown{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px}
.breakdown > label{font-size:13px;font-weight:500}
.breakdown textarea{border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:8px 10px;resize:vertical;min-height:72px;line-height:1.5}
.breakdown textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bd-foot{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bd-foot .chk{min-height:auto;font-size:13px}
.bd-foot select{height:26px}
.bd-foot .btn{margin-left:auto}

.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:28px;height:28px;border-radius:7px;background:var(--c);border:0;box-shadow:inset 0 0 0 2px var(--surface), 0 0 0 1px var(--line)}
.sw[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--surface), 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:10px;max-height:70vh;overscroll-behavior-x:contain}
@media (max-width:760px){.gantt{--gl:148px;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 10px;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) var(--tx), transparent var(--tx)),
    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) var(--tx), transparent var(--tx)),
    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) var(--tx), transparent var(--tx))}
.ghead{position:sticky;top:0;z-index:4;height:44px;background:var(--surface);border-bottom:1px solid var(--line)}
.ghead .gl{z-index:5;font-size:12px;color:var(--muted);font-weight:500}
.ghead .gt{background:var(--surface)}
.gms,.gds{position:absolute;left:0;right:0}
.gms{top:3px;height:18px}
.gds{bottom:3px;height:20px}
.gm{position:absolute;font-size:12px;font-weight:600;color:var(--ink);padding-left:6px;white-space:nowrap}
.gd{position:absolute;top:0;font-size:11px;color:var(--muted);text-align:center;line-height:20px;white-space:nowrap}
.gd.we{color:var(--faint)}
.gd.td{background:var(--accent-fill);color:var(--on-accent);border-radius:4px;font-weight:600}
.ggroup{border-top-color:var(--line-2)}
.gname{border:0;background:none;padding:0;text-align:left;font-size:13px;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px;color:var(--ink)}
.ggroup .gname{font-weight:600}
.gname .dot{flex:none;width:18px;height:18px;border-radius:5px;background:color-mix(in srgb, var(--gc) 16%, transparent);color:var(--gc);display:grid;place-items:center;font-size:10.5px;font-weight:700}
.gname.task{padding-left:2px}
.gname.is-done{color:var(--muted)}
.gpct{font-size:12px;color:var(--muted)}
.gaddrow{height:32px}
.gadd{border:0;background:none;padding:0 0 0 2px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;cursor:pointer}
.gadd .ic{width:14px;height:14px}
@media (hover:hover){.gadd:hover{color:var(--ink)}}
.pill-dot{flex:none;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--faint)}
.pill-dot.doing{border-color:var(--doing);background:linear-gradient(90deg, transparent 50%, var(--doing) 50%)} .pill-dot.waiting{border-style:dashed;border-color:var(--waiting)} .pill-dot.done{background:var(--accent);border-color:var(--accent)}

.bar{position:absolute;top:8px;height:calc(var(--rh) - 16px);border-radius:6px;background:color-mix(in srgb, var(--gc) 18%, var(--surface));border:1px solid color-mix(in srgb, var(--gc) 55%, transparent);color:var(--ink);display:flex;align-items:center;overflow:visible;user-select:none;-webkit-user-select:none;cursor:pointer}
/* 標籤黏在可視範圍左緣；太短的色條把標籤放在右邊 */
.bar .bl{flex:1;min-width:0;padding:0 8px;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:sticky;left:calc(var(--gl) + 2px)}
.bar.short .bl{position:absolute;left:calc(100% + 8px);padding:0;overflow:visible;flex:none;color:var(--ink-2)}
.lg-due{display:inline-block;width:7px;height:7px;margin:0 3px;background:var(--bad);transform:rotate(45deg);border-radius:1px;vertical-align:1px}
.bar.done{opacity:.5}
.bar.waiting{background:var(--surface);border-style:dashed}
.bar.late{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
.bar .h{flex:none;width:0;align-self:stretch}
.editable .bar{touch-action:none;cursor:grab}
.editable .bar .h{width:8px;cursor:ew-resize;position:relative}
.editable .bar .h::after{content:"";position:absolute;top:50%;left:50%;width:2px;height:12px;margin:-6px 0 0 -1px;border-radius:1px;background:var(--gc);opacity:0;transition:opacity .12s}
@media (hover:hover){.editable .bar:hover .h::after{opacity:.8}}
.bar.dragging{cursor:grabbing;box-shadow:var(--shadow-pop);z-index:2}
.gbar-sum{position:absolute;top:18px;height:4px;border-radius:2px;background:color-mix(in srgb, var(--gc) 25%, transparent);overflow:hidden}
.gbar-sum span{display:block;height:100%;background:var(--gc)}
.gdue{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--bad);transform:rotate(45deg);border-radius:1px;pointer-events:none;z-index:1}
.unsched{position:absolute;top:50%;transform:translateY(-50%);font-size:11.5px;color:var(--faint);border:1px dashed var(--line-2);border-radius:5px;padding:1px 8px;white-space:nowrap;pointer-events:none;background:var(--surface)}
.gtip{position:absolute;z-index:6;background:var(--ink);color:var(--bg);font-size:12px;padding:3px 8px;border-radius:5px;white-space:nowrap;pointer-events:none}
.hint2{font-size:12px;color:var(--faint);margin:-4px 2px 0}