/* ===== NAV ===== */
nav{position:fixed;left:0;right:0;bottom:0;z-index:10;background:rgba(20,14,23,.82);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--line);padding-bottom:var(--sb)}
nav .in{max-width:560px;height:var(--nav-h);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:600;color:#7f7085;position:relative;transition:color .2s}
nav button.on{color:var(--brass-2)}
nav button svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
nav button.on svg{transform:translateY(-1px)}
nav button.on::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--brass)}
.badge{position:absolute;top:8px;left:calc(50% + 5px);min-width:18px;height:18px;border-radius:9px;background:var(--brass);color:var(--brass-ink);font-size:11px;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 5px}

/* ===== SHEET / TOAST ===== */
.veil{position:fixed;inset:0;background:rgba(5,3,6,.6);opacity:0;pointer-events:none;transition:opacity .25s;z-index:20}
.veil.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:var(--bg2);border-radius:26px 26px 0 0;padding:8px var(--pad) calc(20px + var(--sb));transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);z-index:21;max-height:88dvh;overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--line)}
.sheet.on{transform:none}
.grab{padding:8px 0 14px;touch-action:none}
.grab i{display:block;width:42px;height:5px;border-radius:5px;background:#4a3d50;margin:0 auto}
.sheet h2{font-size:21px;margin-bottom:4px}
.sheet .muted{color:var(--smoke);font-size:14px;margin:0 0 8px}
.total{display:flex;justify-content:space-between;padding:16px 0 4px;font-weight:800;font-size:18px;border-top:1px solid var(--line);margin-top:4px}
.ok{text-align:center;padding:4px 0 6px}
.ok .ring{width:88px;height:88px;margin:8px auto 18px}
.ok .ring circle{stroke-dasharray:252;stroke-dashoffset:252;animation:draw .7s .1s ease forwards}
.ok .ring path{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .4s .7s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ok p{color:var(--smoke);margin:6px auto;max-width:34ch}
.ticket{margin:16px 0;padding:14px;border-radius:16px;background:var(--bg3);display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left}
.ticket div span{display:block;font-size:12px;color:var(--smoke)}
.ticket div b{font-size:15px}
.code{font-family:Unbounded;letter-spacing:.06em;color:var(--brass-2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toast{position:fixed;left:50%;top:calc(var(--st) + 12px);transform:translate(-50%,-20px);background:rgba(243,236,244,.96);color:var(--bg);padding:11px 16px;border-radius:14px;font-size:14px;font-weight:700;opacity:0;transition:.25s;z-index:30;pointer-events:none;width:max-content;max-width:calc(100vw - 32px);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.spin{display:inline-block;width:18px;height:18px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}