/* Tandoor Magic Club — Apple-style: system font, grouped lists, Wallet-style card, frosted tab bar.
   Follows the phone's light / dark setting. Brand red + gold used sparingly as accents. */
:root{
  --bg:#f2f2f7; --bg2:#ffffff; --fill:rgba(120,120,128,.12); --fill2:rgba(120,120,128,.08);
  --label:#000; --label2:rgba(60,60,67,.62); --label3:rgba(60,60,67,.32); --sep:rgba(60,60,67,.16);
  --tint:#b3121c; --tint-press:#8f0e16; --tint-soft:rgba(179,18,28,.1);
  --gold:#c9a35a; --gold-hi:#ecd29a; --green:#34c759; --orange:#ff9500; --blue:#007aff; --pink:#ff2d55; --purple:#af52de;
  --bar:rgba(249,249,249,.82); --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --r:14px; --r-lg:22px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --swirl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%23b08a4a' stroke-width='2.2' stroke-opacity='0.12' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 106.7 L12 109.7 L24 107.4 L36 99.8 L48 89.8 L60 81.4 L72 78.4 L84 83.0 L96 95.0 L108 111.5 L120 128.2 L132 140.7 L144 146.5 L156 145.4 L168 139.8 L180 133.5 L192 130.5 L204 132.8 L216 140.4 L228 150.4 L240 158.8 L252 161.8 L264 157.2 L276 145.2 L288 128.7 L300 112.0 L312 99.5 L324 93.7 L336 94.8 L348 100.4 L360 106.7'/%3E%3Cpath d='M0 274.1 L12 280.1 L24 283.2 L36 280.9 L48 273.0 L60 262.0 L72 251.9 L84 246.6 L96 248.8 L108 258.7 L120 273.9 L132 290.0 L144 302.9 L156 309.5 L168 309.3 L180 304.4 L192 298.4 L204 295.3 L216 297.6 L228 305.4 L240 316.4 L252 326.6 L264 331.9 L276 329.6 L288 319.7 L300 304.6 L312 288.5 L324 275.6 L336 269.0 L348 269.2 L360 274.1'/%3E%3Cpath d='M0 52.0 L12 64.7 L24 69.5 L36 66.7 L48 59.1 L60 50.6 L72 45.0 L84 44.4 L96 48.3 L108 54.2 L120 57.9 L132 56.0 L144 46.7 L156 30.8 L168 11.5 L180 -6.5 L192 -19.2 L204 -24.0 L216 -21.2 L228 -13.6 L240 -5.1 L252 0.5 L264 1.1 L276 -2.8 L288 -8.7 L300 -12.4 L312 -10.5 L324 -1.2 L336 14.7 L348 34.0 L360 52.0'/%3E%3Cpath d='M0 182.2 L12 188.4 L24 192.7 L36 192.0 L48 185.5 L60 174.9 L72 163.7 L84 156.3 L96 155.8 L108 163.3 L120 176.8 L132 192.8 L144 206.7 L156 215.1 L168 216.5 L180 212.5 L192 206.4 L204 202.1 L216 202.7 L228 209.2 L240 219.9 L252 231.0 L264 238.4 L276 238.9 L288 231.5 L300 217.9 L312 201.9 L324 188.0 L336 179.7 L348 178.2 L360 182.2'/%3E%3Cpath d='M0 252.7 L12 274.5 L24 284.1 L36 279.8 L48 263.8 L60 241.2 L72 217.9 L84 199.4 L96 188.7 L108 186.4 L120 190.5 L132 198.1 L144 206.7 L156 214.8 L168 222.5 L180 230.6 L192 239.9 L204 250.2 L216 259.6 L228 265.0 L240 263.2 L252 252.5 L264 233.3 L276 209.0 L288 185.2 L300 168.4 L312 163.5 L324 172.8 L336 194.6 L348 223.6 L360 252.7'/%3E%3Cpath d='M0 9.5 L12 14.5 L24 18.3 L36 17.6 L48 11.3 L60 0.6 L72 -11.0 L84 -19.1 L96 -20.5 L108 -13.7 L120 -0.1 L132 16.8 L144 32.3 L156 42.7 L168 46.4 L180 44.2 L192 39.2 L204 35.4 L216 36.1 L228 42.4 L240 53.1 L252 64.7 L264 72.9 L276 74.2 L288 67.4 L300 53.8 L312 37.0 L324 21.4 L336 11.0 L348 7.3 L360 9.5'/%3E%3Cpath d='M0 145.8 L12 153.1 L24 149.1 L36 135.8 L48 117.8 L60 100.4 L72 88.0 L84 82.7 L96 84.1 L108 89.6 L120 96.2 L132 101.4 L144 104.2 L156 105.5 L168 107.4 L180 111.6 L192 118.9 L204 127.9 L216 135.9 L228 139.0 L240 134.7 L252 122.2 L264 103.8 L276 84.0 L288 68.4 L300 62.0 L312 67.2 L324 83.1 L336 105.5 L348 128.5 L360 145.8'/%3E%3Cpath d='M181 231 a16 11 0 1 0 31 0 a16 11 0 1 0 -31 0'/%3E%3Cpath d='M184 93 a16 11 0 1 0 31 0 a16 11 0 1 0 -31 0'/%3E%3Cpath d='M215 198 a24 17 0 1 0 48 0 a24 17 0 1 0 -48 0'/%3E%3Cpath d='M153 189 a26 19 0 1 0 53 0 a26 19 0 1 0 -53 0'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    /* gunmetal grey instead of pure black */
    --bg:#2a2f35; --bg2:#363c43; --fill:rgba(160,170,180,.2); --fill2:rgba(160,170,180,.12);
    --label:#f5f6f7; --label2:rgba(225,230,236,.66); --label3:rgba(225,230,236,.32); --sep:rgba(150,160,170,.28);
    --tint:#ff5a4f; --tint-press:#e0463c; --tint-soft:rgba(255,90,79,.18);
    --swirl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%23c9a35a' stroke-width='2.2' stroke-opacity='0.17' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 106.7 L12 109.7 L24 107.4 L36 99.8 L48 89.8 L60 81.4 L72 78.4 L84 83.0 L96 95.0 L108 111.5 L120 128.2 L132 140.7 L144 146.5 L156 145.4 L168 139.8 L180 133.5 L192 130.5 L204 132.8 L216 140.4 L228 150.4 L240 158.8 L252 161.8 L264 157.2 L276 145.2 L288 128.7 L300 112.0 L312 99.5 L324 93.7 L336 94.8 L348 100.4 L360 106.7'/%3E%3Cpath d='M0 274.1 L12 280.1 L24 283.2 L36 280.9 L48 273.0 L60 262.0 L72 251.9 L84 246.6 L96 248.8 L108 258.7 L120 273.9 L132 290.0 L144 302.9 L156 309.5 L168 309.3 L180 304.4 L192 298.4 L204 295.3 L216 297.6 L228 305.4 L240 316.4 L252 326.6 L264 331.9 L276 329.6 L288 319.7 L300 304.6 L312 288.5 L324 275.6 L336 269.0 L348 269.2 L360 274.1'/%3E%3Cpath d='M0 52.0 L12 64.7 L24 69.5 L36 66.7 L48 59.1 L60 50.6 L72 45.0 L84 44.4 L96 48.3 L108 54.2 L120 57.9 L132 56.0 L144 46.7 L156 30.8 L168 11.5 L180 -6.5 L192 -19.2 L204 -24.0 L216 -21.2 L228 -13.6 L240 -5.1 L252 0.5 L264 1.1 L276 -2.8 L288 -8.7 L300 -12.4 L312 -10.5 L324 -1.2 L336 14.7 L348 34.0 L360 52.0'/%3E%3Cpath d='M0 182.2 L12 188.4 L24 192.7 L36 192.0 L48 185.5 L60 174.9 L72 163.7 L84 156.3 L96 155.8 L108 163.3 L120 176.8 L132 192.8 L144 206.7 L156 215.1 L168 216.5 L180 212.5 L192 206.4 L204 202.1 L216 202.7 L228 209.2 L240 219.9 L252 231.0 L264 238.4 L276 238.9 L288 231.5 L300 217.9 L312 201.9 L324 188.0 L336 179.7 L348 178.2 L360 182.2'/%3E%3Cpath d='M0 252.7 L12 274.5 L24 284.1 L36 279.8 L48 263.8 L60 241.2 L72 217.9 L84 199.4 L96 188.7 L108 186.4 L120 190.5 L132 198.1 L144 206.7 L156 214.8 L168 222.5 L180 230.6 L192 239.9 L204 250.2 L216 259.6 L228 265.0 L240 263.2 L252 252.5 L264 233.3 L276 209.0 L288 185.2 L300 168.4 L312 163.5 L324 172.8 L336 194.6 L348 223.6 L360 252.7'/%3E%3Cpath d='M0 9.5 L12 14.5 L24 18.3 L36 17.6 L48 11.3 L60 0.6 L72 -11.0 L84 -19.1 L96 -20.5 L108 -13.7 L120 -0.1 L132 16.8 L144 32.3 L156 42.7 L168 46.4 L180 44.2 L192 39.2 L204 35.4 L216 36.1 L228 42.4 L240 53.1 L252 64.7 L264 72.9 L276 74.2 L288 67.4 L300 53.8 L312 37.0 L324 21.4 L336 11.0 L348 7.3 L360 9.5'/%3E%3Cpath d='M0 145.8 L12 153.1 L24 149.1 L36 135.8 L48 117.8 L60 100.4 L72 88.0 L84 82.7 L96 84.1 L108 89.6 L120 96.2 L132 101.4 L144 104.2 L156 105.5 L168 107.4 L180 111.6 L192 118.9 L204 127.9 L216 135.9 L228 139.0 L240 134.7 L252 122.2 L264 103.8 L276 84.0 L288 68.4 L300 62.0 L312 67.2 L324 83.1 L336 105.5 L348 128.5 L360 145.8'/%3E%3Cpath d='M181 231 a16 11 0 1 0 31 0 a16 11 0 1 0 -31 0'/%3E%3Cpath d='M184 93 a16 11 0 1 0 31 0 a16 11 0 1 0 -31 0'/%3E%3Cpath d='M215 198 a24 17 0 1 0 48 0 a24 17 0 1 0 -48 0'/%3E%3Cpath d='M153 189 a26 19 0 1 0 53 0 a26 19 0 1 0 -53 0'/%3E%3C/g%3E%3C/svg%3E");
    --bar:rgba(38,43,49,.86); --shadow:0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.18);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--bg);background-image:var(--swirl);background-size:360px 360px;background-attachment:fixed;color:var(--label);font-family:var(--font);line-height:1.35;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;min-height:100dvh}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
