:root {
  --primary: #87CEFA;
  --primary-dark: #5DBFF6;
  --secondary: #0D47A1;
  --background: #E6F4FF;
  --surface: #FFFFFF;
  --ink: #1A1F2B;
  --muted: #667085;
  --line: #D7E6F5;
  --neutral: #F2F4F7;
  --red: #E53935;
  --black: #000000;
  --shadow: 0 16px 44px rgba(13,71,161,.14);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--background);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--background); }
body { min-height: 100dvh; overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img, video { display: block; }

#app { min-height: 100dvh; }

.app-loading,
.app-error {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px;
  background: var(--background);
}
.loading-card,
.error-card {
  width: min(100%, 420px);
  border-radius: 26px;
  padding: 28px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.loading-logo { width: 72px; height: 72px; margin: 0 auto 18px; object-fit: contain; }
.spinner { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--primary); border-radius: 50%; margin: 14px auto; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-card h1 { font-size: 22px; margin: 0 0 8px; font-weight: 900; }
.error-card p { margin: 0 0 20px; color: var(--muted); font-weight: 650; line-height: 1.45; }

.preview-shell { min-height: 100dvh; background: #fff; padding-bottom: calc(80px + var(--safe-bottom)); }
.preview-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  height: calc(54px + var(--safe-top));
  padding: var(--safe-top) 12px 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(215,230,245,.9);
}
.brand { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.brand img { width: 30px; height: 30px; object-fit: contain; border-radius: 10px; }
.brand-word { font-size: 18px; font-weight: 950; letter-spacing: -.4px; line-height: 1; white-space: nowrap; }
.brand-word .pick { color: var(--ink); }
.brand-word .penguin { color: var(--primary-dark); }
.preview-badge { margin-left: auto; padding: 6px 9px; border-radius: 999px; background: var(--background); color: var(--secondary); font-size: 9.5px; font-weight: 900; border: 1px solid var(--line); }

.hero {
  position: relative; height: 228px; overflow: hidden; background: var(--ink);
}
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.hero-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(145deg,#0D47A1,#003153); color: #fff; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.33) 42%,rgba(26,31,43,.94)); }
.hero-back { position: absolute; z-index: 3; left: 12px; top: 12px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(26,31,43,.76); color: white; display: grid; place-items: center; }
.hero-content { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: flex-end; gap: 12px; }
.merchant-logo { width: 72px; height: 72px; border-radius: 20px; border: 2px solid white; background: white; object-fit: cover; box-shadow: 0 6px 14px rgba(0,0,0,.24); flex: 0 0 auto; }
.merchant-logo.fallback { display: grid; place-items: center; color: var(--secondary); font-size: 28px; font-weight: 900; }
.hero-copy { flex: 1; min-width: 0; }
.hero-title-row { display: flex; align-items: center; gap: 8px; }
.hero-title { margin: 0; color: white; font-size: 21px; line-height: 1.05; font-weight: 750; letter-spacing: -.45px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-pill { margin-left: auto; flex: 0 0 auto; padding: 5px 10px; border-radius: 999px; background: var(--primary); color: var(--ink); font-size: 9.5px; font-weight: 950; letter-spacing: .4px; }
.status-pill.closed { color: white; background: rgba(255,255,255,.18); }
.hero-category { margin: 5px 0 9px; color: rgba(255,255,255,.78); font-size: 11.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-meta { display: flex; align-items: center; min-height: 34px; padding: 8px 10px; border-radius: 13px; color: white; background: rgba(13,71,161,.24); border: 1px solid rgba(255,255,255,.14); font-size: 11.2px; font-weight: 750; overflow: hidden; }
.hero-meta span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-meta .star { color: var(--primary); }
.hero-meta i { width: 1px; height: 14px; margin: 0 8px; background: rgba(255,255,255,.24); flex: 0 0 auto; }

.menu-toolbar { position: sticky; top: calc(54px + var(--safe-top)); z-index: 25; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 12px 8px; }
.search-wrap { position: relative; }
.search-wrap input { width: 100%; height: 44px; padding: 0 42px 0 42px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; outline: none; }
.search-wrap input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(135,206,250,.2); }
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.clear-search { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--neutral); color: var(--muted); }
.category-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-top: 9px; }
.category-strip::-webkit-scrollbar { display: none; }
.category-chip { flex: 0 0 auto; height: 36px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 11px; font-weight: 850; }
.category-chip.active { background: var(--primary); border-color: var(--primary); font-weight: 950; }

.content { background: #fff; }
.section { padding-top: 14px; }
.section-heading { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; }
.section-heading h2 { margin: 0; font-size: 17px; font-weight: 950; letter-spacing: -.32px; }
.section-heading .fire { color: var(--secondary); }
.section-heading small { margin-left: auto; color: var(--secondary); font-size: 12.5px; font-weight: 900; }

.popular-scroller { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 10px; scrollbar-width: none; }
.popular-scroller::-webkit-scrollbar { display: none; }
.popular-card { position: relative; flex: 0 0 154px; height: 252px; border-radius: 20px; overflow: hidden; background: var(--ink); scroll-snap-align: center; box-shadow: 0 9px 24px rgba(13,71,161,.12); }
.popular-card img, .popular-card video { width: 100%; height: 100%; object-fit: cover; }
.popular-card::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.04),rgba(0,0,0,.08) 44%,rgba(0,0,0,.84)); pointer-events:none; }
.popular-copy { position:absolute; z-index:2; left:12px; right:12px; bottom:12px; color:#fff; }
.popular-copy h3 { margin:0 0 4px; font-size:15px; font-weight:900; line-height:1.15; }
.popular-copy p { margin:0 0 8px; font-size:10.5px; color:rgba(255,255,255,.8); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.popular-price { display:inline-flex; padding:6px 8px; border-radius:10px; color:var(--ink); background:var(--primary); font-size:12px; font-weight:950; }
.play-chip { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:var(--primary); background:rgba(26,31,43,.82); border:1.5px solid rgba(255,255,255,.88); }

.menu-section-title { padding: 12px 12px 6px; font-size: 17px; font-weight: 950; letter-spacing: -.32px; }
.menu-item { display:flex; gap:12px; min-height:124px; padding:10px 12px; border-top:1px solid rgba(215,230,245,.62); border-bottom:1px solid rgba(215,230,245,.62); background:#fff; }
.menu-thumb { position:relative; flex:0 0 108px; width:108px; height:100px; border-radius:16px; overflow:hidden; background:var(--neutral); }
.menu-thumb img, .menu-thumb video { width:100%; height:100%; object-fit:cover; }
.menu-copy { flex:1; min-width:0; height:100px; display:flex; flex-direction:column; }
.menu-name { margin:0; color:var(--ink); font-size:14px; line-height:1.16; font-weight:500; letter-spacing:-.12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.menu-desc { margin:6px 0 0; color:var(--muted); font-size:10.5px; line-height:1.28; font-weight:650; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.menu-bottom { margin-top:auto; display:flex; align-items:center; gap:8px; }
.menu-price { color:var(--ink); font-size:13.5px; font-weight:900; }
.menu-tag { padding:5px 8px; border-radius:8px; background:var(--neutral); color:var(--secondary); font-size:8.6px; font-weight:800; }
.menu-open { margin-left:auto; width:34px; height:34px; border:0; border-radius:11px; background:var(--primary); color:var(--ink); display:grid; place-items:center; font-size:21px; font-weight:500; }
.menu-open:disabled { background:var(--neutral); color:var(--muted); }
.empty-menu { padding:36px 22px; text-align:center; color:var(--muted); font-weight:700; }

.sticky-cta { position:fixed; z-index:50; left:0; right:0; bottom:0; padding:8px 10px calc(8px + var(--safe-bottom)); background:rgba(255,255,255,.97); backdrop-filter:blur(14px); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(26,31,43,.08); }
.sticky-cta-inner { max-width:430px; margin:0 auto; display:flex; align-items:center; gap:8px; }
.cta-copy { min-width:0; flex:1; }
.cta-copy strong { display:block; font-size:11.5px; font-weight:950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cta-copy small { display:block; margin-top:2px; color:var(--muted); font-size:9.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cta-actions { display:flex; gap:8px; }
.cta-btn { height:44px; padding:0 14px; border-radius:14px; border:1px solid var(--line); font-size:11.5px; font-weight:950; white-space:nowrap; }
.cta-btn.primary { border-color:var(--primary); background:var(--primary); color:var(--ink); }
.cta-btn.secondary { background:#fff; color:var(--secondary); }

/* Item page */
.item-page { min-height:100dvh; background:#fff; padding-bottom:calc(80px + var(--safe-bottom)); }
.item-media { position:relative; width:100%; aspect-ratio:1.05/1; max-height:470px; overflow:hidden; background:var(--ink); }
.item-media img, .item-media video { width:100%; height:100%; object-fit:cover; }
.item-media .hero-back { top:calc(12px + var(--safe-top)); }
.item-content { padding:16px 12px 24px; }
.item-title-row { display:flex; align-items:flex-start; gap:12px; }
.item-title-row h1 { flex:1; margin:0; font-size:21px; line-height:1.12; font-weight:900; letter-spacing:-.4px; }
.item-title-row .price { color:var(--secondary); font-size:18px; font-weight:950; }
.item-description { color:var(--muted); line-height:1.45; font-size:13.5px; font-weight:650; }
.item-merchant-card { display:flex; align-items:center; gap:10px; margin:18px 0; padding:12px; border:1px solid var(--line); border-radius:18px; background:var(--background); }
.item-merchant-card img { width:46px; height:46px; border-radius:14px; background:#fff; object-fit:cover; }
.item-merchant-card strong { display:block; font-size:14px; font-weight:950; }
.item-merchant-card span { color:var(--muted); font-size:11px; font-weight:700; }
.option-preview { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.option-preview h3 { margin:0 0 10px; font-size:16px; font-weight:900; }
.option-choice { display:flex; justify-content:space-between; gap:12px; padding:12px 0; color:var(--muted); border-bottom:1px solid rgba(215,230,245,.7); font-size:13px; font-weight:700; }
.related-picks { margin-top:24px; }

/* Picks page copied from Home/Picks screen */
.picks-page { height:100dvh; overflow:hidden; background:#000; color:#fff; }
.picks-top { height:56px; padding-top:var(--safe-top); background:#000; color:#fff; position:relative; z-index:20; }
.picks-brand-row { height:56px; padding:10px 12px 8px; display:flex; align-items:center; gap:8px; }
.picks-brand-row .brand-word .pick, .picks-brand-row .brand-word .penguin { color:#fff; }
.zone-chip { margin-left:auto; max-width:150px; height:28px; display:flex; align-items:center; gap:4px; padding:0 8px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.05); color:#fff; font-size:10.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.picks-tabs { display:none; }
.picks-tab { position:relative; border:0; background:transparent; color:rgba(255,255,255,.64); font-size:14px; font-weight:850; }
.picks-tab.active { color:#fff; }
.picks-tab.active::after { content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:36px; height:3.8px; border-radius:999px; background:#fff; }
.picks-feed { height:calc(100dvh - 56px); overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior-y:contain; scrollbar-width:none; background:#000; padding-bottom:calc(70px + var(--safe-bottom)); }
.picks-feed::-webkit-scrollbar { display:none; }
.pick-slide { position:relative; height:calc(100dvh - 56px - 70px - var(--safe-bottom)); min-height:480px; scroll-snap-align:start; overflow:hidden; background:#000; }
.pick-video, .pick-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.pick-gradient { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.12),transparent 28%,transparent 58%,rgba(0,0,0,.38)); pointer-events:none; }
.creator-overlay { position:absolute; z-index:4; top:10px; left:10px; right:10px; display:flex; align-items:center; gap:8px; min-width:0; }
.creator-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; background:var(--ink); border:1.4px solid rgba(255,255,255,.96); box-shadow:0 3px 8px rgba(0,0,0,.87); }
.creator-name { min-width:0; color:#fff; font-size:14px; line-height:1; font-weight:950; letter-spacing:-.15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 10px rgba(0,0,0,.87); }
.verified { color:#fff; flex:0 0 auto; }
.follow-btn { margin-left:auto; height:32px; padding:0 12px; border-radius:999px; border:1.35px solid rgba(255,255,255,.96); background:rgba(13,71,161,.38); color:#fff; font-size:11px; font-weight:950; box-shadow:0 5px 16px rgba(0,0,0,.25); }
.tagged-merchant { position:absolute; z-index:4; right:10px; bottom:18px; width:188px; padding:14px 9px 9px; border:1.05px solid rgba(135,206,250,.82); border-radius:18px; background:rgba(26,31,43,.90); box-shadow:0 8px 14px rgba(0,0,0,.22); }
.tagged-merchant::before { content:"Tagged merchant"; position:absolute; top:-12px; right:12px; height:24px; padding:0 9px; display:flex; align-items:center; border-radius:999px; background:var(--primary); color:var(--ink); font-size:9px; font-weight:950; }
.tagged-row { display:flex; align-items:center; gap:8px; }
.tagged-logo { width:34px; height:34px; border-radius:11px; object-fit:cover; background:#fff; }
.tagged-copy { flex:1; min-width:0; }
.tagged-copy strong { display:block; color:#fff; font-size:13.2px; line-height:1; font-weight:950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tagged-copy small { display:block; margin-top:4px; color:rgba(255,255,255,.76); font-size:10.1px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.play-state { position:absolute; z-index:5; left:50%; top:50%; transform:translate(-50%,-50%); width:78px; height:78px; border-radius:50%; display:none; place-items:center; color:var(--ink); background:rgba(255,255,255,.9); box-shadow:0 10px 24px rgba(0,0,0,.22); }
.pick-slide.paused .play-state { display:grid; }
.pick-progress { position:absolute; z-index:6; left:0; right:0; bottom:0; height:3.8px; background:rgba(255,255,255,.22); }
.pick-progress > i { display:block; height:100%; width:0%; background:var(--red); }
.pick-gate { height:calc(100dvh - 56px - 70px - var(--safe-bottom)); min-height:480px; scroll-snap-align:start; display:grid; place-items:center; padding:22px; background:linear-gradient(150deg,#000,#0D47A1); }
.pick-gate-card { width:min(100%,360px); padding:22px; border-radius:24px; text-align:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(18px); }
.pick-gate-card img { width:74px; height:74px; margin:0 auto 14px; object-fit:contain; }
.pick-gate-card h2 { margin:0 0 8px; font-size:24px; font-weight:950; }
.pick-gate-card p { margin:0 0 20px; color:rgba(255,255,255,.76); line-height:1.45; font-size:13px; font-weight:650; }
.picks-cta { background:rgba(0,0,0,.92); border-top-color:rgba(255,255,255,.12); color:#fff; }
.picks-cta .cta-copy small { color:rgba(255,255,255,.62); }
.picks-cta .cta-btn.secondary { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.18); }

.action-gate { position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.action-gate.show { opacity:1; pointer-events:auto; }
.action-gate-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.68); backdrop-filter:blur(6px); }
.action-gate-card { position:relative; width:min(100%,420px); padding:30px 24px 22px; border-radius:28px; background:linear-gradient(180deg, rgba(18,23,33,.98), rgba(18,23,33,.94)); border:1px solid rgba(135,206,250,.24); box-shadow:0 28px 80px rgba(0,0,0,.48); text-align:center; color:#fff; }
.action-gate-close { position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; display:grid; place-items:center; }
.action-gate-logo-wrap { width:88px; height:88px; margin:0 auto 12px; border-radius:26px; display:grid; place-items:center; background:linear-gradient(180deg, rgba(135,206,250,.18), rgba(135,206,250,.06)); border:1px solid rgba(135,206,250,.18); }
.action-gate-logo { width:58px; height:58px; object-fit:contain; }
.action-gate-pill { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--primary); font-size:11.5px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; }
.action-gate-card h2 { margin:14px 0 10px; font-size:28px; line-height:1.08; font-weight:980; letter-spacing:-.03em; }
.action-gate-card p { margin:0 auto 20px; max-width:320px; color:rgba(255,255,255,.76); font-size:14px; line-height:1.45; font-weight:650; }
.action-gate-actions { display:flex; flex-direction:column; gap:10px; }
.action-gate-actions .cta-btn { width:100%; height:50px; justify-content:center; }
body.modal-open { overflow:hidden; }

.toast { position:fixed; z-index:100; left:50%; bottom:calc(96px + var(--safe-bottom)); transform:translateX(-50%) translateY(20px); max-width:calc(100% - 32px); padding:12px 16px; border-radius:16px; color:#fff; background:var(--ink); box-shadow:0 10px 30px rgba(0,0,0,.24); font-size:12px; font-weight:800; opacity:0; pointer-events:none; transition:.2s ease; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (min-width: 760px) {
  body { background: var(--background); }
  .preview-shell, .item-page, .picks-page { width: min(100%, 430px); margin: 0 auto; box-shadow: 0 0 0 1px rgba(13,71,161,.08), 0 18px 50px rgba(13,71,161,.12); }
  .sticky-cta, .picks-cta { left: 50%; right: auto; width: min(100%, 430px); transform: translateX(-50%); }
}

@media (max-width: 430px) {
  .cta-copy { display:none; }
  .cta-actions { width:100%; }
  .cta-btn { flex:1; padding:0 11px; }
  .hero-meta i { margin:0 5px; }
  .menu-thumb { width:110px; flex-basis:110px; }
  .tagged-merchant { width:182px; }
}

@media (max-width: 430px) {
  .action-gate-card { padding:28px 18px 18px; border-radius:24px; }
  .action-gate-card h2 { font-size:24px; }
  .action-gate-card p { font-size:13px; }
}

.app-phone-page { width:100%; max-width:430px; margin:0 auto; background:inherit; }