:root{
  --bg:#f4f6f9; --card:#fff; --ink:#1b2430; --muted:#6b7a8c; --line:#e1e6ed;
  --navy:#1f3a5f; --navy2:#2e5984; --gold:#c9a227; --green:#2f7d57; --red:#b03a2e; --amber:#a86a00;
  --soft:#eef2f7; --head:#3a6ea5;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#10151c;--card:#18202b;--ink:#e6ebf1;--muted:#93a1b2;--line:#2a3442;--soft:#1f2834;--navy:#0f2238;--navy2:#5b8cc4}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Heebo,Arial,sans-serif;font-size:15px;line-height:1.5}
header{background:var(--navy);color:#fff;padding:22px 16px 0;border-bottom:3px solid var(--gold)}
.wrap{max-width:1360px;margin:0 auto}
header h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.3px}
header .sub{opacity:.75;font-size:13px;margin-top:2px}
nav{display:flex;gap:4px;margin-top:16px;overflow-x:auto;scrollbar-width:none}
nav button{background:none;border:0;color:#cfd9e6;font:inherit;font-weight:500;padding:10px 14px;border-radius:10px 10px 0 0;cursor:pointer;white-space:nowrap}
nav button.on{background:var(--bg);color:var(--ink);font-weight:700}
main{padding:20px 16px 60px}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;padding:12px 14px}
.kpi .l{font-size:12px;color:var(--muted);font-weight:500}
.kpi .v{font-size:28px;font-weight:800;color:var(--navy2)}
.kpi .v.bad{color:var(--red)}
@media(max-width:640px){.kpi .v{font-size:22px}.weeknav h2{font-size:15px}.weeknav{gap:6px}}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.weeknav{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.weeknav h2{margin:0;font-size:19px;flex:1;line-height:1.25}
.weeknav .wd{font-size:13px;font-weight:500;color:var(--muted)}
.weeknav .now{font-size:12px;background:var(--gold);color:#fff;border-radius:20px;padding:2px 10px;margin-inline-start:8px;vertical-align:middle}
.btn{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:7px 12px;font:inherit;cursor:pointer}
.btn:hover{border-color:var(--navy2)}
.btn.pri{background:var(--navy2);border-color:var(--navy2);color:#fff}
.bar{height:8px;background:var(--soft);border-radius:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green);border-radius:8px;transition:width .3s}
.strip{display:flex;gap:4px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:thin}
.strip button{flex:0 0 auto;width:44px;border:1px solid var(--line);background:var(--card);border-radius:8px;padding:4px 0;cursor:pointer;font:inherit;font-size:11px;color:var(--muted);position:relative}
.strip button b{display:block;font-size:13px;color:var(--ink)}
.strip button .f{position:absolute;bottom:0;right:0;height:3px;background:var(--green);border-radius:0 0 8px 8px}
.strip button.sel{border-color:var(--navy2);box-shadow:0 0 0 2px var(--navy2) inset}
.strip button.cur{background:#fbf3d9}
@media (prefers-color-scheme: dark){.strip button.cur{background:#3a3218}}
.strip button.late::after{content:"";position:absolute;top:3px;left:3px;width:6px;height:6px;border-radius:50%;background:var(--red)}
.sec{margin-top:22px}
.sec:first-child{margin-top:8px}
.sechd{border-radius:12px;padding:12px 14px;margin-bottom:6px;color:#fff;background:var(--head);border-inline-start:8px solid var(--dc)}
.sech{margin:0;font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.2px}
.secsub{font-size:12.5px;font-weight:500;opacity:.85;margin-top:3px}
.sechd .lbl{font-size:11px;font-weight:700;opacity:.8;letter-spacing:.3px;margin-bottom:2px}
@media(max-width:640px){.sech{font-size:17px}}
.due{font-weight:700;color:var(--navy2);white-space:nowrap}
.due.late{color:var(--red)}
.split{display:grid;grid-template-columns:340px 1fr;gap:16px;margin-top:14px;align-items:start}
.side{display:flex;flex-direction:column;gap:6px;position:sticky;top:10px}
.gbtn{all:unset;box-sizing:border-box;cursor:pointer;display:block;border-radius:10px;padding:9px 12px;background:var(--soft);border-inline-start:6px solid var(--dc);color:var(--ink)}
.gbtn:hover{filter:brightness(.97)}
.gbtn:focus-visible{outline:2px solid var(--head);outline-offset:2px}
.gbtn .gt{font-weight:700;font-size:14px;line-height:1.3}
.gbtn .gs{font-size:11.5px;opacity:.75;margin-top:2px;display:flex;justify-content:space-between;gap:6px}
.gbtn.on{background:var(--head);color:#fff}
.gbtn.empty{opacity:.5}
.gbtn.alldone .gs b{color:var(--green)}
.gbtn.on.alldone .gs b{color:#fff}
@media(max-width:700px){
  .split{grid-template-columns:1fr;gap:12px;margin-top:10px}
  .side{flex-direction:row;overflow-x:auto;position:static;padding:2px 0 6px;scrollbar-width:none;gap:6px}
  .side::-webkit-scrollbar{display:none}
  .gbtn{flex:0 0 auto;border-radius:20px;padding:6px 12px;border-inline-start-width:0;box-shadow:inset 0 -3px 0 var(--dc)}
  .gbtn .gt{display:none}
  .gbtn .gs{margin:0;font-size:13px;opacity:1;gap:8px;white-space:nowrap}
  .gbtn .gs b{font-weight:700;opacity:.65}
  .gbtn.on .gs b{opacity:.9}
}
@media(max-width:640px){
  header{padding:14px 16px 0}
  header h1{font-size:20px}
  header .sub{font-size:12px}
  nav{margin-top:10px}
  nav button{flex:1;padding:9px 10px}
  main{padding:12px 16px 40px}
  .kpis{gap:6px;margin-bottom:12px}
  .kpi{padding:8px 8px;border-radius:10px;border-top-width:2px}
  .kpi .l{font-size:11.5px;line-height:1.25}
  .kpi .v{font-size:19px}
  .card{padding:12px;border-radius:12px}
  .weeknav{gap:6px;margin-bottom:8px}
  .weeknav h2{font-size:15px;line-height:1.3}
  .weeknav .btn{padding:6px 10px}
  .weeknav .now{font-size:11px;padding:1px 8px}
  .strip button{width:40px}
  .sechd{padding:10px 12px;border-radius:10px}
  .sech{font-size:16.5px}
  .sechd .lbl{display:none}
  .task{gap:10px;padding:10px 0}
  .meta{gap:4px 8px}
  .dom table, .dom tbody{display:block}
  .dom tr.hd{display:none}
  .dom tr{display:grid;grid-template-columns:28px 1fr auto;column-gap:10px;row-gap:3px;padding:10px 0;border-bottom:1px solid var(--line)}
  .dom tr:last-child{border-bottom:0}
  .dom td{display:block;border:0;padding:0}
  .dom td.c{grid-row:1/span 3}
  .dom td.tt{grid-column:2/4}
  .dom td.dt{grid-column:2;font-size:13px}
  .dom td.stc{grid-column:3;text-align:left}
  .dom td.nt{grid-column:2/4;font-size:12px}
  .dom td.nt:empty{display:none}
  .filters{flex-wrap:nowrap;overflow-x:auto}
}
.group{font-size:12px;font-weight:700;color:var(--muted);margin:16px 0 6px;letter-spacing:.3px}
.task{display:flex;align-items:flex-start;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0}
.cb{appearance:none;flex:0 0 22px;width:22px;height:22px;border:2px solid #9fb0c3;border-radius:6px;margin:1px 0 0;cursor:pointer;display:grid;place-content:center;background:var(--card);transition:.15s}
.cb:checked{background:var(--green);border-color:var(--green)}
.cb:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.task .body{flex:1;min-width:0}
.task .t{font-weight:500}
.task.dl .t{font-weight:700}
.task.done .t{text-decoration:line-through;color:var(--muted)}
.task.sub{padding-inline-start:34px;border-bottom-style:dashed}
.task.sub .t{font-size:14px}
.task.sub .t::before,tr.sub td.tt::before{content:"↳ ";color:var(--muted)}
tr.sub td.tt{padding-inline-start:22px}
.task.head{cursor:default}
.task.head .t{font-weight:700}
.task .nocb{flex:0 0 22px;height:22px;margin-top:1px;display:grid;place-content:center;color:var(--green);font-weight:800}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px;font-size:12px;color:var(--muted)}
.tag{border-radius:6px;padding:1px 7px;font-size:12px;font-weight:500;color:#2a3442}
.pill{border-radius:20px;padding:1px 8px;font-size:11.5px;font-weight:700;border:1px solid currentColor}
.p-dl{color:var(--red)}.p-in{color:var(--navy2)}.p-wk{color:var(--muted)}.p-hb{color:var(--amber)}.p-mt{color:var(--green)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:right;font-size:12px;color:var(--muted);font-weight:700;padding:8px 6px;border-bottom:2px solid var(--line)}
td{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.st{font-weight:700;font-size:12.5px;white-space:nowrap}
.st.ok{color:var(--green)}.st.late{color:#fff;background:var(--red);border-radius:6px;padding:1px 7px}.st.soon{color:var(--amber)}.st.rec{color:var(--muted);font-weight:500}
tr.done td:not(.c){color:var(--muted)}
tr.done td.tt{text-decoration:line-through}
.dom h3{margin:0 0 4px;font-size:16px;display:flex;align-items:center;gap:8px}
.dom .sw{width:12px;height:12px;border-radius:4px}
.goalgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.goalgrid{grid-template-columns:1fr}}
.goal .sd{color:var(--muted);font-size:13px;margin-bottom:8px}
.goal .row{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;margin:3px 0}
.goal .row span:last-child{color:var(--muted);white-space:nowrap}
.goal .pc{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-weight:700}
.goal .pc .bar{flex:1}
input[type=date]{font:inherit;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--card);color:var(--ink)}
.muted{color:var(--muted);font-size:13px}
.notes li{margin-bottom:8px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hidden{display:none}
.backup{margin-top:24px;padding-top:10px;border-top:1px solid var(--line)}
.backup summary{cursor:pointer;font-size:13px;color:var(--muted);width:max-content}
.backup .bk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;margin-top:10px}
.backup .muted{flex:1;min-width:160px}
.overflow{overflow-x:auto}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:4px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.chip.on{background:var(--navy2);border-color:var(--navy2);color:#fff}
.chips{display:inline-flex;flex-wrap:wrap;gap:4px}
.fchip{border-radius:20px;padding:0 8px;font-size:11.5px;font-weight:700;background:#fbf3d9;color:#6b5200;border:1px solid #e6d28a}
.fchip.crit{background:#f8e1de;color:var(--red);border-color:#e3b2ac}
.fchip.mute{background:var(--soft);color:var(--muted);border-color:var(--line);font-weight:500}
.fchip.rev{background:#e4eefb;color:var(--navy2);border-color:#b9cfe9}
@media (prefers-color-scheme: dark){.fchip{background:#3a3218;color:#e6cf7a;border-color:#5a4d20}.fchip.crit{background:#3b1f1c;color:#e88a80;border-color:#6a3530}.fchip.rev{background:#1a2a3f;color:#8fb4e0;border-color:#2e4a6c}}
.pdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:6px;vertical-align:middle;flex:0 0 9px}
.pdot.high{background:var(--red)}.pdot.mid{background:var(--gold)}.pdot.low{background:#9fb0c3}
.load{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.load.over{color:var(--red)}
.wmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cb.ro{opacity:.6}
.goalline{font-size:14px;margin:3px 0}
.goalline b{color:var(--navy2)}
.price{white-space:nowrap}
.sup{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.sup h4{margin:0 0 6px;font-size:14px}
.sup .si{padding:6px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.sup .si:last-child{border-bottom:0}
.sup .si .muted{display:block}
.err{padding:4px 0}
main,.card,.task .body,.dom td{min-width:0;overflow-wrap:anywhere}

.hrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hrow h1{margin:0}
dialog.login{border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);padding:18px;width:min(92vw,340px);font:inherit}
dialog.login::backdrop{background:rgba(0,0,0,.45)}
dialog.login h3{margin:0 0 10px}
dialog.login input{width:100%;box-sizing:border-box;font:inherit;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--card);color:var(--ink);margin-top:4px}
dialog.login .err-msg{color:var(--red);font-size:13px;min-height:18px;margin-top:6px}
dialog.login .acts{display:flex;gap:8px;justify-content:flex-start;margin-top:8px}
.mergebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fbf3d9;color:#6b5200;border:1px solid #e6d28a;border-radius:10px;padding:8px 12px;margin-top:10px;font-size:14px}
.mergebar[hidden]{display:none}
.mergebar span{flex:1;min-width:200px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--navy2);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;z-index:1000;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw}
.toast.show{opacity:1}

/* ---- editing (Task 9) ---- */
.hbtns{display:flex;gap:6px;flex:0 0 auto}
.btn.danger{color:var(--red);border-color:#e3b2ac}
.btn.add{font-size:13px;padding:4px 10px;border-style:dashed;color:var(--navy2)}
.ed{background:none;border:0;padding:0 4px;margin-inline-start:4px;font-size:14px;cursor:pointer;line-height:1;vertical-align:middle}
.ed:focus-visible,.btn:focus-visible{outline:2px solid var(--head);outline-offset:2px}
.task .ed{flex:0 0 auto;align-self:center}
.adds{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.sdedit{float:left;margin:-2px 0 4px 0}
.racts{display:inline-flex;width:100%;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
tr.hl td{animation:hl 2.5s ease-out}
@keyframes hl{0%,40%{background:#fbf3d9}100%{background:transparent}}
@media (prefers-color-scheme: dark){@keyframes hl{0%,40%{background:#3a3218}100%{background:transparent}}}
.archive h3{margin:0 0 8px}
.archive h4{margin:12px 0 4px;font-size:14px;color:var(--muted)}
.arow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.arow:last-child{border-bottom:0}
.arow>div{min-width:0;overflow-wrap:anywhere}

dialog.sheet{border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);padding:0;
  width:min(640px,92vw);max-width:100vw;max-height:90vh;overflow:auto;font:inherit;overscroll-behavior:contain}
dialog.sheet::backdrop{background:rgba(0,0,0,.45)}
dialog.sheet .in{padding:16px}
dialog.sheet.confirm{width:min(420px,92vw)}
dialog.sheet .q{margin:0 0 12px;font-weight:500}
@media(max-width:599px){
  dialog.sheet{width:100%;margin:auto 0 0;border-radius:14px 14px 0 0;border-bottom:0}
}
.sheet .shd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.sheet .shd h3{margin:0;font-size:17px}
.sheet .x{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:4px}
.sheet .sbody{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}
.sheet .sbody>*{min-width:0}
.sheet .fld{display:flex;flex-direction:column;gap:3px;font-size:13px;font-weight:500;color:var(--muted);flex:1 1 160px;min-width:0}
.sheet .fld.wide{flex-basis:100%}
.sheet .row{display:flex;flex-wrap:wrap;gap:10px 12px;flex-basis:100%;min-width:0}
.sheet .row[hidden]{display:none}
.sheet .row .fld{flex:1 1 130px}
.sheet .fld.every-n{flex:0 1 150px}
.sheet input:not([type=checkbox]),.sheet select,.sheet textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 8px;width:100%;min-width:0;box-sizing:border-box}
.sheet input[type=color]{padding:2px;height:38px}
.sheet input[readonly]{background:var(--soft);color:var(--muted)}
.sheet input:disabled{opacity:.5}
.sheet .inl{display:flex;align-items:center;gap:6px;color:var(--ink)}
.sheet .inl input{flex:1 1 auto;width:auto}
.sheet fieldset{flex-basis:100%;border:1px solid var(--line);border-radius:10px;padding:8px 10px 10px;margin:0;min-width:0}
.sheet legend{font-size:13px;font-weight:700;color:var(--muted);padding:0 4px}
.sheet .flag{display:flex;align-items:center;gap:8px;margin:4px 0}
.sheet .flag .ck{flex:0 0 130px}
.sheet .flag input[type=text]{flex:1}
.sheet .ck{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink);cursor:pointer}
.sheet .ck input{width:18px;height:18px;margin:0}
.sheet .pzm{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:22px}
.sheet .sdl{flex-basis:100%}
.fchip.ok{background:#e3f2ea;color:var(--green);border-color:#b5d9c4}
@media (prefers-color-scheme: dark){.fchip.ok{background:#173426;border-color:#2b5a40}}
.sheet .err-msg{color:var(--red);font-size:14px;font-weight:500;min-height:20px;margin-top:10px}
.sheet .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sheet .acts .danger{margin-inline-start:auto}
.sheet .set{flex-basis:100%;border-top:1px solid var(--line);padding-top:8px}
.sheet .set:first-child{border-top:0;padding-top:0}
.sheet .set h4{margin:0 0 6px;font-size:14px}
.sheet .evrow{display:grid;grid-template-columns:90px 150px 1fr auto auto;gap:6px;align-items:center;margin:4px 0}
.sheet .evrow.new{grid-template-columns:90px 150px 1fr auto;margin-top:8px}
@media(max-width:599px){
  .sheet .evrow,.sheet .evrow.new{grid-template-columns:1fr 1fr;padding-bottom:6px;border-bottom:1px dashed var(--line)}
  .sheet .evrow input[name=note],.sheet .evrow input[name=nnote]{grid-column:1/-1}
  .sheet .flag .ck{flex-basis:110px}
}
.sheet a.btn{text-decoration:none;display:inline-block}
.sheet label.btn{display:inline-block;color:var(--ink);font-size:15px}