/* ============================================================
   LOGIC TRACKER V2 — design system
   Brand: Logic Electric (blue #1FA6DE / cream / ink) — light only
   ============================================================ */
:root{
  --bg:#F6F3EC; --surface:#FFFFFF; --sand:#EBE5DB; --sand-2:#F3EFE8;
  --ink:#2E3134; --slate:#54585A; --dim:#9B958A;
  --blue:#1FA6DE; --blue-deep:#0E7FB2; --blue-tint:rgba(31,166,222,.09); --blue-glow:rgba(31,166,222,.22);
  --green:#3E9B4F; --green-tint:rgba(62,155,79,.10);
  --yellow:#D9A514; --yellow-tint:rgba(217,165,20,.12);
  --red:#D05353;  --red-tint:rgba(208,83,83,.10);
  --border:#E4DED2; --border-soft:#EEE9DE;
  --neutral:#B9B2A4; --topbar-bg:rgba(255,255,255,.92); --sand-hover:#E6DFD2;
  --shadow:0 1px 2px rgba(46,49,52,.05),0 6px 20px rgba(46,49,52,.06);
  --shadow-lift:0 2px 6px rgba(46,49,52,.08),0 12px 32px rgba(46,49,52,.10);
  --r:12px;
  --disp:'Barlow Condensed',sans-serif; --body:'Inter',sans-serif; --mono:'JetBrains Mono',monospace;
}
/* Logic dark palette (matches finance.logic.ca V2 tokens) */
html[data-theme=dark]{
  --bg:#0B1020; --surface:#161E33; --sand:#1E2740; --sand-2:#131A2C;
  --ink:#E8ECF5; --slate:#8A93A6; --dim:#5F6A82;
  --blue:#3FB6E8; --blue-deep:#5BC4ED; --blue-tint:rgba(63,182,232,.10); --blue-glow:rgba(63,182,232,.25);
  --green:#34D399; --green-tint:rgba(52,211,153,.12);
  --yellow:#FBBF24; --yellow-tint:rgba(251,191,36,.12);
  --red:#F87171;  --red-tint:rgba(248,113,113,.12);
  --border:#2A344E; --border-soft:#1E2740;
  --neutral:#55617C; --topbar-bg:rgba(15,22,40,.92); --sand-hover:#26314D;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.35);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-padding-top:calc(var(--stick-top,110px) + 14px);}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--ink);}
@media(min-width:769px){input,select,textarea{font-size:13.5px;}}
[hidden]{display:none!important;}
::selection{background:var(--blue-glow);}

/* ============ Auth ============ */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,var(--bg) 0%,var(--sand-2) 60%,var(--blue-tint) 100%);}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-lift);
  padding:44px 40px;max-width:380px;width:100%;text-align:center;animation:rise .5s cubic-bezier(.2,.7,.3,1);}
.auth-logo{width:64px;height:64px;object-fit:contain;margin-bottom:14px;}
.auth h1{font-family:var(--disp);font-weight:700;font-size:34px;letter-spacing:2.5px;color:var(--ink);}
.auth h1 span{color:var(--blue);}
.auth p{color:var(--dim);font-size:12.5px;margin:6px 0 26px;}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ============ Buttons ============ */
.btn{border:0;border-radius:10px;padding:10px 20px;font-size:13.5px;font-weight:600;transition:transform .12s,box-shadow .12s,background .12s;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 2px 8px var(--blue-glow);}
.btn-primary:hover{background:var(--blue-deep);}
.btn-ghost{background:transparent;color:var(--slate);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--sand-2);}
.btn-danger{background:var(--red-tint);color:var(--red);border:1px solid transparent;}
.btn-wide{width:100%;margin-top:10px;padding:12px;}
.mini-btn{border:1px solid var(--border);background:var(--surface);color:var(--dim);border-radius:8px;padding:6px 10px;font-size:12px;}

/* ============ Topbar ============ */
.topbar{position:sticky;top:0;z-index:200;background:var(--topbar-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);}
.topbar-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px 20px;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand img{width:30px;height:30px;object-fit:contain;}
.brand-word{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:2px;color:var(--ink);white-space:nowrap;}
.brand-word span{color:var(--blue);}
.tabs{display:flex;gap:2px;background:var(--sand-2);border:1px solid var(--border-soft);border-radius:11px;padding:3px;margin:0 auto;}
.tab{border:0;background:transparent;border-radius:8px;padding:7px 22px;font-family:var(--disp);
  font-size:15px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--slate);transition:all .15s;}
