/* GOATS Event Mode (live.html) — guests' phones, the staff screen and the TV at the stand. Small on purpose: venue Wi-Fi. */
:root{
  --bg:#0a0a0a; --card:#151515; --card2:#1d1d1d; --line:#262626; --line2:#353535;
  --text:#f4f4f2; --muted:#a3a39f; --dim:#6c6c68; --hl:#8b7bff; --ok:#2fd27a; --warn:#ffb648; --danger:#ff6b6b;
  --font:'Cairo','Poppins',system-ui,sans-serif; --r:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.5;min-height:100vh;padding-bottom:env(safe-area-inset-bottom)}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--hl);outline-offset:2px}
[hidden]{display:none!important}

.lv-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));background:rgba(10,10,10,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.lv-brand img{height:24px;width:auto}
.lv-live{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 'Poppins',sans-serif;letter-spacing:.14em;color:#fff;background:#1d1d1d;border:1px solid var(--line2);border-radius:99px;padding:7px 11px}
.lv-live i{width:8px;height:8px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 0 0 rgba(255,59,59,.6);animation:lvPulse 1.6s infinite}
@keyframes lvPulse{70%{box-shadow:0 0 0 8px rgba(255,59,59,0)}100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}}

.lv{max-width:560px;margin:0 auto;padding:16px 16px 40px}
.lv-load{color:var(--muted);text-align:center;padding:60px 0}
.lv-kicker{margin:0 0 4px;color:var(--muted);font-size:13px;font-weight:600}
.lv-sub{color:var(--muted);margin:6px 0 14px}
h1{font-size:clamp(26px,7vw,34px);line-height:1.2;margin:0 0 6px;font-weight:900}
h2{font-size:18px;margin:0 0 12px;font-weight:800}
.lv-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 18px;margin:14px 0}
.lv-center{text-align:center;margin-top:30px}
.lv-demo{background:rgba(139,123,255,.14);border:1px solid rgba(139,123,255,.4);color:#d9d4ff;border-radius:12px;padding:9px 12px;font-size:14px;text-align:center;margin:0 0 12px}

.lv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 22px;border-radius:99px;border:0;background:#fff;color:#0a0a0a;font-weight:800;font-size:16px;text-decoration:none;transition:transform .15s,opacity .15s}
.lv-btn:active{transform:scale(.97)}
.lv-btn:disabled{opacity:.55}
.lv-btn.big{width:100%;min-height:58px;font-size:18px}
.lv-btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line2)}
.lv-btn.sm{min-height:44px;padding:8px 16px;font-size:15px}
.lv-link{background:none;border:0;padding:8px 0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:14px;display:inline-block}
.lv-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.lv-pin{display:flex;gap:10px;justify-content:center;margin:14px 0 6px}
.lv-pin input{width:min(200px,60vw);min-height:50px;border-radius:14px;border:1px solid var(--line2);background:#0f0f0f;padding:0 14px;font-size:20px;text-align:center;letter-spacing:.2em}
.lv-msg{color:var(--warn);min-height:1.5em;margin:6px 0;font-weight:600;text-align:center}

/* ---- guest: order form ---- */
.lv-hero{padding:8px 2px 4px}
.lv-preview{position:sticky;top:57px;z-index:3;margin:10px -16px 6px;padding:10px 16px 8px;background:linear-gradient(var(--bg) 82%,rgba(10,10,10,0))}
.lv-preview .lv-mock{width:min(44vw,190px);margin:0 auto;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
@media (max-height:700px){.lv-preview .lv-mock{width:min(34vw,140px)}}
.lv-pv-cap{text-align:center;margin:8px 0 0;font-weight:700;font-size:14px}
.lv-mock{position:relative;display:block;aspect-ratio:500/560;background:#dededa;border-radius:12px;overflow:hidden}
.lv-mock .lv-base{width:100%;height:100%;object-fit:cover}
.lv-mock .lv-art{position:absolute;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.lv-pouch{position:absolute;inset:34% 12% 18%;border-radius:18px;box-shadow:inset 0 -10px 20px rgba(0,0,0,.08),0 6px 14px rgba(0,0,0,.18)}
.lv-pouch::before{content:"";position:absolute;inset:7% 5% auto;height:5px;border-radius:3px;background:repeating-linear-gradient(90deg,#8a8170 0 4px,transparent 4px 7px)}
.lv-step{margin:22px 0}
.lv-step h2{display:flex;align-items:center;gap:10px}
.lv-step h2 b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#0a0a0a;font-size:15px;font-family:'Poppins',sans-serif}
.lv-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.lv-prod{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:8px 8px 10px;text-align:center;display:flex;flex-direction:column;gap:6px}
.lv-prod b{font-size:15px}
.lv-prod small{color:var(--muted);font-size:13px;min-height:1.2em}
.lv-prod.on{border-color:#fff;background:var(--card2)}
.lv-des{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.lv-d{aspect-ratio:1;border-radius:14px;border:2px solid var(--line);background:#e9e9e5;padding:6px;overflow:hidden}
.lv-d img{width:100%;height:100%;object-fit:contain}
.lv-d.on{border-color:#fff;box-shadow:0 0 0 3px var(--hl)}
.lv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.lv-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:99px;border:1px solid var(--line2);background:var(--card);font-weight:700;font-size:15px;text-decoration:none}
.lv-chip i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.lv-chip.on{background:#fff;color:#0a0a0a;border-color:#fff}
.lv-field{display:block;margin:0 0 12px}
.lv-field span{display:block;font-weight:700;margin-bottom:6px}
.lv-field small{color:var(--muted);font-weight:600}
.lv-field input{width:100%;min-height:52px;border-radius:14px;border:1px solid var(--line2);background:#0f0f0f;padding:0 14px;font-size:17px}
.lv-go{position:sticky;bottom:0;margin:0 -16px;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(rgba(10,10,10,0),var(--bg) 30%)}

/* ---- guest: ticket ---- */
.lv-ticket{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px 18px;margin-top:6px;transition:background .4s,border-color .4s}
.lv-tk-lbl{margin:10px 0 0;font-weight:700;color:var(--muted)}
.lv-num{font:400 clamp(84px,30vw,128px)/1 'Anton','Poppins',sans-serif;letter-spacing:.02em;margin:4px 0 12px}
.lv-track{list-style:none;display:flex;gap:6px;padding:0;margin:0 0 12px}
.lv-track li{flex:1;padding:8px 4px;border-radius:10px;background:#0f0f0f;border:1px solid var(--line);color:var(--dim);font-weight:700;font-size:13px}
.lv-track li.done{color:var(--text);border-color:var(--line2)}
.lv-track li.now{background:#fff;color:#0a0a0a;border-color:#fff;animation:lvNow 1.6s ease-in-out infinite}
@keyframes lvNow{50%{opacity:.75}}
.lv-state{font-size:18px;font-weight:800;margin:6px 0 14px}
.lv-ticket.s1 .lv-state{color:var(--warn)}
.lv-ticket.s2{background:#0f2a1b;border-color:var(--ok)}
.lv-ticket.s2 .lv-num,.lv-ticket.s2 .lv-state{color:var(--ok)}
.lv-ticket.s2 .lv-track li.now{background:var(--ok);border-color:var(--ok)}
.lv-ticket.s4 .lv-state{color:var(--danger)}
.lv-mine{display:flex;align-items:center;gap:14px;text-align:start;background:#0f0f0f;border-radius:16px;padding:10px;margin:0 0 10px}
.lv-mine .lv-mock{width:84px;flex:none}
.lv-mine b{display:block;font-size:16px}
.lv-mine span{display:block;color:var(--muted);font-size:14px}
.lv-others{list-style:none;padding:0;margin:0 0 10px;text-align:start;font-size:14px;color:var(--muted)}
.lv-others li{padding:6px 0;border-top:1px solid var(--line)}
.lv-others b{color:var(--text)}
.lv-note{color:var(--dim);font-size:13px;margin:6px 0 0}
.lv-after{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.lv-after h2{margin:12px 0 0}
.lv-after .lv-btn{width:100%}

/* ---- sheets, toasts ---- */
.lv-sheet{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:16px;overflow:auto}
.lv-sheet-in{background:var(--card);border:1px solid var(--line2);border-radius:22px;padding:20px;width:min(520px,100%);text-align:center;max-height:calc(100vh - 32px);overflow:auto}
.lv-zoom{width:100%;max-height:60vh;object-fit:contain;background:#e9e9e5;border-radius:14px}
.lv-toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;translate:-50% 0;z-index:30;background:#fff;color:#0a0a0a;font-weight:700;border-radius:99px;padding:10px 18px;box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* ---- staff ---- */
.st{max-width:900px;margin:0 auto}
body:has(.st) .lv{max-width:940px}
.st-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.st-head h1{font-size:26px}
.st-off{color:var(--warn);font-weight:700;margin:4px 0 0;font-size:14px}
.st-tools{display:flex;flex-wrap:wrap;gap:8px}
.st-tools .lv-chip{min-height:40px;padding:6px 14px;font-size:14px}
.st-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 12px}
.st-stats span{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center;color:var(--muted);font-size:13px;font-weight:700}
.st-stats b{display:block;font:400 30px/1.1 'Anton','Poppins',sans-serif;color:var(--text)}
.st-tabs{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:4px;margin-bottom:12px}
.st-tabs button{flex:1;min-height:42px;border:0;border-radius:99px;background:none;font-weight:800;color:var(--muted)}
.st-tabs button.on{background:#fff;color:#0a0a0a}
.st-list{display:grid;gap:10px}
@media (min-width:760px){.st-list{grid-template-columns:1fr 1fr}}
.st-card{display:grid;grid-template-columns:auto 76px 1fr;grid-template-areas:"n art info" "act act act";gap:6px 12px;align-items:center;background:var(--card);border:1px solid var(--line);border-inline-start:5px solid var(--dim);border-radius:16px;padding:12px}
.st-card.new{animation:stNew 1.2s ease-out}
@keyframes stNew{0%{box-shadow:0 0 0 0 rgba(139,123,255,.8);background:#221d3d}100%{box-shadow:0 0 0 14px rgba(139,123,255,0)}}
.st-card.s-queue{border-inline-start-color:#fff}
.st-card.s-printing{border-inline-start-color:var(--warn)}
.st-card.s-ready{border-inline-start-color:var(--ok)}
.st-card.s-done,.st-card.s-cancelled{opacity:.62}
.st-n{grid-area:n;font:400 34px/1 'Anton','Poppins',sans-serif;min-width:58px;text-align:center}
.st-art{grid-area:art;border:0;padding:0;background:none;border-radius:12px;overflow:hidden}
.st-info{grid-area:info;min-width:0}
.st-info b{display:block;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-info span{display:block;font-size:15px}
.st-info em{font-style:normal;font-weight:800;background:#fff;color:#0a0a0a;border-radius:6px;padding:0 6px}
.st-info small{display:block;color:var(--muted);font-size:13px}
.st-paid{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;font-weight:700}
.st-paid input{width:20px;height:20px;accent-color:var(--ok)}
.st-act{grid-area:act;display:flex;gap:8px}
.st-act .lv-btn{flex:1}
.st-act .lv-btn.s-ready{background:var(--ok)}
.st-act .lv-btn.s-printing{background:var(--warn)}
.st-act .lv-btn.s-queue{background:transparent;color:var(--text);border:1px solid var(--line2)}
.st-x{width:48px;border-radius:99px;border:1px solid var(--line2);background:none;color:var(--danger);font-size:18px}
.st-spin{width:26px;height:26px;margin:9px auto;border-radius:50%;border:3px solid var(--line2);border-top-color:#fff;animation:stSpin .8s linear infinite}
@keyframes stSpin{to{rotate:360deg}}
.st-empty{color:var(--muted);text-align:center;padding:30px 0;grid-column:1/-1}
.st-sum{list-style:none;padding:0;margin:12px 0 0;text-align:start}
.st-sum li{display:flex;justify-content:space-between;padding:9px 4px;border-top:1px solid var(--line)}

/* ---- QR poster (prints on its own) ---- */
.poster{background:#fff;color:#0a0a0a;border-radius:16px;padding:26px 20px;text-align:center}
.poster-logo{height:40px;width:auto;margin:0 auto 8px}
.poster-ev{margin:0;color:#555;font-weight:700}
.poster h2{font-size:28px;font-weight:900;margin:8px 0 12px}
.poster-qr svg{width:min(300px,70vw);height:auto;margin:0 auto;display:block}
.poster-how{font-weight:700;margin:14px 0 4px}
.poster-url{font:600 14px/1.4 'Poppins',sans-serif;color:#555;margin:0}
@media print{
  @page{margin:12mm}
  body{background:#fff}
  body>*:not(#lvSheet){display:none!important}
  .lv-sheet{position:static;background:none;padding:0;display:block}
  .lv-sheet-in{border:0;background:none;max-height:none;padding:0;width:auto}
  .no-print{display:none!important}
  .poster{padding:0}
  .poster-logo{height:70px}
  .poster h2{font-size:44px}
  .poster-qr svg{width:120mm}
  .poster-how{font-size:22px}
  .poster-url{font-size:16px}
}

/* ---- TV at the stand ---- */
.tv-body .lv{max-width:none;padding:2vw}
.tv{display:grid;grid-template-columns:1.7fr 1fr;gap:2vw;min-height:calc(100vh - 90px)}
.tv h2{font-size:clamp(20px,2.6vw,44px);margin:0 0 1.4vw}
.tv-title{font-size:clamp(18px,1.8vw,30px);color:var(--muted);margin:0 0 .6vw}
.tv-ready{background:#0f2a1b;border:2px solid var(--ok);border-radius:2vw;padding:2vw}
.tv-ready h2{color:var(--ok)}
.tv-nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(30vw,16vw),1fr));gap:1.2vw}
.tv-n{background:rgba(255,255,255,.06);border-radius:1.2vw;padding:1vw;text-align:center}
.tv-n b{display:block;font:400 clamp(44px,6.5vw,120px)/1 'Anton','Poppins',sans-serif}
.tv-n span{display:block;font-size:clamp(14px,1.5vw,26px);font-weight:700;color:var(--muted)}
.tv-ready .tv-n b{color:var(--ok)}
.tv-n.pop{animation:tvPop 1.4s ease-out 2}
@keyframes tvPop{0%{transform:scale(1.25);background:var(--ok)}100%{transform:scale(1)}}
.tv-nums.sm{grid-template-columns:repeat(auto-fill,minmax(9vw,1fr))}
.tv-nums.sm .tv-n b{font-size:clamp(30px,3.6vw,64px)}
.tv-side{background:var(--card);border:1px solid var(--line);border-radius:2vw;padding:2vw;display:flex;flex-direction:column;gap:1vw}
.tv-wait{font-size:clamp(16px,1.8vw,30px);font-weight:700;color:var(--muted);margin:0}
.tv-wait b{color:var(--text)}
.tv-qr{margin-top:auto;background:#fff;color:#0a0a0a;border-radius:1.4vw;padding:1vw;text-align:center}
.tv-qr svg{width:min(15vw,240px);height:auto;margin:0 auto;display:block}
.tv-qr p{margin:.4vw 0 0;font-weight:900;font-size:clamp(14px,1.5vw,26px)}
.tv-none{color:var(--dim);font-size:2vw;margin:0}
@media (max-width:760px){.tv{grid-template-columns:1fr}.tv-nums{grid-template-columns:repeat(3,1fr)}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}