a{color:var(--tint);text-decoration:none}
:focus-visible{outline:2px solid var(--tint);outline-offset:2px;border-radius:8px}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.app{max-width:520px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px calc(env(safe-area-inset-bottom,0px) + 110px);animation:in .28s ease both}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.boot{display:grid;place-items:center;min-height:70vh}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--fill);border-top-color:var(--label2);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* large title header */
.top{display:flex;align-items:flex-end;gap:12px;margin:6px 0 18px}
.top .t{flex:1;min-width:0}
.eyebrow{font-size:.76rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--label2);margin:0 0 2px}
h1{font-size:2rem;line-height:1.1;font-weight:700;letter-spacing:-.025em;margin:0}
h2{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,#c81d26,#7a0a10);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.95rem;border:0;cursor:pointer;flex:none}
.sub{color:var(--label2);font-size:.94rem;margin:0}

/* Wallet-style member card */
.pass{position:relative;border-radius:var(--r-lg);padding:20px 20px 18px;color:#fff;overflow:hidden;aspect-ratio:1.586;display:flex;flex-direction:column;
  background:radial-gradient(120% 140% at 100% 0%,#d8343c 0%,#a5131b 38%,#5c070c 100%);
  box-shadow:0 18px 40px rgba(122,10,16,.35),0 2px 6px rgba(0,0,0,.12);margin-bottom:22px;isolation:isolate}
.pass::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;
  background-image:radial-gradient(circle at 1px 1px,rgba(236,210,154,.9) 1px,transparent 1.2px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(135deg,transparent 30%,#000 100%);mask-image:linear-gradient(135deg,transparent 30%,#000 100%)}
.pass::after{content:"";position:absolute;inset:-40% -10% auto auto;width:70%;height:120%;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent);transform:rotate(25deg)}
.pass .row1{display:flex;align-items:center;gap:10px}
.pass .row1 img{width:34px;height:34px;border-radius:9px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.pass .brandname{font-weight:600;font-size:.95rem;line-height:1.1}
.pass .brandname small{display:block;font-size:.66rem;letter-spacing:.18em;color:var(--gold-hi);font-weight:700;margin-top:2px}
.pass .tierpill{margin-left:auto;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pass .tierpill.gold{background:linear-gradient(135deg,#f3dda4,#c9a35a);color:#3a2408}
.pass .pct{margin-top:auto;font-size:4.2rem;font-weight:700;letter-spacing:-.04em;line-height:.9}
.pass .pct small{font-size:1rem;font-weight:600;letter-spacing:0;opacity:.85;margin-left:6px}
.pass .row3{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px;font-size:.8rem}
.pass .row3 b{display:block;font-size:.95rem;font-weight:600}
.pass .row3 span{opacity:.7;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:12px 18px;border:0;border-radius:var(--r);font-size:1.04rem;font-weight:600;cursor:pointer;transition:transform .12s ease,background .15s,opacity .15s;text-align:center}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--tint);color:#fff}
.btn.primary:active{background:var(--tint-press)}
.btn.primary:disabled{opacity:.5}
.btn.tinted{background:var(--tint-soft);color:var(--tint)}
.btn.plain{background:var(--bg2);color:var(--tint)}
.btn.gold{background:linear-gradient(135deg,#f3dda4,#c9a35a);color:#3a2408}
.btn svg.i{width:20px;height:20px}
.note{text-align:center;color:var(--label2);font-size:.82rem;margin:10px 4px 22px}

/* grouped inset lists (Settings style) */
.sec{margin:0 0 26px}
.sec>h3{font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.02em;color:var(--label2);margin:0 16px 7px}
.sec>.foot{font-size:.8rem;color:var(--label2);margin:7px 16px 0}
.group{background:var(--bg2);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.cell{display:flex;align-items:center;gap:13px;min-height:50px;padding:10px 16px;position:relative;color:var(--label);width:100%;background:none;border:0;text-align:left;cursor:default}
button.cell,a.cell{cursor:pointer}
button.cell:active,a.cell:active{background:var(--fill2)}
.cell+.cell::before{content:"";position:absolute;top:0;right:0;left:16px;border-top:.5px solid var(--sep)}
.cell.ic+.cell::before,.group.icons .cell+.cell::before{left:59px}
.cell .ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none}
.cell .ico svg.i{width:18px;height:18px;stroke-width:2}
.cell .grow{flex:1;min-width:0}
.cell .grow small{display:block;color:var(--label2);font-size:.82rem;margin-top:1px}
.cell .val{color:var(--label2);font-size:.95rem;text-align:right}
.cell .chev{color:var(--label3);width:16px;height:16px}
.cell.red{color:var(--tint);justify-content:center;font-weight:500}
.cell input,.cell select{flex:1;border:0;background:none;text-align:right;color:var(--label2);font-size:1rem;min-width:0;padding:4px 0;outline:none;-webkit-appearance:none;appearance:none}
.cell input:focus{color:var(--label)}
.cell label.lbl{flex:none;min-width:96px}
.cell input::placeholder{color:var(--label3)}
.cell select{direction:rtl}
.ico.red{background:#ff3b30}.ico.orange{background:#ff9500}.ico.green{background:#34c759}.ico.blue{background:#007aff}.ico.pink{background:#ff2d55}.ico.purple{background:#af52de}.ico.gold{background:linear-gradient(135deg,#e7c77d,#b8893a)}.ico.gray{background:#8e8e93}

/* iOS switch */
.switch{position:relative;width:51px;height:31px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--fill);transition:background .2s}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .22s cubic-bezier(.3,.7,.4,1)}
.switch input:checked+span{background:var(--green)}
.switch input:checked+span::after{transform:translateX(20px)}

/* activity ring card */
.ringcard{display:flex;align-items:center;gap:16px;padding:16px}
.ring{width:66px;height:66px;flex:none;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .bgc{stroke:var(--tint-soft)}
.ring .fg{stroke:var(--tint);transition:stroke-dashoffset .8s cubic-bezier(.3,.7,.4,1)}
.ringcard b{font-size:1.05rem;font-weight:600}
.ringcard p{margin:2px 0 0;color:var(--label2);font-size:.88rem}

/* hero for sign-up */
.hero{text-align:center;padding:22px 8px 6px}
.hero .appicon{width:88px;height:88px;border-radius:22px;box-shadow:0 10px 30px rgba(122,10,16,.3);margin-bottom:14px}
.hero h1{font-size:2.1rem}
.hero p{color:var(--label2);margin:8px auto 0;max-width:30ch;font-size:1.02rem}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--fill);border-radius:10px;padding:2px;margin:22px 0 18px}
.seg button{border:0;background:none;border-radius:8px;min-height:34px;font-size:.92rem;font-weight:500;cursor:pointer;color:var(--label)}
.seg button[aria-pressed="true"]{background:var(--bg2);box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);font-weight:600}
@media (prefers-color-scheme: dark){.seg button[aria-pressed="true"]{background:#4b525a}}
.err{color:var(--tint);font-size:.88rem;text-align:center;min-height:1.2em;margin:10px 8px}

/* offers */
.offer{background:var(--bg2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px}
.offer .ph{aspect-ratio:16/9;background:var(--fill) center/cover}
.offer .body{padding:16px 16px 16px}
.offer .kick{font-size:.74rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--tint);margin-bottom:4px}
.offer h3{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.offer p{color:var(--label2);font-size:.95rem;margin:0 0 12px}
.offer .meta{font-size:.8rem;color:var(--label2);margin-bottom:14px}
.offer.used{opacity:.55}
.offer .usedtag{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:600;font-size:.95rem}
.offer.bday{background:radial-gradient(120% 140% at 100% 0%,#d8343c 0%,#a5131b 45%,#5c070c 100%);color:#fff}
.offer.bday .kick{color:var(--gold-hi)} .offer.bday p{color:rgba(255,255,255,.8)}
.offer.bday .emoji{font-size:2.6rem;padding:20px 16px 0}
.empty{text-align:center;padding:50px 20px;color:var(--label2)}
.empty svg.i{width:44px;height:44px;stroke-width:1.4;color:var(--label3);margin-bottom:10px}

/* hello banner */
.hello{display:flex;gap:12px;align-items:flex-start;background:var(--bg2);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);margin-bottom:16px}
.hello .ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none}
.hello b{display:block;font-weight:600}
.hello p{margin:2px 0 0;color:var(--label2);font-size:.9rem}

/* frosted tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;background:var(--bar);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--sep);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar .in{display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:520px}
.tabbar button{position:relative;background:none;border:0;color:var(--label2);height:54px;cursor:pointer;font-size:.66rem;font-weight:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;letter-spacing:0}
.tabbar button svg.i{width:25px;height:25px;stroke-width:1.7}
.tabbar button[aria-current="true"]{color:var(--tint)}
.tabbar button[aria-current="true"] svg.i{stroke-width:2.1}
.tabbar .badge{position:absolute;top:5px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:#ff3b30;color:#fff;font-size:.68rem;font-weight:600;display:grid;place-items:center;padding:0 5px}

/* bottom sheet (QR) */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;justify-content:center;animation:fade .25s ease both}
.sheet .panel{width:100%;max-width:520px;background:var(--bg);border-radius:14px 14px 0 0;padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 20px);animation:up .38s cubic-bezier(.2,.9,.3,1) both;max-height:94dvh;overflow:auto}
@keyframes fade{from{opacity:0}} @keyframes up{from{transform:translateY(100%)}}
.grab{width:36px;height:5px;border-radius:3px;background:var(--label3);margin:0 auto 10px}
.sheet .bar{display:flex;align-items:center;margin-bottom:6px}
.sheet .bar h2{flex:1;text-align:center;font-size:1.05rem;font-weight:600;margin:0}
.sheet .bar button{border:0;background:var(--fill);color:var(--label2);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.sheet .bar button svg.i{width:14px;height:14px;stroke-width:2.6}
.qrcard{background:#fff;border-radius:var(--r-lg);padding:22px 22px 18px;text-align:center;margin:12px 0 14px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.qrcard img{width:100%;max-width:280px;height:auto;image-rendering:pixelated;display:block;margin:0 auto}
.qrcard .code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:1.3rem;letter-spacing:.14em;color:#1c1c1e;font-weight:600;margin-top:10px}
.qrcard .who{color:#3c3c43;opacity:.7;font-size:.85rem;margin-top:2px}
.qrlabel{text-align:center;font-weight:700;font-size:1.5rem;letter-spacing:-.02em;margin:6px 0 2px}
.countdown{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--label2);font-size:.86rem}
.countdown svg{width:18px;height:18px;transform:rotate(-90deg)}
.countdown circle{fill:none;stroke-width:3}
.countdown .bgc{stroke:var(--fill)} .countdown .fg{stroke:var(--label2);transition:stroke-dashoffset 1s linear}
.donecheck{width:84px;height:84px;margin:24px auto 12px;border-radius:50%;background:var(--green);display:grid;place-items:center;animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
.donecheck svg{width:44px;height:44px;stroke:#fff;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .4s .25s ease forwards}
@keyframes pop{from{transform:scale(.4);opacity:0}} @keyframes draw{to{stroke-dashoffset:0}}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 74px);transform:translateX(-50%);z-index:60;background:rgba(30,30,32,.92);color:#fff;font-weight:500;font-size:.92rem;padding:11px 18px;border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:in .2s ease both}
.links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.tile{background:var(--bg2);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--label);font-size:.85rem;font-weight:500}
.tile .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff}
.tile .ico svg.i{width:20px;height:20px;stroke-width:2}
.tile:active{transform:scale(.97)}
.legal{font-size:.78rem;color:var(--label2);text-align:center;margin:4px 12px 0}