.tab.active{background:var(--surface);color:var(--blue-deep);box-shadow:0 1px 4px rgba(46,49,52,.10);}
.top-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.account{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--slate);background:var(--sand-2);
  border:1px solid var(--border-soft);border-radius:999px;padding:5px 12px 5px 6px;max-width:200px;overflow:hidden;white-space:nowrap;}
.account .av{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.signout{border:0;background:transparent;color:var(--dim);font-size:12px;text-decoration:underline;}
.signout:hover{color:var(--red);}
.theme-btn{border:1px solid var(--border);background:var(--sand-2);border-radius:50%;width:30px;height:30px;
  font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s;}
.theme-btn:hover{transform:rotate(15deg);border-color:var(--blue);}
@media(max-width:768px){
  .topbar-inner{flex-wrap:wrap;gap:6px 10px;padding:8px 12px;}
  .brand img{width:26px;height:26px;}
  .brand-word{font-size:17px;}
  .top-right{margin-left:auto;order:2;}
  .account{padding:3px;border-radius:50%;}
  .account .em{display:none;}
  .tabs{order:3;width:100%;margin:0;}
  .tab{flex:1;padding:7px 0;text-align:center;}
}

/* ============ Layout ============ */
.layout{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:16px 20px 120px;}
@media(min-width:1100px){.layout{grid-template-columns:minmax(0,1fr) 280px;}}
.main-col{min-width:0;}

/* ============ KPIs ============ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
@media(max-width:640px){.kpis{grid-template-columns:repeat(2,1fr);}}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow);}
.kpi b{display:block;font-family:var(--mono);font-size:19px;font-weight:600;color:var(--ink);}
.kpi span{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);}
.kpi.warn b{color:var(--yellow);}
.kpi.link{cursor:pointer;}
.kpi.link:hover{border-color:var(--blue);}

/* ============ Controls ============ */
.controls{position:sticky;top:var(--topbar-h,56px);z-index:150;background:var(--bg);padding:8px 0 10px;display:flex;
  flex-wrap:wrap;gap:10px;align-items:center;border-bottom:1px solid var(--border-soft);margin-bottom:14px;}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{border:1px solid var(--border);background:var(--surface);color:var(--slate);border-radius:999px;
  padding:6px 14px;font-size:12.5px;font-weight:600;white-space:nowrap;transition:all .15s;}
.chip .n{font-family:var(--mono);font-size:11px;color:var(--dim);margin-left:4px;}
.chip.active{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.chip.active .n{color:inherit;opacity:.6;}
.control-inputs{display:flex;gap:8px;margin-left:auto;flex:1;min-width:220px;justify-content:flex-end;}
.search{flex:1;max-width:280px;min-width:140px;border:1px solid var(--border);border-radius:10px;padding:8px 12px;background:var(--surface);}
.jobfilter{width:110px;border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--surface);font-family:var(--mono);font-size:12.5px;}
.search:focus,.jobfilter:focus,#bulk-job-input:focus{outline:2px solid var(--blue-glow);border-color:var(--blue);}
@media(max-width:640px){.control-inputs{width:100%;}.search{max-width:none;}}

/* ============ Day sections ============ */
.day{margin-bottom:14px;border-radius:var(--r);border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--shadow);}
.day-head{position:sticky;top:var(--stick-top,106px);z-index:100;display:flex;align-items:center;gap:12px;background:var(--sand);
  border-left:4px solid var(--blue);padding:10px 16px;cursor:pointer;user-select:none;border-radius:var(--r) var(--r) 0 0;}
.day>.stop:last-child,.day>.stop:last-child .stop-row{border-radius:0 0 var(--r) var(--r);}
.day-head:hover{background:var(--sand-hover);}
.day-title{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:1.5px;color:var(--ink);}
.day-selall{border:1px solid var(--line);background:#fff;border-radius:7px;font-size:10.5px;font-weight:600;padding:3px 9px;color:var(--dim);cursor:pointer;margin-left:10px;}
.day-selall:hover{border-color:var(--blue);color:var(--blue);}
.day-meta{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--slate);}
.day-chev{width:8px;height:8px;border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);
  transform:rotate(45deg);transition:transform .2s;margin-bottom:3px;}
