/* ============================================================
   Field General — Premium dark luxury theme
   Deep black/navy · Gold accents · Mobile-first
   ============================================================ */
:root{
  --bg:#0a120c;
  --bg2:#0d1710;
  --bg3:#122016;
  --card:#0f1a12;
  --card2:#142219;
  --line:rgba(201,164,92,.16);
  --line2:rgba(255,255,255,.08);
  --gold:#c9a45c;
  --gold2:#e8c87e;
  --gold-dim:rgba(201,164,92,.14);
  --leaf:#46b96f; --leaf2:#7bd89a; --leaf-dim:rgba(70,185,111,.13);
  --leaf-line:rgba(70,185,111,.28);
  --txt:#f4f6fa;
  --muted:#9aa3b5;
  --muted2:#6b7488;
  --blue:#5b9bf0;
  --green:#3fd68c;
  --red:#ff6b6b;
  --amber:#ffb454;
  --radius:16px;
  --tab-h:68px;
  --font-d:'Sora',system-ui,sans-serif;
  --font-b:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
button,[data-close-btn],.m-close{touch-action:manipulation;cursor:pointer}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--font-b);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(600px 300px at 50% -60px, rgba(201,164,92,.10), transparent 70%),
    radial-gradient(700px 420px at 12% 18%, rgba(70,185,111,.09), transparent 70%),
    radial-gradient(760px 520px at 88% 82%, rgba(47,143,82,.10), transparent 70%);
}
h1,h2,h3{font-family:var(--font-d);margin:0;letter-spacing:-.01em}
h1{font-size:1.65rem;font-weight:800}
h2{font-size:1.12rem;font-weight:700}
p{margin:0}
a{color:var(--blue);text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ---------- Layout ---------- */
#app{max-width:640px;margin:0 auto;min-height:100dvh;position:relative;z-index:1;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 16px)}
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;
  background:rgba(10,18,12,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line2);
}
.brand{display:flex;align-items:center;gap:10px;color:var(--txt)}
.brand img{width:34px;height:34px;border-radius:9px;box-shadow:0 0 14px rgba(201,164,92,.35)}
.brand span{font-family:var(--font-d);font-weight:800;font-size:1.15rem;letter-spacing:.01em}
.brand em{font-style:normal;color:var(--gold)}
#views{padding:18px 16px 8px}
.view{display:none;animation:fadeUp .28s ease}
.view.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Page heads ---------- */
.page-head{margin:6px 2px 16px}
.page-head.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.eyebrow{
  font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 4px;
  display:flex;align-items:center;gap:8px;
}
.eyebrow::after{content:"";height:1px;width:34px;background:linear-gradient(90deg,var(--gold),transparent)}
.sec-title{font-size:.95rem;margin:22px 2px 10px;color:var(--txt)}

/* ---------- Cards / stacks ---------- */
.card{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line2);border-radius:var(--radius);
  padding:16px;margin-bottom:14px;position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card h2{margin-bottom:10px}
.card-head h2{margin:0}
.stack{display:grid;gap:10px}
.link{background:none;border:none;color:var(--blue);font-weight:600;font-size:.85rem;padding:4px}

/* ---------- Stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media(max-width:480px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.stat{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line2);border-radius:14px;padding:12px 10px;text-align:center;
}
.stat b{display:block;font-family:var(--font-d);font-size:1.25rem;color:var(--gold2)}
.stat span{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* ---------- Job / entity rows ---------- */
.row-card{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line2);border-radius:14px;padding:13px 14px;
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;color:var(--txt);
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
button.row-card{cursor:pointer}
button.row-card:active{transform:scale(.985)}
.row-card:hover{border-color:var(--line)}
.row-main{flex:1;min-width:0}
.row-title{font-weight:700;font-size:.95rem;margin-bottom:2px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row-sub{color:var(--muted);font-size:.82rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.row-sub .addr{color:var(--blue);font-weight:600}
.row-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.money{font-family:var(--font-d);font-weight:700;color:var(--gold2);font-size:.95rem}

/* ---------- Status chips ---------- */
.chip{
  border:1px solid var(--line2);background:var(--bg3);color:var(--muted);
  border-radius:999px;padding:7px 14px;font-size:.8rem;font-weight:600;white-space:nowrap;
  transition:all .15s;
}
.chip.on{background:var(--gold-dim);border-color:var(--gold);color:var(--gold2)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.st{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;border:1px solid}
.st-scheduled{color:var(--blue);border-color:rgba(91,155,240,.4);background:rgba(91,155,240,.1)}
.st-in-progress{color:var(--amber);border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.1)}
.st-done{color:var(--green);border-color:rgba(63,214,140,.4);background:rgba(63,214,140,.1)}
.st-lead{color:#c9a45c;border-color:rgba(201,164,92,.45);background:rgba(201,164,92,.1)}
.st-quoted{color:#b48ce8;border-color:rgba(180,140,232,.4);background:rgba(180,140,232,.1)}
.st-completed{color:var(--green);border-color:rgba(63,214,140,.4);background:rgba(63,214,140,.1)}
.st-invoiced{color:#7dd3e0;border-color:rgba(125,211,224,.4);background:rgba(125,211,224,.1)}
.st-draft{color:var(--muted);border-color:var(--line2);background:var(--bg3)}
.st-sent{color:var(--blue);border-color:rgba(91,155,240,.4);background:rgba(91,155,240,.1)}
.st-approved{color:var(--green);border-color:rgba(63,214,140,.4);background:rgba(63,214,140,.1)}
.st-declined{color:var(--red);border-color:rgba(255,107,107,.4);background:rgba(255,107,107,.1)}
.st-unpaid{color:var(--amber);border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.1)}
.st-paid{color:var(--green);border-color:rgba(63,214,140,.4);background:rgba(63,214,140,.1)}
.st-overdue{color:var(--red);border-color:rgba(255,107,107,.4);background:rgba(255,107,107,.12)}
.demo-tag{font-size:.62rem;font-weight:800;letter-spacing:.08em;color:#0a0d13;
  background:var(--amber);border-radius:6px;padding:2px 7px}

/* ---------- Buttons ---------- */
.btn{
  border:none;border-radius:12px;padding:11px 18px;font-weight:700;font-size:.9rem;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s,box-shadow .15s,filter .15s;
}
.btn:active{transform:scale(.97)}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#14100a;
  box-shadow:0 4px 18px rgba(201,164,92,.35)}
.btn.gold:hover{filter:brightness(1.06)}
.btn.ghost{background:var(--bg3);color:var(--txt);border:1px solid var(--line2)}
.btn.danger{background:rgba(255,107,107,.12);color:var(--red);border:1px solid rgba(255,107,107,.35)}
.btn.warn{background:rgba(255,180,84,.1);color:var(--amber);border:1px solid rgba(255,180,84,.3)}
.btn.block{width:100%}
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1}
.icon-btn{
  background:var(--bg3);border:1px solid var(--line2);color:var(--txt);
  width:40px;height:40px;border-radius:12px;font-size:1.1rem;
  display:grid;place-items:center;
}
.dir-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(91,155,240,.12);border:1px solid rgba(91,155,240,.35);color:var(--blue);
  border-radius:10px;padding:7px 12px;font-size:.8rem;font-weight:700;
}
.dir-btn:active{transform:scale(.96)}

/* ---------- Quick actions ---------- */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
.qa{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line2);border-radius:14px;color:var(--txt);
  padding:14px 6px;font-size:.72rem;font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:transform .12s,border-color .15s;
}
.qa:active{transform:scale(.95)}
.qa span{font-size:1.35rem}

/* ---------- Forms ---------- */
.fld{display:block;margin-bottom:12px}
.fld>span{display:block;font-size:.75rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.fld input,.fld select,.fld textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;
  color:var(--txt);padding:12px 14px;font-size:.95rem;font-family:inherit;outline:none;
  transition:border-color .15s;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold)}
.fld textarea{resize:vertical;min-height:70px}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.search{
  width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;
  color:var(--txt);padding:12px 14px;font-size:.95rem;font-family:inherit;outline:none;
  margin-bottom:12px;
}
.search:focus{border-color:var(--gold)}

/* ---------- Line items ---------- */
.li-row{display:grid;grid-template-columns:1fr 64px 92px 34px;gap:8px;margin-bottom:8px;align-items:center}
.li-row input{background:var(--bg2);border:1px solid var(--line2);border-radius:10px;
  color:var(--txt);padding:10px;font-size:.88rem;font-family:inherit;width:100%;outline:none}
.li-row input:focus{border-color:var(--gold)}
.li-del{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.3);
  color:var(--red);border-radius:10px;height:40px;font-size:1rem}
.li-add{background:none;border:1px dashed var(--line);color:var(--gold);border-radius:10px;
  padding:10px;width:100%;font-weight:600;margin-bottom:12px}
.total-line{display:flex;justify-content:space-between;align-items:center;
  padding:10px 2px 0;font-family:var(--font-d);font-weight:800;font-size:1.15rem;color:var(--gold2)}

