/* SipBoo: a dark, thumb-friendly mobile web app. */
:root {
  --bg: #0a0c13; --bg2: #0f121c; --card: #141828; --card2: #1a2033; --line: #252b45; --line2: #323a5c;
  --text: #f4f6ff; --mut: #8f98bd; --dim: #626b91;
  --amber: #ffb547; --coral: #ff6b6b; --mint: #4fe3c1; --violet: #8c7bff; --blue: #5aa9ff; --red: #ff5d6c;
  --cta: linear-gradient(135deg, #ffb547 0%, #ff7a59 100%);
  --r: 16px; --r2: 12px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --tabh: 62px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
input, textarea, select { font-size: 16px; }
h1, h2, h3, p { margin: 0; }
a { color: var(--amber); }
.hide { display: none !important; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; background: var(--bg); }
@media (min-width: 600px) { #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
#top { flex: none; padding: calc(10px + var(--safe-t)) 16px 8px; display: flex; align-items: center; gap: 10px; background: linear-gradient(var(--bg) 70%, transparent); position: relative; z-index: 5; }
#view { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 16px calc(var(--tabh) + var(--safe-b) + 24px); scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
#view.pad-cart { padding-bottom: calc(var(--tabh) + var(--safe-b) + 92px); }
#tabs { flex: none; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--tabh) + var(--safe-b)); padding-bottom: var(--safe-b); display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(15, 18, 28, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); z-index: 20; }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--dim); font-size: 11px; font-weight: 600; position: relative; transition: color 0.15s; }
.tab svg { width: 24px; height: 24px; transition: transform 0.18s cubic-bezier(.3,1.6,.5,1); } .tab.on { color: var(--amber); } .tab.on svg { transform: translateY(-2px) scale(1.08); }
.tab .dot { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--coral); color: #fff; font-size: 10px; display: grid; place-items: center; font-weight: 700; }
.tab .pulse { position: absolute; top: 10px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--mint); } .tab .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mint); animation: ping 1.6s ease-out infinite; }
@keyframes ping { to { transform: scale(3); opacity: 0; } }

/* logo + top bar */
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; } .logo svg { width: 30px; height: 30px; } .logo b { color: var(--amber); font-weight: 800; }
.grow { flex: 1; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill svg { width: 14px; height: 14px; flex: none; } .pill.ok { color: var(--mint); } .pill.warn { color: var(--amber); } .pill.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: blink 1.6s infinite; flex: none; }
@keyframes blink { 50% { opacity: 0.3; } }
.iconbtn { width: 38px; height: 38px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text); flex: none; } .iconbtn svg { width: 20px; height: 20px; } .iconbtn:active { transform: scale(0.94); }