.day.closed .day-chev{transform:rotate(-45deg);margin-bottom:-2px;}
.day.closed .stop{display:none;}
.day.closed .day-ts{display:none;}
.day-ts{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:7px 16px;font-size:11px;
  font-family:var(--mono);color:var(--slate);background:var(--sand-2);border-top:1px solid var(--border-soft);}
.ts-lbl{font-family:var(--disp);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--dim);}
.ts-item{white-space:nowrap;}
.ts-job{color:var(--blue-deep);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.ts-job:hover{color:var(--blue);}

/* ============ Stop cards ============ */
.stop{border-top:1px solid var(--border-soft);transition:background .15s;}
.stop-row{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;}
.stop-row:hover{background:var(--sand-2);}
.stop.selected .stop-row{background:var(--blue-tint);}
.sel{width:17px;height:17px;accent-color:var(--blue);flex-shrink:0;cursor:pointer;}
.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.dot.work{background:var(--green);} .dot.supply{background:var(--yellow);}
.dot.unmatched{background:var(--red);} .dot.travel,.dot.out{background:var(--neutral);}
.stop-main{min-width:0;flex:1;}
.stop-addr{font-weight:600;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stop-sub{font-size:12px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.jobchip{font-family:var(--mono);font-size:11px;color:var(--blue-deep);background:var(--blue-tint);
  border-radius:5px;padding:1px 6px;margin-right:5px;}
.badge{font-size:10px;font-weight:600;border-radius:5px;padding:1px 6px;margin-left:5px;}
.badge.logged{background:var(--green-tint);color:var(--green);}
.badge.merged{background:var(--blue-tint);color:var(--blue-deep);}
.badge.archived{background:var(--sand);color:var(--dim);}
.stop-dur{font-family:var(--mono);font-size:12.5px;color:var(--slate);white-space:nowrap;}
.stop-times{font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap;display:none;}
@media(min-width:769px){.stop-times{display:block;}}

/* expanded detail */
.stop-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.2,.7,.3,1);}
.stop.open .stop-detail{grid-template-rows:1fr;}
.stop-detail>div{overflow:hidden;}
.detail-inner{padding:4px 16px 16px 55px;display:grid;gap:16px;}
@media(min-width:900px){.detail-inner{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.detail-inner{padding-left:16px;}}
.d-section{font-family:var(--disp);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--slate);margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--border-soft);}
.d-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:12.5px;color:var(--ink);}
.d-row .k{color:var(--slate);}
.d-row .v{font-family:var(--mono);font-size:12px;text-align:right;}
.d-note{font-size:12px;color:var(--slate);background:var(--sand-2);border-radius:8px;padding:8px 10px;margin-top:6px;line-height:1.5;}
.d-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.jobset{display:flex;gap:6px;margin-top:4px;}
.jobset input{flex:1;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-family:var(--mono);font-size:12.5px;background:var(--surface);}
.worknotes{width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;
  min-height:56px;resize:vertical;background:var(--surface);margin-top:4px;}
.notes-hint{font-size:10.5px;color:var(--dim);margin-top:3px;}
.time-edit{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:4px;}
.time-edit label{display:flex;flex-direction:column;gap:3px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);}
.time-edit input{width:88px;border:1px solid var(--border);border-radius:8px;padding:7px 8px;font-family:var(--mono);font-size:12.5px;background:var(--surface);}
.time-edit input[data-t-hrs]{width:60px;}
.time-edit .btn{padding:8px 14px;}
.copyable{cursor:copy;}
.copyable:hover{background:var(--green-tint);}
.copyable:active .r{color:var(--green);}

/* materials rows */
.mat{display:flex;align-items:center;gap:8px;background:var(--sand-2);border:1px solid var(--border-soft);
  border-radius:8px;padding:7px 10px;margin-top:6px;font-size:12px;}
.mat .sup{font-weight:600;}
.mat .inv{font-family:var(--mono);font-size:10.5px;color:var(--blue-deep);}
.mat .amt{margin-left:auto;font-family:var(--mono);}
.mat button{border:0;background:transparent;font-size:11px;font-weight:600;color:var(--blue-deep);}
.mat.attached{background:var(--green-tint);border-color:transparent;}
.mat.attached button{color:var(--red);}

