/* ============ U GOOD LOGISTICS — "The Nest" design system ============ */
/* Ported from the Lovable mockup: cream/terracotta/mustard/teal/plum,   */
/* Fraunces display + Plus Jakarta Sans + Caveat hand font, stickers.    */

:root{
  color-scheme:light;
  /* sRGB hex first — guaranteed everywhere */
  --cream:#f6efdd;
  --cream-card:#fbf7ec;
  --ink:#122238;
  --terracotta:#c26a3f;
  --mustard:#e4b94a;
  --teal:#305d5b;
  --plum:#7c4667;
  --muted:#75655a;
  --border:#e2d5bf;
  --good:#3f9b63;
  --font-display:"Fraunces",ui-serif,Georgia,serif;
  --font-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --font-hand:"Caveat",cursive;
}
/* wide-gamut upgrade where supported */
@supports (color: oklch(0.5 0.1 100)){
  :root{
    --cream:oklch(0.965 0.028 85);
    --cream-card:oklch(0.985 0.015 85);
    --terracotta:oklch(0.65 0.16 42);
    --mustard:oklch(0.82 0.15 85);
    --teal:#305d5b;
    --plum:oklch(0.42 0.11 350);
    --muted:oklch(0.45 0.04 50);
    --border:#e2d5bf;
    --good:oklch(0.63 0.15 155);
  }
}
*{box-sizing:border-box;border-color:var(--border)}
html,body{margin:0;overflow-x:clip}
html{background:#f6efdd}
body{
  background-color:#f6efdd;
  background-color:var(--cream);
  color:#122238;
  color:var(--ink);
  font-family:var(--font-sans);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(228,185,74,.35), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(194,106,63,.22), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(48,93,91,.18), transparent 50%);
  background-attachment:fixed;
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
}
button,a,input,select,label,textarea{touch-action:manipulation;font-family:inherit}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.02em;margin:0}
img{max-width:100%;display:block}

