/* D1 Crew – the approved manager design (docs/design/crew-manager/screens.html), reused as-is and made real for iPhone Safari:
   safe areas, 44 px tap targets, 16 px inputs (no zoom), the system font where Inter is not installed. */
:root{--ink:#0B0D17;--mut:#6B7083;--line:#ECEDF3;--bg:#F4F5FA;--ind:#5B2CFD;--ind2:#7C5CFF;--soft:#EFEAFF;--grn:#0FA968;--lgrn:#E3F7EE;--amb:#F59E0B;--lamb:#FFF4E2;--red:#EF4256;--lred:#FDEBEE;--card:#fff;color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{min-height:100vh;min-height:100dvh}
button{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
input,select,textarea{font:inherit;font-size:16px}
.hidden{display:none!important}
/* the app frame */
.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.content{flex:1;padding:calc(env(safe-area-inset-top) + 10px) 18px calc(96px + env(safe-area-inset-bottom));max-width:560px;width:100%;margin:0 auto}
.hello{display:flex;justify-content:space-between;align-items:center;margin:8px 2px 16px}
.hello h1{font-size:30px;font-weight:800;letter-spacing:-.6px}
.hello p{font-size:13px;color:var(--mut);margin-top:2px;font-weight:500}
.av{width:42px;height:42px;border-radius:21px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px;flex:none;border:none}
.card{background:var(--card);border-radius:22px;padding:16px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px -6px rgba(16,24,40,.08)}
.clock{background:linear-gradient(155deg,#5B2CFD 0%,#7C5CFF 55%,#9B7BFF 100%);color:#fff;border-radius:28px;padding:20px 20px 18px;position:relative;overflow:hidden}
.clock:after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:99px}
.live{background:rgba(255,255,255,.18)}.live i{width:7px;height:7px;border-radius:4px;background:#5CF2A4;box-shadow:0 0 0 3px rgba(92,242,164,.25)}
.live.brk i{background:#FFD27A;box-shadow:0 0 0 3px rgba(255,210,122,.25)}.live.off i{background:#C9C2FF;box-shadow:none}
.timer{font-size:52px;font-weight:800;letter-spacing:-1.5px;margin:12px 0 2px;font-variant-numeric:tabular-nums}
.sub{font-size:13px;opacity:.85;font-weight:500}
.btns{display:flex;gap:10px;margin-top:18px}
.btn{flex:1;min-height:48px;border-radius:16px;border:none;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;text-decoration:none}
.btn:disabled{opacity:.55}
.b-ghost{background:rgba(255,255,255,.16);color:#fff}.b-white{background:#fff;color:var(--red)}.b-white.go{color:var(--ind)}
.b-ind{background:var(--ind);color:#fff}.b-soft{background:var(--soft);color:var(--ind)}.b-red{background:var(--lred);color:var(--red)}.b-grn{background:var(--lgrn);color:var(--grn)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.stat .l{font-size:12px;color:var(--mut);font-weight:600}.stat .v{font-size:22px;font-weight:800;margin-top:4px;letter-spacing:-.4px}.stat .s{font-size:12px;color:var(--mut);margin-top:2px}
.sect{display:flex;justify-content:space-between;align-items:baseline;margin:20px 4px 10px}.sect h2{font-size:17px;font-weight:700}.sect a,.sect button{font-size:13px;color:var(--ind);font-weight:600;background:none;border:none;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.list .it{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.list .it:last-child{border:none}
.it .nm{font-size:15px;font-weight:600}.it .ds{font-size:12.5px;color:var(--mut);margin-top:1px}.it .grow{flex:1;min-width:0}
button.it{width:100%;background:none;border:none;border-bottom:1px solid var(--line);text-align:left}
.dot{width:11px;height:11px;border-radius:6px;position:absolute;right:-1px;bottom:-1px;border:2px solid #fff}
.avw{position:relative;flex:none}
.mini{min-height:40px;min-width:44px;padding:0 14px;border-radius:12px;border:none;font-weight:600;font-size:13px;flex:none}
.tabbar{position:fixed;left:0;right:0;bottom:0;height:calc(70px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding-top:8px;z-index:20}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:#9CA0B3;background:none;border:none;min-width:64px;min-height:50px}.tab.on{color:var(--ind)}
.tab svg{width:25px;height:25px}
.title{font-size:32px;font-weight:800;letter-spacing:-.7px;margin:8px 2px 4px}
.seg{display:flex;background:#E7E8F0;border-radius:12px;padding:3px;margin:12px 0 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}
.seg button{flex:1 0 auto;text-align:center;font-size:13px;font-weight:600;min-height:40px;padding:0 12px;border-radius:9px;color:var(--mut);background:none;border:none;white-space:nowrap}.seg .on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.pill{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:99px;white-space:nowrap}
.p-g{background:var(--lgrn);color:var(--grn)}.p-a{background:var(--lamb);color:#B45309}.p-n{background:#EEF0F5;color:var(--mut)}.p-i{background:var(--soft);color:var(--ind)}.p-r{background:var(--lred);color:var(--red)}
.daygrid .d{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);gap:12px;width:100%;background:none;border-left:none;border-right:none;border-top:none;text-align:left}.daygrid .d:last-child{border-bottom:none}
.date{width:44px;text-align:center;flex:none}.date b{display:block;font-size:18px;font-weight:800}.date span{font-size:11px;color:var(--mut);font-weight:600;text-transform:uppercase}
.bar{height:8px;border-radius:4px;background:#EDEFF5;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#5B2CFD,#9B7BFF)}
.dim{position:fixed;inset:0;background:rgba(10,12,30,.35);z-index:30}
.sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:30px 30px 0 0;padding:10px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(16,16,40,.18);z-index:31;max-height:92vh;overflow-y:auto;max-width:560px;margin:0 auto}
.grab{width:38px;height:5px;border-radius:3px;background:#D9DBE5;margin:0 auto 14px}
.field{display:block;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;margin-top:10px}.field .l,.field span.l{display:block;font-size:11.5px;color:var(--mut);font-weight:600}
.field input,.field select,.field textarea{display:block;width:100%;border:none;outline:none;background:none;font-size:16px;font-weight:600;margin-top:2px;padding:2px 0;color:var(--ink);min-height:26px}
.field:focus-within{border-color:var(--ind2)}
.two{display:flex;gap:10px}.two .field{flex:1;min-width:0}
.steps{display:flex;align-items:center;gap:6px;margin:14px 0 6px}.steps .s{flex:1;height:6px;border-radius:3px;background:#E3E5EE}.steps .s.on{background:var(--ind)}.steps .s.done{background:var(--grn)}
.big{font-size:40px;font-weight:800;letter-spacing:-1px}
.label{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--mut);font-weight:700}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--lamb);border-radius:16px;padding:12px 14px;font-size:13px;color:#7A4A06;font-weight:500;margin-top:12px}
.note.red{background:var(--lred);color:#9B1C2C}.note.ind{background:var(--soft);color:#3A1BA8}
.msg{color:var(--red);font-size:13px;font-weight:600;min-height:1em;margin-top:8px}
.muted{color:var(--mut)}.small{font-size:13px}
.link{background:none;border:none;color:var(--ind);font-weight:600;font-size:14px;min-height:44px;padding:0 4px}
.empty{text-align:center;color:var(--mut);font-size:14px;padding:18px 0}
.boot{padding:80px 20px;text-align:center;color:var(--mut)}
/* the sync banner and toast */
.sync{position:fixed;top:0;left:0;right:0;z-index:25;padding:calc(env(safe-area-inset-top) + 6px) 16px 8px;font-size:13px;font-weight:600;text-align:center}
.sync.s-queue{background:var(--lamb);color:#7A4A06}.sync.s-stale{background:var(--soft);color:#3A1BA8}.sync.s-bad{background:var(--lred);color:#9B1C2C}
#toast{position:fixed;left:16px;right:16px;bottom:calc(86px + env(safe-area-inset-bottom));padding:13px 16px;border-radius:16px;background:#151933;color:#fff;z-index:40;text-align:center;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(10,12,30,.25)}
#toast.bad{background:#7A1626}
/* the dark sign-in screen */
.login{min-height:100vh;min-height:100dvh;background:linear-gradient(170deg,#0D1020 0%,#1B1446 60%,#2B1A7A 100%);color:#fff;display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 64px) 22px calc(30px + env(safe-area-inset-bottom));text-align:center}
.login .logo{width:84px;height:84px;border-radius:24px;background:#F4F2FF;display:grid;place-items:center}.login .logo img{width:70px;height:70px;border-radius:18px}
.login h1{font-size:28px;font-weight:800;margin-top:22px;letter-spacing:-.5px}.login .who{font-size:14px;opacity:.7;margin-top:6px}
.login form{width:100%;max-width:420px;margin-top:34px;text-align:left}
.login .field{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}.login .field .l{color:#B8BCD8}.login .field input{color:#fff}
.login .go{width:100%;margin-top:18px;min-height:54px;background:#fff;color:var(--ind)}
.faceid{display:flex;align-items:center;gap:12px;margin-top:22px;background:rgba(255,255,255,.08);border-radius:18px;padding:14px 16px;width:100%;border:none;color:#fff;text-align:left;min-height:64px}
.faceid .t{font-weight:700}.faceid .s{font-size:12.5px;opacity:.7}
.login .msg{color:#FFB4BE}
/* older pages kept inside the new frame (Batches, Buy list): their basic pieces */
.line{margin:6px 0;padding:10px;border-radius:12px;background:var(--bg);display:flex;gap:8px;align-items:center}.line .what{flex:1}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78em;font-weight:700;background:#EEF0F5;color:var(--mut)}
.t-ok{background:var(--lgrn);color:var(--grn)}.t-info{background:var(--soft);color:var(--ind)}.t-bad{background:var(--lred);color:var(--red)}.t-warn{background:var(--lamb);color:#B45309}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row>*{flex:1 1 0;min-width:0}
.group{padding:10px 0;border-bottom:1px solid var(--line)}.group img{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:8px}
.bigbtn{width:100%;margin-top:10px}
label.plain{display:block;font-size:13px;color:var(--mut);font-weight:600;margin-top:10px}label.plain input{display:block;width:100%;margin-top:4px;padding:12px;border:1.5px solid var(--line);border-radius:12px;font-size:16px}
@media (min-width:700px){.content{padding-top:24px}}
/* Shop mode (Oct 7): the list, the check button, the cap colours (orange from 90 %, red over), the count stepper */
.shoptop.near{box-shadow:0 0 0 2px var(--amb) inset}.shoptop.over{box-shadow:0 0 0 2px var(--red) inset}
.bar.cap-near i{background:linear-gradient(90deg,#F59E0B,#FBBF24)}.bar.cap-over i{background:linear-gradient(90deg,#EF4256,#F87171)}
.near-t{color:#B45309;font-weight:600}.over-t{color:var(--red);font-weight:700}
.thumb{width:52px;height:52px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none}.thumb.ph{display:grid;place-items:center;font-size:22px;background:var(--bg)}.thumb.big{width:72px;height:72px}
.linebtn{background:none;border:none;text-align:left;padding:4px 0;min-height:44px}
.ds.strong{color:var(--ink);font-weight:600}
.tick{width:52px;height:52px;border-radius:16px;border:2px solid #D5D8E3;background:#fff;font-size:20px;font-weight:800;color:#B7BBCB;flex:none;display:grid;place-items:center}
.tick.t-ok{background:var(--grn);border-color:var(--grn);color:#fff}.tick.t-short{background:var(--lamb);border-color:var(--amb);color:#B45309;font-size:17px}.tick.t-nf{background:var(--lred);border-color:var(--red);color:var(--red)}
.tick:disabled{opacity:.6}
.shopline.s-ok .nm{color:var(--mut);text-decoration:line-through;text-decoration-color:#B7BBCB}
.shopline.pending .tick{box-shadow:0 0 0 3px rgba(91,44,253,.18)}
.stepper{display:flex;align-items:center;gap:12px;margin-top:8px}.stepper .btn{flex:none;width:64px;min-height:56px;font-size:26px}
.stepn{flex:1;text-align:center;font-size:40px;font-weight:800;font-variant-numeric:tabular-nums}
.cardchip{width:42px;height:42px;border-radius:12px;background:var(--soft);display:grid;place-items:center;font-size:20px;flex:none}
/* the helper page (no login, one store) */
.helper .content{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
.helper .hbar{display:flex;justify-content:space-between;align-items:center;margin:8px 2px 12px}