:root{
  --bg:#0a0a0f; --bg2:#12121c; --card:#1a1a26; --card2:#22222f;
  --txt:#f4f4f8; --muted:#8a8a9a; --line:#2a2a38;
  --hot:#ff3b6b; --warm:#ff9f1c; --mid:#ffd23f; --cool:#4dd4ac; --dead:#5a6a7a;
  --accent:#a855f7; --accent2:#ec4899;
  --conf-hi:#4dd4ac; --conf-mid:#ffd23f; --conf-lo:#ff7a59;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--txt);overflow:hidden;display:flex;justify-content:center}
#app{width:100%;max-width:440px;height:100vh;height:100dvh;background:radial-gradient(1200px 600px at 50% -5%,#1d1230 0%,var(--bg) 55%);display:flex;flex-direction:column;position:relative}
#screen{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}

/* header */
header{padding:16px 18px 10px;flex:0 0 auto}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:21px;letter-spacing:-.5px}
.logo .dot{width:11px;height:11px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 0 var(--hot);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,107,.6)}70%{box-shadow:0 0 0 12px rgba(255,59,107,0)}100%{box-shadow:0 0 0 0 rgba(255,59,107,0)}}
.logo span.grad{background:linear-gradient(90deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{color:var(--muted);font-size:12.5px;margin-top:3px}
.live-now{color:var(--cool);font-weight:600}
.search{margin:12px 0 4px;position:relative}
.search input{width:100%;padding:11px 14px 11px 38px;border-radius:13px;border:1px solid var(--line);background:var(--card);color:var(--txt);font-size:15px;outline:none}
.search input::placeholder{color:var(--muted)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);opacity:.5}

.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 18px 6px;flex:0 0 auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s}
.chip.active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
.sortbar{display:flex;align-items:center;justify-content:space-between;padding:4px 18px 8px;flex:0 0 auto}
.seg{display:flex;background:var(--card);border-radius:10px;padding:3px;gap:2px}
.seg button{border:none;background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:8px;cursor:pointer}
.seg button.active{background:var(--card2);color:var(--txt)}
.updated{font-size:11px;color:var(--muted);text-align:center;padding:2px 0 8px;flex:0 0 auto}

.scroll{flex:1 1 auto;overflow-y:auto;padding:4px 14px 96px}
.scroll::-webkit-scrollbar{width:0}
.empty{text-align:center;color:var(--muted);padding:50px 20px;font-size:14px}

