/* =============================================================
   SudBuds Sales — theme (palette sampled from the SudBuds logo)
============================================================= */
:root{
  --navy-900:#06121f; --navy-850:#081726; --navy-800:#0a1b2e;
  --navy-700:#0e2540; --navy-600:#12325a;
  --blue-300:#7cc6ff; --blue-400:#4aa8f0; --blue-500:#2b8fe0;
  --blue-600:#1f6fc4; --cyan:#6fe3ff;
  --white:#fff; --text:#e9f2fe; --muted:#9db4cd; --muted-2:#6e87a3;
  --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --purple:#a855f7; --slate:#64748b;
  --grad:linear-gradient(120deg,#7cc6ff 0%,#2b8fe0 50%,#1f6fc4 100%);
  --grad-text:linear-gradient(120deg,#aee0ff 0%,#4aa8f0 55%,#2b8fe0 100%);
  --glass:rgba(255,255,255,.05); --glass-strong:rgba(255,255,255,.08);
  --glass-border:rgba(124,198,255,.16);
  --shadow-glow:0 14px 50px rgba(43,143,224,.45);
  --shadow-card:0 20px 50px rgba(2,10,22,.5);
  --radius:18px; --radius-sm:12px;
  --font-head:"Poppins",system-ui,sans-serif; --font-body:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  /* safe areas: every fixed element keys off these, so the notch/home bar
     never cover content when running as a home-screen app */
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
  --bottomnav-h:calc(64px + env(safe-area-inset-bottom,0px));
  --topbar-h:calc(58px + env(safe-area-inset-top,0px));
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-body); color:var(--text); line-height:1.55;
  background:radial-gradient(120% 90% at 70% -10%,#103056 0%,var(--navy-900) 55%) fixed,var(--navy-900);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.15}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)} .small{font-size:.82rem}
.hide{display:none!important}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.7em 1.2em;font-family:var(--font-head);font-weight:600;font-size:.95rem;
  border-radius:999px;border:0;cursor:pointer;color:#fff;background:var(--glass-strong);
  border:1.5px solid var(--glass-border);transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--grad);border:0;box-shadow:var(--shadow-glow);background-size:160% 160%}
.btn--primary:hover{background-position:100% 0;box-shadow:0 20px 55px rgba(43,143,224,.6)}
.btn--ghost{background:var(--glass)}
.btn--danger{background:linear-gradient(120deg,#ff6b6b,#ef4444);border:0}
.btn--sm{padding:.45em .85em;font-size:.82rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- inputs ---------- */
label.field{display:block;margin-bottom:.85rem}
label.field>span{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.3rem;font-weight:500}
input,select,textarea{
  width:100%;padding:.7em .85em;border-radius:var(--radius-sm);color:var(--text);
  background:rgba(6,16,28,.6);border:1.5px solid var(--glass-border);font-size:1rem;font-family:inherit;
  transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue-400);
  box-shadow:0 0 0 3px rgba(74,168,240,.18)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--blue-300) 50%),linear-gradient(135deg,var(--blue-300) 50%,transparent 50%);
  background-position:calc(100% - 18px) 1.15em,calc(100% - 13px) 1.15em;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.row{display:flex;gap:.7rem}.row>*{flex:1}

/* ---------- glass card ---------- */
.card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);
  padding:1.1rem;backdrop-filter:blur(10px);box-shadow:var(--shadow-card)}
.card--pad{padding:1.4rem}

/* ---------- app frame ---------- */
#app{min-height:100%}
.appbar{position:sticky;top:0;z-index:50;height:var(--topbar-h);display:flex;align-items:center;gap:.8rem;
  padding:var(--safe-top) 1rem 0;background:rgba(8,20,34,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-border)}
.appbar__logo{height:34px}
.appbar__title{font-family:var(--font-head);font-weight:600;font-size:1rem}
.appbar__spacer{margin-left:auto}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;
  font-size:.8rem;color:#fff;font-family:var(--font-head);flex:none;border:2px solid rgba(255,255,255,.25)}

.view{padding:1rem 1rem calc(var(--bottomnav-h) + 1.2rem);max-width:1280px;margin:0 auto;animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.view__head{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;flex-wrap:wrap}
.view__head h1{font-size:1.45rem}

/* ---------- bottom nav (mobile) ---------- */
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:60;height:var(--bottomnav-h);
  display:flex;background:rgba(6,16,28,.94);backdrop-filter:blur(16px);border-top:1px solid var(--glass-border);
  padding-bottom:var(--safe-bot)}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--muted-2);font-size:.66rem;font-weight:600;transition:color .2s}
.bottomnav a .ic{font-size:1.25rem;line-height:1}
.bottomnav a.active{color:var(--blue-300)}
.bottomnav a.active .ic{filter:drop-shadow(0 0 8px rgba(124,198,255,.7))}