/* generic bits */
.h { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 14px 0 4px; } .h2 { font-size: 13px; font-weight: 700; color: var(--mut); letter-spacing: 0.08em; text-transform: uppercase; margin: 22px 0 10px; display: flex; align-items: center; justify-content: space-between; }
.mut { color: var(--mut); } .dim { color: var(--dim); } .sm { font-size: 13px; } .xs { font-size: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.row { display: flex; align-items: center; gap: 10px; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 14px; font-weight: 700; background: var(--card2); border: 1px solid var(--line2); transition: transform 0.1s, filter 0.15s; } .btn:active { transform: scale(0.97); } .btn svg { width: 18px; height: 18px; }
.btn.cta { background: var(--cta); color: #2a1300; border: 0; box-shadow: 0 6px 22px rgba(255, 140, 70, 0.28); } .btn.cta:disabled { filter: grayscale(0.8) brightness(0.7); box-shadow: none; }
.btn.ghost { background: transparent; } .btn.danger { color: var(--red); border-color: rgba(255, 93, 108, 0.4); } .btn.block { width: 100%; } .btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 11px; } .btn.mint { background: rgba(79, 227, 193, 0.14); color: var(--mint); border-color: rgba(79, 227, 193, 0.35); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 6px; margin: 0 -16px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--mut); font-weight: 600; font-size: 13.5px; transition: all 0.15s; white-space: nowrap; } .chip.on { background: var(--amber); color: #2a1700; border-color: var(--amber); }
.tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 7px; font-size: 11px; font-weight: 700; background: var(--card2); color: var(--mut); } .tag.v { color: var(--mint); background: rgba(79,227,193,.12); } .tag.s { color: var(--coral); background: rgba(255,107,107,.12); } .tag.p { color: var(--amber); background: rgba(255,181,71,.12); } .tag.a { color: var(--violet); background: rgba(140,123,255,.14); } .tag.n { color: var(--blue); background: rgba(90,169,255,.14); }
.search { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); } .search svg { width: 18px; height: 18px; color: var(--dim); flex: none; } .search input { flex: 1; background: none; border: 0; outline: 0; min-width: 0; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); gap: 4px; } .seg button { height: 38px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: var(--mut); position: relative; } .seg button.on { background: var(--card2); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset; }
.seg svg, .chip svg { width: 20px; height: 20px; display: block; margin: 0 auto; } .btn svg, .pill svg { flex: none; }
.empty { text-align: center; padding: 34px 16px; color: var(--mut); } .empty .big { font-size: 46px; margin-bottom: 6px; }
.skel { background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%); background-size: 200% 100%; animation: sh 1.2s infinite; border-radius: var(--r); } @keyframes sh { to { background-position: -200% 0; } }