/* card */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:11px;cursor:pointer;transition:.15s;position:relative;overflow:hidden}
.card:active{transform:scale(.985)}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card h3{font-size:16.5px;font-weight:700;letter-spacing:-.3px}
.card .meta{color:var(--muted);font-size:12.5px;margin-top:3px}
.fire{font-size:14px}
.pbadge{font-size:8.5px;font-weight:800;color:#9bb8ff;background:rgba(91,140,255,.16);padding:2px 6px;border-radius:6px;letter-spacing:.4px;vertical-align:middle;white-space:nowrap}
.pct{text-align:right;flex:0 0 auto}
.pct .num{font-size:24px;font-weight:800;line-height:1;letter-spacing:-1px}
.pct .lbl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-top:2px;font-weight:600}
.bar{height:7px;border-radius:6px;background:var(--bg2);margin-top:11px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:6px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.confrow{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}
.conf{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:4px 9px;border-radius:8px;letter-spacing:.3px}
.conf .cd{width:7px;height:7px;border-radius:50%}
.conf.hi{background:rgba(77,212,172,.12);color:var(--conf-hi)}
.conf.mid{background:rgba(255,210,63,.12);color:var(--conf-mid)}
.conf.lo{background:rgba(255,122,89,.14);color:var(--conf-lo)}
.srcnote{font-size:10.5px;color:var(--muted);font-weight:600}
.sigdots{display:flex;gap:4px;align-items:center}
.sigdots .sd{width:9px;height:9px;border-radius:3px;opacity:.28}
.sigdots .sd.on{opacity:1}
.statusline{font-size:12px;font-weight:600;margin-top:9px;display:flex;align-items:center;gap:6px}
.fctag{font-size:11.5px;font-weight:800;margin-top:9px;padding:7px 10px;border-radius:9px;letter-spacing:.2px;line-height:1.3}
.fctag.up{background:linear-gradient(90deg,rgba(91,140,255,.22),rgba(34,211,238,.14));color:#bcd0ff}
.fctag.rise{background:rgba(91,140,255,.12);color:#9bb8ff}
.fctag.sold{background:linear-gradient(90deg,rgba(236,72,153,.24),rgba(168,85,247,.16));color:#f5b8e4}

/* map */
.mapwrap{flex:1 1 auto;position:relative;overflow:hidden;margin-bottom:84px}
.mapcanvas{position:absolute;inset:0;background:
  linear-gradient(0deg,rgba(168,85,247,.04),rgba(168,85,247,.04)),
  repeating-linear-gradient(0deg,transparent,transparent 38px,rgba(255,255,255,.03) 38px,rgba(255,255,255,.03) 39px),
  repeating-linear-gradient(90deg,transparent,transparent 38px,rgba(255,255,255,.03) 38px,rgba(255,255,255,.03) 39px),var(--bg2)}
.pin{position:absolute;transform:translate(-50%,-50%);cursor:pointer;text-align:center}
.pin .blob{border-radius:50%;margin:0 auto;box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.pin .blob.lg{animation:beat 1.4s infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.pin .ring2{position:absolute;inset:-5px;border-radius:50%;border:2px dashed;opacity:.6}
.pin .nm{font-size:10px;font-weight:700;margin-top:6px;background:rgba(10,10,15,.7);padding:1px 5px;border-radius:6px;white-space:nowrap}
.youpin{position:absolute;transform:translate(-50%,-50%)}
.youpin .d{width:14px;height:14px;border-radius:50%;background:#3b82f6;box-shadow:0 0 0 5px rgba(59,130,246,.25),0 0 0 10px rgba(59,130,246,.12)}

/* profile */
.pcard{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:12px}
.avatar{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:#fff}
.pname{font-weight:800;font-size:17px}
.pmail{color:var(--muted);font-size:13px;margin-top:2px}
.pstats{display:flex;gap:10px;margin-bottom:18px}
.pstat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px;text-align:center}
.pstat b{display:block;font-size:19px;font-weight:800}
.pstat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.ptitle{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:6px 4px 9px}
.psources{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 12px;margin-bottom:16px}
.psrc{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid var(--line)}
.psrc:last-child{border:none}
.psrc .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
.psrc .pi{flex:1;min-width:0}
.psrc .pi b{font-size:13.5px;font-weight:700}
.psrc .pi small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.psrc .pw{font-weight:800;font-size:13px;color:var(--accent)}
.pfoot{text-align:center;color:var(--muted);font-size:11.5px;line-height:1.6;padding:4px 10px 10px}

/* bottom nav */
.bnav{position:absolute;bottom:0;left:0;right:0;height:74px;padding-bottom:env(safe-area-inset-bottom);background:linear-gradient(0deg,var(--bg) 60%,transparent);display:flex;align-items:center;justify-content:space-around;z-index:20}
.bnav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:10.5px;font-weight:700;cursor:pointer}
.bnav a.active{color:var(--txt)}
.bnav a.active svg{stroke:var(--accent)}
.fab{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;margin-top:-22px;box-shadow:0 8px 24px rgba(168,85,247,.45);color:#fff;cursor:pointer}

/* modal / sheet */
.modal{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:none;align-items:flex-end;z-index:50}
.modal.on{display:flex}
.sheet{width:100%;background:var(--bg2);border-radius:24px 24px 0 0;border-top:1px solid var(--line);padding:8px 18px 26px;max-height:90%;overflow-y:auto;animation:rise .28s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
.grab{width:40px;height:5px;border-radius:5px;background:var(--line);margin:6px auto 16px}
.sheet h2{font-size:23px;letter-spacing:-.5px}
.sheet .smeta{color:var(--muted);font-size:13.5px;margin-top:5px}
.gauge{display:flex;align-items:center;gap:16px;margin:18px 0 4px}
.ring{position:relative;width:108px;height:108px;flex:0 0 auto}
.ring svg{transform:rotate(-90deg)}
.ring .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .ctr b{font-size:30px;letter-spacing:-1.5px;line-height:1}
.ring .ctr small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-weight:700;margin-top:2px}
.gstats{flex:1}
.gstat{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.gstat:last-child{border:none}
.gstat span{color:var(--muted)}
.gstat b{font-weight:700}
.vpanel{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.vhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.vhead .t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.verdict{font-size:13px;font-weight:700;margin:8px 0 14px;line-height:1.5;display:flex;gap:8px;align-items:flex-start}
.verdict .vi{flex:0 0 auto;font-size:15px}
.sig{margin:11px 0}
.sig .sl{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.sig .sl .nm{display:flex;align-items:center;gap:7px;font-weight:600}
.sig .sl .nm .ic{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px}
.sig .sl .rt{font-weight:800}
.sig .sl .rt.off{color:var(--muted);font-weight:600;font-style:italic}
.sbar{height:6px;border-radius:5px;background:var(--bg2);overflow:hidden;position:relative}
.sbar>i{display:block;height:100%;border-radius:5px;transition:width .6s}
.sbar .blend{position:absolute;top:-3px;width:2px;height:12px;background:#fff;border-radius:2px;opacity:.85}
.wnote{font-size:10px;color:var(--muted);margin-top:3px}
.agree{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.agree .am{flex:1;height:8px;border-radius:5px;background:var(--bg2);overflow:hidden}
.agree .am>i{display:block;height:100%;border-radius:5px}
.agree .al{font-size:11.5px;font-weight:800;white-space:nowrap}
.curvelbl{font-size:12px;color:var(--muted);font-weight:700;margin-top:18px;text-transform:uppercase;letter-spacing:.6px}
.spark{display:flex;align-items:flex-end;gap:3px;height:50px;margin:10px 0 6px}
.spark>i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--accent),rgba(168,85,247,.25));min-height:4px}
.sparklbl{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted)}
.checkin{display:flex;gap:10px;margin-top:20px}
.checkin button{flex:1;border:none;border-radius:14px;padding:14px;font-size:14.5px;font-weight:700;cursor:pointer;color:#fff}
.btn-busy{background:linear-gradient(90deg,var(--hot),var(--warm))}
.btn-chill{background:var(--card2);color:var(--txt);border:1px solid var(--line)}
.btn-save{width:100%;margin-top:10px;border:1px solid var(--line);background:var(--card2);color:var(--txt);border-radius:14px;padding:13px;font-size:14px;font-weight:700;cursor:pointer}
.btn-save.on{background:rgba(236,72,153,.16);color:#f5b8e4;border-color:transparent}
.reportnote{font-size:11.5px;color:var(--muted);text-align:center;margin-top:11px;line-height:1.5}

/* check-in picker */
.cilist{margin-top:14px}
.cirow{display:flex;align-items:center;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--line)}
.cirow b{font-size:14.5px;font-weight:700}
.cirow small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.cibtns{display:flex;gap:8px}
.cibtns button{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card2);font-size:18px;cursor:pointer}

.toast{position:absolute;bottom:92px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--card2);border:1px solid var(--line);color:var(--txt);padding:11px 18px;border-radius:13px;font-size:13.5px;font-weight:600;opacity:0;transition:.3s;z-index:60;pointer-events:none;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- city dropdown filter ---- */
.cityrow{display:flex;align-items:center;gap:8px;padding:0 16px;margin:2px 0 4px}
.cityrow .cityic{font-size:13px;opacity:.85}
.citysel{flex:1;appearance:none;-webkit-appearance:none;background:var(--card2);color:var(--txt);border:1px solid var(--line);border-radius:12px;padding:10px 34px 10px 13px;font-size:13.5px;font-weight:600;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238aa0bd' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 13px center}
.citysel:focus{outline:none;border-color:var(--accent)}

/* ---- closed / outside-hours venues (greyed until they open) ---- */
.card.closed{opacity:.5;filter:grayscale(.85)}
.card.closed:hover{opacity:.7}
.card.closed h3{color:var(--muted)}
.card .closednum{font-size:20px;line-height:1}
.closedtag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#7d8aa0;background:rgba(90,106,122,.14);border:1px solid var(--line);padding:3px 9px;border-radius:999px}
.pin.closed{z-index:1}
.pin.closed .nm{opacity:.7}
.openpill{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:12.5px;font-weight:800;padding:5px 11px;border-radius:999px;letter-spacing:.2px}
.openpill.on{color:#67e8b0;background:rgba(77,212,172,.14);border:1px solid rgba(77,212,172,.3)}
.openpill.off{color:#8aa0bd;background:rgba(90,106,122,.16);border:1px solid var(--line)}
.hours{margin-top:8px;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.hrow{display:flex;justify-content:space-between;padding:8px 13px;font-size:12.5px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.04)}
.hrow:last-child{border-bottom:none}
.hrow span:first-child{font-weight:700;color:var(--txt2,#aeb8c8)}
.hrow.htoday{background:rgba(168,85,247,.12)}
.hrow.htoday span{color:#d9c4ff}