:root{
  --ink:#0B0B0C;--g900:#161618;--g700:#2E2E31;--g500:#6E6E73;--g300:#B5B5B8;--g150:#E4E4E6;--g75:#F4F4F5;--paper:#FFFFFF;
  --radius:12px;--fd:"Space Grotesk",system-ui,sans-serif;--fb:"Inter",system-ui,sans-serif;--fm:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--fb);color:var(--ink);background:var(--g75);-webkit-font-smoothing:antialiased;line-height:1.5;}
button{font-family:var(--fb);cursor:pointer;}
input,select{font-family:var(--fb);}
.eb{font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--g500);}
.mark{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--fd);font-weight:700;font-size:1.1rem;}
.mark .sq{width:13px;height:13px;background:var(--ink);border-radius:2px;}
.view{display:none;}.view.active{display:block;}
.banner{background:var(--ink);color:#fff;font-size:12px;text-align:center;padding:6px;font-family:var(--fm);letter-spacing:.05em;}
.btn{border:none;border-radius:10px;padding:.7rem 1rem;font-size:.92rem;font-weight:600;}
.btn-primary{background:var(--ink);color:#fff;width:100%;}
.btn-ghost{background:transparent;border:1px solid var(--g150);color:var(--ink);padding:.5rem .85rem;font-size:.85rem;}
.go{background:var(--ink);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-weight:600;font-size:14px;}

/* auth */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem;}
.auth-card{width:100%;max-width:460px;background:var(--paper);border:1px solid var(--g150);border-radius:var(--radius);box-shadow:0 20px 60px -34px rgba(0,0,0,.5);padding:2rem;}
.seg{display:flex;background:var(--g75);border:1px solid var(--g150);border-radius:10px;padding:3px;margin:1.2rem 0 1.4rem;}
.seg button{flex:1;border:none;background:transparent;padding:.55rem;border-radius:8px;font-size:.9rem;font-weight:600;color:var(--g500);}
.seg button.on{background:var(--ink);color:#fff;}
.field{margin-bottom:1rem;}
.field label{display:block;font-size:.82rem;font-weight:500;margin-bottom:.35rem;}
.field input,.field select{width:100%;border:1.5px solid var(--g150);border-radius:9px;padding:.65rem .75rem;font-size:1rem;}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink);}
.subseg{display:flex;gap:.4rem;margin-bottom:.5rem;}
.subseg button{flex:1;border:1.5px solid var(--g150);background:var(--paper);border-radius:8px;padding:.5rem;font-size:.82rem;font-weight:600;color:var(--g500);}
.subseg button.on{border-color:var(--ink);color:var(--ink);}
.msg{margin-top:1rem;font-size:.86rem;padding:.7rem .85rem;border-radius:9px;display:none;border:1px solid;}
.msg.show{display:block;}.msg.err{background:var(--g75);border-color:var(--g300);}.msg.ok{background:var(--ink);border-color:var(--ink);color:#fff;}
.switch{margin-top:1.2rem;text-align:center;font-size:.88rem;color:var(--g500);}
.switch button{background:none;border:none;color:var(--ink);font-weight:600;text-decoration:underline;font-size:.88rem;}
.demo{margin-top:1.2rem;border-top:1px dashed var(--g150);padding-top:.9rem;}
.demo code{font-family:var(--fm);font-size:.78rem;background:var(--g75);padding:.1rem .35rem;border-radius:5px;}
.demo p{font-size:.8rem;color:var(--g500);margin:.3rem 0;}

/* access selection */
.access-box{border:1px solid var(--g150);border-radius:10px;padding:.9rem;margin-bottom:1rem;background:var(--g75);}
.access-box .ttl{font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--g500);margin-bottom:.6rem;}
.chk{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;font-size:.9rem;cursor:pointer;}
.chk input{width:17px;height:17px;}
.tabline{display:flex;align-items:center;justify-content:space-between;padding:.4rem 0;border-top:1px solid var(--g150);}
.tabline .nm{font-size:.9rem;}
.tabline .ve{display:flex;gap:.8rem;}
.tabline .ve label{display:flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--g700);}
.office-sub{margin-top:.5rem;padding-left:.3rem;}
.seg3{display:inline-flex;border:1px solid var(--g150);border-radius:8px;overflow:hidden;}
.seg3 button{border:none;background:var(--paper);padding:.3rem .7rem;font-size:.78rem;color:var(--g500);border-right:1px solid var(--g150);}
.seg3 button:last-child{border-right:none;}
.seg3 button.on{background:var(--ink);color:#fff;}

/* chrome */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--paper);border-bottom:1px solid var(--g150);padding:.85rem clamp(1rem,4vw,2rem);position:sticky;top:0;z-index:20;}
.topbar .left{display:flex;align-items:center;gap:.9rem;min-width:0;}
.back{background:none;border:1px solid var(--g150);border-radius:8px;width:34px;height:34px;font-size:1.1rem;color:var(--ink);flex:none;}
.crumb{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--g500);}
.crumb b{color:var(--ink);}
.who{display:flex;align-items:center;gap:.8rem;}
.who .hi{font-size:.86rem;color:var(--g500);white-space:nowrap;}
.page{max-width:1000px;margin:0 auto;padding:clamp(1.1rem,4vw,2rem) clamp(1rem,4vw,1.6rem);}
.page-head{margin-bottom:1.4rem;}
.page-head h1{font-family:var(--fd);font-weight:600;font-size:1.5rem;margin:.3rem 0 .2rem;}
.page-head p{color:var(--g500);margin:0;font-size:.95rem;}

/* tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.tile{text-align:left;background:var(--paper);border:1px solid var(--g150);border-radius:var(--radius);padding:1.5rem;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;width:100%;}
.tile:hover{border-color:var(--ink);}
.tile .glyph{width:42px;height:42px;border:1.5px solid var(--ink);border-radius:9px;display:grid;place-items:center;font-family:var(--fd);font-weight:700;}
.tile h2{font-family:var(--fd);font-weight:600;font-size:1.3rem;margin:.9rem 0 .3rem;}
.tile p{color:var(--g500);font-size:.88rem;margin:0;}
.tile .arrow{font-family:var(--fm);font-size:.7rem;letter-spacing:.15em;color:var(--g500);margin-top:1rem;}
.modcard{background:var(--paper);border:1px dashed var(--g150);border-radius:11px;padding:1.1rem;color:var(--g500);}
.modcard .glyph{width:34px;height:34px;border:1.5px solid var(--g300);border-radius:8px;display:grid;place-items:center;font-family:var(--fd);color:var(--g500);margin-bottom:.6rem;}
.modcard h3{font-family:var(--fd);font-size:.95rem;color:var(--g700);margin:0 0 .4rem;}
.soon{font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;border:1px dashed var(--g300);border-radius:5px;padding:.1rem .4rem;}
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem;}
.modlabel{font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--g500);margin:1.6rem 0 .7rem;}

/* add panel + controls */
.panel{background:var(--paper);border:1px solid var(--g150);border-radius:var(--radius);padding:14px;margin-bottom:14px;}
.prow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.fld{display:flex;flex-direction:column;gap:4px;}
.fld.grow{flex:1;min-width:170px;}
.fld label{font-family:var(--fm);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--g500);}
.fld input,.fld select{border:1px solid var(--g150);border-radius:8px;padding:9px 10px;font-size:14px;background:var(--paper);}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--ink);}
.projwrap{display:flex;gap:6px;align-items:flex-end;}
.addp{width:38px;height:38px;border:1px solid var(--ink);border-radius:8px;background:var(--paper);font-size:18px;color:var(--ink);}
.newrow{display:none;gap:6px;margin-top:10px;}.newrow.show{display:flex;}
.newrow input{flex:1;border:1px solid var(--g150);border-radius:8px;padding:8px 10px;}
.warn{color:var(--g900);background:var(--g75);border:1px solid var(--g300);border-radius:8px;font-size:12px;padding:6px 10px;margin-top:10px;display:none;}
.warn.show{display:block;}