/* merged combined card */
.stop.merged-lead .stop-row{background:linear-gradient(90deg,var(--blue-tint),transparent 55%);}

/* ============ Sidebar ============ */
.sidebar{display:none;}
@media(min-width:1100px){.sidebar{display:block;}}
.side-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);
  padding:14px;margin-bottom:14px;position:sticky;top:120px;max-height:calc(100vh - 140px);overflow-y:auto;}
.side-title{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate);margin-bottom:8px;}
.sort-btn{border:1px solid var(--border);background:var(--sand-2);color:var(--slate);border-radius:999px;
  padding:3px 10px;font-size:10.5px;font-weight:600;font-family:var(--body);letter-spacing:0;text-transform:none;transition:all .15s;}
.sort-btn:hover{border-color:var(--blue);color:var(--blue-deep);}
.side-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:12.5px;}
.side-row:hover{background:var(--sand-2);}
.side-row.active{background:var(--blue-tint);}
.side-row .id{font-family:var(--mono);font-size:11.5px;color:var(--blue-deep);}
.side-row .nm{color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.side-row .h{font-family:var(--mono);font-size:11px;color:var(--dim);}
.side-row.unassigned .id{color:var(--yellow);}

/* ============ Bulk bar ============ */
.bulkbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:300;display:flex;align-items:center;
  gap:10px;background:var(--ink);border-radius:16px;box-shadow:var(--shadow-lift);padding:10px 14px;
  max-width:calc(100vw - 24px);animation:bulkup .25s cubic-bezier(.2,.7,.3,1);}
@keyframes bulkup{from{opacity:0;transform:translate(-50%,16px);}to{opacity:1;transform:translate(-50%,0);}}
.bulk-count{color:var(--bg);font-size:12.5px;font-weight:600;white-space:nowrap;}
#bulk-archive{background:#F59E0B;color:#231903;border:1px solid #F59E0B;font-weight:700;}
#bulk-archive:hover{background:#FBBF24;}
#bulk-clear{color:#fff;border-color:rgba(255,255,255,.45);}
#bulk-merge{background:var(--blue);color:#fff;border:1px solid var(--blue);font-weight:700;}
#bulk-merge:hover:not(:disabled){filter:brightness(1.08);}
#bulk-merge:disabled{opacity:.35;cursor:not-allowed;}
#bulk-job-input{width:150px;border:0;border-radius:9px;padding:9px 10px;font-family:var(--mono);font-size:13px;background:#fff;}
.bulk-emp{display:flex;border-radius:9px;overflow:hidden;border:1px solid var(--dim);}
.bulk-emp button{border:0;background:transparent;color:var(--bg);opacity:.7;font-size:11.5px;font-weight:600;padding:7px 10px;}
.bulk-emp button.on{background:var(--blue);color:#fff;opacity:1;}
@media(max-width:640px){
  .bulkbar{left:0;right:0;bottom:0;transform:none;width:100%;max-width:none;border-radius:18px 18px 0 0;
    padding:12px 16px calc(14px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:1fr auto auto;gap:10px;animation:sheetup .25s cubic-bezier(.2,.7,.3,1);}
  @keyframes sheetup{from{transform:translateY(100%);}to{transform:none;}}
  .bulk-count{align-self:center;}
  .bulk-emp{justify-self:end;}
  #bulk-clear{justify-self:end;padding:8px 12px;}
  #bulk-job-input{grid-column:1/3;width:100%;}
  #bulk-apply{grid-column:3;}
  #bulk-merge{grid-column:1/3;padding:10px;}
  #bulk-archive{grid-column:3;padding:10px;}
}

/* ============ Invoices view ============ */
.inv-grid{display:grid;gap:10px;}
@media(min-width:1000px){.inv-grid{grid-template-columns:1fr 1fr;}}
.inv-card{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--green);
  border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow);}