/* venue cards */
.venue { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); margin-bottom: 10px; text-align: left; width: 100%; transition: transform 0.12s, border-color 0.15s; animation: rise 0.28s both; } .venue:active { transform: scale(0.985); border-color: var(--line2); }
.vico { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 25px; flex: none; background: var(--card2); }
.venue .nm { font-weight: 700; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .venue .sub { color: var(--mut); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue .far { text-align: right; flex: none; font-size: 13px; font-weight: 700; } .venue .far small { display: block; font-weight: 600; margin-top: 2px; }
.o-open { color: var(--mint); } .o-closed { color: var(--coral); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.heart { color: var(--dim); } .heart.on { color: var(--coral); }
.here { background: linear-gradient(135deg, rgba(79,227,193,.16), rgba(90,169,255,.12)); border-color: rgba(79,227,193,.4); }
.hero { border-radius: 22px; padding: 18px; background: radial-gradient(120% 140% at 0% 0%, #2b2147 0%, #141828 55%); border: 1px solid var(--line); position: relative; overflow: hidden; } .hero::after { content: "👻"; position: absolute; right: -6px; bottom: -14px; font-size: 90px; opacity: 0.12; transform: rotate(-12deg); }

/* radar */
.radar { width: 100%; aspect-ratio: 1; max-height: 56vh; display: block; margin: 0 auto; } .radar .ring { fill: none; stroke: var(--line); stroke-width: 1; } .radar .sweep { transform-origin: 150px 150px; animation: spin 5s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.radar .dot { cursor: pointer; transition: r 0.15s; }

/* menu */
.mhead { padding: 4px 0 8px; } .mhead .vn { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.stick { position: sticky; top: -4px; z-index: 6; background: var(--bg); padding: 8px 16px 8px; margin: 0 -16px; border-bottom: 1px solid transparent; } .stick.scrolled { border-color: var(--line); }
.cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 0; } .cats::-webkit-scrollbar { display: none; } .cat { flex: none; padding: 7px 12px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: var(--mut); } .cat.on { background: var(--card2); color: var(--amber); }
.sec-t { font-size: 17px; font-weight: 800; margin: 18px 0 8px; letter-spacing: -0.01em; scroll-margin-top: 120px; }
.item { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); text-align: left; width: 100%; } .item .tx { flex: 1; min-width: 0; } .item .nm { font-weight: 700; font-size: 15.5px; } .item .ds { color: var(--mut); font-size: 13.5px; margin: 2px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .item .pr { font-weight: 700; } .item .pr s { color: var(--dim); font-weight: 500; margin-right: 6px; } .item .pr em { color: var(--mint); font-style: normal; font-size: 12px; margin-left: 6px; }
.item .add { width: 40px; height: 40px; border-radius: 13px; background: var(--card2); border: 1px solid var(--line2); display: grid; place-items: center; align-self: center; flex: none; color: var(--amber); font-size: 22px; font-weight: 700; transition: transform 0.12s, background 0.15s; } .item .add:active { transform: scale(0.88); background: var(--amber); color: #2a1700; } .item.out { opacity: 0.45; } .item.out .add { visibility: hidden; }
.banner { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 14px; font-size: 13.5px; font-weight: 600; margin: 8px 0; } .banner.hh { background: rgba(255,181,71,.13); color: var(--amber); border: 1px solid rgba(255,181,71,.3); } .banner.last { background: rgba(255,93,108,.12); color: var(--red); border: 1px solid rgba(255,93,108,.35); } .banner.info { background: rgba(90,169,255,.1); color: var(--blue); border: 1px solid rgba(90,169,255,.28); }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; } .qk { padding: 12px 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-align: center; font-weight: 700; font-size: 12.5px; transition: transform 0.12s; } .qk:active { transform: scale(0.95); } .qk span { display: block; font-size: 26px; margin-bottom: 2px; }
.placechip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(79,227,193,.12); border: 1px solid rgba(79,227,193,.35); color: var(--mint); font-weight: 700; font-size: 13.5px; }

/* cart bar */
#cartbar { position: absolute; left: 12px; right: 12px; bottom: calc(var(--tabh) + var(--safe-b) + 10px); z-index: 18; pointer-events: none; }
#cartbar .cb { pointer-events: auto; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 56px; border-radius: 18px; background: var(--cta); color: #2a1300; font-weight: 800; box-shadow: 0 10px 30px rgba(255, 120, 70, 0.4); animation: pop 0.32s cubic-bezier(.3,1.5,.5,1); } #cartbar .cb .n { background: rgba(0,0,0,.18); border-radius: 10px; min-width: 28px; height: 28px; display: grid; place-items: center; font-size: 14px; }
@keyframes pop { from { transform: translateY(24px) scale(0.92); opacity: 0; } }

/* sheets */
#sheet { position: fixed; inset: 0; z-index: 50; pointer-events: none; } #sheet.open { pointer-events: auto; } #sheet .scrim { position: absolute; inset: 0; background: rgba(4, 6, 12, 0.66); opacity: 0; transition: opacity 0.22s; } #sheet.open .scrim { opacity: 1; }
#sheet .panel { position: absolute; left: 50%; bottom: 0; width: 100%; max-width: 560px; max-height: 92dvh; display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--line2); border-bottom: 0; border-radius: 26px 26px 0 0; transform: translate(-50%, 102%); transition: transform 0.3s cubic-bezier(.2,.9,.25,1); box-shadow: 0 -20px 60px rgba(0,0,0,.5); } #sheet.open .panel { transform: translate(-50%, 0); }
#sheet .grab { flex: none; padding: 10px 0 4px; display: grid; place-items: center; touch-action: none; } #sheet .grab i { width: 40px; height: 5px; border-radius: 3px; background: var(--line2); }
#sheet .body { overflow-y: auto; padding: 4px 18px calc(18px + var(--safe-b)); -webkit-overflow-scrolling: touch; }
.sh-h { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.opt { margin: 16px 0 6px; } .opt .og { font-weight: 700; margin-bottom: 8px; display: flex; justify-content: space-between; } .opt .og small { color: var(--dim); font-weight: 600; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; } .op { padding: 9px 14px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--line); font-weight: 600; font-size: 14px; transition: all 0.12s; } .op.on { border-color: var(--amber); background: rgba(255,181,71,.12); color: var(--amber); } .op small { color: var(--dim); margin-left: 4px; }
textarea.note { width: 100%; min-height: 64px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: none; outline: 0; } textarea.note:focus, input.in:focus { border-color: var(--amber); }
input.in { width: 100%; height: 46px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; outline: 0; }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 3px; } .stepper button { width: 36px; height: 36px; border-radius: 10px; font-size: 20px; font-weight: 700; color: var(--amber); } .stepper button:active { background: var(--card2); } .stepper b { min-width: 24px; text-align: center; font-size: 16px; }
.line { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); } .line .lt { flex: 1; min-width: 0; } .line .lt b { display: block; } .line .lt span { color: var(--mut); font-size: 13px; display: block; }
.sum { padding: 6px 0; } .sum .r { display: flex; justify-content: space-between; padding: 4px 0; color: var(--mut); } .sum .r.t { color: var(--text); font-weight: 800; font-size: 18px; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; } .sum .r.g { color: var(--mint); }
.tips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 6px 0; } .tips button { height: 44px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--line); font-weight: 700; font-size: 13.5px; line-height: 1.1; } .tips button small { display: block; font-weight: 600; font-size: 11px; color: var(--dim); } .tips button.on { border-color: var(--amber); color: var(--amber); background: rgba(255,181,71,.1); }
.pay { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .pay button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); text-align: left; font-weight: 600; } .pay button.on { border-color: var(--amber); } .pay button .ck { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line2); display: grid; place-items: center; } .pay button.on .ck { background: var(--amber); border-color: var(--amber); } .pay button.on .ck::after { content: "✓"; color: #2a1700; font-size: 13px; font-weight: 900; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgba(140,123,255,.1); border: 1px solid rgba(140,123,255,.3); font-size: 13.5px; margin: 10px 0; } .check input { width: 22px; height: 22px; accent-color: var(--amber); flex: none; margin-top: 1px; }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; } .grid button { height: 46px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--line); font-weight: 700; } .grid button.on { background: var(--amber); color: #2a1700; border-color: var(--amber); } .grid.c4 { grid-template-columns: repeat(4, 1fr); } .grid.c3 { grid-template-columns: repeat(3, 1fr); }
.detect { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); margin: 10px 0; } .detect .rad { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: rgba(79,227,193,.14); position: relative; flex: none; } .detect .rad::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mint); animation: ping 1.4s ease-out infinite; }