/* ---------- Schedule ---------- */
.week-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 14px;scrollbar-width:none}
.week-strip::-webkit-scrollbar{display:none}
.day{
  flex:0 0 62px;background:var(--bg3);border:1px solid var(--line2);border-radius:14px;
  padding:10px 4px;text-align:center;color:var(--muted);transition:all .15s;
}
.day b{display:block;font-family:var(--font-d);font-size:1.05rem;color:var(--txt)}
.day span{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em}
.day .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);margin:5px auto 0;display:none}
.day.has .dot{display:block}
.day.today{border-color:var(--blue)}
.day.sel{background:var(--gold-dim);border-color:var(--gold);color:var(--gold2)}
.day.sel b{color:var(--gold2)}

/* ---------- Tab bar ---------- */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  display:flex;background:rgba(10,18,12,.93);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line2);
  padding-bottom:env(safe-area-inset-bottom);
  max-width:640px;margin:0 auto;
}
.tabbar button{
  flex:1;background:none;border:none;color:var(--muted2);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 4px 8px;font-size:.62rem;font-weight:600;
  transition:color .15s;
}
.tabbar button span{font-size:1.35rem}
.tabbar button.on{color:var(--gold2)}
.tabbar button.on span{filter:drop-shadow(0 0 8px rgba(201,164,92,.6))}

/* ---------- Sheet (more menu) ---------- */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);
  display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s}
.sheet[hidden]{display:none}
.sheet-box{background:var(--card2);border:1px solid var(--line2);border-radius:20px 20px 0 0;
  width:100%;max-width:640px;padding:14px 16px calc(20px + env(safe-area-inset-bottom));
  display:grid;gap:8px;animation:slideUp .25s ease}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet-box button{
  background:var(--bg3);border:1px solid var(--line2);border-radius:12px;color:var(--txt);
  padding:14px;font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:12px;
}
.sheet-box button span{font-size:1.25rem}
.sheet-close{justify-content:center;color:var(--muted)}

/* ---------- Modal ---------- */
#modalRoot:empty{display:none}
.modal-ov{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.65);
  display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s}
.modal{
  background:var(--card2);border:1px solid var(--line);border-radius:20px 20px 0 0;
  width:100%;max-width:640px;max-height:92dvh;overflow-y:auto;
  padding:18px 18px calc(22px + env(safe-area-inset-bottom));
  animation:slideUp .25s ease;position:relative;
}
.modal::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-head h2{font-size:1.25rem}
.m-close{background:var(--bg3);border:1px solid var(--line2);color:var(--txt);
  width:36px;height:36px;border-radius:10px;font-size:1rem}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:.9rem;margin-bottom:14px}
.kv dt{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;padding-top:2px}
.kv dd{margin:0}
.detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.transcript{background:var(--bg2);border:1px solid var(--line2);border-radius:10px;
  padding:10px 12px;font-size:.82rem;color:var(--muted);max-height:150px;overflow-y:auto}

/* ---------- Toast ---------- */
#toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 18px);z-index:120;
  background:#1c2330;border:1px solid var(--gold);color:var(--txt);
  padding:12px 20px;border-radius:12px;font-weight:600;font-size:.88rem;
  box-shadow:0 8px 30px rgba(0,0,0,.5);animation:fadeUp .25s ease;max-width:90vw;text-align:center;
}
#toast[hidden]{display:none}

/* ---------- Map ---------- */
#mapEl{height:340px;border-radius:var(--radius);border:1px solid var(--line2);
  overflow:hidden;margin-bottom:10px;background:var(--bg2);z-index:1}
#mapEl .leaflet-container{font-family:var(--font-b)}
.hint{color:var(--muted2);font-size:.78rem;margin:0 2px 12px}
.leaflet-popup-content-wrapper{background:#1c2330;color:var(--txt);border:1px solid var(--line)}
.leaflet-popup-content{font-size:.82rem;line-height:1.4;margin:12px 14px}
.leaflet-popup-tip{background:#1c2330}
.map-pin-btn{display:inline-block;margin-top:8px;background:var(--gold);color:#14100a;
  font-weight:700;padding:7px 14px;border-radius:8px;font-size:.78rem}

/* ---------- Settings ---------- */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 6px}
.seg button{background:var(--bg3);border:1px solid var(--line2);color:var(--muted);
  border-radius:12px;padding:12px 6px;font-weight:700;font-size:.82rem}
.seg button.on{background:var(--gold-dim);border-color:var(--gold);color:var(--gold2)}
.muted{color:var(--muted);font-size:.88rem}
.muted.sm{font-size:.76rem;color:var(--muted2)}

/* ---------- Demo banner ---------- */
.demo-banner{
  background:rgba(255,180,84,.08);border:1px dashed rgba(255,180,84,.45);
  border-radius:14px;padding:12px 14px;margin-bottom:14px;font-size:.82rem;color:var(--amber);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.demo-banner button{background:rgba(255,180,84,.15);border:1px solid rgba(255,180,84,.4);
  color:var(--amber);border-radius:8px;padding:6px 12px;font-weight:700;font-size:.75rem}

/* ---------- Empty states ---------- */
.empty{text-align:center;padding:34px 16px;color:var(--muted2)}
.empty .big{font-size:2.4rem;display:block;margin-bottom:10px;opacity:.6}
.empty p{font-size:.88rem}

/* ---------- Utilities ---------- */
.mt{margin-top:14px}
.gold-text{color:var(--gold2)}
.tel-link{color:var(--blue);font-weight:600}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   FINAL NEXT-LEVEL PASS — $10K app feel
   Splash · Tactical brand · Staggered entrances · Premium detail
   ============================================================ */

/* ---------- Splash screen ---------- */
#splash{
  position:fixed;inset:0;z-index:200;background:#07090d;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease,visibility .5s;
}
#splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-inner{text-align:center;padding:20px;animation:splashIn .7s cubic-bezier(.2,.9,.3,1.1)}
@keyframes splashIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.splash-logo{
  width:150px;height:150px;border-radius:28px;
  animation:splashGlow 2s ease-in-out infinite;
}
@keyframes splashGlow{
  0%,100%{box-shadow:0 0 30px rgba(201,164,92,.4),0 0 80px rgba(201,164,92,.15)}
  50%{box-shadow:0 0 60px rgba(201,164,92,.7),0 0 120px rgba(201,164,92,.3)}
}
.splash-title{
  font-family:var(--font-d);font-weight:800;font-size:1.6rem;letter-spacing:.14em;
  margin-top:22px;color:var(--txt);
}
.splash-title em{font-style:normal;color:var(--gold);
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.splash-sub{
  font-size:.68rem;letter-spacing:.4em;color:var(--muted2);margin-top:8px;font-weight:700;
}
.splash-bar{
  width:180px;height:3px;background:rgba(201,164,92,.15);border-radius:2px;
  margin:26px auto 0;overflow:hidden;
}
.splash-bar span{
  display:block;height:100%;width:40%;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  animation:splashLoad 1.1s ease-in-out infinite;
}
@keyframes splashLoad{0%{transform:translateX(-100%)}100%{transform:translateX(450%)}}

/* ---------- Tactical brand accents ---------- */
/* Stencil-style eyebrow with chevrons */
.eyebrow::before{content:"»";color:var(--gold);opacity:.7;margin-right:2px;font-weight:800}

/* Corner brackets on cards — tactical HUD feel */
.card::after{
  content:"";position:absolute;top:8px;right:8px;width:18px;height:18px;
  border-top:2px solid rgba(201,164,92,.35);border-right:2px solid rgba(201,164,92,.35);
  border-radius:0 6px 0 0;pointer-events:none;
}

/* Gold gradient headings */
.page-head h1{
  background:linear-gradient(135deg,#fff 30%,var(--gold2) 70%,var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- Staggered entrance animations ---------- */
.stack>*{animation:cardIn .4s cubic-bezier(.2,.9,.3,1) backwards}
.stack>*:nth-child(1){animation-delay:.02s}
.stack>*:nth-child(2){animation-delay:.06s}
.stack>*:nth-child(3){animation-delay:.1s}
.stack>*:nth-child(4){animation-delay:.14s}
.stack>*:nth-child(5){animation-delay:.18s}
.stack>*:nth-child(6){animation-delay:.22s}
.stack>*:nth-child(n+7){animation-delay:.26s}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Stats pop in with bounce */
.stats-grid .stat{animation:statPop .45s cubic-bezier(.2,.9,.3,1.25) backwards}
.stats-grid .stat:nth-child(1){animation-delay:.05s}
.stats-grid .stat:nth-child(2){animation-delay:.1s}
.stats-grid .stat:nth-child(3){animation-delay:.15s}
.stats-grid .stat:nth-child(4){animation-delay:.2s}
@keyframes statPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}

/* Quick actions stagger */
.quick-grid .qa{animation:cardIn .35s ease backwards}
.quick-grid .qa:nth-child(1){animation-delay:.08s}
.quick-grid .qa:nth-child(2){animation-delay:.14s}
.quick-grid .qa:nth-child(3){animation-delay:.2s}
.quick-grid .qa:nth-child(4){animation-delay:.26s}
.quick-grid .qa:nth-child(5){animation-delay:.32s}
.quick-grid .qa:nth-child(6){animation-delay:.38s}

/* ---------- Enhanced header ---------- */
.topbar{
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 24px rgba(0,0,0,.4);
}
.topbar::after{
  content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent);
  opacity:.5;
}
.brand img{
  width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(201,164,92,.4);
}

/* ---------- Premium button glow ---------- */
.btn.gold{
  position:relative;overflow:hidden;
}
.btn.gold::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);animation:btnShine 4s ease-in-out infinite;
}
@keyframes btnShine{0%{left:-80%}55%,100%{left:180%}}