.inv-card.unassigned{border-left-color:var(--yellow);}
.inv-card.stock{border-left-color:var(--neutral);}
.inv-card{min-width:0;overflow:hidden;}
.inv-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.inv-sup{font-weight:600;font-size:13.5px;}
.inv-num{font-family:var(--mono);font-size:11px;color:var(--blue-deep);}
.inv-date{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim);}
.inv-po{font-size:12px;color:var(--slate);margin:3px 0 6px;}
.inv-amts{display:flex;gap:6px 14px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--slate);}
.inv-amts b{color:var(--ink);font-weight:600;}
.inv-assign{display:flex;gap:6px;margin-top:9px;}
.inv-assign input{flex:1;min-width:0;border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-family:var(--mono);font-size:12.5px;background:var(--surface);color:var(--ink);}
.inv-assign .cur{font-family:var(--mono);font-size:12px;color:var(--green);align-self:center;white-space:nowrap;}

/* ============ Jobs view ============ */
.jobcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);
  margin-bottom:12px;overflow:hidden;}
.jobcard.unassigned-card{border-left:4px solid var(--yellow);}
.job-head{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;}
.job-head:hover{background:var(--sand-2);}
.job-id{font-family:var(--mono);font-size:13px;color:var(--blue-deep);font-weight:600;}
.job-client{font-weight:600;font-size:13.5px;}
.job-sub{font-size:12px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.job-amt{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--slate);white-space:nowrap;}
.job-body{display:none;padding:4px 16px 16px;border-top:1px solid var(--border-soft);}
.jobcard.open .job-body{display:block;}
.j-day{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 6px;font-size:12.5px;border-radius:7px;cursor:pointer;}
.j-day .jl{min-width:0;}
.j-day .r{white-space:nowrap;flex-shrink:0;text-align:right;}
.jev{color:var(--dim);font-size:11px;margin-left:6px;font-family:var(--mono);}
.jmode{color:var(--dim);font-size:10px;margin-left:5px;}
@media(max-width:640px){
  .jev,.jmode{display:block;margin-left:0;margin-top:1px;}
  .job-amt{font-size:12px;}
  .job-head{align-items:flex-start;}
  .job-head .dot{margin-top:5px;}
  .job-sub{white-space:normal;}
}
.j-day:hover{background:var(--blue-tint);}
.j-day .go{font-size:10px;color:var(--blue);opacity:0;}
.j-day:hover .go{opacity:1;}
@media(hover:none){.j-day .go{opacity:.5;}}
.j-day .r{font-family:var(--mono);color:var(--slate);}
.j-tot{display:flex;justify-content:space-between;padding:7px 6px;font-weight:600;font-size:13px;border-top:1px dashed var(--border);margin-top:4px;}
.marginbar{height:6px;background:var(--sand);border-radius:3px;overflow:hidden;margin:6px 0 2px;}
.marginbar>div{height:100%;transition:width .4s;}
.stage-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.stage{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);
  color:var(--slate);border-radius:999px;padding:6px 12px 6px 8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;}
.stage-check{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border);display:inline-flex;
  align-items:center;justify-content:center;font-size:10px;line-height:1;color:#fff;background:transparent;}
.stage.past{border-color:var(--green);color:var(--green);}
.stage.past .stage-check{background:var(--green);border-color:var(--green);}
.stage.on{background:var(--green-tint);border-color:var(--green);color:var(--green);}
.stage.on .stage-check{background:var(--green);border-color:var(--green);}
.stage:hover{border-color:var(--blue);}
.status-sel{-webkit-appearance:none;appearance:none;border:1px solid var(--border);border-radius:8px;background:var(--surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2354585A' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center;padding:7px 26px 7px 10px;font-size:12.5px;}

/* ============ Modal / toast / misc ============ */
.modal-scrim{position:fixed;inset:0;background:rgba(46,49,52,.5);z-index:400;backdrop-filter:blur(3px);animation:fade .18s;}
@keyframes fade{from{opacity:0;}}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:401;width:560px;max-width:calc(100vw - 28px);
  max-height:84vh;display:flex;flex-direction:column;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lift);animation:rise .22s;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-soft);}
.modal-head b{font-family:var(--disp);font-size:16px;letter-spacing:1px;text-transform:uppercase;}
.modal-close{border:0;background:transparent;font-size:18px;color:var(--dim);}
.modal-body{padding:14px 18px;overflow-y:auto;flex:1;}
.modal-foot{padding:12px 18px;border-top:1px solid var(--border-soft);display:flex;gap:10px;justify-content:flex-end;}
.wave-pre{font-family:var(--mono);font-size:12px;line-height:1.6;white-space:pre-wrap;background:var(--sand-2);
  border-radius:10px;padding:12px;}
