/* Pujo Parikrama: design tokens, then layout, then components. Mobile first. */
:root {
  --bg: #FBF7F2;
  --surface: #FFFFFF;
  --surface-2: #F4ECE3;
  --ink: #1C1917;
  --ink-2: #4A433E;
  --ink-3: #857B73;
  --line: #E9DFD4;
  --brand: #9F1239;
  --brand-ink: #FFFFFF;
  --brand-soft: #FCE7EC;
  --top: #9F1239;
  --accent: #C2410C;
  --gold: #B7791F;
  --ok: #15803D;
  --warn: #B45309;
  --bad: #B91C1C;
  --live: #DC2626;
  --c-quiet: #16A34A; --c-moderate: #CA8A04; --c-busy: #EA580C; --c-packed: #DC2626;
  --shadow: 0 1px 2px rgba(60, 30, 10, .05), 0 4px 14px rgba(60, 30, 10, .06);
  --radius: 16px;
  --tabbar-h: 62px;
  --top-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Bengali", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131010; --surface: #1D1918; --surface-2: #2A2321; --ink: #F5EEE8; --ink-2: #D2C7BE; --ink-3: #998D84;
    --line: #362E2B; --brand: #FB7185; --brand-ink: #1A0508; --brand-soft: #3B1720; --top: #4C0519; --accent: #FB923C;
    --gold: #FBBF24; --ok: #4ADE80; --warn: #FBBF24; --bad: #F87171;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131010; --surface: #1D1918; --surface-2: #2A2321; --ink: #F5EEE8; --ink-2: #D2C7BE; --ink-3: #998D84;
  --line: #362E2B; --brand: #FB7185; --brand-ink: #1A0508; --brand-soft: #3B1720; --top: #4C0519; --accent: #FB923C;
  --gold: #FBBF24; --ok: #4ADE80; --warn: #FBBF24; --bad: #F87171;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
html[lang="bn"] body { line-height: 1.55; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.fine { color: var(--ink-3); font-size: 12.5px; }
.center { text-align: center; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.sm { width: 16px; height: 16px; }
.ic.fill { fill: currentColor; stroke: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 900; height: calc(var(--top-h) + var(--safe-t));
  padding: var(--safe-t) 12px 0 16px; display: flex; align-items: center; gap: 8px; background: var(--top); color: #fff;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.brand > div { min-width: 0; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; }
.brand h1 { font-size: 17px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }
.brand .sub { margin: 0; font-size: 12px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-pick select {
  appearance: none; border: 0; border-radius: 999px; padding: 8px 28px 8px 12px; font-weight: 600; font-size: 13.5px; flex: none;
  background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 11px center / 10px;
  color: inherit;
}
.lang-pick option { color: #1C1917; }

/* ---------- layout ---------- */
main { padding-top: calc(var(--top-h) + var(--safe-t)); padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 24px); }
.view { display: none; }
.view.active { display: block; animation: fade .16s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.pad { padding: 0 16px; }
.section { margin-top: 26px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 16px; margin-bottom: 10px; }
.section-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.005em; }
.section-head .sub { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; font-weight: 400; }
.link-btn { border: 0; background: none; color: var(--brand); font-weight: 600; font-size: 14px; cursor: pointer; padding: 4px 0; white-space: nowrap; }
.view-title { padding: 18px 16px 4px; }
.view-title h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.view-title p { margin: 4px 0 0; color: var(--ink-3); }

/* ---------- home ---------- */
.hero { margin: 14px 16px 0; padding: 16px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #9F1239 0%, #C2410C 100%); box-shadow: var(--shadow); }
:root[data-theme="dark"] .hero { background: linear-gradient(135deg, #4C0519 0%, #7C2D12 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { background: linear-gradient(135deg, #4C0519 0%, #7C2D12 100%); } }
.hero .eyebrow { font-size: 12.5px; opacity: .9; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.hero h2 { margin: 4px 0 6px; font-size: 24px; line-height: 1.15; }
.hero p { margin: 0; opacity: .95; font-size: 14px; }
.hero .hero-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hero .hero-chip { background: rgba(255,255,255,.16); border-radius: 999px; padding: 5px 10px; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; }

.search { position: relative; margin: 14px 16px 0; }
.search input {
  width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 13px 14px 13px 42px; font-size: 15.5px;
  box-shadow: var(--shadow); outline: none;
}
.search input:focus { border-color: var(--brand); }
.search > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.results { list-style: none; margin: 6px 0 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.results:empty { display: none; }
.results li { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; }
.results li:hover, .results li:focus-visible { background: var(--surface-2); }
.results .kind { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); flex: none; }
.results .nm { font-weight: 600; }
.results .meta { font-size: 12.5px; color: var(--ink-3); }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 16px 0; }
.quick button { border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 12px 4px 10px; display: grid; justify-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink-2); box-shadow: var(--shadow); }
.quick .ic { width: 24px; height: 24px; color: var(--brand); }

.hscroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.mini {
  flex: none; width: 210px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 12px 10px; box-shadow: var(--shadow); cursor: pointer; display: grid; gap: 6px; border-top: 4px solid var(--zc, var(--line));
}
.mini .nm { font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.mini .meta { font-size: 12.5px; color: var(--ink-3); }

.zone-list { display: grid; gap: 10px; padding: 0 16px; }
.zone-card { display: grid; grid-template-columns: 6px 1fr auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 12px 12px 0; box-shadow: var(--shadow); cursor: pointer; overflow: hidden; }
.zone-card .bar { height: 100%; background: var(--zc); border-radius: 0 4px 4px 0; }
.zone-card h3 { margin: 0; font-size: 15.5px; }
.zone-card p { margin: 2px 0 6px; color: var(--ink-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zone-card .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--ink-3); }
.zone-card > .ic { color: var(--ink-3); }

/* ---------- pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.quiet { color: var(--c-quiet); background: color-mix(in srgb, var(--c-quiet) 13%, transparent); }
.pill.moderate { color: var(--c-moderate); background: color-mix(in srgb, var(--c-moderate) 14%, transparent); }
.pill.busy { color: var(--c-busy); background: color-mix(in srgb, var(--c-busy) 13%, transparent); }
.pill.packed { color: var(--c-packed); background: color-mix(in srgb, var(--c-packed) 13%, transparent); }
.pill.live { color: #fff; background: var(--live); }
.pill.live .dot { animation: pulse 1.3s infinite; background: #fff; }
.pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.pill.car-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pill.car-limited { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.pill.car-avoid { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- map ---------- */
.map-wrap { position: relative; }
.map { height: 40vh; min-height: 240px; background: var(--surface-2); position: relative; z-index: 0; isolation: isolate; }
.map.short { height: 34vh; }
.leaflet-container { font: inherit; background: var(--surface-2); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 80%, transparent) !important; color: var(--ink-3); font-size: 10px !important; }
.fab-sm { position: absolute; right: 12px; bottom: 30px; z-index: 500; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; }
.pin { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px; }
.pin.sq { border-radius: 6px; font-size: 10px; }
.me-dot { width: 16px; height: 16px; border-radius: 50%; background: #2563EB; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(37,99,235,.25); }
.seq { background: var(--brand); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; font-weight: 700; font-size: 12px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.panel { position: relative; margin-top: -16px; background: var(--bg); border-radius: 20px 20px 0 0; padding-top: 12px; z-index: 400; }

/* ---------- controls ---------- */
.seg { display: flex; margin: 0 16px 10px; background: var(--surface-2); border-radius: 12px; padding: 4px; }
.seg button { flex: 1; border: 0; background: transparent; padding: 9px 6px; border-radius: 9px; font-weight: 600; cursor: pointer; color: var(--ink-2); font-size: 14px; display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; padding: 2px 0; }
.chip { flex: none; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 13px; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--ink-2); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 16px 10px; color: var(--ink-3); font-size: 13px; }
.toolbar select, .form select, .form input, .form textarea { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 10px; min-height: 40px; color: var(--ink); }
.time-row { display: flex; align-items: center; gap: 10px; padding: 0 16px 8px; font-size: 13px; color: var(--ink-2); }
.time-row input { flex: 1; accent-color: var(--brand); }
.time-row strong { white-space: nowrap; }

/* ---------- list cards ---------- */
.list { list-style: none; margin: 0; padding: 0 16px; display: grid; gap: 8px; }
.item {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; cursor: pointer; box-shadow: var(--shadow); overflow: hidden;
}
.item .nm { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.item .meta { font-size: 12.5px; color: var(--ink-3); grid-column: 1 / 2; }
.item .status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; grid-column: 1 / -1; margin-top: 4px; }
.item .side { grid-row: 1 / 3; grid-column: 2; text-align: right; display: grid; align-content: start; justify-items: end; gap: 4px; }
.item .score { font-weight: 700; font-size: 13px; color: var(--gold); display: inline-flex; gap: 3px; align-items: center; }
.item .count { font-size: 12px; color: var(--ink-3); display: inline-flex; gap: 4px; align-items: center; }
.item.visited .nm::after { content: " ✓"; color: var(--ok); }
.item:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.empty { text-align: center; color: var(--ink-3); padding: 28px 16px; }
.notice { margin: 0 16px 10px; border-radius: 14px; padding: 12px 14px; font-size: 13.5px; background: var(--surface-2); color: var(--ink-2); display: grid; gap: 4px; }
.notice b { color: var(--ink); }
.notice.ok { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.notice.limited { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }
.notice.avoid { background: color-mix(in srgb, var(--bad) 11%, var(--surface)); }
.line-blue { color: #2563EB; } .line-green { color: #16A34A; } .line-purple { color: #9333EA; } .line-orange { color: #EA580C; } .line-suburban { color: var(--ink-3); }

/* ---------- buttons ---------- */
.btn { border: 1px solid var(--line); background: var(--surface); padding: 11px 16px; border-radius: 12px; font-weight: 600; cursor: pointer; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--ink); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.success { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn.ghost { background: transparent; color: var(--bad); }
.btn.sm { min-height: 36px; padding: 6px 12px; font-size: 13.5px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: default; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row > .btn { flex: 1 1 0; min-width: 0; }

/* ---------- forms ---------- */
.form { padding: 0 16px; display: grid; gap: 14px; }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form legend, .form label { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.form label { display: grid; gap: 6px; }
.form input, .form select, .form textarea { width: 100%; font-weight: 400; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toggle { display: flex !important; align-items: center; gap: 10px; font-weight: 500 !important; }
.toggle input { width: 22px !important; height: 22px; min-height: 0 !important; accent-color: var(--brand); flex: none; }

/* ---------- plan ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
.trail { display: grid; gap: 6px; cursor: pointer; }
.trail h3 { margin: 0; font-size: 16px; }
.trail p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.trail .row { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--ink-3); }
.plan-sum { margin: 0 16px; }
.plan-sum h3 { margin: 0 0 2px; font-size: 18px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; text-align: center; }
.kpis b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.kpis span { font-size: 11.5px; color: var(--ink-3); }
.timeline { list-style: none; margin: 14px 16px; padding: 0 0 0 18px; border-left: 2px dashed var(--line); }
.timeline li { position: relative; padding: 0 0 14px 14px; }
.timeline li::before { content: attr(data-n); position: absolute; left: -32px; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.timeline li.ride::before { content: "🚇"; background: var(--surface-2); font-size: 13px; }
.timeline li.start::before { content: "▶"; background: var(--ink); color: var(--bg); font-size: 10px; }
.timeline .t { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.timeline .nm { font-weight: 600; }
.timeline .sub { font-size: 12.5px; color: var(--ink-3); }
.timeline .eat { font-size: 12.5px; color: var(--accent); }

/* ---------- moments ---------- */
.grid-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0 16px; }
.grid-photos.compact { padding: 0; }
.thumb { position: relative; aspect-ratio: 1; background: var(--surface-2); border: 0; padding: 0; cursor: pointer; overflow: hidden; border-radius: 6px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .badge { position: absolute; left: 6px; bottom: 6px; display: inline-flex; gap: 3px; align-items: center; color: #fff; font-size: 11.5px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.thumb .vid { position: absolute; right: 6px; top: 6px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.thumb .vid .ic { width: 18px; height: 18px; }
.moment-view img, .moment-view video { width: 100%; max-height: 62vh; object-fit: contain; background: #000; border-radius: 14px; }
.moment-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 4px; }
.like-btn[aria-pressed="true"] { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, var(--line)); }
.like-btn[aria-pressed="true"] .ic { fill: currentColor; }
.fab { position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); z-index: 850; width: 56px; height: 56px; border-radius: 18px; border: 0; background: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 20px rgba(159,18,57,.35); display: grid; place-items: center; cursor: pointer; }
.fab .ic { width: 26px; height: 26px; }
.upload-preview { position: relative; border-radius: 14px; overflow: hidden; background: var(--surface-2); aspect-ratio: 4/3; display: grid; place-items: center; color: var(--ink-3); }
.upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.progress { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }

/* ---------- stats ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; text-align: center; }
.stat b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11.5px; color: var(--ink-3); }

/* ---------- me / fit ---------- */
.ring-wrap { position: relative; width: min(60vw, 230px); aspect-ratio: 1; margin: 18px auto 6px; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 14; }
.ring-bg { stroke: var(--line); }
.ring-fg { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 540.35; stroke-dashoffset: 540.35; transition: stroke-dashoffset .6s ease; }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-steps { font-size: 38px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ring-goal { color: var(--ink-3); font-size: 13px; }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 16px; }
.stats4 div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 4px; text-align: center; }
.stats4 b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.stats4 span { font-size: 11.5px; color: var(--ink-3); }
.btn.live { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pulse { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #EF4444; animation: pulse 1.2s infinite; }
.badges { list-style: none; margin: 0; padding: 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.badge-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px; text-align: center; font-size: 12px; color: var(--ink-3); }
.badge-tile .em { font-size: 26px; display: block; filter: grayscale(1); opacity: .35; }
.badge-tile.got { color: var(--ink); font-weight: 600; }
.badge-tile.got .em { filter: none; opacity: 1; }
.rows { list-style: none; margin: 0; padding: 0 16px; display: grid; gap: 6px; }
.rows li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.settings { margin: 22px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 0 14px; }
.settings summary { padding: 12px 16px; font-weight: 600; cursor: pointer; }

/* ---------- tab bar ---------- */
.tabbar { position: fixed; inset: auto 0 0 0; z-index: 900; height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b); display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--line); }
.tab { border: 0; background: none; display: grid; place-items: center; align-content: center; gap: 3px; font-size: 11px; color: var(--ink-3); cursor: pointer; }
.tab .ic { width: 24px; height: 24px; }
.tab.active { color: var(--brand); font-weight: 700; }
.tab.active .ic { stroke-width: 2.3; }

/* ---------- sheet ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.38); z-index: 950; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 960; max-height: 88vh; overflow-y: auto; background: var(--bg); border-radius: 22px 22px 0 0; padding: 10px 16px calc(22px + var(--safe-b)); transform: translateY(105%); transition: transform .24s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -10px 30px rgba(0,0,0,.2); outline: none; }
.sheet.open { transform: none; }
.sheet-grip { width: 42px; height: 5px; border-radius: 9px; background: var(--line); margin: 0 auto 8px; }
.sheet-close { position: absolute; top: 8px; right: 10px; border: 0; background: var(--surface-2); width: 34px; height: 34px; border-radius: 50%; font-size: 20px; cursor: pointer; color: var(--ink); }
.sheet .eyebrow { display: flex; gap: 6px; align-items: center; color: var(--ink-3); font-size: 13px; }
.sheet .eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; }
.sheet h2.title { margin: 4px 40px 2px 0; font-size: 22px; line-height: 1.2; }
.sheet .lead { color: var(--ink-2); margin: 10px 0 0; }
.sheet h3.sh { font-size: 14px; margin: 20px 0 8px; color: var(--ink); }
.sheet .kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; margin: 0; }
.sheet .kv dt { color: var(--ink-3); }
.sheet .kv dd { margin: 0; }
.mini-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.mini-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; }
.mini-list li small { color: var(--ink-3); white-space: nowrap; }
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 52px; margin: 4px 0 2px; }
.hours i { display: block; border-radius: 3px 3px 0 0; opacity: .8; }
.hours i.now { opacity: 1; outline: 2px solid var(--ink); outline-offset: 1px; }
.hours-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); }
.verify { margin-top: 10px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 990; transition: .2s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 400px) { .quick button { font-size: 11.5px; } }
@media (min-width: 760px) {
  main { max-width: 760px; margin: 0 auto; }
  .tabbar { max-width: 760px; margin: 0 auto; border-radius: 18px 18px 0 0; border: 1px solid var(--line); }
  .sheet { max-width: 660px; margin: 0 auto; }
  .list { grid-template-columns: 1fr 1fr; }
  .grid-photos { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- hierarchy filters & pickers ---------- */
.chips.sub { padding-top: 0; }
.chip.sm { min-height: 32px; padding: 5px 11px; font-size: 13px; }
.region-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.region-row:last-child { border-bottom: 0; }
.chip.region { font-weight: 700; }
.chip.region[data-partial] { border-color: var(--ink); }
.picker-btn { justify-content: space-between; font-weight: 500; }
.mini-list li[aria-current="true"] { border-color: var(--brand); }

/* ---------- photo galleries ---------- */
.gallery { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gal { position: relative; flex: none; width: 72%; max-width: 300px; aspect-ratio: 4 / 3; border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: var(--surface-2); cursor: pointer; scroll-snap-align: start; }
.gal img { width: 100%; height: 100%; object-fit: cover; }
.gal .yr { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.gallery.dishes .gal { width: 42%; max-width: 170px; aspect-ratio: 1; }
.gal.dish .dn { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; color: #fff; font-size: 12.5px; font-weight: 700; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.gal.dish.none { display: grid; place-items: center; background: var(--surface-2); }
.gal.dish.none .dn { position: static; background: none; color: var(--ink-2); text-align: center; padding: 8px; }
.credit { margin: 4px 0 0; }

/* growth: share row and story button */
.share-row { margin-top: 8px; }
.btn.wa { background: #25D366; border-color: #25D366; color: #fff; }
.btn.story-btn { background: linear-gradient(90deg, #9F1239, #B45309); border: 0; color: #fff; font-weight: 700; }

/* Home: simple start screen */
.hero.compact h2 { font-size: 20px; }
.hero.compact p { font-size: 14.5px; line-height: 1.4; }
.hero-link { margin-top: 10px; background: rgba(255,255,255,.18); color: #fff; border: 0; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.intro { margin: 14px 16px 0; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.intro-head { display: flex; justify-content: space-between; align-items: center; }
.intro h2 { margin: 0; font-size: 16px; }
.intro ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.icon-btn { border: 0; background: var(--surface-2); color: var(--ink); width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
.tasks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px; }
.task { display: grid; justify-items: start; gap: 4px; text-align: left; padding: 14px; min-height: 112px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; font: inherit; }
.task:active { transform: scale(.98); }
.task-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand, #9F1239) 12%, transparent); color: var(--brand, #9F1239); margin-bottom: 4px; }
.task-t { font-weight: 700; font-size: 15.5px; line-height: 1.2; }
.task-s { font-size: 13px; color: var(--ink-3); line-height: 1.3; }
.regions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px; }
.regions .region { position: relative; display: grid; gap: 2px; text-align: left; padding: 12px 14px 12px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; overflow: hidden; }
.regions .region::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--zc); }
.region-n { font-weight: 700; font-size: 16px; }
.region-c { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.region-a { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.regions .region:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hero.compact { padding: 12px 14px; }
.hero.compact .hero-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hero.compact h2 { margin: 2px 0 0; font-size: 18px; }
.hero.compact p { margin-top: 6px; font-size: 13.5px; }
.hero.compact .hero-link { margin-top: 0; white-space: nowrap; }
.section.first { margin-top: 14px; }
.task { min-height: 0; padding: 12px; gap: 2px; }
.task-ic { width: 34px; height: 34px; margin-bottom: 2px; }
.task-t { font-size: 15px; }
.task-s { font-size: 12.5px; }

/* ---------- Map tab: one filter row, map or list ---------- */
.explore-bar { position: sticky; top: calc(var(--top-h) + var(--safe-t)); z-index: 600; background: var(--bg); padding-top: 10px; border-bottom: 1px solid var(--line); }
.explore-bar .seg { margin-bottom: 8px; }
.filter-row { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-row select { flex: 1 1 0; min-width: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 10px; min-height: 40px; color: var(--ink); font-size: 14px; }
.filter-row.food select { flex: 0 0 auto; max-width: 52vw; }
#view-explore[data-mode="list"] .map-wrap { display: none; }
#view-explore[data-mode="list"] .panel { margin-top: 0; border-radius: 0; }
#view-explore[data-mode="map"] .panel { display: none; }
#view-explore[data-mode="map"] .map { min-height: 260px; }
body:has(#view-explore.active[data-mode="map"]) main { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
.mode-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px); z-index: 850; border: 0; border-radius: 999px; padding: 11px 18px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px; display: inline-flex; gap: 8px; align-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer; white-space: nowrap; }
.mode-pill .ic { width: 18px; height: 18px; }
#view-explore[data-mode="list"] .panel { padding-bottom: 60px; }
details.more { margin: 0 16px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
details.more > summary { cursor: pointer; padding: 10px 12px; font-size: 13.5px; color: var(--ink-2); font-weight: 600; display: flex; gap: 6px; align-items: center; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: '▾'; margin-left: auto; color: var(--ink-3); }
details.more[open] > summary::after { content: '▴'; }
details.more .time-row { padding: 0 12px 12px; }
.form details.more { margin: 0; }
.form details.more .form { padding: 0 12px 12px !important; }

/* ---------- My route: 3-step wizard ---------- */
.stepper { list-style: none; display: flex; gap: 6px; margin: 12px 16px 14px; padding: 0; }
.stepper li { flex: 1; }
.stepper button { width: 100%; border: 0; border-bottom: 3px solid var(--line); background: none; padding: 6px 2px 8px; display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 13.5px; color: var(--ink-3); font-weight: 600; cursor: pointer; }
.stepper button b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 12px; }
.stepper button.done { color: var(--ink-2); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.stepper button.done b { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand); }
.stepper button[aria-current="step"] { color: var(--ink); border-color: var(--brand); }
.stepper button[aria-current="step"] b { background: var(--brand); color: var(--brand-ink); }
.stepper button:disabled { cursor: default; opacity: .6; }
.wz-body { padding: 0 16px; }
.form.wz-body { padding: 0 16px; }
.wz-q { margin: 0 0 4px; font-size: 18px; }
.wz-foot { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b)); z-index: 5; display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 16px; margin-top: 8px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--line); }
.form .wz-foot { margin: 4px -16px 0; }
.wz-foot.top { position: static; border: 0; background: none; padding: 0 16px 10px; margin: 0; justify-content: flex-start; }
.btn[aria-disabled="true"] { opacity: .5; }
body:has(#view-explore.active) .toast { bottom: calc(var(--tabbar-h) + var(--safe-b) + 72px); }

/* Place sheets: Directions and "I'm here" come first */
.action-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.action-bar .btn { min-height: 52px; font-size: 15.5px; }
.btn.here { background: var(--surface); color: var(--ink); border: 2px solid var(--ok); }
.btn.here .ic { color: var(--ok); }
.timeline li.hop { background: color-mix(in srgb, #EA580C 10%, transparent); border-radius: 12px; padding: 8px 10px 8px 14px; margin: 0 0 14px; }
.timeline li.hop::before { content: "🛺"; background: #FFEDD5; top: 8px; }
.timeline li.hop .nm { color: #C2410C; }
.timeline li[data-place] { padding-right: 46px; }
.timeline .go { position: absolute; right: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--brand); }


.time-row select { flex: 1; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 8px; min-height: 36px; color: var(--ink); }

/* ---------- Home banner: a real protima, quietly framed ---------- */
.hero.slides { position: relative; overflow: hidden; margin: 12px 16px 0; padding: 0; height: 268px; border-radius: 20px; background: #3A0A10; color: #FFF4E0; box-shadow: 0 10px 28px rgba(58,10,16,.32); }
.hero.slides .slide { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; opacity: 0; transition: opacity 1.2s ease; }
.hero.slides .slide.on { opacity: 1; }
.hero.slides .slide:not(.on) { pointer-events: none; }  /* only the visible slide takes taps */
.hero.slides .slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); }
.hero.slides .slide.on img { animation: kenburns 7s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(40,6,10,.35) 0%, rgba(40,6,10,0) 22%, rgba(40,6,10,0) 38%, rgba(40,6,10,.6) 62%, rgba(40,6,10,.94) 100%); }
.hero-copy { position: absolute; left: 0; right: 0; bottom: 16px; padding: 0 16px; pointer-events: none; }
.sharad-greet { font-family: "Galada", "Noto Serif Bengali", serif; font-size: 34px; line-height: 1.05; color: #F6C343; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.sharad-sub { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .92; margin-top: 4px; }
.sharad-when { margin-top: 9px; display: inline-flex; flex-wrap: wrap; gap: 6px; font-weight: 700; font-size: 13.5px; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(246,195,67,.55); backdrop-filter: blur(4px); }
.sharad-when .sep { opacity: .6; }
.hero-meta { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; justify-content: space-between; gap: 8px; align-items: center; pointer-events: none; }
.hero-place { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 12px; font-weight: 700; background: rgba(0,0,0,.4); padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(4px); }
.hero-credit { pointer-events: auto; font-size: 9.5px; color: rgba(255,255,255,.85); background: rgba(0,0,0,.35); padding: 2px 7px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.hero.slides .dots { position: absolute; right: 14px; bottom: 18px; display: flex; gap: 5px; pointer-events: none; }
.hero.slides .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.45); transition: width .3s, background .3s; }
.hero.slides .dots i.on { width: 18px; background: #F6C343; }

/* Festive header: sindoor with a gold-and-laal-paar edge; the line under the name rotates pujo lingo */
.topbar { background: linear-gradient(100deg, #7A0C1A 0%, #9F1239 55%, #8E0E1C 100%); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none;
  background: linear-gradient(#D4A017, #D4A017) 0 0 / 100% 2px no-repeat, repeating-linear-gradient(90deg, #FFF8EC 0 8px, #C8102E 8px 11px) 0 2px / 100% 4px no-repeat; }
.brand h1 { letter-spacing: .02em; }
#countdown { transition: opacity .26s ease, transform .26s ease; }
#countdown.out { opacity: 0; transform: translateY(-4px); }

/* How it works: three steps, right under the banner */
.how-wrap { margin: 14px 16px 0; padding: 14px 14px 12px; border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, #FBBF24 16%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, #F59E0B 30%, var(--line)); }
.how-lingo { margin: 0 0 10px; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--brand); }
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.how button { width: 100%; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); text-align: left; cursor: pointer; color: var(--ink); font: inherit; }
.how-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: #8E0E1C; }
.how-em { font-size: 20px; }
.how-tx { display: grid; gap: 1px; }
.how-tx b { font-size: 14.5px; }
.how-tx span { font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
.how-go { font-size: 22px; color: var(--ink-3); }

/* ---------- Pujo Radio: a now-playing stage, station tiles, fold-away songs ---------- */
.radio-card { --st-bg: linear-gradient(160deg,#DC2626,#9F1239 55%,#4C0519); margin: 18px 16px 0; border-radius: 22px; overflow: hidden; color: #FFF4E0;
  background: radial-gradient(120% 60% at 50% 0%, rgba(246,195,67,.18), transparent 60%), linear-gradient(180deg, #4A0A14 0%, #2A060C 100%);
  box-shadow: 0 14px 34px rgba(42,6,12,.35); border: 1px solid rgba(246,195,67,.35); }
.radio-head { padding: 16px 16px 0; text-align: center; }
.r-eyebrow { font-family: "Galada", serif; color: #F6C343; font-size: 20px; line-height: 1; }
.radio-head h2 { margin: 2px 0 0; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #FBD38D; font-weight: 700; }
.radio-head p { margin: 8px auto 0; max-width: 34ch; font-size: 12.5px; line-height: 1.4; color: rgba(255,244,224,.78); }
.np { display: grid; justify-items: center; gap: 10px; padding: 14px 16px 6px; }
.np-art { position: relative; width: 200px; height: 200px; border-radius: 18px; background: var(--st-bg); box-shadow: 0 0 0 3px #F6C343, 0 0 0 6px rgba(246,195,67,.25), 0 16px 30px rgba(0,0,0,.45); }
.np-art .halo { position: absolute; inset: -10px; border-radius: 26px; pointer-events: none; box-shadow: 0 0 28px rgba(246,195,67,.18); }
.radio-card.playing .np-art .halo { animation: glow 1.8s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 46px rgba(246,195,67,.45); } }
.np-idle { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; }
.np-idle .em { font-size: 64px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.np-idle .bn { font-family: "Galada", serif; font-size: 22px; color: #FFF4E0; }
#ytHost, .np-art iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 18px; }
.radio-card:not(.yt) #ytHost, .radio-card:not(.live) #ytHost { display: none; }
.np-art { cursor: pointer; }
.np-info { text-align: center; max-width: 100%; }
.np-station { font-size: 12px; letter-spacing: .06em; color: #FBD38D; }
.np-title { font-size: 17px; font-weight: 800; margin-top: 2px; line-height: 1.25; }
.np-artist { font-size: 12.5px; color: rgba(255,244,224,.75); margin-top: 2px; }
.np-artist .lbl { opacity: .8; }
.np-ctrl { display: flex; align-items: center; gap: 14px; padding: 4px 0 6px; }
.np-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(246,195,67,.5); background: rgba(255,255,255,.06); color: #FFF4E0; font-size: 14px; cursor: pointer; display: grid; place-items: center; text-decoration: none; }
.np-btn.play { width: 60px; height: 60px; font-size: 20px; color: #3B1A0E; border: 0; background: radial-gradient(circle at 35% 30%, #FFF7D6, #F6C343 55%, #B7791F); box-shadow: 0 6px 18px rgba(246,195,67,.35); }
.np-btn:active { transform: scale(.94); }
.st-tiles { display: flex; gap: 10px; overflow-x: auto; padding: 10px 16px 14px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.st-tiles::-webkit-scrollbar { display: none; }
.st-tile { position: relative; flex: 0 0 104px; height: 118px; scroll-snap-align: start; border-radius: 16px; border: 1px solid rgba(255,255,255,.15); background: var(--tile); color: #FFF4E0; cursor: pointer; display: grid; align-content: end; justify-items: start; gap: 1px; padding: 10px; text-align: left; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.st-tile .em { position: absolute; top: 8px; right: 8px; font-size: 30px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.st-tile .bn { font-family: "Galada", serif; font-size: 16px; line-height: 1.1; }
.st-tile .en { font-size: 11px; opacity: .85; }
.st-tile[aria-checked="true"] { outline: 2px solid #F6C343; outline-offset: 2px; }
.eqb { position: absolute; top: 10px; left: 10px; display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.eqb i { width: 3px; background: #F6C343; border-radius: 1px; animation: eqb .8s ease-in-out infinite; }
.eqb i:nth-child(2) { animation-delay: .2s; } .eqb i:nth-child(3) { animation-delay: .4s; }
@keyframes eqb { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.tracks-wrap { margin: 0 16px; border-top: 1px solid rgba(246,195,67,.25); }
.tracks-wrap > summary { cursor: pointer; list-style: none; padding: 10px 2px; font-size: 13px; font-weight: 700; color: #FBD38D; display: flex; justify-content: space-between; }
.tracks-wrap > summary::-webkit-details-marker { display: none; }
.tracks-wrap > summary::after { content: '▾'; }
.tracks-wrap[open] > summary::after { content: '▴'; }
.tracks { list-style: none; margin: 0; padding: 0 0 6px; }
.tracks button { width: 100%; display: grid; text-align: left; gap: 1px; border: 0; border-top: 1px solid rgba(255,255,255,.08); background: none; padding: 8px 2px; cursor: pointer; color: #FFF4E0; font: inherit; }
.tracks .tn { font-weight: 600; font-size: 14px; }
.tracks .ta { font-size: 12px; color: rgba(255,244,224,.65); }
.tracks button[aria-current="true"] .tn { color: #F6C343; }
.tracks button[aria-current="true"] .tn::before { content: "♪ "; }
.radio-foot-note { padding: 6px 16px 16px; }
.radio-credit { margin: 6px 0 0; font-size: 11.5px; color: rgba(255,244,224,.6); }
.radio-links { display: flex; gap: 12px; align-items: center; margin-top: 6px; font-size: 12.5px; color: rgba(255,244,224,.7); flex-wrap: wrap; }
.radio-links a { color: #F6C343; font-weight: 700; }
/* Tap pads */
.pads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 320px; }
.pad { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 10px; border-radius: 14px; border: 1px solid rgba(246,195,67,.5); background: rgba(255,255,255,.07); color: #FFF4E0; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; touch-action: manipulation; }
.pad span { font-size: 24px; }
.hit { animation: hit .22s ease-out; }
@keyframes hit { 40% { transform: scale(1.08) rotate(-3deg); } }
/* Sticky cluster: 🐚 / 🥁 / ▶ */
.radio-fab-wrap { position: fixed; left: 14px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px); z-index: 860; width: 56px; height: 56px; transition: opacity .2s, transform .2s; }
.radio-fab-wrap[hidden] { display: block; opacity: 0; transform: scale(.6); pointer-events: none; }
.radio-fab { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #7A0C1A, #4A0A14); box-shadow: 0 0 0 2px #F6C343, 0 8px 18px rgba(42,6,12,.4); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.radio-fab .fab-ic { font-size: 26px; line-height: 1; }
.fab-mini { position: absolute; right: -12px; top: -12px; z-index: 1; width: 30px; height: 30px; font-size: 15px; padding: 0; border-radius: 50%; border: 0; background: #FFF8EC; box-shadow: 0 0 0 2px #F6C343, 0 4px 10px rgba(42,6,12,.3); cursor: pointer; touch-action: manipulation; }
.fab-state { position: absolute; right: -10px; bottom: -6px; z-index: 1; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #F6C343; color: #3B1A0E; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: pointer; }
.radio-fab .fab-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(246,195,67,.6); opacity: 0; pointer-events: none; }
.radio-fab-wrap.on .fab-ring { animation: ring 1.6s ease-out infinite; }
.radio-fab-wrap.on .fab-ic { animation: thump .5s ease-in-out infinite alternate; }
@keyframes ring { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@keyframes thump { to { transform: scale(1.1) rotate(-6deg); } }

/* ---------- All of Kolkata in 6 days ---------- */
.dayplan { display: grid; gap: 8px; margin: 0 16px; }
.dp-day { display: grid; grid-template-columns: 34px 1fr 18px; gap: 10px; align-items: center; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; box-shadow: var(--shadow); }
.dp-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #8E0E1C, #C2410C); }
.dp-body { display: grid; gap: 2px; min-width: 0; }
.dp-body b { font-size: 15px; }
.dp-areas { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.dp-tip { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.dp-go { color: var(--ink-3); }
.wz-body + .wz-foot ~ .dayplan, #view-plan .dayplan { margin-bottom: 4px; }

.notice.traffic { display: grid; gap: 6px; margin: 0; }
.notice.traffic a { font-weight: 600; color: var(--brand); }
.health-sync { margin: 10px 16px 6px; } .hs-body { padding: 0 12px 12px; display: grid; gap: 8px; } .hs-row { display: flex; gap: 8px; } .hs-row input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); color: var(--ink); font-size: 16px; }
.count.est { color: var(--ink-2); font-weight: 600; }
.stat.est b { color: var(--brand); }
.est-note { margin: 6px 0 0; }

.photo-credits { margin: 8px 16px 0; } .photo-credits a { color: inherit; }
.regions.pick { margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.regions.pick .region[aria-pressed="true"] { border-color: var(--zc); box-shadow: inset 0 0 0 2px var(--zc); background: color-mix(in srgb, var(--zc) 10%, var(--surface)); }

/* Header: logo medallion + the day's greeting in Bengali + rotating lingo */
.brand-mark { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(246,195,67,.6), 0 2px 8px rgba(0,0,0,.3); }
.greet { font-family: "Galada", "Noto Serif Bengali", serif; font-size: 23px; line-height: 1.05; color: #F6C343; text-shadow: 0 1px 0 rgba(0,0,0,.25); white-space: nowrap; }
.hero.slides .sharad-greet { font-family: inherit; font-size: 26px; font-weight: 800; color: #FFF4E0; letter-spacing: -.01em; }
/* Never let the browser inflate text (it blew a long station name past the screen), and let long pills wrap. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.pill { max-width: 100%; }
.chips.wrap .pill { white-space: normal; }
#view-explore { overflow-x: clip; }

/* Puja-day chips on place pages */
.day-toggle { display: flex; gap: 6px; overflow-x: auto; margin: 14px -16px 0; padding: 2px 16px; scrollbar-width: none; }
.day-toggle::-webkit-scrollbar { display: none; }
.day-toggle button { flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.day-toggle button[aria-checked="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.day-toggle + .stat-row { margin-top: 10px; }

/* ---------- eatery ratings, cost for two, profile, iPhone sync ---------- */
.item .score.cost { color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.rating { font-size: 12.5px; font-weight: 700; color: #B45309; white-space: nowrap; }
.rating small { color: var(--ink-3); font-weight: 500; }
.count.est { font-size: 11.5px; white-space: nowrap; }
.rating-sum { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.rating-sum b { font-size: 30px; line-height: 1; }
.rating-sum span:last-child { font-size: 13px; color: var(--ink-3); }
.stars { --v: 0; font-size: 18px; letter-spacing: 2px; background: linear-gradient(90deg, #F59E0B calc(var(--v) / 5 * 100%), var(--line) 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rate-box { display: grid; gap: 10px; margin: 6px 0 4px; padding: 12px; border: 1px dashed var(--line); border-radius: 14px; }
.rate-stars { display: flex; gap: 4px; }
.rate-stars button { font-size: 32px; line-height: 1; background: none; border: 0; padding: 2px 4px; color: var(--line); cursor: pointer; }
.rate-stars button.on { color: #F59E0B; }
.rate-box .btn { justify-self: start; }
.profile-box { margin: 4px 16px 10px; }
.profile-box .form { padding: 4px 12px 0; }
.profile-box > .fine { padding: 0 12px 10px; margin: 6px 0 0; }
.ios-sync { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px; }
.ios-sync h4 { margin: 0; font-size: 14px; }
.ios-sync ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* ---------- live count strip (Home) ---------- */
.live-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 10px 16px 0; padding: 9px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--ok, #16A34A) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok, #16A34A) 30%, var(--line)); font-size: 13.5px; text-align: center; }
.live-strip b { font-variant-numeric: tabular-nums; }
.live-now { display: inline-flex; align-items: center; gap: 7px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 0 rgba(22,163,74,.6); animation: livePulse 1.8s infinite; }
.live-total { color: var(--ink-2); }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); } 70% { box-shadow: 0 0 0 9px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---------- food tiles: what/where on the left; cost, diet and crowd on the right ---------- */
.food-item { grid-template-columns: 1fr auto; align-items: start; }
.food-item .main { display: grid; gap: 4px; min-width: 0; }
.food-item .main .meta { color: var(--ink-3); }
.food-item .main .st { margin-top: 2px; }
.food-item .near { font-size: 12px; color: var(--ink-3); }
.food-item .side { grid-row: 1; grid-column: 2; display: grid; justify-items: end; align-content: start; gap: 6px; text-align: right; }
.food-item .side .count.est { font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin-top: -2px; }
.food-item .marks { display: inline-flex; gap: 6px; align-items: center; }
.food-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 4px; font-size: 14px; }
.st { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.st.open { color: var(--ok, #15803D); }
.st.open .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st.open small { font-weight: 500; color: var(--ink-3); }
.st.closed { color: var(--ink-3); font-weight: 600; }
.cost-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 9px; border-radius: 8px; font-size: 12px; white-space: nowrap;
  color: #7C4A03; background: #FEF3C7; border: 1px solid #F5D78E; }
.cost-chip b { font-size: 13.5px; }
/* India's vegetarian symbol: a green dot in a green square */
.veg-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 2px solid #15803D; border-radius: 3px; flex: none; }
.veg-mark::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #15803D; }
.egg-mark { font-size: 15px; line-height: 1; }
.diet-l { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cost-chip { color: #FDE68A; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); } }
:root[data-theme="dark"] .cost-chip { color: #FDE68A; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); }
.veg-mark.sm { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; } .veg-mark.sm::after { width: 5px; height: 5px; }

/* ---------- Explore: the Pandals / Food / Parking switcher ---------- */
.ex-title { margin: 2px 16px 8px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.seg.big { gap: 6px; padding: 5px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.seg.big button { flex-direction: column; gap: 1px; padding: 8px 4px 7px; border-radius: 12px; font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.seg.big .seg-em { font-size: 20px; line-height: 1.1; }
.seg.big .seg-n { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.seg.big button[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 35%, transparent); }
.seg.big button[aria-selected="true"] .seg-n { color: var(--brand-ink); opacity: .8; }

/* ---------- Moments: this year + the archive ---------- */
.this-year .section-head, .archive .section-head { margin-top: 14px; }
.first-moment { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; margin: 0 16px; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface); }
.first-moment > .ic { width: 28px; height: 28px; color: var(--brand); }
.first-moment b { display: block; font-size: 14.5px; }
.first-moment span { font-size: 12.5px; color: var(--ink-3); }
.first-moment .btn { grid-column: 1 / -1; justify-self: start; }
.ar-years { margin: 8px 0 10px; }
.thumb.ar .ar-year { position: absolute; right: 5px; top: 5px; background: rgba(0,0,0,.55); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 1px 5px; }
.thumb.ar .ar-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.2; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,.7)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.archive .credit { margin-top: 10px; }

/* ---------- My Pujo: festive header card, coloured stat tiles, sections as cards ---------- */
.me-hero { margin: 12px 16px 14px; padding: 18px 16px 16px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 90% at 85% 0%, rgba(251,191,36,.35), transparent 55%), linear-gradient(160deg, #9F1239, #7F1D1D 55%, #5B1A0A);
  box-shadow: 0 10px 28px rgba(127,29,29,.28); }
.me-hi h2 { margin: 0; font-size: 22px; font-weight: 800; }
.me-hi p { margin: 4px 0 0; font-size: 13px; opacity: .85; }
.me-hero .ring-wrap { width: min(46vw, 180px); margin: 14px auto 2px; }
.me-hero .ring-bg { stroke: rgba(255,255,255,.18); }
.me-hero .ring-fg { stroke: #FBBF24; }
.me-hero .ring-steps { color: #fff; }
.me-hero .ring-goal { color: rgba(255,255,255,.8); }
.fit-src { text-align: center; font-size: 12px; color: rgba(255,255,255,.8); margin: 0 0 6px; min-height: 1em; }
.me-hero .stats4 { margin: 8px 0 14px; }
.me-hero .stats4 div { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 9px 4px 8px; }
.me-hero .stats4 i { display: block; font-style: normal; font-size: 16px; line-height: 1.2; }
.me-hero .stats4 b { color: #fff; }
.me-hero .stats4 span { color: rgba(255,255,255,.78); }
.btn.gold { background: #FBBF24; color: #3B0A0A; border: 0; font-weight: 800; }
.me-hero .btn.live { border: 0; }
.walk-status { text-align: center; font-size: 12.5px; color: rgba(255,255,255,.85); margin: 8px 0 0; }
.walk-status a { color: #FDE68A; }
#view-me details.more, #view-me details.settings { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); margin: 0 16px 12px; }
#view-me details > summary { padding: 13px 14px; font-weight: 700; }
#view-me .profile-box summary { color: var(--brand); }
.phone-in { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.phone-in .cc { display: grid; place-items: center; padding: 0 10px; background: var(--surface-2); color: var(--ink-2); font-weight: 700; font-size: 14px; border-right: 1px solid var(--line); }
.phone-in input { border: 0 !important; border-radius: 0 !important; flex: 1; min-width: 0; letter-spacing: .04em; }
.phone-in:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.hint { display: block; min-height: 1.2em; font-size: 12px; font-weight: 500; color: var(--ink-3); margin-top: 3px; }
.hint.bad { color: var(--bad, #DC2626); }
.hint.ok { color: var(--ok, #15803D); }

/* =====================================================================
   Pujo look: Baloo Da 2 (Bengali + Latin, warm and rounded), Baloo 2 for Hindi, Galada for flourishes.
   ===================================================================== */
:root { --font: "Baloo Da 2", "Baloo 2", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", sans-serif; --top-h: 64px; }
html[lang="hi"] { --font: "Baloo 2", "Baloo Da 2", system-ui, sans-serif; }
body { font-size: 15.5px; line-height: 1.4; }
h2, h3, .title, .view-title h2 { letter-spacing: -.005em; }
.section-head h2 { font-size: 21px; font-weight: 800; line-height: 1.15; position: relative; padding-bottom: 6px; }
.section-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #C8102E 0 33%, #F59E0B 33% 66%, #FBBF24 66%); }
.section-head .sub { font-size: 13.5px; }

/* ---------- header: alpana motif, garland, live pill, ticker ---------- */
.topbar { background:
    radial-gradient(circle at 92% -40%, rgba(251,191,36,.28), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23F6C343' stroke-opacity='.13' stroke-width='1.4'%3E%3Ccircle cx='32' cy='32' r='10'/%3E%3Ccircle cx='32' cy='32' r='3'/%3E%3Cpath d='M32 6c5 8 5 14 0 16-5-2-5-8 0-16zM32 58c5-8 5-14 0-16-5 2-5 8 0 16zM6 32c8-5 14-5 16 0-2 5-8 5-16 0zM58 32c-8-5-14-5-16 0 2 5 8 5 16 0z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 64px 64px,
    linear-gradient(100deg, #6E0A17 0%, #9F1239 55%, #7F1D1D 100%); }
/* a marigold garland (genda phool) instead of the plain border */
.topbar::after { bottom: -9px; height: 11px; background:
  radial-gradient(circle at 6px 5px, #F59E0B 0 4.6px, transparent 5px) 0 0 / 12px 11px repeat-x,
  radial-gradient(circle at 6px 5px, #FBBF24 0 2.2px, transparent 2.6px) 0 0 / 12px 11px repeat-x,
  radial-gradient(circle at 6px 5px, #EA580C 0 4.6px, transparent 5px) 6px 1px / 24px 11px repeat-x;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
main { padding-top: calc(var(--top-h) + var(--safe-t) + 8px); }
.brand-mark { width: 44px; height: 44px; }
.greet { font-size: 25px; }
.ticker { font-size: 13px; font-weight: 600; color: #FFE7B3; opacity: 1; }
.live-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 9px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.22); color: #fff; font: inherit; font-size: 12.5px; cursor: pointer; }
.live-pill b { font-size: 14px; font-variant-numeric: tabular-nums; }
.live-pill span:last-child { opacity: .85; }
.lang-pick select { min-width: 0; padding: 5px 8px; font-weight: 700; }


/* ---------- photo tiles: real pujo photos behind the Home shortcuts, areas and trails ---------- */
.task.photo, .regions .region.photo, .trail.photo { position: relative; overflow: hidden; isolation: isolate; color: #fff; border: 0; background: #3B0A0A; }
.tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.task.photo::after, .regions .region.photo::after, .trail.photo::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 15%, rgba(40,6,10,.82) 100%); }
.task.photo:active .tile-img, .region.photo:active .tile-img { transform: scale(1.06); }
.task.photo { min-height: 132px; align-content: end; padding: 12px; }
.task.photo .task-t { font-size: 17px; font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.task.photo .task-s { color: rgba(255,255,255,.88); font-size: 12.5px; }
.regions .region.photo { min-height: 128px; align-content: end; padding: 12px 14px; }
.regions .region.photo::before { z-index: 1; width: 5px; }
.regions .region.photo .region-n { font-size: 19px; font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.regions .region.photo .region-c { color: #FDE68A; }
.regions .region.photo .region-a { color: rgba(255,255,255,.85); }
.trail.photo { min-height: 132px; align-content: end; padding: 14px; border-radius: 18px; }
.trail.photo h3 { font-size: 18px; font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.trail.photo .row { color: rgba(255,255,255,.88); }
/* the banner breathes: a slow Ken Burns zoom on the photo that's showing */
@media (prefers-reduced-motion: no-preference) {
  .hero.slides .slide.on img { animation: kenburns 9s ease-out both; }
  @keyframes kenburns { from { transform: scale(1.0) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -2%); } }
}
.hero.slides .sharad-greet { font-family: "Galada", "Baloo Da 2", serif; font-size: 40px; font-weight: 400; color: #FBBF24; text-shadow: 0 2px 14px rgba(0,0,0,.6); }

/* My Pujo contact form: one field per row, same height, hints underneath */
.form.contact { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 4px 14px 0; }
.form.contact .field { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.form.contact .field > input, .form.contact .phone-in { height: 46px; box-sizing: border-box; }
.form.contact .field > input { width: 100%; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 16px; font-weight: 500; }
.form.contact .phone-in input { height: 100%; padding: 0 12px; font-size: 16px; font-weight: 500; background: transparent; }
.form.contact .hint { margin-top: 0; }
.share-note { margin: -4px 0 0; }
.share-note .link-btn { font-size: 12.5px; }
/* header fit on phones: the pill stacks "1,241 / online"; the language picker is a compact chip */
.live-pill { height: 38px; padding: 0 10px 0 8px; gap: 6px; }
.live-pill .lp-tx { display: grid; line-height: 1; text-align: left; }
.live-pill .lp-tx b { font-size: 14.5px; }
.live-pill .lp-tx span { font-size: 10.5px; opacity: .85; margin-top: 2px; }
.lang-pick select { appearance: none; -webkit-appearance: none; background-image: none; padding: 6px 10px; border-radius: 999px; text-align: center; }
.brand { gap: 8px; }
.brand-text { min-width: 0; }
.ticker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 400px) { .greet { font-size: 22px; } .brand-mark { width: 40px; height: 40px; } .ticker { font-size: 12.5px; } }
@media (max-width: 360px) { .live-pill .lp-tx span { display: block; } }

/* ---------- Explore: photo switcher, food thumbnails, parking rows ---------- */
.seg.photo-seg { gap: 8px; padding: 0; background: none; border: 0; margin: 0 16px 10px; }
.seg.photo-seg button { position: relative; isolation: isolate; overflow: hidden; flex: 1; display: grid; align-content: end; justify-items: start; gap: 0;
  min-height: 86px; padding: 8px 10px; border-radius: 16px; text-align: left; color: #fff; background: linear-gradient(160deg, #9F1239, #5B1A0A);
  border: 2px solid transparent; box-shadow: var(--shadow); font-weight: 800; }
.seg.photo-seg .seg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(1.05); transition: transform .4s ease; }
.seg.photo-seg button::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(30,4,8,.85)); transition: background .2s; }
.seg.photo-seg button[aria-selected="false"]::after { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(20,4,6,.9)); }
.seg.photo-seg button[aria-selected="false"] .seg-img { filter: grayscale(.45) brightness(.85); }
.seg.photo-seg button[aria-selected="true"] { border-color: #FBBF24; box-shadow: 0 6px 18px rgba(159,18,57,.35); background: linear-gradient(160deg, #9F1239, #5B1A0A); color: #fff; }
.seg.photo-seg button[aria-selected="true"] .seg-img { transform: scale(1.06); }
.seg.photo-seg .seg-em { position: absolute; top: 7px; right: 8px; font-size: 16px; }
.seg.photo-seg .seg-l { font-size: 16px; line-height: 1.1; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.seg.photo-seg .seg-n { font-size: 11.5px; font-weight: 700; color: #FDE68A; }
.seg.photo-seg button[aria-selected="true"] .seg-n { color: #FDE68A; opacity: 1; }

.food-item.has-thumb { grid-template-columns: 64px 1fr auto; }
.food-item.has-thumb .main { grid-column: 2; }
.food-item.has-thumb .side { grid-column: 3; }
.fi-thumb { grid-row: 1; grid-column: 1; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--surface-2); position: relative; }
.fi-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.park-item { grid-template-columns: auto 1fr auto; align-items: start; gap: 4px 12px; }
.park-item .main { display: grid; gap: 3px; min-width: 0; }
.park-item .fine { font-size: 12.5px; color: var(--ink-3); }
.pk-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #fff; background: #1D4ED8; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.park-item .side { grid-row: 1; }
.park-cost { display: grid; justify-items: center; padding: 6px 10px; border-radius: 12px; background: #DBEAFE; color: #1E3A8A; border: 1px solid #93C5FD; text-align: center; }
.park-cost b { font-size: 16px; line-height: 1.1; white-space: nowrap; }
.park-cost small { font-size: 10.5px; font-weight: 600; opacity: .8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .park-cost { background: rgba(59,130,246,.16); color: #BFDBFE; border-color: rgba(147,197,253,.35); } }
:root[data-theme="dark"] .park-cost { background: rgba(59,130,246,.16); color: #BFDBFE; border-color: rgba(147,197,253,.35); }
.park-facts { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; } .park-cost.big b { font-size: 20px; } .park-cost.big { padding: 8px 14px; }

/* ---------- Plan route: photo tiles for areas, the 6-day plan and trails ---------- */
.dp-day.photo { position: relative; isolation: isolate; overflow: hidden; min-height: 96px; border: 0; color: #fff; background: #3B0A0A; }
.dp-day.photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(30,4,8,.88) 0%, rgba(30,4,8,.6) 60%, rgba(30,4,8,.25)); }
.dp-day.photo .dp-areas { color: #FDE68A; }
.dp-day.photo .dp-tip, .dp-day.photo .dp-go { color: rgba(255,255,255,.85); }
.dp-day.photo b { font-size: 16px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.dp-day.photo .dp-n { box-shadow: 0 0 0 2px rgba(251,191,36,.8); }
.regions.pick .region.photo[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #FBBF24, 0 6px 18px rgba(159,18,57,.35); background: #3B0A0A; }
.regions.pick .region.photo[aria-pressed="true"]::after { background: linear-gradient(180deg, rgba(159,18,57,.25), rgba(40,6,10,.88)); }
.regions.pick .region.photo[aria-pressed="false"] .tile-img { filter: saturate(.8); }
.trail.photo p { color: rgba(255,255,255,.9); }
.trail.photo .pill { background: rgba(0,0,0,.45); color: #fff; }
.park-item .main { grid-column: 2; grid-row: 1; } .park-item .side { grid-column: 3; grid-row: 1; } .park-item .pk-ic { grid-column: 1; grid-row: 1; }

/* ---------- celebrations: petals + "জয় মা!", badge medallion ---------- */
.petal-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2000; pointer-events: none; }
.cheer { position: fixed; inset: 0; z-index: 1999; display: grid; place-items: center; pointer-events: auto; background: radial-gradient(circle at 50% 42%, rgba(91,26,10,.35), transparent 60%); animation: cheerIn .35s ease both; }
.cheer.out { animation: cheerOut .4s ease both; }
.cheer-card { text-align: center; padding: 18px 26px; border-radius: 22px; color: #fff; max-width: 82vw;
  background: linear-gradient(160deg, #9F1239, #7F1D1D 60%, #5B1A0A); box-shadow: 0 18px 50px rgba(91,26,10,.45), inset 0 0 0 2px rgba(251,191,36,.6); animation: pop .5s cubic-bezier(.2,1.6,.4,1) both; }
.cheer-bn { font-family: "Galada", serif; font-size: 44px; line-height: 1.05; color: #FBBF24; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.cheer-card b { display: block; margin-top: 4px; font-size: 16px; }
@keyframes pop { from { transform: scale(.4) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cheerIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cheerOut { to { opacity: 0; transform: scale(.96); } }
.badge-pop { text-align: center; padding: 6px 4px 8px; }
.badge-pop h2 { margin: 4px 0 6px; font-size: 26px; font-weight: 800; }
.badge-eyebrow { margin: 10px 0 0; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #B45309; }
.medal { position: relative; width: 132px; height: 132px; margin: 6px auto 0; border-radius: 50%; display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(circle at 35% 30%, #FDE68A, #F59E0B 55%, #B45309); box-shadow: 0 10px 30px rgba(180,83,9,.45), inset 0 0 0 6px rgba(255,255,255,.35); animation: medalIn .7s cubic-bezier(.2,1.5,.4,1) both; }
.medal span { font-size: 64px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.medal .rays { position: absolute; inset: -38px; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(251,191,36,.45) 0 8deg, transparent 8deg 22deg); animation: spin 9s linear infinite; mask: radial-gradient(circle, #000 40%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 40%, transparent 70%); }
.badge-pop.locked .medal { background: radial-gradient(circle at 35% 30%, #E7E5E4, #A8A29E 60%, #78716C); animation: none; }
.badge-pop.locked .medal span { filter: grayscale(1); opacity: .55; }
@keyframes medalIn { from { transform: scale(.2) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .medal, .medal .rays, .cheer-card { animation: none; } }
.badges li { list-style: none; }
button.badge-tile { width: 100%; height: 100%; font: inherit; cursor: pointer; }
button.badge-tile.got { border-color: #F59E0B; background: linear-gradient(180deg, #FFFBEB, var(--surface)); box-shadow: 0 4px 12px rgba(245,158,11,.18); }
button.badge-tile.got small { color: #B45309; font-weight: 700; }

/* ---------- header v3: real photos, no drawn ornaments ---------- */
/* behind: a real night photo of pandal lights, deepened to maroon so the text reads */
.topbar { background: linear-gradient(100deg, rgba(74,6,18,.92) 0%, rgba(110,10,30,.78) 55%, rgba(74,6,18,.88) 100%), url("img/tiles/pandals.jpg") center 40% / cover, #6E0A17; }
.topbar::after { content: none; }
.topbar { box-shadow: 0 2px 0 #D4A017, 0 6px 16px rgba(0,0,0,.25); }
main { padding-top: calc(var(--top-h) + var(--safe-t) + 4px); }
/* the dhaki: a real photo that plays/pauses the dhak; gold ring spins while it plays */
.dhak-btn { position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #3B0A0A; cursor: pointer; }
.dhak-btn img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 48% 58%; display: block; box-shadow: 0 0 0 2px rgba(246,195,67,.85); }
.dhak-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px dashed rgba(251,191,36,.0); pointer-events: none; }
.dhak-btn.on .dhak-ring { border-color: rgba(251,191,36,.95); animation: spin 6s linear infinite; }
.dhak-state { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9px; font-weight: 900; color: #3B0A0A; background: #FBBF24; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.dhak-btn.on img { animation: dhakBeat .43s ease-in-out infinite alternate; }
@keyframes dhakBeat { to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .dhak-btn.on img, .dhak-btn.on .dhak-ring { animation: none; } }

/* ---------- "I parked here" card (Home + Explore → Parking) ---------- */
.car-card { position: relative; isolation: isolate; overflow: hidden; margin: 14px 16px; padding: 14px; border-radius: 18px; color: #fff;
  display: grid; gap: 10px; background: linear-gradient(135deg, #1E3A8A, #1D4ED8); box-shadow: 0 8px 22px rgba(29,78,216,.28); }
.car-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.car-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(15,23,62,.92) 0%, rgba(30,58,138,.75) 60%, rgba(30,58,138,.35)); }
.car-tx { display: grid; gap: 2px; }
.car-tx b { font-size: 18px; font-weight: 800; }
.car-tx span { font-size: 13px; opacity: .9; }
.btn.car-save { justify-self: start; background: #FBBF24; color: #1E1B4B; border: 0; font-weight: 800; font-size: 15.5px; padding: 11px 18px; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.car-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.car-btns .btn.ghost { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }

/* ---------- keep Ma Durga's face in frame on every screen ----------
   Cropped photos keep the upper part of the frame (where the protima's face is), and the banner's slow zoom
   now zooms toward the face instead of the centre. Saved photos get their own measured focus points. */
.tile-img, .seg-img, .car-img, .thumb img, .gal img, .fi-img { object-position: 50% 20%; }
img[src$="hero-1.jpg"] { object-position: 50% 12% !important; }
img[src$="hero-2.jpg"] { object-position: 50% 26% !important; }
img[src$="hero-3.jpg"] { object-position: 50% 30% !important; }
img[src$="hero-4.jpg"] { object-position: 50% 18% !important; }
img[src$="hero-5.jpg"] { object-position: 50% 24% !important; }
img[src$="tiles/east.jpg"] { object-position: 50% 28% !important; }
img[src$="tiles/howrah.jpg"] { object-position: 50% 12% !important; }
.hero.slides .slide img { transform-origin: 50% 18%; }
@media (prefers-reduced-motion: no-preference) {
  .hero.slides .slide.on img { animation: kenburns2 9s ease-out both; }
  @keyframes kenburns2 { from { transform: scale(1.0); } to { transform: scale(1.09); } }
}
/* very wide tiles crop a lot of height: give them more of it */
@media (min-width: 700px) { .task.photo { min-height: 170px; } .regions .region.photo { min-height: 170px; } .seg.photo-seg button { min-height: 110px; } }
.badge-modal { position: fixed; inset: 0; z-index: 1998; display: grid; place-items: center; padding: 20px; background: rgba(20,4,6,.55); animation: cheerIn .25s ease both; }
.card-pop { background: var(--surface); color: var(--ink); border-radius: 24px; padding: 22px 20px 18px; max-width: 360px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.4); animation: pop .5s cubic-bezier(.2,1.6,.4,1) both; }

/* ---------- Home: Pujo Radio strip under the banner ---------- */
.music-strip { margin: 12px 16px 0; padding: 12px 12px 10px; border-radius: 18px; color: #fff; display: grid; grid-template-columns: auto 1fr auto; gap: 10px 12px; align-items: center;
  background: radial-gradient(120% 120% at 0% 0%, rgba(251,191,36,.25), transparent 50%), linear-gradient(135deg, #7F1D1D, #4C0519); box-shadow: 0 8px 22px rgba(76,5,25,.3); }
.ms-play { width: 52px; height: 52px; border-radius: 50%; border: 0; background: #FBBF24; color: #3B0A0A; font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: 0 0 0 4px rgba(251,191,36,.25); }
.music-strip.on .ms-play { animation: dhakBeat .43s ease-in-out infinite alternate; }
.ms-tx { display: grid; gap: 1px; min-width: 0; }
.ms-tx b { font-size: 15.5px; }
.ms-tx b span { font-family: "Galada", serif; font-weight: 400; color: #FBBF24; font-size: 17px; }
.ms-tx > span { font-size: 12.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-strip .eqb { position: static; }
.ms-chips { grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ms-chips::-webkit-scrollbar { display: none; }
.ms-chip { flex: none; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 5px 11px; color: #fff; background: rgba(255,255,255,.08); font: inherit; font-size: 13px; cursor: pointer; }
.ms-chip span { font-family: "Galada", serif; font-size: 15px; }
.ms-chip.on { background: var(--tile); border-color: #FBBF24; }
.credits-box { margin: 0 16px 16px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.credits-box summary { padding: 12px 0; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.credits { list-style: none; margin: 0; padding: 0 0 6px; display: grid; gap: 6px; font-size: 12px; color: var(--ink-3); }
.credits a { color: var(--ink-2); }
/* Metro & rail: compact station chips like the rest of the app; the traffic-rules note is a quiet footnote */
.metro-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 16px; }
.metro-chips .mc { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.metro-chips .mc span { font-size: 10px; }
.tiny-note { margin: 14px 16px 0; font-size: 11px; line-height: 1.4; color: var(--ink-3); opacity: .85; }
.tiny-note a { color: inherit; }

/* ---------- Plan route result: hero overview, travel modes, directions ---------- */
.plan-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0 16px 12px; padding: 18px 16px 14px; border-radius: 22px; color: #fff;
  background: linear-gradient(160deg, #9F1239, #7F1D1D 55%, #5B1A0A); box-shadow: 0 10px 28px rgba(127,29,29,.3); }
.plan-hero .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; z-index: -2; }
.plan-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(60,6,14,.55), rgba(40,6,10,.92) 70%); }
.ph-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #FDE68A; }
.plan-hero h3 { margin: 4px 0 2px; font-size: 22px; font-weight: 800; line-height: 1.15; }
.ph-sub { font-size: 13px; opacity: .88; }
.kpis.big { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 12px; }
.kpis.big div { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 8px 4px; text-align: center; }
.kpis.big b { display: block; font-size: 20px; color: #fff; }
.kpis.big span { font-size: 11px; color: rgba(255,255,255,.8); }
.ph-actions { display: flex; gap: 8px; }
.ph-actions .btn.sm { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 12.5px; padding: 6px 10px; }
.mode-row { margin: 4px 16px 12px; display: grid; gap: 6px; }
.mode-q { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mode-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mode-chips::-webkit-scrollbar { display: none; }
.mode-chips button { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mode-chips button[aria-checked="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.field-l { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.timeline .fb { color: var(--ink-3); font-style: italic; }
.route-dirs { margin-top: 18px; }
.dir-legs { display: grid; gap: 8px; margin: 8px 16px 0; }
.dir-leg { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; text-decoration: none;
  color: #fff; background: linear-gradient(135deg, #1E3A8A, #1D4ED8); box-shadow: 0 6px 16px rgba(29,78,216,.25); }
.dir-leg b { font-size: 14px; white-space: nowrap; }
.dir-leg span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-leg .dl-go { font-weight: 800; color: #FDE68A; }

/* My Pujo on another phone: the Pujo code card */
.sync-box { margin: 4px 16px 10px; }
.sync-body { padding: 0 12px 12px; display: grid; gap: 8px; }
.sync-body .fine { margin: 0; }
.pujo-code { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border: 1.5px dashed var(--brand); border-radius: 12px; background: var(--surface); }
.pujo-code small { color: var(--ink-3, #8a7f77); font-size: 12px; }
.pujo-code b { font: 700 22px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; color: var(--brand); user-select: all; }
.sync-body .btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
#syCode { text-transform: uppercase; letter-spacing: 0.04em; }

/* Eatery offers and menu */
.offer-chip { display: inline-flex; align-items: center; gap: 3px; margin: 3px 0 2px; padding: 2px 8px; border-radius: 999px; background: #FEF3C7; color: #92400E; font-size: 12px; font-weight: 700; }
.offers { display: grid; gap: 8px; margin: 10px 0 4px; }
.offer-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed #D97706; background: linear-gradient(135deg, #FFFBEB, #FEF3C7); color: #422006; }
.offer-card .oc-tag { font-size: 22px; line-height: 1; }
.offer-card b { display: block; font-size: 15px; }
.offer-card p { margin: 2px 0; font-size: 13px; }
.offer-card small { color: #92400E; font-size: 12px; }
.sh.sh-row { display: flex; justify-content: space-between; align-items: center; }
.owner-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.owner-cta .btn { flex: none; }

/* Place pages: name with a compact "I'm here" / "I ate here"; Directions + Share pinned at the bottom */
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.title-row .tr-name { min-width: 0; flex: 1; }
.title-row .title { margin: 2px 0 0; }
.btn.visit-cta { flex: none; margin-top: 4px; min-height: 38px; padding: 6px 12px; font-size: 13.5px; border-radius: 999px; white-space: nowrap; }
.btn.visit-cta:disabled { opacity: 1; }
.sheet-cta { position: sticky; bottom: calc(-22px - var(--safe-b)); z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 10px;
  margin: 18px -16px calc(-22px - var(--safe-b)); padding: 10px 16px calc(12px + var(--safe-b)); background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -8px 18px rgba(0,0,0,.06); }
.sheet-cta .btn { min-height: 48px; }
.sheet-cta .btn.wa { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; }
.wa-ico { width: 20px; height: 20px; flex: none; }

/* My Pujo: Google sign-in */
.account-box { margin: 4px 16px 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; }
.account-box .ab-txt { display: grid; gap: 2px; }
.account-box .ab-txt b { font-size: 15.5px; }
.account-box .ab-txt small { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.account-box.signed { grid-template-columns: auto 1fr auto; align-items: center; }
.account-box .ab-ic .g-logo { width: 26px; height: 26px; display: block; }
.btn.g-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600; }
.btn.g-btn .g-logo { width: 20px; height: 20px; flex: none; }