/* ready — ink / paper, lime accent ("ready"), green = picked up. */

:root {
  --amber: #C8F31D; --amber-ink: #0F1012; --go: #157A47; --go-bright: #2EBE73; --danger: #E5664D;
  --ease: cubic-bezier(.2,.7,.2,1);
  --font: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --r-s: 14px; --r-m: 24px; --r-l: 32px; --r-xl: 44px;
  /* dark (default) */
  --bg: #0F1012; --bg-2: #15171A; --surface: #1B1D21; --surface-2: #25282D; --surface-hi: #202328;
  --ink: #F3F2EE; --muted: #A3A6AD; --faint: #3A3D42;
  --line: rgba(243,242,238,.10); --line-strong: rgba(243,242,238,.22);
  --nav: rgba(15,16,18,.78); --glass: rgba(37,40,45,.66); --chip: rgba(200,243,29,.12);
  --accent-text: #D7F66A; --track: #25282D; --go-text: #7FD9A6; --ready-lane: rgba(200,243,29,.06);
  --phone-screen: #F3F2EE; --phone-ink: #0F1012;
  --shadow: 0 30px 60px -30px rgba(0,0,0,.6);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F3F2EE; --bg-2: #E9E7E0; --surface: #FFFFFF; --surface-2: #ECEAE3; --surface-hi: #FFFFFF;
    --ink: #0F1012; --muted: #5D6066; --faint: #C9C7BF;
    --line: rgba(15,16,18,.09); --line-strong: rgba(15,16,18,.22);
    --nav: rgba(243,242,238,.8); --glass: rgba(255,255,255,.7); --chip: rgba(120,160,0,.12);
    --accent-text: #4A6500; --track: #E2E0D9; --go-text: #10663B; --ready-lane: rgba(120,160,0,.08);
    --phone-screen: #0F1012; --phone-ink: #F3F2EE;
    --shadow: 0 30px 60px -30px rgba(15,16,18,.25);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F3F2EE; --bg-2: #E9E7E0; --surface: #FFFFFF; --surface-2: #ECEAE3; --surface-hi: #FFFFFF;
  --ink: #0F1012; --muted: #5D6066; --faint: #C9C7BF;
  --line: rgba(15,16,18,.09); --line-strong: rgba(15,16,18,.22);
  --nav: rgba(243,242,238,.8); --glass: rgba(255,255,255,.7); --chip: rgba(120,160,0,.12);
  --accent-text: #4A6500; --track: #E2E0D9; --go-text: #10663B; --ready-lane: rgba(120,160,0,.08);
  --phone-screen: #0F1012; --phone-ink: #F3F2EE;
  --shadow: 0 30px 60px -30px rgba(15,16,18,.25);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6;
  background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }

/* ---------- motion primitives ---------- */
@keyframes kRing { 0% { transform: translate(-50%,-50%) scale(.5); opacity: .6 } 100% { transform: translate(-50%,-50%) scale(1.65); opacity: 0 } }
@keyframes kBuzz { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-2deg) translateX(-3px) } 75% { transform: rotate(2deg) translateX(3px) } }
@keyframes kUp { from { opacity: 0; transform: translateY(28px); filter: blur(6px) } to { opacity: 1; transform: none; filter: none } }
@keyframes kBeacon { 0% { box-shadow: 0 0 0 0 rgba(200,243,29,.55) } 70% { box-shadow: 0 0 0 14px rgba(200,243,29,0) } 100% { box-shadow: 0 0 0 0 rgba(200,243,29,0) } }
@keyframes kBeaconGo { 0% { box-shadow: 0 0 0 0 rgba(46,190,115,.6) } 70% { box-shadow: 0 0 0 10px rgba(46,190,115,0) } 100% { box-shadow: 0 0 0 0 rgba(46,190,115,0) } }
@keyframes kFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes kMarq { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes kReveal { from { opacity: 0; transform: translateY(60px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes kGlow { 0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(1) } 50% { opacity: .9; transform: translate(-50%,-50%) scale(1.08) } }
@keyframes kIn { from { opacity: 0; transform: scale(.94) translateY(10px) } to { opacity: 1; transform: none } }
@keyframes kToast { 0% { opacity: 0; transform: translate(-50%,18px) scale(.96) } 12%,82% { opacity: 1; transform: translate(-50%,0) } 100% { opacity: 0; transform: translate(-50%,8px) } }
@keyframes kWave { 0% { transform: scale(.7); opacity: .75 } 100% { transform: scale(1.8); opacity: 0 } }
@keyframes kSpin { to { transform: rotate(360deg) } }
@keyframes kType { from { transform: translateY(10px) scale(.9); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes kBlink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
@keyframes kPop { 0% { transform: scale(.85); opacity: 0 } 100% { transform: none; opacity: 1 } }

.beacon { animation: kBeacon 1.8s infinite; }
.up { animation: kUp 1.1s var(--ease) both; }
.up.d1 { animation-delay: .1s } .up.d2 { animation-delay: .22s } .up.d3 { animation-delay: .34s } .up.d4 { animation-delay: .5s }
.ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.5); opacity: 0; width: 560px; height: 560px; border-radius: 50%; border: 1.5px solid currentColor; animation: kRing 2.6s cubic-bezier(.2,.6,.3,1) infinite; pointer-events: none; }
.ring.r2 { animation-delay: .87s } .ring.r3 { animation-delay: 1.73s }
.buzz { animation: kBuzz .15s linear 7; }
.buzz-loop { animation: kBuzz .14s linear infinite; }
.float { animation: kFloat 6s ease-in-out infinite; } .float.f2 { animation-delay: -3s; }
.glow { position: absolute; top: 50%; left: 50%; width: 760px; height: 760px; border-radius: 50%; filter: blur(40px); animation: kGlow 7s ease-in-out infinite; pointer-events: none;
  background: radial-gradient(circle, rgba(200,243,29,.26), transparent 62%); transition: background .8s; }
.is-ready .glow, .glow.go { background: radial-gradient(circle, rgba(200,243,29,.32), transparent 62%); }
.pop { animation: kPop .6s var(--ease) both; }
@supports (animation-timeline: view()) {
  .reveal { animation: kReveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
}

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.brand-mark { position: relative; width: 28px; height: 28px; border-radius: 9px; background: var(--ink); flex: none; transition: background-color .6s var(--ease); }
.brand-mark i { position: absolute; inset: 8px; border-radius: 50%; background: var(--amber); }
.brand-word { direction: ltr; }

/* ---------- buttons ---------- */
.btn {
  --b: var(--ink); --f: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  background: var(--b); color: var(--f); font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), background-color .5s var(--ease), color .5s var(--ease), opacity .2s, border-color .5s;
}
.btn:hover { transform: scale(1.025); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-amber { --b: var(--amber); --f: var(--amber-ink); }
.btn-go { --b: var(--amber); --f: #0F1012; }
.btn-ghost { --b: transparent; --f: var(--ink); border-color: var(--line-strong); }
.btn-quiet { --b: transparent; --f: var(--muted); padding: 0 12px; }
.btn-quiet:hover { --f: var(--ink); transform: none; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { min-height: 58px; padding: 0 32px; font-size: 18px; }
.btn-block { width: 100%; }
.tgl {
  min-width: 40px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .4s, background-color .3s;
}
.tgl:hover { background: var(--surface); }
.tgl-icon { width: 38px; padding: 0; }
.tgl .i-moon { display: none; }
:root[data-theme="light"] .tgl .i-sun { display: none; } :root[data-theme="light"] .tgl .i-moon { display: block; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .tgl .i-sun { display: none; } :root:not([data-theme="dark"]) .tgl .i-moon { display: block; } }

/* ---------- fields ---------- */
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-weight: 600; font-size: 14px; }
.field input, .field textarea, .field select, .input {
  width: 100%; min-height: 56px; padding: 0 18px; border-radius: 18px; border: 1px solid var(--line-strong);
  background: var(--surface-hi); color: var(--ink); font-size: 17px; transition: border-color .2s, box-shadow .2s, background-color .5s;
}
.field input:focus, .input:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 4px rgba(200,243,29,.28); }
.field .help { font-size: 13px; color: var(--muted); }
.errorlist { list-style: none; margin: 0; padding: 0; color: var(--danger); font-size: 14px; }
.alert { padding: 14px 18px; border-radius: 18px; margin-bottom: 18px; background: var(--surface); font-size: 15px; }
.alert-error { color: var(--danger); }
.alert-success { color: var(--go-text); }

/* ---------- site nav (landing) ---------- */
.site-nav { position: sticky; top: 0; z-index: 30; background: var(--nav); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); transition: background-color .6s var(--ease); }
.site-nav .wrap { height: 64px; display: flex; align-items: center; gap: 28px; }
.site-nav .links { display: flex; gap: 26px; font-size: 14px; color: var(--muted); }
.site-nav .links a { text-decoration: none; transition: color .2s; }
.site-nav .links a:hover { color: var(--ink); }
.site-nav .end { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 96px 0 40px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px; background: var(--chip); color: var(--accent-text); font-size: 14px; font-weight: 500; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.hero h1 { margin: 26px auto 22px; max-width: 14ch; font-size: clamp(48px, 8vw, 104px); line-height: 1.02; font-weight: 700; letter-spacing: -.035em; }
.hero .lead { margin: 0 auto 38px; max-width: 40ch; font-size: clamp(18px, 2vw, 22px); line-height: 1.6; color: var(--muted); }
.hero .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.hero .note { margin: 18px 0 0; font-size: 14px; color: var(--muted); }

.stage { position: relative; max-width: 1180px; height: 700px; margin: 72px auto 0; }
.stage .rings { position: absolute; inset: 0; color: rgba(200,243,29,.38); transition: color .6s; }
.stage.is-ready .rings { color: rgba(200,243,29,.6); }
.phone { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; }
.phone-body { width: 310px; height: 640px; border-radius: 54px; background: #0A0807; padding: 11px; box-shadow: 0 60px 120px -40px rgba(0,0,0,.65), inset 0 0 0 1.5px rgba(255,255,255,.1); }
.phone-screen { position: relative; height: 100%; border-radius: 44px; overflow: hidden; background: var(--phone-screen); color: var(--phone-ink); display: flex; flex-direction: column; align-items: center; padding: 64px 24px 28px; transition: background-color .6s var(--ease), color .6s var(--ease); }
.phone-screen::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 104px; height: 30px; border-radius: 20px; background: #0A0807; }
.stage.is-ready .phone-screen { background: var(--amber); color: #0F1012; }
.phone-screen .venue { font-size: 13px; opacity: .7; }
.phone-screen .ps { width: 100%; text-align: center; }
.phone-screen .ps-wait { margin-top: 76px; }
.phone-screen .ps-ready { margin-top: 56px; display: none; }
.stage.is-ready .ps-wait { display: none; } .stage.is-ready .ps-ready { display: block; }
.ps .big { font-size: 112px; font-weight: 700; line-height: 1; margin: 10px 0 24px; letter-spacing: -.03em; }
.ps-ready .big { font-size: 96px; margin: 16px 0; }
.ps .status { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.ps .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); }
.ps .small { margin-top: 80px; font-size: 13px; opacity: .6; line-height: 1.6; }
.ps .check { width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.18); margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; }
.ps .title { font-size: 30px; font-weight: 700; }
.ps .fake-btn { margin-top: 44px; background: rgba(0,0,0,.28); border-radius: 999px; padding: 15px; font-weight: 600; font-size: 15px; }
.side-card { position: absolute; z-index: 4; width: 250px; background: var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--line); border-radius: 26px; padding: 18px; text-align: start; box-shadow: var(--shadow); transition: background-color .6s var(--ease); }
.side-card.a { top: 120px; inset-inline-end: 40px; }
.side-card.b { bottom: 110px; inset-inline-start: 40px; width: 280px; }
.side-card .lbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.side-card .n { font-size: 46px; font-weight: 700; text-align: center; line-height: 1.1; margin-bottom: 14px; }
.tv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tv-chips span { background: var(--surface-2); border-radius: 12px; padding: 6px 14px; font-weight: 700; font-size: 24px; transition: background-color .5s, color .5s; }
.tv-chips span.on, .stage.is-ready .tv-chips span.flip { background: var(--amber); color: #0F1012; }

/* ---------- marquee ---------- */
.marquee { border-block: 1px solid var(--line); overflow: hidden; white-space: nowrap; padding: 22px 0; margin-top: 40px; direction: ltr; }
.marquee .track { display: inline-flex; gap: 56px; font-weight: 600; font-size: 22px; color: var(--muted); animation: kMarq 40s linear infinite; }
.marquee .item { display: inline-flex; gap: 12px; align-items: center; }
.marquee .item i { width: 8px; height: 8px; border-radius: 50%; background: var(--go); }
.marquee .item i.w { background: var(--amber); }
.marquee .item b { color: var(--ink); }
.marquee .item span { font-weight: 400; font-size: 17px; }

/* ---------- sections ---------- */
.section { padding: 150px 0 40px; }
.section-head { text-align: center; margin-bottom: 72px; }
.section-head h2 { margin: 0 auto 18px; font-size: clamp(38px, 5vw, 64px); line-height: 1.08; letter-spacing: -.03em; max-width: 16ch; }
.section-head p { margin: 0 auto; font-size: clamp(17px, 1.8vw, 21px); color: var(--muted); max-width: 46ch; line-height: 1.6; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step { background: var(--surface); border-radius: var(--r-l); padding: 40px 34px; min-height: 340px; display: flex; flex-direction: column; gap: 20px; transition: transform .5s var(--ease), background-color .6s var(--ease); }
.step:hover { transform: translateY(-6px); }
.step .no { font-size: 15px; font-weight: 600; color: var(--accent-text); }
.step .ic { flex: 1; display: flex; align-items: center; justify-content: center; }
.step .ic span { width: 92px; height: 92px; border-radius: 28px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.step h3 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.step p { margin: 0; line-height: 1.65; opacity: .75; }
.step.hl { background: var(--amber); color: var(--amber-ink); }
.step.hl .no { color: var(--amber-ink); } .step.hl .ic span { background: rgba(26,19,16,.1); }

.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile-b { background: var(--surface); border-radius: 36px; padding: 44px; min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; overflow: hidden; transition: background-color .6s var(--ease); }
.tile-b.span2 { grid-column: span 2; }
.tile-b h3 { margin: 0 0 12px; font-size: 34px; letter-spacing: -.02em; }
.tile-b p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 17px; max-width: 44ch; }
.tile-b.amber { background: var(--amber); color: var(--amber-ink); }
.tile-b.amber p { color: var(--amber-ink); }
.tile-b .huge { font-size: 120px; font-weight: 700; line-height: .9; letter-spacing: -.04em; }
.minis { display: flex; gap: 12px; flex-wrap: wrap; }
.minis div { background: var(--surface-2); border-radius: 20px; padding: 14px 20px; min-width: 104px; text-align: center; transition: background-color .6s; }
.minis div.go { background: var(--go); color: #fff; }
.minis b { display: block; font-size: 34px; letter-spacing: -.02em; }
.minis small { font-size: 12px; opacity: .8; }
.bars { display: flex; gap: 9px; align-items: flex-end; height: 170px; direction: ltr; }
.bars i { width: 24px; border-radius: 8px 8px 3px 3px; background: var(--surface-2); transition: background-color .6s; }
.bars i.peak { background: var(--amber); }
.row-split { display: flex; gap: 40px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; border-radius: 36px; padding: 40px 36px; display: flex; flex-direction: column; gap: 22px; border: 1px solid transparent; background: var(--surface); transition: transform .5s var(--ease), background-color .6s var(--ease); }
.plan:hover { transform: translateY(-6px); }
.plan.outline { background: transparent; border-color: var(--line-strong); }
.plan.hl { background: var(--amber); color: var(--amber-ink); }
.plan h3 { margin: 0 0 6px; font-size: 22px; }
.plan .desc { margin: 0; opacity: .7; font-size: 15px; }
.plan .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan .price b { font-size: 72px; line-height: 1; letter-spacing: -.04em; }
.plan .price span { opacity: .7; }
.plan .note { font-size: 14px; opacity: .75; min-height: 20px; }
.plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li svg { flex: none; margin-top: 3px; color: var(--accent-text); }
.plan.hl li svg { color: var(--amber-ink); }
.plan .btn { margin-top: auto; }
.plan.hl .btn { --b: var(--amber-ink); --f: #F3F2EE; }
.plan .badge { position: absolute; top: -15px; inset-inline-start: 32px; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 600; }
.plan.current { box-shadow: 0 0 0 2px var(--go-bright); }
.fine { margin: 32px 0 0; color: var(--muted); font-size: 14px; text-align: center; }

.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 24px 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 20px; font-weight: 500; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; transition: transform .35s var(--ease); }
.faq details[open] .plus { transform: rotate(45deg); }
.faq p { margin: 14px 0 0; color: var(--muted); line-height: 1.8; font-size: 17px; max-width: 64ch; }

.cta-box { position: relative; border-radius: var(--r-xl); padding: 110px 40px; text-align: center; overflow: hidden; background: var(--surface); }
.cta-box .rings { position: absolute; inset: 0; color: rgba(200,243,29,.38); }
.cta-box .ring { width: 460px; height: 460px; }
.cta-box .inner { position: relative; }
.cta-box h2 { margin: 0 0 16px; font-size: clamp(38px, 5vw, 64px); letter-spacing: -.03em; }
.cta-box p { margin: 0 0 36px; color: var(--muted); font-size: 21px; }
.site-foot { padding: 0 0 48px; }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 28px; }
.site-foot nav { display: flex; gap: 22px; }
.site-foot a { text-decoration: none; }
.site-foot .by { flex-basis: 100%; margin: 4px 0 0; text-align: center; }
.site-foot .by b { color: var(--ink); font-weight: 700; }

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { position: relative; background: var(--surface); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.auth-side .rings { position: absolute; inset: 0; color: rgba(200,243,29,.3); }
.auth-side .ring { width: 420px; height: 420px; }
.auth-side .big { position: relative; font-size: 140px; font-weight: 700; letter-spacing: -.04em; line-height: 1; text-align: center; }
.auth-side blockquote { position: relative; margin: 0; font-size: 28px; line-height: 1.35; max-width: 18ch; letter-spacing: -.01em; }
.auth-main { display: grid; place-items: center; padding: 40px 24px; position: relative; }
.auth-top { position: absolute; top: 24px; inset-inline-end: 24px; display: flex; gap: 8px; }
.auth-card { width: min(420px, 100%); }
.auth-card h1 { font-size: 40px; letter-spacing: -.03em; margin: 0 0 8px; line-height: 1.15; }
.auth-card .sub { color: var(--muted); margin: 0 0 30px; font-size: 17px; }
.auth-switch { margin-top: 22px; color: var(--muted); }
.auth-switch a { color: var(--accent-text); }

/* ---------- onboarding ---------- */
.ob { min-height: 100vh; display: grid; grid-template-columns: 400px minmax(0, 1fr); }
.ob-side { background: var(--bg-2); padding: 36px 34px 32px; display: flex; flex-direction: column; gap: 32px; transition: background-color .6s var(--ease); }
.ob-side .top { display: flex; justify-content: space-between; align-items: center; }
.ob-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ob-steps li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 20px; color: var(--muted); transition: background-color .4s; }
.ob-steps li .dot { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; background: var(--line); transition: background-color .4s, color .4s; }
.ob-steps li b { display: block; font-weight: 600; }
.ob-steps li small { font-size: 13px; color: var(--muted); }
.ob-steps li.cur { background: var(--surface-2); color: var(--ink); }
.ob-steps li.cur .dot { background: var(--amber); color: var(--amber-ink); }
.ob-steps li.done { color: var(--ink); }
.ob-steps li.done .dot { background: var(--go); color: #fff; }
.ob-card { margin-top: auto; background: var(--surface-hi); border-radius: 26px; padding: 20px; display: flex; gap: 16px; align-items: center; }
.ob-card .qr-mini { flex: none; width: 100px; height: 100px; border-radius: 14px; background: #FFFFFF; padding: 7px; }
.ob-card .qr-mini svg { width: 100%; height: 100%; display: block; }
.ob-card .lbl { font-size: 12px; color: var(--muted); }
.ob-card .nm { font-weight: 700; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-card p { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ob-trial { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.ob-trial i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.ob-main { padding: 52px clamp(24px, 6vw, 72px) 40px; display: flex; flex-direction: column; }
.ob-progress { display: flex; justify-content: space-between; align-items: center; margin-bottom: 44px; font-size: 14px; color: var(--muted); }
.ob-progress .bar { width: 220px; height: 5px; border-radius: 5px; background: var(--track); overflow: hidden; }
.ob-progress .bar i { display: block; height: 100%; background: var(--amber); border-radius: 5px; transition: width .6s var(--ease); }
.ob-panel { display: none; flex-direction: column; gap: 28px; max-width: 720px; }
.ob-panel.on { display: flex; animation: kUp .6s var(--ease) both; }
.ob-panel h1 { margin: 0 0 12px; font-size: clamp(32px, 4vw, 46px); line-height: 1.12; letter-spacing: -.03em; }
.ob-panel .sub { margin: 0; color: var(--muted); font-size: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-size: 16px; font-weight: 500; cursor: pointer; transition: transform .3s var(--ease), background-color .3s, color .3s, border-color .3s; }
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.opts { display: grid; gap: 14px; }
.opts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { border-radius: 28px; border: 2px solid transparent; background: var(--surface-hi); padding: 24px; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 10px; text-align: start; transition: transform .3s var(--ease), border-color .3s, background-color .3s, color .3s; }
.opt:hover { transform: translateY(-3px); }
.opt[aria-pressed="true"] { border-color: var(--accent-text); }
.opt .sample { font-size: 44px; font-weight: 700; letter-spacing: -.03em; }
.opt b { font-size: 18px; } .opt small { font-size: 14px; color: var(--muted); }
.opts.three .opt { align-items: center; text-align: center; border: 1px solid var(--line-strong); }
.opts.three .opt[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.opts.three .opt[aria-pressed="true"] small { color: inherit; opacity: .75; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface-hi); border: 0; border-radius: 24px; padding: 18px 22px; color: var(--ink); cursor: pointer; text-align: start; }
.switch-row b { display: block; font-size: 17px; } .switch-row small { font-size: 14px; color: var(--muted); }
.switch { flex: none; width: 52px; height: 32px; border-radius: 32px; background: var(--track); position: relative; transition: background-color .3s; }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: inset-inline-start .3s var(--ease); }
[aria-pressed="true"] > .switch { background: var(--go); }
[aria-pressed="true"] > .switch::after { inset-inline-start: 23px; }
.tv-thumb { flex: none; width: 78px; height: 48px; border-radius: 10px; background: #0F1012; display: flex; align-items: center; justify-content: center; gap: 6px; direction: ltr; }
.tv-thumb span { background: var(--go); color: #fff; font-weight: 700; font-size: 13px; border-radius: 5px; padding: 1px 6px; }
.ob-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 28px; }
.done-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: center; }
.check-badge { width: 66px; height: 66px; border-radius: 50%; background: var(--go); display: flex; align-items: center; justify-content: center; }

/* ---------- app shell ---------- */
.app-head { border-bottom: 1px solid var(--line); background: #0F1012; color: #F3F2EE; --ink: #F3F2EE; --muted: #A3A6AD; --surface: #1B1D21; --line: rgba(243,242,238,.12); --line-strong: rgba(243,242,238,.24); --accent-text: #D7F66A; --go-text: #7FD9A6; --surface-hi: #202328; --chip: rgba(200,243,29,.14); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 20; }
.app-head .wrap-wide { min-height: 72px; padding: 10px 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.venue-meta { padding-inline-start: 18px; border-inline-start: 1px solid var(--line); display: flex; flex-direction: column; line-height: 1.35; }
.venue-meta b { font-weight: 600; }
.venue-meta small { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa5b1; }
[data-conn="on"] .conn-dot { background: var(--go-bright); animation: kBeaconGo 1.8s infinite; }
[data-conn="off"] .conn-dot { background: var(--danger); }
.app-nav { margin-inline-start: auto; display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.app-nav a, .app-nav button.lnk { color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 999px; background: none; border: 0; cursor: pointer; font-size: 14px; transition: color .2s, background-color .2s; }
.app-nav a:hover, .app-nav button.lnk:hover { color: var(--ink); background: var(--surface); }
.app-nav a[aria-current="page"] { color: #0F1012; background: var(--amber); font-weight: 600; }
.app-tools { display: flex; gap: 6px; align-items: center; }
.trial-bar { background: var(--chip); color: var(--accent-text); font-size: 14px; text-align: center; padding: 8px 16px; }
.trial-bar a { font-weight: 600; }
.wrap-wide { width: 100%; }

.board { display: grid; grid-template-columns: minmax(0, 1fr) 330px 340px; min-height: calc(100vh - 72px); }
.board-col { padding: 28px; }
.board-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.board-head h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.board-head .count { font-weight: 600; color: var(--muted); font-size: 20px; }
.board-head .hint { margin-inline-start: auto; font-size: 14px; color: var(--muted); }
.stats { display: flex; gap: 8px; flex-wrap: wrap; }
.stat { padding: 8px 18px; border-radius: 16px; background: var(--surface); min-width: 108px; transition: background-color .6s; }
.stat b { display: block; font-size: 22px; line-height: 1.2; }
.stat span { font-size: 12px; color: var(--muted); }
.stat.w b { color: var(--accent-text); } .stat.r b { color: var(--go-text); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.tile { position: relative; text-align: center; border: 0; border-radius: 28px; background: var(--surface); padding: 18px 16px 16px; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 12px; overflow: hidden; transition: transform .35s var(--ease), background-color .6s; animation: kIn .45s var(--ease) both; }
.tile:hover { transform: translateY(-4px); }
.tile:active { transform: scale(.97); }
.tile .top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.tile .src { display: inline-flex; align-items: center; gap: 5px; }
.tile .age { font-weight: 600; }
.tile .n { font-size: 66px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.tile .bar { height: 5px; border-radius: 5px; background: var(--track); overflow: hidden; }
.tile .bar i { display: block; height: 100%; border-radius: 5px; background: var(--muted); transition: width 1s linear, background-color .5s; }
.tile.warn .bar i { background: var(--amber); }
.tile.late .bar i { background: var(--danger); } .tile.late .age { color: var(--danger); }
.tile .go-pill { min-height: 46px; border-radius: 999px; background: var(--amber); color: #0F1012; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tile .x { position: absolute; top: 12px; inset-inline-end: 50%; transform: translateX(50%); opacity: 0; }
.tile-cancel { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .2s; }
.tile-wrap { position: relative; }
.tile-wrap:hover .tile-cancel, .tile-cancel:focus-visible { opacity: 1; }
/* touch screens (tablets at the counter) have no hover: keep the cancel button visible */
@media (hover: none) { .tile-cancel { opacity: .8; width: 36px; height: 36px; } }
.empty { border: 1.5px dashed var(--line-strong); border-radius: 28px; padding: 64px 24px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-size: 20px; margin-bottom: 6px; }

.ready-lane { background: var(--ready-lane); display: flex; flex-direction: column; gap: 14px; }
.ready-lane .board-head h2, .ready-lane .board-head .count { color: var(--go-text); }
.rrow { background: var(--surface); border-radius: 24px; padding: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; animation: kIn .45s var(--ease) both; }
.rrow .acts { display: flex; gap: 8px; width: 100%; }
.rrow .acts .btn { flex: 1; }
.rrow .badge { position: relative; flex: none; width: 64px; height: 64px; border-radius: 20px; background: #0F1012; color: var(--amber); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; }
.rrow .badge .wave { position: absolute; inset: 0; border-radius: 20px; border: 2px solid var(--go-bright); animation: kWave 1.4s ease-out infinite; }
.rrow .meta { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; }
.rrow .meta b { font-weight: 600; font-size: 14px; }
.rrow .meta small { font-size: 12px; color: var(--muted); }
.icon-btn { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; transition: background-color .2s; }
.icon-btn:hover { background: var(--surface-2); }
.lane-empty { color: var(--go-text); font-size: 14px; line-height: 1.7; padding: 8px 4px; }

.pad { border-inline-start: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.pad h2 { margin: 0; font-size: 18px; } .pad .sub { font-size: 13px; color: var(--muted); margin-top: -10px; }
.pad-screen { height: 86px; border-radius: 24px; background: var(--surface); font-size: 52px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; color: var(--muted); transition: background-color .6s; }
.pad-screen.has { color: var(--ink); }
.keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; direction: ltr; }
.key { height: 60px; border-radius: 20px; border: 0; background: var(--surface); color: var(--ink); font-size: 24px; font-weight: 500; cursor: pointer; transition: transform .08s, background-color .2s; }
.key:hover { background: var(--surface-2); }
.key:active { transform: scale(.94); }
.key.sm { font-size: 15px; }

.toast { position: fixed; bottom: 28px; left: 50%; z-index: 60; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 12px 22px 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); font-size: 15px; animation: kToast 2.6s var(--ease) both; }
.toast i { width: 28px; height: 28px; border-radius: 50%; background: var(--go); display: flex; align-items: center; justify-content: center; }

/* ---------- inner pages ---------- */
.page { padding: 40px 0 72px; }
.page-title { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.03em; margin: 0 0 8px; }
.page-sub { color: var(--muted); margin: 0 0 32px; font-size: 17px; }
.panel { background: var(--surface); border-radius: var(--r-l); padding: 32px; transition: background-color .6s; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: start; }
.link-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.link-row code { flex: 1; direction: ltr; text-align: left; background: var(--surface-hi); border-radius: 16px; padding: 14px 16px; font-family: inherit; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-card { background: #FFFFFF; color: #0F1012; border-radius: 36px; padding: 40px 32px; text-align: center; max-width: 420px; margin-inline: auto; box-shadow: var(--shadow); }
.qr-card h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.qr-card .tag { font-size: 14px; color: #6B5D50; margin-top: 4px; }
.qr-card .qr { width: 240px; margin: 24px auto 18px; background: #fff; border-radius: 20px; padding: 14px; }
.qr-card .qr svg { width: 100%; height: auto; display: block; }
.qr-card .flow { display: flex; justify-content: center; gap: 8px; font-size: 13px; color: #4F4339; flex-wrap: wrap; }
.qr-card .foot { margin-top: 18px; font-size: 12px; color: #6B5D50; direction: ltr; }
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { padding: 14px 18px; text-align: start; border-bottom: 1px solid var(--line); }
table.list th { font-size: 13px; color: var(--muted); font-weight: 500; }
.pill { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface-2); }
.pill-waiting { color: var(--accent-text); } .pill-ready { color: var(--go-text); } .pill-cancelled { color: var(--danger); }

/* ---------- customer ---------- */
.cust { min-height: 100svh; display: flex; flex-direction: column; max-width: 460px; margin-inline: auto; padding: 24px 22px 22px; }
body.is-ready { background: var(--amber); color: #0F1012; }
.cust-head { display: flex; align-items: center; gap: 12px; }
.cust-head .logo { width: 46px; height: 46px; border-radius: 15px; background: #0F1012; color: var(--amber); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; flex: none; }
.cust-head .who { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.cust-head .who b { font-size: 18px; font-weight: 600; }
.cust-head .who small { font-size: 13px; color: var(--muted); }
.state { display: none; flex: 1; flex-direction: column; }
.state.on { display: flex; animation: kUp .6s var(--ease) both; }
.receipt { position: relative; margin-top: 24px; background: var(--surface); border-radius: 28px; padding: 22px 20px 26px; transition: background-color .6s; }
.receipt .lbl { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.receipt .digits { height: 100px; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 80px; font-weight: 700; letter-spacing: -.02em; direction: ltr; }
.receipt .digits span { animation: kType .22s var(--ease) both; }
.receipt .digits .ph { color: var(--faint); animation: none; }
.receipt .caret { width: 3px; height: 64px; background: var(--amber); border-radius: 2px; margin-inline-start: 8px; animation: kBlink 1s step-end infinite; }
.receipt .perf { border-top: 2px dashed var(--line-strong); margin: 6px -20px 0; }
.receipt::before, .receipt::after { content: ""; position: absolute; bottom: 16px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); }
.receipt::before { right: -11px; } .receipt::after { left: -11px; }
.cust .keys { margin-top: 16px; }
.cust .key { border-radius: 20px; font-size: 26px; }
.cust .letters { display: flex; gap: 8px; margin-top: 10px; direction: ltr; }
.cust .letters .key { flex: 1; height: 48px; font-size: 18px; }
.form-error { color: var(--danger); text-align: center; min-height: 1.6em; margin: 10px 0 0; font-size: 14px; }
.cust .go-btn { margin-top: auto; }
.cust .fine-print { text-align: center; font-size: 12px; color: var(--muted); margin-top: 12px; }
.wait-center { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dial { position: relative; width: 292px; height: 292px; margin-top: 30px; display: flex; align-items: center; justify-content: center; }
.dial svg { position: absolute; inset: 0; }
.dial .track { stroke: var(--track); } .dial .prog { stroke: var(--amber); transition: stroke-dashoffset 1s linear; }
.dial .orbit { animation: kSpin 9s linear infinite; transform-origin: 50% 50%; }
.dial .orbit circle { fill: var(--ink); }
.dial .lbl { font-size: 14px; color: var(--muted); }
.dial .n { font-size: 100px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.dial .st { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; margin-top: 6px; }
.dial .st i { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
.wait-line { margin-top: 26px; font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 32ch; }
.tips { margin-top: auto; width: 100%; background: var(--surface); border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 12px; text-align: start; }
.tips .tip { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--muted); }
.tips .tip svg { flex: none; color: var(--ink); }
.tips .tip.warn { color: var(--accent-text); }
.tips .tip.ok { color: var(--go-text); }
.tips .tip.ok svg { color: var(--go-text); }
.tips .row { display: flex; gap: 10px; }
.ready-center { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; color: #0F1012; }
.ready-center .venue { font-size: 14px; opacity: .85; }
.ready-orb { position: relative; overflow: visible; contain: layout; width: 300px; height: 300px; margin-top: 46px; display: flex; align-items: center; justify-content: center; }
.ready-orb .ring { width: 360px; height: 360px; border: 2px solid rgba(15,16,18,.3); animation-duration: 2.2s; }
.ready-orb .core { position: relative; width: 232px; height: 232px; border-radius: 50%; background: #0F1012; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); }
.ready-orb .core small { font-size: 14px; color: #C9CBD0; }
.ready-orb .core b { font-size: 104px; line-height: 1; letter-spacing: -.03em; }
.ready-center h1 { margin: 40px 0 6px; font-size: 40px; letter-spacing: -.02em; }
.ready-center p { margin: 0; font-size: 18px; opacity: .92; }
.ready-center .btn { margin-top: auto; --b: #0F1012; --f: #fff; width: 100%; }
.done-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.done-center .badge { width: 76px; height: 76px; border-radius: 50%; background: var(--amber); display: flex; align-items: center; justify-content: center; }
.done-center h1 { margin: 10px 0 0; font-size: 34px; letter-spacing: -.02em; }
.cust-foot { text-align: center; padding-top: 14px; font-size: 12px; color: var(--muted); }
body.is-ready .cust-foot { color: rgba(15,16,18,.7); }
.unlock { position: fixed; inset: 0; background: rgba(15,16,18,.92); backdrop-filter: blur(10px); color: #F3F2EE; display: none; align-items: center; justify-content: center; text-align: center; padding: 24px; z-index: 50; }
.unlock.on { display: flex; }
.unlock h2 { margin: 0 0 8px; font-size: 28px; letter-spacing: -.02em; }
.unlock p { margin: 0 0 24px; opacity: .8; }

/* ---------- TV ---------- */
.tv { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.tv-head { display: flex; justify-content: space-between; align-items: center; padding: 2.4vh 3vw; border-bottom: 1px solid var(--line); }
.tv-head h1 { margin: 0; font-size: 2.6vw; letter-spacing: -.02em; }
.tv-head .clock { font-size: 2vw; color: var(--muted); }
.tv-body { display: grid; grid-template-columns: .8fr 1.2fr; }
.tv-col { padding: 3vh 3vw; }
.tv-col + .tv-col { border-inline-start: 1px solid var(--line); }
.tv-col h2 { font-size: 2vw; margin: 0 0 3vh; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.tv-col h2 i { width: 1.1vw; height: 1.1vw; border-radius: 50%; display: inline-block; background: var(--amber); }
.tv-ready h2 i { background: var(--go-bright); }
.tv-grid { display: flex; flex-wrap: wrap; gap: 1.4vw; align-content: flex-start; direction: ltr; }
.tv-num { line-height: 1.15; font-variant-numeric: tabular-nums; }
.tv-wait .tv-num { font-size: 3.6vw; color: var(--muted); min-width: 7vw; }
.tv-ready .tv-num { font-size: 6.4vw; font-weight: 700; color: #0F1012; background: var(--amber); padding: .4vw 2vw; border-radius: 1.2vw; min-width: 12vw; text-align: center; }
.tv-ready .tv-num.new { animation: kPop .8s var(--ease) both; }
.tv-foot { padding: 1.6vh 3vw; font-size: 1.2vw; color: var(--muted); display: flex; justify-content: space-between; }
.tv-empty { font-size: 1.6vw; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .board { grid-template-columns: 1fr 1fr; }
  .pad { grid-column: 1 / -1; border-inline-start: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .steps, .bento, .plans, .two-col, .done-grid, .opts.three { grid-template-columns: minmax(0, 1fr); }
  .tile-b.span2 { grid-column: auto; }
  .site-nav .links, .side-card { display: none; }
  .auth, .ob { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .ob-side { gap: 20px; } .ob-steps { display: none; }
  .stage { height: 680px; }
  .board { grid-template-columns: 1fr; }
  .app-head .stats { order: 3; width: 100%; }
}
@media (max-width: 520px) {
  .site-nav .end .btn { display: none; }
  .opts.two { grid-template-columns: 1fr; }
  .wrap { width: calc(100% - 32px); }
  .tile-b, .plan, .step { padding: 30px 24px; }
  .cta-box { padding: 72px 24px; }
}
@media print {
  body { background: #fff; }
  .no-print, .app-head, .trial-bar { display: none !important; }
  .qr-card { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- WhatsApp opt-in ---------- */
.btn-wa { --b: #1FA855; --f: #fff; }
.wa-box { width: 100%; margin-top: 22px; text-align: center; }
.wa-hint { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.wa-box.done .btn-wa { --b: transparent; --f: var(--go-text); border-color: var(--line-strong); }
.tile .wa-dot { display: inline-flex; align-items: center; gap: 3px; color: #1FA855; font-weight: 600; }

/* ---------- Apple Wallet ---------- */
.btn-wallet { --b: #000; --f: #fff; }
:root[data-theme="light"] .btn-wallet { --b: #000; }
.wallet-box { width: 100%; margin-top: 22px; text-align: center; }
.wallet-box.done .btn-wallet { --b: transparent; --f: var(--go-text); border-color: var(--line-strong); }

/* ---------- latte mini game (static/js/game.js) ---------- */
.game-cta { width: 100%; display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; padding: 14px 16px; text-align: start;
  border-radius: 18px; border: 1.5px solid rgba(200,243,29,.6); background: rgba(200,243,29,.12); color: var(--ink); cursor: pointer; font: inherit; }
.game-cta .ic { font-size: 26px; } .game-cta .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.game-cta .tx small { font-size: 12px; color: var(--muted); } .game-cta .go { color: var(--accent-text); }
.game-result { display: inline-block; margin: 6px 0 0; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.18); font-weight: 700; font-size: 15px; }
body.game-open { overflow: hidden; }
.game { --g-accent: var(--amber); position: fixed; inset: 0; z-index: 90; background: var(--bg); color: var(--ink); display: flex; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 18px max(12px, env(safe-area-inset-bottom)); animation: gIn .35s var(--ease, ease) both; }
@keyframes gIn { from { opacity: 0; transform: scale(.97); } }
.game-play { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 12px; transition: filter .3s; }
.game-play.dim { filter: blur(6px); pointer-events: none; }
.game-top { display: flex; align-items: center; gap: 12px; }
.game-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface); color: var(--muted); font-size: 15px; cursor: pointer; }
.game-who { flex: 1; min-width: 0; display: flex; flex-direction: column; } .game-who b, .game-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-who small, .game-score small { font-size: 12px; color: var(--muted); }
.game-score { display: flex; flex-direction: column; align-items: flex-end; } .game-score b { font-size: 26px; font-weight: 800; }
.game-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; direction: ltr; }
.game-bar i { display: block; height: 100%; width: 100%; background: var(--g-accent); border-radius: inherit; }
.game-bar.thin i { background: var(--go-bright); } .game-bar i.low { background: var(--danger); }
.game-recipe { background: var(--surface); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.game-dname { font-size: 20px; font-weight: 800; }
.game-steps { display: flex; align-items: center; gap: 6px; }
.game-step { flex: 1; text-align: center; padding: 6px 8px; border-radius: 999px; background: var(--bg); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1.5px solid transparent; }
.game-step.cur { background: color-mix(in srgb, var(--g-accent) 22%, transparent); border-color: var(--g-accent); } .game-step.done { background: rgba(46,190,115,.25); }
.game-arrow { font-style: normal; color: var(--muted); font-size: 12px; } [dir="ltr"] .game-arrow { transform: scaleX(-1); }
.game-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 230px; }
.game-cup { position: relative; width: 160px; height: 190px; border: 4px solid var(--line-strong); border-top: 0; border-radius: 0 0 40px 40px; overflow: hidden;
  background: var(--surface); }
.game-handle { display: none; }
.game-fill { position: absolute; inset: 0; display: flex; flex-direction: column-reverse; }
.game-fill i { display: block; width: 100%; animation: gPour .35s ease-out both; }
@keyframes gPour { from { transform: translateY(-30px); opacity: 0; } }
.game-cup.serve { animation: gServe .45s ease; } .game-cup.spill { animation: gSpill .4s ease; }
@keyframes gServe { 40% { transform: scale(1.08); } }
@keyframes gSpill { 20% { transform: rotate(-10deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } }
.game-combo { position: absolute; top: 0; padding: 6px 12px; border-radius: 999px; background: var(--g-accent); color: #fff; font-weight: 800; font-size: 14px; opacity: 0; transform: scale(.6); transition: .3s; }
.game-combo.on { opacity: 1; transform: none; }
.game-pop { position: absolute; top: 30px; font-size: 24px; font-weight: 800; color: var(--go-bright); opacity: 0; pointer-events: none; }
.game-pop.go { animation: gPop .8s ease-out; } @keyframes gPop { 0% { opacity: 1; transform: translateY(40px); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.game-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.game-ing { min-height: 74px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; font: inherit; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform .12s; }
.game-ing span { font-size: 28px; } .game-ing small { font-size: 12px; font-weight: 600; } .game-ing:active { transform: scale(.94); background: color-mix(in srgb, var(--g-accent) 25%, transparent); }
.game-panel { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.35); padding: 24px; }
.game-panel.on { display: flex; }
.game-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 24px; text-align: center;
  display: flex; flex-direction: column; gap: 12px; align-items: center; animation: gIn .35s ease both; }
.game-card h2 { margin: 0; font-size: 28px; font-weight: 800; } .game-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.game-card small { color: var(--muted); font-size: 12px; } .game-card .game-best { color: var(--accent-text); font-weight: 600; }
.game-emoji { font-size: 56px; }
.game-stats { display: flex; gap: 28px; } .game-stats div { display: flex; flex-direction: column; } .game-stats b { font-size: 28px; font-weight: 800; }

/* ---------- sponsor ads (waiting card + game sponsor / pre-roll) ---------- */
.ad-card { width: 100%; margin: 12px 0 4px; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); text-align: start; }
.ad-card img, .ad-card video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.ad-card .ad-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ad-card small { font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.ad-card .btn { align-self: flex-start; min-height: 40px; }
.game-sponsor { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; }
.game-sponsor img { width: 44px; height: 30px; object-fit: cover; border-radius: 8px; }
.game-sponsor small { display: block; font-size: 10px; color: var(--muted); font-weight: 500; }
.game-by { color: var(--g-accent) !important; font-weight: 600; font-size: 14px; }
.game-adcta { font-size: 13px; color: var(--muted); text-decoration: underline; }
.game-preroll { position: absolute; inset: 0; z-index: 5; background: #000; display: flex; align-items: center; justify-content: center; }
.game-preroll video { width: 100%; max-height: 100%; }
.game-pr-top { position: absolute; top: max(14px, env(safe-area-inset-top)); inset-inline: 14px; display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 13px; }
.game-pr-top button { border: 0; border-radius: 999px; padding: 8px 14px; background: rgba(255,255,255,.2); color: #fff; font: inherit; font-weight: 700; }
.game-pr-top button:disabled { opacity: .7; }
.game-preroll .btn { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); }

/* branded game: sponsor colour on primary buttons + header, logo, cola glass */
.game.branded .btn-amber { background: var(--g-accent); border-color: var(--g-accent); color: #fff; }
.game.branded .game-top { border-bottom: 3px solid var(--g-accent); padding-bottom: 10px; }
.game.branded .game-score b { color: var(--g-accent); }
.game-logo { width: 40px; height: 40px; border-radius: 12px; object-fit: contain; background: #fff; }
.game-logo.big { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.game-cup.glass { width: 120px; height: 220px; border-radius: 0 0 18px 18px; }
.game-cta .ic img { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: #fff; display: block; }

/* ---------- guest shortcuts (InstaPay, wallet, menu, Wi-Fi, Instagram) ---------- */
.x-row { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.x-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.x-chip small { font-weight: 500; color: var(--muted); font-size: 12px; }
.x-chip.pay { background: rgba(200,243,29,.14); border-color: rgba(200,243,29,.6); }
.x-chip.ok { border-color: var(--go-bright); color: var(--go-bright); }
.x-wifi { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-top: 8px; border-radius: 16px; background: var(--surface); }
.x-wifi div { display: flex; flex-direction: column; } .x-wifi small { font-size: 12px; color: var(--muted); }
/* ---------- rating after pickup ---------- */
.rate { width: 100%; margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rate-q { margin: 0; font-weight: 700; }
.rate-stars { display: flex; gap: 6px; direction: ltr; }
.rate-stars button { width: 48px; height: 48px; border: 0; background: none; font-size: 36px; line-height: 1; color: var(--faint); cursor: pointer; transition: transform .15s, color .15s; }
.rate-stars button.on { color: var(--accent-text); transform: scale(1.08); }
.rate-more { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.rate-more textarea { min-height: 70px; resize: vertical; }
.rate-thanks { margin: 18px 0 0; font-weight: 700; color: var(--go-bright); }
#googleReview { margin-top: 12px; }
/* ---------- reviews page ---------- */
.rv-avg { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rv-avg b { font-size: 44px; font-weight: 800; }
.rv-stars { position: relative; display: inline-block; color: var(--faint); font-size: 22px; letter-spacing: 2px; direction: ltr; }
.rv-stars i { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--accent-text); font-style: normal; }
.rv-bar { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; }
.rv-bar i { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; direction: ltr; } .rv-bar em { display: block; height: 100%; background: var(--amber); }
.rv-row { padding: 12px 0; border-bottom: 1px solid var(--line); } .rv-row:last-child { border-bottom: 0; }
.rv-head { display: flex; justify-content: space-between; gap: 10px; } .rv-s { color: var(--accent-text); letter-spacing: 1px; direction: ltr; }
.rv-row p { margin: 6px 0 0; }

/* ---------- services hub (first screen after the scan) ---------- */
@keyframes hubIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hubPulse { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.hub { width: 100%; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.hub-hello { display: flex; flex-direction: column; gap: 6px; padding: 24px 20px 20px; border-radius: 28px; background: #0F1012; color: #F3F2EE; }
.hub-hello .hub-main { margin-top: 14px; }
.hub-hello p.muted, .hub-hello p { color: #C9CBD0; }
.hub-logo { margin: 0 0 8px !important; }
.hub-hello h1 { margin: 0; font-size: clamp(26px, 7vw, 34px); line-height: 1.2; animation: hubIn .5s cubic-bezier(.2,.8,.2,1) both; }
.hub-hello h1 b { display: block; color: var(--amber); }
.hub-hello p { margin: 6px 0 0; animation: hubIn .5s .05s cubic-bezier(.2,.8,.2,1) both; }
.hub-main, .hub-tile { animation: hubIn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(120ms + var(--i, 0) * 70ms);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.hub-main:active, .hub-tile:active { transform: scale(.96); }
.hub-main { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px; border: 0; border-radius: 24px; text-align: start; cursor: pointer;
  background: var(--amber); color: var(--amber-ink); font: inherit; box-shadow: 0 14px 34px rgba(200,243,29,.22); }
.hub-main .tx { flex: 1; display: flex; flex-direction: column; gap: 3px; } .hub-main b { font-size: 20px; } .hub-main small { font-size: 13px; opacity: .8; }
.hub-main .go { font-size: 30px; line-height: 1; } [dir="rtl"] .hub-main .go { transform: scaleX(-1); }
.hub-pulse { position: relative; width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 16px; background: #0F1012; color: var(--amber); }
.hub-pulse i { position: absolute; inset: 0; border-radius: 16px; border: 2px solid rgba(15,16,18,.35); animation: hubPulse 1.8s ease-out infinite; }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hub-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 120px; padding: 16px; border-radius: 22px; text-align: start;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.hub-tile .em { font-size: 30px; margin-bottom: auto; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.hub-tile:hover .em, .hub-tile:active .em { transform: scale(1.18) rotate(-6deg); }
.hub-tile b { font-size: 17px; } .hub-tile small { font-size: 12px; color: var(--muted); }
.hub-tile.pay .em, .hub-tile.review .em { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 24px; }
.hub-tile.pay .em { background: rgba(200,243,29,.35); } .hub-tile.review .em { background: rgba(66,133,244,.14); }
.hub-back { align-self: flex-start; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; padding: 6px 0; cursor: pointer; }
/* bottom sheets */
.sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0); transition: background .28s; }
.sheet.on { background: rgba(0,0,0,.45); }
.sheet-card { width: 100%; max-width: 520px; background: var(--bg); border-radius: 28px 28px 0 0; padding: 22px 20px max(22px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px; transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.sheet.on .sheet-card { transform: none; }
.sheet-card h2 { margin: 0 0 4px; font-size: 22px; }
.sheet-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.sheet-copy.static { cursor: default; } .sheet-copy small { font-size: 12px; color: var(--muted); } .sheet-copy b { font-size: 18px; }
.sheet-copy.ok { border-color: var(--go-bright); color: var(--go-bright); }
@media (prefers-reduced-motion: reduce) { .hub *, .sheet, .sheet-card { animation: none !important; transition: none !important; } }
/* game motion: countdown, confetti, button pop, liquid shimmer */
.game-panel.counting { background: rgba(0,0,0,.15); }
.game-count { font-size: 130px; font-weight: 900; line-height: 1; text-shadow: 0 10px 40px rgba(0,0,0,.25); animation: gCount .6s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes gCount { from { transform: scale(2.4); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); } }
.game-confetti { position: absolute; top: 38%; left: 50%; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; z-index: 6;
  animation: gConf 1.6s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes gConf { 0% { transform: translate(0,0) rotate(0); opacity: 1; }
  45% { transform: translate(calc(var(--x) * .7), var(--y)) rotate(calc(var(--r) * .5)); }
  100% { transform: translate(var(--x), calc(var(--y) + 520px)) rotate(var(--r)); opacity: 0; } }
.game-ing.pop { animation: gPopBtn .32s cubic-bezier(.3,1.6,.5,1); }
@keyframes gPopBtn { 40% { transform: scale(.88); } 100% { transform: scale(1); } }
.game-fill i:first-child { position: relative; overflow: hidden; }
.game-fill i:first-child::after { content: ""; position: absolute; inset: 0 -40%; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  animation: gShine 2.2s linear infinite; }
@keyframes gShine { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
@media (prefers-reduced-motion: reduce) { .game-count, .game-confetti, .game-ing.pop, .game-fill i::after { animation: none !important; } }

/* ---------- branches + settings toggles ---------- */
.branch-pick select { appearance: none; -webkit-appearance: none; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 700; padding: 6px 30px 6px 12px; border-radius: 999px; cursor: pointer; max-width: 220px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] .branch-pick select { padding: 6px 12px 6px 30px; background-position: 15px 52%, 10px 52%; }
.br-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.br-row:last-child { border-bottom: 0; } .br-info { display: flex; flex-direction: column; gap: 2px; }
.br-badge { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(200,243,29,.18); color: var(--accent-text); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg label { cursor: pointer; } .seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); font-size: 14px; font-weight: 600; text-align: center; transition: .15s; }
.seg input:checked + span { border-color: var(--accent-text); background: rgba(200,243,29,.14); }
.seg input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
.tgl-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; cursor: pointer; }
.tgl-row input { width: 22px; height: 22px; accent-color: var(--accent-text); flex: none; margin-top: 2px; }
.tgl-row span { display: flex; flex-direction: column; gap: 2px; } .tgl-row small { color: var(--muted); font-size: 13px; }

/* ---------- landing: what's new tiles ---------- */
.mini-hub { width: 260px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.mh-main { padding: 16px; border-radius: 20px; background: var(--amber); color: var(--amber-ink); font-weight: 800; box-shadow: 0 12px 30px rgba(200,243,29,.3); animation: lhFloat 4s ease-in-out infinite; }
.mh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mh-grid span { padding: 14px 10px; border-radius: 16px; background: var(--bg); font-size: 13px; font-weight: 700; animation: lhPop 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .35s); }
@keyframes lhFloat { 50% { transform: translateY(-6px); } }
@keyframes lhPop { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.08); } }
.lock { align-self: center; width: 210px; padding: 18px 14px; border-radius: 28px; background: #0F1012; color: #F3F2EE; text-align: center; }
.lk-time { font-size: 44px; font-weight: 300; }
.lk-note { margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(244,236,226,.14); text-align: start; animation: lhBuzz 2.4s ease-in-out infinite; }
.lk-note b { display: block; font-size: 14px; } .lk-note small { font-size: 11px; opacity: .7; }
@keyframes lhBuzz { 0%, 60%, 100% { transform: none; } 64% { transform: translateX(-4px) rotate(-1deg); } 68% { transform: translateX(4px) rotate(1deg); } 72% { transform: translateX(-3px); } 76% { transform: none; } }
.mini-cup { position: relative; align-self: center; width: 96px; height: 116px; border: 4px solid var(--line-strong); border-top: 0; border-radius: 0 0 26px 26px; overflow: hidden; display: flex; flex-direction: column-reverse; }
.mini-cup i { display: block; height: 0; animation: lhFill 4.5s ease-in-out infinite; }
.mini-cup .l1 { background: #3B2215; --h: 26%; } .mini-cup .l2 { background: #EFE3D1; --h: 38%; animation-delay: .5s; } .mini-cup .l3 { background: #FFF8EE; --h: 24%; animation-delay: 1s; }
.mini-cup span { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 22px; }
@keyframes lhFill { 0%, 8% { height: 0; } 30%, 85% { height: var(--h); } 100% { height: 0; } }
.mini-stars { display: flex; gap: 6px; direction: ltr; font-size: 40px; color: var(--accent-text); }
.mini-stars span { animation: lhStar 3s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
@keyframes lhStar { 0%, 100% { transform: scale(.85); opacity: .4; } 25%, 70% { transform: scale(1); opacity: 1; } }
.mini-branches { display: flex; gap: 10px; }
.mini-branches span { flex: 1; padding: 16px 0; text-align: center; border-radius: 18px; background: var(--bg); font-weight: 700; }
.mini-branches span:first-child { outline: 2px solid var(--amber); }
.mini-ad { position: relative; width: 240px; flex: none; aspect-ratio: 16 / 9; border-radius: 20px; padding: 16px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #E4001C, #73000D); display: flex; flex-direction: column; justify-content: flex-end; }
.mini-ad small { opacity: .8; font-size: 11px; } .mini-ad b { font-size: 22px; }
.mini-ad i { position: absolute; top: 12px; right: 12px; width: 70px; height: 70px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); animation: hubPulse 2.2s ease-out infinite; }
@media (max-width: 860px) { .mini-hub, .mini-ad { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .mh-main, .mh-grid span, .lk-note, .mini-cup i, .mini-stars span, .mini-ad i { animation: none !important; } .mini-cup i { height: var(--h); } }
.tile-b.span-all { grid-column: 1 / -1; min-height: 0; }

/* ---------- super admin console ---------- */
.sa-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 10px 0 22px; }
.sa-stats div { background: var(--surface); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; }
.sa-stats b { font-size: 32px; font-weight: 800; } .sa-stats small { color: var(--muted); }
.sa-created { margin-bottom: 20px; border: 2px solid var(--go-bright); display: flex; flex-direction: column; gap: 8px; }
.sa-cred { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 14px; background: var(--bg); }
.sa-cred small { color: var(--muted); font-size: 12px; } .sa-cred b { font-size: 16px; user-select: all; }
.sa-search { margin-bottom: 8px; }
.sa-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sa-row.off { opacity: .55; } .sa-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-info small a { color: inherit; } .sa-acts { display: flex; gap: 8px; } .sa-acts select { min-height: 40px; width: auto; }
@media (max-width: 760px) { .sa-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- hub polish ---------- */
body.at-hub .cust-head .logo, body.at-hub .cust-head .who { visibility: hidden; }
body.at-hub .cust-head { margin-bottom: 2px; }
.hub { position: relative; }
.hub::before { content: ""; position: absolute; inset: -40px -20px auto; height: 320px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 70% 20%, rgba(200,243,29,.18), transparent 70%); }
.hub-tile .tx { display: flex; flex-direction: column; gap: 3px; }
.hub-tile:not(.mini):last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; min-height: 92px; }
.hub-tile:not(.mini):last-child:nth-child(odd) .em { margin-bottom: 0; }
.hub-tile .gmaps { display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.hub-tile.review { background: linear-gradient(135deg, rgba(66,133,244,.16), rgba(52,168,83,.10) 60%, var(--surface)); }
.gm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.hub-main .tx small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- landing hero: service chips ---------- */
.svc-chips { list-style: none; margin: 26px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; }
.svc-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; animation: chipIn .6s cubic-bezier(.2,.8,.2,1) both, chipBob 5s ease-in-out infinite;
  animation-delay: calc(.5s + var(--i) * 70ms), calc(1.4s + var(--i) * .3s); }
.svc-chips li .gmaps { display: block; }
@keyframes chipIn { from { opacity: 0; transform: translateY(10px) scale(.9); } }
@keyframes chipBob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
.mh-grid span .gmaps { display: inline-block; vertical-align: -3px; }
.mini-stars { align-items: center; } .mini-stars .gmaps { margin-inline-end: 6px; }
@media (prefers-reduced-motion: reduce) { .svc-chips li { animation: none !important; } }

/* ---------- merchant menu + guest menu ---------- */
.side-stack { display: flex; flex-direction: column; gap: 20px; }
.mi-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mi-row:last-child { border-bottom: 0; } .mi-row.off { opacity: .5; }
.mi-img { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; flex: none; background: var(--bg); }
.mi-img.ph { display: grid; place-items: center; font-size: 24px; }
.mi-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
/* Guest menu: a restaurant site — cover, offers, most ordered, then each section; tap an item for its photos */
.cust.gm-page { max-width: 1000px; padding: 0 18px 28px; --off: #E5484D; --off-bg: rgba(229,72,77,.14); }
.gm-hero { position: relative; margin: 0 -18px; padding: 16px 18px 26px; overflow: hidden; isolation: isolate; text-align: center; }
.gm-hero.has-cover { color: #fff; padding-bottom: 30px; }
.gm-hero-bg { position: absolute; inset: 0; z-index: -1; }
.gm-hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: blur(18px) saturate(1.2); }
.gm-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,12,.35) 0%, rgba(10,11,12,.62) 60%, var(--bg) 100%); }
.gm-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gm-hero-back { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; line-height: 1; text-decoration: none; color: inherit;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); }
.gm-hero.has-cover .gm-hero-back { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.22); color: #fff; }
[dir="rtl"] .gm-hero-back { transform: scaleX(-1); }
.gm-hero-tg { display: flex; gap: 8px; }
.gm-hero.has-cover .tgl { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.22); color: #fff; }
.gm-hero-in { display: grid; justify-items: center; gap: 6px; padding-top: 10px; }
.gm-page.embed .gm-hero-in { padding-top: 4px; }
.gm-logo { width: 84px; height: 84px; border-radius: 26px; background: #0F1012; color: var(--amber); display: grid; place-items: center; font-size: 34px; font-weight: 800;
  overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.28); border: 3px solid rgba(255,255,255,.9); margin-bottom: 6px; }
.gm-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.gm-hero h1 { margin: 0; font-size: clamp(26px, 6vw, 38px); letter-spacing: -.02em; line-height: 1.15; }
.gm-meta { margin: 0; font-size: 14px; font-weight: 600; opacity: .82; }
.gm-note { margin: 4px 0 0; max-width: 520px; font-size: 15px; line-height: 1.6; opacity: .9; }
.gm-bar { position: sticky; top: 0; z-index: 6; margin: 0 -18px 4px; padding: 10px 18px 10px; background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: grid; gap: 10px; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .gm-bar { grid-template-columns: minmax(220px, 300px) 1fr; align-items: center; } }
.gm-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.gm-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.gm-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px; }
@media (min-width: 720px) { .gm-tabs { margin: 0; padding: 0; } }
.gm-tabs::-webkit-scrollbar { display: none; }
.gm-tabs a { flex: none; padding: 8px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; transition: background-color .25s, color .25s; }
.gm-tabs a.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.gm-tabs a.hot:not(.on) { color: var(--off); border-color: color-mix(in srgb, var(--off) 40%, transparent); }
.gm-sec { scroll-margin-top: 130px; }
.gm-sec h2 { display: flex; align-items: baseline; gap: 8px; font-size: 22px; letter-spacing: -.01em; margin: 28px 0 14px; }
.gm-sec h2 small { font-size: 13px; color: var(--muted); font-weight: 600; }
.gm-h-hot small { color: var(--off) !important; }
.gm-grid { display: grid; gap: 10px; }
@media (min-width: 720px) { .gm-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
/* rails: offers + most ordered, swipe sideways */
.gm-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 8px; scroll-padding-inline: 18px; }
.gm-rail::-webkit-scrollbar { display: none; }
.gm-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 14px; align-items: stretch; padding: 12px; border-radius: 20px; background: var(--surface);
  border: 1px solid var(--line); text-align: start; animation: hubIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(min(var(--i), 8) * 40ms);
  transition: transform .2s, border-color .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.gm-item:hover { border-color: var(--line-strong); box-shadow: 0 8px 26px rgba(0,0,0,.10); } .gm-item:active { transform: scale(.985); }
.gm-item:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.gm-item[hidden], .gm-sec[hidden] { display: none; }
.gm-item.card { flex: none; width: min(68vw, 250px); flex-direction: column; gap: 10px; padding: 0 0 14px; overflow: hidden; scroll-snap-align: start; }
.gm-item.card .gm-ph { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
.gm-item.card .gm-body { padding: 0 14px; }
.gm-ph { position: relative; width: 112px; height: 112px; flex: none; border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.gm-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.gm-item:hover .gm-ph img { transform: scale(1.05); }
.gm-ph.ph { display: grid; place-items: center; background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--amber) 22%, var(--surface-2))); }
.gm-ph.ph span { font-size: 46px; font-weight: 800; color: var(--accent-text); opacity: .7; }
.gm-ph em { position: absolute; bottom: 6px; inset-inline-start: 6px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(15,16,18,.7); color: #fff; }
.gm-off { position: absolute; top: 8px; inset-inline-start: 8px; padding: 3px 9px; border-radius: 999px; background: var(--off); color: #fff; font-size: 12px; font-weight: 800; direction: ltr; }
.gm-off.in { position: static; font-size: 11px; padding: 2px 7px; }
.gm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 2px 0; }
.gm-name { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.gm-desc { font-size: 14px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm-price { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; padding-top: 4px; color: var(--ink); font-size: 13px; font-weight: 600; }
.gm-price b { font-size: 19px; font-weight: 800; color: var(--accent-text); }
.gm-price s { color: var(--muted); font-size: 14px; font-weight: 500; }
.gm-tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--chip); color: var(--accent-text); }
.gm-tag.t-offer, .gm-tag.t-spicy { background: var(--off-bg); color: var(--off); }
.gm-tag.t-new, .gm-tag.t-healthy { background: rgba(46,190,115,.14); color: var(--go-text); }
.gm-tag.t-chef { background: rgba(139,92,246,.14); color: #8B5CF6; }
.gm-tag[hidden] { display: none; }
.gm-none { text-align: center; margin-top: 30px; }
.gm-back { margin-top: 26px; max-width: 460px; margin-inline: auto; }
body.gm-lock { overflow: hidden; }
.gm-view { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.gm-view[hidden] { display: none; }
.gm-view-bg { position: absolute; inset: 0; background: rgba(8,9,10,.62); animation: gmFade .25s ease both; }
.gm-view-card { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; background: var(--bg); border-radius: 28px 28px 0 0;
  padding-bottom: max(20px, env(safe-area-inset-bottom)); animation: gmUp .32s cubic-bezier(.2,.9,.3,1) both; }
@media (min-width: 720px) { .gm-view { align-items: center; } .gm-view-card { border-radius: 28px; } }
.gm-view-x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(15,16,18,.6); color: #fff; font-size: 15px; cursor: pointer; }
.gm-car { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: #000; }
.gm-car::-webkit-scrollbar { display: none; }
.gm-slide { flex: none; width: 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; max-height: 62vh; display: flex; align-items: center; justify-content: center; }
.gm-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gm-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 0; } .gm-dots:empty { display: none; }
.gm-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); transition: width .2s, background-color .2s; }
.gm-dots i.on { width: 20px; border-radius: 4px; background: var(--accent-text); }
.gm-view-body { padding: 16px 20px 4px; display: grid; gap: 10px; }
.gm-view-body h3 { margin: 0; font-size: 23px; line-height: 1.3; }
.gm-view-body p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--muted); }
.gm-view-body .gm-price { margin: 0; justify-self: start; font-size: 15px; } .gm-view-body .gm-price b { font-size: 26px; }
@keyframes gmFade { from { opacity: 0; } } @keyframes gmUp { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gm-item, .gm-view-bg, .gm-view-card { animation: none; } .gm-item:hover .gm-ph img { transform: none; } }
/* dashboard: menu scan with AI */
.scan-box { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 10%, var(--surface)), var(--surface)); }
.scan-ic { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--chip); }
.scan-tx { flex: 1; min-width: 0; display: grid; gap: 10px; justify-items: start; }
.scan-tx h3 { margin: 0; } .scan-tx p { margin: 0; color: var(--muted); line-height: 1.6; }
.scan-pick { position: relative; display: inline-flex; padding: 10px 16px; border-radius: 12px; border: 1.5px dashed var(--line-strong); cursor: pointer; font-weight: 600; }
.scan-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.scan-wait { display: flex; align-items: center; gap: 10px; color: var(--accent-text) !important; font-weight: 600; }
.scan-wait[hidden] { display: none; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: var(--accent-text); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.sc-form { display: grid; gap: 8px; }
.sc-head, .sc-row { display: grid; grid-template-columns: 28px 1.4fr 1fr 90px 90px 1.6fr; gap: 8px; align-items: center; }
.sc-head { padding-inline-start: 36px; grid-template-columns: 1.4fr 1fr 90px 90px 1.6fr; font-size: 12px; color: var(--muted); font-weight: 600; }
.sc-row input:not([type=checkbox]) { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }
.sc-row .sc-name { font-weight: 700; }
.sc-keep input { width: 20px; height: 20px; accent-color: var(--amber); }
.sc-row.off input:not([type=checkbox]) { opacity: .4; }
.sc-dup { grid-column: 2 / -1; color: var(--muted); font-size: 12px; margin-top: -4px; }
.sc-foot { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 6px; }
.sc-foot .muted { margin-inline-end: auto; }
@media (max-width: 760px) {
  .sc-head { display: none; }
  .sc-row { grid-template-columns: 28px 1fr 1fr; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .sc-row .sc-name { grid-column: 2 / -1; } .sc-row .sc-desc { grid-column: 2 / -1; }
}
.mi-tag { font-weight: 700; color: var(--accent-text); } .mi-tag.t-offer, .mi-tag.t-spicy { color: #E5484D; }
/* dashboard: several photos per item */
.mi-prevs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .mi-prevs:empty { display: none; }
.mi-prevs img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.mi-imgw { position: relative; flex: none; } .mi-imgw em { position: absolute; bottom: -4px; inset-inline-end: -4px; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.mi-gallery { display: none; gap: 8px; flex-wrap: wrap; padding: 0 0 12px; } .mi-gallery.on { display: flex; }
.mi-gallery form { position: relative; margin: 0; }
.mi-gallery img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; display: block; }
.mi-gallery button { position: absolute; top: -6px; inset-inline-end: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--danger); color: #fff; font-size: 11px; cursor: pointer; }
/* restaurant game: a burger stack instead of a cup */
.game-cup.stack { width: 190px; height: 210px; border: 0; background: transparent; border-radius: 0; overflow: visible; }
.game-cup.stack .game-fill { gap: 3px; justify-content: flex-start; }
.game-cup.stack .game-fill i { border-radius: 14px; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.game-cup.stack .game-fill i:first-child { border-radius: 10px 10px 30px 30px; }
.game-cup.stack .game-fill i:last-child:not(:first-child) { border-radius: 60px 60px 14px 14px; }
.game-cup.stack .game-fill i:first-child::after { display: none; }
.mi-prev { display: block; margin-top: 10px; width: 120px; height: 120px; object-fit: cover; border-radius: 16px; }
.mi-edit { padding: 12px; margin: 0 0 10px; border-radius: 16px; background: var(--bg); }
.mi-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 640px) { .mi-edit-grid { grid-template-columns: 1fr; } }
.sheet-copy.social { flex-direction: row; align-items: center; gap: 12px; text-decoration: none; }
.sheet-copy.social .ico { font-size: 24px; }

/* ---------- dashboard on phones ---------- */
/* Radios / checkboxes inside .field must not inherit the 100%-wide text input style
   (the hidden radios in .seg were stretching the whole page sideways). */
.field input[type="radio"], .field input[type="checkbox"] { width: auto; min-height: 0; padding: 0; box-shadow: none; }
.seg label { position: relative; } .seg input { width: 1px; height: 1px; pointer-events: none; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  html, body { overflow-x: clip; }
  .app-head { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .app-head .wrap-wide { min-height: 0; padding: 10px 16px 0; gap: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .app-head .brand-word { display: none; }
  .venue-meta { padding: 0; border: 0; min-width: 0; }
  .venue-meta small { display: none; }
  .branch-pick select { width: 100%; max-width: 100%; }
  .app-tools .tgl { min-width: 38px; height: 38px; }
  .app-nav { grid-column: 1 / -1; margin: 0 -16px; padding: 4px 16px 12px; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .app-nav::-webkit-scrollbar { display: none; }
  .app-nav a, .app-nav button.lnk { flex: none; padding: 10px 15px; background: var(--surface); color: var(--ink); scroll-snap-align: start; }
  .app-nav a[aria-current="page"] { background: var(--amber); color: var(--amber-ink); font-weight: 700; }
  .app-nav form { flex: none; }
  .trial-bar { font-size: 13px; padding: 7px 12px; }
  .page { padding: 18px 0 48px; }
  .page-title { font-size: 28px; margin-bottom: 4px; }
  .page-sub { font-size: 14px; }
  .panel { padding: 18px; border-radius: 22px; }
  .two-col, .side-stack { gap: 14px; }
  .seg { grid-template-columns: 1fr; }
  .field input, .field select, .field textarea, .input { font-size: 16px; }  /* no iOS zoom on focus */
  .panel .row .btn { flex: 1; }
  .mi-row { flex-wrap: wrap; }
  .mi-row .mi-info { flex-basis: calc(100% - 70px); }
  .sa-row { align-items: flex-start; }
}
@media (max-width: 760px) {
  .app-head .brand { grid-column: 1; grid-row: 1; }
  .app-head .venue-meta { grid-column: 2; grid-row: 1; }
  .app-head .app-tools { grid-column: 3; grid-row: 1; }
  .app-head .app-nav { grid-row: 2; }
  .app-head .stats { grid-column: 1 / -1; grid-row: 3; width: 100%; margin-bottom: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .app-head .stats > * { min-width: 0; padding: 8px 6px; text-align: center; }
}
.br-login { flex-basis: 100%; order: 3; }
.br-login summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 6px 0; list-style: none; }
.br-login summary::-webkit-details-marker { display: none; }
.br-login form { padding: 12px; border-radius: 16px; background: var(--bg); margin-top: 6px; }
.br-row { flex-wrap: wrap; }
.branch-only { font-weight: 700; }
.sa-req { margin-bottom: 20px; }
.sa-row video.mi-img, .sa-row img.mi-img { width: 64px; height: 44px; border-radius: 10px; object-fit: cover; }
.use-bar { display: flex; gap: 12px; margin: 0 0 18px; flex-wrap: wrap; }
.use-bar div { background: var(--surface); border-radius: 18px; padding: 12px 16px; display: flex; flex-direction: column; min-width: 140px; }
.use-bar b { font-size: 24px; font-weight: 800; } .use-bar small { color: var(--muted); font-size: 12px; }
.br-login-body { padding: 12px; border-radius: 16px; background: var(--bg); margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.login-row, .login-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.login-row b { flex-basis: 100%; font-size: 14px; }
.login-row input, .login-add input { flex: 1 1 150px; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; }
.lim-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(200,243,29,.14); color: var(--accent-text); font-size: 14px; }
.br-email { color: var(--ink); font-size: 13px; text-align: start; } .br-email.none { color: var(--muted); }
.flex-plans .plan { justify-content: flex-start; gap: 18px; }
.flex-plans .plan .btn { margin-top: auto; }
.contact-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ---------- pay as you go: pricing + usage ---------- */
.payg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; padding: 44px; border-radius: 36px; background: var(--surface); }
.payg-price { display: flex; align-items: baseline; gap: 10px; color: var(--accent-text); }
.payg-price b { font-size: clamp(96px, 16vw, 160px); font-weight: 900; line-height: .9; }
.payg-price span { display: flex; flex-direction: column; font-size: 28px; font-weight: 800; }
.payg-price small { font-size: 16px; color: var(--muted); font-weight: 600; }
.payg-body h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 40px); } .payg-body p { margin: 0 0 14px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.payg-body ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.payg-body li::before { content: "✓ "; color: var(--go-bright); font-weight: 800; }
@media (max-width: 760px) { .payg { grid-template-columns: 1fr; padding: 28px 22px; gap: 18px; } .payg-body ul { grid-template-columns: 1fr; } }
.payg-mini { display: flex; justify-content: space-between; margin-bottom: 14px; text-decoration: none; color: var(--ink); }
.kpis { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.kpi small { color: var(--muted); font-size: 13px; } .kpi b { font-size: 30px; font-weight: 800; color: var(--ink); }
.kpi.hero b { font-size: 48px; } .kpi b i { font-style: normal; font-size: 18px; color: var(--muted); } .kpi > span { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .kpis { grid-template-columns: 1fr 1fr; } .kpi.hero { grid-column: 1 / -1; } }
/* single-series bar chart: one validated hue per mode, 2px gaps, 4px rounded tops on the baseline */
.uchart { --bar: #9A5F08; margin: 0 0 16px; }
:root[data-theme="dark"] .uchart { --bar: #C7801A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .uchart { --bar: #C7801A; } }
.uchart figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.ubars { height: 180px; margin-top: 34px; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line-strong); }
.ubar { flex: 1; height: 100%; display: flex; align-items: flex-end; position: relative; cursor: default; outline: none; }
.ubar i { width: 100%; height: var(--h); min-height: 2px; background: var(--bar); border-radius: 4px 4px 0 0; transition: opacity .15s; }
.ubars:hover .ubar i { opacity: .55; } .ubars .ubar:hover i, .ubar:focus-visible i { opacity: 1; }
.ubar:hover::after, .ubar:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(var(--h) + 8px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 6px 10px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600; z-index: 3; pointer-events: none; }
.ubar:first-child:hover::after, .ubar:nth-child(-n+4):hover::after { left: 0; transform: none; }
.ubar:last-child:hover::after, .ubar:nth-last-child(-n+4):hover::after { left: auto; right: 0; transform: none; }
.uaxis { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 6px; }
.utable { margin-top: 12px; } .utable summary { cursor: pointer; color: var(--muted); font-size: 14px; }

/* ---------- credits, packages, logos ---------- */
.notices { display: grid; gap: 10px; margin-top: 16px; }
.notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--surface); font-size: 15px; flex-wrap: wrap; }
.notice form { margin: 0; }
.notice .lnk { background: none; border: 0; color: inherit; font-size: 16px; cursor: pointer; padding: 4px 8px; }
.notice.ok { color: var(--go-text); }
.notice.warn { box-shadow: inset 4px 0 0 var(--amber); }
[dir="rtl"] .notice.warn { box-shadow: inset -4px 0 0 var(--amber); }
.notice.bad { color: var(--danger); }
.notice b.num { margin: 0 4px; }
.cr-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cr-panel > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cr-panel b.num { font-size: 32px; font-weight: 700; }
.cr-balance b, .cr-panel b { color: var(--ink); }
b.neg, .cr-balance .neg, .cr-panel b.neg { color: var(--danger); }
.pkgs, .pkg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.pkg { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin: 0; }
.pkg b.num { font-size: 30px; font-weight: 700; line-height: 1.1; }
.pkg.hl { outline: 2px solid var(--amber); }
.pkg .btn { margin-top: 6px; }
.pkg-row .btn { width: 100%; }
.topups { display: grid; gap: 6px; margin-top: 12px; }
.logo-preview { display: block; width: 88px; height: 88px; object-fit: contain; border-radius: 18px; background: var(--surface); margin-bottom: 12px; }
.brand-logo { height: 28px; width: auto; max-width: 120px; object-fit: contain; display: block; }
.login-link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.login-link code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.cust-head .logo.has-img, .menu-head .logo:has(img) { background: #fff; overflow: hidden; padding: 0; }
.cust-head .logo img, a.logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-logo { width: 84px; height: 84px; border-radius: 24px; object-fit: cover; display: block; margin: 0 auto 14px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.ntf-list { align-items: flex-start; }
.ntf-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1; }
.pkg.unl b { font-size: 30px; line-height: 1.1; }
.cat-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; flex: 1; align-items: center; }
.cat-row { align-items: center; gap: 12px; flex-wrap: wrap; }
.queue-pill { display: inline-flex; align-items: center; gap: 8px; margin: 14px auto 0; padding: 8px 16px; border-radius: 999px; background: var(--surface); font-weight: 600; font-size: 15px; }
.queue-pill.next { background: var(--amber); color: var(--amber-ink); }
textarea.input.mono { font-family: ui-monospace, Menlo, monospace; font-size: 14px; min-height: 140px; resize: vertical; }
.name-input, .pad-name { width: 100%; box-sizing: border-box; margin: 12px 0 6px; padding: 16px 18px; border-radius: 18px; border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 26px var(--font); text-align: center; }
.name-input:focus, .pad-name:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(200,243,29,.28); }
.pad-name { font-size: 20px; margin: 4px 0 12px; }
/* clinics: names instead of numbers */
.dial .n.is-name { font-size: clamp(30px, 9vw, 44px); line-height: 1.2; letter-spacing: 0; max-width: 220px; margin-inline: auto; }
.ready-orb .core b.is-name { font-size: clamp(28px, 8vw, 40px); line-height: 1.2; letter-spacing: 0; padding: 0 18px; text-align: center; }
.tile .n.is-name { font-size: 30px; line-height: 1.2; letter-spacing: 0; word-break: break-word; }
.rrow .badge.is-name { width: auto; min-width: 64px; padding: 0 12px; font-size: 15px; }
.pw-shown { border: 2px solid var(--amber); margin-bottom: 16px; display: grid; gap: 10px; }
.pw-box { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pw-box code { flex: 1; min-width: 0; font-size: 20px; font-weight: 700; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); overflow-wrap: anywhere; }
.pw-send { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0 12px; } .pw-send input { width: auto; }
.login-row .pw-send { margin: 0; }
.ad-reach.ok { color: var(--go-text); font-weight: 600; } .ad-reach.bad { color: var(--danger); font-weight: 600; }
.state-pill { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.state-pill.on { color: var(--go-text); background: rgba(46,190,115,.14); } .state-pill.off { color: var(--danger); background: rgba(229,102,77,.12); }
.state-form, .sa-acts form { display: flex; align-items: center; gap: 8px; }
.nfc-mark { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 2px; font-weight: 700; font-size: 15px; }
.nfc-box { display: grid; gap: 10px; margin-top: 20px; padding: 16px; border-radius: 18px; background: var(--surface-2); }
.nfc-status:empty { display: none; } .nfc-status { margin: 0; font-weight: 600; }
.nfc-status.ok { color: var(--go-text); } .nfc-status.bad { color: var(--danger); }
.nfc-steps { margin: 6px 0 0; padding-inline-start: 20px; display: grid; gap: 6px; color: var(--text); }
.nfc-steps .link-row { margin-top: 6px; }
.sa-who { display: block; font-size: 13px; line-height: 1.6; }
.sa-who a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.who-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.who-grid li { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.who-grid .who-ic { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.who-grid b { font-size: 16px; line-height: 1.35; }
.who-grid small { color: var(--muted); font-size: 13px; }
@media (max-width: 480px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .who-grid li { padding: 14px 12px; } }

/* Website: services overview */
.svc-chips li a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.svc-chips li:has(a):hover { border-color: var(--line-strong); }
.sv-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -40px 0 48px; }
.sv-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; transition: border-color .3s var(--ease); }
.sv-tabs a:hover { border-color: var(--line-strong); }
.sv-tabs a span { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--chip); color: var(--accent-text); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.sv-group { scroll-margin-top: 90px; }
.sv-group + .sv-group { margin-top: 56px; }
.sv-ghead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sv-ghead h3 { margin: 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; }
.sv-ghead span { color: var(--muted); font-size: 15px; }
.sv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.sv-card { scroll-margin-top: 110px; display: flex; flex-direction: column; gap: 18px; padding: 26px 24px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .4s var(--ease); }
.sv-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.sv-card:target { border-color: var(--accent-text); box-shadow: 0 0 0 4px var(--chip); }
.sv-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--chip); color: var(--accent-text); display: flex; align-items: center; justify-content: center; flex: none; }
.sv-card h4 { margin: 0 0 6px; font-size: 19px; line-height: 1.35; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv-card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; }
.sv-new { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--amber); color: var(--amber-ink); }
#services .contact-row { margin-top: 48px; }
@media (max-width: 640px) {
  .sv-tabs { margin: -36px 0 32px; }
  .sv-grid { grid-template-columns: 1fr; gap: 10px; }
  .sv-card { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px 16px; }
  .sv-ic { width: 44px; height: 44px; border-radius: 14px; }
  .sv-ic svg { width: 22px; height: 22px; }
  .sv-card h4 { font-size: 17px; }
}
.svc-state { margin: 0 0 12px; font-weight: 600; }
.svc-state.on { color: var(--go-text); } .svc-state.off { color: var(--danger); }
.svc-pill { font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.svc-pill.on { background: rgba(46,190,115,.15); color: var(--go-text); } .svc-pill.off { background: rgba(229,102,77,.14); color: var(--danger); }
.sa-approve { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sa-approve label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.sa-approve input { width: 72px; padding: 6px 10px; }
.erp-card { box-shadow: inset 4px 0 0 #0F1012; }
[dir="rtl"] .erp-card { box-shadow: inset -4px 0 0 #0F1012; }
.erp-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.erp-acts form { margin: 0; }
.pos-key { font: 600 13px/1.5 ui-monospace, Menlo, monospace; direction: ltr; word-break: break-all; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; user-select: all; }
.pos-code { font: 12px/1.6 ui-monospace, Menlo, monospace; direction: ltr; text-align: left; white-space: pre-wrap; word-break: break-all; background: #0F1012; color: #E9EAEC; border-radius: 12px; padding: 12px 14px; margin: 8px 0 0; }
.svc-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.svc-panel { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.svc-panel .svc-state { margin: 0; }
.svc-price { font-size: 34px; letter-spacing: -.02em; }
.payg.svc-plan { margin-top: 20px; }
.payg.svc-plan .payg-price b { font-size: clamp(72px, 11vw, 120px); }

/* Game v2: guest, level, bonus time, drop-in items, hint, stars */
.game-guest { position: absolute; inset-inline-start: 4px; bottom: 18px; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 36px; box-shadow: 0 8px 20px -10px rgba(0,0,0,.35); }
.game-guest i { position: absolute; top: -10px; inset-inline-end: -10px; font-style: normal; font-size: 22px; line-height: 1; }
.game-guest.in { animation: gGuestIn .45s cubic-bezier(.2,.9,.3,1.3) both; }
.game-guest.happy { animation: gHappy .5s ease; } .game-guest.angry { animation: gSpill .4s ease; }
@keyframes gGuestIn { from { transform: translateX(-40px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
[dir="rtl"] .game-guest.in { animation-name: gGuestInR; }
@keyframes gGuestInR { from { transform: translateX(40px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gHappy { 0%, 100% { transform: none; } 40% { transform: translateY(-12px) scale(1.08); } }
.game-level { position: absolute; top: 0; inset-inline-start: 0; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--accent-text); }
.game-toast { position: absolute; top: 34px; inset-inline-end: 0; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 800; opacity: 0; pointer-events: none; }
.game-toast.good { background: rgba(46,190,115,.18); color: var(--go-text); } .game-toast.bad { background: rgba(229,102,77,.16); color: var(--danger); }
.game-toast.go { animation: gToast 1.1s ease both; }
@keyframes gToast { 0% { opacity: 0; transform: translateY(8px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.game-banner { position: absolute; top: 42%; left: 50%; z-index: 3; white-space: nowrap; padding: 12px 22px; border-radius: 18px; background: var(--g-accent); color: var(--amber-ink);
  font-size: 22px; font-weight: 900; opacity: 0; transform: translate(-50%, -50%) scale(.6); pointer-events: none; box-shadow: 0 16px 40px -16px rgba(0,0,0,.5); }
.game-banner.go { animation: gBanner 1.4s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes gBanner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 18%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(.95); } }
.game-drop { position: absolute; top: 0; left: 50%; font-size: 34px; pointer-events: none; z-index: 2; animation: gDrop .55s cubic-bezier(.5,0,.8,.6) both; }
@keyframes gDrop { from { transform: translate(calc(-50% + var(--dx)), -10px) rotate(-20deg); opacity: 1; } to { transform: translate(-50%, 140px) rotate(10deg) scale(.6); opacity: 0; } }
.game-cup.stack .game-fill i { display: flex; align-items: center; justify-content: center; }
.game-cup.stack .game-fill i b { font-size: 18px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.game-ing.hint { border-color: var(--g-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 45%, transparent); animation: gHint 1s ease-in-out infinite; }
@keyframes gHint { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }
.game-pad.shuffle .game-ing { animation: gShuffle .4s ease both; }
@keyframes gShuffle { from { transform: scale(.85) rotate(-4deg); opacity: .4; } to { transform: none; opacity: 1; } }
.game-stars { display: flex; gap: 6px; font-size: 40px; line-height: 1; }
.game-stars span { color: var(--surface-2); } .game-stars span.on { color: #F5B700; animation: gStar .45s cubic-bezier(.2,.9,.3,1.5) both; animation-delay: var(--d); }
@keyframes gStar { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.game-stats { flex-wrap: wrap; justify-content: center; gap: 18px 24px; }
@media (prefers-reduced-motion: reduce) { .game-guest, .game-banner, .game-drop, .game-ing.hint, .game-pad.shuffle .game-ing, .game-stars span, .game-toast { animation: none !important; } .game-banner.go, .game-toast.go { opacity: 1; } }
/* the venue's logo on the game cup and cards */
.game-brand { position: absolute; z-index: 2; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%; padding: 4px;
  background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(0,0,0,.22); pointer-events: none; }
.game-brand img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.game-cup.glass .game-brand { width: 52px; height: 52px; }
.game-cup.stack .game-brand { top: auto; bottom: -38px; width: 44px; height: 44px; transform: translateX(-50%); }
.game-cup.serve .game-brand { animation: gBrand .45s ease; }
@keyframes gBrand { 50% { transform: translate(-50%, -50%) scale(1.18) rotate(-8deg); } }
.game-cup.stack.serve .game-brand { animation: none; }
.game-badge { position: relative; justify-self: center; display: inline-block; margin-bottom: 4px; }
.game-badge span { position: absolute; bottom: -8px; inset-inline-end: -10px; font-size: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
@media (prefers-reduced-motion: reduce) { .game-cup.serve .game-brand { animation: none; } }
.gm-view-body .gm-tag { justify-self: start; }
/* landing: the smart menu feature */
.mf { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .mf { grid-template-columns: 380px 1fr; gap: 64px; } }
.mf-phone { position: relative; justify-self: center; width: 300px; padding: 12px; border-radius: 44px; background: #0F1012; box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.08); }
.mf-screen { border-radius: 34px; overflow: hidden; background: #F6F4EF; color: #0F1012; padding-bottom: 14px; display: grid; gap: 10px; }
.mf-hero { display: grid; justify-items: center; gap: 2px; padding: 22px 12px 18px; color: #fff; text-align: center;
  background: radial-gradient(circle at 30% 20%, #C7903F, transparent 60%), linear-gradient(160deg, #3B2215, #12100E); }
.mf-logo { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: #fff; margin-bottom: 4px; }
.mf-hero b { font-size: 18px; } .mf-hero small { opacity: .8; font-size: 12px; }
.mf-chips { display: flex; gap: 6px; padding: 0 12px; overflow: hidden; }
.mf-chips span { flex: none; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(15,16,18,.08); }
.mf-chips span.on { background: #0F1012; color: #fff; }
.mf-card, .mf-row { margin: 0 12px; background: #fff; border-radius: 16px; border: 1px solid rgba(15,16,18,.07); overflow: hidden; display: grid; gap: 4px; font-size: 13px; }
.mf-card { padding-bottom: 10px; } .mf-card > :not(.mf-img) { margin-inline: 10px; }
.mf-row { grid-template-columns: 64px 1fr; gap: 10px; padding: 8px; align-items: center; } .mf-row > span { display: grid; gap: 3px; }
.mf-img { position: relative; display: block; height: 104px; background: linear-gradient(135deg, #C9874A, #6B3A1E); }
.mf-img.a { background: radial-gradient(circle at 50% 55%, #F4E3C8 0 22%, #B5733F 23% 34%, transparent 35%), linear-gradient(135deg, #E2C9A6, #8C5A33); }
.mf-img.b { height: 64px; border-radius: 12px; background: radial-gradient(circle at 50% 60%, #9BC36B 0 30%, #F2E6CF 31% 48%, transparent 49%), linear-gradient(135deg, #F3D9B7, #D9A86A); }
.mf-img.c { height: 64px; border-radius: 12px; background: radial-gradient(circle at 50% 55%, #4A2A1B 0 28%, #CDE7F3 29% 40%, transparent 41%), linear-gradient(135deg, #BFDCEB, #6E9FB8); }
.mf-img em { position: absolute; top: 8px; inset-inline-start: 8px; font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #E5484D; color: #fff; direction: ltr; }
.mf-tag { justify-self: start; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(229,72,77,.14); color: #D63B40; }
.mf-tag.g { background: rgba(46,190,115,.16); color: #10663B; }
.mf-p { color: #0F1012; } .mf-p b { font-size: 15px; color: #4A6500; } .mf-p s { color: #74777d; }
.mf-scan { position: absolute; bottom: 34px; inset-inline-end: -28px; display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-radius: 18px;
  background: var(--amber); color: var(--amber-ink); font-weight: 800; font-size: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.3); animation: mfFloat 3.2s ease-in-out infinite; }
@keyframes mfFloat { 50% { transform: translateY(-8px); } }
.mf-kick { display: inline-block; font-size: 13px; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: var(--chip); color: var(--accent-text); }
.mf-tx h2 { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.15; letter-spacing: -.02em; margin: 14px 0 10px; }
.mf-sub { color: var(--muted); font-size: 17px; line-height: 1.7; margin: 0 0 22px; }
.mf-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 14px; }
@media (min-width: 640px) { .mf-list { grid-template-columns: 1fr 1fr; } }
.mf-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.mf-list li > span { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--chip); font-size: 20px; }
.mf-list b { display: block; margin-bottom: 3px; } .mf-list p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .mf-scan { animation: none; } }
@media (max-width: 420px) { .mf-scan { inset-inline-end: -6px; } }
/* superadmin: everything about one customer */
.cp-card { display: grid; gap: 18px; margin-bottom: 16px; }
.cp-top { display: flex; gap: 16px; align-items: center; }
.cp-logo { width: 76px; height: 76px; flex: none; border-radius: 22px; overflow: hidden; display: grid; place-items: center; background: #0F1012; color: var(--amber); font-size: 30px; font-weight: 800; }
.cp-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; display: block; }
.cp-logo.sm { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
.cp-id h2 { margin: 0 0 4px; } .cp-id p { margin: 0; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 0; }
.cp-grid > div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.cp-grid > div.wide { grid-column: 1 / -1; }
.cp-grid dt { font-size: 12px; color: var(--muted); margin-bottom: 3px; } .cp-grid dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cp-grid audio { height: 30px; max-width: 100%; vertical-align: middle; }
.cp-media { max-width: 220px; max-height: 140px; border-radius: 10px; display: block; margin-bottom: 6px; }
.cp-branch { margin-bottom: 12px; } .cp-branch summary { display: flex; gap: 12px; align-items: center; cursor: pointer; flex-wrap: wrap; }
.cp-branch summary small { flex-basis: 100%; padding-inline-start: 52px; margin-top: -8px; }
.cp-cols { display: grid; gap: 16px; margin-top: 16px; }
.cp-menu h4 { margin: 0 0 8px; } .cp-menu { display: grid; gap: 6px; }
.cp-mi { display: flex; gap: 10px; align-items: center; } .cp-mi.off { opacity: .5; }
.cp-mi img, .cp-mi > span:first-child { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--surface-2); }
.cp-mi > span:last-child { display: grid; }
.cp-cm { margin: 0; } .cp-cm::first-letter { color: #F5B301; }
/* superadmin list: logo + branch chips */
.sa-top { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.sa-top > div { display: grid; }
.sa-msg { color: var(--amber); font-style: italic; }
.sa-branch-chip { display: inline-flex; gap: 4px; align-items: center; }
.sa-branch-chip img { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; vertical-align: middle; }
/* landing: AI Menu workflow steps */
.ai-steps-wrap { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 48px; }
.ai-steps-head { text-align: center; margin-bottom: 28px; }
.ai-steps-head h3 { margin: 0; font-size: clamp(20px, 2.5vw, 28px); }
.ai-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ai-step-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.ai-step-card.hl { border-color: var(--amber); background: linear-gradient(180deg, var(--surface) 0%, rgba(200,243,29,.05) 100%); }
.ai-step-num { position: absolute; top: 16px; inset-inline-end: 18px; font-size: 13px; font-weight: 800; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.ai-step-card.hl .ai-step-num { background: var(--amber); color: var(--amber-ink); }
.ai-step-ic { font-size: 32px; margin-bottom: 4px; }
.ai-step-card h4 { margin: 0; font-size: 18px; }
.ai-step-card p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
/* ---- guest menu: the owner's colour ---- */
.has-color { --m-text: color-mix(in srgb, var(--m-accent) 72%, var(--ink)); }
.has-color .gm-price b, .has-color .gm-view-body .gm-price b { color: var(--m-text); }
.has-color .gm-tabs a.on { background: var(--m-accent); color: var(--m-on); border-color: var(--m-accent); }
.has-color .gm-tag:not(.t-offer):not(.t-spicy):not(.t-new):not(.t-healthy) { background: color-mix(in srgb, var(--m-accent) 16%, transparent); color: var(--m-text); }
.has-color .gm-logo { border-color: var(--m-accent); }
.has-color .gm-dots i.on { background: var(--m-accent); }
.has-color .gm-back { background: var(--m-accent); color: var(--m-on); }
.has-color .gm-ph.ph { background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--m-accent) 30%, var(--surface-2))); }
.has-color .gm-hero:not(.has-cover) { background: linear-gradient(180deg, color-mix(in srgb, var(--m-accent) 18%, transparent), transparent); }
.has-color .gm-item:focus-visible { outline-color: var(--m-accent); }
/* items without a photo get an icon */
.gm-ph.ph span { font-size: 44px; opacity: 1; color: inherit; }
.gm-t-classic .gm-grid .gm-ph.ph { width: 84px; height: 84px; }
.gm-t-classic .gm-grid .gm-ph.ph span { font-size: 34px; }

/* ---- design: big photos (2–3 cards a row) ---- */
.gm-t-grid .gm-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 720px) { .gm-t-grid .gm-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.gm-t-grid .gm-grid .gm-item { flex-direction: column; gap: 8px; padding: 0 0 12px; overflow: hidden; }
.gm-t-grid .gm-grid .gm-ph { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; }
.gm-t-grid .gm-grid .gm-body { padding: 0 12px; gap: 4px; }
.gm-t-grid .gm-grid .gm-name { font-size: 15.5px; }
.gm-t-grid .gm-grid .gm-desc { font-size: 13px; }

/* ---- design: elegant (dark, gold, classic type) ---- */
body.gm-bt-elegant { --bg: #12100E; --bg-2: #181512; --surface: #1C1916; --surface-2: #27221D; --ink: #F3EBDD; --muted: #B3A690; --faint: #4A4238;
  --line: rgba(243,235,221,.10); --line-strong: rgba(243,235,221,.24); --chip: rgba(201,164,92,.14); --accent-text: #D9B977; background: var(--bg); color: var(--ink); }
body.gm-bt-elegant:not(.has-color) { --m-accent: #C9A45C; --m-on: #12100E; }
body.gm-bt-elegant:not(.has-color) .gm-tabs a.on { background: #C9A45C; color: #12100E; border-color: #C9A45C; }
.gm-t-elegant h1, .gm-t-elegant h2, .gm-t-elegant .gm-name { font-family: Georgia, "Times New Roman", "Noto Naskh Arabic", serif; letter-spacing: 0; }
.gm-t-elegant .gm-sec h2 { justify-content: center; text-align: center; font-weight: 600; gap: 14px; }
.gm-t-elegant .gm-sec:not(.gm-rail-sec) h2::before, .gm-t-elegant .gm-sec:not(.gm-rail-sec) h2::after { content: ""; flex: 0 1 60px; height: 1px; background: var(--accent-text); opacity: .6; align-self: center; }
.gm-t-elegant .gm-grid { gap: 0 36px; }
.gm-t-elegant .gm-grid .gm-item { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 2px; align-items: center; }
.gm-t-elegant .gm-grid .gm-item:hover { box-shadow: none; }
.gm-t-elegant .gm-grid .gm-ph { width: 74px; height: 74px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent-text) 50%, transparent); }
.gm-t-elegant .gm-grid .gm-ph em { display: none; }
.gm-t-elegant .gm-grid .gm-ph.ph span { font-size: 30px; }
.gm-t-elegant .gm-price b { color: var(--accent-text); font-family: Georgia, serif; }
.has-color .gm-t-elegant .gm-price b { color: var(--m-text); }

/* ---- design: paper menu (names, dotted line, price; no photos in the list) ---- */
body.gm-bt-paper { --bg: #F6F0E4; --bg-2: #EFE6D4; --surface: #FFFCF5; --surface-2: #EFE6D4; --ink: #2A1E14; --muted: #6E5D4B; --faint: #CDBFA8;
  --line: rgba(42,30,20,.12); --line-strong: rgba(42,30,20,.28); --chip: rgba(124,45,18,.10); --accent-text: #8A3412; background: var(--bg); color: var(--ink); }
.gm-t-paper h1, .gm-t-paper h2, .gm-t-paper .gm-name { font-family: Georgia, "Times New Roman", "Noto Naskh Arabic", serif; }
.gm-t-paper .gm-hero { padding-bottom: 14px; }
.gm-t-paper .gm-hero-in::after { content: "❦"; display: block; font-size: 22px; color: var(--accent-text); margin-top: 6px; }
.gm-t-paper .gm-sec:not(.gm-rail-sec) h2 { justify-content: center; text-transform: uppercase; letter-spacing: .08em; font-size: 20px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-strong); }
.gm-t-paper .gm-sec:not(.gm-rail-sec) h2 small { display: none; }
.gm-t-paper .gm-grid { grid-template-columns: 1fr; gap: 0; }
@media (min-width: 720px) { .gm-t-paper .gm-grid { grid-template-columns: 1fr 1fr; gap: 0 48px; } }
.gm-t-paper .gm-grid .gm-item { display: block; background: none; border: 0; border-radius: 0; padding: 11px 0; }
.gm-t-paper .gm-grid .gm-item:hover { box-shadow: none; background: color-mix(in srgb, var(--accent-text) 5%, transparent); }
.gm-t-paper .gm-grid .gm-ph { display: none; }
.gm-t-paper .gm-grid .gm-body { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "tag tag tag" "name dots price" "desc desc desc"; gap: 2px 10px; padding: 0; }
.gm-t-paper .gm-grid .gm-body::before { content: ""; grid-area: dots; border-bottom: 2px dotted var(--line-strong); margin-bottom: 7px; align-self: end; }
.gm-t-paper .gm-grid .gm-tag { grid-area: tag; }
.gm-t-paper .gm-grid .gm-name { grid-area: name; font-size: 17px; }
.gm-t-paper .gm-grid .gm-desc { grid-area: desc; font-size: 13.5px; font-style: italic; }
.gm-t-paper .gm-grid .gm-price { grid-area: price; margin: 0; padding: 0; align-self: end; }
.gm-t-paper .gm-grid .gm-price b { font-size: 17px; color: var(--accent-text); }
.has-color .gm-t-paper .gm-price b { color: var(--m-text); }

/* ---- design: modern minimal (clean cards, smooth shadows, pill badges) ---- */
body.gm-bt-modern { --bg: #F8FAFC; --bg-2: #F1F5F9; --surface: #FFFFFF; --surface-2: #F1F5F9; --ink: #0F172A; --muted: #64748B; --faint: #CBD5E1;
  --line: rgba(15,23,42,.08); --line-strong: rgba(15,23,42,.16); --chip: rgba(14,165,233,.12); --accent-text: #0EA5E9; background: var(--bg); color: var(--ink); }
body.gm-bt-modern:not(.has-color) { --m-accent: #0EA5E9; --m-on: #FFFFFF; }
.gm-t-modern .gm-sec h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.gm-t-modern .gm-grid { gap: 14px; }
.gm-t-modern .gm-grid .gm-item { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.03); transition: transform .15s ease, box-shadow .15s ease; }
.gm-t-modern .gm-grid .gm-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.gm-t-modern .gm-grid .gm-ph { width: 88px; height: 88px; border-radius: 14px; }
.gm-t-modern .gm-grid .gm-name { font-size: 16px; font-weight: 700; }
.gm-t-modern .gm-grid .gm-tag { border-radius: 999px; font-size: 11px; padding: 2px 8px; }
.gm-t-modern .gm-grid .gm-price b { font-weight: 800; font-size: 16px; color: var(--accent-text); }
.has-color .gm-t-modern .gm-price b { color: var(--m-text); }

/* ---- design: dark neon (deep carbon black, glowing neon borders) ---- */
body.gm-bt-dark { --bg: #090B0E; --bg-2: #0F1318; --surface: #141820; --surface-2: #1B212B; --ink: #F8FAFC; --muted: #94A3B8; --faint: #334155;
  --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.18); --chip: rgba(200,243,29,.14); --accent-text: #C8F31D; background: var(--bg); color: var(--ink); }
body.gm-bt-dark:not(.has-color) { --m-accent: #C8F31D; --m-on: #090B0E; }
.gm-t-dark .gm-sec h2 { font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 18px; }
.gm-t-dark .gm-grid { gap: 12px; }
.gm-t-dark .gm-grid .gm-item { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.gm-t-dark .gm-grid .gm-item:hover { border-color: var(--line-strong); box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.gm-t-dark .gm-grid .gm-ph { width: 84px; height: 84px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); }
.gm-t-dark .gm-grid .gm-price b { font-weight: 800; color: var(--accent-text); text-shadow: 0 0 12px color-mix(in srgb, var(--accent-text) 40%, transparent); }
.has-color .gm-t-dark .gm-price b { color: var(--m-text); text-shadow: none; }

/* ---- dashboard: the design picker ---- */
.mt-box { display: grid; gap: 22px; margin-bottom: 18px; }
@media (min-width: 900px) { .mt-box { grid-template-columns: 1fr 300px; align-items: start; } }
.mt-pick h3 { margin: 0 0 4px; } .mt-pick > p { margin: 0 0 14px; } .mt-pick h4 { margin: 18px 0 10px; }
.mt-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mt-theme { position: relative; display: grid; gap: 4px; padding: 10px; border-radius: 16px; border: 2px solid var(--line); cursor: pointer; }
.mt-theme input { position: absolute; opacity: 0; }
.mt-theme:has(input:checked) { border-color: var(--amber); background: var(--chip); }
.mt-theme:has(input:focus-visible) { outline: 3px solid var(--amber); outline-offset: 2px; }
.mt-theme small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.mt-thumb { height: 74px; border-radius: 10px; padding: 8px; display: grid; gap: 5px; margin-bottom: 4px; overflow: hidden; }
.mt-thumb i { display: block; border-radius: 5px; }
.mt-thumb.t-classic { background: #F3F2EE; } .mt-thumb.t-classic i { height: 14px; background: #fff; border-inline-start: 14px solid #C9874A; }
.mt-thumb.t-grid { background: #F3F2EE; grid-template-columns: 1fr 1fr; } .mt-thumb.t-grid i { height: 25px; background: linear-gradient(#D9A86A 60%, #fff 60%); }
.mt-thumb.t-grid i:nth-child(3) { grid-column: span 2; height: 12px; background: #fff; }
.mt-thumb.t-elegant { background: #12100E; } .mt-thumb.t-elegant i { height: 12px; border-bottom: 1px solid #C9A45C; border-radius: 0; background: linear-gradient(90deg, #F3EBDD 40%, transparent 40% 80%, #C9A45C 80%); background-size: 100% 4px; background-repeat: no-repeat; background-position: center; }
.mt-thumb.t-paper { background: #F6F0E4; } .mt-thumb.t-paper i { height: 12px; background: radial-gradient(circle, #8A3412 1px, transparent 1.5px) 0 60% / 6px 4px repeat-x; border-inline-start: 26px solid #2A1E14; border-inline-end: 12px solid #8A3412; border-radius: 0; background-clip: padding-box; }
.mt-thumb.t-modern { background: #F8FAFC; border: 1px solid rgba(15,23,42,.08); } .mt-thumb.t-modern i { height: 14px; background: #FFFFFF; border-radius: 7px; box-shadow: 0 1px 4px rgba(0,0,0,.08); border-inline-start: 14px solid #0EA5E9; }
.mt-thumb.t-dark { background: #090B0E; border: 1px solid rgba(255,255,255,.1); } .mt-thumb.t-dark i { height: 14px; background: #141820; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); border-inline-start: 14px solid #C8F31D; }
.mt-colors { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mt-sw { position: relative; cursor: pointer; } .mt-sw input { position: absolute; opacity: 0; }
.mt-sw span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); font-size: 13px; color: var(--muted); }
.mt-sw.none span { background: var(--surface-2); }
.mt-sw:has(input:checked) span { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); }
.mt-sw:has(input:focus-visible) span { outline: 3px solid var(--amber); outline-offset: 4px; }
.mt-own { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-size: 13px; font-weight: 600; }
.mt-own input { width: 28px; height: 28px; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; }
.mt-pick > .btn { margin-top: 18px; }
.mt-phone { justify-self: center; width: 300px; height: 600px; border-radius: 40px; padding: 10px; background: #0F1012; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.mt-phone iframe { width: 100%; height: 100%; border: 0; border-radius: 31px; background: var(--bg); }
@media (max-width: 899px) { .mt-phone { height: 520px; } }
/* review page: a photo per scanned item */
.sc-head, .sc-row { grid-template-columns: 28px 1.4fr 1fr 90px 90px 1.6fr 44px; }
.sc-head { grid-template-columns: 1.4fr 1fr 90px 90px 1.6fr 44px; }
.sc-photo { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1.5px dashed var(--line-strong); display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.sc-photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-photo.on { border-style: solid; border-color: var(--amber); }
@media (max-width: 760px) { .sc-row { grid-template-columns: 28px 1fr 1fr 44px; } }
.gm-t-paper .gm-grid .gm-item { width: 100%; }
.gm-t-paper .gm-grid .gm-tag { justify-self: start; margin-bottom: 2px; }
.cust.gm-page { min-width: 0; width: 100%; }  /* body is flex: without this the widest rail/bar widens the page */
/* review page: photos found on the menu + the photo editor */
button.sc-photo { all: unset; box-sizing: border-box; position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1.5px dashed var(--line-strong);
  display: grid; place-items: center; cursor: pointer; overflow: hidden; }
button.sc-photo.on { border-style: solid; border-color: var(--amber); }
button.sc-photo:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
button.sc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
button.sc-photo img[hidden], button.sc-photo span[hidden] { display: none; }
.sc-note { padding: 10px 14px; border-radius: 12px; background: var(--chip); color: var(--accent-text); font-weight: 600; }
.ed-view { position: fixed; inset: 0; z-index: 90; background: rgba(8,9,10,.66); display: grid; place-items: center; padding: 16px; }
.ed-view[hidden] { display: none; }
.ed-card { width: min(760px, 100%); max-height: 94vh; overflow: auto; background: var(--bg); border-radius: 22px; padding: 18px; display: grid; gap: 10px; }
.ed-card h3, .ed-card p { margin: 0; }
.ed-stage { position: relative; justify-self: center; max-width: 100%; touch-action: none; user-select: none; cursor: crosshair; line-height: 0; }
.ed-stage img { max-width: 100%; max-height: 62vh; display: block; border-radius: 8px; }
.ed-box { position: absolute; border: 2.5px solid var(--amber); box-shadow: 0 0 0 9999px rgba(8,9,10,.5); cursor: move; border-radius: 4px; }
.ed-h { position: absolute; width: 22px; height: 22px; right: -11px; bottom: -11px; border-radius: 50%; background: var(--amber); border: 3px solid #0F1012; cursor: nwse-resize; }
.ed-stage { overflow: hidden; border-radius: 8px; }
.ed-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-note.warn { background: rgba(245,158,11,.14); color: #B45309; }

/* ---------- super admin: leads ---------- */
.ld-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.ld-stat { display: flex; flex-direction: column; min-width: 92px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; }
.ld-stat b { font-size: 22px; } .ld-stat span { font-size: 13px; color: var(--muted); }
.ld-stat.on { border-color: var(--ink); }
.ld-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; margin: 14px 0 20px; }
.ld-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ld-add > * { min-width: 0; }
.ld-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.ld-filter .input, .ld-filter input[name=q] { width: auto; flex: 1 1 160px; min-width: 0; }
.ld-chk { display: flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.ld-list { display: grid; gap: 10px; }
.ld-row { display: flex; gap: 14px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 14px 16px; }
.ld-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 300px; }
.ld-kind { align-self: flex-start; display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.ld-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.ld-menu-link { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; }
.ld-stale { color: var(--danger); }

.ld-edit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1 1 360px; }
.ld-edit .input { width: auto; } .ld-edit input[name=notes] { flex: 1 1 180px; min-width: 0; }
.ld-pages { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 18px; }
.ld-code { white-space: normal; word-break: break-word; }
.ld-tools > *, .ld-row > *, .ld-filter > * { min-width: 0; }
.ld-tools input[type=file] { max-width: 100%; }
@media (max-width: 600px) { .ld-add { grid-template-columns: 1fr; } .ld-edit .input, .ld-filter .input { flex: 1 1 100%; width: 100%; } }

/* ---------- ordering from the menu ---------- */
.gm-item { position: relative; }
.gm-add { position: absolute; bottom: 10px; inset-inline-end: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--m-accent, var(--amber)); color: var(--m-on, var(--amber-ink)); font-weight: 700; font-size: 18px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.gm-order { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.gm-order .btn { flex: 1; }
.gm-qty { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px; }
.gm-qty button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink); font-size: 18px; cursor: pointer; }
.gm-qty b { min-width: 26px; text-align: center; }
.gm-qty.sm button { width: 28px; height: 28px; font-size: 15px; }
.gm-cartbar { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 536px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border: 0; border-radius: 18px; cursor: pointer;
  background: var(--m-accent, var(--amber)); color: var(--m-on, var(--amber-ink)); font: 600 16px/1.2 var(--font); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.gm-cartbar[hidden] { display: none; }
body:has(.gm-cartbar:not([hidden])) .gm-page { padding-bottom: 90px; }
.gm-cart { padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; }
.gm-cart h3 { margin: 0; }
.gm-lines { display: grid; gap: 8px; }
.gm-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.gm-line .nm { min-width: 0; overflow-wrap: anywhere; } .gm-line .pr { min-width: 56px; text-align: end; }
.gm-seg { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.gm-seg[hidden] { display: none; }
.gm-seg legend { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.gm-seg label { flex: 1 1 140px; display: flex; gap: 8px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 14px; cursor: pointer; }
.gm-seg label:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.gm-sum { margin: 0; display: grid; gap: 6px; }
.gm-sum div { display: flex; justify-content: space-between; } .gm-sum dt { color: var(--muted); } .gm-sum dd { margin: 0; }
.gm-sum .tot { font-weight: 700; font-size: 18px; padding-top: 6px; border-top: 1px solid var(--line); } .gm-sum .tot dt { color: var(--ink); }
.gm-err { color: var(--danger); margin: 0; }
.gm-cart textarea, .wo-form input { width: 100%; }

.wo-page { gap: 14px; }
.wo-card { display: grid; gap: 12px; }
.wo-card h1 { font-size: 22px; margin: 0; } .wo-card h2 { font-size: 17px; margin: 0; }
.wo-center { text-align: center; justify-items: center; }
.wo-amount { font-size: 18px; margin: 0; } .wo-amount b { font-size: 26px; }
.wo-to { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.wo-to b { font-size: 20px; }
.wo-code { font-size: 54px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.wo-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wo-spin { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--line-strong); border-top-color: var(--ink); animation: wospin 1s linear infinite; }
@keyframes wospin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wo-spin { animation: none; } }

.nav-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 12px; }
.nav-badge[hidden] { display: none; }
.ord-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0 12px; }
.on-list { display: grid; gap: 12px; margin-top: 18px; }
.on-card { display: grid; gap: 10px; }
.on-card.st-checking { box-shadow: inset 0 0 0 2px var(--amber); }
.on-card.st-done, .on-card.st-rejected { opacity: .62; }
.on-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.on-code { font-size: 26px; } .on-stage { font-weight: 600; } .on-total { margin-inline-start: auto; }
.on-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.on-who { display: grid; gap: 4px; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.on-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.on-acts form { margin: 0; }
.on-reject { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.on-reject input { width: auto; min-width: 0; flex: 1 1 160px; }

/* ---------- orders tabs, Ready Cam page, menu link ---------- */
.ord-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 4px; }
.ord-tabs a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); text-decoration: none; color: inherit; font-weight: 600; font-size: 15px; }
.ord-tabs a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ord-tabs-wrap { padding-inline: 28px; } .ord-tabs-wrap .ord-tabs { margin-bottom: 12px; }
@media (max-width: 600px) { .ord-tabs-wrap { padding-inline: 16px; } }
.dev-price { margin: 0 0 10px; } .dev-price b { font-size: 34px; }
.dev-pts, .dev-steps { margin: 0 0 14px; padding-inline-start: 20px; display: grid; gap: 6px; }
.ml-box { margin-bottom: 18px; }
.ml-row { display: flex; gap: 10px; flex-wrap: wrap; } .ml-row input { flex: 1 1 260px; min-width: 0; }

/* ---------- all-menus page ---------- */
.dir-page { max-width: 980px; margin: 0 auto; padding-block: 20px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.dir-head { display: grid; gap: 10px; margin-bottom: 18px; }
.dir-head h1 { margin: 8px 0 0; font-size: clamp(28px, 6vw, 40px); } .dir-head p { margin: 0; }
.dir-top { display: flex; justify-content: space-between; align-items: center; } .dir-top .brand-word { font-size: 24px; font-weight: 800; text-decoration: none; color: inherit; }
.dir-search { max-width: 520px; }
.dir-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.dir-chips button { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 600 14px/1 var(--font); cursor: pointer; }
.dir-chips button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.dir-card { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .15s var(--ease); }
.dir-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.dir-card[hidden] { display: none; }
.dir-logo { flex: none; width: 60px; height: 60px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; background: #0F1012; color: var(--amber); font-weight: 700; font-size: 24px; }
.dir-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.dir-tx { display: grid; gap: 2px; min-width: 0; } .dir-tx b { font-size: 17px; overflow-wrap: anywhere; }
.dir-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.dir-tags em { font-style: normal; font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--chip); color: var(--accent-text); }
.sa-dir { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }
.chip-on { font-size: 13px; color: var(--go-text); font-weight: 600; } .chip-off { font-size: 13px; color: var(--danger); font-weight: 600; }
.dir-tg { display: flex; gap: 8px; align-items: center; }
.imp-box { display: grid; gap: 12px; margin-bottom: 18px; }
.imp-prog { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.imp-prog .wo-spin { width: 22px; height: 22px; border-width: 3px; }
.imp-prog form { margin: 0; }
.gm-seg label small { display: block; font-size: 12px; margin-inline-start: auto; }
.gm-dinfo { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: 14px; }
.gm-closed { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-weight: 600; }
.dir-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dir-price { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; }
.dir-price input { width: 80px; border: 0; background: transparent; padding: 2px 4px; font: inherit; color: inherit; }
.dir-near { display: inline-flex; gap: 0; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.dir-near button, .dir-near select { border: 0; background: transparent; color: inherit; font: 600 14px/1 var(--font); padding: 9px 12px; cursor: pointer; }
.dir-near select { border-inline-start: 1px solid var(--line-strong); width: auto; }
.dir-near button.on { background: var(--ink); color: var(--bg); }
.dir-tags em.open { color: var(--go-text); } .dir-tags em.shut { color: var(--danger); background: var(--surface-2); }
.dir-tags em[hidden] { display: none; }
.dir-hits { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.dir-hits:empty { display: none; }
.guest-strip { display: inline-flex; gap: 8px; align-items: center; margin-top: 14px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); text-decoration: none; color: inherit; font-weight: 600; }
.guest-strip:hover { border-color: var(--ink); }
.gm-tag.t-custom { background: var(--chip); color: var(--accent-text); }
.tag-text { margin-top: 8px; }
.dir-lochelp { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong); font-size: 14px; }
.dir-lochelp ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; }
.dir-lochelp .btn { justify-self: start; }
.dir-lochelp[hidden], .dir-lochelp ol[hidden] { display: none; }
.cp-wipe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.wo-help { gap: 10px; }
.gm-loc { display: grid; gap: 8px; }
.gm-loc[hidden], .gm-locmsg[hidden], .gm-lochelp[hidden] { display: none; }
.gm-locmsg { margin: 0; font-weight: 600; font-size: 14px; } .gm-locmsg.ok { color: var(--go-text); } .gm-locmsg.bad { color: var(--danger); }
.gm-lochelp { margin: 0; padding-inline-start: 20px; font-size: 13px; display: grid; gap: 4px; }
.form-errs { display: block; margin: 12px 0; } .form-errs ul { margin: 6px 0 0; padding-inline-start: 20px; }
.has-err > input, .has-err > select, .has-err input:not([type=checkbox]), .has-err.tgl-row, .has-err .ld-chk { border-color: var(--danger) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent); }
.has-err .errorlist, .field .errorlist { color: var(--danger); margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; }
.req { color: var(--danger); font-style: normal; }
.deliv-box { display: grid; gap: 4px; padding: 14px; border-radius: 16px; border: 1px dashed var(--line-strong); margin: 10px 0; }
.deliv-box[hidden] { display: none; }
.area-row { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; align-items: center; }
@media (max-width: 560px) { .area-row { grid-template-columns: minmax(0, 1fr) auto; } .area-row input { grid-column: 1 / -1; grid-row: 2; } }
.field:has(:required) > label::after, .field:has(> input[required]) > label::after { content: " *"; color: var(--danger); }
.keep-open { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--chip); color: var(--accent-text); font-weight: 600; font-size: 14px; text-align: center; }
.gm-opts { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.gm-opts[hidden], .gm-inote[hidden] { display: none; }
.gm-opts legend { font-weight: 700; margin-bottom: 6px; }
.gm-opts label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; }
.gm-opts label b { margin-inline-start: auto; font-size: 14px; }
.gm-opts label:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.gm-inote { margin: 12px 0 0; }
.gm-line .nm small { display: block; font-size: 12px; color: var(--muted); }
.wo-x { display: block; font-size: 13px; }
.on-tools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-top: 14px; }
.drv-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .drv-bar form { margin: 0; }
.drv { border-radius: 999px; padding: 7px 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 600 13px/1 var(--font); cursor: pointer; }
.drv.free { border-color: var(--go-text); color: var(--go-text); } .drv.busy { opacity: .6; }
.on-acts form[target] { margin: 0; }
.opt-ed { display: grid; gap: 8px; } .opt-rows { display: grid; gap: 8px; } .opt-rows:empty { display: none; }
.opt-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 8px; align-items: center; }
.opt-ed .opt-add { justify-self: start; }
.gm-price small { font-size: 12px; color: var(--muted); font-weight: 500; }
.menu-vis { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; }
.menu-vis.off { box-shadow: inset 0 0 0 2px var(--danger); }
.drv.off { opacity: .45; text-decoration: line-through; }
.drv-panel { margin-top: 18px; display: grid; gap: 10px; }
.drv-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.drv-acts, .drv-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.drv-acts input { width: 150px; } .drv-add input { flex: 1 1 140px; min-width: 0; }
.drv-page { gap: 14px; } .drv-state { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; }
.drv-state.on { box-shadow: inset 0 0 0 2px var(--go-text); } .drv-order { gap: 10px; }
.area-row2 { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface-2); margin-bottom: 10px; }
.area-top { display: flex; gap: 8px; align-items: center; } .area-top select { flex: 1; min-width: 0; }
.area-all { margin: 0; font-size: 13px; }
.achips { display: flex; flex-wrap: wrap; gap: 6px; } .achips:empty { display: none; }
.achip { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 14px; cursor: pointer; }
.achip:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.achip input { position: absolute; opacity: 0; pointer-events: none; }
#autoAreas { justify-self: start; margin-bottom: 8px; }
.achip { position: relative; }
.achip[hidden] { display: none; } .achip-all { font-size: 13px; text-decoration: underline; }
.achip-all { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 6px 4px; }
.drv-sheet { width: 100%; } .drv-sheet th, .drv-sheet td { padding: 12px 14px; text-align: start; white-space: nowrap; } .drv-sheet tfoot td { border-top: 2px solid var(--line-strong); }
.drv-today { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 12px 16px; }
span.drv { cursor: default; }
.drv-st { display: inline-block; font-size: 13px; } .drv-st.st-offered { color: var(--accent-text); } .drv-st.st-declined { color: var(--danger); } .drv-st.st-accepted { color: var(--go-text); }
.drv-offer { box-shadow: inset 0 0 0 2px var(--amber); }
.drv-pay { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; box-shadow: inset 0 0 0 2px var(--go-text); }
.drv-pay form { margin: 0; }
.pay-f { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .pay-f input { width: 110px; } .pay-f input[name=note] { width: 170px; }
.pay-st { font-size: 13px; }
.wo-resume { display: block; margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; background: var(--amber); color: var(--amber-ink); font-weight: 700; text-decoration: none; text-align: center; }
.wo-resume[hidden] { display: none; }
.gm-page .wo-resume { position: sticky; top: 8px; z-index: 30; margin: 8px 12px; }
.pay-ways { display: grid; gap: 10px; margin-bottom: 10px; }
.pay-way { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.pay-way .pw-ic { font-size: 26px; } .pay-way .pw-tx { flex: 1; display: grid; min-width: 0; } .pay-way small { color: var(--muted); font-size: 14px; }

/* ---------- website on phones ---------- */
.only-m { display: none; }
.hero h1 { line-height: 1.15; }
.guest-strip { max-width: 100%; text-align: start; }
@media (max-width: 520px) {
  .site-nav .wrap { gap: 10px; }
  .site-nav .end .btn.only-m, .site-nav .end .btn.nav-dash { display: inline-flex; padding: 8px 14px; font-size: 13px; }
  .hero { padding: 40px 0 28px; }
  .hero h1 { margin: 18px auto 16px; font-size: clamp(38px, 11vw, 48px); line-height: 1.22; letter-spacing: -.02em; }
  .hero .lead { font-size: 17px; margin-bottom: 26px; }
  .hero .actions .btn { width: 100%; justify-content: center; }
  .guest-strip { display: flex; width: 100%; justify-content: space-between; border-radius: 16px; padding: 14px 16px; font-size: 15px; line-height: 1.4; }
  .site-nav .brand-logo { max-height: 30px; width: auto; }
  .section-head h2, .section h2 { font-size: clamp(28px, 8vw, 36px); line-height: 1.25; }
}

/* ---------- website on phones: shorter ---------- */
@media (max-width: 640px) {
  .section { padding: 56px 0 8px; }
  .section-head { margin-bottom: 24px; }
  .section-head h2 { margin-bottom: 8px; }
  /* repeats of the services list, and heavy decoration: phones skip them */
  #features, #new, #plans, .marquee, .svc-chips, .stage, .hero .note { display: none !important; }
  .hero { padding-bottom: 8px; }
  /* three steps: swipe sideways */
  .steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; margin-inline: -16px; padding-inline: 16px; }
  .step { flex: 0 0 82%; min-height: 0; scroll-snap-align: center; padding: 22px 20px; gap: 12px; }
  .step .ic, .step svg { width: 44px; height: 44px; }
  /* services: one group at a time, chosen by the tabs */
  .sv-tabs { position: sticky; top: 64px; z-index: 5; margin: 0 0 14px; padding: 8px 0; background: var(--bg); flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .sv-tabs a { flex: none; }
  .sv-tabs a.on { background: var(--ink); color: var(--bg); }
  .sv-group:not(.on) { display: none; }
  .sv-ghead { display: none; }
  .sv-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 0; font-size: 14px; }
  .sv-card.open p { -webkit-line-clamp: unset; }
  .sv-card { padding: 14px; cursor: pointer; }
  .sv-card h4 { font-size: 16px; }
  .contact-row { margin-top: 16px; }
  .faq { margin-top: 0; }
}
/* the guest menu from a table's QR (core/pos.py) */
.gm-table { box-sizing: border-box; width: calc(100% - 32px); margin: 14px auto 6px; max-width: 560px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 4px; text-align: center; }
.gm-table b { font-size: 20px; }
.gm-table small { color: var(--muted); }
.gm-table-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.gm-table-acts .btn { min-width: 0; white-space: normal; padding: 0 10px; }
.gm-table-msg { margin: 6px 0 0; font-weight: 700; }
.has-color .gm-table .btn-amber { background: var(--m-accent); color: var(--m-on); }
.tq-box { margin-top: 22px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
.tq-box form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tq-switch { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.tq-switch input { width: 20px; height: 20px; }
.tq-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tq-list label { display: flex; gap: 6px; align-items: center; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.strict-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 8px 0; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.link-box { margin: 8px 0; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.link-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.link-row form { margin: 0; }
.link-more summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.link-more .panel { margin-top: 10px; }
.link-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.tile .unv { margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; background: #F5A524; color: #1a1200; font-weight: 800; font-size: 12px; }
.acct-what { margin: 6px 0 0; font-size: 14px; }

/* a service that's coming (version 2): shown in the menu, not clickable */
.nav-soon { opacity: .55; cursor: default; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; white-space: nowrap; }
.nav-soon small { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); }
.ord-tabs .nav-soon { padding: 9px 16px; border-radius: 999px; border: 1px dashed var(--line-strong); font-weight: 600; font-size: 15px; }
.app-nav .nav-soon { color: var(--muted); font-size: 14px; }
/* the review tile: the first and widest on the guest hub */
.hub-tile.wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 14px; }
.hub-tile.wide .em { margin-bottom: 0; }

/* ---------- the website's look on the menu and the pager page (menu design «site», core/site.py) ---------- */
body.site-look { --sr: 22px; --sr-sm: 14px; --sr-pill: 999px; }
body.site-look.shape-soft { --sr: 14px; --sr-sm: 10px; --sr-pill: 12px; }
body.site-look.shape-sharp { --sr: 4px; --sr-sm: 3px; --sr-pill: 4px; }
.site-look .gm-hero { text-align: start; padding: 18px 18px 28px; background: radial-gradient(70% 90% at 85% 0%, color-mix(in srgb, var(--m-accent) 30%, transparent), transparent 70%); }
.site-look .gm-hero-in { justify-items: start; padding-top: 18px; }
.site-look .gm-logo { width: 56px; height: 56px; border-radius: var(--sr-sm); border: 0; background: var(--m-accent); color: var(--m-on); font-size: 24px; }
.site-look .gm-hero h1 { font-size: clamp(32px, 8vw, 46px); margin-top: 6px; }
.site-look .gm-meta { color: var(--muted); }
.site-look .gm-search { border-radius: var(--sr-pill); }
.site-look .gm-tabs a { border-radius: var(--sr-pill); border-color: var(--line-strong); background: transparent; }
.site-look .gm-tabs a.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.site-look .gm-item { border-radius: var(--sr); border: 1px solid var(--line); }
.site-look .gm-ph { width: 84px; height: 84px; border-radius: var(--sr-sm); }
.site-look .gm-item.card .gm-ph { border-radius: 0; }
.site-look .gm-ph.ph { background: color-mix(in srgb, var(--m-accent) 16%, var(--surface-2)); }
.site-look .gm-price b { color: var(--ink); }
.site-look .btn { border-radius: var(--sr-pill); }
.site-look .gm-view-card, .site-look .gm-cart { border-radius: var(--sr) var(--sr) 0 0; }
.site-look .hub-hello { border-radius: var(--sr); background: radial-gradient(90% 80% at 90% 0%, color-mix(in srgb, var(--amber) 45%, #0F1012), #0F1012 70%); }
.site-look .hub-main, .site-look .hub-tile { border-radius: var(--sr); }
.site-look .hub-tile .em { font-size: 26px; }
/* offers / most ordered: compact rows (menu photos are often scans), sliding sideways */
.site-look .gm-item.card { width: min(82vw, 320px); flex-direction: row; gap: 12px; padding: 12px; align-items: center; }
.site-look .gm-item.card .gm-ph { width: 72px; height: 72px; aspect-ratio: auto; border-radius: var(--sr-sm); }
.site-look .gm-item.card .gm-body { padding: 0; }

/* «your order is ready»: the place's own background (its cover photo, else its colour) */
body.is-ready .ready-center { color: var(--rd-ink, #0F1012); }
body.is-ready .ready-orb .ring { border-color: color-mix(in srgb, var(--rd-ink, #0F1012) 35%, transparent); }
body.is-ready .cust-foot, body.is-ready .cust-foot a { color: color-mix(in srgb, var(--rd-ink, #0F1012) 70%, transparent); }
body.is-ready .ready-center .btn { --b: var(--rd-ink, #0F1012); --f: var(--rd-paper, #fff); }
body.is-ready .cust-head, body.is-ready .cust-head small { color: var(--rd-ink, #0F1012); }
.game-cta + .ad-card, .game-cta + .tips, .game-cta ~ .tips { margin-top: 18px; }

/* iPhone Safari: «open the App Clip» (it rings with the phone locked); the web flow stays behind it */
.clip-ask { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 18px;
            background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.clip-ask[hidden] { display: none; }
.clip-ask-in { max-width: 420px; text-align: center; margin-top: 8vh; }
.clip-ask-in[hidden] { display: none; }
.clip-up { font-size: 54px; animation: clipUp 1.2s ease-in-out infinite; }
.clip-ask h2 { margin: 10px 0 8px; font-size: 26px; }
.clip-ask p { color: var(--muted); line-height: 1.8; margin: 0 0 14px; }
.clip-ask ol { text-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 34px; line-height: 2; margin: 0 0 18px; }
.clip-ask .lnk { color: var(--muted); text-decoration: underline; background: none; border: 0; font: inherit; cursor: pointer; }
body.clip-asking { overflow: hidden; }
@keyframes clipUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* the networks' own marks (customer/_social_icon.html) */
.soc-ic { display: inline-block; vertical-align: middle; flex: none; }
.soc-row { display: inline-flex; gap: 4px; align-items: center; }
.soc-row .soc-ic { width: 26px; height: 26px; }
.sheet-copy.social .ico .soc-ic { width: 30px; height: 30px; }

/* the add-ons when the menu doesn't take orders: a list with prices */
.gm-opts-info { margin-top: 14px; }
.gm-opts-info ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gm-opts-info li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }

/* the brand's menu: which branch to pick up from */
.gm-branches { border: 0; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.gm-branches legend { font-weight: 700; margin-bottom: 8px; }
.gm-branch { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 16px; cursor: pointer; }
.gm-branch:has(input:checked) { border-color: var(--m-accent, var(--ink)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-accent, var(--ink)) 30%, transparent); }
.gm-branch span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gm-branch small { font-size: 12px; }
.gm-branch-map { font-size: 12px; white-space: nowrap; color: inherit; text-decoration: none; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); }

/* a brand's main place: «which branch?» lists */
.br-pick b { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.br-pick small { font-size: 12px; font-weight: 400; }
.br-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.br-card .br-acts { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

/* a small photo (e.g. cut from a printed menu): shown at about its own size on a soft card, not blown up blurry */
.gm-slide img.lowres { width: auto; height: auto; max-width: min(78%, 300px); max-height: 300px; border-radius: 24px; background: #fff;
                       box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); }
.gm-car:has(img.lowres) { background: radial-gradient(70% 80% at 50% 40%, color-mix(in srgb, var(--m-accent, var(--amber)) 35%, var(--surface)), var(--surface-2)); }
.gm-car:has(img.lowres) .gm-slide { aspect-ratio: auto; height: 360px; }
/* a branch of a brand: the brand's name big, the branch under it */
.hub-branch { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 600;
              background: color-mix(in srgb, var(--amber) 22%, transparent); color: #F3F2EE; animation: hubIn .5s .05s cubic-bezier(.2,.8,.2,1) both; }
/* the review tile takes the first row: the last tile spans only when it would be alone */

/* the branch pill switches branch; the header shows brand + branch; room under it */
button.hub-branch { border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; }
.hub-branch small { opacity: .75; font-weight: 400; }
.br-pick.here { border-color: var(--amber); }
.cust-head { margin-bottom: 14px; }
.keep-open { margin-top: 6px; }

/* ---------- the owner's dashboard on phones: a tab bar at the bottom, the full menu as a sheet ---------- */
.m-tabbar { display: none; }
@media (max-width: 760px) {
  .app-head .app-nav { display: none; }
  body.m-more .app-head .app-nav { display: flex; position: fixed; inset: 0; z-index: 60; margin: 0; padding: 18px 16px 110px; flex-direction: column;
    align-items: stretch; gap: 8px; overflow-y: auto; background: color-mix(in srgb, #0F1012 92%, transparent); backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); }
  body.m-more .app-head .app-nav a, body.m-more .app-head .app-nav button.lnk, body.m-more .app-head .app-nav .nav-soon {
    padding: 14px 16px; border-radius: 16px; font-size: 16px; background: var(--surface); color: var(--ink); text-align: start; }
  body.m-more .app-head .app-nav form button.lnk { width: 100%; }
  body.m-more { overflow: hidden; }
  .m-tabbar { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 70; justify-content: space-around; align-items: stretch;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: #0F1012; border-top: 1px solid rgba(243,242,238,.12); }
  .m-tabbar a, .m-tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; background: none;
    color: #A3A6AD; font: inherit; font-size: 11px; text-decoration: none; border-radius: 12px; cursor: pointer; }
  .m-tabbar span { font-size: 20px; line-height: 1.2; }
  .m-tabbar a[aria-current="page"], body.m-more #mMore { color: #0F1012; background: var(--amber); font-weight: 700; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  #erpCard, .erp-card { display: none !important; }  /* the LIXSOS offer: on the desktop only */
}

/* an item's add-ons and note: folded behind a small button, then small chips (not a tall list) */
.gm-fold-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 14px;
               background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; text-align: start; }
.gm-fold-btn span { color: var(--muted); font-weight: 400; }
.gm-fold-btn i { margin-inline-start: auto; font-style: normal; transition: transform .2s; }
.gm-fold-btn.sm { width: auto; display: inline-flex; padding: 8px 12px; font-size: 14px; border-style: solid; }
.gm-fold.open .gm-fold-btn i { transform: rotate(180deg); }
.gm-opts.gm-fold { border: 0; padding: 0; margin: 12px 0 0; }
.gm-fold:not(.open) #gmvOptList, .gm-fold:not(.open) > input { display: none; }
.gm-inote.gm-fold { margin-top: 10px; }
.gm-inote.gm-fold > input { margin-top: 8px; }
#gmvOptList { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#gmvOptList label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
                    font-size: 14px; cursor: pointer; min-height: 0; background: transparent; }
#gmvOptList label input { position: absolute; opacity: 0; pointer-events: none; }
#gmvOptList label b { font-size: 12px; color: var(--muted); font-weight: 600; }
#gmvOptList label:has(input:checked) { background: var(--m-accent, var(--amber)); border-color: var(--m-accent, var(--amber)); color: var(--m-on, var(--amber-ink)); }
#gmvOptList label:has(input:checked) b { color: inherit; }
/* no online ordering: the add-ons as chips too */
.gm-opts-info ul { flex-direction: row; flex-wrap: wrap; }
.gm-opts-info li { padding: 6px 12px; border-radius: 999px; font-size: 13px; gap: 6px; }
body.m-more .app-nav .nav-soon small { background: rgba(243,242,238,.14); color: #D9DBE0; }

/* Owner menu: a grid of item cards; editing opens a sheet */
.mi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; }
.mi-cat { grid-column: 1 / -1; margin: 8px 0 -2px; font-size: 15px; }
.mi-cat:first-child { margin-top: 0; }
.mi-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.mi-card.off { opacity: .55; }
.mi-cardph { position: relative; aspect-ratio: 4 / 3; border: 0; padding: 0; cursor: pointer; background: var(--bg); display: grid; place-items: center; font-size: 34px; }
.mi-cardph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mi-cardph em { position: absolute; bottom: 6px; inset-inline-start: 6px; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; }
.mi-cardph .mi-tag { position: absolute; top: 6px; inset-inline-start: 6px; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface); }
.mi-cardph .mi-hid { position: absolute; top: 6px; inset-inline-end: 6px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.mi-card .mi-info { padding: 10px 10px 4px; }
.mi-card .mi-info b { font-size: 14px; line-height: 1.35; }
.mi-card .mi-info small { font-weight: 700; }
.mi-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mi-chips i { font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.mi-chips i.req { color: #E5484D; }
.mi-acts { display: flex; gap: 4px; padding: 6px 8px 10px; margin-top: auto; align-items: center; }
.mi-acts form { margin: 0; }
.mi-acts > .btn:first-child { flex: 1; }
.mi-sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; }
.mi-sheet[hidden] { display: none; }
.mi-sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.mi-sheet-card { position: relative; width: min(680px, 100%); max-height: 92vh; overflow: auto; background: var(--surface); border-radius: 22px; padding: 16px; }
.mi-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.mi-sheet .mi-edit { margin: 0; padding: 0; background: none; }
.mi-edit-grid .field.wide { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .mi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
  .mi-sheet { align-items: flex-end; }
  .mi-sheet-card { border-radius: 22px 22px 0 0; max-height: 90vh; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); }
  .mi-sheet .mi-edit-grid { grid-template-columns: 1fr; }
}
/* add-on groups in the item editor */
.og-list { display: grid; gap: 10px; }
.og { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 14px; }
.og.free { border-style: dashed; }
.og-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; }
.og.free .og-head { display: block; font-size: 14px; }
.og-head select { width: auto; }
.og .og-row { justify-self: start; }
.addons-ed .og-new { justify-self: start; }
@media (max-width: 640px) { .og-head { grid-template-columns: 1fr 1fr auto; } .og-head .og-name { grid-column: 1 / -1; } }

/* Guest menu: required / optional groups in the item viewer; the card's stepper once it's in the cart */
.gm-grp { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.gm-grp legend { display: flex; align-items: center; gap: 8px; width: 100%; font-weight: 700; margin-bottom: 6px; }
.gm-grp legend small { margin-inline-start: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.gm-grp legend small.req { background: #E5484D1a; color: #E5484D; }
.gm-grp.miss legend small.req { background: #E5484D; color: #fff; }
.gm-grp.miss { animation: gmShake .35s; }
@keyframes gmShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.gm-grp label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; }
.gm-grp label b { margin-inline-start: auto; font-size: 14px; }
.gm-grp label:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.gm-item.in-cart { box-shadow: 0 0 0 2px var(--m-accent, var(--amber)) inset; }
.gm-add.gm-stepon { width: auto; height: 34px; padding: 0 4px; border-radius: 999px; display: inline-flex; gap: 2px; align-items: center; }
.gm-add.gm-stepon i { font-style: normal; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; font-weight: 700; cursor: pointer; }
.gm-add.gm-stepon b { min-width: 18px; text-align: center; font-size: 15px; }
.gm-opts-info li.gh { flex-basis: 100%; background: none; padding: 6px 2px 0; font-size: 13px; }
.nav-badge.on { background: var(--amber); color: var(--amber-ink); margin-inline-start: 2px; }
.mi-search { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
.mi-search input { flex: 1; min-width: 0; }
.mi-card[hidden], .mi-cat[hidden], .ao-it[hidden] { display: none; }
.mi-import { margin-bottom: 14px; }
.mi-import > summary { cursor: pointer; padding: 12px 16px; border: 1px dashed var(--line-strong); border-radius: 16px; font-weight: 700; list-style: none; }
.mi-import[open] > summary { margin-bottom: 12px; }
/* the add-ons page */
.ao-set { display: grid; gap: 12px; }
.ao-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ao-head h3 { margin: 0; }
.ao-names-box { margin: 4px 0 6px; }
.ao-names-label { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.ao-names {
  margin: 0;
  padding: 12px 16px;
  background: var(--surface-2);
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  border: 1px solid var(--line);
  color: var(--ink);
}
.ao-edit > summary { list-style: none; width: max-content; }
.ao-edit[open] > summary { margin-bottom: 12px; }
.ao-edit { display: grid; gap: 10px; }
.ao-edit[open] { gap: 14px; }

/* Item picker trigger & dialog */
.ao-picker-wrap { margin: 8px 0; }
.ao-pick-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; font-size: 14px; border: 1.5px dashed var(--line-strong); background: var(--surface); cursor: pointer; transition: all .2s; }
.ao-pick-trigger:hover { border-color: var(--amber); background: var(--surface-2); }
.ao-count-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--amber); color: #0F1012; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; }

dialog.ao-dlg {
  display: none !important;
}
dialog.ao-dlg[open] {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(700px, 92vw);
  height: 80vh;
  max-height: 620px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface);
  color: var(--ink);
  padding: 0;
  box-shadow: 0 25px 70px rgba(0,0,0,.75);
  z-index: 1000;
  overflow: hidden;
}
dialog.ao-dlg::backdrop {
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}
.ao-dlg-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; flex: none; background: var(--surface); }
.ao-dlg-top { display: flex; justify-content: space-between; align-items: center; }
.ao-dlg-title { margin: 0; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.ao-dlg-sub { margin: 0; font-size: 13px; color: var(--muted); }
.ao-dlg-search-row { display: flex; gap: 10px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.ao-dlg-search { flex: 1; min-height: 40px; padding: 6px 14px; }
.ao-dlg-quick { display: flex; gap: 6px; }

.ao-dlg-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}
.ao-dlg-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface-2); flex: none; }

.ao-cat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}
.ao-cat-h {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  user-select: none;
}
.ao-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ao-it {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  font-size: 13.5px;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  transition: all .15s;
  user-select: none;
}
.ao-it:hover {
  border-color: var(--amber);
}
.ao-it:has(input:checked) {
  border-color: var(--amber);
  background: rgba(200, 243, 29, 0.12);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--amber);
}
.ao-it input {
  accent-color: var(--amber);
  width: 17px;
  height: 17px;
  cursor: pointer;
}
.ao-it[hidden], .ao-cat[hidden] { display: none !important; }

/* Option groups & row image */
.og { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.og.free { border-style: dashed; background: var(--surface-2); }
.og-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.og-badge-opt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(46,190,115,.15); color: var(--go-bright); }
.og-desc-hint { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.og-status-tag { flex-basis: 100%; font-size: 12px; font-weight: 700; margin-top: 4px; }
.og-status-tag.req { color: var(--danger); }
.og-status-tag.opt { color: var(--go-bright); }

.opt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.opt-row .on { flex: 2; min-width: 100px; }
.opt-row .op { width: 90px; flex: none; }
.opt-img-wrap { position: relative; display: flex; align-items: center; flex: none; }
.opt-img-btn { padding: 0 10px; min-height: 38px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; border-radius: 10px; border: 1px dashed var(--line-strong); cursor: pointer; white-space: nowrap; }
.opt-img-btn:hover { border-color: var(--amber); color: var(--amber); }
.opt-thumb-preview { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; border: 1.5px solid var(--amber); cursor: pointer; }
.opt-img-del { position: absolute; top: -6px; inset-inline-end: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; border: 0; font-size: 10px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.opt-thumb { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; vertical-align: middle; margin-inline-end: 6px; }
@media (max-width: 640px) {
  .ord-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .ord-tabs::-webkit-scrollbar { display: none; }
  .ord-tabs a, .ord-tabs .nav-soon { flex: none; white-space: nowrap; padding: 8px 14px; font-size: 14px; }
}
.mi-addbox { margin: 14px 0; }
.mi-addbox > summary { list-style: none; width: max-content; }
.mi-addbox[open] > summary { margin-bottom: 12px; }
.mi-addbox > form { max-width: 760px; }
/* the website's cover on top of the welcome card, the logo over its edge */
.hub-hello.has-cover { position: relative; overflow: hidden; padding-top: 0; }
.hub-cover { position: relative; margin: 0 -20px 0; height: 170px; }
.hub-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,16,18,0) 40%, #0F1012 100%); }
.hub-hello.has-cover .hub-logo { position: relative; margin-top: -46px !important; border: 3px solid #0F1012; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
/* the game on the welcome page: loud, in the place's colour, with a slow shine */
.hub-tile.game { position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 85%, #000), color-mix(in srgb, var(--amber) 55%, #0F1012)); color: #fff; border-color: transparent; }
.hub-tile.game small { color: rgba(255,255,255,.85); }
.hub-tile.game .em { font-size: 34px; animation: gameWiggle 2.4s ease-in-out infinite; }
.hub-tile.game .go { margin-inline-start: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: color-mix(in srgb, var(--amber) 85%, #000); font-size: 15px; flex: none; }
.hub-tile.game::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%); transform: translateX(-120%); animation: gameShine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes gameShine { 60%, 100% { transform: translateX(120%); } }
@keyframes gameWiggle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-12deg) scale(1.1); } 86% { transform: rotate(10deg) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .hub-tile.game::after, .hub-tile.game .em { animation: none; } }

/* /menus/: a card per brand — its cover, the logo over the edge, the branches in a sheet */
.dir-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.dir-card { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "cover cover" "logo tx" "go go"; gap: 0 14px;
  align-items: start; padding: 0 0 14px; overflow: hidden; border-radius: 24px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.dir-cover { grid-area: cover; display: block; height: 132px; margin-bottom: -30px; background: linear-gradient(135deg, var(--surface-2), var(--chip)); }
.dir-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-card .dir-logo { grid-area: logo; position: relative; margin-inline-start: 14px; width: 68px; height: 68px; border-radius: 20px; border: 3px solid var(--surface); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.dir-card .dir-tx { grid-area: tx; padding-block-start: 36px; padding-inline-end: 14px; }
.dir-card .dir-tx b { font-size: 18px; }
.dir-go { grid-area: go; margin: 12px 14px 0; padding: 10px 14px; border-radius: 14px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 14px; text-align: center; }
.dir-card:hover .dir-go { filter: brightness(1.15); }
.dir-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.dir-sheet[hidden] { display: none; }
.dir-sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s; }
.dir-sheet.on .dir-sheet-bg { opacity: 1; }
.dir-sheet-card { position: relative; width: min(560px, 100%); max-height: 82vh; overflow: auto; background: var(--bg); border-radius: 26px 26px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.dir-sheet.on .dir-sheet-card { transform: none; }
.dir-sheet-top { display: flex; justify-content: space-between; align-items: center; font-size: 20px; }
.dir-sheet-top button { border: 0; background: var(--surface-2); color: var(--ink); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.dir-sheet-card > p { margin: 4px 0 12px; }
.dir-br-list { display: grid; gap: 10px; }
.dir-br { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; }
.dir-br .pin { font-size: 22px; } .dir-br .tx { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dir-br small { color: var(--muted); font-size: 13px; }
.dir-br .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dir-br .tags em { font-style: normal; font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--chip); color: var(--accent-text); }
.dir-br .tags em.open { color: var(--go-text); } .dir-br .tags em.shut { color: var(--danger); background: var(--surface-2); }
.dir-br .go { flex: none; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 13px; }
@media (min-width: 700px) { .dir-sheet { align-items: center; } .dir-sheet-card { border-radius: 26px; } }

/* the hub's small cards: three in a row (they stretch when fewer fit), each in its own colour, icons that float */
.hub-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.hub-grid > .hub-tile { flex: 1 1 100%; }
.hub-grid > .hub-tile.mini { flex: 1 1 calc(33.333% - 7px); min-width: 96px; min-height: 0; position: relative; overflow: hidden;
  align-items: center; text-align: center; gap: 6px; padding: 16px 8px 14px; border-radius: 22px; border-color: transparent;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 16%, var(--surface)), var(--surface) 70%); box-shadow: 0 6px 18px color-mix(in srgb, var(--tint) 14%, transparent); }
.hub-tile.mini { --tint: #4F7CFF; }
.hub-tile.mini.pay { --tint: #8FB300; } .hub-tile.mini.t-branches { --tint: #E5484D; } .hub-tile.mini.t-site { --tint: #2F80ED; }
.hub-tile.mini.t-follow { --tint: #D6249F; } .hub-tile.mini.t-loyalty { --tint: #F2994A; }
.hub-tile.mini .em { margin: 0; width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; font-size: 26px;
  background: color-mix(in srgb, var(--tint) 18%, transparent); animation: tileFloat 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.6s); }
.hub-tile.mini .em.soc-row { width: auto; min-width: 52px; max-width: 100%; padding: 0 10px; gap: 0; display: flex; align-items: center; justify-content: center; }
.hub-tile.mini .em.soc-row > * { flex: none; }
.hub-tile.mini .em.soc-row .soc-ic { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.hub-tile.mini .em.soc-row .soc-ic + .soc-ic { margin-inline-start: -7px; }  /* stacked like avatars */
.hub-tile.mini { max-width: 100%; }
.hub-tile.mini .tx { display: grid; gap: 2px; width: 100%; }
.hub-tile.mini b { font-size: 14px; line-height: 1.25; }
.hub-tile.mini small { font-size: 11px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-tile.mini::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-130%); pointer-events: none; }
.hub-tile.mini:hover::after, .hub-tile.mini:active::after { animation: tileShine .7s ease-out; }
.hub-tile.mini:active { transform: scale(.93); }
.hub-tile.mini:hover .em, .hub-tile.mini:active .em { animation: tileBoing .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes tileFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes tileShine { to { transform: translateX(130%); } }
@keyframes tileBoing { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-8deg); } 100% { transform: scale(1); } }
.hub-tile.review .em { animation: tileFloat 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hub-tile.mini .em, .hub-tile.review .em, .hub-tile.mini::after { animation: none !important; } }
/* exactly four small cards: two by two, not three and one */
.hub-grid:has(> .mini ~ .mini ~ .mini ~ .mini):not(:has(> .mini ~ .mini ~ .mini ~ .mini ~ .mini)) > .hub-tile.mini { flex-basis: calc(50% - 5px); }

/* the welcome card's top: the logo and, beside it, «play» — glowing, wiggling, with sparkles */
.hub-toprow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.hub-toprow .hub-logo { margin: 0 !important; }
.hub-hello.has-cover .hub-toprow { margin-top: -46px; position: relative; }
.hub-hello.has-cover .hub-toprow .hub-logo { margin-top: 0 !important; }
.hub-play { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--amber), color-mix(in srgb, var(--amber) 60%, #fff)); color: var(--amber-ink, #0F1012); font: inherit;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--amber) 45%, transparent); animation: playGlow 2.2s ease-in-out infinite, hubIn .6s .2s cubic-bezier(.2,.8,.2,1) both;
  -webkit-tap-highlight-color: transparent; }
.hub-play .em { font-size: 26px; line-height: 1; animation: gameWiggle 2.4s ease-in-out infinite; }
.hub-play .tx { display: grid; text-align: start; line-height: 1.15; } .hub-play b { font-size: 15px; } .hub-play small { font-size: 11px; opacity: .85; }
.hub-play:active { transform: scale(.94); }
.hub-play .spark { position: absolute; font-style: normal; font-size: 12px; color: #fff; opacity: 0; pointer-events: none; animation: sparkle 2.4s ease-in-out infinite; }
.hub-play .s1 { top: -6px; inset-inline-start: 18px; } .hub-play .s2 { bottom: -4px; inset-inline-end: 22px; animation-delay: .8s; } .hub-play .s3 { top: 4px; inset-inline-end: -4px; font-size: 10px; animation-delay: 1.6s; color: #FFD43B; }
@keyframes playGlow { 0%, 100% { box-shadow: 0 8px 24px color-mix(in srgb, var(--amber) 40%, transparent); } 50% { box-shadow: 0 8px 34px color-mix(in srgb, var(--amber) 75%, transparent), 0 0 0 4px color-mix(in srgb, var(--amber) 25%, transparent); } }
@keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 30% { opacity: 1; transform: scale(1.2) rotate(40deg); } 60% { opacity: 0; transform: scale(.6) rotate(80deg); } }

/* «our website» on top of the cards: wide, blue, a globe that turns and an arrow that nudges */
.hub-tile.site { --tint: #2F80ED; position: relative; overflow: hidden; border-color: transparent;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 22%, var(--surface)), var(--surface) 75%); box-shadow: 0 8px 22px color-mix(in srgb, var(--tint) 18%, transparent); }
.hub-tile.site .em { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; font-size: 28px; background: color-mix(in srgb, var(--tint) 18%, transparent); }
.hub-tile.site .em { animation: globeTurn 6s linear infinite; }
.hub-tile.site .tx { flex: 1; display: grid; gap: 2px; } .hub-tile.site b { font-size: 18px; }
.hub-tile.site .go { font-size: 26px; color: var(--tint); animation: nudge 1.6s ease-in-out infinite; }
[dir="ltr"] .hub-tile.site .go { transform: scaleX(-1); }
.hub-tile.mini.review { --tint: #4285F4; }
.hub-tile.mini.review .em { background: color-mix(in srgb, var(--tint) 14%, transparent); }
@keyframes globeTurn { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg) scale(1.06); } }
@keyframes nudge { 0%, 100% { translate: 0; } 50% { translate: -5px; } }
[dir="ltr"] .hub-tile.site .go { animation-name: nudgeLtr; } @keyframes nudgeLtr { 0%, 100% { translate: 0; } 50% { translate: 5px; } }
@media (prefers-reduced-motion: reduce) { .hub-play, .hub-play .em, .hub-play .spark, .hub-tile.site .em, .hub-tile.site .go { animation: none !important; } .hub-play .spark { opacity: 0; } }
/* a long sheet (seven branches…) never runs off the top: it stops under the status bar and scrolls inside */
.sheet-card { max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - 12px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet-card > * { flex-shrink: 0; }  /* rows keep their height; the card scrolls instead */
.sheet-card .br-pick { padding-block: 12px; }
.src-web { color: var(--accent-text); font-weight: 700; }
.gm-had { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--m-accent, var(--amber)) 16%, transparent); color: var(--m-accent, var(--accent-text)); margin-bottom: 2px; }
/* the bar back to a menu order still going: its number, where it is, «follow» */
.wo-resume:not([hidden]) { display: flex; align-items: center; gap: 12px; text-align: start; padding: 12px 14px; border-radius: 18px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--amber) 35%, transparent); animation: hubIn .5s cubic-bezier(.2,.8,.2,1) both; }
.wo-resume .ic { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: rgba(0,0,0,.12); }
.wo-resume .tx { flex: 1; display: grid; gap: 1px; } .wo-resume .tx b { font-size: 16px; } .wo-resume .tx small { font-size: 12px; font-weight: 600; opacity: .85; }
.wo-resume .go { flex: none; padding: 7px 12px; border-radius: 999px; background: rgba(0,0,0,.14); font-size: 13px; }
.wo-resume.ready { background: var(--go, #1FAE5B); color: #fff; animation: hubIn .5s both, woPing 1.6s ease-in-out infinite; }
@keyframes woPing { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--go, #1FAE5B) 30%, transparent); } }
.wo-cancel { display: grid; gap: 4px; text-align: center; margin: -4px 0 4px; }
.wo-alert .on { display: none; } .wo-alert.on .off { display: none; } .wo-alert.on .on { display: inline; }
.wo-alert.on { background: var(--go, #1FAE5B); color: #fff; border-color: transparent; }
.cam-key { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .cam-key:last-child { border-bottom: 0; } .cam-key b { flex: 1 1 160px; } .cam-key code { font-size: 12px; }
.cam-scan { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.cam-scan img { width: 120px; height: 96px; object-fit: cover; border-radius: 12px; background: var(--surface-2); flex: none; }
.cam-scan .tx { display: grid; gap: 4px; min-width: 0; }
.cam-scan code { font-size: 11px; white-space: pre-wrap; word-break: break-all; color: var(--muted); }