.wave-opts{margin-bottom:10px;font-size:12.5px;}
.wave-opts label{display:flex;gap:8px;align-items:center;padding:3px 0;color:var(--slate);}

.toast{position:fixed;bottom:76px;left:50%;transform:translate(-50%,12px);z-index:500;background:var(--ink);color:var(--bg);
  border-radius:999px;padding:10px 20px;font-size:13px;opacity:0;pointer-events:none;transition:all .25s;max-width:calc(100vw - 40px);text-align:center;}
.toast.show{opacity:1;transform:translate(-50%,0);}
.version{position:fixed;bottom:6px;left:10px;font-family:var(--mono);font-size:10px;color:var(--dim);opacity:.6;z-index:5;}

/* To-Do tab */
.todo-add{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.todo-add input{flex:1;min-width:180px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface);color:var(--ink);}
.todo-add select{border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--surface);color:var(--ink);font-size:13px;}
.todo-add input:focus{outline:2px solid var(--blue-glow);border-color:var(--blue);}
.todo-row{display:flex;align-items:flex-start;gap:10px;padding:9px 6px;border-bottom:1px solid var(--border-soft);font-size:13.5px;}
.todo-row:last-child{border-bottom:0;}
.todo-row .sel{margin-top:2px;}
.todo-text{flex:1;line-height:1.45;}
.todo-row.done .todo-text{text-decoration:line-through;color:var(--dim);}
.todo-del{border:0;background:transparent;color:var(--dim);font-size:13px;cursor:pointer;padding:0 4px;}
.todo-del:hover{color:var(--red);}

/* Big Board */
.bb-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);
  border-left:5px solid var(--neutral);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px;margin-bottom:10px;
  transition:transform .12s;}
.bb-card:active{transform:scale(.99);}
.bb-card.p4{border-left-color:var(--red);background:linear-gradient(90deg,var(--red-tint),var(--surface) 45%);}
.bb-card.p3{border-left-color:var(--yellow);}
.bb-card.p2{border-left-color:var(--blue);}
.bb-card.p1{border-left-color:var(--neutral);opacity:.8;}
.bb-rank{font-family:var(--disp);font-weight:700;font-size:26px;color:var(--dim);min-width:34px;text-align:center;line-height:1;}
.bb-card.p4 .bb-rank{color:var(--red);}
.bb-main{flex:1;min-width:0;}
.bb-text{font-family:var(--disp);font-weight:600;font-size:18px;line-height:1.25;color:var(--ink);}
.bb-card.p4 .bb-text{font-size:20px;}
.bb-sub{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);margin-top:3px;}
.bb-prio{border:0;border-radius:7px;padding:6px 10px;font-size:10.5px;font-weight:700;letter-spacing:.8px;cursor:pointer;white-space:nowrap;
  background:var(--sand-2);color:var(--slate);}
.bb-card.p4 .bb-prio{background:var(--red);color:#fff;}
.bb-card.p3 .bb-prio{background:var(--yellow-tint);color:var(--yellow);}
.bb-card.p2 .bb-prio{background:var(--blue-tint);color:var(--blue-deep);}
.bb-check{width:20px;height:20px;flex-shrink:0;}
@media(max-width:640px){
  .bb-card{gap:10px;padding:12px;}
  .bb-text{font-size:16px;}
  .bb-card.p4 .bb-text{font-size:17.5px;}
  .bb-rank{font-size:20px;min-width:24px;}
}

.empty{padding:36px 16px;text-align:center;color:var(--dim);font-size:13px;}
.empty b{display:block;font-family:var(--disp);font-size:17px;letter-spacing:1px;color:var(--slate);margin-bottom:4px;}
.skel{height:64px;border-radius:var(--r);margin-bottom:10px;background:linear-gradient(90deg,var(--sand-2) 25%,var(--surface) 50%,var(--sand-2) 75%);
  background-size:200% 100%;animation:shimmer 1.2s infinite;}
@keyframes shimmer{to{background-position:-200% 0;}}
#scroll-sentinel{height:1px;}
.section-note{font-size:11.5px;color:var(--dim);margin:2px 0 10px;}