/* ---------- Tab bar premium ---------- */
.tabbar{
  border-top:1px solid var(--line);
  box-shadow:0 -4px 24px rgba(0,0,0,.5);
}
.tabbar button.on i{
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- Week strip premium ---------- */
.day.sel{
  box-shadow:0 0 16px rgba(201,164,92,.3);
  transform:translateY(-2px);
}
.day.today::after{
  content:"TODAY";display:block;font-size:.55rem;font-weight:800;letter-spacing:.1em;
  color:var(--blue);margin-top:2px;
}

/* ---------- Modal premium ---------- */
.modal{
  border:1px solid rgba(201,164,92,.25);
  box-shadow:0 -12px 60px rgba(0,0,0,.7);
}
.modal-head h2{
  background:linear-gradient(135deg,#fff,var(--gold2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- AI wizard premium ---------- */
.ai-preview-head h3{font-size:1.3rem}
.ai-opt{
  transition:all .2s cubic-bezier(.2,.9,.3,1.2);
}
.ai-opt:active{transform:scale(.95)}

/* ---------- Loading spinner ---------- */
.spinner{
  width:40px;height:40px;margin:20px auto;border-radius:50%;
  border:3px solid rgba(201,164,92,.2);border-top-color:var(--gold);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Map loading state ---------- */
#mapEl.loading::before{
  content:"";position:absolute;inset:0;z-index:500;
  background:rgba(10,18,12,.72) url('') center no-repeat;
}

/* ---------- Detail modal premium dividers ---------- */
.kv{
  background:var(--bg2);border:1px solid var(--line2);border-radius:12px;
  padding:14px;margin-bottom:14px;
}

/* ---------- Demo tag tactical ---------- */
.demo-tag{
  font-family:var(--font-d);letter-spacing:.1em;
  border:1px solid rgba(0,0,0,.3);
}

/* ---------- Search focus glow ---------- */
.search:focus,.fld input:focus,.fld select:focus,.fld textarea:focus{
  box-shadow:0 0 0 3px rgba(201,164,92,.15);
}

/* ---------- Reduced motion for new animations ---------- */
@media(prefers-reduced-motion:reduce){
  #splash,.splash-inner,.splash-logo,.splash-bar span,
  .stack>*,.stats-grid .stat,.quick-grid .qa,.btn.gold::after{animation:none!important}
  #splash.hide{transition:none}
}

/* ---------- Desktop polish ---------- */
@media(min-width:700px){
  .modal-ov{align-items:center;padding:20px}
  .modal{border-radius:20px;max-height:88dvh}
  .sheet{align-items:center;padding:20px}
  .sheet-box{border-radius:20px;padding-bottom:20px}
  h1{font-size:1.9rem}
}

/* ---------- AI quote generator ---------- */
.ai-btn{background:linear-gradient(135deg,#3b2a6e,#1e4d8f);color:#fff;border:1px solid rgba(150,120,255,.4);
  box-shadow:0 0 18px rgba(120,90,255,.25)}
.ai-btn:hover{filter:brightness(1.12);box-shadow:0 0 26px rgba(120,90,255,.4)}
.ai-steps{display:flex;gap:8px;justify-content:center;margin-bottom:18px}
.ai-dot{width:10px;height:10px;border-radius:50%;background:var(--line2);transition:all .3s}
.ai-dot.on{background:linear-gradient(135deg,var(--gold2),var(--gold));box-shadow:0 0 10px rgba(201,164,92,.6)}
.ai-opts{display:flex;flex-wrap:wrap;gap:8px}
.ai-opts.col{flex-direction:column}
.ai-opt{background:var(--bg3);border:1px solid var(--line2);border-radius:12px;padding:10px 14px;
  color:var(--txt);font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s}
.ai-opt.on{background:var(--gold-dim);border-color:var(--gold);color:var(--gold2);
  box-shadow:0 0 12px rgba(201,164,92,.3)}
.ai-hint{background:rgba(91,155,240,.08);border:1px solid rgba(91,155,240,.25);border-radius:10px;
  padding:10px 12px;font-size:.82rem;color:var(--blue);margin-top:10px}
.ai-note{background:rgba(201,164,92,.08);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
  padding:8px 12px;font-size:.82rem;color:var(--muted);margin:8px 0}
.ai-confidence{background:rgba(63,214,140,.08);border:1px solid rgba(63,214,140,.3);border-radius:10px;
  padding:10px 12px;font-size:.82rem;color:var(--green);margin:12px 0;font-weight:600}
.ai-preview-head h3{color:var(--gold2);margin-bottom:4px}
.ai-preview-head{margin-bottom:14px}

/* ---------- MAX UPGRADES: premium polish ---------- */

/* Animated logo glow */
.brand img{animation:logoGlow 3s ease-in-out infinite}
@keyframes logoGlow{0%,100%{box-shadow:0 0 14px rgba(201,164,92,.35)}50%{box-shadow:0 0 26px rgba(201,164,92,.65)}}

/* Modal slide-up animation */
.modal-ov{animation:fadeIn .22s ease}
.modal{animation:slideUp .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Sheet slide-up */
.sheet:not([hidden]) .sheet-box{animation:slideUp .3s cubic-bezier(.2,.9,.3,1.15)}

/* Tab bar active glow */
.tabbar button.on{color:var(--gold2)}
.tabbar button.on span{filter:drop-shadow(0 0 8px rgba(201,164,92,.7))}

/* Stat cards shimmer */
.stat{position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(201,164,92,.12),transparent);
  transform:skewX(-18deg);animation:statShine 5s ease-in-out infinite}
@keyframes statShine{0%{left:-80%}60%,100%{left:160%}}

/* Row card press feedback */
.row-card{transition:transform .15s,border-color .2s,box-shadow .2s}
.row-card:active{transform:scale(.98)}

/* Gold divider between views */
.view{position:relative}

/* Toast slide */
#toast{animation:toastIn .25s ease}
@keyframes toastIn{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Demo banner pulse */
.demo-banner{animation:demoPulse 2.5s ease-in-out infinite}
@keyframes demoPulse{0%,100%{border-color:rgba(255,180,84,.3)}50%{border-color:rgba(255,180,84,.6)}}

/* AI button glow pulse */
.ai-btn{animation:aiPulse 2s ease-in-out infinite}
@keyframes aiPulse{0%,100%{box-shadow:0 0 18px rgba(120,90,255,.25)}50%{box-shadow:0 0 30px rgba(120,90,255,.5)}}

/* Section headers with gold accent */
.sec-title{position:relative;padding-left:12px}
.sec-title::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold2),var(--gold))}

/* Improved empty states */
.empty{padding:40px 20px;text-align:center}
.empty .big{font-size:3rem;display:block;margin-bottom:12px;filter:drop-shadow(0 4px 12px rgba(201,164,92,.3))}

/* Money display glow */
.money{text-shadow:0 0 12px rgba(201,164,92,.25)}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .brand img,.stat::after,.demo-banner,.ai-btn{animation:none}
  .modal,.sheet:not([hidden]) .sheet-box{animation:none}
}

/* Install card */
.install-steps h3{font-size:.95rem;margin:16px 0 8px;color:var(--gold)}
.install-steps h3:first-child{margin-top:12px}
.install-steps ol{margin:0 0 4px;padding-left:22px;color:#c8cdd6;font-size:.88rem;line-height:1.7}
.install-steps ol li{margin-bottom:4px}
.install-steps strong{color:#fff}

/* ============================================================
   NEXT LEVEL PASS 2 — Dashboard viz · Light mode · Splash FX
   ============================================================ */

/* ---------- Splash: particle burst + rotating ring + scan ---------- */
.splash-inner{position:relative;z-index:2}
.splash-logo-wrap{position:relative;width:170px;height:170px;margin:0 auto}
.splash-logo{width:150px;height:150px;border-radius:28px;position:absolute;top:10px;left:10px;
  animation:splashGlow 2s ease-in-out infinite}
.splash-ring{
  position:absolute;inset:-6px;border-radius:36px;pointer-events:none;
  border:2px dashed rgba(201,164,92,.45);
  animation:ringSpin 14s linear infinite;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.splash-fx{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.spark{
  position:absolute;left:50%;top:52%;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#ffe9b0,var(--gold) 60%,transparent 70%);
  opacity:0;animation:sparkFly 2.6s ease-out infinite;
}
.spark.s1{--tx:-130px;--ty:-110px;animation-delay:0s}
.spark.s2{--tx:120px;--ty:-90px;animation-delay:.3s}
.spark.s3{--tx:-100px;--ty:100px;animation-delay:.6s}
.spark.s4{--tx:140px;--ty:80px;animation-delay:.9s}
.spark.s5{--tx:-60px;--ty:-150px;animation-delay:1.2s}
.spark.s6{--tx:70px;--ty:140px;animation-delay:1.5s}
.spark.s7{--tx:-150px;--ty:10px;animation-delay:1.8s}
.spark.s8{--tx:150px;--ty:-20px;animation-delay:2.1s}
@keyframes sparkFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1.3)}
}
.splash-scan{
  position:absolute;left:0;right:0;top:-20%;height:120px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(201,164,92,.09),transparent);
  animation:scanDrop 3.2s ease-in-out infinite;
}
@keyframes scanDrop{0%{top:-20%}60%,100%{top:110%}}

/* ---------- Dashboard hero ---------- */
.dash-hero{display:flex;align-items:center;gap:16px;padding:18px}
.dash-hero::after{display:none}
.dash-hero-main{flex:1;min-width:0}
.dash-hero .eyebrow{margin-bottom:6px}
.dash-hero h1{font-size:1.5rem;line-height:1.15}
.dash-sub{color:var(--muted);font-size:.85rem;margin-top:6px}
.dash-sub b{color:var(--gold2)}
.dash-ring{flex-shrink:0;width:96px;height:96px;position:relative}
.dash-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.dash-ring .ring-bg{fill:none;stroke:rgba(201,164,92,.15);stroke-width:9}
.dash-ring .ring-fg{fill:none;stroke:url(#ringGrad);stroke-width:9;stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.2,.9,.3,1)}
.dash-ring .ring-label{position:absolute;inset:0;display:grid;place-items:center;
  text-align:center;font-family:var(--font-d)}
.dash-ring .ring-label b{display:block;font-size:1.05rem;color:var(--gold2);line-height:1}
.dash-ring .ring-label span{font-size:.55rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* ---------- Revenue chart ---------- */
.chart-card{padding-bottom:10px}
.rev-chart{display:flex;align-items:flex-end;gap:8px;height:120px;padding:6px 2px 0}
.rev-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-width:0;height:100%}
.rev-bar i{
  display:block;width:100%;max-width:34px;border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  box-shadow:0 0 12px rgba(201,164,92,.25);
  animation:barGrow .6s cubic-bezier(.2,.9,.3,1.2) backwards;min-height:4px;
}
.rev-bar.today i{background:linear-gradient(180deg,#fff,var(--gold2));box-shadow:0 0 16px rgba(201,164,92,.5)}
.rev-bar span{font-size:.6rem;color:var(--muted2);text-transform:uppercase;letter-spacing:.05em}
.rev-bar.zero i{background:rgba(201,164,92,.12);box-shadow:none}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- Stat cards: icon + richer ---------- */
.stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px}
.stat .ico{font-size:1.15rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(201,164,92,.3))}
.stat b{font-size:1.15rem}
.stat .delta{font-size:.62rem;color:var(--green);font-weight:700}

/* ---------- Pull-to-refresh indicator ---------- */
.ptr{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:0;overflow:hidden;opacity:0;transition:height .25s,opacity .25s;
  color:var(--gold2);font-size:.82rem;font-weight:700;
}
.ptr.show{height:52px;opacity:1}
.spinner.sm{width:22px;height:22px;margin:0;border-width:2.5px}

/* ---------- Empty states: gorilla branding ---------- */
.empty .gorilla{width:64px;height:64px;border-radius:18px;margin:0 auto 12px;display:block;
  box-shadow:0 6px 24px rgba(201,164,92,.3);border:1px solid rgba(201,164,92,.3)}

/* ---------- Press feedback: expensive taps ---------- */
.btn,.qa,.chip,.day,.tabbar button,.icon-btn,.seg button,.ai-opt,.dir-btn,.li-del{
  -webkit-user-select:none;user-select:none;
}
.qa:active{border-color:var(--gold);box-shadow:0 0 18px rgba(201,164,92,.3)}
.chip:active{transform:scale(.94)}
.day:active{transform:scale(.92)}
.tabbar button:active{transform:scale(.9)}
.icon-btn:active{transform:scale(.9);border-color:var(--gold)}
.seg button:active{transform:scale(.96)}
.dir-btn{transition:transform .12s,box-shadow .15s}
.dir-btn:active{box-shadow:0 0 14px rgba(91,155,240,.4)}
.row-card{position:relative;overflow:hidden}
.row-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(400px 60px at 50% 0,rgba(201,164,92,.14),transparent 70%);
  transition:opacity .2s;
}
.row-card:active::after{opacity:1}

/* ---------- Typography polish ---------- */
.page-head h1{font-size:1.75rem}
.card-head h2{font-size:1.05rem}
.row-title{font-size:.98rem}
h1{letter-spacing:-.02em}
.sec-title{font-size:1rem;font-weight:700}

/* ============================================================
   LIGHT MODE
   ============================================================ */
html[data-theme="light"]{
  --bg:#f4f1ea;--bg2:#ffffff;--bg3:#ece7db;
  --card:#ffffff;--card2:#faf7f0;
  --line:rgba(160,120,40,.28);--line2:rgba(60,50,30,.14);
  --gold:#a67c2e;--gold2:#8a641f;--gold-dim:rgba(166,124,46,.14);
  --txt:#1d1a13;--muted:#6d6350;--muted2:#9a8f78;
  --blue:#1f6fd6;--green:#1d9e5e;--red:#d64545;--amber:#c77f1a;
}
html[data-theme="light"] body::before{
  background:
    radial-gradient(600px 300px at 50% -60px, rgba(166,124,46,.12), transparent 70%),
    radial-gradient(500px 260px at 90% 10%, rgba(31,111,214,.07), transparent 70%);
}
html[data-theme="light"] .topbar{background:rgba(244,241,234,.88)}
html[data-theme="light"] .tabbar{background:rgba(244,241,234,.94)}
html[data-theme="light"] .card{background:linear-gradient(180deg,#fffdf8,#f7f3e9);
  box-shadow:0 2px 14px rgba(120,95,40,.08)}
html[data-theme="light"] .stat,
html[data-theme="light"] .row-card,
html[data-theme="light"] .qa{background:linear-gradient(180deg,#fffdf8,#f7f3e9);
  box-shadow:0 2px 10px rgba(120,95,40,.07)}
html[data-theme="light"] .page-head h1,
html[data-theme="light"] .modal-head h2,
html[data-theme="light"] .tabbar button.on i{
  background:linear-gradient(135deg,#3a2f18 20%,var(--gold2) 60%,var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
html[data-theme="light"] .splash-title em{
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
html[data-theme="light"] #toast{background:#fffdf8;border-color:var(--gold);color:#1d1a13;
  box-shadow:0 8px 30px rgba(120,95,40,.25)}
html[data-theme="light"] .leaflet-popup-content-wrapper{background:#fffdf8;color:#1d1a13}
html[data-theme="light"] .leaflet-popup-content{color:#1d1a13}
html[data-theme="light"] .leaflet-popup-tip{background:#fffdf8}
html[data-theme="light"] .map-pin-btn{color:#fff}
html[data-theme="light"] .install-steps ol{color:#6d6350}
html[data-theme="light"] .install-steps strong{color:#1d1a13}
html[data-theme="light"] .demo-tag{color:#fff}
html[data-theme="light"] .btn.gold{color:#fff}
html[data-theme="light"] #splash{background:#f4f1ea}
html[data-theme="light"] .splash-title{color:#1d1a13}
html[data-theme="light"] .transcript{background:#f7f3e9;color:#6d6350}
html[data-theme="light"] .modal{background:#fffdf8}
html[data-theme="light"] .sheet-box{background:#fffdf8}
html[data-theme="light"] .kv{background:#f7f3e9}
html[data-theme="light"] .ai-hint{color:#1f6fd6}
html[data-theme="light"] .money{color:var(--gold2)}
html[data-theme="light"] .dash-ring .ring-bg{stroke:rgba(166,124,46,.18)}

/* ---------- Reduced motion: new animations ---------- */
@media(prefers-reduced-motion:reduce){
  .splash-ring,.spark,.splash-scan,.rev-bar i,.dash-ring .ring-fg{animation:none!important}
}

/* ---------- Crew / Team ---------- */
.crew-checks{display:grid;gap:8px;margin:2px 0 6px}
.crew-check{display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--bg2);border:1px solid var(--line2);border-radius:12px;cursor:pointer;
  transition:border-color .15s,background .15s,transform .1s;touch-action:manipulation}
.crew-check:active{transform:scale(.985)}
.crew-check input{position:absolute;opacity:0;pointer-events:none}
.crew-check.on{border-color:var(--gold);background:var(--gold-dim);
  box-shadow:0 0 0 1px var(--gold),0 4px 14px rgba(201,164,92,.15)}
.crew-av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:700;font-size:1rem;color:#0a0d13;
  background:linear-gradient(135deg,var(--gold2),var(--gold))}
.crew-av.sm{width:28px;height:28px;font-size:.85rem;display:inline-flex;vertical-align:-7px;margin-right:6px}
.crew-meta{display:flex;flex-direction:column;line-height:1.25}
.crew-meta b{font-size:.92rem}
.crew-meta i{font-style:normal;font-size:.75rem;color:var(--muted)}
.crew-empty{padding:12px;border:1px dashed var(--line2);border-radius:12px;color:var(--muted);font-size:.88rem;text-align:center}
.crew-chip{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.72rem;font-weight:600;
  background:var(--gold-dim);border:1px solid var(--line);color:var(--gold2);margin:1px 2px;white-space:nowrap}
.crew-chip.lg{font-size:.8rem;padding:4px 12px}
.crew-line{margin-top:5px}
.tel-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;
  background:var(--gold-dim);border:1px solid var(--line);font-size:1.05rem;text-decoration:none;touch-action:manipulation}
.icon-btn.sm{width:36px;height:36px;font-size:.95rem}
html[data-theme="light"] .crew-check{background:#f4efe4}
html[data-theme="light"] .crew-check.on{background:#f7ecd4}
html[data-theme="light"] .crew-chip{color:#8a6a1f}

/* ---------- Dashboard crew strip ---------- */
.crew-today{margin-bottom:12px;padding:10px 12px;border-radius:12px;
  background:linear-gradient(135deg,rgba(201,164,92,.12),rgba(201,164,92,.04));
  border:1px solid var(--line)}
.crew-today-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold2);font-weight:700}
.crew-today-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.crew-av.xs{width:20px;height:20px;font-size:.65rem;display:inline-flex;vertical-align:-4px;margin-right:4px}

/* ---------- Richer job cards: status accent rail ---------- */
.row-card{position:relative;overflow:hidden}
.row-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));opacity:.85}
.row-card:has(.st-done)::after,.row-card:has(.st-completed)::after{background:linear-gradient(180deg,var(--green),rgba(63,214,140,.4))}
.row-card:has(.st-in-progress)::after{background:linear-gradient(180deg,var(--blue),rgba(91,155,240,.4))}
.row-card:has(.st-lead)::after{background:linear-gradient(180deg,var(--gold2),rgba(201,164,92,.5))}
.row-card:has(.st-quoted)::after{background:linear-gradient(180deg,#b48ce8,rgba(180,140,232,.4))}
.row-card:has(.st-paid)::after{background:linear-gradient(180deg,#2ecc71,rgba(46,204,113,.35))}

/* ---------- Pipeline kanban ---------- */
.pipe-scroll{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 18px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.pipe-col{flex:0 0 248px;scroll-snap-align:start;background:var(--bg2);border:1px solid var(--line2);
  border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;max-height:62dvh;overflow-y:auto}
.pipe-col-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;
  background:var(--bg2);padding:4px 2px 8px;z-index:1}
.pipe-col-head h3{font-size:.82rem;margin:0;text-transform:uppercase;letter-spacing:.06em}
.pipe-count{font-size:.72rem;background:var(--bg3);border:1px solid var(--line2);border-radius:99px;
  padding:1px 9px;color:var(--muted)}
.pipe-card{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;
  text-align:left;width:100%;touch-action:manipulation}
.pipe-card:active{transform:scale(.98)}
.pipe-card .pc-title{font-weight:600;font-size:.88rem;margin-bottom:4px}
.pipe-card .pc-sub{font-size:.75rem;color:var(--muted);line-height:1.5}
.pipe-card .pc-crew{margin-top:6px}
.pipe-move{display:flex;gap:6px;margin-top:8px}
.pipe-move button{flex:1;padding:7px 4px;border-radius:9px;font-size:.75rem;font-weight:600;
  background:var(--bg3);border:1px solid var(--line2);color:var(--txt);touch-action:manipulation}
.pipe-move button.fwd{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#0a0d13;border:none}
.pipe-empty{font-size:.78rem;color:var(--muted2);text-align:center;padding:14px 6px;border:1px dashed var(--line2);border-radius:10px}

/* ---------- Time clock ---------- */
.clock-card{text-align:center;padding:22px 18px}
.clock-big{font-family:var(--font-d);font-size:2.6rem;font-weight:800;margin:6px 0 2px;
  background:linear-gradient(135deg,var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.clock-in-list{display:flex;flex-direction:column;gap:8px}
.clock-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg2);
  border:1px solid var(--line2);border-radius:12px}
.clock-row .live-dot{width:10px;height:10px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:pulseDot 1.6s infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.4}}
.clock-hours{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.clock-hours .stat b{font-size:1.15rem}

/* ---------- Invoice delivery / print ---------- */
.send-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.send-row .btn{justify-content:center}
.inv-print{background:#fff;color:#111;border-radius:14px;padding:26px 24px;max-width:640px;margin:0 auto}
.inv-print h1{font-size:1.4rem;margin:0 0 2px;color:#111}
.inv-print .ip-biz{color:#8a6a1f;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}
.inv-print table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.88rem}
.inv-print th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#666;
  border-bottom:2px solid #c9a45c;padding:6px 4px}
.inv-print td{border-bottom:1px solid #eee;padding:8px 4px}
.inv-print .ip-total{display:flex;justify-content:space-between;font-size:1.15rem;font-weight:800;
  padding:12px 4px;border-top:2px solid #c9a45c;margin-top:4px}
.inv-print .ip-meta{font-size:.85rem;color:#444;line-height:1.6}
@media print{
  body{background:#fff}
  body *{visibility:hidden}
  .inv-print, .inv-print *{visibility:visible}
  .inv-print{position:absolute;left:0;top:0;width:100%;max-width:none;border-radius:0;box-shadow:none}
  .no-print{display:none !important}
}
@media(prefers-reduced-motion:reduce){.clock-row .live-dot{animation:none}}
html[data-theme="light"] .pipe-col{background:#f4efe4}
html[data-theme="light"] .pipe-col-head{background:#f4efe4}
html[data-theme="light"] .pipe-card{background:#fffdf8}
html[data-theme="light"] .crew-today{background:linear-gradient(135deg,rgba(201,164,92,.18),rgba(201,164,92,.06))}

/* ============================================================
   MAXIMUM POLISH — Million-dollar finish
   Layout refinement · Bigger targets · PIN login · Premium cards
   ============================================================ */

/* ---------- Bigger, friendlier tap targets (mobile-first) ---------- */
.btn{min-height:48px;padding:13px 20px;font-size:.93rem}
.btn.gold{box-shadow:0 6px 22px rgba(201,164,92,.4)}
.m-close{width:44px;height:44px;font-size:1.1rem}
.icon-btn{width:44px;height:44px}
.chip{padding:10px 17px;font-size:.83rem}
.dir-btn{padding:10px 15px;font-size:.85rem}
.pipe-move button{padding:11px 4px;font-size:.8rem}
.tabbar button{padding:12px 4px 10px;min-height:66px}
.tabbar button span{font-size:1.4rem}
.day{flex:0 0 66px;padding:12px 4px}
.qa{padding:16px 6px;font-size:.75rem;min-height:86px}
.seg button{padding:13px 6px}
.li-del{height:44px}
.topbar-actions{display:flex;gap:8px;align-items:center}

/* ---------- Expensive card depth ---------- */
.card{
  border-radius:18px;
  border-color:rgba(201,164,92,.15);
  box-shadow:0 12px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
.row-card{
  padding:16px 16px 16px 20px;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
  min-height:78px;
}
.row-card::after{width:4px}
.row-title{font-size:1rem;letter-spacing:-.005em}
.row-sub{font-size:.84rem}

/* ---------- Dashboard hero: command presence ---------- */
.dash-hero{
  border:1px solid rgba(201,164,92,.28);
  box-shadow:0 14px 44px rgba(0,0,0,.48), 0 0 44px rgba(201,164,92,.07), inset 0 1px 0 rgba(255,255,255,.07);
  padding:20px 18px;
}
.dash-hero h1{font-size:1.62rem}
.dash-sub{font-size:.88rem}

/* ---------- Pipeline: stage-colored columns ---------- */
.pipe-col{border-top:3px solid var(--line2);padding-top:10px}
.pipe-col[data-stage="lead"]{border-top-color:#c9a45c}
.pipe-col[data-stage="quoted"]{border-top-color:#b48ce8}
.pipe-col[data-stage="scheduled"]{border-top-color:#5b9bf0}
.pipe-col[data-stage="in-progress"]{border-top-color:#ffb454}
.pipe-col[data-stage="completed"]{border-top-color:#3fd68c}
.pipe-col[data-stage="invoiced"]{border-top-color:#7dd3e0}
.pipe-col[data-stage="paid"]{border-top-color:#2ecc71}
.pipe-col-head h3{display:flex;align-items:center;gap:8px}
.pipe-col-head h3::before{content:"";width:10px;height:10px;border-radius:50%;flex:none}
.pipe-col[data-stage="lead"] .pipe-col-head h3::before{background:#c9a45c;box-shadow:0 0 8px #c9a45c}
.pipe-col[data-stage="quoted"] .pipe-col-head h3::before{background:#b48ce8;box-shadow:0 0 8px #b48ce8}
.pipe-col[data-stage="scheduled"] .pipe-col-head h3::before{background:#5b9bf0;box-shadow:0 0 8px #5b9bf0}
.pipe-col[data-stage="in-progress"] .pipe-col-head h3::before{background:#ffb454;box-shadow:0 0 8px #ffb454}
.pipe-col[data-stage="completed"] .pipe-col-head h3::before{background:#3fd68c;box-shadow:0 0 8px #3fd68c}
.pipe-col[data-stage="invoiced"] .pipe-col-head h3::before{background:#7dd3e0;box-shadow:0 0 8px #7dd3e0}
.pipe-col[data-stage="paid"] .pipe-col-head h3::before{background:#2ecc71;box-shadow:0 0 8px #2ecc71}
.pipe-card{padding:13px 14px;border-radius:13px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.pipe-card .pc-title{font-size:.92rem}
.pipe-card .pc-sub{font-size:.78rem;line-height:1.55}

/* ---------- Time clock: hero buttons ---------- */
#clockInBtn,#clockInSelf{min-height:60px;font-size:1.08rem;border-radius:14px}
#clockOutSelf{min-height:56px;font-size:1.05rem;border-radius:14px}
.clock-big{font-size:2.8rem}
.clock-banner{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(201,164,92,.14),rgba(201,164,92,.05));
  border:1px solid var(--line);border-radius:14px;font-size:.9rem}
.clock-banner b{color:var(--gold2)}

/* ---------- PIN lock screen ---------- */
#lockscreen{position:fixed;inset:0;z-index:300;background:#07090d;
  display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:44px 20px calc(40px + env(safe-area-inset-bottom))}
#lockscreen[hidden]{display:none}
.lock-inner{width:100%;max-width:380px;text-align:center;animation:splashIn .5s cubic-bezier(.2,.9,.3,1.1)}
.lock-inner.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-12px)}40%{transform:translateX(10px)}60%{transform:translateX(-7px)}80%{transform:translateX(5px)}}
.lock-logo{width:110px;height:110px;border-radius:24px;margin:0 auto 16px;display:block;
  box-shadow:0 0 44px rgba(201,164,92,.45);border:1px solid rgba(201,164,92,.4)}
.lock-title{font-family:var(--font-d);font-weight:800;font-size:1.5rem;letter-spacing:.12em}
.lock-title em{font-style:normal;color:var(--gold)}
.lock-sub{color:var(--muted);font-size:.92rem;margin:10px 0 20px}
.lock-user{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line2);border-radius:16px;padding:14px 16px;margin-bottom:10px;
  color:var(--txt);transition:transform .12s,border-color .15s;min-height:68px}
.lock-user:active{transform:scale(.98);border-color:var(--gold)}
.lock-user .crew-meta{flex:1}
.lock-go{color:var(--gold);font-size:1.2rem;font-weight:800}
.lock-who{font-family:var(--font-d);font-size:1.15rem;font-weight:700;margin:0 0 4px}
.pin-dots{display:flex;gap:16px;justify-content:center;margin:22px 0}
.pin-dots span{width:18px;height:18px;border-radius:50%;border:2px solid rgba(201,164,92,.5);transition:all .15s}
.pin-dots span.filled{background:linear-gradient(135deg,var(--gold2),var(--gold));
  border-color:var(--gold);box-shadow:0 0 12px rgba(201,164,92,.6);transform:scale(1.1)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:300px;margin:0 auto}
.pin-key{width:84px;height:84px;border-radius:50%;font-size:1.6rem;font-weight:700;
  font-family:var(--font-d);color:var(--txt);
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line2);transition:transform .1s,border-color .15s,box-shadow .15s;
  touch-action:manipulation;justify-self:center}
.pin-key:active{transform:scale(.92);border-color:var(--gold);box-shadow:0 0 18px rgba(201,164,92,.35)}
.pin-key.fn{font-size:1.3rem;color:var(--muted)}
.lock-back{margin-top:22px}

/* ---------- Toast above lockscreen ---------- */
#toast{z-index:350}

/* ---------- Light mode: lockscreen ---------- */
html[data-theme="light"] #lockscreen{background:#f4f1ea}
html[data-theme="light"] .lock-user{background:linear-gradient(180deg,#fffdf8,#f7f3e9)}
html[data-theme="light"] .pin-key{background:linear-gradient(180deg,#fffdf8,#f7f3e9);color:#1d1a13}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .lock-inner,.lock-inner.shake{animation:none}
}

/* ============================================================
   APPLE-FEEL POLISH — clean, spacious, effortless
   SF-style type · generous whitespace · subtle depth
   ============================================================ */
:root{
  --font-d:'Sora',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
  --font-b:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  --radius:18px;
}
body{
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{letter-spacing:-.022em}
h1{font-size:1.8rem;font-weight:800}
.page-head{margin:10px 2px 20px}
.page-head h1{margin-top:2px}
#views{padding:20px 18px 10px}

/* Airier cards, softer Apple-like depth */
.card{
  padding:20px;
  margin-bottom:16px;
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(0,0,0,.25),0 8px 28px rgba(0,0,0,.22);
}
.stack{display:grid;gap:12px}
.row-card{
  padding:16px;
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.18);
}
.row-title{font-size:1rem;letter-spacing:-.01em}
.row-sub{font-size:.85rem;margin-top:3px}

/* Big friendly buttons — minimum 48px, pill-ish */
.btn{
  min-height:50px;
  border-radius:14px;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:-.01em;
}
.btn.gold{box-shadow:0 6px 22px rgba(201,164,92,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.ghost{background:rgba(255,255,255,.04)}
.icon-btn{width:44px;height:44px;border-radius:14px}

/* Effortless tab bar — bigger, clearer */
.tabbar{padding:8px 8px calc(10px + env(safe-area-inset-bottom))}
.tabbar button{font-size:.68rem;gap:5px;padding:8px 4px;border-radius:14px}
.tabbar button span{font-size:1.5rem}
.tabbar button.on{background:rgba(201,164,92,.1)}

/* Forms that breathe */
.fld{margin-bottom:16px}
.fld>span{font-size:.72rem;margin-bottom:8px;letter-spacing:.08em}
.fld input,.fld select,.fld textarea{
  padding:14px 16px;
  border-radius:14px;
  font-size:1rem;
  background:rgba(255,255,255,.03);
}
.fld textarea{min-height:88px}

/* Modal: Apple sheet feel */
.modal{padding:22px 20px calc(26px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0}
.modal-head h2{font-size:1.35rem;letter-spacing:-.02em}
.m-close{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06)}

/* Chips: pill, airy */
.chip{padding:9px 18px;font-size:.85rem;border-radius:999px}
.chips{gap:10px;padding-bottom:14px}

/* Pipeline columns: calmer, roomier */
.pipe-col{padding:14px;gap:10px;border-radius:16px}
.pipe-card{padding:14px;border-radius:14px}
.pipe-move button{min-height:44px;font-size:.8rem;border-radius:12px}

/* Time clock hero buttons */
.clock-card{padding:28px 22px}
.clock-big{font-size:3rem}

/* PIN pad: big, thumb-friendly */
.pin-key{width:84px;height:84px;font-size:1.6rem;border-radius:50%}
.pin-dots span{width:16px;height:16px}

/* Lock screen users: big tappable rows */
.lock-user{padding:18px;border-radius:18px;margin-bottom:12px}
.crew-av{width:44px;height:44px;font-size:1.2rem}

/* Quick actions: roomier grid */
.quick-grid{gap:12px}
.qa{padding:18px 6px;border-radius:16px;font-size:.78rem}
.qa span{font-size:1.5rem}

/* Search: taller, friendlier */
.search{padding:14px 16px;border-radius:14px;font-size:1rem}

/* Section titles: calm hierarchy */
.sec-title{font-size:1.05rem;margin:26px 2px 12px;font-weight:700}

/* Stats: softer, clearer */
.stat{padding:16px 10px;border-radius:16px}
.stat b{font-size:1.35rem;letter-spacing:-.02em}

/* Crew portal polish */
.crew-today{padding:14px;border-radius:14px}
.crew-check{padding:14px;border-radius:14px}
.tel-btn{width:44px;height:44px;border-radius:14px;font-size:1.2rem}

/* Light mode keeps the airy feel */
html[data-theme="light"] .card,
html[data-theme="light"] .row-card,
html[data-theme="light"] .stat,
html[data-theme="light"] .qa{
  box-shadow:0 1px 2px rgba(120,95,40,.08),0 8px 24px rgba(120,95,40,.1);
}
html[data-theme="light"] .btn.ghost{background:rgba(60,50,30,.05)}
html[data-theme="light"] .m-close{background:rgba(60,50,30,.07)}
html[data-theme="light"] .fld input,
html[data-theme="light"] .fld select,
html[data-theme="light"] .fld textarea{background:rgba(60,50,30,.04)}

/* ============================================================
   JUNGLE KINGDOM — premium deep-jungle theme
   Lush emerald depth · gold stays king · gorilla rules
   ============================================================ */

/* Subtle canopy leaf texture (premium, not cartoon) */
.jungle-tex{position:relative}
.jungle-tex::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%2346b96f' stroke-opacity='0.055' stroke-width='2.5'%3E%3Cpath d='M52 218 C52 150 86 116 158 116 C158 188 122 218 52 218 Z'/%3E%3Cpath d='M158 116 C178 94 208 88 232 94'/%3E%3Cpath d='M196 52 C216 52 232 68 235 90 C214 90 199 74 196 52 Z'/%3E%3Cpath d='M30 60 C44 44 66 40 84 46 C78 64 56 70 30 60 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Splash: jungle night */
#splash{background:#060b07}
#splash::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 340px at 50% 30%, rgba(70,185,111,.12), transparent 70%),
    radial-gradient(420px 300px at 50% 108%, rgba(47,143,82,.16), transparent 70%);
}
.splash-rays{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(112deg, transparent 44%, rgba(123,216,154,.055) 48%, transparent 53%),
    linear-gradient(68deg, transparent 56%, rgba(201,164,92,.06) 61%, transparent 66%),
    linear-gradient(96deg, transparent 70%, rgba(70,185,111,.05) 74%, transparent 78%);
}
.splash-inner{z-index:2}

/* Leaf sprig divider */
.leaf-div{display:flex;justify-content:center;margin:14px 0 4px;opacity:.95}
.leaf-div svg{display:block;filter:drop-shadow(0 0 6px rgba(70,185,111,.35))}

/* Login screen: jungle night */
#lockscreen{background:#060b07}
#lockscreen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 320px at 50% 12%, rgba(70,185,111,.10), transparent 70%),
    radial-gradient(500px 380px at 50% 110%, rgba(47,143,82,.14), transparent 70%);
}
.lock-inner{position:relative;z-index:2}

/* Big login path cards — unmistakable */
.lock-path{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line2);border-radius:18px;
  padding:18px;color:var(--txt);margin-bottom:12px;min-height:88px;
  transition:transform .12s,border-color .15s,box-shadow .2s;
  animation:cardIn .45s cubic-bezier(.2,.9,.3,1) backwards;
}
.lock-path:nth-of-type(1){animation-delay:.08s}
.lock-path:nth-of-type(2){animation-delay:.16s}
.lock-path:active{transform:scale(.97)}
.lock-path .crew-meta{flex:1}
.lock-path .crew-meta b{font-size:1.02rem}
.lock-path .crew-meta i{font-size:.78rem}
.lock-path-ico{
  width:52px;height:52px;border-radius:16px;flex:none;
  display:grid;place-items:center;font-size:1.7rem;
}
.lock-path-ico.gold{
  background:linear-gradient(135deg,rgba(201,164,92,.25),rgba(201,164,92,.08));
  border:1px solid var(--line);box-shadow:0 0 18px rgba(201,164,92,.25);
}
.lock-path-ico.green{
  background:linear-gradient(135deg,rgba(70,185,111,.28),rgba(70,185,111,.08));
  border:1px solid var(--leaf-line);box-shadow:0 0 18px rgba(70,185,111,.28);
}
.lock-path.leaf:hover{border-color:var(--leaf-line)}

/* Remember me row */
.remember-row{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:18px 0 4px;cursor:pointer;user-select:none;-webkit-user-select:none;
  color:var(--muted);font-size:.88rem;font-weight:600;touch-action:manipulation;
}
.remember-row input{position:absolute;opacity:0;pointer-events:none}
.remember-box{
  width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  border:1px solid var(--line2);background:var(--bg2);color:transparent;
  font-size:.9rem;font-weight:800;transition:all .15s;flex:none;
}
.remember-row input:checked + .remember-box{
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  border-color:var(--gold);color:#14100a;box-shadow:0 0 12px rgba(201,164,92,.4);
}
.remembered-note{margin-top:16px;font-size:.8rem;color:var(--muted)}
.remembered-note b{color:var(--gold2)}

/* Crew list on login */
#lockCrewList .lock-user{animation:cardIn .4s cubic-bezier(.2,.9,.3,1) backwards}
#lockCrewList .lock-user:nth-child(2){animation-delay:.06s}
#lockCrewList .lock-user:nth-child(3){animation-delay:.12s}
#lockCrewList .lock-user:nth-child(4){animation-delay:.18s}
#lockCrewList .lock-user:nth-child(n+5){animation-delay:.24s}
.lock-user[disabled]{opacity:.55}
.lock-user[disabled]:active{transform:none}

/* Jungle accents across the app */
.eyebrow{color:var(--gold)}
.stat b{color:var(--gold2)}
.dash-ring .ring-fg{stroke:url(#ringGrad)}
.topbar::after{
  background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--leaf) 55%,var(--gold) 70%,transparent);
}

/* Light mode: soft sage jungle */
html[data-theme="light"]{
  --bg:#f1f4ec;--bg2:#ffffff;--bg3:#e9ede1;
  --card:#fffdf9;--card2:#f7f8f0;
}
html[data-theme="light"] body::before{
  background:
    radial-gradient(600px 300px at 50% -60px, rgba(166,124,46,.10), transparent 70%),
    radial-gradient(700px 420px at 12% 18%, rgba(70,185,111,.08), transparent 70%),
    radial-gradient(760px 520px at 88% 82%, rgba(70,150,95,.08), transparent 70%);
}
html[data-theme="light"] #splash{background:#0b120c}
html[data-theme="light"] #lockscreen{background:#0b120c}
html[data-theme="light"] .lock-path{background:linear-gradient(180deg,#fffdf8,#f4f6ec)}
html[data-theme="light"] .lock-path .crew-meta b{color:#1d1a13}
html[data-theme="light"] .lock-path .crew-meta i{color:#6d6350}
html[data-theme="light"] .lock-sub{color:#c9c2b2}
html[data-theme="light"] .lock-title{color:#f4f1ea}
html[data-theme="light"] .remember-row{color:#c9c2b2}
html[data-theme="light"] .remembered-note{color:#c9c2b2}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .lock-path,#lockCrewList .lock-user{animation:none}
}

/* ============================================================
   NEXT LEVEL — login wow · onboarding · empty-state CTAs
   ============================================================ */

/* Floating jungle leaves on the lockscreen */
.lock-leaves{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.lock-leaves .ll{position:absolute;opacity:.14;filter:blur(.4px);
  animation:leafDrift 16s ease-in-out infinite}
.lock-leaves .l1{width:44px;top:6%;left:8%;animation-delay:0s}
.lock-leaves .l2{width:30px;top:22%;right:10%;animation-delay:2.5s;animation-duration:20s}
.lock-leaves .l3{width:52px;top:58%;left:4%;animation-delay:5s;animation-duration:18s}
.lock-leaves .l4{width:26px;top:74%;right:14%;animation-delay:7.5s}
.lock-leaves .l5{width:38px;top:40%;left:84%;animation-delay:10s;animation-duration:22s}
@keyframes leafDrift{
  0%,100%{transform:translateY(0) rotate(-8deg)}
  50%{transform:translateY(-34px) rotate(10deg)}
}

/* Breathing glow on the lock logo */
.lock-logo{animation:lockBreathe 3.2s ease-in-out infinite}
@keyframes lockBreathe{
  0%,100%{box-shadow:0 0 44px rgba(201,164,92,.45)}
  50%{box-shadow:0 0 70px rgba(201,164,92,.7),0 0 120px rgba(70,185,111,.25)}
}

/* Shimmer sweep across the lock title */
.lock-title{position:relative;display:inline-block;overflow:hidden}
.lock-title::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(232,200,126,.35),transparent);
  transform:skewX(-18deg);animation:titleShine 5.5s ease-in-out infinite;
}
@keyframes titleShine{0%{left:-70%}55%,100%{left:170%}}

/* No-crew empty state on the login screen */
.lock-crew-empty{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px dashed var(--leaf-line,#2f8f52);border-radius:18px;
  padding:26px 20px;text-align:center;
  animation:cardIn .45s cubic-bezier(.2,.9,.3,1) backwards;
}
.lock-crew-empty img{width:56px;height:56px;border-radius:16px;margin:0 auto 10px;display:block;
  box-shadow:0 0 24px rgba(201,164,92,.35)}
.lock-crew-empty b{font-family:var(--font-d);font-size:1.02rem;color:var(--gold2)}
.lock-crew-empty p{color:var(--muted);font-size:.85rem;margin:8px 0 0;line-height:1.6}
.lock-crew-empty p b{color:var(--txt);font-size:.85rem;font-family:var(--font-b)}

/* Empty-state CTA buttons */
.empty-cta{margin-top:16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.empty-cta .btn{box-shadow:0 6px 22px rgba(201,164,92,.35)}
.empty .gorilla{animation:lockBreathe 4s ease-in-out infinite}

/* ---- Manager onboarding card (dashboard) ---- */
.onboard-card{
  position:relative;overflow:hidden;border-radius:20px;
  background:linear-gradient(160deg,rgba(70,185,111,.10),rgba(201,164,92,.07) 55%,rgba(10,18,12,.4));
  border:1px solid var(--line);padding:18px;margin-bottom:14px;
  animation:cardIn .5s cubic-bezier(.2,.9,.3,1) backwards;
  transition:opacity .28s,transform .28s;
}
.onboard-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--leaf,#46b96f) 60%,transparent)}
.onboard-card.leaving{opacity:0;transform:translateY(-12px) scale(.98)}
.onboard-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.onboard-head img{width:46px;height:46px;border-radius:13px;flex:none;
  box-shadow:0 0 20px rgba(201,164,92,.4)}
.onboard-head div b{display:block;font-family:var(--font-d);font-size:1rem}
.onboard-head div span{color:var(--muted);font-size:.82rem}
.onboard-steps{display:grid;gap:8px;margin-bottom:14px}
.onboard-step{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:14px;
  padding:12px;color:var(--txt);transition:transform .12s,border-color .15s;
  animation:cardIn .4s cubic-bezier(.2,.9,.3,1) backwards;
}
.onboard-step:nth-child(2){animation-delay:.06s}
.onboard-step:nth-child(3){animation-delay:.12s}
.onboard-step:nth-child(4){animation-delay:.18s}
.onboard-step:active{transform:scale(.98);border-color:var(--gold)}
.onboard-num{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-d);font-weight:800;font-size:.8rem;color:#0a0d13;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
}
.onboard-ico{font-size:1.3rem;flex:none}
.onboard-step .onboard-meta{flex:1;display:flex;flex-direction:column;line-height:1.3}
.onboard-step .onboard-meta b{font-size:.9rem}
.onboard-step .onboard-meta i{font-style:normal;color:var(--muted);font-size:.76rem}

/* Light mode: onboarding */
html[data-theme="light"] .onboard-card{
  background:linear-gradient(160deg,rgba(70,185,111,.10),rgba(166,124,46,.08) 55%,#fbf8ef);
}

/* Reduced motion for new login/onboarding animations */
@media(prefers-reduced-motion:reduce){
  .lock-leaves .ll,.lock-logo,.lock-title::after,.onboard-card,.onboard-step,
  .empty .gorilla,.lock-crew-empty{animation:none!important}
}

/* ============================================================
   FINAL MAXIMUM PASS — alerts · live crew · my-day hero
   ============================================================ */

/* ---- Attention alerts (manager dashboard) ---- */
.alerts{display:grid;gap:8px;margin-bottom:14px}
.alert-card{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line2);border-radius:14px;
  padding:12px 14px;color:var(--txt);font-size:.88rem;font-weight:600;
  transition:transform .12s,border-color .15s;
}
.alert-card:active{transform:scale(.98)}
.alert-card .lock-go{margin-left:auto;color:var(--gold)}
.alert-red{border-color:rgba(255,107,107,.4);background:linear-gradient(135deg,rgba(255,107,107,.1),var(--card))}
.alert-amber{border-color:rgba(255,180,84,.4);background:linear-gradient(135deg,rgba(255,180,84,.1),var(--card))}
.alert-blue{border-color:rgba(91,155,240,.4);background:linear-gradient(135deg,rgba(91,155,240,.1),var(--card))}

/* ---- Live crew card ---- */
.live-card{border-color:rgba(63,214,140,.3);
  background:linear-gradient(180deg,rgba(63,214,140,.07),var(--card2))}
.live-card::before{background:linear-gradient(90deg,transparent,#3fd68c,transparent)}
.live-list{display:grid;gap:8px}
.live-row{display:flex;align-items:center;gap:10px;padding:8px 4px}
.live-row + .live-row{border-top:1px solid var(--line2)}
.live-elapsed{font-family:var(--font-d);color:var(--gold2);font-size:.9rem}

/* ---- Employee "My Day" hero ---- */
.myday-card{
  border-color:rgba(201,164,92,.35);
  background:linear-gradient(135deg,rgba(201,164,92,.12),var(--card2) 55%,rgba(20,40,25,.6));
  overflow:hidden;position:relative;
}
.myday-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(300px 120px at 85% -20px,rgba(63,214,140,.18),transparent 70%);
}
.myday-top{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.myday-logo{width:52px;height:52px;border-radius:14px;flex:none;
  box-shadow:0 4px 18px rgba(201,164,92,.4);border:1px solid rgba(201,164,92,.4);
  animation:logoGlow 3s ease-in-out infinite}
.myday-top > div{flex:1;min-width:0}
.myday-top b{display:block;font-size:1.02rem}
.myday-top span{font-size:.78rem;color:var(--muted)}
.myday-status{font-size:.72rem;font-weight:800;letter-spacing:.06em;flex:none;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.myday-status.in{color:#3fd68c;border-color:rgba(63,214,140,.5);background:rgba(63,214,140,.1);
  box-shadow:0 0 12px rgba(63,214,140,.25)}
.myday-jobs{margin-top:12px;display:grid;gap:8px;position:relative;z-index:1}
.myday-job{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:rgba(0,0,0,.25);border:1px solid var(--line2);border-radius:12px;
  padding:10px 12px;color:var(--txt);transition:transform .12s,border-color .15s;
}
.myday-job:active{transform:scale(.98);border-color:var(--gold)}
.myday-time{font-family:var(--font-d);font-weight:700;color:var(--gold2);font-size:.85rem;flex:none;min-width:64px}
.myday-info{flex:1;min-width:0}
.myday-info b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.myday-info i{display:block;font-style:normal;font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Completion notes ---- */
.done-note{
  background:rgba(63,214,140,.08);border-left:3px solid #3fd68c;border-radius:0 8px 8px 0;
  padding:8px 12px;font-size:.88rem;
}

/* ---- Light mode for new components ---- */
html[data-theme="light"] .alert-card{background:#fffdf8}
html[data-theme="light"] .alert-red{background:linear-gradient(135deg,rgba(255,107,107,.12),#fffdf8)}
html[data-theme="light"] .alert-amber{background:linear-gradient(135deg,rgba(255,180,84,.14),#fffdf8)}
html[data-theme="light"] .alert-blue{background:linear-gradient(135deg,rgba(91,155,240,.12),#fffdf8)}
html[data-theme="light"] .live-card{background:linear-gradient(180deg,rgba(63,214,140,.1),#fffdf8)}
html[data-theme="light"] .myday-card{background:linear-gradient(135deg,rgba(201,164,92,.16),#fffdf8 60%,rgba(220,240,225,.7))}
html[data-theme="light"] .myday-job{background:rgba(255,255,255,.7)}
html[data-theme="light"] .done-note{background:rgba(63,214,140,.12)}

/* ---- Reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .myday-logo{animation:none}
}

/* ---------- Sign In / Sign Out portal ---------- */
.signout-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.35);
  color:#ff9a9a;border-radius:12px;padding:0 14px;min-height:44px;
  font-weight:700;font-size:.82rem;font-family:inherit;
  transition:transform .12s,box-shadow .15s,background .15s;
  touch-action:manipulation;cursor:pointer;
}
.signout-btn span{font-size:1rem;line-height:1}
.signout-btn:active{transform:scale(.94);background:rgba(255,107,107,.18)}
.topbar-actions{display:flex;align-items:center;gap:8px}

/* Login screen eyebrow */
.lock-eyebrow{
  font-size:.68rem;font-weight:800;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold2);margin:0 0 6px;text-align:center;
}

/* Sign-out confirmation */
.signout-confirm{text-align:center;padding:6px 4px 2px}
.signout-logo{
  width:84px;height:84px;border-radius:22px;margin:0 auto 14px;display:block;
  box-shadow:0 8px 30px rgba(201,164,92,.4);border:1px solid rgba(201,164,92,.4);
  animation:splashGlow 2.4s ease-in-out infinite;
}
.signout-who{font-size:1.05rem;margin:0 0 6px}
.signout-who b{color:var(--gold2)}

/* More-sheet sign out row */
#sheetSignOut{color:#ff9a9a;border-color:rgba(255,107,107,.3)}
#sheetSignOut:active{background:rgba(255,107,107,.12)}

/* Light mode */
html[data-theme="light"] .signout-btn{background:rgba(214,69,69,.08);border-color:rgba(214,69,69,.35);color:#c0392b}
html[data-theme="light"] #sheetSignOut{color:#c0392b;border-color:rgba(214,69,69,.3)}

@media(prefers-reduced-motion:reduce){
  .signout-logo{animation:none}
}

/* ---------- Premium select dropdowns (iOS fix) ---------- */
.fld select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23c9a45c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:44px;cursor:pointer;
  /* Kill the iOS white-bubble native rendering */
  color-scheme:dark;
}
html[data-theme="light"] .fld select{color-scheme:light}
.fld select option{background:var(--bg2);color:var(--txt)}
html[data-theme="light"] .fld select option{background:#fffdf8;color:#1d1a13}

/* Field with inline button (customer quick-add) */
.fld-with-btn{display:flex;gap:8px;align-items:stretch}
.fld-with-btn select{flex:1;min-width:0}
.btn.sm{padding:0 14px;min-height:48px;font-size:.85rem;white-space:nowrap;border-radius:12px}