/* ---------- KPI tiles ---------- */
.kpis{display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)}
.kpi{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:1rem;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;inset:0;background:var(--grad);opacity:.06}
.kpi__label{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.kpi__value{font-family:var(--font-head);font-weight:700;font-size:1.7rem;margin-top:.2rem}
.kpi__sub{font-size:.76rem;color:var(--muted-2);margin-top:.15rem}
.kpi--accent .kpi__value{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- timeframe chips ---------- */
.chips{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1rem}
.chip{padding:.4em .85em;border-radius:999px;font-size:.82rem;font-weight:600;cursor:pointer;
  background:var(--glass);border:1.5px solid var(--glass-border);color:var(--muted)}
.chip.active{background:var(--grad);border:0;color:#fff;box-shadow:var(--shadow-glow)}

/* ---------- goal / progress ---------- */
.goal{margin-bottom:.9rem}
.goal__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem;font-size:.9rem}
.goal__name{font-weight:600;font-family:var(--font-head)}
.bar{height:12px;border-radius:999px;background:rgba(6,16,28,.7);overflow:hidden;border:1px solid var(--glass-border)}
.bar__fill{height:100%;border-radius:999px;background:var(--grad);box-shadow:0 0 14px rgba(43,143,224,.6);
  transition:width .6s var(--ease)}
.bar__fill.done{background:linear-gradient(120deg,#34d399,#22c55e)}

/* ---------- leaderboard ---------- */
.lb{display:flex;flex-direction:column;gap:.6rem}
.lb__row{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;border-radius:var(--radius-sm);
  background:var(--glass);border:1px solid var(--glass-border)}
.lb__rank{font-family:var(--font-head);font-weight:800;width:1.6rem;text-align:center;font-size:1.05rem;color:var(--muted)}
.lb__row--1{border-color:rgba(255,192,67,.5);box-shadow:0 0 24px rgba(255,192,67,.18)}
.lb__row--1 .lb__rank{color:#ffc043}
.lb__row--2 .lb__rank{color:#cbd5e1}.lb__row--3 .lb__rank{color:#d8a06a}
.lb__name{font-weight:600}.lb__meta{font-size:.78rem;color:var(--muted)}
.lb__val{margin-left:auto;text-align:right}
.lb__val b{font-family:var(--font-head);font-size:1.05rem}
.lb__bar{height:6px;border-radius:999px;background:rgba(6,16,28,.7);margin-top:.35rem;overflow:hidden}
.lb__bar>i{display:block;height:100%;background:var(--grad)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--glass-border)}
table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
th,td{padding:.65rem .8rem;text-align:left;border-bottom:1px solid rgba(124,198,255,.1);white-space:nowrap}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;background:rgba(6,16,28,.4)}
tbody tr:hover{background:rgba(124,198,255,.05)}
.tag-pill{display:inline-flex;align-items:center;gap:.35em;padding:.2em .6em;border-radius:999px;font-size:.74rem;font-weight:600;color:#fff}

/* ---------- map ---------- */
#map{position:fixed;inset:var(--topbar-h) 0 var(--bottomnav-h) 0}
.maplibregl-popup-content{background:var(--navy-800)!important;color:var(--text)!important;
  border:1px solid var(--glass-border);border-radius:14px;box-shadow:var(--shadow-card);padding:0;overflow:hidden;min-width:230px}
.maplibregl-popup-close-button{color:var(--muted);font-size:1.3rem;padding:2px 8px}
.maplibregl-popup-tip{border-top-color:var(--navy-800)!important;border-bottom-color:var(--navy-800)!important}
.maplibregl-ctrl-group{background:var(--navy-800)!important;border:1px solid var(--glass-border)}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--glass-border)}

.map-toggle{position:fixed;top:calc(var(--topbar-h) + 12px);left:50%;transform:translateX(-50%);z-index:20;
  display:flex;background:rgba(6,16,28,.9);backdrop-filter:blur(12px);border:1px solid var(--glass-border);
  border-radius:999px;padding:4px;box-shadow:var(--shadow-card)}
.map-toggle button{padding:.45em 1.1em;border-radius:999px;border:0;background:transparent;color:var(--muted);
  font-weight:600;font-size:.85rem;cursor:pointer;font-family:var(--font-head)}
.map-toggle button.active{background:var(--grad);color:#fff;box-shadow:var(--shadow-glow)}

.map-legend{position:fixed;left:12px;bottom:calc(var(--bottomnav-h) + 12px);z-index:20;
  background:rgba(6,16,28,.86);backdrop-filter:blur(12px);border:1px solid var(--glass-border);
  border-radius:14px;padding:.6rem .75rem;font-size:.76rem;max-width:48vw}
.map-legend .li{display:flex;align-items:center;gap:.45em;margin:.2em 0}
.map-legend .dot{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 6px currentColor}

.fab{position:fixed;right:16px;bottom:calc(var(--bottomnav-h) + 16px);z-index:25;width:60px;height:60px;border-radius:50%;
  border:0;background:var(--grad);color:#fff;font-size:1.7rem;box-shadow:var(--shadow-glow);cursor:pointer;
  display:grid;place-items:center;animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 10px 30px rgba(43,143,224,.5)}50%{box-shadow:0 10px 44px rgba(43,143,224,.85)}}
.fab.armed{background:linear-gradient(120deg,#34d399,#22c55e);animation:none}
.drop-hint{position:fixed;top:calc(var(--topbar-h) + 60px);left:50%;transform:translateX(-50%);z-index:24;
  background:rgba(6,16,28,.92);border:1px solid var(--blue-400);border-radius:999px;padding:.55em 1.1em;
  font-size:.85rem;font-weight:600;box-shadow:var(--shadow-glow);animation:fade .3s}

/* map marker pin */
.pin{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 10px rgba(0,0,0,.5);cursor:pointer;
  display:grid;place-items:center}
.pin>span{transform:rotate(45deg);font-size:.7rem}
.pin--mine{outline:3px solid rgba(124,198,255,.55);outline-offset:1px}

/* popup body */
.pop{padding:.85rem}
.pop h4{font-size:.95rem;margin-bottom:.15rem}
.pop .pop__meta{font-size:.76rem;color:var(--muted);margin-bottom:.5rem}
.pop .pop__row{font-size:.82rem;display:flex;justify-content:space-between;gap:1rem;padding:.12rem 0}
.pop .pop__actions{display:flex;gap:.4rem;margin-top:.6rem}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;z-index:200;background:rgba(2,8,18,.72);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.modal{background:var(--navy-800);border:1px solid var(--glass-border);border-radius:22px 22px 0 0;
  width:100%;max-width:560px;max-height:92vh;overflow-y:auto;padding:1.3rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px rgba(0,0,0,.5);animation:slideup .3s var(--ease)}
@keyframes slideup{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
.modal__head{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.modal__head h3{font-size:1.2rem}
.modal__x{margin-left:auto;background:var(--glass);border:1px solid var(--glass-border);color:var(--text);
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1.1rem}
.tagpick{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.tagpick button{display:flex;align-items:center;gap:.6rem;padding:.85rem;border-radius:var(--radius-sm);
  background:var(--glass);border:1.5px solid var(--glass-border);color:var(--text);cursor:pointer;text-align:left;font-weight:600}
.tagpick button:hover{border-color:var(--blue-400);transform:translateY(-2px)}
.tagpick .tdot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:1rem;flex:none}

/* ---------- toast ---------- */
#toasts{position:fixed;top:calc(var(--topbar-h) + 10px);right:12px;z-index:300;display:flex;flex-direction:column;gap:.5rem}
.toast{background:var(--navy-700);border:1px solid var(--glass-border);border-left:4px solid var(--blue-400);
  padding:.7rem 1rem;border-radius:12px;box-shadow:var(--shadow-card);font-size:.88rem;animation:fade .25s;max-width:320px}
.toast--ok{border-left-color:var(--green)} .toast--err{border-left-color:var(--red)}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.login__card{width:100%;max-width:400px;text-align:center}
.login__logo{height:64px;margin:0 auto 1.2rem}
.login__demo{margin-top:1rem;font-size:.78rem;color:var(--muted-2);line-height:1.7;text-align:left;
  background:rgba(6,16,28,.5);border:1px solid var(--glass-border);border-radius:12px;padding:.7rem .85rem}
.login__demo b{color:var(--blue-300)}
.login__demo code{cursor:pointer;color:var(--text)}
.login__alt{margin-top:1rem;text-align:center}
.linkbtn{background:none;border:0;color:var(--blue-300);font-family:var(--font-head);font-weight:600;
  font-size:.9rem;cursor:pointer;padding:.4rem}
.linkbtn:hover{color:var(--cyan);text-decoration:underline}
.linkbtn--sm{font-size:.78rem;padding:.1rem .4rem}
.linkbtn--danger{color:#f87171}
.linkbtn--danger:hover{color:#ef4444}
.goal__tag{display:inline-block;margin-left:.5em;font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--blue-300);background:rgba(124,198,255,.12);border:1px solid var(--glass-border);
  padding:.1em .5em;border-radius:999px;vertical-align:middle}

/* ---------- section heading ---------- */
.sec-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:700;margin:1.4rem 0 .7rem}
.grid2{display:grid;gap:1rem}

/* ---------- toggle switch ---------- */
.switch{position:relative;display:inline-block;width:44px;height:25px;flex:none}
.switch input{display:none}
.switch .sl{position:absolute;inset:0;background:rgba(6,16,28,.8);border:1px solid var(--glass-border);
  border-radius:999px;transition:.25s;cursor:pointer}
.switch .sl::before{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;border-radius:50%;
  background:var(--muted);transition:.25s}
.switch input:checked+.sl{background:var(--grad);border:0}
.switch input:checked+.sl::before{transform:translateX(19px);background:#fff}
.permrow{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px solid rgba(124,198,255,.08)}
.permrow .pl{flex:1}.permrow .pl b{display:block;font-size:.9rem}.permrow .pl span{font-size:.74rem;color:var(--muted-2)}

.empty{text-align:center;color:var(--muted-2);padding:2.5rem 1rem}
.empty .ic{font-size:2.4rem;opacity:.5}

/* =============================================================
   DESKTOP — admin dashboard layout & responsive tuning
============================================================= */
@media(min-width:900px){
  :root{--bottomnav-h:0px}
  .bottomnav{display:none}
  body.has-side{}
  .shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
  .sidenav{position:sticky;top:0;height:100vh;background:rgba(8,20,34,.7);border-right:1px solid var(--glass-border);
    padding:1.1rem .9rem;display:flex;flex-direction:column;gap:.3rem;backdrop-filter:blur(12px)}
  .sidenav__logo{height:auto;width:auto;max-height:46px;max-width:185px;object-fit:contain;margin:.4rem .4rem 1.4rem}
  .sidenav a{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border-radius:12px;color:var(--muted);
    font-weight:600;font-size:.93rem;transition:.18s}
  .sidenav a .ic{font-size:1.15rem;width:1.4rem;text-align:center}
  .sidenav a:hover{background:var(--glass);color:var(--text)}
  .sidenav a.active{background:var(--grad);color:#fff;box-shadow:var(--shadow-glow)}
  .sidenav__foot{margin-top:auto}
  .view{padding:1.6rem 2rem}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .kpis--6{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:1fr 1fr}
  .grid2--wide{grid-template-columns:1.4fr 1fr}
  .sidenav{z-index:70}
  #map{top:0;right:0;bottom:0;left:248px}
  .map-toggle{left:calc(248px + 50%);transform:translateX(-50%)}
  .fab{bottom:24px}
  .appbar{display:none}
  .view__head h1{font-size:1.8rem}
}
@media(max-width:899px){
  .shell{display:block}
  .sidenav{display:none}
}
@media(min-width:1280px){ .view{max-width:1400px} }

/* =============================================================
   v2 — sharper / futuristic design layer + new components
   (later rules intentionally refine the base theme above)
============================================================= */

/* futuristic backdrop: faint grid + soft glows over the navy */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(124,198,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,198,255,.045) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 80%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 80%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 42% at 84% 6%, rgba(43,143,224,.16), transparent 60%),
    radial-gradient(42% 40% at 6% 92%, rgba(124,198,255,.10), transparent 60%);
}

/* icon helpers */
.ic{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.ic-svg{display:block}
svg.ic-svg{vertical-align:middle}
.btn .ic-svg, .btn .ic{flex:none}
.h-emblem{display:inline-flex;align-items:center;justify-content:center;color:var(--blue-300);
  margin-right:.55rem;vertical-align:-3px}
.nav-ic{flex:none}

/* sharper typography */
h1,h2,h3,h4{letter-spacing:-.02em}
.view__head h1{display:flex;align-items:center}
.kpi__value{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* refined glass cards: hairline top-gradient + crisp border */
.card{position:relative;border-radius:16px;border-color:rgba(124,198,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow:0 18px 44px rgba(2,10,22,.45), inset 0 1px 0 rgba(255,255,255,.04)}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg, transparent, rgba(124,198,255,.5), transparent);opacity:.7}

/* KPI tiles: accent bar, sharper */
.kpi{position:relative;border-radius:15px;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border-color:rgba(124,198,255,.13)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);opacity:.85}
.kpi--accent::before{box-shadow:0 0 16px rgba(43,143,224,.7)}
.kpi__value{font-size:1.6rem}
.kpi__label{letter-spacing:.06em}

/* buttons: crisper */
.btn{border-radius:12px;letter-spacing:-.01em;font-weight:600}
.btn--primary{border:1px solid rgba(124,198,255,.35)}
.btn--sm{border-radius:9px}
.btn--block{border-radius:12px}

/* inputs: sharper focus */
input,select,textarea{border-radius:11px;background:rgba(4,12,22,.66);border-color:rgba(124,198,255,.16)}

/* logos never distort */
.appbar__logo,.login__logo,.sidenav__logo{object-fit:contain;width:auto}
.login__logo{height:auto;max-height:70px;max-width:240px;margin-inline:auto}

/* sidenav: refined active state */
.sidenav a{border-radius:11px;position:relative}
.sidenav a.active{box-shadow:0 8px 22px rgba(43,143,224,.4)}
.sidenav a .ic-svg{opacity:.9}
.sidenav__logo{display:block}

/* bottom nav: active emblem glow + tab indicator */
.bottomnav a{position:relative}
.bottomnav a.active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--grad);box-shadow:0 0 12px rgba(124,198,255,.8)}
.bottomnav a .ic-svg{transition:transform .2s var(--ease)}
.bottomnav a.active .ic-svg{transform:translateY(-1px)}

/* map overlays w/ icons */
.map-toggle button{display:inline-flex;align-items:center;gap:.45em}
.map-toggle .ic-svg{flex:none}
.map-legend .li{display:flex;align-items:center;gap:.5em;margin:.22em 0}
.legend-dot{width:19px;height:19px;border-radius:6px;display:grid;place-items:center;color:#fff;flex:none;
  box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pin{color:#fff}
.pin>span{display:grid;place-items:center;transform:rotate(45deg);color:#fff}
.pin>span .ic-svg{display:block}
.pin--cancelled{opacity:.55;filter:grayscale(.5)}
.fab .ic-svg{display:block}

/* tag picker emblems */
.tagpick .tdot{color:#fff;display:grid;place-items:center}

/* modal emblem + popup emblem + tag pill icon */
.modal__emblem{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:var(--glass);border:1px solid var(--glass-border)}
.pop__emblem{display:inline-flex;align-items:center;margin-right:.4em;vertical-align:-3px}
.pop h4{display:flex;align-items:center;gap:.1rem}
.tag-pill__ic{display:inline-flex;align-items:center;margin-right:.3em}
.tag-pill{display:inline-flex;align-items:center}

/* empty-state icon */
.empty__ic{display:inline-flex;color:var(--muted-2);opacity:.5;margin-bottom:.6rem}

/* =============== Leads & Payments =============== */
.leadlist{display:flex;flex-direction:column;gap:.7rem}
.lead-card{position:relative;display:flex;flex-direction:column;gap:.85rem;
  padding:1rem 1.1rem;border-radius:15px;border:1px solid rgba(124,198,255,.13);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow:0 12px 30px rgba(2,10,22,.35)}
.lead-card--overdue{border-color:rgba(245,158,11,.45)}
.lead-card--cancelled{opacity:.55}
.lead__main{flex:1;min-width:0}
.lead__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.lead__name{font-family:var(--font-head);font-weight:700;font-size:1.02rem}
.lead__price{font-family:var(--font-head);font-weight:700;color:var(--blue-300);font-variant-numeric:tabular-nums}
.lead__meta{font-size:.82rem;color:var(--muted);margin-top:.25rem;display:flex;align-items:center;flex-wrap:wrap;gap:.15rem}
.lead__sched{display:inline-flex;align-items:center;gap:.3em;color:var(--blue-300)}
.lead__meta2{font-size:.8rem;color:var(--muted-2);margin-top:.2rem}
.lead__badges{display:flex;gap:.4rem;margin-top:.65rem;flex-wrap:wrap}
.lead-badge{display:inline-flex;align-items:center;gap:.32em;font-size:.71rem;font-weight:600;
  padding:.26em .62em;border-radius:999px;border:1px solid var(--glass-border);background:rgba(255,255,255,.04)}
.lead-badge .ic-svg{flex:none}
.lead-badge--booked{color:var(--blue-300);border-color:rgba(124,198,255,.4)}
.lead-badge--completed,.lead-badge--paid{color:#34d399;border-color:rgba(52,211,153,.4)}
.lead-badge--cancelled{color:#f87171;border-color:rgba(248,113,113,.4)}
.lead-badge--unpaid,.lead-badge--overdue{color:#fbbf24;border-color:rgba(251,191,36,.4)}
.lead__actions{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.lead__paid{display:inline-flex;align-items:center;gap:.4em;font-size:.82rem;font-weight:600;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--glass-border);padding:.34em .7em;border-radius:999px}
.lead__paid input{width:auto;accent-color:var(--blue-500)}
.lead__date{max-width:158px}
@media(min-width:760px){
  .lead-card{flex-direction:row;align-items:center;justify-content:space-between;gap:1.2rem}
  .lead__actions{justify-content:flex-end;max-width:50%}
  .lead__badges{margin-top:.5rem}
}

/* tighten table look */
table{font-variant-numeric:tabular-nums}
.tablewrap{border-color:rgba(124,198,255,.13)}

/* scrollbars (webkit) for a cleaner feel */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(124,198,255,.18);border-radius:10px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

@media(min-width:900px){
  .lead__actions{max-width:none}
}

/* =============================================================
   v4 — loading skeletons, map loader, routes/availability,
        goal strip, mobile-fit polish
============================================================= */

/* ---- skeleton shimmer ---- */
.skel{position:relative;overflow:hidden;border-radius:8px;
  background:rgba(124,198,255,.08);min-height:12px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(124,198,255,.16),transparent);
  animation:shimmer 1.25s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---- map loading screen ---- */
.map-loading{position:fixed;inset:var(--topbar-h) 0 var(--bottomnav-h) 0;z-index:18;
  display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 30%,#0e2540,var(--navy-900));
  transition:opacity .4s ease}
.map-loading.hide{opacity:0;pointer-events:none}
.map-loading__inner{display:flex;flex-direction:column;align-items:center;gap:1rem}
.map-loading__txt{color:var(--muted);font-family:var(--font-head);font-weight:600;font-size:.9rem;letter-spacing:.02em}
.spinner{width:46px;height:46px;border-radius:50%;border:3px solid rgba(124,198,255,.2);
  border-top-color:var(--blue-400);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:900px){ .map-loading{inset:0 0 0 248px} }

/* ---- goal period/scope tags ---- */
.goal__tag--scope{color:var(--muted);background:rgba(255,255,255,.04)}

/* ---- dashboard team-goal strip ---- */
.goalstrip__grid{display:grid;gap:1rem 1.4rem;grid-template-columns:1fr}
@media(min-width:680px){ .goalstrip__grid{grid-template-columns:1fr 1fr} }
@media(min-width:1100px){ .goalstrip__grid{grid-template-columns:repeat(3,1fr)} }
.goalstrip .goal{margin-bottom:0}

/* ---- routes / my week ---- */
.routebox{padding:.8rem .9rem;border-radius:13px;border:1px solid var(--glass-border);
  background:rgba(6,16,28,.4);margin-bottom:.7rem}
.routebox:last-child{margin-bottom:0}
.routebox__name{display:flex;align-items:center;gap:.45rem;font-family:var(--font-head);font-size:1rem}
.routebox__name .ic-svg{color:var(--blue-300)}
.routebox__mates{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.4rem}
.routebox__btns{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.routebox__tag{font-size:.72rem;font-weight:700;font-family:var(--font-head);border-radius:999px;padding:.28em .7em}
.routebox__tag.ok{color:#7ff0c0;background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.4)}
.routebox__tag.warn{color:#ffce80;background:rgba(255,176,32,.14);border:1px solid rgba(255,176,32,.4)}
.matechip{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;padding:.18rem .55rem .18rem .2rem}

/* ---- work-day chips ---- */
.daychips{display:flex;gap:.45rem;flex-wrap:wrap}
.daychip{min-width:52px;padding:.55rem .4rem;border-radius:11px;font-family:var(--font-head);font-weight:600;
  font-size:.84rem;cursor:pointer;background:var(--glass);border:1.5px solid var(--glass-border);color:var(--muted)}
.daychip.active{background:var(--grad);border:0;color:#fff;box-shadow:var(--shadow-glow)}

/* ---- logo polish (top bar never squished) ---- */
.appbar{gap:.6rem}
.appbar__logo{height:30px;width:auto;max-width:150px;object-fit:contain}
.login__logo{image-rendering:auto}

/* ---- mobile-fit polish ---- */
@media(max-width:560px){
  .view{padding:.85rem .8rem calc(var(--bottomnav-h) + 1.1rem)}
  .view__head h1{font-size:1.3rem}
  .kpis{gap:.6rem}
  .kpi{padding:.85rem}
  .kpi__value{font-size:1.4rem}
  .card{padding:.95rem}
  .card--pad{padding:1.1rem}
  .modal{padding:1.1rem 1rem calc(1.1rem + env(safe-area-inset-bottom))}
  .tagpick{grid-template-columns:1fr 1fr}
  .map-legend{max-width:42vw;font-size:.72rem}
}
/* never allow a stray wide element to break the layout */
.view, .card, .kpis, .leadlist{max-width:100%}
img.appbar__logo,img.sidenav__logo,img.login__logo{height:auto}
.appbar__logo{height:30px}

/* =============================================================
   v5 — washer booking, admin schedule, goal incentives/countdown
============================================================= */

/* ---- washer / time picker on the Sold form ---- */
.washerpick__head{font-size:.8rem;color:var(--muted);font-weight:600;margin:.2rem 0 .4rem}
.washerpick__sel{font-size:.82rem;color:var(--blue-300);font-weight:600;margin-bottom:.5rem;min-height:1.1em}
.washerpick{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.washeropt{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.6rem .75rem;border-radius:12px;
  background:var(--glass);border:1.5px solid var(--glass-border);color:var(--text);cursor:pointer;text-align:left}
.washeropt b{font-family:var(--font-head);font-size:.92rem}
.washeropt span{font-size:.82rem;color:var(--blue-300);font-weight:600}
.washeropt:hover:not(.full){border-color:var(--blue-400);transform:translateY(-1px)}
.washeropt.sel{background:var(--grad);border:0;box-shadow:var(--shadow-glow)}
.washeropt.sel span{color:#eaf5ff}
.washeropt.full{opacity:.4;cursor:not-allowed}
.washeropt.full span{color:var(--muted-2)}

/* ---- goal incentive + time-left chips ---- */
.goal__left{display:inline-flex;align-items:center;gap:.3em;color:var(--muted-2);white-space:nowrap}
.goal__left .ic-svg{flex:none}
.goal__reward{display:inline-flex;align-items:center;gap:.35em;margin-top:.4rem;font-size:.8rem;font-weight:600;
  color:#ffd479;background:rgba(255,192,67,.1);border:1px solid rgba(255,192,67,.3);border-radius:999px;padding:.22em .65em}
.goal__reward .ic-svg{flex:none;color:#ffc043}
.goal__reward--inline{margin-top:0;font-size:.74rem;padding:.16em .55em}

/* ---- admin schedule ---- */
.sched__day{margin-bottom:.8rem}
.sched__day--today{border-color:rgba(124,198,255,.4);box-shadow:0 0 22px rgba(43,143,224,.16)}
.sched__head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  font-family:var(--font-head);margin-bottom:.5rem}
.sched__jobs{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.55rem}
.sched__job{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:.84rem;
  padding:.3rem .15rem;border-bottom:1px solid rgba(124,198,255,.07)}
.sched__time{font-family:var(--font-head);font-weight:700;color:var(--blue-300);min-width:64px}
.sched__cust{font-weight:600}
.washerbadge{display:inline-flex;align-items:center;font-size:.72rem;font-weight:600;color:var(--cyan);
  background:rgba(111,227,255,.1);border:1px solid rgba(111,227,255,.28);border-radius:999px;padding:.12em .55em}
.sched__reps{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.needrow{display:flex;align-items:flex-start;gap:.5rem;font-size:.84rem;padding:.4rem 0;border-bottom:1px solid rgba(124,198,255,.07)}
.needrow:last-child{border-bottom:0}
.needrow .ic-svg{flex:none;margin-top:.15rem;color:var(--amber)}
.needrow b{color:var(--text)}

@media(max-width:560px){ .washerpick{grid-template-columns:1fr 1fr} }

/* ============================================================
   v6 — boot splash, offline, durations, follow-ups, assign map,
        recommendations, area highlight
============================================================ */

/* ---- instant boot splash (before JS paints anything) ---- */
.boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  background:radial-gradient(120% 120% at 50% 20%,#0a1b2e,#06121f 70%);z-index:50}
.boot__logo{width:148px;max-width:60vw;opacity:.96;filter:drop-shadow(0 6px 20px rgba(43,143,224,.35))}
.boot__txt{color:var(--muted);font-family:var(--font-head);font-weight:600;font-size:.86rem;letter-spacing:.04em}

/* ---- offline / sync banner ---- */
.offline-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bottomnav-h) + 12px);z-index:40;
  display:flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:999px;font-size:.8rem;font-weight:600;
  font-family:var(--font-head);box-shadow:0 8px 26px rgba(0,0,0,.4);max-width:92vw}
.offline-banner--off{background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.45);color:#ffb4b4}
.offline-banner--sync{background:rgba(43,143,224,.16);border:1px solid rgba(124,198,255,.45);color:var(--blue-300)}
.offline-dot{width:9px;height:9px;border-radius:50%;background:currentColor;animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(min-width:900px){ .offline-banner{bottom:18px} }

/* ---- duration picker (how long will the house take) ---- */
.duropt{padding:.55rem .4rem;border-radius:11px;font-family:var(--font-head);font-weight:700;font-size:.9rem;
  background:rgba(124,198,255,.06);border:1px solid rgba(124,198,255,.18);color:var(--text);cursor:pointer;transition:.15s}
.duropt:hover{border-color:var(--blue-400);transform:translateY(-1px)}
.duropt.sel{background:var(--grad);border:0;color:#fff;box-shadow:var(--shadow-glow)}
.washeropt span:last-child{white-space:nowrap}

/* ---- follow-ups ---- */
.fu{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem 0}
.fu__hr{height:1px;background:rgba(124,198,255,.08)}
.fu__main{flex:1;min-width:0}
.fu__top{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.fu__top b{font-family:var(--font-head)}
.fu__when{font-size:.78rem;font-weight:600;color:var(--blue-300);white-space:nowrap}
.fu--overdue .fu__when{color:#ffb4b4}
.fu__what{font-size:.85rem;color:var(--text);margin-top:.2rem}
.fu__actions{display:flex;flex-direction:column;gap:.35rem;flex:none}
.sec-title--danger{color:#ffb4b4}

/* ---- assign-rep mini map + recommendation panel (map on top, inputs below) ---- */
.assignwrap{display:flex;flex-direction:column;gap:.7rem}
.assignmap{position:relative;height:44vh;min-height:280px;flex:none;border-radius:14px;overflow:hidden;
  border:1px solid rgba(124,198,255,.18)}
.assignmap .map-loading{position:absolute;inset:0}
.assign-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;
  background:rgba(6,18,31,.86);border:1px solid rgba(124,198,255,.3);color:var(--blue-300);
  padding:.45rem .9rem;border-radius:999px;font-size:.8rem;font-weight:600;font-family:var(--font-head);white-space:nowrap;
  max-width:90%;text-align:center}
.assign-panel{background:rgba(8,20,34,.96);border:1px solid rgba(124,198,255,.22);
  border-radius:14px;padding:.8rem}
.assign-panel__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.assign-panel__head b{font-family:var(--font-head)}
.assign-panel__x{background:rgba(124,198,255,.1);border:0;color:var(--text);width:28px;height:28px;border-radius:8px;cursor:pointer;display:grid;place-items:center}
.assign-panel input{width:100%;margin-bottom:.5rem}
.assign-reps{display:flex;flex-direction:column;gap:.4rem}
.assign-rep{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.5rem .6rem;border-radius:11px;
  background:rgba(124,198,255,.05);border:1px solid rgba(124,198,255,.16);color:var(--text);cursor:pointer;transition:.15s}
.assign-rep:hover{border-color:var(--blue-400);transform:translateY(-1px)}
.assign-rep.rec{border-color:rgba(255,192,67,.5);background:rgba(255,192,67,.07)}
.assign-rep__name{display:flex;flex-direction:column;flex:1;min-width:0}
.assign-rep__name b{font-family:var(--font-head);font-size:.92rem}
.rec-badge{display:inline-flex;align-items:center;gap:.3em;flex:none;font-size:.7rem;font-weight:700;color:#ffd479;
  background:rgba(255,192,67,.13);border:1px solid rgba(255,192,67,.4);border-radius:999px;padding:.18em .55em}
.rec-badge .ic-svg{color:#ffc043}
/* "Suggested" badge — shown when reps are otherwise booked but pair up on a 2+ rep area */
.sug-badge{display:inline-flex;align-items:center;gap:.3em;flex:none;font-size:.7rem;font-weight:700;color:#9fd2ff;
  background:rgba(43,143,224,.16);border:1px solid rgba(124,198,255,.45);border-radius:999px;padding:.18em .55em}
.sug-badge .ic-svg{color:var(--blue-300)}
.assign-rep.sug{border-color:rgba(124,198,255,.45);background:rgba(43,143,224,.07)}

/* ---- Routes: compact neighbourhood cards ---- */
.routegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem}
.routecard{background:var(--navy-800);border:1px solid var(--glass-border);border-radius:16px;padding:.7rem .8rem;
  display:flex;flex-direction:column;gap:.35rem}
.routecard__head{display:flex;align-items:center;gap:.4rem;font-family:var(--font-head);padding-bottom:.4rem;
  border-bottom:1px solid rgba(124,198,255,.1)}
.routecard__head .ic-svg{color:var(--blue-300)}
.routecard__head b{font-size:.95rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.routecard__count{font-size:.68rem;font-weight:700;color:var(--blue-300);background:rgba(124,198,255,.12);
  border-radius:999px;padding:.1em .5em;flex:none}
.routecell{display:flex;align-items:center;gap:.55rem;padding:.3rem .15rem}
.routecell__info{display:flex;flex-direction:column;flex:1;min-width:0}
.routecell__info b{font-family:var(--font-head);font-size:.88rem}
.routecell__info .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.routecell__x{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.28);color:#ffb4b4;transition:.15s}
.routecell__x:hover{background:rgba(239,68,68,.22)}
/* reschedule-request / arrival rows */
.reqrow{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid rgba(124,198,255,.08)}
.reqrow:last-child{border-bottom:0}
.reqrow__info{display:flex;flex-direction:column;flex:1;min-width:0}
.reqrow__info b{font-family:var(--font-head);font-size:.88rem}
.reqrow__info .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reqrow__btns{display:flex;gap:.4rem;flex:none}

/* ---- area highlight banner (rep's assigned neighbourhood on the map) ---- */
.maphl-banner{position:fixed;top:calc(var(--topbar-h) + 62px);left:50%;transform:translateX(-50%);z-index:19;
  display:flex;align-items:center;gap:.5rem;max-width:92vw;
  background:rgba(8,20,34,.92);backdrop-filter:blur(8px);border:1px solid rgba(124,198,255,.35);
  border-radius:999px;padding:.45rem .55rem .45rem .9rem;box-shadow:0 8px 26px rgba(0,0,0,.4)}
.maphl-banner__ic{display:inline-flex;color:var(--blue-300)}
.maphl-banner__txt{font-size:.83rem;font-weight:600;font-family:var(--font-head);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.maphl-banner__x{background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.4);color:#ffb4b4;
  width:28px;height:28px;border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:none}
@media(min-width:900px){ .maphl-banner{left:calc(248px + (100% - 248px)/2)} }

/* ---- rep's assigned-area banner on the map (Directions + Mark arrived) ---- */
.reparea-banner{position:fixed;top:calc(var(--topbar-h) + 62px);left:50%;transform:translateX(-50%);z-index:19;
  display:flex;align-items:center;gap:.6rem;max-width:94vw;
  background:rgba(8,20,34,.94);backdrop-filter:blur(8px);border:1px solid rgba(124,198,255,.35);
  border-radius:16px;padding:.5rem .6rem .5rem .8rem;box-shadow:0 8px 26px rgba(0,0,0,.45)}
.reparea__ic{display:inline-flex;color:var(--blue-300);flex:none}
.reparea__txt{display:flex;flex-direction:column;min-width:0;max-width:34vw}
.reparea__txt b{font-family:var(--font-head);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reparea__txt .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reparea__actions{display:flex;gap:.4rem;flex:none}
.reparea__btn{display:inline-flex;align-items:center;gap:.3rem;font-size:.76rem;font-weight:700;font-family:var(--font-head);
  background:rgba(124,198,255,.12);border:1px solid rgba(124,198,255,.3);color:var(--text);
  border-radius:999px;padding:.4rem .7rem;cursor:pointer;transition:.15s;white-space:nowrap}
.reparea__btn:hover{background:rgba(124,198,255,.22)}
.reparea__btn .ic-svg{color:var(--blue-300)}
.reparea__btn--go{background:rgba(52,211,153,.16);border-color:rgba(52,211,153,.4)}
.reparea__btn--go .ic-svg{color:#7ff0c0}
.reparea__btn--go:hover{background:rgba(52,211,153,.26)}
.reparea__btn--go.done{background:rgba(52,211,153,.28);border-color:rgba(52,211,153,.6);cursor:default}
@media(min-width:900px){ .reparea-banner{left:calc(248px + (100% - 248px)/2)} }
@media(max-width:560px){
  .reparea-banner{flex-wrap:wrap;max-width:96vw;padding:.5rem .6rem}
  .reparea__txt{max-width:100%;flex:1}
  .reparea__actions{width:100%;justify-content:stretch}
  .reparea__btn{flex:1;justify-content:center}
}
/* arrival pin marker */
.arrivepin{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:#34d399;border:2px solid #eafff5;box-shadow:0 3px 10px rgba(0,0,0,.5);display:grid;place-items:center}
.arrivepin span{transform:rotate(45deg);color:#06351f;display:grid;place-items:center}

/* directions chooser */
.dir-choose{display:flex;flex-direction:column}

/* ============================================================
   v7 — pop-up scheduling calendar
============================================================ */
.cal-card{padding:.8rem;position:relative}
/* full-screen: clear the phone camera/notch at the top, and reserve a row for the close button */
.cal-card--full{position:fixed;inset:0;z-index:60;border-radius:0;overflow:auto;margin:0;
  padding:calc(env(safe-area-inset-top) + 58px) calc(env(safe-area-inset-right) + 1rem)
          calc(env(safe-area-inset-bottom) + 2rem) calc(env(safe-area-inset-left) + 1rem)}
body.cal-locked{overflow:hidden}
.cal-close{display:none}
.cal-card--full .cal-close{display:grid;place-items:center;position:fixed;
  top:calc(env(safe-area-inset-top) + 10px);right:calc(env(safe-area-inset-right) + 12px);z-index:61;
  width:40px;height:40px;border-radius:50%;background:rgba(124,198,255,.16);border:1px solid rgba(124,198,255,.32);color:var(--text);cursor:pointer}
.cal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.cal-modes{margin:0}
.cal-nav{display:flex;align-items:center;gap:.3rem}
.cal-nav__lbl{min-width:130px;text-align:center;font-family:var(--font-head);font-weight:700;font-size:.92rem}
.cal-custom{max-width:440px;margin-bottom:.6rem}

/* month grid */
.cal-grid-head{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.cal-grid-head span{text-align:center;font-size:.66rem;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.03em}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-cell{min-height:62px;border-radius:10px;border:1px solid rgba(124,198,255,.12);padding:.3rem;cursor:pointer;
  display:flex;flex-direction:column;gap:.1rem;transition:.12s;background:rgba(124,198,255,.03);overflow:hidden}
.cal-cell:hover{transform:translateY(-1px);border-color:var(--blue-400)}
.cal-cell__d{font-family:var(--font-head);font-weight:700;font-size:.82rem}
.cal-cell__rev{font-size:.72rem;font-weight:700}
.cal-cell__n{font-size:.62rem;color:var(--muted-2)}
.cal-cell--today{box-shadow:0 0 0 2px var(--blue-400) inset}
.cal-day--out{opacity:.32;cursor:default}
.cal-day--out:hover{transform:none;border-color:rgba(124,198,255,.12)}
.cal-day--past{background:rgba(255,255,255,.02);opacity:.6}
/* 3 importance tiers vs the daily $ goal */
.cal-tier1{background:rgba(239,68,68,.13);border-color:rgba(239,68,68,.34)}
.cal-tier1 .cal-cell__rev{color:#ff9d9d}
.cal-tier2{background:rgba(255,176,32,.12);border-color:rgba(255,176,32,.32)}
.cal-tier2 .cal-cell__rev{color:#ffce80}
.cal-tier3{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.32)}
.cal-tier3 .cal-cell__rev{color:#7ff0c0}

/* week view */
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-wday{border-radius:11px;border:1px solid rgba(124,198,255,.12);padding:.4rem;cursor:pointer;min-height:120px;display:flex;flex-direction:column;gap:.25rem}
.cal-wday:hover{border-color:var(--blue-400)}
.cal-wday__h{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-head)}
.cal-wday__h b{font-size:.78rem}.cal-wday__h span{font-weight:700}
.cal-wday__rev{font-size:.74rem;font-weight:700}
.cal-mini{font-size:.66rem;color:var(--muted);display:flex;gap:.3rem;border-top:1px solid rgba(124,198,255,.07);padding-top:.15rem}
.cal-mini span{color:var(--blue-300);font-weight:600;min-width:48px}

/* custom list */
.cal-list{display:flex;flex-direction:column;gap:.4rem}
.cal-listrow{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:.5rem;align-items:center;padding:.55rem .7rem;border-radius:10px;
  border:1px solid rgba(124,198,255,.12);cursor:pointer;font-size:.84rem}
.cal-listrow:hover{border-color:var(--blue-400)}
.cal-listrow__d{font-family:var(--font-head);font-weight:600}
.cal-listrow__rev{font-weight:700}

/* day detail */
.dayd{display:flex;flex-direction:column;gap:.2rem}
.dayd__top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:.4rem}
.dayd__rev{font-family:var(--font-head);font-weight:800;font-size:1.5rem}
.dayd__gap{font-family:var(--font-head);font-weight:700;color:var(--amber)}
.dayd__sec{margin-top:.9rem}
.dayd__washer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem 0;border-bottom:1px solid rgba(124,198,255,.07);font-size:.84rem}
.dayd__washer b{font-family:var(--font-head)}
.dayd__avail{font-weight:700;color:#7ff0c0;white-space:nowrap}
.dayd__avail.full{color:var(--muted-2)}
.dayd__rep{display:flex;align-items:center;gap:.55rem;padding:.35rem 0;border-bottom:1px solid rgba(124,198,255,.07)}
.dayd__rep__n{display:flex;flex-direction:column;flex:1;min-width:0}
.dayd__rep__n b{font-family:var(--font-head);font-size:.9rem}
.dayd__rep__c{text-align:right}
.dayd__rep__c b{font-family:var(--font-head);color:var(--cyan)}

/* needs-filling list */
.needfill{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid rgba(124,198,255,.07);cursor:pointer}
.needfill:hover{background:rgba(124,198,255,.03)}
.needfill__d{flex:1;min-width:0;display:flex;flex-direction:column}
.needfill__d b{font-family:var(--font-head);font-size:.86rem}
.needfill__g{text-align:right}
.needfill__g b{font-family:var(--font-head);color:#ff9d9d}

/* assign radius slider */
.assign-radius{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 .4rem}
.assign-radius input[type=range]{flex:1;accent-color:var(--blue-400)}

@media(max-width:560px){
  .cal-cell{min-height:52px;padding:.2rem}
  .cal-cell__d{font-size:.74rem}.cal-cell__rev{font-size:.62rem}.cal-cell__n{display:none}
  .cal-week{grid-template-columns:repeat(7,1fr);gap:3px}
  .cal-wday{min-height:96px;padding:.25rem}
  .cal-mini{font-size:.58rem}.cal-mini span{min-width:38px}
  .cal-listrow{grid-template-columns:1.3fr .7fr .8fr;font-size:.78rem}
  .cal-listrow .muted.small:last-child{display:none}
}

/* ============================================================
   v7 — Phase D: Leads controls + Payments
============================================================ */
/* search */
.leadsearch{display:flex;align-items:center;gap:.5rem;background:var(--navy-800);border:1px solid var(--glass-border);
  border-radius:12px;padding:.1rem .8rem;margin-bottom:.7rem}
.leadsearch__ic{display:inline-flex;color:var(--muted-2);flex:none}
.leadsearch__in{flex:1;background:transparent;border:0;outline:none;color:var(--text);padding:.6rem 0;font-size:.92rem}
.leadsearch__in::placeholder{color:var(--muted-2)}
/* rep filter bubbles with auto blue-check */
.repbubbles{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:.4rem;-webkit-overflow-scrolling:touch}
.repbubble{position:relative;display:inline-flex;align-items:center;gap:.45rem;flex:none;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-border);color:var(--text);border-radius:999px;padding:.3rem .8rem .3rem .3rem;
  font-family:var(--font-head);font-weight:600;font-size:.82rem;transition:.15s}
.repbubble:hover{border-color:var(--blue-400)}
.repbubble__av{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(124,198,255,.18);
  font-size:.6rem;font-weight:700;color:#fff}
.repbubble__chk{display:none;position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;
  background:var(--blue-500,#2b8fe0);color:#fff;place-items:center;border:2px solid var(--navy-900,#06121f)}
.repbubble__chk .ic-svg{width:11px;height:11px}
.repbubble.checked{border-color:var(--blue-400);background:rgba(43,143,224,.16)}
.repbubble.checked .repbubble__chk{display:grid}
/* sort bubbles + status dropdown row */
.leadcontrols{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}
.sortbubbles{display:flex;gap:.4rem}
.leadstatus{background:var(--navy-800);border:1px solid var(--glass-border);color:var(--text);border-radius:10px;
  padding:.45rem .6rem;font-size:.84rem;font-weight:600}
.leadcount{margin-bottom:.6rem}

/* payment cards */
.paycards{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.paycard{background:var(--navy-800);border:1px solid var(--glass-border);border-radius:16px;padding:.9rem 1rem;
  display:flex;flex-direction:column;gap:.15rem}
.paycard__label{font-size:.72rem;font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:.03em}
.paycard__value{font-family:var(--font-head);font-weight:800;font-size:1.5rem}
.paycard__sub{font-size:.74rem;color:var(--muted)}
.paycard--hero{background:linear-gradient(150deg,rgba(43,143,224,.22),rgba(124,198,255,.08));border-color:rgba(124,198,255,.4)}
.paycard--hero .paycard__value{color:#bfe2ff;font-size:1.7rem}
/* admin period summary + per-rep rows */
.paysummary{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-top:.7rem}
.paysummary__big{font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:#bfe2ff}
.payrep{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid rgba(124,198,255,.08)}
.payrep:last-child{border-bottom:0}
.payrep__info{display:flex;flex-direction:column;flex:1;min-width:0}
.payrep__info b{font-family:var(--font-head);font-size:.9rem}
.payrep__money{text-align:right;display:flex;flex-direction:column;min-width:72px}
.payrep__money b{font-family:var(--font-head);font-size:.95rem}
.payrep__money b.owe{color:#ffce80}
.payjob{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem 0;border-bottom:1px solid rgba(124,198,255,.07)}
.payjob:last-child{border-bottom:0}
.payjob__info{display:flex;flex-direction:column;min-width:0}
.payjob__info b{font-family:var(--font-head);font-size:.88rem}
.payjob__amt{text-align:right}
.payjob__amt b{font-family:var(--font-head);color:var(--cyan)}
@media(max-width:560px){
  .paycards{grid-template-columns:1fr 1fr}
  .paycard--hero{grid-column:1 / -1}
  .repbubble{font-size:.78rem}
}

/* ============================================================
   v7 — Phase F: native-app feel (home-screen webapp first)
============================================================ */
/* softer corners + app polish */
:root{--radius:20px;--radius-sm:14px}
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
.modal{border-radius:26px 26px 0 0}
.bottomnav a,.sidenav a,.chip,.fab,.map-toggle button{-webkit-user-select:none;user-select:none}

/* calmer FAB: glow + pulse removed, plain press feedback */
.fab{animation:none;box-shadow:0 8px 22px rgba(2,10,22,.5)}
.fab:active{transform:scale(.94)}
/* the little ⓘ circle under the FAB (map attribution) → quiet text line */
.maplibregl-ctrl-attrib{background:transparent!important;padding:0 6px}
.maplibregl-ctrl-attrib-button{display:none!important}
.maplibregl-ctrl-attrib-inner{display:block!important;font-size:.6rem;opacity:.45;color:#cfe3f7}

/* cluster bubbles ("Everyone" zoomed out) */
.cluster{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:var(--grad);color:#fff;font-family:var(--font-head);font-weight:800;font-size:.92rem;
  border:2.5px solid rgba(255,255,255,.85);box-shadow:0 6px 18px rgba(2,10,22,.55);transition:transform .15s var(--ease)}
.cluster:hover{transform:scale(1.07)}
.cluster span{pointer-events:none}
.cluster--md{width:54px;height:54px;font-size:1.02rem}
.cluster--lg{width:64px;height:64px;font-size:1.12rem}

/* "already washed" pin + its tiny info chip */
.pin--washed{width:22px;height:22px;opacity:.95}
.pop-chip .maplibregl-popup-content{min-width:0;border-radius:999px;padding:0}
.chip-pop{display:flex;align-items:center;gap:.55rem;padding:.45rem .55rem .45rem .8rem}
.chip-pop__ic{display:inline-flex;color:#a5b4fc;flex:none}
.chip-pop__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.chip-pop__txt b{font-family:var(--font-head);font-size:.8rem;white-space:nowrap}
.chip-pop__txt span{font-size:.68rem;color:var(--muted);white-space:nowrap}
.chip-pop__x{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#ffb4b4}

/* typed duration boxes (hours / minutes) */
.durboxes{display:flex;gap:.7rem;margin:.3rem 0 .7rem;max-width:280px}
.durbox{flex:1;display:flex;flex-direction:column;gap:.25rem;margin:0}
.durbox input{text-align:center;font-size:1.3rem;font-weight:700;font-family:var(--font-head);padding:.5em .4em}
.durbox span{font-size:.7rem;color:var(--muted);text-align:center;font-weight:600;text-transform:uppercase;letter-spacing:.05em}

/* ============================================================
   v8 — "clean glass, big numbers" design pass
============================================================ */
/* KPI tiles: flatter, airier, thin color accent on top */
.kpi{background:rgba(255,255,255,.035);border:1px solid rgba(124,198,255,.1);padding:.95rem 1rem .9rem}
.kpi::after{display:none}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0;
  background:var(--grad);opacity:.85}
.kpi__label{font-size:.68rem;letter-spacing:.07em;color:var(--muted-2)}
.kpi__value{font-size:1.8rem;font-weight:800;letter-spacing:-.02em;margin-top:.25rem}
.kpi--cyan::before{background:linear-gradient(90deg,#6fe3ff,#38bdf8)}
.kpi--green::before{background:linear-gradient(90deg,#34d399,#22c55e)}
.kpi--amber::before{background:linear-gradient(90deg,#ffce80,#f59e0b)}
.kpi--blue::before{background:var(--grad)}
.kpi--accent .kpi__value{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--text)}
/* quieter section titles + cards */
.sec-title{font-size:.78rem;letter-spacing:.06em}
.card{box-shadow:none;border-color:rgba(124,198,255,.12)}
.card.card--pad{padding:1.15rem 1.1rem}
/* destructive actions: quiet outline instead of a loud red slab */
.btn--danger{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);color:#ffb4b4}
.btn--danger:hover{background:rgba(239,68,68,.2)}
.btn--danger.btn--sm{padding:.34em .7em;font-size:.78rem}

/* admin dashboard hero (today vs $4k + washer capacity) */
.dash-hero{padding:1.1rem 1.15rem;margin-bottom:1rem}
.dash-hero__row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.dash-hero__big{font-family:var(--font-head);font-weight:800;font-size:2rem;letter-spacing:-.02em;line-height:1.1}
.dash-hero__goal{font-size:1rem;color:var(--muted-2);font-weight:600}
.dash-hero__pct{font-family:var(--font-head);font-weight:800;font-size:1.3rem}
.dash-hero__pct.good{color:#7ff0c0}.dash-hero__pct.mid{color:#ffce80}.dash-hero__pct.low{color:#ff9d9d}
.dash-hero__washers{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.7rem}
.washpill{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:600;color:var(--muted);
  background:rgba(124,198,255,.07);border:1px solid rgba(124,198,255,.16);border-radius:999px;padding:.22em .65em}
.washpill b{font-family:var(--font-head);color:var(--text)}
.washpill.full{border-color:rgba(239,68,68,.3);color:#ff9d9d}
.washpill.free{border-color:rgba(52,211,153,.3);color:#7ff0c0}
.dash-hero__washers .linkbtn{margin-left:auto}

/* rep home */
.home-hero{padding:1.15rem 1.15rem 1.05rem;background:linear-gradient(155deg,rgba(43,143,224,.16),rgba(124,198,255,.04));
  border-color:rgba(124,198,255,.28)}
.home-hero__label{font-size:.66rem;font-weight:700;letter-spacing:.14em;color:var(--blue-300)}
.home-hero__hood{display:flex;align-items:center;gap:.45rem;font-family:var(--font-head);font-weight:800;
  font-size:1.45rem;letter-spacing:-.02em;margin-top:.3rem}
.home-hero__pin{display:inline-flex;color:var(--blue-300)}
.home-hero__mates{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.45rem;font-size:.84rem;color:var(--muted)}
.home-hero__btns{display:flex;gap:.5rem;margin-top:.9rem;flex-wrap:wrap}
.home-hero__btns .btn{flex:1;min-width:110px;justify-content:center}
.home-fu{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;border-bottom:1px solid rgba(124,198,255,.07)}
.home-fu:last-of-type{border-bottom:0}
.home-fu b{font-family:var(--font-head);font-size:.88rem;flex:none}
.home-fu .muted{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-tiles .kpi{cursor:default}

/* My Week — day cards */
.daygrid{display:grid;grid-template-columns:repeat(7,1fr);gap:.45rem}
.daycard{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.65rem .2rem .55rem;border-radius:14px;
  background:rgba(124,198,255,.04);border:1.5px solid rgba(124,198,255,.14);color:var(--muted);cursor:pointer;transition:.18s}
.daycard__d{font-family:var(--font-head);font-weight:700;font-size:.82rem}
.daycard__state{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(124,198,255,.25);color:transparent;transition:.18s}
.daycard.on{background:rgba(43,143,224,.16);border-color:var(--blue-400);color:var(--text)}
.daycard.on .daycard__state{background:var(--grad);border-color:transparent;color:#fff}
.daycard:active{transform:scale(.95)}
.daycount{margin-top:.6rem;font-size:.78rem;color:var(--muted-2);font-weight:600}

/* map legend: collapsed pill by default so it never hides pins */
.map-legend{max-width:46vw}
.map-legend.collapsed .li{display:none}
.map-legend .legend-toggle{display:flex;align-items:center;gap:.4em;font-weight:700;font-family:var(--font-head);
  color:var(--blue-300);cursor:pointer;font-size:.74rem;-webkit-user-select:none;user-select:none}

/* ============================================================
   v9 — SOLID surfaces + new components + mobile uncluttering
============================================================ */
:root{--surface:#0d2034;--surface-2:#122941;--surface-3:#16304b}
/* cards & bubbles POP from the background — no more see-through glass */
.card,.kpi,.paycard,.routecard,.lead-card,.lb__row{background:var(--surface);backdrop-filter:none;
  border:1px solid rgba(124,198,255,.16);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.kpi{background:var(--surface)}
.routebox,.home-fu{background:transparent}
.routebox{background:var(--surface-2);border-color:rgba(124,198,255,.14)}
.modal{background:#0e2236}
.appbar{background:#081726f2}
.bottomnav{background:#071423fa}
input,select,textarea{background:#0a1c30}
.chip{background:var(--surface);border-color:rgba(124,198,255,.2)}
.map-legend,.map-toggle,.assign-panel{background:#0b1e33;backdrop-filter:none;border-color:rgba(124,198,255,.22)}
.leadsearch,.leadstatus{background:var(--surface)}
.repbubble{background:var(--surface)}
.cal-card{background:var(--surface)}
.paycard--hero{background:linear-gradient(150deg,#15406b,#0e2a4a);border-color:rgba(124,198,255,.45)}
.home-hero{background:linear-gradient(155deg,#16466f,#0d2540);border-color:rgba(124,198,255,.4)}
.dash-hero{background:linear-gradient(155deg,#123a5e,#0c2138);border-color:rgba(124,198,255,.3)}
.kpi--tap{cursor:pointer;transition:transform .15s var(--ease)}
.kpi--tap:active{transform:scale(.97)}

/* fill-day mission card (rep home) */
.home-fill{margin-top:.8rem;padding:1.05rem 1.1rem;background:linear-gradient(150deg,#4a3414,#22180a);
  border:1px solid rgba(255,176,32,.4)}
.home-fill__label{display:inline-flex;align-items:center;gap:.35rem;font-size:.66rem;font-weight:800;
  letter-spacing:.12em;color:#ffce80}
.home-fill__label .ic-svg{color:#ffb020}
.home-fill__hood{font-family:var(--font-head);font-weight:800;font-size:1.3rem;margin-top:.25rem}
.home-fill__gap{margin-top:.3rem;font-size:.95rem}
.home-fill__gap b{font-family:var(--font-head);color:#ffce80;font-size:1.15rem}
.home-fill__washers{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}

/* mini area map popup (rounded) */
.areamap{height:52vh;min-height:300px;border-radius:18px;overflow:hidden;border:1px solid rgba(124,198,255,.25)}

/* assign popup: day picker row */
.assign-day{display:flex;align-items:center;gap:.55rem;margin:.1rem 0 .5rem;flex-wrap:wrap}
.assign-day input{flex:1;min-width:140px;width:auto;margin:0}
.daytag{display:inline-block;margin-left:.45rem;font-size:.64rem;font-weight:700;color:#9fd2ff;
  background:rgba(43,143,224,.2);border:1px solid rgba(124,198,255,.4);border-radius:999px;padding:.12em .5em;vertical-align:1px}

/* calendars: weekends muted (still tappable), rep assigned days glow blue */
.cal-wkend{opacity:.42;filter:saturate(.35)}
.cal-wkend:hover{opacity:.7}
.repday{background:rgba(43,143,224,.3)!important;border-color:var(--blue-400)!important;opacity:1}
.repday .cal-cell__rev{color:#bfe2ff;font-size:.6rem}
.repday--day{box-shadow:0 0 0 1.5px var(--blue-300) inset,0 0 14px rgba(74,168,240,.35)}
.cal-cell--rep{cursor:default}
.cal-cell--rep.repday{cursor:pointer}

/* day planner table */
.plan__row{display:flex;align-items:center;gap:.55rem;padding:.45rem 0;border-bottom:1px solid rgba(124,198,255,.08)}
.plan__row:last-of-type{border-bottom:0}
.plan__day{flex:none;width:64px;display:flex;flex-direction:column;line-height:1.15;cursor:pointer;border-radius:9px;padding:.2rem .3rem}
.plan__day:hover{background:rgba(124,198,255,.08)}
.plan__day b{font-family:var(--font-head);font-size:.84rem;color:var(--blue-300)}
.plan__day span{font-size:.68rem;color:var(--muted-2)}
.plan__area{flex:1;min-width:0;padding:.5em .7em;font-size:.88rem!important}
.plan__reps{flex:none;display:flex;align-items:center;gap:.2rem;min-width:54px;justify-content:flex-end}
.plan__reps .avatar{border-width:1.5px;margin-left:-6px}
.plan__reps .avatar:first-child{margin-left:0}

/* recommended-areas popup */
.sugg__row{display:flex;align-items:center;gap:.65rem;padding:.55rem 0;border-bottom:1px solid rgba(124,198,255,.08)}
.sugg__row:last-child{border-bottom:0}
.sugg__rank{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:.82rem}
.sugg__rank.good{background:rgba(52,211,153,.16);color:#7ff0c0;border:1px solid rgba(52,211,153,.35)}
.sugg__rank.bad{background:rgba(255,176,32,.13);color:#ffce80;border:1px solid rgba(255,176,32,.3)}
.sugg__info{flex:1;min-width:0;display:flex;flex-direction:column}
.sugg__info b{font-family:var(--font-head);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* dashboard drill-down: full-screen sheet */
.drill{position:fixed;inset:0;z-index:120;background:#081726;overflow-y:auto;
  padding:calc(var(--safe-top) + .8rem) 1rem calc(var(--safe-bot) + 2rem);animation:drillup .25s var(--ease)}
@keyframes drillup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
body.drill-open{overflow:hidden}
.drill__head{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.drill__head h2{font-size:1.25rem}
.drill__x{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--surface-2);border:1px solid rgba(124,198,255,.25);color:var(--text)}
.drill__big{font-family:var(--font-head);font-weight:800;font-size:2.4rem;letter-spacing:-.02em;line-height:1.05}
.drill__sub{margin-top:.15rem}
.drill__chart{height:200px;margin:1rem 0;background:var(--surface);border:1px solid rgba(124,198,255,.14);
  border-radius:16px;padding:.7rem}
.drill__rep{display:flex;align-items:flex-start;gap:.65rem;padding:.6rem 0;border-bottom:1px solid rgba(124,198,255,.08)}
.drill__rep__mid{flex:1;min-width:0}
.drill__rep__top{display:flex;justify-content:space-between;align-items:baseline}
.drill__rep__top b{font-family:var(--font-head)}
.drill__rep__v{color:var(--cyan)}
.drill__rep .lb__bar{margin:.3rem 0 .2rem}

/* ============================================================
   v10 — pop-out depth, payments un-squash, daily dashboards
============================================================ */
/* deeper page background so the solid cards visibly lift off it */
body{background:radial-gradient(120% 90% at 70% -10%,#0b2440 0%,#040d18 60%) fixed,#040d18}
/* overscroll (rubber-band) area matches the header — no jarring blank band */
html{background:#081726}

/* pull-to-refresh indicator (short pull, sits where the gap used to be) */
.ptr{position:fixed;top:calc(var(--safe-top) + 4px);left:50%;transform:translate(-50%,0);z-index:240;
  opacity:0;pointer-events:none;transition:opacity .15s}
.ptr.show{opacity:1}
.ptr__disc{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--blue-300);
  background:var(--surface-2);border:1px solid rgba(124,198,255,.35);box-shadow:0 8px 22px rgba(0,0,0,.55)}
.ptr.ready .ptr__disc{background:var(--grad);border-color:transparent;color:#fff}
.ptr.spin .ptr__disc{animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}

/* week-strip day cards: date number + past-day state */
.daycard__num{font-family:var(--font-head);font-weight:800;font-size:1.05rem;line-height:1}
.daycard.past{opacity:.35;cursor:default}
.daycard.past:active{transform:none}
.card,.kpi,.paycard,.routecard,.lead-card,.lb__row{
  background:linear-gradient(180deg,#142a44,#102338);
  border:1px solid rgba(124,198,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.5)}
.home-hero{background:linear-gradient(155deg,#1b5183,#11304f);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 40px rgba(0,0,0,.5)}
.dash-hero{background:linear-gradient(155deg,#16456e,#0f2942);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px rgba(0,0,0,.5)}
.paycard--hero{background:linear-gradient(150deg,#1a4d7d,#113152)}
.home-fill{background:linear-gradient(150deg,#5a3f15,#2a1d0b);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px rgba(0,0,0,.5)}

/* squash-proof buttons & rows */
.btn{min-height:42px}
.btn--sm{min-height:34px;padding:.4em .85em}
.view__head{margin-bottom:1.1rem}
.view__head .btn{flex:none}
.greet{display:flex;flex-direction:column;min-width:0}
.greet h1{font-size:1.5rem;letter-spacing:-.02em;line-height:1.15}
.greet__sub{margin-top:.1rem}

/* payments: roomy, never squashed */
.paycard{min-height:92px;justify-content:center;padding:1rem 1.05rem}
.paycard__value{font-size:1.65rem}
.paycard--hero .paycard__value{font-size:1.9rem}
.payrep{padding:.7rem 0}
.payrep .btn{flex:none}
.paysummary__big{font-size:1.7rem}

/* TODAY panel: label + rep tracker rows */
.dash-hero__label{font-size:.64rem;font-weight:800;letter-spacing:.14em;color:var(--blue-300);margin-bottom:.35rem}
.dash-hero__sub{margin-top:.55rem}
.dash-hero__track{display:flex;flex-direction:column;margin-top:.2rem}
.trackrow{display:flex;align-items:center;gap:.6rem;padding:.55rem .4rem;border-radius:12px;cursor:pointer;transition:.15s}
.trackrow:hover{background:rgba(124,198,255,.07)}
.trackrow:active{transform:scale(.985)}
.trackrow__mid{flex:1;min-width:0;display:flex;flex-direction:column}
.trackrow__mid b{font-family:var(--font-head);font-size:.92rem}
.trackrow__v{text-align:right;display:flex;flex-direction:column}
.trackrow__v b{font-family:var(--font-head);color:var(--cyan)}

/* multi-day picker chips (assign popup) */
.daypick{display:flex;gap:.35rem;overflow-x:auto;padding:.3rem 0 .45rem;-webkit-overflow-scrolling:touch}
.daypick__c{flex:none;display:flex;flex-direction:column;align-items:center;gap:.1rem;width:46px;padding:.4rem 0 .35rem;
  border-radius:11px;background:rgba(124,198,255,.06);border:1.5px solid rgba(124,198,255,.16);color:var(--muted);cursor:pointer;transition:.15s}
.daypick__c b{font-family:var(--font-head);font-size:.66rem}
.daypick__c span{font-size:.78rem;font-weight:700}
.daypick__c.wkend{opacity:.45}
.daypick__c.on{background:var(--grad);border-color:transparent;color:#fff;opacity:1}
.assign-day__head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.1rem}

/* day-full checkmarks */
.cal-cell__chk{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;margin-left:.25rem;
  background:#22c55e;color:#03180c;vertical-align:1px}
.plan__full{flex:none}

/* cleaner tables */
.tablewrap{background:linear-gradient(180deg,#142a44,#102338);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
th{background:rgba(4,13,24,.55);font-size:.66rem}
td{border-bottom:1px solid rgba(124,198,255,.07);font-size:.84rem}
tbody tr:last-child td{border-bottom:0}
.tablewrap--clean table{min-width:460px;font-size:.8rem}
.tablewrap--clean td{padding:.5rem .6rem;white-space:nowrap}
.pinlog__addr{max-width:160px;overflow:hidden;text-overflow:ellipsis}
.tag-pill{font-size:.66rem;padding:.16em .55em}

/* ============================================================
   v12 — smart scheduling, paydays, to-do, washer roster
============================================================ */
/* smart washer options: red = booking past the 10h day (still tappable) */
.washeropt.over{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.1)}
.washeropt.over b{color:#ffb4b4}
.washeropt.over span{color:#ff9d9d}
.washeropt.over.sel{border-color:#ef4444;background:rgba(239,68,68,.22);box-shadow:0 0 0 1.5px rgba(239,68,68,.6) inset}
.ptbadge{display:inline-block;margin-left:.4em;font-size:.6rem;font-weight:800;color:#9fd2ff;
  background:rgba(43,143,224,.2);border:1px solid rgba(124,198,255,.4);border-radius:6px;padding:.06em .4em;vertical-align:1px}
.bestbadge{display:inline-block;margin-left:.4em;font-size:.6rem;font-weight:800;color:#7ff0c0;
  background:rgba(52,211,153,.16);border:1px solid rgba(52,211,153,.45);border-radius:6px;padding:.06em .4em;vertical-align:1px}
.ptbtn{display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;cursor:pointer;
  background:transparent;border:1.5px dashed rgba(124,198,255,.35);color:var(--blue-300);
  border-radius:999px;padding:.4em .9em;font-size:.78rem;font-weight:700;font-family:var(--font-head)}
.ptbtn:hover{background:rgba(124,198,255,.08)}

/* washer roster rows */
.wroster__row{display:flex;align-items:flex-start;gap:.55rem;padding:.5rem 0;border-bottom:1px solid rgba(124,198,255,.08)}
.wroster__row:last-of-type{border-bottom:0}
.wroster__chips{flex:1;display:flex;gap:.3rem;flex-wrap:wrap}
.wchip{font-size:.72rem;font-weight:700;font-family:var(--font-head);cursor:pointer;border-radius:999px;
  padding:.3em .7em;background:rgba(124,198,255,.05);border:1.5px solid rgba(124,198,255,.18);color:var(--muted);transition:.15s}
.wchip.on{background:var(--grad);border-color:transparent;color:#fff}
.wchip.pt.on{background:linear-gradient(120deg,#34d399,#22c55e)}
.wchip:active{transform:scale(.95)}

/* payday rows (admin upcoming + rep payments + home) */
.payday{display:flex;align-items:center;gap:.6rem;padding:.6rem 0;border-bottom:1px solid rgba(124,198,255,.08)}
.payday:last-child{border-bottom:0}
.payday--tap{cursor:pointer;border-radius:10px;padding:.6rem .35rem}
.payday--tap:hover{background:rgba(124,198,255,.06)}
.payday--tap:active{transform:scale(.985)}
.payday__d{flex:1;min-width:0;display:flex;flex-direction:column}
.payday__d b{font-family:var(--font-head);font-size:.9rem}
.payday__c{text-align:right;display:flex;flex-direction:column}
.payday__c b{font-family:var(--font-head);color:var(--cyan);font-size:1rem}
.payday__c--big b{font-size:1.3rem}
/* pay-period divider in the upcoming list */
.period-divider{display:flex;align-items:center;gap:.6rem;margin:.45rem 0;color:#ffce80;font-size:.72rem;font-weight:800;
  font-family:var(--font-head);letter-spacing:.05em;text-transform:uppercase}
.period-divider::before,.period-divider::after{content:"";flex:1;height:1.5px;background:rgba(255,176,32,.4)}
.daybreak__sum{margin-bottom:.7rem}
.daybreak__sum b{font-family:var(--font-head);font-size:1.5rem;color:var(--cyan)}

/* home: to-do + paydays summary */
.home-todo{margin-top:.8rem;padding:.95rem 1.05rem;background:linear-gradient(150deg,#46350f,#241a08);
  border:1px solid rgba(255,176,32,.45)}
.home-todo__label{display:inline-flex;align-items:center;gap:.35rem;font-size:.64rem;font-weight:800;
  letter-spacing:.13em;color:#ffce80}
.home-todo__label .ic-svg{color:#ffb020}
.home-todo__row{display:flex;flex-direction:column;margin-top:.35rem;cursor:pointer}
.home-todo__row b{font-family:var(--font-head);font-size:1.05rem}
.home-todo__row:active{transform:scale(.99)}
.paysum{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.5rem;
  padding:.8rem .9rem;border-radius:14px;background:linear-gradient(150deg,#15406b,#0e2a4a);border:1px solid rgba(124,198,255,.35)}
.paysum__big{font-family:var(--font-head);font-weight:800;font-size:1.7rem;color:#bfe2ff;letter-spacing:-.02em;line-height:1.1}
.paysum__side{text-align:right;display:flex;flex-direction:column}
.paysum__side b{font-family:var(--font-head)}

/* ============================================================
   v13 — modal lock, full-screen pull-refresh, schedule boards
============================================================ */
/* modal: locked on screen, vertical scroll only, X always reachable */
body.modal-open{overflow:hidden}
.modal{overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;max-height:88vh}
.modal__head{position:sticky;top:0;z-index:5;background:#0e2236;margin:-1.3rem -1.2rem 1rem;
  padding:1rem 1.2rem .7rem;border-bottom:1px solid rgba(124,198,255,.12)}
.modal__x{width:40px;height:40px;border-radius:50%;flex:none}
.modal .row{flex-wrap:wrap}
.modal img,.modal canvas{max-width:100%}
@media(max-width:560px){
  .modal__head{margin:-1.1rem -1rem .9rem;padding:.9rem 1rem .65rem}
}

/* pull-to-refresh: bar lives in the revealed header-coloured gap above the screen */
.ptr{display:none}
.ptrbar{position:fixed;top:-52px;left:0;right:0;height:52px;z-index:5;
  display:flex;align-items:center;justify-content:center;gap:.5rem;background:#081726;
  color:var(--muted-2);font-size:.78rem;font-weight:700;font-family:var(--font-head)}
.ptrbar__ic{display:inline-flex;transition:transform .2s}
.ptrbar.ready{color:var(--blue-300)}
.ptrbar.ready .ptrbar__ic{transform:rotate(180deg)}
.ptrbar.spin .ptrbar__ic{animation:ptrspin .7s linear infinite}

/* admin payments: clean stacked period bar (no overlap on iPhone) */
.periodbar{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.periodbar .btn{flex:none;width:42px;padding:.4em 0;justify-content:center}
.periodbar__lbl{flex:1;text-align:center;font-family:var(--font-head);font-weight:800;font-size:1.02rem}
.periodbar__dates{display:flex;gap:.6rem;margin-bottom:.5rem}
.periodbar__dates .field{flex:1;margin:0}

/* who-can-work board */
.avail__row{display:flex;align-items:center;gap:.55rem;padding:.45rem .25rem;border-bottom:1px solid rgba(124,198,255,.08);border-radius:10px}
.avail__row:last-of-type{border-bottom:0}
.avail__row--tap{cursor:pointer}
.avail__row--tap:hover{background:rgba(124,198,255,.06)}
.avail__reps{flex:1;display:flex;gap:.35rem;flex-wrap:wrap;min-width:0}
.availchip{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:700;font-family:var(--font-head);
  background:rgba(124,198,255,.07);border:1.5px solid;border-radius:999px;padding:.16rem .6rem .16rem .18rem}
.avail__n{flex:none;display:grid;place-items:center;min-width:24px;height:24px;border-radius:50%;
  background:rgba(52,211,153,.16);border:1px solid rgba(52,211,153,.4);color:#7ff0c0;font-size:.72rem;font-weight:800;font-family:var(--font-head)}
.avail__row .muted{flex:1}

/* ============================================================
   v14 — on-brand fill/to-do cards, day goals, standout numbers
============================================================ */
/* stat color utilities — the numbers carry the color, not the boxes */
.stat-pos{color:#7ff0c0}
.stat-neg{color:#ff9d9d}
.stat-warn{color:#ffce80}
.stat-blue{color:#9fd2ff}

/* fill-day card: brand navy/blue (no more yellow box), data is color-coded */
.home-fill{background:linear-gradient(155deg,#16466f,#0d2540);border:1px solid rgba(124,198,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 34px rgba(0,0,0,.5)}
.home-fill__label{color:var(--blue-300)}
.home-fill__label .ic-svg{color:#ffb020}
.home-fill__hood{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.home-fill__more{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:700;
  font-family:var(--font-head);color:var(--blue-300);background:rgba(124,198,255,.12);
  border:1px solid rgba(124,198,255,.3);border-radius:999px;padding:.25em .7em;flex:none}
.home-fill__stats{display:flex;gap:1.1rem;margin:.55rem 0 .25rem;flex-wrap:wrap}
.fillstat{display:flex;flex-direction:column;line-height:1.2}
.fillstat b{font-family:var(--font-head);font-size:1.25rem;letter-spacing:-.01em}
.fillstat i{font-style:normal;font-size:.68rem;color:var(--muted-2);font-weight:600;text-transform:uppercase;letter-spacing:.05em}

/* to-do card: brand navy with an amber accent strip instead of a yellow box */
.home-todo{background:linear-gradient(155deg,#143a5e,#0c2138);border:1px solid rgba(124,198,255,.32);
  border-left:4px solid #ffb020;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px rgba(0,0,0,.5)}
.home-todo__label{color:#ffce80}

/* fill-day breakdown popup */
.filld__grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.filld__stat{background:rgba(124,198,255,.06);border:1px solid rgba(124,198,255,.16);border-radius:14px;
  padding:.7rem .8rem;display:flex;flex-direction:column;gap:.1rem}
.filld__stat b{font-family:var(--font-head);font-size:1.45rem;letter-spacing:-.02em;line-height:1.15}
.filld__washer{display:flex;align-items:center;gap:.55rem;padding:.5rem 0;border-bottom:1px solid rgba(124,198,255,.08)}
.filld__washer:last-of-type{border-bottom:0}
.filld__washer b{font-family:var(--font-head);font-size:.9rem;flex:none;min-width:86px}
.filld__washer .muted{flex:1;min-width:0}
.filld__avail{flex:none;font-size:.74rem;font-weight:800;font-family:var(--font-head);color:#7ff0c0;text-align:right}
.filld__avail.full{color:#ff9d9d}
.bar--thin{height:8px}

/* day detail: hours line + goal/mark-full controls */
.dayd__hours{display:flex;align-items:baseline;gap:.55rem;margin-top:.6rem}
.dayd__hours b{font-family:var(--font-head);color:#9fd2ff}
.dayd__controls{display:flex;align-items:flex-end;gap:.7rem;margin-top:.8rem}
.dayd__goal{flex:1;margin:0}
.dayd__controls .btn{flex:none}

/* part-time toggle: lives WITH the washer options (same size), padded away
   from the form's save button below */
.ptbtn{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;margin:.55rem 0 1.3rem;
  background:rgba(43,143,224,.14);border:1.5px solid rgba(124,198,255,.4);border-style:solid;color:var(--blue-300);
  border-radius:13px;padding:.8em 1em;min-height:52px;font-size:.84rem;font-weight:700;font-family:var(--font-head);cursor:pointer}
.ptbtn:hover{background:rgba(43,143,224,.22)}
.ptbtn__chev{display:inline-flex;transition:transform .2s var(--ease)}
.ptbtn.open .ptbtn__chev{transform:rotate(180deg)}

/* ============================================================
   v15 — TimeBar segments, Routes 3-view, payments checklist
============================================================ */
/* segmented timeframe bar */
.timebar{display:flex;gap:4px;background:var(--surface);border:1px solid rgba(124,198,255,.2);
  border-radius:14px;padding:4px;margin-bottom:1rem}
.timebar__seg{flex:1;border:0;background:transparent;color:var(--muted);font-family:var(--font-head);
  font-weight:700;font-size:.86rem;padding:.55em .5em;border-radius:10px;cursor:pointer;transition:.15s;min-height:40px}
.timebar__seg.on{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(43,143,224,.4)}
.timebar__presets{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.routes-tabs{margin-bottom:.8rem}

/* coverage colors (routes) */
.cov-full{background:rgba(52,211,153,.14)!important;border-color:rgba(52,211,153,.4)!important}
.cov-part{background:rgba(255,176,32,.13)!important;border-color:rgba(255,176,32,.38)!important}
.cov-zero{background:rgba(239,68,68,.13)!important;border-color:rgba(239,68,68,.38)!important}
.cov-none{opacity:.55}
.covdot{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid transparent;flex:none}
.covdot.cov-full{background:#34d399!important;opacity:1}
.covdot.cov-part{background:#ffb020!important;opacity:1}
.covdot.cov-zero{background:#ef4444!important;opacity:1}
.covdot.cov-none{background:#3a4f66!important;opacity:1}
.covlegend{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.7rem;font-size:.7rem;color:var(--muted-2)}

/* coverage strip (routes dashboard) */
.covstrip{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.3rem}
.covday{flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;gap:.1rem;cursor:pointer;
  border:1.5px solid rgba(124,198,255,.16);border-radius:12px;padding:.5rem .2rem;background:rgba(124,198,255,.04);color:var(--text)}
.covday b{font-family:var(--font-head);font-size:.68rem}
.covday span{font-family:var(--font-head);font-weight:800;font-size:1rem}
.covday i{font-style:normal;font-size:.64rem;color:var(--muted-2);font-weight:700}
.covday:active{transform:scale(.95)}

/* priority card + badge */
.pricard{margin-top:1rem;border-color:rgba(255,176,32,.45)}
.pricard__badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.62rem;font-weight:800;
  letter-spacing:.12em;color:#ffce80;margin-bottom:.4rem}
.pricard__badge .ic-svg{color:#ffb020}
.pricard__row{display:flex;align-items:center;justify-content:space-between;gap:.7rem}
.pricard__d{font-family:var(--font-head);font-size:1.05rem}
.pribadge{display:inline-flex;align-items:center;gap:.3em;font-size:.64rem;font-weight:800;color:#ffce80;
  background:rgba(255,176,32,.14);border:1px solid rgba(255,176,32,.45);border-radius:999px;padding:.16em .55em;margin-left:.4rem}
.pribadge .ic-svg{color:#ffb020}
.gapbadge{flex:none;font-size:.7rem;font-weight:800;font-family:var(--font-head);color:#ffce80;
  background:rgba(255,176,32,.13);border:1px solid rgba(255,176,32,.4);border-radius:999px;padding:.25em .7em}
.gapbadge.bad{color:#ff9d9d;background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.4)}

/* day popup: area headers + tap-to-move reps */
.areahdr{margin:.7rem 0 .3rem;padding-bottom:.3rem;border-bottom:1px solid rgba(124,198,255,.12)}
.areahdr__top{display:flex;align-items:center;gap:.4rem;font-family:var(--font-head)}
.areahdr__top .ic-svg{color:var(--blue-300)}
.dayrep{display:flex;align-items:center;gap:.55rem;padding:.5rem .4rem;border-radius:11px;cursor:pointer;transition:.12s}
.dayrep:hover{background:rgba(124,198,255,.06)}
.dayrep b{font-family:var(--font-head)}
.dayrep__act{padding:.4rem .4rem .6rem;background:rgba(124,198,255,.05);border-radius:11px;margin:.1rem 0 .4rem}
.movestrip{display:flex;gap:.35rem;overflow-x:auto;padding:.35rem 0}
.movestrip__d{flex:none;display:flex;flex-direction:column;align-items:center;width:46px;padding:.35rem 0;cursor:pointer;
  background:rgba(43,143,224,.12);border:1.5px solid rgba(124,198,255,.3);color:var(--text);border-radius:10px;
  font-family:var(--font-head);font-weight:700;font-size:.66rem}
.movestrip__d span{font-size:.82rem;font-weight:800}
.movestrip__d:active{transform:scale(.93)}

/* list view */
.lrep{margin-bottom:.8rem;padding:.8rem .9rem}
.lrep__head{display:flex;align-items:center;gap:.6rem;padding-bottom:.5rem;border-bottom:1px solid rgba(124,198,255,.1);cursor:pointer}
.lrep__head b{font-family:var(--font-head);flex:1}
.lrep__head.warn{cursor:pointer}
.lrep__row{display:flex;align-items:center;gap:.55rem;padding:.42rem 0;border-bottom:1px solid rgba(124,198,255,.06)}
.lrep__row:last-child{border-bottom:0}
.lrep__d{flex:none;width:58px;font-family:var(--font-head);font-weight:700;font-size:.78rem;color:var(--blue-300)}
.lrep__area{flex:1;min-width:0;font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrep__btns{flex:none;display:flex;gap:.35rem;align-items:center}
.listctl{margin-bottom:.5rem}

/* payments: tap-rep period checklist */
.payrep--tap{cursor:pointer;border-radius:12px}
.payrep--tap:hover{background:rgba(124,198,255,.05)}
.homerow{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid rgba(124,198,255,.08)}
.homerow:last-child{border-bottom:0}
.homerow__chk{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  border:1.5px solid rgba(124,198,255,.3);color:transparent}
.homerow__chk.on{background:#22c55e;border-color:transparent;color:#03180c}
.homerow.done .homerow__info b{color:var(--muted)}
.homerow__info{flex:1;min-width:0;display:flex;flex-direction:column}
.homerow__info b{font-family:var(--font-head);font-size:.88rem}
.homerow__info .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.homerow__amt{text-align:right;display:flex;flex-direction:column;flex:none}
.homerow__amt b{font-family:var(--font-head);color:var(--cyan)}

/* ============================================================
   v16 — popup polish + GOALS PLATFORM
============================================================ */
/* modals: roomier, no slot above the sticky header, no squished titles */
.modal{padding-top:0;max-height:92vh}
.modal__head{margin:0 -1.2rem 1.1rem;padding:1.15rem 1.2rem .8rem;align-items:flex-start}
.modal__head h3{flex:1;min-width:0;font-size:1.08rem;line-height:1.32;overflow-wrap:anywhere;padding-right:.3rem}
.modal .reqrow{padding:.7rem 0}
.modal .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.9rem}
/* date pickers: rounded, evenly inset, never overlapping (iOS gives them a
   stubborn intrinsic width unless appearance is reset) */
.modal input[type=date],.timebar__sheet input[type=date]{
  -webkit-appearance:none;appearance:none;min-width:0;width:100%;max-width:100%;
  border-radius:13px;padding:.75em .6em;text-align:center;font-size:16px}
@media(max-width:560px){ .modal__head{margin:0 -1rem 1rem;padding:1.05rem 1rem .75rem} }
/* washer options: contained 2-col grid, never spill out of the sheet */
.washerpick--smart{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.washerpick--smart .washeropt{width:100%;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}
.washerpick--smart .washeropt b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.washerpick--smart .washeropt span{white-space:normal;font-size:.7rem;line-height:1.3;text-align:left}
/* coverage strip scrolls */
.covstrip{overflow-x:auto;-webkit-overflow-scrolling:touch}
.covstrip .covday{flex:none;width:58px}
.pricard__row--sub{margin-top:.55rem;padding-top:.55rem;border-top:1px solid rgba(124,198,255,.1)}
.dayrep--off{opacity:.85}
.dayrep--off b,.dayrep--off .avatar{opacity:.55}
.wrcard{border-left:4px solid var(--blue-400)}

/* ---- goal cards ---- */
.gcard{background:linear-gradient(180deg,#142a44,#102338);border:1px solid rgba(124,198,255,.2);border-radius:16px;
  padding:.9rem 1rem;margin-bottom:.7rem;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.4)}
.gcard:active{transform:scale(.99)}
.gcard--blitz{border-color:rgba(255,122,26,.55);background:linear-gradient(160deg,#3a230d,#1d1206)}
.gcard--incentive{border-color:rgba(255,192,67,.45)}
.gcard--competition{border-color:rgba(239,68,68,.45)}
.gcard--personal{border-color:rgba(168,85,247,.45)}
.gcard__top{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.gcard__name{font-family:var(--font-head);font-weight:800;font-size:1.05rem;margin-bottom:.2rem}
.gcard__nums{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.45rem}
.gcard__val{font-family:var(--font-head);font-weight:800;font-size:1.6rem;letter-spacing:-.02em}
.gcard__tgt{font-size:.8rem;color:var(--muted)}
.gbadge{display:inline-flex;align-items:center;gap:.32em;font-size:.66rem;font-weight:800;letter-spacing:.04em;
  border:1px solid;border-radius:999px;padding:.22em .65em;text-transform:uppercase}

/* BIG countdown timers */
.gtimer{font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:var(--cyan);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.gtimer--sm{font-size:.92rem}
.gtimer--blitz{color:#ff7a1a;animation:blitzpulse 1s infinite}
.gtimer.done{color:var(--muted-2);animation:none}
@keyframes blitzpulse{0%,100%{opacity:1}50%{opacity:.55}}
.gdetail__timer{display:flex;justify-content:center;margin-bottom:.6rem}
.gdetail__timer .gtimer{font-size:1.7rem}
.gdetail__reward{display:flex;justify-content:center;margin-bottom:.7rem}
.gdetail__big{font-family:var(--font-head);font-weight:800;font-size:1.9rem;margin-bottom:.4rem}

/* sections (rep goals tab) */
.gsec{margin-bottom:1.1rem}
.gsec__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.45rem}
.gsec__t{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-head);font-weight:800;
  font-size:.86rem;text-transform:uppercase;letter-spacing:.06em}

/* challenge card */
.gchall{padding:1rem 1.05rem;margin-bottom:.8rem;border-color:rgba(239,68,68,.5);
  background:linear-gradient(160deg,#3a1414,#1d0b0b)}
.gchall__t{display:inline-flex;align-items:center;gap:.35rem;font-size:.64rem;font-weight:800;letter-spacing:.12em;color:#ff9d9d;margin-bottom:.3rem}
.gchall__t .ic-svg{color:#ef4444}

/* VS war view */
.vs{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;padding:1rem .6rem;border-radius:16px;
  background:linear-gradient(100deg,rgba(43,143,224,.18) 0 45%,rgba(239,68,68,.18) 55% 100%);border:1px solid rgba(124,198,255,.2)}
.vs__side{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.vs__side b{font-family:var(--font-head)}
.vs__v{font-family:var(--font-head);font-weight:800;font-size:1.25rem;color:#fff}
.vs__mid{flex:none;font-family:var(--font-head);font-weight:900;font-size:1.3rem;color:#ffce80;text-shadow:0 0 14px rgba(255,176,32,.6)}
.warrow{display:flex;align-items:center;gap:.55rem;padding:.55rem 0;border-bottom:1px solid rgba(124,198,255,.08)}
.warrow:last-child{border-bottom:0}
.warrow.lead{background:rgba(255,192,67,.06);border-radius:10px;padding:.55rem .4rem}
.warrow__rank{flex:none;width:34px;text-align:center;font-family:var(--font-head);font-weight:800}
.warrow__mid{flex:1;min-width:0;display:flex;flex-direction:column}
.warrow__mid b{font-family:var(--font-head)}
.warrow__v{font-family:var(--font-head);font-size:1.05rem;flex:none}
.grep{display:flex;align-items:center;gap:.55rem;padding:.45rem 0}
.grep__mid{flex:1;min-width:0}
.grep__top{display:flex;justify-content:space-between;align-items:baseline}
.grep__top b{font-family:var(--font-head)}
.grep__v{color:var(--cyan)}
.grep__v.won{color:#ffc043}
.ghist{padding:.6rem 0;border-bottom:1px solid rgba(124,198,255,.08)}
.ghist:last-child{border-bottom:0}
.ghist__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.3rem}
.ghist__top b{font-family:var(--font-head);font-size:.9rem}

/* create flow: type picker */
.gtypes{display:flex;flex-direction:column;gap:.55rem}
.gtypeopt{display:flex;align-items:center;gap:.7rem;text-align:left;width:100%;cursor:pointer;
  background:rgba(124,198,255,.04);border:1.5px solid;border-radius:14px;padding:.75rem .85rem;color:var(--text);transition:.15s}
.gtypeopt:active{transform:scale(.985)}
.gtypeopt__ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px}
.gtypeopt__txt{display:flex;flex-direction:column;min-width:0}
.gtypeopt__txt b{font-family:var(--font-head)}
.gcheck{display:flex;align-items:center;gap:.55rem;margin:.6rem 0;cursor:pointer}
.gcheck input{width:auto}

/* admin goals: type cards + insight + lists */
.gtypecard{padding:1rem 1.05rem}
.gtypestats{display:flex;gap:1.1rem;margin:.4rem 0 .5rem}
.gts{display:flex;flex-direction:column;line-height:1.15}
.gts b{font-family:var(--font-head);font-size:1.3rem}
.gts i{font-style:normal;font-size:.64rem;color:var(--muted-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.insightrow{display:flex;align-items:baseline;gap:.6rem;padding:.3rem 0}
.insightrow b{font-family:var(--font-head);font-size:1.15rem}
.impactrow{display:flex;align-items:center;gap:.6rem;padding:.6rem .3rem;border-bottom:1px solid rgba(124,198,255,.08);cursor:pointer;border-radius:10px}
.impactrow:hover{background:rgba(124,198,255,.05)}
.impactrow__mid{flex:1;min-width:0;display:flex;flex-direction:column}
.impactrow__mid b{font-family:var(--font-head);font-size:.9rem}
.impactrow__v{font-family:var(--font-head);font-size:1rem;flex:none}

/* sub-list titles inside goal/challenge/campaign sections */
.glist__t{font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted-2);margin:.7rem 0 .3rem}
.glist__t:first-of-type{margin-top:.2rem}

/* blitz banner (rep home, very top) */
.blitzbar{padding:.9rem 1rem;margin-bottom:.8rem;cursor:pointer;
  background:linear-gradient(150deg,#54280c,#2a1406);border:1.5px solid rgba(255,122,26,.6);
  box-shadow:0 0 24px rgba(255,122,26,.25),inset 0 1px 0 rgba(255,255,255,.08)}
.blitzbar__top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.3rem}
.blitzbar__t{display:inline-flex;align-items:center;gap:.35rem;font-size:.64rem;font-weight:800;letter-spacing:.14em;color:#ffb583}
.blitzbar__t .ic-svg{color:#ff7a1a}
.blitzbar__name{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-family:var(--font-head);font-weight:800;margin-bottom:.4rem}
.blitzbar__v{color:#ffb583;font-size:1.1rem}
.comprow{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid rgba(124,198,255,.08);cursor:pointer}
.comprow:last-child{border-bottom:0}
.comprow__info{flex:1;min-width:0;display:flex;flex-direction:column}
.comprow__info b{font-family:var(--font-head);font-size:.9rem}

/* standout numbers across the app */
.lead__price{color:var(--cyan)}
.lb__val b{color:var(--cyan)}
.dayd__rev{color:#9fd2ff}
.paycard__value{color:#bfe2ff}
.needfill__g b{font-size:1.05rem}
.goal__top span:last-child{font-family:var(--font-head);font-weight:700;color:#9fd2ff}

/* ---- mobile app frame ---- */
@media(max-width:899px){
  /* iOS zooms any focused input under 16px — keep them at 16 */
  input,select,textarea,.leadsearch__in{font-size:16px}
  /* never let the bottom bar cover the last rows of a list/table */
  .view{padding-bottom:calc(var(--bottomnav-h) + 2.6rem)}
  /* map runs under the footer so the bottom bar reads identical on every tab */
  body[data-route="map"] #map{bottom:0}
  body[data-route="map"] .map-loading{bottom:0}
  /* payments cards: hero full-width, two tidy tiles under it */
  .paycards{grid-template-columns:1fr 1fr;gap:.6rem}
  .paycard--hero{grid-column:1 / -1}
  .greet h1{font-size:1.35rem}
  .dash-hero__big{font-size:1.7rem}
  .drill__big{font-size:2rem}
  /* leads controls: stack so nothing overlaps on small screens */
  .leadcontrols{flex-direction:column;align-items:stretch;gap:.5rem}
  .leadcontrols .appbar__spacer{display:none}
  .leadstatus{width:100%}
  .sortbubbles{justify-content:flex-start}
  /* payments period card: stack the controls */
  .paysummary{flex-direction:column;align-items:flex-start;gap:.2rem}
  .plan__area{font-size:16px!important}

  /* FULL-BLEED MAP: top bar disappears, map runs under the notch,
     floating controls clear the camera via safe-area padding */
  body[data-route="map"] .appbar{display:none}
  body[data-route="map"] #map{top:0}
  body[data-route="map"] .map-loading{top:0}
  body[data-route="map"] .map-toggle{top:calc(var(--safe-top) + 12px)}
  body[data-route="map"] .drop-hint{top:calc(var(--safe-top) + 64px)}
  body[data-route="map"] #toasts{top:calc(var(--safe-top) + 12px)}
  body[data-route="map"] .maplibregl-ctrl-top-right{top:calc(var(--safe-top) + 54px)}
  body[data-route="map"] .reparea-banner,
  body[data-route="map"] .maphl-banner{top:calc(var(--safe-top) + 64px)}

  /* tighter fit-to-screen text */
  .view__head h1{font-size:1.32rem}
  .kpi__value{font-size:1.5rem}
}

/* =============================================================
   v18 — REFINED GLASS redesign layer
   One card language: 16px radius, single elevation scale, 8px
   spacing rhythm, thumb-first tap targets (>=44px), big quiet
   stat numbers with tabular digits. Plus the v18 components:
   quick-actions, activity bell, today strip, rep preview pill,
   offline bar, weekly recap, fill-day area chips, heat toggle.
============================================================= */
:root{
  --radius:16px; --radius-sm:13px;
  --elev-1:0 6px 22px rgba(2,10,22,.35);
  --elev-2:0 14px 38px rgba(2,10,22,.5);
  --glass:rgba(255,255,255,.055); --glass-border:rgba(124,198,255,.14);
}
.card{border-radius:var(--radius);box-shadow:var(--elev-1)}
.card--pad{padding:1.15rem 1.05rem}
.btn{min-height:44px}
.btn--sm{min-height:38px}
.chip{min-height:38px;display:inline-flex;align-items:center}
.kpi__value{font-size:1.5rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi__label{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2)}
.kpi__sub{font-size:.78rem}
.kpi{padding:.95rem .9rem;border-radius:var(--radius)}
.dash-hero__big,.paysum__big,.recap__big{font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.sec-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);
  font-weight:600;margin:1.15rem 0 .55rem}
.trackrow,.payday,.needfill,.lb__row,.qa__row{min-height:54px}
.payday{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.6rem .15rem;border-bottom:1px solid rgba(124,198,255,.08)}
.payday:last-child{border-bottom:0}
.payday--tap{cursor:pointer;border-radius:10px;transition:background .15s}
.payday--tap:active{background:var(--glass)}

/* ---- quick actions: floating + on the admin dashboard ---- */
.qafab{position:fixed;right:18px;bottom:calc(var(--bottomnav-h) + 18px);z-index:90;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:var(--grad);box-shadow:var(--shadow-glow);display:flex;align-items:center;justify-content:center;
  transition:transform .18s var(--ease)}
.qafab:active{transform:scale(.92)}
body:not([data-route="dashboard"]) .qafab{display:none}
.qa__row{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  padding:.7rem .8rem;margin-bottom:.55rem;color:var(--text);transition:background .15s,transform .15s}
.qa__row:active{transform:scale(.985);background:var(--glass-strong)}
.qa__row--act{border-color:rgba(74,168,240,.45);background:rgba(43,143,224,.1)}
.qa__ic{flex:0 0 38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(43,143,224,.16);color:var(--blue-300)}
.qa__mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.qa__mid b{font-size:.95rem}
.qa__mid .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa__arr{color:var(--muted-2);flex:0 0 auto;display:flex}

/* ---- activity bell ---- */
.bellbtn{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid var(--glass-border);
  background:var(--glass);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.bellbtn:active{background:var(--glass-strong)}
.bellbtn__dot{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;
  border-radius:999px;background:linear-gradient(120deg,#ff7a1a,#ef4444);color:#fff;
  font-size:.62rem;font-weight:700;font-style:normal;display:none;align-items:center;justify-content:center;
  border:2px solid var(--navy-850)}
.bellbtn__dot.on{display:flex}

/* ---- today strip: the rep numbers that matter, on every tab ---- */
.topstrip{display:flex;align-items:stretch;gap:0;width:100%;border:0;cursor:pointer;
  background:rgba(8,20,34,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--glass-border);padding:.45rem .6rem;color:var(--text)}
.topstrip__seg{flex:1;display:flex;flex-direction:column;align-items:center;gap:.05rem;min-width:0}
.topstrip__seg b{font-size:.95rem;font-variant-numeric:tabular-nums;line-height:1.1}
.topstrip__seg i{font-style:normal;font-size:.6rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2);white-space:nowrap}
.topstrip__seg+.topstrip__seg{border-left:1px solid rgba(124,198,255,.1)}
.topstrip__skel{display:block;width:100%;height:30px;border-radius:8px;background:var(--glass);
  animation:skel 1.1s ease-in-out infinite alternate}
body[data-route="map"] .topstrip{display:none}

/* ---- view-as-rep: floating return pill, rides every screen ---- */
.viewas-exit{display:none;position:fixed;right:0;top:42%;z-index:295;
  flex-direction:row;align-items:center;gap:.4rem;padding:.6rem .8rem .6rem .7rem;
  border:1.5px solid rgba(255,192,67,.55);border-right:0;border-radius:14px 0 0 14px;cursor:pointer;
  background:rgba(34,26,8,.92);color:#ffc043;font-weight:700;font-size:.78rem;
  box-shadow:0 10px 30px rgba(0,0,0,.45);backdrop-filter:blur(8px)}
body.viewas .viewas-exit{display:flex}
body.viewas .appbar{box-shadow:inset 0 -2px 0 rgba(255,192,67,.6)}

/* ---- offline banner ---- */
.offlinebar{display:none;position:fixed;left:50%;transform:translateX(-50%);
  top:calc(var(--topbar-h) + 8px);z-index:280;align-items:center;gap:.45rem;
  padding:.5rem .9rem;border-radius:999px;font-size:.78rem;font-weight:600;
  background:rgba(40,16,12,.94);border:1px solid rgba(239,68,68,.5);color:#ffb4a8;
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
body.offline .offlinebar{display:flex}

/* ---- weekly recap ---- */
.recap__hero{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:.15rem 0 .7rem}
.recap__big{font-family:var(--font-head);font-size:1.7rem;font-weight:700}
.deltachip{font-size:.72rem;font-weight:700;padding:.22rem .55rem;border-radius:999px}
.deltachip.up{background:rgba(34,197,94,.14);color:#5fe39a;border:1px solid rgba(34,197,94,.35)}
.deltachip.down{background:rgba(239,68,68,.12);color:#ff9b8f;border:1px solid rgba(239,68,68,.35)}
.recap__grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.recap__grid .gts,.recap__grid>span{display:flex;flex-direction:column;gap:.1rem;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:.6rem .7rem}
.recap__grid b{font-size:1.02rem;font-variant-numeric:tabular-nums}
.recap__grid i{font-style:normal;font-size:.68rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em}

/* ---- fill-day rows: area title chip ---- */
.needfill{display:flex;align-items:center;gap:.7rem;padding:.65rem .2rem;cursor:pointer;
  border-bottom:1px solid rgba(124,198,255,.08)}
.needfill:last-of-type{border-bottom:0}
.needfill__d{flex:1;min-width:0;display:flex;flex-direction:column;gap:.14rem}
.needfill__area{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:600;
  color:var(--blue-300);background:rgba(43,143,224,.12);border:1px solid rgba(74,168,240,.25);
  border-radius:999px;padding:.12rem .55rem;width:fit-content;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.needfill__area.off{color:var(--muted-2);background:var(--glass);border-color:var(--glass-border)}
.needfill__g{text-align:right;flex:0 0 auto}
.needfill__g b{font-variant-numeric:tabular-nums}

/* ---- goal cards: lean into each type''s identity ---- */
.gcard{position:relative;overflow:hidden}
.gcard::before{content:"";position:absolute;inset:0 auto 0 0;width:3.5px;background:var(--gc,var(--blue-400));opacity:.85}
.gcard .gbadge{font-size:.66rem;letter-spacing:.06em}

/* ---- map heat toggle shares the scope-pill styling ---- */
.map-toggle button.active{color:#fff}

/* ---- skeleton shimmer everywhere ---- */
@keyframes skel{from{opacity:.45}to{opacity:.95}}
.skel{animation:skel 1.1s ease-in-out infinite alternate}

/* breathing room so nothing crowds the thumb at the bottom */
.view{padding-bottom:calc(var(--bottomnav-h) + 84px)}
@media (prefers-reduced-motion:reduce){
  .skel,.topstrip__skel{animation:none}
  .btn,.qa__row,.qafab{transition:none}
}

/* tables (admin rep table, drills) scroll inside their card on phones
   instead of stretching the page sideways */
#view table{display:block;width:100%;max-width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch;font-variant-numeric:tabular-nums;white-space:nowrap}

/* =============================================================
   v19 � BREATHING ROOM + SECTION COLOR LANGUAGE
   Less per screen, more space around everything. Sections carry a
   consistent colour meaning across the whole app:
     green = money/pay   blue = schedule/routes   amber = needs attention
     purple = goals      cyan = stats/analytics
   (Goal CARDS keep their own per-type identity � leaderboard blue,
   incentive gold, competition red, blitz orange, personal purple.)
============================================================= */
:root{
  --sec-money:#22c55e; --sec-sched:#4aa8f0; --sec-attn:#f59e0b;
  --sec-goal:#a855f7; --sec-stat:#6fe3ff;
}
/* global de-crowding: cards breathe, sections separate clearly */
.view{padding-left:1.05rem;padding-right:1.05rem}
.view > .card,.view > div > .card{margin-bottom:1.15rem}
.card{padding:1.2rem 1.05rem}
.card--pad{padding:1.35rem 1.15rem}
.kpis{gap:.8rem}
.kpi{padding:1.05rem .95rem}
.sec-title{margin:1.35rem 0 .7rem}
.view__head{margin-bottom:1.1rem}
.view__head h1{font-size:1.42rem}

/* coloured section headers � the grouping cue */
.sechead{display:flex;align-items:center;gap:.45rem;margin:0 0 .75rem;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.sechead b{font-size:.74rem;letter-spacing:.09em}
.sechead--money{color:var(--sec-money)} .sechead--sched{color:var(--sec-sched)}
.sechead--attn{color:var(--sec-attn)}  .sechead--goal{color:var(--sec-goal)}
.sechead--stat{color:var(--sec-stat)}
/* matching card edge tint so the section reads as one block */
.sec--money{border-left:3px solid rgba(34,197,94,.55)}
.sec--sched{border-left:3px solid rgba(74,168,240,.55)}
.sec--attn{border-left:3px solid rgba(245,158,11,.55)}
.sec--goal{border-left:3px solid rgba(168,85,247,.55)}
.sec--stat{border-left:3px solid rgba(111,227,255,.5)}

/* ---- segmented bars (mode + admin schedule hub) ---- */
.segbar{display:flex;gap:.45rem;margin-bottom:.9rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:2px;scrollbar-width:none}
.segbar::-webkit-scrollbar{display:none}
.segbar__b{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:42px;padding:.5rem .95rem;border-radius:999px;cursor:pointer;font-weight:600;font-size:.84rem;
  color:var(--muted);background:var(--glass);border:1.5px solid var(--glass-border);transition:all .18s var(--ease)}
.segbar__b.on{color:#fff;background:rgba(43,143,224,.22);border-color:rgba(74,168,240,.6)}
.segbar--mode .segbar__b.on:last-child{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.55)}
.segbar--admin{position:sticky;top:var(--topbar-h);z-index:40;background:rgba(8,20,34,.92);
  backdrop-filter:blur(10px);margin:0 -1.05rem .9rem;padding:.55rem 1.05rem 6px;border-bottom:1px solid var(--glass-border)}

/* ---- calendar: past days greyed (still readable), availability colours ---- */
.cal-past,.cal-day--past{opacity:.42;filter:saturate(.55)}
.cal-past *,.cal-day--past *{pointer-events:none}
.cal-cell.cal-past{pointer-events:auto}      /* still tappable to VIEW */
.cal-period{font-family:var(--font-head);font-weight:700;font-size:1.02rem;margin:.15rem 0 .6rem}
.cal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.chips--tight{gap:.35rem}
.cal-nav--inline{margin:0}
.cal-grid--week .cal-cell{min-height:74px}
.cal-cell__av{display:flex;justify-content:center;margin-top:.15rem}
.av--yes{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.4)}
.av--yes .cal-cell__av{color:#5fe39a}
.av--yes.av--explicit{box-shadow:inset 0 0 0 1.5px rgba(34,197,94,.55)}
.av--no{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3)}
.av--no .cal-cell__av{color:#ff9b8f;opacity:.85}
.av--no:not(.av--explicit){background:rgba(255,255,255,.025);border-color:var(--glass-border)}
.av--no:not(.av--explicit) .cal-cell__av{color:var(--muted-2)}
.cal-legend{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.7rem}
.cal-legend__i{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--muted)}
.cal-legend .dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.dot--sched{background:var(--sec-sched)} .dot--fill{background:#ff7a1a}
.dot--past{background:#42536b} .dot--yes{background:var(--sec-money)}
.dot--no{background:var(--red)} .dot--def{background:rgba(34,197,94,.35)}
.availstate{padding:.55rem .8rem;border-radius:var(--radius-sm);font-weight:600;font-size:.88rem}
.availstate--yes{background:rgba(34,197,94,.12);color:#5fe39a;border:1px solid rgba(34,197,94,.35)}
.availstate--no{background:rgba(239,68,68,.1);color:#ff9b8f;border:1px solid rgba(239,68,68,.3)}
.btn--ok{background:linear-gradient(120deg,#34d77b,#22c55e);border:0;color:#06281a}
.dayfocus .routebox{margin-bottom:.6rem}

/* ---- knockers section ---- */
.knockrow{display:flex;align-items:center;gap:.75rem;padding:.7rem .15rem;
  border-bottom:1px solid rgba(124,198,255,.08)}
.knockrow:last-of-type{border-bottom:0}
.knockrow__mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.knockrow__who{font-weight:600;font-size:.9rem}
.knockrow__none{font-weight:700;font-size:.82rem;color:var(--sec-attn)}
.knockrow--need{background:rgba(245,158,11,.05);border-radius:12px;padding:.7rem .6rem;margin:.15rem 0;border-bottom:0}

/* availability chips on the who-can-work board */
.availchip--yes{box-shadow:inset 0 0 0 1.5px rgba(34,197,94,.5)}
.availchip--no{opacity:.55;text-decoration:line-through}
.av-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.66rem;font-weight:700;
  padding:.18rem .5rem;border-radius:999px;white-space:nowrap}
.av-badge--yes{background:rgba(34,197,94,.14);color:#5fe39a;border:1px solid rgba(34,197,94,.4)}
.av-badge--no{background:rgba(239,68,68,.12);color:#ff9b8f;border:1px solid rgba(239,68,68,.35)}
.assign-rep.blocked{opacity:.55}

/* leads: overdue chip stands out */
.chip--attn.active{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.6);color:#ffd089}

/* section colour application to known cards */
.goalstrip{border-left:3px solid rgba(168,85,247,.5)}
.dash-hero{border-left:3px solid rgba(74,168,240,.55)}
.payday__c b,.paysum__big{color:#5fe39a}

/* emphasize the numbers that matter */
.dash-hero__big{font-size:2rem}
.paysum__big{font-size:1.65rem}
.kpi--accent .kpi__value{font-size:1.7rem}

/* =============================================================
   v20 � DEEP GLOW: vivid type-coloured goal cards, glowing blue
   hero, hovering cards, softer top bar, neon key numbers.
============================================================= */
/* every data card floats a little above the background */
.card{background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.028) 55%);
  box-shadow:0 18px 44px rgba(2,8,20,.55),0 2px 10px rgba(2,8,20,.4)}
/* softer, less boxy top bar for everyone */
.appbar{border-bottom:0;border-radius:0 0 20px 20px;
  box-shadow:0 14px 34px rgba(2,8,20,.45)}
.topstrip{border-bottom:0;border-radius:0 0 16px 16px;margin-bottom:.35rem;
  box-shadow:0 10px 26px rgba(2,8,20,.35)}

/* ---- GOAL CARDS: deep glow � dark base flooded with the type colour ---- */
.gcard{position:relative;overflow:hidden;border-radius:18px;padding:1rem .95rem;
  border:1px solid color-mix(in srgb,var(--gc,#4aa8f0) 45%,transparent);
  background:
    radial-gradient(130% 110% at 18% 0%,color-mix(in srgb,var(--gc,#4aa8f0) 38%,transparent) 0%,transparent 58%),
    radial-gradient(120% 130% at 100% 100%,color-mix(in srgb,var(--gc,#4aa8f0) 22%,transparent) 0%,transparent 55%),
    linear-gradient(160deg,#0d2036,#081726);
  box-shadow:0 16px 40px color-mix(in srgb,var(--gc,#4aa8f0) 22%,rgba(2,8,20,.6))}
.gcard::before{display:none}
.gcard .gcard__name{font-size:1.02rem;font-weight:700;color:#fff}
.gcard .gcard__val{font-size:1.55rem;letter-spacing:-.01em}
/* the countdown: LARGE and in the contrast colour */
.gcard .gtimer,.gcard .goaltimer{font-size:1.05rem!important;font-weight:800;
  color:#fff!important;text-shadow:0 0 14px var(--gc,#4aa8f0);font-variant-numeric:tabular-nums}
.gcard .bar{background:rgba(0,0,0,.35)}
.gcard .bar__fill{background:linear-gradient(90deg,color-mix(in srgb,var(--gc) 80%,#fff),var(--gc,#4aa8f0))}

/* 2-up goals grid on the rep home */
.ggrid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:.85rem .1rem 0}
.ggrid .gcard{margin:0}
@media (max-width:359px){.ggrid{grid-template-columns:1fr}}

/* ---- HERO: glowing blue centerpiece ---- */
.home-hero--glow{border:1px solid rgba(74,168,240,.5);
  background:
    radial-gradient(140% 120% at 14% 0%,rgba(43,143,224,.5) 0%,transparent 60%),
    radial-gradient(130% 140% at 100% 100%,rgba(124,198,255,.25) 0%,transparent 55%),
    linear-gradient(160deg,#0e2845,#081a30);
  box-shadow:0 22px 55px rgba(43,143,224,.35),0 2px 10px rgba(2,8,20,.4)}
.home-hero--glow .home-hero__hood{font-size:1.45rem}
.home-hero--slim{padding:.9rem 1rem}
.home-hero--slim .home-hero__hood{font-size:1.05rem}
.home-hero__top{display:flex;align-items:center;margin-bottom:.35rem}

/* to-do button embedded in the hero � urgency colours */
.todobtn{display:inline-flex;align-items:center;gap:.4rem;min-height:38px;
  padding:.4rem .85rem;border-radius:999px;cursor:pointer;font-weight:700;font-size:.8rem;
  border:1.5px solid;transition:transform .15s var(--ease)}
.todobtn:active{transform:scale(.94)}
.todobtn--red{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.65);color:#ffb4a8;
  box-shadow:0 0 18px rgba(239,68,68,.35)}
.todobtn--amber{background:rgba(255,192,67,.16);border-color:rgba(255,192,67,.6);color:#ffd089;
  box-shadow:0 0 16px rgba(255,192,67,.3)}
.todobtn--green{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.55);color:#5fe39a}
.todoitem--red{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.08)}
.todoitem--red .qa__ic{background:rgba(239,68,68,.18);color:#ff9b8f}
.todoitem--amber{border-color:rgba(255,192,67,.5);background:rgba(255,192,67,.07)}
.todoitem--amber .qa__ic{background:rgba(255,192,67,.16);color:#ffd089}
.todoitem--green{border-color:rgba(34,197,94,.4)}
.todoitem--green .qa__ic{background:rgba(34,197,94,.15);color:#5fe39a}

/* ---- vivid key numbers ---- */
.kpi--green .kpi__value{color:#5fe39a;text-shadow:0 0 16px rgba(34,197,94,.35)}
.kpi--cyan .kpi__value{color:#6fe3ff;text-shadow:0 0 16px rgba(111,227,255,.3)}
.kpi--blue .kpi__value{color:#7cc6ff}
.kpi--amber .kpi__value{color:#ffd089;text-shadow:0 0 14px rgba(255,192,67,.3)}
.home-tiles .kpi__value{font-size:1.6rem}

/* ---- admin Days rows (merged fill + knockers) ---- */
.dayrow{padding:.75rem .35rem;border-bottom:1px solid rgba(124,198,255,.08);cursor:pointer;
  border-radius:12px;transition:background .15s}
.dayrow:active{background:var(--glass)}
.dayrow:last-of-type{border-bottom:0}
.dayrow__top{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.dayrow__date{font-size:.95rem}
.dayrow__gap{margin-left:auto;font-weight:700;font-size:.82rem;color:#ffd089;font-variant-numeric:tabular-nums}
.dayrow--full .dayrow__gap{color:#5fe39a}
.dayrow--full{opacity:.75}
.dayrow__sub{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.dayrow__kn{font-size:.8rem;font-weight:600;color:var(--blue-300)}
.dayrow__kn.bad{color:#ffd089;font-weight:800}
.dayrow--needk{background:rgba(245,158,11,.06);padding:.75rem .6rem;margin:.2rem 0;border-bottom:0}
.dayrow__sub .btn{margin-left:auto}
.sechead--avail{color:var(--sec-money)}
.av-ok{box-shadow:inset 0 0 0 1.5px rgba(34,197,94,.45)}

/* =============================================================
   v21 � sharpen: route-first hero spacing, toned glow, goal cards
   that FIT, bigger to-do, header dividers, leads pager.
============================================================= */
/* tone the neon back (goal type colours untouched) */
.kpi--green .kpi__value{text-shadow:0 0 8px rgba(34,197,94,.18)}
.kpi--cyan .kpi__value{text-shadow:0 0 8px rgba(111,227,255,.15)}
.kpi--amber .kpi__value{text-shadow:0 0 7px rgba(255,192,67,.15)}
.todobtn--red{box-shadow:0 0 10px rgba(239,68,68,.2)}
.todobtn--amber{box-shadow:0 0 9px rgba(255,192,67,.16)}
.home-hero--glow{box-shadow:0 18px 44px rgba(43,143,224,.22),0 2px 10px rgba(2,8,20,.4)}

/* header: floating with clear dividers between the strip numbers */
.appbar{box-shadow:0 16px 36px rgba(2,8,20,.6)}
.topstrip__seg+.topstrip__seg{border-left:1.5px solid rgba(124,198,255,.22)}

/* greeting: name pops blue, room above and below */
.home-greet{margin-top:.9rem;margin-bottom:1.25rem}
.greet-name{color:var(--blue-300);text-shadow:0 0 12px rgba(74,168,240,.35)}

/* to-do: bigger, obviously tappable */
.todobtn{min-height:46px;padding:.55rem 1.05rem;font-size:.88rem;gap:.5rem;
  box-shadow:0 6px 16px rgba(2,8,20,.35)}
.todobtn:active{transform:scale(.95)}

/* goal cards: everything fits the box on a phone */
.gcard{display:flex;flex-direction:column;gap:.4rem;min-width:0;padding:.9rem .85rem}
.gcard *{min-width:0}
.gcard .gcard__name{font-size:.92rem;line-height:1.25;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.gcard .gcard__val{font-size:1.3rem}
.gcard .gcard__nums{display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap}
.gcard .gcard__tgt{font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.gcard .gcard__top{display:flex;align-items:center;gap:.4rem}
/* the timer is the headline of the card */
.gcard .gtimer{font-size:1.12rem!important;letter-spacing:.02em;flex-shrink:0;
  background:rgba(0,0,0,.32);border-radius:9px;padding:.16rem .5rem}
.gcard .gtimer.gtimer--sm{font-size:.95rem!important}
.gcard .gbadge{max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcard .goal__reward--inline{max-width:100%;overflow:hidden}
.gcard .goal__reward--inline span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* more air between dashboard boxes */
.view > .card,.view > div > .card{margin-bottom:1.35rem}
.ggrid{gap:.9rem;margin:1rem .1rem 0}
.kpis{gap:.9rem}

/* leads pager */
.pager{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:.9rem 0 .3rem}
.pager__lbl{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.leadsize{max-width:118px}

/* =============================================================
   v22 � VS banner, avatars, greeting spacing
============================================================= */
.greet-name{margin-left:.3em}
.home-greet{margin-top:1.15rem;margin-bottom:1.4rem}
.home-greet + .home-hero,.home-greet ~ .home-hero{margin-top:.2rem}

/* head-to-head banner: each half in the rep's colour, narrow smooth merge */
.gcard--vs{grid-column:1/-1;padding:1rem .95rem .85rem;
  border:1px solid color-mix(in srgb,var(--ca,#4aa8f0) 40%,var(--cb,#ef4444) 40%);
  background:
    linear-gradient(95deg,
      color-mix(in srgb,var(--ca,#4aa8f0) 40%,transparent) 0%,
      color-mix(in srgb,var(--ca,#4aa8f0) 30%,transparent) 44%,
      color-mix(in srgb,var(--cb,#ef4444) 30%,transparent) 56%,
      color-mix(in srgb,var(--cb,#ef4444) 40%,transparent) 100%),
    linear-gradient(160deg,#0d2036,#081726);
  box-shadow:0 16px 40px rgba(2,8,20,.55)}
.vstimer{display:flex;justify-content:center;margin-bottom:.35rem}
.vsrow{display:flex;align-items:center;gap:.5rem}
.vsside{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.vsside--a{align-items:flex-start;text-align:left}
.vsside--b{align-items:flex-end;text-align:right}
.vsname{font-size:1rem;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.vsval{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
.vsmid{display:flex;align-items:center;gap:.15rem;flex:0 0 auto}
.vsx{font-size:.66rem;font-weight:900;letter-spacing:.08em;color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.4);border-radius:999px;padding:.18rem .4rem;z-index:1;margin:0 -.5rem}
.vsav{position:relative}
.vsav__a{width:44px;height:44px;font-size:.8rem;border:2.5px solid rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center}
.vsav__e{font-size:1.45rem;line-height:1}
.vsav--win .vsav__a{box-shadow:0 0 0 2.5px #ffc043,0 0 18px rgba(255,192,67,.55)}
.vsav__crown{position:absolute;top:-14px;left:50%;transform:translateX(-50%);color:#ffc043;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));z-index:2}
.vsbar{height:9px;border-radius:999px;margin-top:.65rem;overflow:hidden;
  background:color-mix(in srgb,var(--cb,#ef4444) 45%,rgba(0,0,0,.35))}
.vsbar i{display:block;height:100%;border-radius:999px 0 0 999px;
  background:color-mix(in srgb,var(--ca,#4aa8f0) 85%,#fff);transition:width .3s var(--ease)}
.vsmetric{margin-top:.4rem;text-align:center;font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}

/* avatar picker */
.avgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}
.avopt{font-size:1.6rem;padding:.55rem 0;border-radius:13px;cursor:pointer;
  background:var(--glass);border:1.5px solid var(--glass-border);transition:transform .14s var(--ease)}
.avopt:active{transform:scale(.9)}
.avopt.sel{border-color:var(--blue-400);box-shadow:0 0 0 2px rgba(74,168,240,.35)}

/* =============================================================
   v23 - readability + air, hero fade, battle VS, fill missions,
   streaks/records, live feed, shift HUD, leads date chips
============================================================= */

/* ---- AIR & READABILITY: bigger gaps, clearer hierarchy, brighter text ---- */
:root{--muted:#9db4cc;--muted-2:#7e96b0}
.view > .card,.view > div > .card{margin-bottom:1.7rem}
.card{padding:1.3rem 1.15rem}
.card--pad{padding:1.3rem 1.15rem}
.kpis{gap:1rem}
.ggrid{gap:1rem;margin:1.25rem .1rem 0}
.sec-title{margin-top:1.5rem;margin-bottom:.7rem;font-size:.78rem;letter-spacing:.1em;color:#b9cde2}
.sechead b{font-size:.82rem;letter-spacing:.09em;color:#c6d8ea}
.kpi__label{font-size:.7rem;letter-spacing:.07em;color:#8ea6bf}
.kpi__sub{font-size:.74rem}
.muted{color:var(--muted)}
.view__head{margin-bottom:1.2rem}
.lead-card{margin-bottom:1.05rem}
.payday,.dayrow,.knockrow,.comprow,.reqrow{padding-top:.65rem;padding-bottom:.65rem}
/* long lists render lazily - big perf win on phones */
.lead-card,.feedcard,.streakcard{content-visibility:auto;contain-intrinsic-size:140px}

/* ---- HERO FADE: the theme bleeds softly into the page instead of a hard
   edge right under the card ---- */
.home-hero,.dash-hero{position:relative}
.home-hero--glow{box-shadow:0 26px 70px rgba(43,143,224,.30),0 60px 110px rgba(43,143,224,.14),0 2px 10px rgba(2,8,20,.4)}
.dash-hero{box-shadow:0 26px 70px rgba(43,143,224,.22),0 60px 110px rgba(43,143,224,.10),0 2px 10px rgba(2,8,20,.4)}
body[data-route="home"] #view::before,
body[data-route="dashboard"] #view::before{
  content:"";position:absolute;left:0;right:0;top:0;height:420px;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 100% at 50% -20%,rgba(43,143,224,.20) 0%,rgba(43,143,224,.08) 45%,transparent 78%)}
#view{position:relative}

/* ---- GOAL CARDS: icon-only corner badge ---- */
.gbadge--ico{padding:.3rem;border-radius:10px;line-height:0}
.gbadge--ico svg{display:block}

/* ---- personal-goal placeholder slot ---- */
.gcard--ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  min-height:128px;cursor:pointer;text-align:center;color:#cfe0f2;
  background:linear-gradient(180deg,rgba(168,85,247,.10),rgba(168,85,247,.03));
  border:1.6px dashed color-mix(in srgb,var(--gc,#a855f7) 55%,transparent);
  border-radius:18px;transition:transform .14s var(--ease),border-color .14s}
.gcard--ph:active{transform:scale(.97)}
.gcard--ph b{font-size:.92rem}
.gcard--ph__plus{display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;
  color:var(--gc,#a855f7);background:color-mix(in srgb,var(--gc,#a855f7) 18%,transparent);
  border:1.5px solid color-mix(in srgb,var(--gc,#a855f7) 45%,transparent)}

/* ---- BATTLE VS banner: diagonal clash, smoke, pulsing emblem, stake plate ---- */
.gcard--war{overflow:hidden;background:linear-gradient(165deg,#0b1322,#05080f) !important;
  border:1px solid rgba(255,90,60,.35) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.65),0 0 34px rgba(255,80,40,.10) !important}
.gcard--war > *{position:relative;z-index:2}
.gcard--war .vssmoke,.gcard--war .vsclash{position:absolute;inset:0;z-index:0;pointer-events:none}
.vssmoke{background:
  radial-gradient(60% 50% at 18% 110%,rgba(255,120,40,.13),transparent 70%),
  radial-gradient(60% 50% at 82% 110%,rgba(255,60,60,.12),transparent 70%),
  radial-gradient(80% 60% at 50% -10%,rgba(255,255,255,.05),transparent 70%);
  animation:vssmoke 6s ease-in-out infinite alternate}
@keyframes vssmoke{from{opacity:.7;transform:translateY(0)}to{opacity:1;transform:translateY(-6px)}}
.vsclash__a,.vsclash__b,.vsclash__slash{position:absolute;top:0;bottom:0;display:block}
.vsclash__a{left:0;width:56%;clip-path:polygon(0 0,100% 0,82% 100%,0 100%);
  background:linear-gradient(115deg,color-mix(in srgb,var(--ca,#4aa8f0) 38%,transparent),color-mix(in srgb,var(--ca,#4aa8f0) 12%,transparent) 75%)}
.vsclash__b{right:0;width:56%;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
  background:linear-gradient(245deg,color-mix(in srgb,var(--cb,#ef4444) 38%,transparent),color-mix(in srgb,var(--cb,#ef4444) 12%,transparent) 75%)}
.vsclash__slash{left:50%;width:3px;transform:translateX(-50%) skewX(-14deg);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.85) 30%,rgba(255,170,60,.95) 55%,rgba(255,255,255,.85) 75%,transparent);
  filter:drop-shadow(0 0 8px rgba(255,150,60,.8));animation:vsslash 2.4s ease-in-out infinite}
@keyframes vsslash{0%,100%{opacity:.55}50%{opacity:1}}
.vsx--war{font-size:.78rem;padding:.26rem .5rem;color:#fff;
  background:linear-gradient(160deg,#3a0d0d,#1a0505);border:1px solid rgba(255,110,60,.7);
  text-shadow:0 0 10px rgba(255,120,40,.9);
  box-shadow:0 0 14px rgba(255,90,40,.55),inset 0 1px 0 rgba(255,255,255,.15);
  animation:vspulse 1.6s ease-in-out infinite}
@keyframes vspulse{0%,100%{box-shadow:0 0 10px rgba(255,90,40,.45),inset 0 1px 0 rgba(255,255,255,.15)}
  50%{box-shadow:0 0 24px rgba(255,90,40,.85),inset 0 1px 0 rgba(255,255,255,.15)}}
.vsside--lead .vsval{text-shadow:0 0 14px color-mix(in srgb,currentColor 80%,transparent),0 1px 8px rgba(0,0,0,.5)}
.vsside--lead .vsname{color:#ffe9b0}
.gcard--war .vsname{font-style:italic;font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:.92rem}
.vsstake{display:flex;flex-direction:column;align-items:center;gap:.05rem;margin:.5rem auto 0;
  padding:.4rem .95rem;width:fit-content;max-width:92%;text-align:center;border-radius:11px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(20,8,4,.55));
  border:1px solid rgba(255,170,60,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.45)}
.vsstake__t{font-size:.56rem;font-weight:900;letter-spacing:.18em;color:#ffb054}
.vsstake b{font-size:.86rem;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.gcard--war .vsbar{box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.gcard--war .vsmetric{color:rgba(255,255,255,.6)}

/* ---- HERO fill mission + team gaps ---- */
.hero-mission{margin-top:1rem;padding:.85rem .9rem .8rem;border-radius:15px;cursor:pointer;position:relative;
  background:linear-gradient(160deg,rgba(255,160,40,.13),rgba(255,120,30,.05));
  border:1px solid rgba(255,170,60,.4)}
.hero-mission:active{transform:scale(.99)}
.hero-mission__label{display:flex;align-items:center;gap:.4rem;font-size:.64rem;font-weight:900;
  letter-spacing:.12em;color:#ffb054}
.hero-mission__stats{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.5rem}
.hero-mission__stats .fillstat b{font-size:1.12rem}
.hero-mission__washers{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.55rem}
.hero-mission__need{font-size:.7rem;font-weight:800;color:#ffc985}
.hero-mission__more{position:absolute;top:.7rem;right:.8rem;display:inline-flex;align-items:center;gap:.25rem;
  font-size:.66rem;font-weight:700;color:rgba(255,255,255,.55)}
.hero-gaps{margin-top:.8rem;display:flex;flex-direction:column;gap:.45rem}
.hero-gap{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:12px;
  background:rgba(0,0,0,.22);border:1px solid rgba(124,198,255,.22)}
.hero-gap__txt{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:#cfe0f2;flex:1;min-width:0}
.hero-gap__txt b{color:#fff}
.hero-gap__btn{flex:0 0 auto;border-color:rgba(124,198,255,.5)}
.hero-gap__in{font-size:.72rem;font-weight:800;color:#7ff0c0;flex:0 0 auto}

/* fill-mission banner inside the assign popup */
.fillmission{display:flex;align-items:center;gap:.6rem;margin:.1rem 0 .7rem;padding:.6rem .75rem;border-radius:12px;
  background:linear-gradient(160deg,rgba(255,160,40,.16),rgba(255,120,30,.05));border:1px solid rgba(255,170,60,.45)}
.fillmission__ic{color:#ffb054;display:inline-flex}
.fillmission__txt{display:flex;flex-direction:column;min-width:0;flex:1}
.fillmission__txt b{font-size:.9rem}
.fillmission__txt span{font-size:.74rem;color:var(--muted)}
.fillmission__note{font-size:.6rem;font-weight:900;letter-spacing:.06em;color:#ffc985;text-align:right;max-width:86px;line-height:1.25}
.daypick__c.late{opacity:.38}
.daypick__c.late.on{opacity:.85;border-color:#ffb054}

/* ---- STREAKS & RECORDS ---- */
.streakgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.streak{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.75rem .8rem;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(124,198,255,.16)}
.streak__e{font-size:1.15rem;line-height:1}
.streak__v{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.streak__l{font-size:.68rem;color:var(--muted)}
.streak--hot{border-color:rgba(255,140,40,.55);background:linear-gradient(180deg,rgba(255,140,40,.13),rgba(255,140,40,.03))}
.streak--hot .streak__v{color:#ffc985;text-shadow:0 0 12px rgba(255,150,60,.5)}
.recordburst{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem;padding:.7rem .85rem;border-radius:14px;
  background:linear-gradient(120deg,rgba(255,192,67,.22),rgba(255,120,30,.10));
  border:1px solid rgba(255,192,67,.65);box-shadow:0 0 24px rgba(255,180,60,.25);
  animation:recpop .5s var(--ease)}
.recordburst__ic{font-size:1.5rem;animation:recbounce 1.1s ease-in-out infinite}
.recordburst b{display:block;font-size:.72rem;letter-spacing:.14em;color:#ffd98a}
.recordburst span{font-size:.86rem;color:#fff;font-weight:700}
@keyframes recpop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes recbounce{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-4px) rotate(6deg)}}

/* ---- LIVE FEED ---- */
.feedlive{margin-left:auto;display:inline-flex;align-items:center;gap:.32rem;font-size:.6rem;font-weight:900;
  letter-spacing:.14em;color:#7ff0c0}
.feedlive__dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;
  animation:feeddot 1.6s ease-in-out infinite}
@keyframes feeddot{0%,100%{opacity:1}50%{opacity:.35}}
.feedlist{display:flex;flex-direction:column;margin-top:.45rem}
.feedrow{display:flex;align-items:center;gap:.6rem;padding:.5rem .1rem;border-bottom:1px solid rgba(124,198,255,.08)}
.feedrow:last-child{border-bottom:0}
.feedrow__av{width:26px;height:26px;font-size:.58rem;flex:0 0 auto}
.feedrow__txt{flex:1;min-width:0;font-size:.84rem;color:#cfe0f2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feedrow__txt b{color:#fff}
.feedrow__ago{flex:0 0 auto;font-size:.68rem;color:var(--muted-2);font-variant-numeric:tabular-nums}
.feedrow--sold .feedrow__txt{color:#d9f3e3}
.feedrow--sold .feedrow__txt b{color:#7ff0c0}
.feedrow--hot .feedrow__txt b{color:#ffb054}

/* ---- SHIFT HUD (map) ---- */
.shifthud{position:fixed;left:12px;bottom:calc(var(--bottomnav-h) + 76px);z-index:55;display:flex;align-items:center}
.shifthud__start{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:999px;
  font-size:.78rem;font-weight:800;color:#fff;cursor:pointer;
  background:linear-gradient(160deg,#1b5183,#11304f);border:1px solid rgba(124,198,255,.55);
  box-shadow:0 8px 24px rgba(2,8,20,.55)}
.shifthud--on{gap:.65rem;padding:.45rem .7rem;border-radius:999px;
  background:rgba(5,12,22,.88);border:1px solid rgba(124,198,255,.4);box-shadow:0 8px 24px rgba(2,8,20,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.shifthud__dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;
  animation:feeddot 1.6s ease-in-out infinite;flex:0 0 auto}
.shifthud__seg{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.shifthud__seg b{font-size:.82rem;color:#fff;font-variant-numeric:tabular-nums}
.shifthud__seg i{font-style:normal;font-size:.56rem;color:var(--muted-2);letter-spacing:.05em}
.shifthud__seg.up b{color:#7ff0c0}.shifthud__seg.down b{color:#ffc985}
.shifthud__end{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  color:#fff;background:rgba(239,68,68,.25);border:1px solid rgba(239,68,68,.6);cursor:pointer;flex:0 0 auto}
.shiftsum__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}

/* ---- LEADS: labelled date chips + clearer cards ---- */
.lead__dates{display:flex;gap:.45rem;flex-wrap:wrap}
.datechip{display:inline-flex;align-items:center;gap:.34rem;padding:.3rem .6rem;border-radius:999px;
  font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums}
.datechip i{font-style:normal;font-weight:900;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-right:.1rem}
.datechip--wash{color:#9fd4ff;background:rgba(43,143,224,.16);border:1px solid rgba(74,168,240,.45)}
.datechip--sold{color:#8be8b8;background:rgba(34,197,94,.13);border:1px solid rgba(34,197,94,.4)}
.datechip--late{color:#ffb4a6;background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.5)}
.datechip--off{color:var(--muted-2);background:rgba(255,255,255,.04);border:1px dashed rgba(124,198,255,.25);
  font-size:.7rem;padding:.3rem .6rem;border-radius:999px}
.lead__name{font-size:1.02rem}
.lead__price{font-size:1.12rem;font-weight:800;color:#7cc6ff}
.lead__meta{color:var(--muted)}
.lead__datelab{display:flex;flex-direction:column;gap:.2rem}
.lead__datelab > span{font-size:.6rem;font-weight:900;letter-spacing:.1em;color:#8ea6bf;text-transform:uppercase}

/* ---- dayrow (admin Days to fill) polish ---- */
.dayrow__kn{font-size:.74rem}
.dayrow__gap{font-weight:800;font-variant-numeric:tabular-nums}
.dayrow--needk .dayrow__gap{color:#ffc985}
.dayrow--full .dayrow__gap{color:#7ff0c0}

/* calm it all down for users who ask for less motion */
@media (prefers-reduced-motion:reduce){
  .vssmoke,.vsclash__slash,.vsx--war,.recordburst__ic,.feedlive__dot,.shifthud__dot{animation:none}
}

/* =============================================================
   v24 - SOLID surfaces, tournaments + bracket, self-pick fill
   days, season podium, trophy case, mission ring, confetti
============================================================= */

/* ---- SOLID CARDS: the page glow stops bleeding through every box ---- */
.card,.card--pad{background:linear-gradient(165deg,#13294a 0%,#0d1d33 60%,#0b1a2e 100%);
  border:1px solid rgba(124,198,255,.17)}
.kpi{background:linear-gradient(180deg,#122742,#0d1c31);border:1px solid rgba(124,198,255,.15)}
.gcard{background:linear-gradient(180deg,#152b46,#0e2036)}
.modal{background:linear-gradient(180deg,#13294a,#0c1a2e)}
.modal__head{background:#13294a}
.paycard{background:linear-gradient(180deg,#122742,#0d1c31);border:1px solid rgba(124,198,255,.16)}
.lead-card{background:linear-gradient(165deg,#12273f,#0d1b2f)}
.streak,.goal,.payday,.homerow,.comprow,.reqrow{background:#0f2138}
.feedcard .feedrow{background:transparent}
.dayrow,.knockrow{background:#0f2138}
.kpis .kpi,.paycards .paycard{backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---- admin team-goal tiles: vivid, alive, no more grey soup ---- */
.goal--vivid{position:relative;border-radius:14px;padding:.8rem .85rem;border:1px solid color-mix(in srgb,var(--gsc,#4aa8f0) 38%,transparent);
  background:linear-gradient(165deg,color-mix(in srgb,var(--gsc,#4aa8f0) 16%,#0f2138),#0d1c31)}
.goal--vivid .goal__tag{background:color-mix(in srgb,var(--gsc,#4aa8f0) 26%,transparent);
  border:1px solid color-mix(in srgb,var(--gsc,#4aa8f0) 50%,transparent);color:#fff}
.goal--vivid .bar__fill{background:linear-gradient(90deg,color-mix(in srgb,var(--gsc,#4aa8f0) 70%,#fff),var(--gsc,#4aa8f0))}
.goal--vivid .goal__nums{display:flex;align-items:baseline;gap:.3rem;margin:.25rem 0 .35rem}
.goal--vivid .goal__cur{font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--gsc,#4aa8f0) 70%,#fff)}
.goal__pctchip{font-size:.7rem;font-weight:900;padding:.16rem .5rem;border-radius:999px;
  background:rgba(0,0,0,.3);border:1px solid rgba(124,198,255,.3);color:#cfe0f2;font-variant-numeric:tabular-nums}
.goal__pctchip.mid{color:#ffce80;border-color:rgba(255,192,67,.5)}
.goal__pctchip.hit{color:#7ff0c0;border-color:rgba(34,197,94,.6)}
.goal--hit{box-shadow:0 0 18px rgba(34,197,94,.18)}

/* ---- TOURNAMENT banner ---- */
.tourwrap{grid-column:1/-1;cursor:pointer}
.tourhead{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 .15rem .45rem}
.tourhead__tag{font-size:.6rem;font-weight:900;letter-spacing:.16em;color:#ffc043;
  background:rgba(255,192,67,.12);border:1px solid rgba(255,192,67,.55);padding:.2rem .5rem;border-radius:999px}
.tourhead__name{font-family:var(--font-head);font-weight:800;font-size:1.18rem;color:#fff;
  text-shadow:0 0 16px rgba(255,170,60,.35)}
.tourhead__prize{display:inline-flex;align-items:center;gap:.3rem;margin-left:auto;font-size:.72rem;font-weight:800;color:#ffd98a;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,192,67,.45);padding:.22rem .55rem;border-radius:999px}
.gcard--tour{border:1.5px solid rgba(255,180,60,.55) !important;padding:1.1rem 1rem 1rem;
  box-shadow:0 22px 60px rgba(0,0,0,.7),0 0 44px rgba(255,150,40,.16) !important}
.tour__roundbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.55rem}
.tour__round{font-size:.66rem;font-weight:900;letter-spacing:.14em;color:#ffb054}
.tour__upcoming{font-size:.7rem;font-weight:700;color:var(--muted)}
.tour__seed{font-size:.58rem;font-weight:800;letter-spacing:.05em;color:rgba(255,255,255,.5)}
.tour__note{margin-top:.5rem;text-align:center;font-size:.74rem;color:#ffd9a8}
.tour__dots{display:flex;align-items:center;gap:.32rem;margin-top:.6rem}
.tour__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25)}
.tour__dot.done{background:#ffc043;border-color:#ffc043}
.tour__dot.live{background:#ff5a3c;border-color:#ff5a3c;box-shadow:0 0 8px #ff5a3c;animation:feeddot 1.4s ease-in-out infinite}
.tour__dotlbl{margin-left:auto;font-size:.62rem;color:var(--muted-2);font-weight:700}
.tour__champ{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.4rem 0 .2rem}
.tour__champlbl{font-size:.6rem;font-weight:900;letter-spacing:.22em;color:#ffc043}
.tour__champav{width:54px;height:54px;font-size:1rem;box-shadow:0 0 0 3px #ffc043,0 0 26px rgba(255,192,67,.6)}
.tour__champname{font-family:var(--font-head);font-size:1.3rem;font-weight:800;color:#ffe9b0;letter-spacing:.04em}
.vsstake--pun{border-color:rgba(239,68,68,.55)}
.vsstake--pun .vsstake__t{color:#ff9d8a}

/* ---- BRACKET popup: war room ---- */
.bracketwrap{margin:0 -.2rem}
.bracket__stakes{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:.8rem}
.bracket__prize{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:900;color:#ffd98a;
  background:rgba(255,192,67,.1);border:1px solid rgba(255,192,67,.5);padding:.3rem .65rem;border-radius:999px}
.bracket__pun{font-size:.72rem;font-weight:800;color:#ffb4a6;background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.45);padding:.3rem .65rem;border-radius:999px}
.bracket{display:flex;gap:.7rem;overflow-x:auto;padding:.3rem .1rem .6rem;-webkit-overflow-scrolling:touch}
.bracket__col{flex:0 0 168px;display:flex;flex-direction:column;gap:.55rem;justify-content:center}
.bracket__col--live .bracket__rh b{color:#ff7a5c}
.bracket__rh{display:flex;flex-direction:column;gap:.05rem;margin-bottom:.15rem}
.bracket__rh b{font-size:.64rem;font-weight:900;letter-spacing:.14em;color:#ffb054}
.bracket__rh span{font-size:.6rem;color:var(--muted-2)}
.bracket__livechip{display:inline-block;width:fit-content;font-size:.54rem;font-weight:900;letter-spacing:.14em;color:#ff7a5c;
  border:1px solid rgba(255,90,60,.6);border-radius:999px;padding:.08rem .4rem;margin-top:.15rem;
  animation:feeddot 1.4s ease-in-out infinite}
.bmatch{position:relative;border-radius:12px;background:linear-gradient(165deg,#16213a,#0c1322);
  border:1px solid rgba(124,198,255,.2);padding:.4rem .5rem;cursor:pointer}
.bmatch--live{border-color:rgba(255,90,60,.65);box-shadow:0 0 14px rgba(255,90,60,.25)}
.bmatch--done{opacity:.92}
.bmatch--upcoming{opacity:.65;border-style:dashed}
.bmatch--void{opacity:.25;text-align:center;border-style:dashed;cursor:default}
.bmatch__side{display:flex;align-items:center;gap:.45rem;padding:.28rem .15rem;border-radius:8px;min-width:0}
.bmatch__side.win{background:linear-gradient(90deg,rgba(255,192,67,.16),transparent)}
.bmatch__side.you{outline:1.5px solid rgba(124,198,255,.55);outline-offset:-1.5px}
.bmatch__side.tbd{opacity:.5}
.bmatch__av{width:24px;height:24px;font-size:.52rem;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.bmatch__av--tbd{background:rgba(255,255,255,.08);color:var(--muted);font-weight:800}
.bmatch__n{flex:1;min-width:0;font-size:.8rem;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bmatch__side.win .bmatch__n{color:#ffe9b0}
.bmatch__v{font-size:.74rem;font-weight:800;font-variant-numeric:tabular-nums;color:#9fd4ff}
.bmatch__side.win .bmatch__v{color:#ffc043}
.bmatch__crown{color:#ffc043;display:inline-flex;flex:0 0 auto}
.bmatch__x{display:none;border-top:1px dashed rgba(124,198,255,.25);margin-top:.3rem;padding-top:.35rem;
  font-size:.62rem;color:var(--muted);flex-direction:column;gap:.2rem;align-items:flex-start}
.bmatch.open .bmatch__x{display:flex}
.bracket__col--champ{flex:0 0 150px}
.bracket__crownbox{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.9rem .5rem;border-radius:14px;
  background:linear-gradient(165deg,rgba(255,192,67,.16),rgba(255,120,30,.05));border:1.5px solid rgba(255,192,67,.6);
  box-shadow:0 0 26px rgba(255,180,60,.25)}
.bracket__crownbox--tbd{opacity:.5;border-style:dashed;box-shadow:none}
.bracket__bigcrown{color:#ffc043;filter:drop-shadow(0 2px 8px rgba(255,170,40,.6))}
.bracket__crownbox b{font-family:var(--font-head);color:#ffe9b0;letter-spacing:.04em}

/* ---- hall of fame + trophy case ---- */
.famerow{display:flex;align-items:center;gap:.6rem;padding:.55rem .2rem;border-bottom:1px solid rgba(124,198,255,.08);cursor:pointer}
.famerow:last-of-type{border-bottom:0}
.famerow__crown{color:#ffc043;display:inline-flex;flex:0 0 auto}
.famerow__mid{flex:1;min-width:0}
.famerow__mid b{display:block;font-size:.88rem;color:#fff}
.trophycase{display:flex;flex-direction:column;gap:.5rem}
.trophy{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;border-radius:13px;
  background:linear-gradient(165deg,rgba(255,192,67,.1),#0f2138);border:1px solid rgba(255,192,67,.4)}
.trophy--battle{background:linear-gradient(165deg,rgba(239,68,68,.09),#0f2138);border-color:rgba(239,68,68,.4)}
.trophy__e{font-size:1.3rem;line-height:1}
.trophy__mid{flex:1;min-width:0}
.trophy__mid b{display:block;font-size:.88rem;color:#fff}
.trophy__mid span{font-size:.72rem;color:var(--muted)}
.trophy__d{font-size:.68rem;color:var(--muted-2);font-variant-numeric:tabular-nums}

/* ---- season podium ---- */
.podiumcard{margin-bottom:1.2rem}
.podium__title{font-size:.68rem;font-weight:900;letter-spacing:.18em;color:#ffc043;margin-bottom:.7rem}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:.6rem}
.podium__b{flex:1;max-width:118px;display:flex;flex-direction:column;align-items:center;gap:.25rem;position:relative}
.podium__crown{color:#ffc043;filter:drop-shadow(0 2px 6px rgba(255,170,40,.7));margin-bottom:-.1rem}
.podium__av{width:44px;height:44px;font-size:.8rem;border:2px solid rgba(255,255,255,.7)}
.podium__b--1 .podium__av{width:54px;height:54px;box-shadow:0 0 0 2.5px #ffc043,0 0 20px rgba(255,192,67,.5)}
.podium__n{font-size:.82rem;color:#fff}
.podium__v{font-size:.78rem;font-weight:800;color:#9fd4ff;font-variant-numeric:tabular-nums}
.podium__b--1 .podium__v{color:#ffc043;font-size:.88rem}
.podium__base{width:100%;text-align:center;font-weight:900;letter-spacing:.1em;font-size:.7rem;border-radius:10px 10px 4px 4px;padding-top:.35rem}
.podium__b--1 .podium__base{height:52px;background:linear-gradient(180deg,#caa84a,#7d6322);color:#1b1405}
.podium__b--2 .podium__base{height:38px;background:linear-gradient(180deg,#aebdcd,#5d6b7c);color:#10161d}
.podium__b--3 .podium__base{height:30px;background:linear-gradient(180deg,#bf8254,#6e4525);color:#1c1006}
.podium__b--empty{visibility:hidden}

/* ---- rep self-pick fill day rows ---- */
.pickday{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;padding:.65rem .75rem;margin-bottom:.55rem;
  border-radius:13px;cursor:pointer;background:#0f2138;border:1px solid rgba(124,198,255,.22);color:inherit}
.pickday:active{transform:scale(.985)}
.pickday__d{display:flex;flex-direction:column;align-items:center;min-width:46px}
.pickday__d b{font-size:.8rem;color:#fff}
.pickday__d span{font-size:.62rem;color:var(--muted-2)}
.pickday__mid{flex:1;min-width:0}
.pickday__mid b{display:block;font-size:.92rem}
.pickday__go{display:inline-flex;color:var(--muted)}
.pickday--hot{border-color:rgba(239,68,68,.5);background:linear-gradient(165deg,rgba(239,68,68,.12),#0f2138)}
.pickday--hot .pickday__mid b{color:#ff9d8a}
.pickday--warm{border-color:rgba(255,170,60,.45);background:linear-gradient(165deg,rgba(255,160,40,.1),#0f2138)}
.pickday--warm .pickday__mid b{color:#ffc985}
.pickday--ok .pickday__mid b{color:#7ff0c0}

/* ---- mission progress ring (map) ---- */
.missionring{position:fixed;right:14px;bottom:calc(var(--bottomnav-h) + 158px);z-index:55;width:56px;height:56px;
  border-radius:50%;background:rgba(5,12,22,.88);border:1px solid rgba(255,170,60,.5);cursor:pointer;
  box-shadow:0 8px 24px rgba(2,8,20,.6);display:flex;align-items:center;justify-content:center;flex-direction:column}
.missionring svg{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);transform:rotate(-90deg)}
.missionring .mr-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:3.5}
.missionring .mr-fg{fill:none;stroke:#ffb054;stroke-width:3.5;stroke-linecap:round;transition:stroke-dashoffset .5s var(--ease)}
.missionring.done .mr-fg{stroke:#22c55e}
.missionring .mr-pct{font-size:.74rem;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.missionring .mr-lbl{font-size:.5rem;font-weight:800;letter-spacing:.08em;color:var(--muted-2);text-transform:uppercase}
.missionring.done{border-color:rgba(34,197,94,.6)}

/* ---- confetti ---- */
.sbfx{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
.sbfx i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:.95;
  animation:sbfall linear forwards}
@keyframes sbfall{
  0%{transform:translateY(-10px) rotate(0deg)}
  100%{transform:translateY(105vh) rotate(540deg);opacity:.7}}

@media (prefers-reduced-motion:reduce){
  .tour__dot.live,.bracket__livechip,.sbfx i{animation:none}
}