:root{--red:#c62828;--blue:#1565c0;--green:#2e7d32;--grey:#9e9e9e;--fg:#1a1a1a;--muted:#6b6b6b;--bg:#fff;--card:#fff;--line:#e6e6e6;--soft:#f6f6f6}
@media (prefers-color-scheme:dark){:root{--red:#ef5350;--blue:#64b5f6;--green:#66bb6a;--grey:#757575;--fg:#eee;--muted:#a0a0a0;--bg:#121212;--card:#1b1b1b;--line:#2c2c2c;--soft:#181818}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.hd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line)}
.hd .title{font-weight:700;font-size:16px;overflow-wrap:anywhere}
.nav{display:flex;align-items:center;gap:14px}
.nav a{color:var(--muted);text-decoration:none;padding:2px 0}
.nav a.on{color:var(--fg);font-weight:600;border-bottom:2px solid var(--fg)}
.nav button{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;padding:0}
.fresh{font-size:12px;color:var(--muted);padding:6px 14px;background:var(--soft);border-bottom:1px solid var(--line)}
.wrap{max-width:900px;margin:0 auto}
.kpis{display:flex;gap:8px;padding:12px 14px}
.kpi{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--card);min-width:0}
.kpi .n{font-size:22px;font-weight:700}
.kpi .l{font-size:12px;color:var(--muted)}
.kpi.red .n{color:var(--red)}.kpi.blue .n{color:var(--blue)}.kpi.green .n{color:var(--green)}
.kpi.desk-only{display:none}
@media (min-width:640px){.kpi.desk-only{display:block}.kpi.phone-only{display:none}}
.sec{padding:4px 14px 12px}
.sec h2{margin:10px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.sec h2.red{color:var(--red)}.sec h2.blue{color:var(--blue)}
.row{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:6px;background:var(--card)}
.row.late{border-left:4px solid var(--red)}.row.now{border-left:4px solid var(--blue)}
.row .t{font-weight:600;margin-bottom:3px;overflow-wrap:anywhere}
.row .meta{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.row .meta .left{min-width:0;overflow-wrap:anywhere}
.badge{font-weight:700;color:var(--red);white-space:nowrap}
.pb{height:4px;background:var(--line);border-radius:2px;margin-top:6px;overflow:hidden}
.pb i{display:block;height:100%;background:var(--green)}
.empty{color:var(--muted);padding:10px 2px}
.phase{display:none}
@media (min-width:640px){.phase{display:inline}}
@media (max-width:639px){.row .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
.err{color:var(--red);padding:10px 14px}
.stale{font-size:12px;color:var(--muted);padding:6px 14px;background:var(--soft);border-bottom:1px solid var(--line)}
/* login */
.login{max-width:340px;margin:12vh auto;padding:0 14px}
.login h1{font-size:20px;margin:0 0 16px}
.login input,.login button{width:100%;font:inherit;padding:10px;border-radius:8px;border:1px solid var(--line);margin-bottom:10px;background:var(--card);color:var(--fg)}
.login button{background:var(--fg);color:var(--bg);cursor:pointer;border:0;font-weight:600}
/* whole plan */
.wrap.wide{max-width:1280px}
.plan{padding:8px 14px 16px}
.prow{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line);padding:6px 0}
.prow .lft{display:flex;align-items:flex-start;gap:4px;flex:1 1 100%;min-width:0}
.prow.lvl3 .lft{padding-left:18px}.prow.lvl4 .lft{padding-left:36px}
.prow .pb{flex:1 1 100%;margin:6px 0 0 28px}
.prow.sm .t{font-weight:600}
.arrow{flex:0 0 28px;height:28px;background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:16px;padding:0}
.arrow.none{cursor:default}
.arrow:focus-visible{outline:2px solid var(--blue);border-radius:4px}
.prow .info{flex:1;min-width:0;padding-top:4px}
.prow .nm .t{overflow-wrap:anywhere}
.prow .meta{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--muted)}
.prow .pct{font-variant-numeric:tabular-nums}
.tl{display:none}
.prow.head{display:none}
@media (min-width:640px){
  .prow{flex-wrap:nowrap}
  .prow.head{display:flex}
  .prow .lft{flex:0 0 42%;max-width:42%}
  .prow .pb{display:none}
  .tl{display:block;position:relative;flex:1;height:22px;margin-left:8px}
  .tl.scale{height:18px}
  .tl .gl{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
  .tl .mo{position:absolute;top:0;font-size:11px;color:var(--muted);padding-left:3px;white-space:nowrap}
  .tl .bar{position:absolute;top:6px;height:10px;border-radius:3px;background:var(--grey);min-width:2px}
  .tl .bar.done{background:var(--green)}.tl .bar.late{background:var(--red)}
  .tl .bar.sum{top:8px;height:6px}
  .tl .today{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--blue)}
}
/* upload */
.upform{display:flex;flex-direction:column;gap:6px;max-width:420px}
.upform label{font-size:12px;color:var(--muted);margin-top:6px}
.upform input,.gate input{font:inherit;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);width:100%}
button.act,button.primary,a.btn{font:inherit;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;text-decoration:none;display:inline-block}
button.primary{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:600}
button:disabled{opacity:.5;cursor:default}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.kpis.wrapk{flex-wrap:wrap;padding:12px 0}
.kpis.wrapk .kpi{flex:1 1 130px}
.sumcard .note{margin-top:6px;color:var(--muted)}
.changes{margin:8px 0}
.changes summary{cursor:pointer;font-weight:600}
.chg{border-bottom:1px solid var(--line);padding:6px 0}
.chg .t{overflow-wrap:anywhere}
.chg .meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.pill{font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px;border:1px solid var(--line);white-space:nowrap}
.pill.live{color:var(--green);border-color:var(--green)}
table.hist{width:100%;border-collapse:collapse}
table.hist th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
table.hist td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
table.hist td.ac .actions{margin:0}
@media (max-width:639px){
  table.hist thead{display:none}
  table.hist,table.hist tbody,table.hist tr,table.hist td{display:block;width:100%}
  table.hist tr{border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:8px;background:var(--card)}
  table.hist td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px;overflow-wrap:anywhere}
  table.hist td[data-label]:not([data-label=""])::before{content:attr(data-label);color:var(--muted);flex:0 0 auto}
}