/* orders */
.order { border-radius: 20px; background: var(--card); border: 1px solid var(--line); padding: 16px; margin-bottom: 12px; animation: rise 0.3s both; } .order.live { border-color: rgba(255,181,71,.4); background: linear-gradient(180deg, rgba(255,181,71,.07), var(--card) 40%); }
.ring { --p: 0; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--amber) calc(var(--p) * 1%), var(--card2) 0); flex: none; position: relative; } .ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--card); } .ring span { position: relative; font-weight: 800; font-size: 13px; text-align: center; line-height: 1.1; } .ring.done { background: var(--mint); } .ring.done span { color: var(--mint); font-size: 26px; }
.tl { margin: 14px 0 4px 6px; border-left: 2px solid var(--line); padding-left: 18px; } .tl .st { position: relative; padding: 0 0 14px; color: var(--dim); } .tl .st:last-child { padding-bottom: 0; } .tl .st::before { content: ""; position: absolute; left: -26px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg2); border: 2px solid var(--line2); } .tl .st.done { color: var(--text); } .tl .st.done::before { background: var(--mint); border-color: var(--mint); } .tl .st.now::before { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 5px rgba(255,181,71,.2); animation: blink 1.4s infinite; } .tl .st b { display: block; font-size: 14.5px; } .tl .st small { color: var(--mut); font-size: 12.5px; }
.oitems { font-size: 13.5px; color: var(--mut); margin: 10px 0 0; } .oitems div { display: flex; gap: 8px; padding: 2px 0; } .oitems i { color: var(--amber); font-style: normal; font-weight: 700; min-width: 20px; }
.hdrline { display: flex; align-items: center; gap: 14px; }
.bigheadline { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.rate { display: flex; gap: 8px; }
.tabcard .r { display: flex; justify-content: space-between; padding: 6px 0; }
.split { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.confetti { position: fixed; top: 0; font-size: 26px; z-index: 90; pointer-events: none; animation: fall 1.9s ease-in forwards; } @keyframes fall { to { transform: translateY(105vh) rotate(540deg); opacity: 0.2; } }
#toasts { position: fixed; left: 0; right: 0; top: calc(64px + var(--safe-t)); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .toast { max-width: 92%; padding: 11px 16px; border-radius: 14px; background: #1f2540; border: 1px solid var(--line2); box-shadow: 0 10px 30px rgba(0,0,0,.5); font-weight: 600; font-size: 14px; animation: tin 0.28s cubic-bezier(.3,1.4,.5,1); } .toast.good { border-color: rgba(79,227,193,.5); } .toast.bad { border-color: rgba(255,93,108,.5); } @keyframes tin { from { transform: translateY(-14px) scale(0.95); opacity: 0; } }
.switch { position: relative; width: 50px; height: 30px; border-radius: 15px; background: var(--line2); transition: background 0.15s; flex: none; } .switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.18s cubic-bezier(.3,1.4,.5,1); } .switch.on { background: var(--mint); } .switch.on::after { transform: translateX(20px); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.drinks { display: flex; gap: 6px; } .drinks i { width: 18px; height: 26px; border-radius: 5px 5px 8px 8px; background: var(--line2); } .drinks i.f { background: var(--amber); }
#view.still .order, #view.still .venue { animation: none; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* the "get the app" bar at the top, like the one on Trail */
#installBar { position: fixed; z-index: 120; top: calc(var(--safe-t) + 8px); left: 10px; right: 10px; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: #1a1f35; border: 1px solid rgba(255,181,71,.55); border-radius: 16px; padding: 10px 12px; box-shadow: 0 12px 34px rgba(0,0,0,.6); animation: tin 0.32s cubic-bezier(.3,1.4,.5,1); } #installBar img { border-radius: 10px; flex: none; } #installBar .grow { min-width: 0; } #installBar b { font-size: 14px; } #installBar .btn { flex: none; }

/* where to look: the bar under the greeting, the ZIP results, and the map picker */
.areabar { width: 100%; margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .areabar svg { width: 18px; height: 18px; color: var(--amber); flex: none; } .areabar .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mut); } .areabar b { color: var(--text); } .areabar i { font-style: normal; font-weight: 700; font-size: 12.5px; color: var(--amber); flex: none; }
.zres { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 12px; margin-bottom: 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .zres svg { width: 18px; height: 18px; color: var(--amber); flex: none; }
#mapov { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; background: var(--bg); padding-top: var(--safe-t); } #mapov .mapbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
#mapbox { position: relative; flex: 1; overflow: hidden; touch-action: none; background: #0f1220; cursor: grab; user-select: none; -webkit-user-select: none; } #maplayer { position: absolute; inset: 0; } #maplayer .tile { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; filter: invert(0.92) hue-rotate(180deg) saturate(0.75) brightness(0.92) contrast(0.95); }
#mapbox .mappin { position: absolute; left: 50%; top: 50%; width: 34px; height: 48px; transform: translate(-50%, -100%); filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); pointer-events: none; }
#mapbox .mapzoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; } #mapbox .mapzoom button { width: 44px; height: 44px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line2); color: var(--text); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
#mapbox .mapattr { position: absolute; left: 6px; bottom: 6px; font-size: 10.5px; color: #cfd5ee; background: rgba(10,12,19,.7); padding: 2px 6px; border-radius: 6px; pointer-events: none; }
#mapov .mapfoot { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px calc(12px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--bg2); }