/* dashboard */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 12px;}
.card{background:var(--paper);border:1px solid var(--g150);border-radius:var(--radius);padding:14px;cursor:pointer;transition:border-color .12s;}
.card:hover{border-color:var(--ink);}
.card.on{outline:2px solid var(--ink);}
.card.alert{background:var(--ink);color:#fff;border-color:var(--ink);}
.card .n{font-family:var(--fd);font-size:24px;font-weight:700;}
.card .lb{font-size:11px;color:var(--g500);margin-top:2px;}
.card.alert .lb{color:var(--g300);}
.break{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.mini{background:var(--paper);border:1px solid var(--g150);border-radius:var(--radius);padding:12px 14px;}
.mini .h{font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--g500);margin-bottom:8px;}
.mini .r{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:4px 0;}
.mini .bar{height:6px;background:var(--ink);border-radius:3px;margin-right:7px;display:inline-block;min-width:6px;vertical-align:middle;}

/* filters + multiselect */
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.chip{border:1px solid var(--g150);background:var(--paper);border-radius:99px;padding:6px 13px;font-size:12px;font-weight:600;color:var(--g500);}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.chip .c{font-family:var(--fm);opacity:.7;margin-left:4px;}
.spacer{margin-left:auto;}
.ms{position:relative;}
.ms>summary{list-style:none;border:1px solid var(--g150);border-radius:8px;padding:7px 12px;font-size:12px;background:var(--paper);color:var(--g700);cursor:pointer;white-space:nowrap;}
.ms>summary::-webkit-details-marker{display:none;}
.ms[open]>summary{border-color:var(--ink);}
.ms-panel{position:absolute;right:0;top:calc(100% + 4px);background:var(--paper);border:1px solid var(--g150);border-radius:10px;box-shadow:0 12px 30px -16px rgba(0,0,0,.4);padding:8px;min-width:190px;z-index:30;max-height:240px;overflow:auto;}
.ms-panel label{display:flex;align-items:center;gap:.5rem;padding:.35rem .3rem;font-size:13px;cursor:pointer;border-radius:6px;}
.ms-panel label:hover{background:var(--g75);}
.expbtn{border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:8px;padding:7px 12px;font-size:12px;font-weight:600;}

/* lists */
.tlist{display:flex;flex-direction:column;gap:7px;}
.ti{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--g150);border-radius:11px;padding:12px 14px;}
.ti.done{background:var(--g75);}
.cb{width:21px;height:21px;border:1.8px solid var(--g500);border-radius:6px;flex:none;display:grid;place-items:center;background:var(--paper);color:#fff;font-size:12px;cursor:pointer;}
.ti.done .cb{background:var(--ink);border-color:var(--ink);}
.tb{flex:1;min-width:0;}
.tt{font-weight:500;word-break:break-word;}
.ti.done .tt{text-decoration:line-through;color:var(--g500);}
.meta{display:flex;gap:6px;align-items:center;margin-top:4px;flex-wrap:wrap;}
.tag{font-family:var(--fm);font-size:10px;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--g300);border-radius:5px;padding:1px 6px;color:var(--g700);}
.tasg{font-size:11px;color:var(--g500);}
.pill{font-family:var(--fm);font-size:10px;letter-spacing:.04em;text-transform:uppercase;border-radius:5px;padding:1px 7px;border:1px solid;}
.pill.over{background:var(--ink);color:#fff;border-color:var(--ink);}
.pill.today{background:var(--g700);color:#fff;border-color:var(--g700);}
.pill.due{background:#fff;color:var(--ink);border-color:var(--ink);}
.pill.future{background:#fff;color:var(--g500);border-color:var(--g300);}
.pill.recur{background:#fff;color:var(--g700);border-color:var(--g300);}
.pill.doneb{background:#fff;color:var(--g500);border-color:var(--g300);opacity:.7;}
.del{background:none;border:none;color:var(--g300);font-size:1.2rem;flex:none;padding:.1rem .4rem;}
.del:hover{color:var(--ink);}

/* engagement table-ish rows */
.erow{display:grid;grid-template-columns:2fr 1.3fr .8rem;gap:10px;align-items:center;background:var(--paper);border:1px solid var(--g150);border-radius:11px;padding:12px 14px;}
.erow .ename{font-weight:500;}
.erow .esub{margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.erow .efees{text-align:right;font-family:var(--fd);font-weight:600;}
.erow .efreq{font-size:11px;color:var(--g500);}
.spill{font-family:var(--fm);font-size:10px;text-transform:uppercase;letter-spacing:.04em;border-radius:5px;padding:1px 7px;border:1px solid var(--g300);color:var(--g700);}
.spill.proposal{border-style:dashed;}
.spill.confirmed{background:var(--g700);color:#fff;border-color:var(--g700);}
.spill.ongoing{background:var(--ink);color:#fff;border-color:var(--ink);}
.spill.completed{background:#fff;color:var(--g500);}
.spill.hold{background:#fff;color:var(--g500);border-style:dotted;}

.empty{background:var(--paper);border:1px dashed var(--g150);border-radius:var(--radius);padding:2rem;text-align:center;color:var(--g500);}
.urow{display:flex;align-items:center;gap:1rem;background:var(--paper);border:1px solid var(--g150);border-radius:11px;padding:.85rem 1rem;margin-bottom:.6rem;flex-wrap:wrap;}
.uava{width:36px;height:36px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--fd);font-weight:700;flex:none;}
.uinfo{flex:1;min-width:140px;}.uinfo .un{font-weight:600;}.uinfo .ui{font-family:var(--fm);font-size:.78rem;color:var(--g500);}
.grant{border:1px solid var(--g150);border-radius:10px;padding:.7rem;margin:.5rem 0;background:var(--g75);width:100%;}

@media(max-width:680px){
  .cards{grid-template-columns:1fr 1fr;}.break{grid-template-columns:1fr;}.tiles{grid-template-columns:1fr;}
  .prow .fld{flex:1 1 100%;}.projwrap{width:100%;}.projwrap select{flex:1;}.go{width:100%;}
  .who .hi{display:none;}.erow{grid-template-columns:1fr auto .8rem;}
}