:root{
  --bg:#f5f3ec; --card:#ffffff; --ink:#1d2a22; --muted:#6b776f; --line:#e3e0d4;
  --brand:#1f6f4a; --brand-ink:#ffffff; --brand-soft:#e3f1e9;
  --amber:#b7791f; --amber-soft:#fbf0d9; --red:#b3402f; --red-soft:#f9e3df; --blue:#2c5aa0; --blue-soft:#e2ebf8;
  --shadow:0 1px 2px rgba(20,30,25,.06),0 4px 14px rgba(20,30,25,.06);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121714; --card:#1b231e; --ink:#eaf0ec; --muted:#93a198; --line:#2a352e;
  --brand:#4cb985; --brand-ink:#08150e; --brand-soft:#1d3327;
  --amber:#e0a94a; --amber-soft:#3a2f17; --red:#ec8a7a; --red-soft:#3b211c; --blue:#8db4ee; --blue-soft:#1b2a40;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);}
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
button{font:inherit;color:inherit}
.app{max-width:520px;margin:0 auto;min-height:100dvh;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
body.admin .app{padding-bottom:calc(168px + env(safe-area-inset-bottom))}
body.admin .fab{bottom:calc(86px + env(safe-area-inset-bottom))}
body.admin .toast{bottom:calc(150px + env(safe-area-inset-bottom))}
/* bottom navigation (admin only) */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:7;background:var(--card);border-top:1px solid var(--line);display:none;justify-content:center;padding:6px 12px calc(6px + env(safe-area-inset-bottom))}
body.admin .nav{display:flex}
.nav div{display:flex;width:100%;max-width:520px}
.nav button{flex:1;border:0;background:none;display:grid;justify-items:center;gap:2px;padding:6px 0;font-size:12px;font-weight:700;color:var(--muted)}
.nav button svg{width:24px;height:24px}
.nav button[aria-current=page]{color:var(--brand)}
.nav button[aria-current=page] .ico{background:var(--brand-soft)}
.nav .ico{width:56px;height:30px;border-radius:99px;display:grid;place-items:center}
/* people */
.person{display:flex;align-items:center;gap:12px}
.av{width:42px;height:42px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;flex:none}
.person h3{margin:0;font-size:16px}
.tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;margin-left:6px;vertical-align:middle;background:var(--amber-soft);color:var(--amber)}
.tag.ok{background:var(--brand-soft);color:var(--brand)}.tag.off{background:var(--red-soft);color:var(--red)}
.pk{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.pk small{color:var(--muted);display:block}
.pk button{border:0;background:var(--red-soft);color:var(--red);padding:7px 12px;border-radius:99px;font-weight:700;font-size:13px}
.btn.danger{background:var(--red-soft);color:var(--red)}
.qr{display:block;margin:14px auto 6px;width:200px;height:200px;border-radius:12px;background:#fff;padding:10px}
.link{word-break:break-all;font-size:13px;background:var(--bg);padding:10px 12px;border-radius:10px;color:var(--muted);margin-top:8px}


/* header */
header{position:sticky;top:0;z-index:5;background:var(--bg);padding:calc(12px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;gap:12px}
.logo{position:relative;width:54px;height:54px;padding:0;border:0;background:none;border-radius:50%;display:grid;place-items:center;flex:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;cursor:default}
.logo img{width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.logo svg.ring{position:absolute;inset:-3px;width:60px;height:60px;transform:rotate(-90deg);pointer-events:none}
.logo svg.ring circle{fill:none;stroke:var(--amber);stroke-width:3;stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:163.4}
.logo.holding svg.ring circle{stroke-dashoffset:0;transition:stroke-dashoffset 5s linear}
.title{flex:1;min-width:0}
.title h1{margin:0;font-size:18px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.title small{color:var(--muted)}
.pill{font-size:12px;font-weight:600;padding:6px 10px;border-radius:99px;background:var(--line);color:var(--muted);white-space:nowrap}
.pill.open{background:var(--brand-soft);color:var(--brand)}

/* unlocked banner */
.banner{margin:0 16px 8px;padding:10px 12px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.banner span{flex:1}
.banner button{border:0;background:var(--brand);color:var(--brand-ink);padding:7px 12px;border-radius:99px;font-weight:600;font-size:13px}

/* summary */
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 16px 12px}
.stat{background:var(--card);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:20px;line-height:1.15;font-variant-numeric:tabular-nums}
.stat small{color:var(--muted);font-size:12px}

/* filters */
.filters{display:flex;gap:8px;padding:0 16px 12px;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line);background:var(--card);padding:8px 14px;border-radius:99px;font-size:14px;font-weight:600;white-space:nowrap;color:var(--muted)}
.chip[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}

/* cards */
.list{padding:0 16px;display:grid;gap:10px}
.card{display:block;width:100%;text-align:left;border:0;background:var(--card);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.card:active{transform:scale(.99)}
.row1{display:flex;align-items:center;gap:10px}
.no{width:38px;height:38px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;flex:none}
.card h3{margin:0;font-size:16px}
.card .sub{color:var(--muted);font-size:13px}
.badge{margin-left:auto;font-size:12px;font-weight:700;padding:5px 10px;border-radius:99px;white-space:nowrap}
.b-set{background:var(--blue-soft);color:var(--blue)}
.b-due{background:var(--amber-soft);color:var(--amber)}
.b-done{background:var(--brand-soft);color:var(--brand)}
.bar{height:6px;border-radius:99px;background:var(--line);margin:12px 0 4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:99px}
.bar.due i{background:var(--amber)}
.barlabel{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.stats div{background:var(--bg);border-radius:10px;padding:8px 6px;text-align:center}
.stats b{display:block;font-size:15px;font-variant-numeric:tabular-nums}
.stats small{font-size:11px;color:var(--muted)}
.money{margin-top:8px;display:flex;justify-content:space-between;padding:8px 10px;border-radius:10px;background:var(--brand-soft);color:var(--brand);font-size:14px;font-weight:700}
.money.pending{background:var(--amber-soft);color:var(--amber)}
.empty{text-align:center;color:var(--muted);padding:40px 16px}

/* fab */
.fab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom));z-index:6;border:0;background:var(--brand);color:var(--brand-ink);padding:15px 24px;border-radius:99px;font-weight:700;font-size:16px;box-shadow:0 6px 20px rgba(0,0,0,.25);display:flex;gap:8px;align-items:center}
.fab[hidden],.pill[hidden]{display:none}

/* sheet */
.scrim{position:fixed;inset:0;background:rgba(10,15,12,.5);z-index:10;display:none;align-items:flex-end;justify-content:center}
.scrim.show{display:flex}
.sheet{width:100%;max-width:520px;max-height:92dvh;overflow:auto;background:var(--card);border-radius:22px 22px 0 0;padding:8px 18px calc(22px + env(safe-area-inset-bottom));animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.grab{width:40px;height:4px;border-radius:9px;background:var(--line);margin:4px auto 14px}
.sheet h2{margin:0 0 4px;font-size:20px}
.sheet p.hint{margin:0 0 14px;color:var(--muted);font-size:14px}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:12px 0 5px}
input{width:100%;font:inherit;font-size:18px;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
input:focus{outline:none;border-color:var(--brand)}
input[readonly]{opacity:.8}
.calc{margin-top:16px;border-radius:14px;background:var(--bg);padding:6px 14px}
.calc div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.calc div:last-child{border:0}
.calc span{color:var(--muted)}
.calc b{font-variant-numeric:tabular-nums}
.btns{display:flex;gap:10px;margin-top:18px}
.btn{flex:1;border:0;padding:15px;border-radius:14px;font-weight:700;font-size:16px;background:var(--brand);color:var(--brand-ink)}
.btn.ghost{background:var(--line);color:var(--ink)}
.err{color:var(--red);font-size:13px;margin-top:6px;min-height:18px}

/* pin pad */
.dots{display:flex;gap:14px;justify-content:center;margin:18px 0 6px}
.dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--muted)}
.dots i.on{background:var(--brand);border-color:var(--brand)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px auto 0;max-width:300px}
.pad button{border:0;background:var(--bg);border-radius:16px;padding:16px 0;font-size:24px;font-weight:600}
.pad button:active{background:var(--line)}
.note{font-size:12px;color:var(--muted);text-align:center;margin-top:14px}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:99px;font-size:14px;font-weight:600;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap}
.toast.show{opacity:1}

/* ---- signed-out screens */
.gate{max-width:420px;margin:0 auto;min-height:100dvh;padding:calc(48px + env(safe-area-inset-top)) 24px 32px;display:flex;flex-direction:column;align-items:center;text-align:center}
.gate img.big{width:132px;height:132px;margin-bottom:8px}
.gate h1{margin:8px 0 6px;font-size:26px}
.gate p{color:var(--muted);margin:0 0 22px}
.gate>.btn{width:100%;max-width:340px;flex:none}
.gate form{width:100%;max-width:340px;text-align:left}
.gate .err{text-align:center}
.steps{display:flex;gap:6px;justify-content:center;margin:0 0 18px}
.steps i{width:28px;height:5px;border-radius:9px;background:var(--line)}
.steps i.on{background:var(--brand)}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand);animation:sp .8s linear infinite;margin:40px auto}
@keyframes sp{to{transform:rotate(360deg)}}
/* ---- header logout */
.iconbtn{border:0;background:var(--line);color:var(--muted);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none}
.iconbtn svg{width:18px;height:18px}
.qrbox{width:208px;height:208px;margin:14px auto 6px;background:#fff;border-radius:12px;padding:10px}
.qrbox svg{width:100%;height:100%;display:block}
.sub b{font-weight:600}
body.covered #root,body.covered #scrim{visibility:hidden}
.warn{position:fixed;left:12px;right:12px;top:calc(8px + env(safe-area-inset-top));z-index:40;max-width:496px;margin:0 auto;background:var(--amber);color:#1d1403;border-radius:14px;padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.warn span{flex:1}
.warn button{border:0;background:#1d1403;color:#fff;padding:8px 12px;border-radius:99px;font-weight:700;font-size:13px}