/* ---------- animations ---------- */
@keyframes float-slow{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes blob{0%,100%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}50%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}}
@keyframes pop-in{0%{transform:scale(.9) translateY(20px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.animate-float{animation:float-slow 6s ease-in-out infinite}
.animate-wiggle{animation:wiggle 3s ease-in-out infinite}
.animate-marquee{animation:marquee 32s linear infinite}
.animate-blob{animation:blob 10s ease-in-out infinite}
.animate-pop{animation:pop-in .6s cubic-bezier(.22,1,.36,1) both}
.animate-pulse{animation:pulse 2s ease-in-out infinite}

/* ---------- utilities ---------- */
.sticker{box-shadow:0 1px 0 rgba(0,0,0,.05),0 10px 30px -12px rgba(80,40,20,.25),inset 0 0 0 1px rgba(255,255,255,.4)}
.paper{background-image:radial-gradient(circle at 20% 30%, rgba(0,0,0,.03) .5px, transparent 1px),radial-gradient(circle at 70% 60%, rgba(0,0,0,.02) .5px, transparent 1px);background-size:24px 24px,32px 32px}
.tape{position:absolute;width:90px;height:22px;background:linear-gradient(180deg, rgba(240,205,110,.85), rgba(232,190,90,.7));box-shadow:0 2px 6px rgba(0,0,0,.08);left:50%;transform:translateX(-50%) rotate(-2deg);top:-10px}
.hand{font-family:var(--font-hand)}
.kicker{font-family:var(--font-hand);font-size:1.5rem;color:var(--terracotta)}
.wrap{max-width:80rem;margin:0 auto;padding:0 1.25rem}
.hidden{display:none!important}
.mutetext{color:var(--muted)}

/* ---------- header / shell ---------- */
.shell-header{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(246,239,221,.82);border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top)}
.shell-header .bar{max-width:80rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.25rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand .logo{height:2.5rem;border-radius:.7rem;background:#fff;display:flex;align-items:center;padding:.25rem .45rem;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.brand .logo img{height:100%;width:auto;display:block}
.brand .name{font-family:var(--font-display);font-size:1.25rem;font-weight:600}
.shell-nav{display:flex;gap:.25rem;font-size:.86rem;font-weight:600;overflow-x:auto;scrollbar-width:none}
.shell-nav::-webkit-scrollbar{display:none}
.shell-nav a{padding:.4rem .8rem;border-radius:999px;white-space:nowrap;text-decoration:none;color:var(--ink);transition:background .15s}
.shell-nav a:hover{background:rgba(228,185,74,.4)}
.shell-nav a.active{background:var(--terracotta);color:var(--cream)}
.signout{background:var(--ink);color:var(--cream);border:none;border-radius:999px;padding:.5rem 1rem;font-weight:700;font-size:.8rem;cursor:pointer;flex-shrink:0}
.adminbar{background:rgba(124,70,103,.12);border-bottom:1px solid var(--border)}
.adminbar .inner{max-width:80rem;margin:0 auto;padding:.5rem 1.25rem;display:flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:600;flex-wrap:wrap}
.adminbar select{border:1px solid var(--border);border-radius:.6rem;padding:.35rem .6rem;background:var(--cream-card);font:inherit;max-width:240px}
.admin-pill{background:var(--plum);color:var(--cream);border-radius:999px;padding:.15rem .7rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}

/* ---------- mobile bottom tab bar ---------- */
.mobilenav{display:none}
@media(max-width:767px){
  .shell-nav{display:none}
  .shell-header .bar{gap:.5rem;padding:.7rem .9rem}
  .brand{flex-shrink:1;min-width:0}
  .brand .name{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .refreshbtn{padding:.18rem}
  .refreshbtn svg{width:22px;height:22px}
  body{padding-bottom:calc(4.4rem + env(safe-area-inset-bottom))}
  .mobilenav{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;justify-content:space-around;align-items:stretch;
    background:rgba(246,239,221,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--border);padding:.35rem .2rem calc(.35rem + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(18,34,56,.08)}
  .mobilenav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;text-decoration:none;
    color:var(--muted);font-size:.6rem;font-weight:700;padding:.3rem .1rem;border-radius:.8rem}
  .mobilenav a .mic{font-size:1.25rem;line-height:1.2}
  .mobilenav a.active{color:var(--ink);background:rgba(228,185,74,.35)}
}

.shell-footer{max-width:80rem;margin:0 auto;padding:3.5rem 1.25rem;text-align:center}
.shell-footer .bye{font-family:var(--font-hand);font-size:1.9rem;color:var(--terracotta)}
.shell-footer .fine{margin-top:.5rem;font-size:.85rem;color:var(--muted)}

/* ---------- page head ---------- */
.page-head{max-width:80rem;margin:0 auto;padding:3rem 1.25rem 1.5rem}
.page-head h1{font-size:clamp(2.4rem,6vw,3.75rem);font-weight:600}
.page-head .sub{margin-top:1rem;color:var(--muted);max-width:42rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.4rem;border:none;border-radius:999px;padding:.7rem 1.4rem;font-weight:700;font-size:.9rem;cursor:pointer;text-decoration:none;transition:transform .15s}
.btn:hover{transform:scale(1.04)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-terra{background:var(--terracotta);color:var(--cream)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-teal{background:var(--teal);color:var(--cream)}
.btn-line{background:var(--cream);color:var(--ink);border:2px solid var(--ink)}
.btn-ghost{background:rgba(228,185,74,.45);color:var(--ink)}
.btn-sm{padding:.45rem .95rem;font-size:.8rem}
.btn-danger{background:#c74130;color:#fff}

/* ---------- cards ---------- */
.card{background:var(--cream-card);border-radius:1.5rem;padding:1.5rem}
.notecard{position:relative;background:var(--cream-card);border-radius:1.5rem;padding:1.5rem;transition:transform .3s}
.notecard:hover{transform:translateY(-4px) rotate(0deg)!important}
.badge{position:absolute;top:-.7rem;right:-.7rem;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:.3rem .75rem;border-radius:999px}
.tagchip{font-size:.72rem;font-weight:600;padding:.25rem .75rem;border-radius:999px;background:rgba(228,185,74,.5);display:inline-block}
.statustag{font-size:.65rem;font-weight:800;text-transform:uppercase;border-radius:999px;padding:.2rem .6rem;background:var(--mustard);color:var(--ink)}
.statustag.accepted{background:var(--teal);color:var(--cream)}

/* ---------- marquee band ---------- */
.marquee-band{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:1rem 0;overflow:hidden;background:var(--terracotta)}
.marquee-track{display:flex;white-space:nowrap;width:max-content}
.marquee-track .seg{display:flex;align-items:center;gap:2.5rem;padding-right:2.5rem;font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--cream)}

/* ---------- home tiles & stats ---------- */
.tilegrid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.tilegrid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.tilegrid{grid-template-columns:1fr 1fr 1fr}}
.tile{position:relative;display:block;border-radius:1.75rem;padding:1.5rem;text-decoration:none;overflow:hidden;transition:transform .3s}
.tile:hover{transform:translateY(-5px) rotate(0deg)!important}
.tile .emoji{font-size:2.8rem}
.tile .label{margin-top:1.4rem;font-family:var(--font-display);font-size:1.8rem;font-weight:600}
.tile .note{margin-top:.2rem;font-size:.85rem;opacity:.82}
.tile .arrow{position:absolute;top:1.4rem;right:1.4rem;font-family:var(--font-display);font-size:1.4rem;opacity:.4;transition:.2s}
.tile:hover .arrow{opacity:1;transform:translateX(4px)}
.statfloat{padding:.8rem 1.25rem;border-radius:1.25rem;color:var(--cream)}
.statfloat .n{font-family:var(--font-display);font-size:1.5rem;font-weight:700}
.statfloat .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;opacity:.9}

/* ---------- hero ---------- */
.hero-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:768px){.hero-grid{grid-template-columns:3fr 2fr}}
.hero-img-wrap{position:relative}
.hero-img-wrap .blobby{position:absolute;inset:-1.5rem;background:rgba(228,185,74,.4);z-index:-1}
.hero-img{border-radius:2rem;width:100%;aspect-ratio:4/3;object-fit:cover;transform:rotate(2deg);transition:transform .5s}
.hero-img:hover{transform:rotate(0)}
.hero-img-fallback{border-radius:2rem;width:100%;aspect-ratio:4/3;display:grid;place-items:center;font-size:4rem;background:linear-gradient(135deg,var(--teal),var(--plum));transform:rotate(2deg);color:var(--cream)}
.floaty-note{position:absolute;border-radius:1.25rem;padding:.6rem 1rem;font-family:var(--font-hand);font-size:1.25rem}
.livepill{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .8rem;border-radius:999px;background:var(--mustard);color:var(--ink);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.livepill .dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--terracotta)}
.hero-h1{font-size:clamp(2.6rem,7vw,4.5rem);line-height:.98;font-weight:600}

/* ---------- mobile: pictures lead ---------- */
@media(max-width:767px){.hero-grid .hero-img-wrap{order:-1;margin:0 0 1.4rem}}

/* ---------- calendar ---------- */
.calhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.calmonth{font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.calnav{background:rgba(228,185,74,.35);border:none;border-radius:.6rem;width:2.2rem;height:2.2rem;font-size:1.2rem;color:var(--ink);cursor:pointer;line-height:1}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.caldow{font-size:.6rem;color:var(--muted);text-transform:uppercase;text-align:center;font-weight:800;padding-bottom:2px}
.calcell{min-height:2.9rem;border-radius:.7rem;background:rgba(228,185,74,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.82rem;position:relative;border:1px solid transparent;padding:.25rem 0}
.calcell.empty{background:transparent}
.calcell.today{border-color:var(--terracotta);font-weight:800}
.calcell.range{background:rgba(194,106,63,.16)}
.caldots{display:flex;gap:3px;margin-top:3px;min-height:6px}
.cdot{width:6px;height:6px;border-radius:50%;display:inline-block}
.cdot.oj{background:var(--terracotta)}
.cdot.mine{background:var(--good)}
.callegend{display:flex;gap:1.2rem;margin-top:.8rem;font-size:.75rem;color:var(--muted);font-weight:600}
.callegend .cdot{margin-right:5px;vertical-align:1px}

/* ---------- my schedule ---------- */
.sched{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 1.1rem;border-bottom:1px dashed var(--border)}
.sched:last-child{border-bottom:none}
.sdate{flex:none;width:3.6rem;text-align:center;background:rgba(228,185,74,.25);border-radius:.8rem;padding:.5rem .2rem}
.sdate .mo{font-size:.62rem;font-weight:800;color:var(--terracotta);text-transform:uppercase}
.sdate .dy{font-size:1.25rem;font-weight:800;line-height:1.1;font-family:var(--font-display)}
.sdate .wd{font-size:.58rem;color:var(--muted)}
.sbody{flex:1;min-width:0}
.sbody .s1{font-weight:700;font-size:.95rem}
.sbody .s2{font-size:.8rem;color:var(--muted);margin-top:2px}

/* ---------- job cards ---------- */
.jobgrid{display:grid;gap:1.25rem}
@media(min-width:768px){.jobgrid{grid-template-columns:1fr 1fr}}
.jobcard{position:relative;background:var(--cream-card);border-radius:1.5rem;padding:1.5rem;transition:transform .3s}
.jobcard:hover{transform:translateY(-4px) rotate(0)!important}
.jobcard .jtitle{font-family:var(--font-display);font-size:1.45rem;font-weight:600}
.jobcard .jmeta{font-size:.83rem;color:var(--muted);margin-top:.3rem;line-height:1.55}
.jobcard .pay{font-family:var(--font-display);font-size:1.9rem;font-weight:700;color:var(--terracotta);text-align:right}
.jobcard .paysub{font-size:.6rem;text-transform:uppercase;color:var(--muted);text-align:right}
.jobphotos{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}
.jobphotos img{width:74px;height:74px;object-fit:cover;border-radius:.8rem;cursor:pointer}
.daypick{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.chk{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;background:rgba(228,185,74,.35);border-radius:999px;padding:.35rem .7rem;cursor:pointer}
.bidrow{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.83rem;padding:.45rem 0;border-top:1px dashed var(--border);flex-wrap:wrap}
.acceptbtn{background:var(--teal);color:var(--cream);border:none;border-radius:999px;padding:.35rem .85rem;font-weight:700;font-size:.75rem;cursor:pointer}

/* ---------- corkboard (HR) ---------- */
.corkgrid{display:grid;gap:1.5rem}
@media(min-width:768px){.corkgrid{grid-template-columns:repeat(3,1fr)}}
.hr-banner{position:relative;border-radius:2rem;overflow:hidden;min-height:20rem}
@media(min-width:768px){.hr-banner{min-height:26rem}}
.hr-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hr-banner .scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(18,34,56,.85) 8%, rgba(18,34,56,.15) 55%, transparent)}
.hr-banner .txt{position:absolute;bottom:0;left:0;right:0;padding:2rem;color:var(--cream)}

/* ---------- payroll ---------- */
.payhero{position:relative;border-radius:2rem;padding:2.5rem;overflow:hidden;background:linear-gradient(135deg,var(--plum),var(--terracotta));color:var(--cream)}
.payhero .bigamt{font-family:var(--font-display);font-size:clamp(3rem,9vw,4.5rem);font-weight:700}
.paystats{margin-top:1.8rem;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(min-width:768px){.paystats{grid-template-columns:repeat(4,1fr)}}
.paystat{border-radius:1.25rem;background:rgba(246,239,221,.22);backdrop-filter:blur(4px);padding:.8rem 1rem}
.paystat .k{font-size:.66rem;text-transform:uppercase;opacity:.8}
.paystat .v{font-family:var(--font-display);font-size:1.45rem;font-weight:600}
.histwrap{background:var(--cream-card);border-radius:1.5rem;overflow:hidden}
.histrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.4rem;transition:background .15s}
.histrow+.histrow{border-top:1px dashed var(--border)}
.histrow:hover{background:rgba(228,185,74,.25)}
.histrow .d{font-family:var(--font-display);font-size:1.15rem;font-weight:600}
.histrow .s{font-size:.75rem;color:var(--muted)}
.histrow .amt{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--terracotta)}

/* ---------- trainings ---------- */
.trgrid{display:grid;gap:1rem}
@media(min-width:768px){.trgrid{grid-template-columns:1fr 1fr}}
.trcard{background:var(--cream-card);border-radius:1.25rem;padding:1.2rem;display:flex;flex-direction:column;gap:.8rem;transition:transform .2s}
.trcard:hover{transform:translateY(-3px)}
.trtop{display:flex;align-items:flex-start;gap:1rem}
.ring{position:relative;width:3.5rem;height:3.5rem;flex:none}
.ring svg{width:3.5rem;height:3.5rem;transform:rotate(-90deg)}
.ring .pct{position:absolute;inset:0;display:grid;place-items:center;font-size:.72rem;font-weight:800}
.trname{font-weight:700;font-size:1.05rem}
.trsub{font-size:.76rem;color:var(--muted)}
.trbtns{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:4.5rem}
.certbtn{width:100%;background:var(--teal);color:var(--cream);border:none;border-radius:.8rem;padding:.8rem 1rem;font-weight:700;font-size:.85rem;cursor:pointer}
.certbtn:disabled{background:#d8d2c4;color:var(--muted);cursor:not-allowed}
.certhint{font-size:.74rem;color:var(--muted);text-align:center;margin-top:.35rem}
.trkchip{display:inline-block;background:rgba(48,93,91,.16);color:var(--teal);border-radius:999px;padding:.15rem .7rem;margin:.15rem .2rem .15rem 0;font-weight:700;font-size:.78rem}

/* ---------- profile ---------- */
.inkpanel{position:relative;border-radius:2.25rem;padding:2.2rem;overflow:hidden;background:var(--ink);color:var(--cream)}
.inkpanel .blob1{position:absolute;top:-5rem;left:-5rem;width:20rem;height:20rem;background:rgba(194,106,63,.3)}
.inkpanel .blob2{position:absolute;bottom:-6rem;right:-4rem;width:20rem;height:20rem;background:rgba(48,93,91,.3)}
.profgrid{position:relative;display:grid;gap:2.5rem}
@media(min-width:768px){.profgrid{grid-template-columns:1fr 1fr}}
.daysrow{margin-top:1.2rem;display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;max-width:26rem}
.daybtn{aspect-ratio:1;border-radius:1rem;font-family:var(--font-display);font-size:1.1rem;font-weight:600;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--cream);cursor:pointer;transition:transform .15s}
.daybtn:hover{transform:scale(1.08)}
.daybtn.on{background:var(--terracotta);border:none}
.glassfield{background:rgba(255,255,255,.06);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.12);border-radius:1.25rem;padding:1rem;display:flex;align-items:center;gap:1rem}
.glassfield .ic{font-size:1.5rem}
.glassfield .k{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;opacity:.6}
.glassfield input{width:100%;background:transparent;border:none;outline:none;color:var(--cream);font-weight:600;font-size:.95rem;padding:0}

/* ---------- forms (admin, light bg) ---------- */
.formrow{display:grid;gap:.8rem;grid-template-columns:1fr 1fr;margin-top:.8rem}
.formrow .full{grid-column:1/-1}
.formrow label{display:block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.3rem}
.formrow input,.formrow select,.formrow textarea{width:100%;border:1px solid var(--border);border-radius:.8rem;padding:.65rem .8rem;font:inherit;background:#fff;color:var(--ink)}
.chkrow{display:flex;flex-wrap:wrap;gap:.4rem}
.adminform summary{cursor:pointer;font-weight:800;font-family:var(--font-display);font-size:1.15rem;padding:.2rem 0}
.msg{font-size:.82rem;font-weight:700;margin-top:.5rem}
.msg.ok{color:var(--good)}.msg.err{color:#c74130}
.filebtn{display:inline-block;background:var(--ink);color:var(--cream);border-radius:.7rem;padding:.5rem .9rem;font-size:.8rem;font-weight:700;cursor:pointer}
.filebtn input{display:none}
.thumbs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.thumb{position:relative}
.thumb img{width:64px;height:64px;object-fit:cover;border-radius:.6rem}
.thumb .rm{position:absolute;top:-6px;right:-6px;background:var(--ink);color:#fff;border-radius:999px;width:20px;height:20px;display:grid;place-items:center;font-size:11px;cursor:pointer}

/* ---------- alerts card (push/email) ---------- */
.alertscard{background:var(--cream-card);border-radius:1.5rem;padding:1.3rem 1.4rem}
.alertscard .head{display:flex;align-items:center;gap:.8rem}
.alertscard .bellbox{width:2.6rem;height:2.6rem;border-radius:.8rem;background:rgba(228,185,74,.45);display:grid;place-items:center;font-size:1.25rem;flex:none}
.na-row{display:flex;align-items:center;gap:.8rem;padding:.8rem 0;border-top:1px solid var(--border);margin-top:.4rem}
.na-ic{width:2.2rem;height:2.2rem;border-radius:.6rem;background:rgba(228,185,74,.3);display:grid;place-items:center;flex:none}
.chip{font-size:.66rem;font-weight:800;letter-spacing:.05em;padding:.25rem .8rem;border-radius:999px;background:oklch(0.82 0.15 85/.5);color:var(--ink)}
.chip.on{background:rgba(48,93,91,.2);color:var(--teal)}
.tgl{appearance:none;-webkit-appearance:none;width:47px;height:28px;border-radius:999px;background:#d5cdbd;position:relative;transition:background .18s;cursor:pointer;flex:none;margin:0;outline:none}
.tgl:checked{background:var(--teal)}
.tgl::after{content:"";position:absolute;top:2.5px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:left .18s}
.tgl:checked::after{left:21px}
.tgl:disabled{opacity:.45;cursor:not-allowed}

/* ---------- doc viewer ---------- */
#docViewer{display:none;position:fixed;inset:0;z-index:9999;background:var(--ink)}
#docViewer .topbar{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;padding-top:calc(.7rem + env(safe-area-inset-top))}
#docViewer .backbtn{background:var(--cream);color:var(--ink);border:none;border-radius:.6rem;padding:.6rem 1.1rem;font-weight:800;font-size:.9rem;cursor:pointer}
#docViewer .ttl{color:var(--cream);font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#docViewer iframe{width:100%;height:calc(100% - 3.6rem - env(safe-area-inset-top));border:0;background:#fff}

/* ---------- login ---------- */
.loginwrap{min-height:70vh;display:grid;place-items:center;padding:2rem 1.25rem}
.logincard{max-width:26rem;width:100%;background:var(--cream-card);border-radius:2rem;padding:2.2rem;text-align:center}
.logincard input{width:100%;border:1px solid var(--border);border-radius:.9rem;padding:.85rem 1rem;font:inherit;margin-top:1.1rem;text-align:center;font-weight:600}
.empty{color:var(--muted);text-align:center;padding:2rem 1rem;font-weight:600}
.sec-title{font-family:var(--font-display);font-size:1.7rem;font-weight:600;margin:2rem 0 1rem}

/* refresh button (header) */
.refreshbtn{padding:.2rem;line-height:0;margin-right:-.3rem;border-radius:50%}
.refreshbtn svg{width:26px;height:26px}
@keyframes nestspin{to{transform:rotate(360deg)}}