:root{
  --paper:#EDF0F2; --card:#FFFFFF; --ink:#15212B; --muted:#56626C; --line:#D6DCE1;
  --df:#0B7FA6; --df-soft:#DDF0F6; --p24:#B5195A; --p24-soft:#F7E1EA;
  --wait:#9A7300; --wait-soft:#FFF3C4; --ok:#2E7D57; --ok-soft:#E0F1E7; --late:#C2410C; --late-soft:#FDE8DD;
  --r-sm:6px; --r:10px;
  --f:'Archivo', 'Segoe UI', system-ui, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--f)}
a{color:var(--df)}
h1,h2,h3{font-stretch:78%;font-weight:800;letter-spacing:-.01em;line-height:1.1;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--df);outline-offset:2px}

/* registration mark motif */
.mark{width:44px;height:44px;position:relative;display:inline-block}
.mark::before{content:"";position:absolute;inset:9px;border:3px solid var(--p24);border-radius:50%}
.mark::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--df),var(--df)) center/3px 100% no-repeat,linear-gradient(var(--df),var(--df)) center/100% 3px no-repeat}
.mark.sm{width:22px;height:22px}.mark.sm::before{inset:4px;border-width:2px}
.mark.sm::after{background:linear-gradient(#fff,#fff) center/2px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 2px no-repeat}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:36px;width:min(380px,100%);display:flex;flex-direction:column;gap:14px}
.login-card input{width:100%}
.login-card label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px}
.login-card h1{font-size:34px}
.login-card .sub{margin:0 0 6px;color:var(--muted)}
.err{background:var(--late-soft);color:var(--late);padding:10px 12px;border-radius:var(--r-sm);margin:0}

/* shell */
.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.side{background:var(--ink);color:#E8EDF1;display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none;font-weight:800;font-stretch:78%;font-size:20px;padding:0 8px 22px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{color:#C9D3DB;text-decoration:none;padding:9px 10px;border-radius:var(--r-sm);font-weight:500}
.side nav a:hover{background:#22313D;color:#fff}
.side nav a.on{background:#fff;color:var(--ink);font-weight:700}
.who{margin-top:auto;display:flex;gap:10px;align-items:center;padding:12px 8px 0;border-top:1px solid #2C3B47;font-size:14px}
.who small{display:block;color:#9AA8B3}
.who a{margin-left:auto;color:#9AA8B3;font-size:13px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;margin-right:6px}
.dot.side-DF{background:var(--df)}.dot.side-P24{background:var(--p24)}
.shell>*{min-width:0}
.tabbar{display:none}
.table-wrap{overflow-x:auto}
.hero,.panel,.day{min-width:0}
.main{min-width:0;padding:32px clamp(16px,3vw,40px) 80px;max-width:1400px;width:100%;display:flex;flex-direction:column;gap:22px}

/* buttons */
.btn{border:1px solid transparent;border-radius:var(--r-sm);padding:9px 16px;font-weight:600;cursor:pointer;background:var(--card);text-decoration:none;display:inline-flex;align-items:center;gap:6px;line-height:1.2}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:#26394A}
.btn.ghost{border-color:var(--line);background:var(--card)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.danger{color:var(--late)}
.btn.sm{padding:7px 12px;font-size:14px}
.btn.xs{padding:4px 9px;font-size:13px;font-weight:500}

/* overview hero */
.hero{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px clamp(18px,3vw,36px);display:flex;flex-direction:column;gap:26px}
.count{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap}
.big{font-size:clamp(110px,15vw,190px);font-weight:900;font-stretch:62%;line-height:.78;letter-spacing:-.03em;color:var(--ink)}
.count-text h1{font-size:clamp(30px,4vw,46px)}
.count-text p{margin:6px 0 0;color:var(--muted)}
.count-text .live{color:var(--ink);font-weight:600}
.progress-line{font-variant-numeric:tabular-nums}
.runway{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(54px,1fr));gap:6px;overflow-x:auto}
.runway a{display:flex;flex-direction:column;gap:3px;padding:10px 8px;border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;color:var(--ink);background:var(--paper);height:100%}
.runway .wd{font-size:12px;color:var(--muted)}
.runway .dn{font-size:28px;font-weight:800;font-stretch:70%;line-height:1}
.runway .cnt{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.runway .today a{background:var(--card);border:2px solid var(--ink);box-shadow:inset 0 -4px 0 var(--df)}
.runway .past.late a{background:var(--late-soft);border-color:#F3C3AA}
.runway .past.ok a{background:var(--ok-soft);border-color:#B9DCC7}
.runway .launch a{background:var(--p24);border-color:var(--p24);color:#fff}
.runway .launch .wd,.runway .launch .cnt{color:#F8D7E4}
.bar{display:block;height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok)}
.launch .bar{background:#D96A95}.launch .bar i{background:#fff}

/* panels */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px clamp(16px,2vw,26px)}
.panel h2{font-size:24px;margin-bottom:12px;display:flex;gap:10px;align-items:baseline}
.panel.narrow{max-width:460px}
.num{font-size:15px;font-weight:700;font-stretch:100%;background:var(--paper);border-radius:999px;padding:1px 9px;color:var(--muted)}
.hint{color:var(--muted);margin:-6px 0 12px;font-size:14px}
.empty{color:var(--muted);list-style:none}
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pend{border-top:5px solid var(--df)}
.pend.side-P24{border-top-color:var(--p24)}
.pend.side-DF h2 .num{background:var(--df-soft);color:var(--df)}
.pend.side-P24 h2 .num{background:var(--p24-soft);color:var(--p24)}
.tlist{list-style:none;margin:0;padding:0}
.tlist li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);align-items:baseline}
.tlist .when{color:var(--muted);font-size:13px;white-space:nowrap}
.tlist li.late .when{color:var(--late);font-weight:600}
.more{display:inline-block;margin-top:10px;font-weight:600}
.tlink{background:none;border:0;padding:0;text-align:left;cursor:pointer;font-weight:600;color:var(--ink)}
.tlink:hover{text-decoration:underline}

.milestones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.milestones li{display:flex;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.step{width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:800;flex:none}
.milestones li.ok .step{background:var(--ok);border-color:var(--ok);color:#fff}
.milestones li.late .step{border-color:var(--late);color:var(--late)}
.ms-body{flex:1;display:flex;flex-direction:column;gap:6px}
.ms-top{display:flex;justify-content:space-between;gap:12px}
.state{font-size:13px;color:var(--muted);white-space:nowrap}
.milestones li.late .state{color:var(--late);font-weight:600}
.milestones li.ok .state{color:var(--ok);font-weight:600}
.bar.wide{height:6px}
.milestones small{color:var(--muted)}
.activity{list-style:none;margin:0;padding:0}
.activity li{padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.activity time{color:var(--muted);font-size:12px;margin-left:6px}

/* page head */
.pagehead{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:flex-end}
.pagehead h1{font-size:40px;flex:0 0 100%}
.pagehead p{margin:0;color:var(--muted);flex:1 1 320px}

/* chips & bits */
.chip{border:0;border-radius:4px;padding:3px 7px;font-size:12px;font-weight:800;letter-spacing:.02em;cursor:pointer;flex:none;line-height:1.3}
.chip.side-DF{background:var(--df-soft);color:var(--df)}
.chip.side-P24{background:var(--p24-soft);color:var(--p24)}
.chip:hover{outline:2px solid currentColor}
.bits{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.bit{font-size:12px;color:var(--muted);background:var(--paper);border-radius:4px;padding:1px 7px}
.bit.open{background:var(--wait-soft);color:var(--wait)}
.bit.ms{background:transparent;padding-left:0}

/* day plan */
.day{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;scroll-margin-top:16px}
.day.is-today{border:2px solid var(--ink)}
.dayhead{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);background:#F7F9FA}
.dayhead h2{font-size:22px;flex:1}
.dayhead em{font-style:normal;font-size:13px;font-weight:700;font-stretch:100%;background:var(--ink);color:#fff;border-radius:4px;padding:2px 7px;vertical-align:middle;margin-left:6px}
.dayhead em.go{background:var(--p24)}
.dayhead .cnt{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.rows{list-style:none;margin:0;padding:0}
.row{display:flex;align-items:flex-start;gap:12px;padding:12px 20px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .tick{width:20px;height:20px;margin-top:2px;accent-color:var(--ok);flex:none;cursor:pointer}
.row-main{flex:1;min-width:0}
.row.done .tlink{text-decoration:line-through;color:var(--muted)}
.row.late{background:#FFF8F4}
.row.late .tlink::after{content:" · late";color:var(--late);font-weight:600;font-size:13px}
.rows .empty{padding:14px 20px}
.status-sel,.move-sel,select,input,textarea{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 9px;background:#fff;min-width:0}
.status-sel{font-size:13px;flex:none}
.st-doing{border-color:var(--df);color:var(--df)}
.st-waiting{border-color:var(--wait);color:var(--wait);background:var(--wait-soft)}
.st-done{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}

/* board */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;flex:0 0 100%}
.filters label{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:3px}
.board{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;align-items:start;overflow-x:auto;padding-bottom:8px}
.col{background:#E2E7EA;border-radius:var(--r);padding:12px;min-height:200px}
.col h2{font-size:19px;padding:2px 4px 10px;display:flex;gap:8px;align-items:baseline}
.col-doing h2{color:var(--df)}.col-waiting h2{color:var(--wait)}.col-done h2{color:var(--ok)}
.cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-height:120px;border-radius:var(--r-sm);transition:background .15s}
.cards.over{background:rgba(11,127,166,.10);outline:2px dashed var(--df);outline-offset:2px}
.card{background:var(--card);border-radius:var(--r-sm);padding:10px 12px;border-left:4px solid var(--df);cursor:grab;display:flex;flex-direction:column;gap:6px}
.card.side-P24{border-left-color:var(--p24)}
.card.dragging{opacity:.45}
.card.late{box-shadow:inset 0 0 0 1px #F3C3AA}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card .when{font-size:12px;color:var(--muted)}
.card.late .when{color:var(--late);font-weight:600}
.card .tlink{font-size:14px;line-height:1.35}
.col-done .card .tlink{color:var(--muted)}
.move-sel{font-size:12px;padding:4px 6px;display:none}

/* vault */
.vault{list-style:none;margin:0;padding:0}
.vault li{display:grid;grid-template-columns:1.3fr 1.3fr auto;gap:16px;padding:14px 0;border-top:1px solid var(--line);align-items:start}
.v-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.v-url{font-size:14px;overflow-wrap:anywhere}
.v-notes{margin:2px 0 0;color:var(--muted);font-size:14px}
.v-notes.muted{font-style:italic}
.v-creds{display:flex;flex-direction:column;gap:6px}
.cred{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cred span:first-child{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;background:var(--paper);padding:3px 8px;border-radius:4px;overflow-wrap:anywhere}
.v-act{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.v-act small{color:var(--muted);font-size:12px;text-align:right}

/* chat */
.chat{display:flex;flex-direction:column;gap:12px}
.msgs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto}
.msg{background:var(--paper);border-radius:var(--r);padding:10px 14px;max-width:760px}
.msg.mine{background:var(--df-soft);align-self:flex-end}
.msg .who{border:0;padding:0;margin:0 0 4px;font-size:13px;gap:6px}
.msg .who time{color:var(--muted);margin-left:4px}
.msg .body{overflow-wrap:anywhere}
.composer{display:flex;gap:10px;align-items:flex-end}
.composer textarea{flex:1;resize:vertical}

/* people */
.people{width:100%;border-collapse:collapse;margin-bottom:14px}
.people th,.people td{text-align:left;padding:10px 8px;border-top:1px solid var(--line)}
.people th{font-size:13px;color:var(--muted);font-weight:600;border-top:0}

/* forms */
.stack{display:flex;flex-direction:column;gap:12px}
.stack label,.grid2 label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600}
.stack label input,.stack label select,.stack label textarea{font-weight:400}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label.check{flex-direction:row !important;align-items:center;gap:8px;font-weight:500 !important}
.row-actions{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}

/* modal */
.modal{border:0;border-radius:var(--r);padding:0;width:min(720px,96vw);max-height:92vh;color:var(--ink)}
.modal::backdrop{background:rgba(21,33,43,.55)}
.modal-in{padding:22px 26px 26px;display:flex;flex-direction:column;gap:18px}
.m-head{display:flex;justify-content:space-between;align-items:center}
.m-head h2{font-size:26px}
.m-sec{border-top:1px solid var(--line);padding-top:16px}
.m-sec h3{font-size:19px;margin-bottom:8px}
.fields{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:10px}
.fields li:not(.empty){display:flex;flex-direction:column;gap:4px}
.f-label{font-size:14px;font-weight:600}
.f-label em{font-style:normal;font-weight:500;font-size:12px;color:var(--p24);background:var(--p24-soft);border-radius:4px;padding:0 6px;margin-left:4px}
.f-in{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.f-in input{flex:1 1 220px}
.add-field{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--paper);padding:10px;border-radius:var(--r-sm)}
.add-field input{flex:1 1 160px}
.files{list-style:none;margin:0 0 10px;padding:0}
.files li:not(.empty){display:flex;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.files small{color:var(--muted);margin-right:auto}
.upload{cursor:pointer}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;z-index:100;font-weight:500}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* responsive */
@media (max-width: 900px){
  body{font-size:16px}
  input,select,textarea{font-size:16px}
  .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{position:sticky;top:0;height:auto;flex-direction:row;align-items:center;gap:8px;padding:10px 14px;padding-top:max(10px, env(safe-area-inset-top));z-index:5}
  .brand{padding:0;font-size:18px;white-space:nowrap}
  .side nav{display:none}
  .who{margin:0 0 0 auto;border:0;padding:0;white-space:nowrap;font-size:14px}
  .who > span:not(.dot){display:none}
  .main{padding:18px 14px calc(96px + env(safe-area-inset-bottom));gap:16px}
  .tabbar{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--ink);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;color:#9AA8B3;text-decoration:none;font-size:11px;font-weight:600;border-radius:var(--r-sm)}
  .tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
  .tabbar a.on{color:#fff;background:#22313D}
  .pagehead h1{font-size:32px}
  .hero{padding:20px 16px}
  .split{grid-template-columns:1fr;gap:16px}
  .board{grid-template-columns:repeat(4,minmax(270px,86vw));scroll-snap-type:x mandatory;margin:0 -14px;padding:0 14px 8px}
  .col{scroll-snap-align:start}
  .card{cursor:default}
  .move-sel{display:block;font-size:14px}
  .filters label{flex:1 1 140px}
  .filters select{width:100%}
  .vault li{grid-template-columns:1fr;gap:10px}
  .v-act{align-items:center;flex-direction:row}
  .grid2{grid-template-columns:1fr}
  .dayhead{padding:12px 14px;flex-wrap:wrap}
  .row{display:grid;grid-template-columns:24px auto 1fr;column-gap:10px;row-gap:8px;padding:12px 14px;align-items:start}
  .row .chip{margin-top:1px}
  .status-sel{grid-column:2 / -1;justify-self:start}
  .chip{padding:5px 9px;font-size:13px}
  .btn.xs{padding:7px 11px;font-size:14px}
  .tlist li{flex-direction:column;gap:2px}
  .modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .modal-in{padding:max(16px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}
  .m-head{position:sticky;top:calc(-1 * max(16px, env(safe-area-inset-top)));background:#fff;padding:10px 0;z-index:2;border-bottom:1px solid var(--line)}
  .f-in input{flex:1 1 100%}
  .add-field input{flex:1 1 100%}
  .composer{flex-direction:column;align-items:stretch}
  .msgs{max-height:none}
  .chat .msgs{max-height:calc(100dvh - 330px)}
  .people thead{display:none}
  .people tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:12px 0;border-top:1px solid var(--line)}
  .people td{border:0;padding:0}
  .people td::before{content:attr(data-l);display:block;font-size:12px;color:var(--muted)}
  .people td:first-child{grid-column:1 / -1;font-weight:700}
  .people td:first-child::before{display:none}
  .people td:last-child:not([data-l]){grid-column:1 / -1}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}