:root {
    --bg: #08081a;
    --surface: #0e0e24;
    --card: #12122a;
    --cyan: #00e5ff;
    --magenta: #ff2d78;
    --purple: #8b5cf6;
    --gold: #ffd700;
    --green: #00ff85;
    --text: #f0f0ff;
    --muted: #7878a0;
    --border: rgba(255,255,255,0.07);
    --border-hover: rgba(139,92,246,0.35);
    --accent: var(--cyan);
    --glow-purple: rgba(139,92,246,0.12);
    --glow-magenta: rgba(255,45,120,0.08);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; overflow-x: hidden; }
  body {
    background: var(--bg);
    background-image: 
      radial-gradient(ellipse at 20% 0%, rgba(139,92,246,.08) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 100%, rgba(255,45,120,.05) 0%, transparent 50%);
    background-attachment: fixed;
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body::before {
    content:'';
    position:fixed; inset:0;
    background-image:
      linear-gradient(rgba(139,92,246,0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139,92,246,0.018) 1px, transparent 1px);
    background-size:50px 50px;
    pointer-events:none; z-index:0;
  }

  /* ── ALL IMAGES open in lightbox on click ── */
  .tonight-thumb img,
  .thisweek-img img,
  .cal-event-img img,
  .cp-event-img img,
  .featured-img,
  img[data-venue-img] {
    cursor: zoom-in;
  }

  /* ── CITY EVENTS SECTION ── */
  .city-events-section {
    padding: 0 2rem 2rem;
  }
  .city-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
  }
  .city-ev-card {
    background: var(--card);
    border: 1px solid rgba(255,215,0,.12);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all .25s;
    display: flex;
    flex-direction: column;
  }
  .city-ev-card:hover {
    border-color: rgba(255,215,0,.4);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
  }
  .city-ev-img {
    height: 160px;
    position: relative;
    overflow: hidden;
    background: var(--surface);
  }
  .city-ev-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
  }
  .city-ev-card:hover .city-ev-img img { transform: scale(1.06); }
  .city-ev-type-badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 50px;
    background: rgba(255,215,0,.2);
    color: var(--gold);
    border: 1px solid rgba(255,215,0,.45);
    backdrop-filter: blur(8px);
  }
  .city-ev-date-badge {
    position: absolute;
    top: .6rem;
    right: .6rem;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: .22rem .6rem;
    border-radius: 50px;
    background: rgba(139,92,246,.85);
    color: #fff;
    backdrop-filter: blur(8px);
  }
  .city-ev-body {
    padding: 1rem 1.1rem 1.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .4rem;
  }
  .city-ev-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: .05em;
    line-height: 1.1;
  }
  .city-ev-location {
    font-size: .72rem;
    color: var(--cyan);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .3rem;
  }
  .city-ev-desc {
    font-size: .75rem;
    color: var(--muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .city-ev-meta {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: .5rem;
  }
  .city-ev-tag {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .12rem .5rem;
    border-radius: 50px;
    background: rgba(255,215,0,.1);
    color: var(--gold);
    border: 1px solid rgba(255,215,0,.22);
  }
  .city-ev-time {
    font-size: .68rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .3rem;
  }
  .city-ev-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.5rem;
    color: var(--muted);
    font-size: .85rem;
  }
  @media(max-width:600px) {
    .city-events-section { padding: 0 1rem 1.5rem; }
    .city-events-grid { grid-template-columns: 1fr; }
  }

  /* ── EVENTS HERO BANNER (top of page, rotates through active events) ── */
  .events-hero {
    margin: 0 2rem 1.4rem;
    border-radius: 18px;
    padding: 1.3rem 1.5rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(135deg, var(--purple), var(--magenta));
    min-height: 92px;
  }
  .events-hero-eyebrow {
    font-size: .68rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: .3rem;
  }
  .events-hero-name {
    font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: .15rem;
    line-height: 1.15;
  }
  .events-hero-meta { font-size: .82rem; color: rgba(255,255,255,.9); }
  .events-hero-dots {
    position: absolute; right: 1.1rem; bottom: 1rem;
    display: flex; gap: .3rem;
  }
  .events-hero-dots span {
    width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.35);
    transition: background .2s;
  }
  .events-hero-dots span.active { background: #fff; }

  /* ── FEATURED EVENTS ROW (horizontal scroll, above the venue rows) ── */
  .events-row-section { margin: 0 0 2rem; }
  .events-row-scroll {
    display: flex; gap: 1.1rem; overflow-x: auto;
    padding: 0 2rem 1rem; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0%, black 1.5%, black 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 1.5%, black 97%, transparent 100%);
  }
  .events-row-scroll::-webkit-scrollbar { display: none; }
  .events-row-scroll .city-ev-card {
    flex: 0 0 220px; width: 220px; scroll-snap-align: start;
  }
  .events-row-scroll .city-ev-img { height: 120px; }
  .events-row-scroll .city-ev-body { padding: .8rem .9rem .9rem; gap: .3rem; }
  .events-row-scroll .city-ev-name { font-size: 1.05rem; }
  .events-row-scroll .city-ev-desc { display: none; }

  @media(max-width:600px) {
    .events-hero { margin: 0 .9rem 1.1rem; padding: 1.1rem 1.2rem; }
    .events-row-scroll { gap: .85rem; padding: 0 .9rem 1rem; }
    .events-row-scroll .city-ev-card { flex: 0 0 72vw; width: 72vw; max-width: 260px; }
  }

  /* ══════════ HERO V2 — Cinematic Carousel ══════════ */
  .hero-v2 {
    position: relative;
    height: 100svh;
    min-height: 520px;
    max-height: 820px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 0;
  }

  /* Photo carousel */
  .hero-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
    will-change: opacity;
  }
  .hero-slide.active { opacity: 1; }

  /* Multi-layer overlay for cinematic depth */
  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(to top,  rgba(8,8,26,0.97) 0%, rgba(8,8,26,0.55) 40%, rgba(8,8,26,0.1) 70%, transparent 100%),
      linear-gradient(to right, rgba(8,8,26,0.4) 0%, transparent 50%);
  }

  /* Film grain overlay */
  .hero-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
  }

  /* All content sits above overlays */
  .hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0 2rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* Live badge */
  .hero-live-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,45,120,0.12);
    border: 1px solid rgba(255,45,120,0.35);
    backdrop-filter: blur(12px);
    padding: .3rem .8rem;
    border-radius: 50px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--magenta);
    animation: heroBadgePulse 3s ease-in-out infinite;
  }
  @keyframes heroBadgePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,45,120,0); }
    50% { box-shadow: 0 0 0 6px rgba(255,45,120,0.08); }
  }
  .hero-live-pip {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--magenta);
    box-shadow: 0 0 8px var(--magenta);
    animation: pdot 1s infinite;
    flex-shrink: 0;
  }

  /* Headline */
  .hero-headline {
    font-family: 'Bebas Neue', sans-serif;
    display: flex;
    flex-direction: column;
    line-height: .92;
    letter-spacing: .03em;
    margin: 0;
  }
  .hero-hl-line1 {
    font-size: clamp(3.5rem, 11vw, 7rem);
    color: rgba(240,240,255,0.75);
    font-weight: 400;
  }
  .hero-hl-line2 {
    font-size: clamp(3.8rem, 13vw, 8.5rem);
    background: linear-gradient(135deg, #fff 0%, var(--cyan) 55%, var(--magenta) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 40px rgba(0,229,255,0.3));
    animation: headlineGlow 4s ease-in-out infinite;
  }
  @keyframes headlineGlow {
    0%,100% { filter: drop-shadow(0 0 30px rgba(0,229,255,0.25)); }
    50% { filter: drop-shadow(0 0 60px rgba(0,229,255,0.5)); }
  }

  /* MTL identity tags */
  .hero-identity {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
  }
  .hero-id-tag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(240,240,255,0.55);
  }
  .hero-id-sep { color: rgba(255,255,255,0.2); font-size: .65rem; }

  /* Hero search bar */
  /* ── SEARCH + FILTERS SECTION (outside hero) ── */
  .search-filter-section {
    background: linear-gradient(180deg, rgba(15,15,40,0.95) 0%, rgba(15,15,40,1) 100%);
    padding: 1.5rem 2rem 2rem;
    border-bottom: 1px solid rgba(139,92,246,0.1);
  }

  .hero-search-wrap {
    display: flex;
    gap: .65rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
  }
  .hero-search {
    flex: 1;
    min-width: 200px;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
  .hero-s-select {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(20px) !important;
  }

  /* ── NIGHT FINDER ── */
  .nf-pills { display: flex; gap: .4rem; flex-wrap: wrap; }
  .nf-pill {
    padding: .32rem .85rem; border-radius: 50px;
    font-size: .68rem; font-weight: 600; letter-spacing: .03em;
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.4);
    cursor: pointer; transition: all .2s;
    background: rgba(255,255,255,.025);
    white-space: nowrap; user-select: none;
  }
  .nf-pill:hover { border-color: rgba(0,229,255,.3); color: rgba(255,255,255,.75); }
  .nf-pill.nf-active {
    background: rgba(0,229,255,.06);
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 0 1px rgba(0,229,255,.15), 0 0 14px rgba(0,229,255,.18);
  }
  .nf-pill.nf-active.nf-pink {
    background: rgba(0,229,255,.06);
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 0 1px rgba(0,229,255,.15), 0 0 14px rgba(0,229,255,.18);
  }
  .nf-go {
    padding: .36rem 1.05rem; border-radius: 50px;
    border: 1px solid var(--cyan); background: rgba(0,229,255,.06);
    color: var(--cyan); font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    cursor: pointer; display: flex; align-items: center;
    gap: .4rem; transition: all .2s; white-space: nowrap;
    text-transform: uppercase;
  }
  .nf-go:hover { background: rgba(0,229,255,.14); box-shadow: 0 0 16px rgba(0,229,255,.3); }
  .open-now-pill {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .95rem;
    border-radius: 50px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(0,255,133,.3);
    color: var(--green);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    flex-shrink: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .open-now-pill:hover, .open-now-pill.active {
    background: rgba(0,255,133,.07);
    border-color: var(--green);
    box-shadow: 0 0 14px rgba(0,255,133,.22);
  }
  .onp-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
    animation: pdot 1.2s infinite;
    flex-shrink: 0;
  }
  .onp-count {
    background: none;
    border: 1px solid rgba(0,255,133,.3);
    border-radius: 50px;
    padding: .05rem .42rem;
    font-size: .6rem;
  }

  /* ── FILTER TRIGGER + DROPDOWN ── */
  .filter-trigger {
    display:flex; align-items:center; gap:.45rem;
    padding:.5rem .95rem; border-radius:50px;
    background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.65); font-size:.72rem; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; cursor:pointer; transition:all .2s;
    white-space:nowrap; flex-shrink:0;
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  }
  .filter-trigger:hover { border-color:rgba(0,229,255,.35); color:#fff; }
  .filter-trigger.active {
    border-color:var(--cyan); color:var(--cyan);
    box-shadow:0 0 14px rgba(0,229,255,.22);
  }
  .filter-trigger svg { width:13px; height:13px; transition:transform .25s; }
  .filter-trigger.active svg { transform:rotate(180deg); }

  .filter-dropdown {
    display:none; flex-direction:column; gap:.85rem;
    position:absolute; top:calc(100% + .6rem); left:0; right:0;
    background:rgba(10,10,24,.97);
    border:1px solid rgba(0,229,255,.18);
    border-radius:16px; padding:1.1rem 1.2rem;
    box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 24px rgba(0,229,255,.06);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    z-index:60;
  }
  .filter-dropdown.open { display:flex; animation:fdOpen .18s ease both; }
  @keyframes fdOpen { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
  .fd-row { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
  .fd-label {
    font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(255,255,255,.3); white-space:nowrap; flex-shrink:0;
  }
  .nf-go-full { width:100%; justify-content:center; margin-top:.1rem; }

  /* ── Open Now Drawer ── */
  .on-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    backdrop-filter: blur(3px);
  }
  .on-drawer-overlay.open {
    opacity: 1;
    pointer-events: all;
  }
  .on-drawer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1101;
    background: var(--surface, #0e0e1f);
    border-radius: 22px 22px 0 0;
    border-top: 1px solid rgba(0,255,133,.2);
    padding: .5rem 1.5rem 0;
    padding-bottom: calc(58px + env(safe-area-inset-bottom) + .5rem);
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.32,.72,0,1);
    max-height: calc(80vh - 58px);
    display: flex;
    flex-direction: column;
  }
  .on-drawer.open {
    transform: translateY(0);
  }
  .on-drawer-handle {
    width: 40px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,.18);
    margin: .6rem auto 1rem;
    flex-shrink: 0;
  }
  .on-drawer-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.1rem;
    flex-shrink: 0;
  }
  .on-drawer-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    letter-spacing: .08em;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: .55rem;
    flex: 1;
  }
  .on-drawer-pulse {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    animation: pdot 1.2s infinite;
    flex-shrink: 0;
  }
  .on-drawer-badge {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: .22rem .65rem;
    border-radius: 50px;
    background: rgba(0,255,133,.1);
    color: var(--green);
    border: 1px solid rgba(0,255,133,.25);
    white-space: nowrap;
  }
  .on-drawer-close {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--muted);
    border-radius: 50%;
    width: 30px; height: 30px;
    font-size: .8rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .2s;
  }
  .on-drawer-close:hover { background: rgba(255,255,255,.14); color: var(--text); }
  .on-drawer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    flex: 1;
    min-height: 0;
  }
  /* Reuse .open-now-mini styles already defined */
  @media(max-width: 480px) {
    .on-drawer-grid { grid-template-columns: repeat(2, 1fr); }
    .open-now-pill .onp-label { display: none; }
  }

  /* Venue credit label bottom-right */
  .hero-venue-label {
    position: absolute;
    bottom: 5.5rem;
    right: 2rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(8,8,26,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: .3rem .75rem;
    border-radius: 50px;
    transition: opacity .5s ease;
  }
  .hero-venue-name {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(240,240,255,0.9);
  }
  .hero-venue-stars {
    font-size: .62rem;
    color: var(--gold);
    letter-spacing: .04em;
  }

  /* Carousel dots */
  .hero-dots {
    display: flex;
    gap: .45rem;
    margin-top: .25rem;
  }
  .hero-dot {
    width: 22px; height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.25);
    transition: all .4s ease;
    cursor: pointer;
  }
  .hero-dot.active {
    background: var(--cyan);
    width: 36px;
    box-shadow: 0 0 8px rgba(0,229,255,0.6);
  }

  .smart-section {
    padding: 1.5rem 2rem 0.5rem;
  }
  .smart-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  .smart-sec-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: .08em;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--text);
  }
  .smart-sec-pulse {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    animation: pdot 1.2s infinite;
    flex-shrink: 0;
    display: inline-block;
  }
  .smart-sec-badge {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: .25rem .7rem;
    border-radius: 50px;
    background: rgba(0,255,133,.1);
    color: var(--green);
    border: 1px solid rgba(0,255,133,.25);
  }
  .smart-sec-sub {
    font-size: .72rem;
    color: var(--muted);
    font-weight: 600;
  }

  /* Mini open-now cards grid */
  .smart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
    gap: .7rem;
    margin-bottom: .5rem;
    max-height: 340px;
    overflow: hidden;
    position: relative;
  }
  .smart-grid::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to top, var(--bg), transparent);
    pointer-events: none;
  }

  .open-now-mini {
    background: var(--card);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(0,255,133,.18);
    box-shadow: 0 0 0 0 rgba(0,255,133,0);
    transition: all .25s;
    position: relative;
  }
  .open-now-mini:hover {
    border-color: rgba(0,255,133,.45);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
  }
  .open-now-mini-img {
    height: 80px;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .open-now-mini-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent 60%);
  }
  .open-status-glow {
    position: absolute;
    top: .45rem; right: .45rem;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green), 0 0 16px rgba(0,255,133,.5);
    animation: pdot 1.2s infinite;
    z-index: 2;
  }
  .open-now-mini-body {
    padding: .55rem .65rem .65rem;
  }
  .open-now-mini-name {
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .2rem;
  }
  .open-now-mini-busy {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
  }

  @media(max-width:600px) {
    .hero-content { padding: 0 1.2rem 2.5rem; gap: .75rem; }
    .smart-section { padding: 1.2rem 1.2rem 0.5rem; }
    .smart-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }
  }
  @media(max-width:400px) {
    .hero-v2 { min-height: 480px; }
  }

  /* ── SCROLLBAR ── */
  ::-webkit-scrollbar{width:5px}
  ::-webkit-scrollbar-track{background:var(--bg)}
  ::-webkit-scrollbar-thumb{background:rgba(139,92,246,0.25);border-radius:3px}



  /* ── LOGO + CITY TICKER in header ── */
  .logo-wrap {
    display:flex; align-items:center; gap:0; flex-shrink:0;
  }
  .logo-city-ticker {
    height:22px; overflow:hidden; position:relative;
    display:flex; align-items:center;
    border-left:1px solid rgba(255,255,255,0.12);
    margin-left:.55rem; padding-left:.55rem;
  }
  .logo-city-drum {
    display:flex; flex-direction:column;
    will-change:transform;
  }
  .logo-city-item {
    font-size:.65rem; font-weight:700; letter-spacing:.18em;
    text-transform:uppercase; color:var(--muted);
    height:22px; display:flex; align-items:center;
    white-space:nowrap; transition:color .2s;
    font-family:'Space Grotesk',sans-serif;
  }
  .logo-city-item.active { color:var(--cyan); }


  /* ── CROWD AGE + DRESS INFO ── */
  .crowd-pill {
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:.6rem; font-weight:700; letter-spacing:.08em;
    padding:.18rem .6rem; border-radius:50px; flex-shrink:0;
    background:rgba(155,93,229,.12); color:var(--purple);
    border:1px solid rgba(155,93,229,.28);
  }
  .crowd-pill svg { width:10px; height:10px; flex-shrink:0; }
  .dress-pill {
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:.6rem; font-weight:600; letter-spacing:.06em;
    padding:.18rem .6rem; border-radius:50px; flex-shrink:0;
    background:rgba(0,229,204,.08); color:var(--cyan);
    border:1px solid rgba(0,229,204,.22);
  }
  .dress-pill svg { width:10px; height:10px; flex-shrink:0; }

  /* ── METRO + PARKING PILLS on cards ── */
  .metro-pill {
    display:inline-flex; align-items:center; gap:.32rem;
    font-size:.62rem; font-weight:700; letter-spacing:.06em;
    padding:.18rem .6rem; border-radius:50px; flex-shrink:0;
    background:rgba(0,245,255,.07); color:var(--cyan);
    border:1px solid rgba(0,245,255,.22);
  }
  .metro-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--cyan); flex-shrink:0;
    box-shadow:0 0 5px var(--cyan);
  }
  .parking-pill {
    display:inline-flex; align-items:center; gap:.32rem;
    font-size:.62rem; font-weight:700; letter-spacing:.06em;
    padding:.18rem .6rem; border-radius:50px; flex-shrink:0;
    background:rgba(255,215,0,.07); color:var(--gold);
    border:1px solid rgba(255,215,0,.22);
  }
  .parking-p {
    width:14px; height:14px; border-radius:3px; flex-shrink:0;
    background:var(--gold); color:#000;
    font-size:.55rem; font-weight:900; line-height:14px;
    text-align:center; display:inline-flex; align-items:center; justify-content:center;
  }
  .c-transit-row {
    display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.3rem; align-items:center;
  }
  .c-entrance-pill {
    display:inline-flex; align-items:center; gap:.28rem;
    font-size:.6rem; font-weight:700; letter-spacing:.06em;
    padding:.18rem .6rem; border-radius:50px; flex-shrink:0;
    background:rgba(255,255,255,.07); color:rgba(240,240,255,.85);
    border:1px solid rgba(255,255,255,.18);
    cursor:pointer; transition:background .2s, border-color .2s;
    margin-top:.3rem;
  }
  .c-entrance-pill:hover {
    background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.35);
  }
  /* Modal transport info box */
  .m-transit-link {
    text-decoration:none; color:inherit; cursor:pointer;
    transition:background .2s;
  }
  .m-transit-link:hover { background:rgba(255,215,0,.06); border-radius:8px; }
  .m-transit-box {
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:.85rem 1.1rem; margin:.7rem 0;
    display:flex; gap:.75rem; flex-wrap:wrap;
  }
  .m-transit-item {
    display:flex; align-items:center; gap:.45rem; flex:1; min-width:120px;
  }
  .m-transit-icon {
    width:28px; height:28px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:.85rem;
  }
  .m-transit-icon.metro { background:rgba(0,245,255,.1); border:1px solid rgba(0,245,255,.2); }
  .m-transit-icon.parking { background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.2); }
  .m-transit-label { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .m-transit-val { font-size:.82rem; font-weight:700; margin-top:.05rem; }
  .vibe-row {
    display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.6rem;
  }
  /* modal info rows */
  .m-vibe-box {
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:1rem 1.1rem; margin-bottom:.7rem;
  }
  .m-vibe-label {
    font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
    color:var(--muted); margin-bottom:.45rem; font-weight:600;
  }
  .m-vibe-val { font-size:.85rem; font-weight:600; line-height:1.5; }
  .m-vibe-sub { font-size:.75rem; color:var(--muted); margin-top:.2rem; line-height:1.45; }

  /* ── HEADER ── */
  header {
    position:sticky; top:0; z-index:200;
    background:rgba(8,8,26,0.88);
    backdrop-filter:blur(32px) saturate(1.3);
    -webkit-backdrop-filter:blur(32px) saturate(1.3);
    border-bottom:1px solid rgba(139,92,246,0.08);
    height:60px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 2rem;
  }
  .logo {
    font-family:'Bebas Neue',sans-serif; font-size:1.9rem; letter-spacing:.12em;
    background:linear-gradient(135deg,#a78bfa,var(--magenta));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    cursor:default;
  }
  nav { display:flex; gap:1.8rem; align-items:center; }
  nav a {
    color:var(--muted); text-decoration:none;
    font-size:.78rem; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase;
    transition:color .2s;
  }
  nav a:hover { color:var(--cyan); }
  .nav-admin-link {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.28rem .75rem; border-radius:50px;
    font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    background:rgba(255,45,120,.08); color:var(--magenta);
    border:1px solid rgba(255,45,120,.25); cursor:pointer;
    transition:all .2s; text-decoration:none;
  }
  .nav-admin-link:hover { background:rgba(255,45,120,.16); color:var(--magenta); }

  /* ── BUSY BADGE on cards ── */
  .busy-now {
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:.62rem; font-weight:700; letter-spacing:.07em;
    text-transform:uppercase; padding:.15rem .55rem;
    border-radius:50px; margin-left:.4rem;
  }
  .busy-dot { width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0; }
  .b-hot  { background:rgba(255,45,120,.15);  color:var(--magenta); border:1px solid rgba(255,45,120,.35); }
  .b-hot  .busy-dot { background:var(--magenta); box-shadow:0 0 5px var(--magenta); animation:pdot 1s infinite; }
  .b-mod  { background:rgba(255,165,0,.12);   color:orange;         border:1px solid rgba(255,165,0,.35); }
  .b-mod  .busy-dot { background:orange; box-shadow:0 0 5px orange; animation:pdot 1.6s infinite; }
  .b-quiet{ background:rgba(0,245,255,.08);   color:var(--cyan);    border:1px solid rgba(0,245,255,.25); }
  .b-quiet.busy-dot { background:var(--cyan); }
  .b-closed{background:rgba(100,100,130,.1);  color:var(--muted);   border:1px solid rgba(100,100,130,.2); }
  @keyframes pdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.4)}}

  /* ── BUSY INDICATOR on cards ── */
  .busy-pill {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.18rem .6rem; border-radius:50px;
    font-size:.62rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; margin-top:.5rem;
  }
  .busy-dot {
    width:7px; height:7px; border-radius:50%;
    display:inline-block; flex-shrink:0;
  }
  .busy-hot  { background:rgba(255,45,120,.15); color:var(--magenta); border:1px solid rgba(255,45,120,.3); }
  .busy-hot .busy-dot  { background:var(--magenta); box-shadow:0 0 6px var(--magenta); animation:pulse-dot 1s infinite; }
  .busy-mod  { background:rgba(255,165,0,.12); color:orange; border:1px solid rgba(255,165,0,.3); }
  .busy-mod .busy-dot  { background:orange; box-shadow:0 0 6px orange; animation:pulse-dot 1.5s infinite; }
  .busy-quiet{ background:rgba(0,245,255,.1); color:var(--cyan); border:1px solid rgba(0,245,255,.25); }
  .busy-quiet .busy-dot{ background:var(--cyan); }
  .busy-closed{ background:rgba(100,100,130,.1); color:var(--muted); border:1px solid rgba(100,100,130,.2); }
  .busy-closed .busy-dot{ background:var(--muted); }
  @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

  /* ── TONIGHT SECTION ── */
  .tonight-strip {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
    gap:1rem; margin-bottom:1rem;
  }
  .tonight-card {
    background:var(--card); border:1px solid rgba(139,92,246,.08);
    border-radius:14px; overflow:hidden;
    display:flex; flex-direction:column;
    transition:border-color .22s, transform .22s, box-shadow .22s;
    cursor:pointer;
  }
  .tonight-card:hover { border-color:rgba(139,92,246,.25); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
  .tonight-thumb {
    height:100px; position:relative; overflow:hidden; background:var(--surface);
  }
  .tonight-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
  .tonight-card:hover .tonight-thumb img { transform:scale(1.05); }
  .tonight-live-badge {
    position:absolute; top:.6rem; left:.6rem;
    background:var(--magenta); color:#fff;
    font-size:.6rem; font-weight:800; letter-spacing:.1em;
    padding:.2rem .55rem; border-radius:50px;
    text-transform:uppercase;
    box-shadow:0 0 12px rgba(255,45,120,.6);
    animation:pulse-badge 2s infinite;
  }
  @keyframes pulse-badge{0%,100%{box-shadow:0 0 12px rgba(255,45,120,.6)}50%{box-shadow:0 0 24px rgba(255,45,120,.9)}}
  .tonight-body { padding:.7rem .85rem .8rem; flex:1; display:flex; flex-direction:column; gap:.3rem; }
  .tonight-venue { font-size:.58rem; color:var(--cyan); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
  .tonight-event { font-family:'Bebas Neue',sans-serif; font-size:1.05rem; letter-spacing:.05em; line-height:1.1; }
  .tonight-meta { display:flex; gap:.45rem; flex-wrap:wrap; margin-top:auto; padding-top:.35rem; }
  .tonight-tag {
    font-size:.58rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    padding:.12rem .45rem; border-radius:50px;
    background:rgba(155,93,229,.12); color:var(--purple); border:1px solid rgba(155,93,229,.28);
  }
  .tonight-time { font-size:.65rem; color:var(--muted); display:flex; align-items:center; gap:.3rem; }

  /* ── ARTIST-FEATURED tonight card ── */
  .tonight-card.has-artist {
    border-color: rgba(255,215,0,.35);
    background: var(--card);
  }
  .tonight-card.has-artist:hover { border-color: rgba(255,215,0,.65); }
  .tonight-thumb.artist-thumb {
    height: 150px;
  }
  .tonight-thumb.artist-thumb img {
    object-position: center top;
  }
  /* dark gradient overlay on artist image for readability */
  .tonight-artist-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.88) 100%);
    pointer-events: none;
  }
  /* artist name shown over image */
  .tonight-artist-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: .65rem .85rem .55rem;
    pointer-events: none;
  }
  .tonight-artist-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.65rem; letter-spacing: .05em; line-height: 1;
    color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tonight-artist-meta {
    display: flex; align-items: center; gap: .45rem; margin-top: .2rem; flex-wrap: wrap;
  }
  .tonight-artist-when {
    font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gold); text-shadow: 0 1px 6px rgba(0,0,0,.7);
  }
  .tonight-artist-type {
    font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: .15rem .5rem; border-radius: 50px;
    background: rgba(255,215,0,.2); color: var(--gold); border: 1px solid rgba(255,215,0,.5);
  }
  .tonight-artist-venue-lbl {
    font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: rgba(255,255,255,.65);
  }

  /* ── WEEKLY CALENDAR ── */
  .cal-section { margin-bottom:3rem; }
  .cal-days {
    display:flex; gap:.5rem; margin-bottom:1.4rem; flex-wrap:wrap;
  }
  .cal-day-btn {
    flex:1; min-width:80px; padding:.6rem .5rem;
    background:var(--card); border:1px solid rgba(255,255,255,0.1);
    border-radius:10px; cursor:pointer; text-align:center;
    transition:all .2s; color:var(--muted);
  }
  .cal-day-btn:hover { border-color:rgba(0,245,255,.35); color:var(--text); }
  .cal-day-btn.active {
    background:linear-gradient(135deg,rgba(0,245,255,.12),rgba(155,93,229,.12));
    border-color:var(--cyan); color:var(--cyan);
  }
  .cal-day-btn.today .cal-day-label { color:var(--magenta); }
  .cal-day-name { font-family:'Bebas Neue',sans-serif; font-size:1rem; letter-spacing:.08em; display:block; }
  .cal-day-date { font-size:.62rem; color:var(--muted); margin-top:.1rem; display:block; }
  .cal-day-count {
    display:inline-block; margin-top:.3rem;
    background:rgba(255,45,120,.18); color:var(--magenta);
    font-size:.58rem; font-weight:800; padding:.1rem .4rem;
    border-radius:50px; letter-spacing:.06em;
  }
  .cal-events-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:.9rem;
  }
  .cal-event-card {
    background:var(--card); border:1px solid rgba(255,255,255,0.1);
    border-radius:12px; overflow:hidden; cursor:pointer;
    display:flex; transition:all .22s;
  }
  .cal-event-card:hover { border-color:rgba(0,245,255,.4); transform:translateY(-3px); }
  .cal-event-img {
    width:90px; flex-shrink:0; position:relative; overflow:hidden;
  }
  .cal-event-img img { width:100%; height:100%; object-fit:cover; display:block; }
  .cal-event-body { padding:.8rem 1rem; flex:1; min-width:0; }
  .cal-event-name { font-family:'Bebas Neue',sans-serif; font-size:1.05rem; letter-spacing:.05em; margin-bottom:.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cal-event-title { font-size:.78rem; font-weight:600; color:var(--text); margin-bottom:.35rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cal-event-meta { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
  .cal-event-time { font-size:.65rem; color:var(--muted); }
  .cal-event-tag {
    font-size:.58rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    padding:.1rem .45rem; border-radius:50px;
    background:rgba(155,93,229,.12); color:var(--purple); border:1px solid rgba(155,93,229,.25);
  }
  .cal-event-cover {
    font-size:.62rem; font-weight:700; color:var(--green);
    background:rgba(0,255,133,.08); border:1px solid rgba(0,255,133,.2);
    padding:.1rem .45rem; border-radius:50px; letter-spacing:.05em;
  }
  .cal-empty {
    grid-column:1/-1; text-align:center; padding:2.5rem;
    color:var(--muted); font-size:.85rem;
  }

  /* ── EVENT BADGE on club cards ── */
  .event-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background:linear-gradient(135deg,var(--gold),#ff9500);
    color:#000; font-size:.58rem; font-weight:800;
    letter-spacing:.08em; text-transform:uppercase;
    padding:.2rem .55rem; border-radius:50px;
    box-shadow:0 0 10px rgba(255,215,0,.5);
    margin-bottom: .35rem;
    animation:badge-glow 2.5s ease-in-out infinite;
    width: fit-content;
  }
  @keyframes badge-glow {
    0%,100%{ box-shadow:0 0 8px rgba(255,215,0,.4); }
    50%{ box-shadow:0 0 18px rgba(255,215,0,.8); }
  }

  /* ── UPCOMING EVENTS in modal ── */
  .modal-events-list { display:flex; flex-direction:column; gap:.6rem; margin-top:.4rem; }
  .modal-event-row {
    display:flex; gap:.8rem; align-items:flex-start;
    background:var(--surface); border-radius:10px; padding:.7rem .9rem;
    border:1px solid var(--border);
  }
  .modal-event-day {
    flex-shrink:0; text-align:center; min-width:42px;
  }
  .modal-event-dow { font-family:'Bebas Neue',sans-serif; font-size:.95rem; letter-spacing:.06em; color:var(--cyan); display:block; }
  .modal-event-date { font-size:.6rem; color:var(--muted); display:block; }
  .modal-event-info { flex:1; min-width:0; }
  .modal-event-title { font-size:.82rem; font-weight:700; margin-bottom:.2rem; }
  .modal-event-sub { font-size:.72rem; color:var(--muted); }
  .modal-event-cover { flex-shrink:0; font-size:.68rem; font-weight:700; color:var(--green); align-self:center; }

  /* ── THIS WEEK HIGHLIGHTS ── */
  .thisweek-strip {
    display:flex; gap:.75rem; overflow-x:auto; padding-bottom:.5rem;
    scrollbar-width:thin; scroll-snap-type:x mandatory;
  }
  .thisweek-strip::-webkit-scrollbar { height:3px; }
  .thisweek-strip::-webkit-scrollbar-thumb { background:rgba(0,245,255,.2); border-radius:3px; }
  .thisweek-card {
    flex-shrink:0; width:200px; background:var(--card);
    border:1px solid rgba(255,255,255,.1); border-radius:12px;
    overflow:hidden; cursor:pointer; scroll-snap-align:start;
    transition:all .22s;
  }
  .thisweek-card:hover { border-color:rgba(0,245,255,.4); transform:translateY(-3px); }
  .thisweek-img { height:110px; overflow:hidden; position:relative; }
  .thisweek-img img { width:100%; height:100%; object-fit:cover; display:block; }
  .thisweek-day-badge {
    position:absolute; top:.5rem; left:.5rem;
    background:var(--purple); color:#fff;
    font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    padding:.18rem .5rem; border-radius:50px;
  }
  .thisweek-body { padding:.65rem .75rem .8rem; }
  .thisweek-venue { font-size:.6rem; color:var(--cyan); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
  .thisweek-event { font-family:'Bebas Neue',sans-serif; font-size:.95rem; letter-spacing:.05em; margin:.15rem 0 .3rem; line-height:1.1; }
  .thisweek-time { font-size:.62rem; color:var(--muted); }

  /* ── PHOTO GALLERY in modal ── */
  /* ── HORIZONTAL SCROLL GALLERY (venue modal) ── */
  /* Horizontal scroll gallery — venue modal */
  .venue-gallery {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: .4rem;
  }
  .venue-gallery::-webkit-scrollbar { display: none; }
  .gallery-img {
    height: 200px;
    border-radius: 10px;
    cursor: pointer;
    scroll-snap-align: start;
    flex-shrink: 0;
    object-fit: cover;
    transition: transform 0.2s;
  }
  .gallery-img:hover { transform: scale(1.05); }

  /* Fullscreen modal */
  #imageModal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.95);
    /* flex centers the image in the full viewport */
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #imageModal.open {
    display: flex;
  }
  #imageModal .modal-content {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    user-select: none;
    cursor: zoom-in;
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.15s ease;
  }
  #imageModal.zoomed .modal-content {
    cursor: grab;
    transition: none;
  }
  #imageModal.zoomed.dragging .modal-content {
    cursor: grabbing;
  }
  .zoom-hint {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    letter-spacing: 0.08em;
    pointer-events: none;
    white-space: nowrap;
  }
  #imageModal .close {
    position: absolute;
    top: 16px;
    right: 20px;
    color: white;
    font-size: 36px;
    cursor: pointer;
    line-height: 1;
    background: rgba(0,0,0,0.45);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s;
  }
  #imageModal .close:hover { background: rgba(255,255,255,0.2); }
  .modal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
    color: white;
  }
  .modal-arrow:hover { background: rgba(255,255,255,0.2); }
  .modal-arrow svg { width: 22px; height: 22px; stroke: white; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  #modalPrev { left: 16px; }
  #modalNext { right: 16px; }
  .modal-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    background: rgba(0,0,0,0.4);
    padding: 4px 14px;
    border-radius: 50px;
    pointer-events: none;
  }
  .nav-count {
    background:rgba(0,245,255,0.1);
    border:1px solid rgba(0,245,255,0.25);
    color:var(--cyan);
    font-size:.7rem; font-weight:700;
    padding:.15rem .55rem; border-radius:50px;
    letter-spacing:.06em;
  }
  @media(max-width:680px){ header nav { display:none; } }
  /* Mobile-only compact controls in header */
  .mobile-hdr-btns {
    display:none;
    align-items:center;
    gap:.45rem;
  }
  @media(max-width:680px){
    .mobile-hdr-btns { display:flex; }
  }

  /* ══════════ ADMIN PANEL ══════════ */
  .admin-overlay {
    position:fixed; inset:0; z-index:9999;
    background:rgba(8,8,26,0.97);
    backdrop-filter:blur(30px);
    display:none; flex-direction:column;
    overflow:hidden;
  }
  .admin-overlay.open { display:flex; }

  /* Lock screen */
  .admin-lock {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:1.5rem; padding:2rem;
  }
  .admin-lock-logo {
    font-family:'Bebas Neue',sans-serif; font-size:2.5rem; letter-spacing:.15em;
    background:linear-gradient(135deg,var(--cyan),var(--magenta));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  }
  .admin-lock-title {
    font-size:.75rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
    color:var(--muted); margin-top:-.8rem;
  }
  .admin-lock-icon {
    width:68px; height:68px; border-radius:50%;
    background:linear-gradient(135deg,rgba(0,245,255,.12),rgba(155,93,229,.12));
    border:1px solid rgba(0,245,255,.2);
    display:flex; align-items:center; justify-content:center;
    font-size:1.9rem;
  }
  .admin-lock input {
    width:100%; max-width:340px;
    background:var(--card); border:1px solid var(--border);
    border-radius:12px; padding:.85rem 1.2rem;
    color:var(--text); font-family:'Space Grotesk',sans-serif;
    font-size:1rem; letter-spacing:.1em;
    outline:none; transition:border-color .2s;
    text-align:center;
  }
  .admin-lock input:focus { border-color:var(--cyan); }
  .admin-lock input.shake {
    animation:lock-shake .35s ease;
    border-color:var(--magenta) !important;
  }
  @keyframes lock-shake {
    0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)}
    40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)}
  }
  .admin-lock-btn {
    width:100%; max-width:340px;
    padding:.85rem; border-radius:12px;
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    color:#07070f; font-weight:800; font-size:.85rem; letter-spacing:.1em;
    text-transform:uppercase; border:none; cursor:pointer;
    font-family:'Space Grotesk',sans-serif;
    transition:opacity .2s, transform .15s;
  }
  .admin-lock-btn:hover { opacity:.88; transform:translateY(-1px); }
  .admin-lock-err {
    font-size:.75rem; color:var(--magenta); font-weight:600;
    min-height:1.2rem; text-align:center;
  }
  .admin-lock-close {
    position:absolute; top:1.2rem; right:1.4rem;
    background:none; border:none; color:var(--muted);
    font-size:1.5rem; cursor:pointer; line-height:1;
    transition:color .2s;
  }
  .admin-lock-close:hover { color:var(--text); }

  /* Dashboard */
  .admin-dash {
    flex:1; display:none; flex-direction:column; overflow:hidden;
  }
  .admin-dash.visible { display:flex; }

  .admin-top-bar {
    height:56px; display:flex; align-items:center; justify-content:space-between;
    padding:0 1.5rem; border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .admin-top-logo {
    font-family:'Bebas Neue',sans-serif; font-size:1.4rem; letter-spacing:.12em;
    background:linear-gradient(135deg,var(--cyan),var(--magenta));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  }
  .admin-top-badge {
    font-size:.6rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
    padding:.2rem .6rem; border-radius:50px;
    background:rgba(255,45,120,.12); color:var(--magenta); border:1px solid rgba(255,45,120,.3);
    margin-left:.6rem;
  }
  .admin-logout-btn {
    background:none; border:1px solid var(--border); border-radius:8px;
    color:var(--muted); padding:.35rem .8rem; font-size:.7rem; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
    font-family:'Space Grotesk',sans-serif; transition:all .2s;
  }
  .admin-logout-btn:hover { border-color:var(--magenta); color:var(--magenta); }

  .admin-tabs {
    display:flex; gap:0; border-bottom:1px solid var(--border);
    padding:0 1.5rem; flex-shrink:0;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .admin-tabs::-webkit-scrollbar { display:none; }
  .admin-tab {
    padding:.75rem 1.2rem; font-size:.72rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
    color:var(--muted); border:none; background:none;
    border-bottom:2px solid transparent; margin-bottom:-1px;
    font-family:'Space Grotesk',sans-serif; transition:all .2s;
    flex-shrink:0; white-space:nowrap;
  }
  .admin-tab:hover { color:var(--text); }
  .admin-tab.active { color:var(--cyan); border-bottom-color:var(--cyan); }

  .admin-body {
    flex:1; overflow-y:auto; padding:1.5rem;
  }
  .admin-body::-webkit-scrollbar{width:5px}
  .admin-body::-webkit-scrollbar-thumb{background:rgba(0,245,255,.15);border-radius:3px}

  .admin-tab-pane { display:none; }
  .admin-tab-pane.active { display:block; }

  /* Section headings */
  .admin-sec-head {
    font-family:'Bebas Neue',sans-serif; font-size:1.4rem; letter-spacing:.1em;
    margin-bottom:.3rem;
  }
  .admin-sec-sub {
    font-size:.72rem; color:var(--muted); margin-bottom:1.4rem;
  }

  /* Venue selector */
  .admin-venue-select {
    width:100%; background:var(--card); border:1px solid var(--border);
    border-radius:10px; padding:.75rem 1rem; color:var(--text);
    font-family:'Space Grotesk',sans-serif; font-size:.85rem;
    outline:none; cursor:pointer; margin-bottom:1.2rem;
    transition:border-color .2s;
  }
  .admin-venue-select:focus { border-color:var(--cyan); }

  /* Drop zone */
  .admin-dropzone {
    border:2px dashed rgba(0,245,255,.2); border-radius:14px;
    padding:2.5rem 1.5rem; text-align:center;
    background:rgba(0,245,255,.02);
    cursor:pointer; transition:all .2s;
    position:relative;
  }
  .admin-dropzone:hover, .admin-dropzone.dragover {
    border-color:var(--cyan); background:rgba(0,245,255,.05);
  }
  .admin-dropzone input[type=file] {
    position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
  }
  .admin-dropzone-icon { font-size:2.5rem; margin-bottom:.75rem; }
  .admin-dropzone-label {
    font-size:.82rem; color:var(--muted); line-height:1.6;
  }
  .admin-dropzone-label strong { color:var(--cyan); }
  .admin-dropzone-hint {
    font-size:.65rem; color:var(--muted); margin-top:.5rem; opacity:.7;
  }

  /* Preview grid */
  .admin-preview-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:.75rem; margin-top:1.2rem;
  }
  .admin-preview-item {
    position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden;
    border:1px solid var(--border); background:var(--surface);
  }
  .admin-preview-item img { width:100%; height:100%; object-fit:cover; display:block; }
  .admin-preview-del {
    position:absolute; top:.3rem; right:.3rem;
    width:22px; height:22px; border-radius:50%;
    background:rgba(255,45,120,.85); color:#fff; border:none;
    font-size:.75rem; cursor:pointer; display:flex;
    align-items:center; justify-content:center; line-height:1;
    transition:background .15s;
  }
  .admin-preview-del:hover { background:var(--magenta); }
  .admin-preview-type {
    position:absolute; bottom:.3rem; left:.3rem;
    font-size:.5rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    padding:.12rem .4rem; border-radius:50px;
    background:rgba(155,93,229,.85); color:#fff;
  }
  .admin-preview-item.is-cover { border-color:var(--gold); }
  .admin-preview-item.is-cover::after {
    content:'COVER'; position:absolute; top:.3rem; left:.3rem;
    font-size:.5rem; font-weight:800; letter-spacing:.1em;
    background:var(--gold); color:#000;
    padding:.12rem .4rem; border-radius:50px;
  }

  /* Text input field */
  .admin-field {
    margin-bottom:1rem;
  }
  .admin-field label {
    display:block; font-size:.68rem; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted); margin-bottom:.45rem;
  }
  .admin-field input, .admin-field textarea {
    width:100%; background:var(--card); border:1px solid var(--border);
    border-radius:10px; padding:.75rem 1rem; color:var(--text);
    font-family:'Space Grotesk',sans-serif; font-size:.85rem;
    outline:none; transition:border-color .2s; resize:vertical;
  }
  .admin-field input:focus, .admin-field textarea:focus { border-color:var(--cyan); }
  .admin-field-hint {
    font-size:.63rem; color:var(--muted); margin-top:.35rem; line-height:1.5;
  }

  /* Action buttons */
  .admin-btn-row { display:flex; gap:.75rem; margin-top:1.2rem; flex-wrap:wrap; }
  .admin-btn {
    padding:.65rem 1.4rem; border-radius:10px;
    font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    font-family:'Space Grotesk',sans-serif; cursor:pointer; border:none;
    transition:all .2s;
  }
  .admin-btn-primary {
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    color:#07070f;
  }
  .admin-btn-primary:hover { opacity:.88; transform:translateY(-1px); }
  .admin-btn-secondary {
    background:var(--card); color:var(--muted);
    border:1px solid var(--border);
  }
  .admin-btn-secondary:hover { border-color:var(--cyan); color:var(--cyan); }
  .admin-btn-danger {
    background:rgba(255,45,120,.1); color:var(--magenta);
    border:1px solid rgba(255,45,120,.3);
  }
  .admin-btn-danger:hover { background:rgba(255,45,120,.2); }

  /* Live feed card */
  .admin-feed-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:14px; padding:1.1rem 1.3rem; margin-bottom:.85rem;
    display:flex; align-items:center; gap:1rem;
  }
  .admin-feed-thumb {
    width:70px; height:50px; border-radius:8px; overflow:hidden;
    background:var(--surface); flex-shrink:0; position:relative;
  }
  .admin-feed-thumb img { width:100%; height:100%; object-fit:cover; }
  .admin-feed-live-dot {
    position:absolute; top:.3rem; left:.3rem;
    width:8px; height:8px; border-radius:50%;
    background:var(--magenta); box-shadow:0 0 6px var(--magenta);
    animation:pdot 1s infinite;
  }
  .admin-feed-info { flex:1; min-width:0; }
  .admin-feed-venue {
    font-size:.82rem; font-weight:700; margin-bottom:.2rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .admin-feed-url {
    font-size:.65rem; color:var(--muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .admin-feed-status {
    font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    padding:.15rem .5rem; border-radius:50px; flex-shrink:0;
  }
  .admin-feed-active { background:rgba(0,255,133,.1); color:var(--green); border:1px solid rgba(0,255,133,.25); }
  .admin-feed-inactive { background:rgba(100,100,130,.1); color:var(--muted); border:1px solid rgba(100,100,130,.25); }

  /* Toast */
  .admin-toast {
    position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(80px);
    background:var(--card); border:1px solid rgba(0,245,255,.25);
    color:var(--text); padding:.7rem 1.4rem; border-radius:50px;
    font-size:.78rem; font-weight:600; z-index:10000;
    transition:transform .3s, opacity .3s; opacity:0;
    pointer-events:none; white-space:nowrap;
    box-shadow:0 8px 32px rgba(0,0,0,.4);
  }
  .admin-toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

  /* Stats row */
  .admin-stats-row {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:.75rem; margin-bottom:1.8rem;
  }
  .admin-stat-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:12px; padding:1rem 1.1rem;
  }
  .admin-stat-val {
    font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:.05em;
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    line-height:1;
  }
  .admin-stat-label {
    font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:var(--muted); margin-top:.3rem;
  }

  /* Divider */
  .admin-divider { height:1px; background:var(--border); margin:1.8rem 0; }

  /* ── HERO ── */
  .hero {
    position:relative; z-index:1;
    padding:4.5rem 2rem 2.5rem;
    text-align:center; overflow:hidden;
  }
  .hero-glow {
    position:absolute; top:-120px; left:50%; transform:translateX(-50%);
    width:700px; height:450px;
    background:radial-gradient(ellipse, rgba(139,92,246,.15) 0%, rgba(255,45,120,.08) 45%, transparent 72%);
    pointer-events:none;
  }
  .hero h1 {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(3rem,9vw,6.5rem);
    line-height:.93; letter-spacing:.05em;
    background:linear-gradient(140deg,#fff 0%,#a78bfa 45%,var(--magenta) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    margin-bottom:.8rem;
    animation:fadeUp .7s ease both;
  }
  .hero-sub {
    color:var(--muted); font-size:.85rem;
    letter-spacing:.22em; text-transform:uppercase; font-weight:300;
    margin-bottom:2.2rem;
    animation:fadeUp .7s .08s ease both;
  }
  @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

  /* ── SEARCH ROW ── */
  .search-row {
    display:flex; gap:.9rem; max-width:860px; margin:0 auto;
    flex-wrap:wrap; justify-content:center;
    animation:fadeUp .7s .15s ease both;
  }
  .s-wrap { position:relative; flex:1; min-width:220px; }
  .s-wrap svg {
    position:absolute; left:1rem; top:50%; transform:translateY(-50%);
    color:var(--muted); width:16px; height:16px; pointer-events:none;
  }
  .s-input {
    width:100%;
    background:rgba(14,14,36,.8); border:1px solid rgba(139,92,246,.12);
    border-radius:50px; padding:.8rem 1.1rem .8rem 2.6rem;
    color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:.88rem;
    outline:none; transition:border-color .25s, box-shadow .25s, background .25s;
    backdrop-filter:blur(12px);
  }
  .s-input::placeholder{ color:rgba(120,120,160,.7); }
  .s-input:focus{ border-color:var(--purple); box-shadow:0 0 0 3px rgba(139,92,246,.12), 0 0 20px rgba(139,92,246,.06); background:rgba(14,14,36,.95); }
  .s-select {
    background:var(--surface); border:1px solid var(--border);
    border-radius:50px; padding:.8rem 2.4rem .8rem 1.1rem;
    color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:.88rem;
    outline:none; cursor:pointer; appearance:none; min-width:175px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236b6b8a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right .9rem center;
    transition:border-color .2s;
  }
  .s-select:focus{ border-color:var(--magenta); }
  .s-select option{ background:var(--surface); }

  /* ── TABS (Uber-nav style: plain text, thin active underline, no pill fill) ── */
  .tabs {
    display:flex; gap:1.6rem; justify-content:flex-start;
    padding:1.2rem 2rem; flex-wrap:wrap;
    animation:fadeUp .7s .22s ease both; position:relative; z-index:1;
    border-bottom:none;
  }
  .tab {
    padding:0 0 .7rem; border-radius:0;
    font-size:.85rem; font-weight:600; letter-spacing:normal; text-transform:none;
    cursor:pointer; margin-bottom:0;
    background:none; color:rgba(255,255,255,.45); transition:all .18s;
    border:none; border-bottom:2.5px solid transparent;
  }
  .tab:hover{ color:rgba(255,255,255,.75); }
  .tab.t-all, .tab.t-clubs, .tab.t-bars, .tab.t-jazz, .tab.t-rooftop, .tab.t-venue {
    background:none; color:var(--text);
    border:none; border-bottom:2.5px solid var(--text); font-weight:800;
    box-shadow:none;
  }

  /* ── MODAL PHOTO COUNT BADGE ── */
  .m-photo-count {
    position:absolute; bottom:.7rem; right:.7rem; z-index:10;
    background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
    color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.06em;
    padding:.25rem .65rem; border-radius:50px;
    display:flex; align-items:center; gap:5px;
    cursor:pointer; transition:background .2s;
  }
  .m-photo-count:hover { background:rgba(0,0,0,.75); }

  /* ── MODAL TABS ── */
  .m-tabs {
    display:flex; border-bottom:1px solid var(--border);
    padding:0 1.4rem; background:var(--card); position:sticky; top:0; z-index:10;
  }
  .m-tab {
    padding:.7rem 1.1rem; font-size:.72rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
    color:var(--muted); border:none; background:none;
    border-bottom:2px solid transparent; margin-bottom:-1px;
    font-family:'Space Grotesk',sans-serif; transition:all .2s;
  }
  .m-tab:hover { color:var(--text); }
  .m-tab.m-tab-active { color:var(--cyan); border-bottom-color:var(--cyan); }

  /* ── MODAL QUICK STATS ROW ── */
  .m-quick-row {
    display:flex; align-items:center; gap:0;
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:.6rem 0; margin:.75rem 0 .65rem;
  }
  .m-quick-stat {
    flex:1; text-align:center; padding:.2rem .5rem;
    display:flex; flex-direction:column; gap:.15rem;
  }
  .m-quick-val {
    font-size:.9rem; font-weight:800; color:var(--text); line-height:1;
  }
  .m-quick-lbl {
    font-size:.58rem; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted);
  }
  .m-quick-divider {
    width:1px; height:32px; background:var(--border); flex-shrink:0;
  }

  /* ── MODAL ADDRESS ROW ── */
  .m-addr-row {
    display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
    margin-bottom:.5rem;
  }
  .m-addr-txt { font-size:.82rem; color:var(--muted); }
  .m-phone {
    font-size:.78rem; color:var(--cyan); text-decoration:none; font-weight:600;
  }
  .m-phone:hover { text-decoration:underline; }

  /* ── MODAL GENRE ROW ── */
  .m-genre-row {
    display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.8rem;
  }

  /* ── MODAL HOURS BLOCK ── */
  .m-hours-block {
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:.75rem 1rem; margin:.6rem 0 .8rem;
    display:flex; align-items:center; gap:.9rem;
  }
  .m-hours-status {
    display:flex; align-items:center; gap:.45rem;
    font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    flex-shrink:0;
  }
  .mhs-dot {
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
  }
  .mhs-open  { color:var(--green); }
  .mhs-open  .mhs-dot { background:var(--green); box-shadow:0 0 6px var(--green); animation:pdot 1.5s infinite; }
  .mhs-closed{ color:var(--muted); }
  .mhs-closed .mhs-dot { background:var(--muted); }
  .m-hours-text {
    font-size:.78rem; color:var(--muted); line-height:1.5; border-left:1px solid var(--border); padding-left:.9rem;
  }

  /* ── MODAL ACTION GRID ── */
  .m-action-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin:1rem 0 .5rem;
  }
  .m-action-btn {
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.75rem .9rem; border-radius:12px; font-size:.75rem;
    font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    cursor:pointer; text-decoration:none; transition:all .2s;
    font-family:'Space Grotesk',sans-serif; border:none;
  }
  .m-action-primary {
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    color:#000; grid-column:1/-1;
    box-shadow:0 4px 18px rgba(0,245,255,.25);
  }
  .m-action-primary:hover { opacity:.88; transform:translateY(-1px); }
  .m-action-uber  { background:#fff; color:#000; }
  .m-action-share { background:var(--surface); color:var(--text); border:1px solid var(--border); }
  .m-action-web   { background:rgba(155,93,229,.1); color:var(--purple); border:1px solid rgba(155,93,229,.25); }
  .m-action-uber:hover, .m-action-share:hover, .m-action-web:hover { opacity:.85; transform:translateY(-1px); }

  /* ── VIBE SCORE BARS ── */
  .m-vibe-scores {
    background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:1rem 1.2rem; margin-bottom:1rem;
    display:flex; flex-direction:column; gap:.75rem;
  }
  .m-vibe-score-row {
    display:flex; align-items:center; gap:.75rem;
  }
  .m-vibe-score-label {
    font-size:.72rem; font-weight:700; color:var(--text);
    width:70px; flex-shrink:0;
  }
  .m-vibe-bar-wrap {
    flex:1; height:6px; background:rgba(255,255,255,.08);
    border-radius:3px; overflow:hidden;
  }
  .m-vibe-bar-fill {
    height:100%; border-radius:3px;
    background:linear-gradient(90deg,var(--cyan),var(--purple));
    transition:width .6s cubic-bezier(.4,0,.2,1);
  }
  .m-vibe-score-num {
    font-size:.75rem; font-weight:800; color:var(--cyan);
    width:26px; text-align:right; flex-shrink:0;
  }

  /* ── MODAL INFO CARDS GRID ── */
  .m-info-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:.65rem; margin-bottom:1rem;
  }
  .m-info-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:.85rem 1rem;
  }
  .m-info-card-icon { font-size:1.2rem; margin-bottom:.3rem; }
  .m-info-card-label {
    font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); margin-bottom:.25rem;
  }
  .m-info-card-val { font-size:.88rem; font-weight:700; }
  .m-info-card-sub { font-size:.72rem; color:var(--muted); margin-top:.15rem; }

  /* ── POPULAR TIMES IN MODAL ── */
  .m-popular-times .popular-bar { background:transparent; padding:0; border-top:none; }

  /* ── PHOTO GRID TAB ── */
  .m-photo-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
    border-radius:8px; overflow:hidden;
  }
  .m-photo-thumb { aspect-ratio:1; overflow:hidden; cursor:pointer; }
  .m-photo-featured { grid-column:1/-1; aspect-ratio:16/7; }
  .m-photo-thumb img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .3s; filter:brightness(.8);
  }
  .m-photo-thumb:hover img { transform:scale(1.06); filter:brightness(1); }

  /* ── PLAN TAB — CHECKLIST ── */
  .m-checklist { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
  .m-check-item {
    display:flex; align-items:flex-start; gap:.75rem;
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:.8rem 1rem;
  }
  .m-check-icon { font-size:1.2rem; flex-shrink:0; margin-top:.05rem; }
  .m-check-title { font-size:.82rem; font-weight:700; margin-bottom:.15rem; }
  .m-check-sub { font-size:.72rem; color:var(--muted); line-height:1.45; }

  /* ── TRANSPORT CARDS ── */
  .m-transport-cards { display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.2rem; }
  .m-transport-card {
    display:flex; align-items:center; gap:.85rem;
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:.8rem 1rem;
    cursor:pointer; text-decoration:none; transition:all .2s;
  }
  .m-transport-card:hover { border-color:var(--border-hover); }
  .m-tc-icon {
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; border:1px solid transparent;
  }
  .m-tc-title { font-size:.82rem; font-weight:700; }
  .m-tc-sub { font-size:.7rem; color:var(--muted); margin-top:.1rem; }

  /* ── SIMILAR VENUES ── */
  .m-similar { display:flex; flex-direction:column; gap:.55rem; }
  .m-similar-card {
    display:flex; align-items:center; gap:.85rem;
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:.7rem 1rem;
    cursor:pointer; transition:all .22s;
  }
  .m-similar-card:hover { border-color:rgba(0,245,255,.35); transform:translateX(3px); }
  .m-sim-img {
    width:46px; height:46px; border-radius:10px; flex-shrink:0;
    background-size:cover; background-position:center;
    filter:brightness(.7); transition:filter .2s;
  }
  .m-similar-card:hover .m-sim-img { filter:brightness(.9); }
  .m-sim-name { font-size:.85rem; font-weight:700; margin-bottom:.15rem; }
  .m-sim-meta { font-size:.7rem; color:var(--muted); }

  /* ── MODAL MOBILE ── */
  @media(max-width:680px) {
    .m-tabs { padding:0 .9rem; }
    .m-tab  { padding:.65rem .75rem; font-size:.66rem; }
    .m-action-grid { grid-template-columns:repeat(2,1fr); }
    .m-info-grid   { grid-template-columns:repeat(2,1fr); }
    .m-photo-grid  { grid-template-columns:repeat(3,1fr); }
  }

  /* ── MODAL RIDE ROW (kept for backward compat) ── */
  .modal-ride-row { display:none; }
  .btn-share-row  { display:none; }

  /* ── SECTION ── */
  .section { padding:0 2rem 3.5rem; max-width:1380px; margin:0 auto; position:relative; z-index:1; }
  .sec-head { display:flex; align-items:baseline; gap:1rem; margin-bottom:2rem; }
  .sec-title {
    font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:.1em;
    background:linear-gradient(120deg, var(--text) 0%, #a78bfa 50%, var(--magenta) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  }
  .sec-sub { font-size:.72rem; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
  .divider {
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(139,92,246,.5),rgba(255,45,120,.3),transparent);
    margin:2.5rem 0; opacity:.3;
  }

  /* ── PODIUM (TOP 3) ── */
  .podium {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1.4rem; margin-bottom:3.5rem;
  }
  @media(max-width:760px){ .podium{ grid-template-columns:1fr; } }

  .p-card {
    position:relative; border-radius:18px; overflow:hidden;
    cursor:pointer; aspect-ratio:3/4;
    transition:transform .3s, box-shadow .3s;
    animation:fadeUp .8s ease both;
  }
  .p-card:nth-child(1){ animation-delay:.05s; }
  .p-card:nth-child(2){ animation-delay:.12s; transform:translateY(-18px); }
  .p-card:nth-child(3){ animation-delay:.19s; }
  .p-card:hover{ transform:translateY(-8px) !important; box-shadow:0 22px 55px rgba(0,0,0,.55), 0 0 30px rgba(139,92,246,.08); }

  .p-img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; transition:transform .4s;
  }
  .p-card:hover .p-img { transform:scale(1.05); }

  .p-overlay {
    position:absolute; inset:0;
    background:linear-gradient(transparent 30%, rgba(0,0,0,.75) 65%, rgba(0,0,0,.95));
  }
  .p-card:nth-child(1) .p-overlay { background:linear-gradient(transparent 25%, rgba(60,10,100,.6) 60%, rgba(20,0,40,.97)); }
  .p-card:nth-child(2) .p-overlay { background:linear-gradient(transparent 25%, rgba(100,0,30,.6) 60%, rgba(40,0,10,.97)); }
  .p-card:nth-child(3) .p-overlay { background:linear-gradient(transparent 25%, rgba(80,50,0,.6) 60%, rgba(30,20,0,.97)); }

  .p-rank {
    position:absolute; top:1rem; left:1rem;
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Bebas Neue',sans-serif; font-size:1.25rem;
    z-index:10; box-shadow:0 0 20px currentColor;
  }
  .p-card:nth-child(1) .p-rank { background:var(--purple); color:#fff; }
  .p-card:nth-child(2) .p-rank { background:var(--magenta); color:#fff; }
  .p-card:nth-child(3) .p-rank { background:var(--gold); color:#000; }

  .p-info {
    position:absolute; bottom:0; left:0; right:0;
    padding:1.4rem; z-index:10;
  }
  .p-name { font-family:'Bebas Neue',sans-serif; font-size:1.55rem; letter-spacing:.07em; margin-bottom:.3rem; }
  .stars { display:flex; align-items:center; gap:.35rem; margin-bottom:.45rem; }
  .star-i { color:var(--gold); font-size:.85rem; }
  .r-num { font-size:.82rem; font-weight:700; }
  .r-cnt { font-size:.7rem; color:var(--muted); }
  .tags { display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.75rem; }
  .tag {
    padding:.12rem .55rem; border-radius:50px;
    font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  }
  .te{ background:rgba(0,245,255,.12); color:var(--cyan); border:1px solid rgba(0,245,255,.28); }
  .th{ background:rgba(255,45,120,.12); color:var(--magenta); border:1px solid rgba(255,45,120,.28); }
  .thh{ background:rgba(155,93,229,.12); color:var(--purple); border:1px solid rgba(155,93,229,.28); }
  .tr{ background:rgba(255,165,0,.12); color:orange; border:1px solid rgba(255,165,0,.28); }
  .tt{ background:rgba(0,255,133,.12); color:var(--green); border:1px solid rgba(0,255,133,.28); }
  .tl{ background:rgba(255,100,0,.12); color:#ff7a00; border:1px solid rgba(255,100,0,.28); }
  .tj{ background:rgba(200,150,255,.12); color:#c896ff; border:1px solid rgba(200,150,255,.28); }
  .tb{ background:rgba(255,60,60,.12); color:#ff6060; border:1px solid rgba(255,60,60,.28); }
  .tp{ background:rgba(255,215,0,.12); color:var(--gold); border:1px solid rgba(255,215,0,.28); }
  .tz{ background:rgba(0,200,255,.12); color:#00c8ff; border:1px solid rgba(0,200,255,.28); }
  .tda{ background:rgba(255,180,0,.12); color:#ffb400; border:1px solid rgba(255,180,0,.28); }  /* Dancehall */
  .taf{ background:rgba(0,220,100,.12); color:#00dc64; border:1px solid rgba(0,220,100,.28); }  /* Afrobeats */
  .tw { background:rgba(100,180,255,.12); color:#64b4ff; border:1px solid rgba(100,180,255,.28); } /* World */
  .ti { background:rgba(200,200,255,.12); color:#c8c8ff; border:1px solid rgba(200,200,255,.28); } /* Indie */
  .tli{ background:rgba(255,80,160,.12);  color:#ff50a0; border:1px solid rgba(255,80,160,.28); }  /* Live Music */

  .p-btn {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.42rem .9rem; border-radius:50px;
    font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    transition:all .2s; cursor:pointer; border:none;
  }
  .pb-purple{ background:rgba(155,93,229,.12); color:var(--purple); border:1px solid rgba(155,93,229,.3); }
  .pb-purple:hover{ background:rgba(155,93,229,.22); }
  .pb-magenta{ background:rgba(255,45,120,.12); color:var(--magenta); border:1px solid rgba(255,45,120,.3); }
  .pb-magenta:hover{ background:rgba(255,45,120,.22); }
  .pb-gold{ background:rgba(255,215,0,.1); color:var(--gold); border:1px solid rgba(255,215,0,.3); }
  .pb-gold:hover{ background:rgba(255,215,0,.18); }

  /* ── CLUBS GRID (now a stack of borough rows — see .borough-* below) ── */
  .grid {
    display:block;
  }
  /* Fallback: if a .c-card ever ends up as a direct flat child of #grid
     (ungrouped), keep it from looking broken */
  .grid > .c-card { margin-bottom:1.4rem; }

  /* ── BOROUGH ROWS (Uber-Eats style horizontal scroll, grouped by neighbourhood) ── */
  .borough-section { margin-bottom:2.4rem; }
  .borough-head {
    display:flex; align-items:baseline; gap:.6rem;
    padding:0 2rem; margin-bottom:1rem;
  }
  .borough-title { font-size:1.15rem; font-weight:800; color:var(--text); }
  .borough-count { font-size:.78rem; font-weight:600; color:var(--muted); }
  .borough-scroll {
    display:flex; gap:1.2rem; overflow-x:auto;
    padding:0 2rem 1.2rem; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    mask-image:linear-gradient(90deg, transparent 0%, black 1.5%, black 97%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 1.5%, black 97%, transparent 100%);
  }
  .borough-scroll::-webkit-scrollbar { display:none; }
  .borough-scroll > .c-card {
    flex:0 0 290px; width:290px; scroll-snap-align:start;
  }

  /* ── EVENTBRITE-STYLE VENUE CARD ── */
  .c-card {
    background:#0f0f28;
    border:1px solid rgba(139,92,246,0.1);
    border-radius:22px; overflow:hidden; cursor:pointer;
    display:flex; flex-direction:column;
    transition:transform .3s cubic-bezier(.22,.68,0,1.2), border-color .28s, box-shadow .28s;
    animation:fadeUp .55s ease both;
    box-shadow:0 4px 28px rgba(0,0,0,.5), 0 0 0 0 rgba(139,92,246,0);
    position:relative;
  }
  .c-card:hover {
    transform:translateY(-5px) scale(1.01);
    border-color:rgba(139,92,246,.22);
    box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 30px rgba(139,92,246,.08);
  }

  /* ── LIVE STATUS: open venues glow green, closed are dimmed ── */
  .c-card.is-open {
    border-color: rgba(0,255,133,0.22);
    box-shadow: 0 4px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(0,255,133,0.08) inset;
  }
  .c-card.is-open:hover {
    border-color: rgba(0,255,133,0.45);
    box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 20px rgba(0,255,133,0.1);
  }
  .c-card.is-hot {
    border-color: rgba(255,45,120,0.3);
    box-shadow: 0 4px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(255,45,120,0.08) inset;
    animation: cardHotPulse 3s ease-in-out infinite;
  }
  @keyframes cardHotPulse {
    0%,100% { box-shadow: 0 4px 28px rgba(0,0,0,.5), 0 0 10px rgba(255,45,120,.06); }
    50%      { box-shadow: 0 4px 28px rgba(0,0,0,.5), 0 0 24px rgba(255,45,120,.16); }
  }
  .c-card.is-hot:hover {
    border-color: rgba(255,45,120,0.55);
    box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 30px rgba(255,45,120,0.2);
  }
  .c-card.is-closed {
    opacity: 0.52;
    filter: saturate(0.4);
  }
  .c-card.is-closed:hover {
    opacity: 0.75;
    filter: saturate(0.65);
  }

  /* Hot tonight ribbon on cards */
  .hot-tonight-ribbon {
    position: absolute;
    top: .75rem; left: .75rem;
    background: linear-gradient(135deg, var(--magenta), #ff6b00);
    color: #fff;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .22rem .75rem;
    border-radius: 50px;
    box-shadow: 0 0 16px rgba(255,45,120,.6);
    animation: pulse-badge 2s infinite;
    z-index: 4;
  }

  /* ON FIRE full-card banner — most Lit venue of the day */
  .on-fire-banner {
    position: absolute;
    inset: 0; z-index: 6;
    pointer-events: none;
    border-radius: inherit;
    border: 2px solid #ff4d6d;
    box-shadow: 0 0 0 0 rgba(255,77,109,0), inset 0 0 40px rgba(255,77,109,.15);
    animation: on-fire-pulse 1.8s ease-in-out infinite;
  }
  .on-fire-label {
    position: absolute;
    top: 0; left: 0; right: 0; z-index: 7;
    background: linear-gradient(135deg, #ff4d6d, #ff9500);
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: .9rem;
    letter-spacing: .15em;
    text-align: center;
    padding: .3rem 0;
    pointer-events: none;
  }
  @keyframes on-fire-pulse {
    0%,100% { box-shadow: 0 0 12px rgba(255,77,109,.4), inset 0 0 30px rgba(255,77,109,.1); }
    50%      { box-shadow: 0 0 28px rgba(255,77,109,.8), inset 0 0 50px rgba(255,77,109,.2); }
  }

  /* ── PHOTO HERO (full-bleed, everything overlaid) ── */
  .c-img {
    position:relative;
    aspect-ratio:16/11;
    overflow:hidden;
    background:var(--surface);
    flex-shrink:0;
  }
  .c-img img {
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 30%;
    display:block;
    transition:transform .45s cubic-bezier(.22,.68,0,1.1);
    will-change:transform;
  }
  .c-card:hover .c-img img { transform:scale(1.05); }

  /* Strong gradient so overlaid text is always readable */
  .c-img::after {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,.0) 0%,
      rgba(0,0,0,.02) 25%,
      rgba(8,8,26,.4) 50%,
      rgba(8,8,26,.78) 72%,
      rgba(8,8,26,.96) 100%
    );
    pointer-events:none; z-index:1;
  }

  /* Source label top-left ("EVENTBRITE" style) */
  .c-source-badge {
    position:absolute; top:.75rem; left:.8rem; z-index:5;
    font-size:.55rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
    color:var(--magenta);
  }

  /* Floating heart top-right */
  .c-img .card-heart-float {
    position:absolute; top:.6rem; right:.7rem; z-index:5;
    width:38px; height:38px; border-radius:50%;
    background:rgba(18,18,42,.65); backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
    font-size:.95rem; cursor:pointer;
    transition:background .2s, transform .2s;
  }
  .c-img .card-heart-float:hover { background:rgba(255,45,120,.3); transform:scale(1.12); }
  .c-img .card-heart-float.saved { background:rgba(255,45,120,.35); border-color:var(--magenta); }

  /* "View Venue" pill top-left (below source badge) — shown on hover */
  .c-view-pill {
    position:absolute; top:2.35rem; left:.75rem; z-index:5;
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:.6rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
    padding:.22rem .65rem; border-radius:50px;
    background:rgba(0,0,0,.58); backdrop-filter:blur(8px);
    color:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.2);
    opacity:0; transform:translateY(4px);
    transition:opacity .22s, transform .22s;
    pointer-events:none;
  }
  .c-card:hover .c-view-pill { opacity:1; transform:translateY(0); }

  /* Text block overlaid at bottom of image */
  .c-overlay {
    position:absolute; bottom:0; left:0; right:0; z-index:2;
    padding:.65rem .9rem .75rem;
  }
  .c-name {
    font-family:'Bebas Neue',sans-serif; font-size:1.55rem;
    letter-spacing:.06em; line-height:1.05;
    color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.7);
    margin-bottom:.25rem;
  }
  .c-meta-row {
    display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  }

  /* Stars inline in overlay */
  .c-stars-mini {
    font-size:.7rem; color:var(--gold);
    display:flex; align-items:center; gap:.2rem;
  }
  .c-stars-mini span { color:rgba(255,255,255,.7); font-size:.66rem; }

  /* Time / hours pill */
  .c-time-pill {
    font-size:.58rem; font-weight:700; letter-spacing:.06em;
    padding:.13rem .5rem; border-radius:50px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(4px);
    color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.18);
  }
  .c-time-pill.open  { background:rgba(0,255,133,.15); color:#6fffd6; border-color:rgba(0,255,133,.35); }
  .c-time-pill.late  { background:rgba(255,165,0,.15); color:#ffcf60; border-color:rgba(255,165,0,.35); }
  .c-time-pill.closed{ background:rgba(255,60,60,.1); color:#ff9090; border-color:rgba(255,60,60,.25); }

  /* Tags row */
  .c-tags-row {
    display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.3rem;
  }

  /* ── CARD BOTTOM: action buttons ── */
  .c-body {
    padding:1rem 1.1rem 1.1rem;
    background:#0f0f28;
    display:flex; flex-direction:column; gap:.65rem;
  }
  .c-addr {
    font-size:.72rem; color:rgba(255,255,255,.45);
    display:flex; align-items:center; gap:.3rem;
  }

  /* Hide legacy elements no longer needed */
  .c-foot, .stars { display:none !important; }

  /* Action buttons row — big, Eventbrite-style */
  /* ── TONIGHT SCORE ── */
  .tonight-score-wrap {
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;
    padding:.45rem .7rem;
    margin-bottom:.4rem;
  }
  .tonight-score-left {
    display:flex; align-items:center; gap:.5rem;
  }
  .tonight-score-num {
    font-family:'Bebas Neue',sans-serif;
    font-size:1.5rem; line-height:1;
    letter-spacing:.02em;
  }
  .tonight-score-num.score-high { color:#ff4d6d; }
  .tonight-score-num.score-mid  { color:#ffd700; }
  .tonight-score-num.score-low  { color:var(--muted); }
  .tonight-score-label {
    font-size:.58rem; font-weight:800; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); line-height:1.3;
  }
  .tonight-score-label span { display:block; font-size:.65rem; color:var(--text); }
  .lit-btn {
    display:flex; align-items:center; gap:.3rem;
    background:rgba(255,77,109,.1); border:1px solid rgba(255,77,109,.25);
    color:#ff4d6d; border-radius:50px;
    font-size:.65rem; font-weight:800; letter-spacing:.05em;
    padding:.28rem .7rem; cursor:pointer; transition:all .2s;
    white-space:nowrap;
  }
  .lit-btn:hover { background:rgba(255,77,109,.22); border-color:rgba(255,77,109,.5); }
  .lit-btn.voted { background:rgba(255,77,109,.25); border-color:#ff4d6d; color:#ff4d6d; }
  .lit-btn-count { font-size:.6rem; opacity:.7; }
  /* Card border glow when ON FIRE */
  .c-card.is-on-fire {
    border-color: rgba(255,77,109,.6) !important;
  }

  .c-actions-row {
    display:flex; gap:.55rem; align-items:center;
  }
  .c-btn-tickets {
    flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem;
    padding:.62rem 1rem; border-radius:50px;
    background:linear-gradient(135deg,var(--purple),#6366f1);
    color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    border:none; cursor:pointer; text-decoration:none; text-align:center;
    transition:all .25s cubic-bezier(.22,.68,0,1);
    box-shadow:0 4px 20px rgba(139,92,246,.4);
  }
  .c-btn-tickets:hover { opacity:.88; transform:translateY(-1px); }

  .c-btn-uber {
    display:flex; align-items:center; justify-content:center; gap:4px;
    padding:.55rem .85rem; border-radius:50px;
    background:#fff; color:#000;
    font-size:.65rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase;
    border:none; cursor:pointer; text-decoration:none;
    transition:opacity .18s, transform .18s; white-space:nowrap; flex-shrink:0;
  }
  .c-btn-uber:hover { opacity:.88; transform:translateY(-1px); }

  /* Hrs still referenced by open/late/closed JS — keep hidden alias */
  .hrs { display:none !important; }
  .open, .late, .closed { } /* status values still used by JS logic */

  .c-img-fallback {
    position:absolute; inset:0; z-index:0;
    display:flex; align-items:center; justify-content:center;
    font-size:3.5rem; background:var(--surface);
  }
  /* ── CARD ACTION ROW (Live Feed · TikTok · Heart) ── */
  .card-actions {
    display:flex; gap:.4rem; align-items:center;
  }
  .card-uber {
    display:none !important; /* replaced by c-btn-uber in new layout */
  }
  .card-live {
    flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
    padding:.38rem .6rem; border-radius:50px;
    font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    cursor:pointer; text-decoration:none; transition:all .28s; white-space:nowrap;
    font-family:inherit; outline:none; appearance:none;
    /* default: inactive/grey */
    background:rgba(100,100,130,.1);
    color:var(--muted);
    border:1px solid rgba(100,100,130,.22);
  }
  /* Active live feed: red glow */
  .card-live.feed-active {
    background:rgba(220,30,30,.13);
    color:#ff4444;
    border:1px solid rgba(220,30,30,.4);
    box-shadow:0 0 10px rgba(220,30,30,.25), 0 0 22px rgba(220,30,30,.12);
    animation:liveGlow 2s ease-in-out infinite;
  }
  @keyframes liveGlow {
    0%,100% { box-shadow:0 0 8px rgba(220,30,30,.22), 0 0 18px rgba(220,30,30,.1); }
    50%      { box-shadow:0 0 16px rgba(220,30,30,.5), 0 0 32px rgba(220,30,30,.22); }
  }
  .card-live.feed-active:hover {
    background:rgba(220,30,30,.22);
    border-color:rgba(220,30,30,.65);
  }
  .card-live:not(.feed-active):hover {
    background:rgba(100,100,130,.18);
    border-color:rgba(150,150,180,.35);
    color:var(--text);
  }
  .card-live-dot {
    width:6px; height:6px; border-radius:50%; flex-shrink:0;
    background:var(--muted);
    transition:background .28s, box-shadow .28s;
  }
  .card-live.feed-active .card-live-dot {
    background:#ff4444;
    box-shadow:0 0 7px #ff4444;
    animation:livePulse 1.2s ease-in-out infinite;
  }
  @keyframes livePulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.45;transform:scale(1.5);} }

  /* ── TIKTOK BUTTON + SNAP PREVIEW ── */
  .card-tiktok {
    flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
    padding:.38rem .6rem; border-radius:50px;
    font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    cursor:pointer; transition:all .25s; white-space:nowrap;
    font-family:inherit; outline:none; appearance:none; border:none;
    background:rgba(255,0,80,.10);
    color:#ff2d55;
    border:1px solid rgba(255,0,80,.28);
  }
  .card-tiktok:hover {
    background:rgba(255,0,80,.20);
    border-color:rgba(255,0,80,.55);
    transform:translateY(-1px);
  }
  .card-tiktok svg { width:11px; height:11px; flex-shrink:0; fill:#ff2d55; }

  /* Snap-style TikTok preview panel */
  .tiktok-panel {
    display:none; position:relative;
    background:#000; border-radius:0 0 14px 14px;
    overflow:hidden; margin-top:0;
  }
  .tiktok-panel.open { display:block; }

  /* Thumbnail shown before play */
  .tiktok-thumb-wrap {
    position:relative; width:100%; aspect-ratio:9/16;
    background:#111; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .tiktok-thumb-wrap img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .3s;
  }
  .tiktok-thumb-wrap:hover img { transform:scale(1.03); }

  /* Dark overlay on thumbnail */
  .tiktok-thumb-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(0,0,0,.45) 100%);
    pointer-events:none;
  }

  /* Big play button in center */
  .tiktok-play-btn {
    position:absolute;
    width:58px; height:58px; border-radius:50%;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(8px);
    border:2px solid rgba(255,255,255,.55);
    display:flex; align-items:center; justify-content:center;
    transition:transform .2s, background .2s;
  }
  .tiktok-thumb-wrap:hover .tiktok-play-btn {
    transform:scale(1.1);
    background:rgba(255,255,255,.28);
  }
  .tiktok-play-btn svg {
    width:22px; height:22px; fill:#fff;
    margin-left:3px; /* optical center for triangle */
  }

  /* TikTok logo badge top-left */
  .tiktok-logo-badge {
    position:absolute; top:.6rem; left:.6rem;
    display:flex; align-items:center; gap:.3rem;
    background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
    padding:.22rem .55rem; border-radius:50px;
    font-size:.58rem; font-weight:800; letter-spacing:.06em;
    color:#fff;
  }
  .tiktok-logo-badge svg { width:12px; height:12px; fill:#fff; }

  /* "Tap to play" label */
  .tiktok-tap-hint {
    position:absolute; bottom:.7rem; left:0; right:0;
    text-align:center;
    font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(255,255,255,.7);
  }

  /* Actual embed iframe container */
  .tiktok-embed-wrap {
    display:none; width:100%; aspect-ratio:9/16;
  }
  .tiktok-embed-wrap iframe {
    width:100%; height:100%; border:none; display:block;
  }

  /* Close bar at bottom of panel */
  .tiktok-close-bar {
    display:flex; align-items:center; justify-content:center;
    padding:.45rem; background:rgba(20,20,20,.9);
    cursor:pointer; gap:.3rem;
    font-size:.6rem; font-weight:700; letter-spacing:.08em;
    color:var(--muted); text-transform:uppercase;
    transition:color .2s;
  }
  .tiktok-close-bar:hover { color:var(--text); }
  .tiktok-close-bar svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.5; }

  /* no results */
  .no-res { text-align:center; padding:4rem 2rem; color:var(--muted); display:none; }
  .no-res h3 { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; color:var(--text); margin-bottom:.4rem; }

  /* ── MODAL ── */
  .modal-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,.88); backdrop-filter:blur(10px);
    z-index:500; display:none;
    align-items:center; justify-content:center;
    padding:1.5rem;
  }
  .modal-overlay.open{ display:flex; }
  .modal {
    background:var(--card);
    border:1px solid rgba(139,92,246,.15);
    border-radius:24px; max-width:580px; width:100%;
    max-height:88vh; overflow-y:auto;
    box-shadow:0 0 60px rgba(139,92,246,.1), 0 25px 60px rgba(0,0,0,.5);
    animation:mIn .28s ease;
  }
  @keyframes mIn{from{opacity:0;transform:scale(.96) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
  .m-head {
    height:210px; position:relative; overflow:hidden;
  }
  .m-head img { width:100%; height:100%; object-fit:cover; display:block; }
  .m-head-fallback {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:5rem;
  }
  .m-close {
    position:absolute; top:.9rem; right:.9rem;
    width:34px; height:34px; border-radius:50%;
    background:rgba(0,0,0,.55); border:1px solid var(--border);
    color:var(--text); cursor:pointer; font-size:1.1rem;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s; z-index:10;
  }
  .m-close:hover{ background:rgba(255,45,120,.25); }
  .m-body { padding:1.4rem 1.8rem 2rem; }
  .m-name { font-family:'Bebas Neue',sans-serif; font-size:2.1rem; letter-spacing:.08em; margin-bottom:.4rem; }
  .m-addr { color:var(--muted); font-size:.83rem; margin-bottom:.85rem; }
  .m-sec { font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin:.95rem 0 .4rem; }
  .m-text { font-size:.83rem; color:#aaa; line-height:1.72; }
  .m-review {
    background:var(--surface); border-radius:10px; padding:.9rem 1rem;
    font-size:.8rem; line-height:1.65; color:#999; font-style:italic;
    border-left:2px solid var(--cyan); margin-top:.4rem;
  }
  .m-actions { display:flex; gap:.75rem; margin-top:1.4rem; flex-wrap:wrap; }
  .btn-go {
    flex:1; padding:.78rem 1.3rem; border-radius:50px;
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    color:#000; font-weight:800; font-size:.8rem;
    letter-spacing:.08em; text-transform:uppercase;
    border:none; cursor:pointer; text-decoration:none;
    text-align:center; display:block;
    transition:opacity .2s, transform .2s;
  }
  .btn-go:hover{ opacity:.88; transform:translateY(-1px); }
  .btn-cls {
    padding:.78rem 1.3rem; border-radius:50px;
    background:transparent; color:var(--text);
    font-weight:600; font-size:.8rem;
    letter-spacing:.08em; text-transform:uppercase;
    border:1px solid var(--border); cursor:pointer; transition:border-color .2s;
  }
  .btn-cls:hover{ border-color:var(--magenta); color:var(--magenta); }

  footer {
    border-top:1px solid var(--border);
    padding:2rem 2rem 5rem; text-align:center;
    color:var(--muted); font-size:.75rem;
    letter-spacing:.08em; position:relative; z-index:1;
  }
  footer strong {
    background:linear-gradient(135deg,var(--cyan),var(--magenta));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  }
  /* ── THIS WEEK STRIP ── */
  .thisweek-strip {
    display:flex; gap:.75rem; overflow-x:auto; padding-bottom:.6rem;
    scrollbar-width:thin; scroll-snap-type:x mandatory;
  }
  .thisweek-strip::-webkit-scrollbar { height:3px; }
  .thisweek-strip::-webkit-scrollbar-thumb { background:rgba(0,245,255,.2); border-radius:3px; }
  .thisweek-card {
    flex-shrink:0; width:185px; background:var(--card);
    border:1px solid rgba(255,255,255,.12); border-radius:12px;
    overflow:hidden; cursor:pointer; scroll-snap-align:start;
    transition:all .22s;
  }
  .thisweek-card:hover { border-color:rgba(0,245,255,.45); transform:translateY(-3px); }
  .thisweek-img { height:105px; overflow:hidden; position:relative; }
  .thisweek-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
  .thisweek-card:hover .thisweek-img img { transform:scale(1.06); }
  .thisweek-day-badge {
    position:absolute; top:.45rem; left:.45rem;
    background:var(--purple); color:#fff;
    font-size:.56rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    padding:.18rem .48rem; border-radius:50px;
  }
  .thisweek-body { padding:.6rem .75rem .75rem; }
  .thisweek-venue { font-size:.58rem; color:var(--cyan); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
  .thisweek-event { font-family:"Bebas Neue",sans-serif; font-size:.92rem; letter-spacing:.05em; margin:.12rem 0 .28rem; line-height:1.1; }
  .thisweek-time { font-size:.6rem; color:var(--muted); }

  /* ── WEEKLY CALENDAR ── */
  .cal-days {
    display:flex; gap:.3rem; margin-bottom:1rem; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:.2rem;
  }
  .cal-days::-webkit-scrollbar { display:none; }
  .cal-day-btn {
    flex:0 0 auto; min-width:52px; padding:.38rem .28rem;
    background:var(--card); border:1px solid rgba(255,255,255,0.1);
    border-radius:8px; cursor:pointer; text-align:center;
    transition:all .2s; color:var(--muted);
  }
  .cal-day-btn:hover { border-color:rgba(0,245,255,.35); color:var(--text); }
  .cal-day-btn.active {
    background:linear-gradient(135deg,rgba(0,245,255,.1),rgba(155,93,229,.1));
    border-color:var(--cyan); color:var(--cyan);
  }
  .cal-day-name { font-family:"Bebas Neue",sans-serif; font-size:.82rem; letter-spacing:.06em; display:block; }
  .cal-day-date { font-size:.52rem; color:var(--muted); margin-top:.02rem; display:block; }
  .cal-day-dot {
    display:inline-block; width:5px; height:5px; border-radius:50%;
    background:var(--magenta); margin-top:.2rem;
    box-shadow:0 0 5px var(--magenta);
  }
  .cal-today-label { font-size:.48rem; font-weight:800; color:var(--magenta); letter-spacing:.06em; text-transform:uppercase; display:block; margin-top:.1rem; }
  .cal-events-grid {
    display:flex; flex-direction:column; gap:.55rem;
  }
  .cal-event-card {
    background:var(--card); border:1px solid rgba(139,92,246,.08);
    border-radius:10px; overflow:hidden; cursor:pointer;
    display:flex; transition:all .22s; min-height:64px;
  }
  .cal-event-card:hover { border-color:rgba(139,92,246,.25); box-shadow:0 4px 16px rgba(0,0,0,.3); }
  .cal-event-img { width:64px; flex-shrink:0; overflow:hidden; }
  .cal-event-img img { width:100%; height:100%; object-fit:cover; display:block; }
  .cal-event-body { padding:.5rem .7rem; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:.18rem; }
  .cal-event-venue { font-size:.56rem; color:var(--cyan); font-weight:700; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cal-event-title { font-family:"Bebas Neue",sans-serif; font-size:.9rem; letter-spacing:.04em; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cal-event-meta { display:flex; gap:.3rem; flex-wrap:wrap; align-items:center; }
  .cal-event-time { font-size:.58rem; color:var(--muted); }
  .cal-event-tag {
    font-size:.52rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    padding:.08rem .38rem; border-radius:50px;
    background:rgba(155,93,229,.12); color:var(--purple); border:1px solid rgba(155,93,229,.25);
  }
  .cal-empty {
    grid-column:1/-1; text-align:center; padding:2rem;
    color:var(--muted); font-size:.8rem;
  }

  /* ── EVENT BADGE on club cards ── */
  .event-badge {
    display: inline-flex;
    align-items: center;
    background:linear-gradient(135deg,#ffd700,#ff9500);
    color:#000; font-size:.56rem; font-weight:800;
    letter-spacing:.08em; text-transform:uppercase;
    padding:.18rem .52rem; border-radius:50px;
    box-shadow:0 0 10px rgba(255,215,0,.5);
    margin-bottom:.35rem;
    width: fit-content;
    animation:badge-pulse 2.5s ease-in-out infinite;
  }
  @keyframes badge-pulse {
    0%,100%{ box-shadow:0 0 8px rgba(255,215,0,.4); }
    50%{ box-shadow:0 0 18px rgba(255,215,0,.9), 0 0 30px rgba(255,150,0,.4); }
  }

  /* ── UPCOMING EVENTS in modal ── */
  .modal-events-list { display:flex; flex-direction:column; gap:.55rem; margin-top:.4rem; }
  .modal-event-row {
    display:flex; gap:.75rem; align-items:center;
    background:var(--surface); border-radius:10px; padding:.65rem .9rem;
    border:1px solid var(--border);
  }
  .modal-event-day { flex-shrink:0; text-align:center; min-width:40px; }
  .modal-event-dow { font-family:"Bebas Neue",sans-serif; font-size:.9rem; letter-spacing:.06em; color:var(--cyan); display:block; }
  .modal-event-date { font-size:.58rem; color:var(--muted); display:block; }
  .modal-event-info { flex:1; min-width:0; }
  .modal-event-title { font-size:.8rem; font-weight:700; margin-bottom:.18rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .modal-event-sub { font-size:.68rem; color:var(--muted); }


  /* ── BOTTOM NAV ── */
  .bot-nav {
    position:fixed; bottom:0; left:0; right:0; z-index:800;
    background:rgba(8,8,26,0.96); backdrop-filter:blur(32px) saturate(1.3);
    -webkit-backdrop-filter:blur(32px) saturate(1.3);
    border-top:1px solid var(--border);
    display:flex; align-items:stretch; justify-content:center;
    padding:0 0 env(safe-area-inset-bottom);
    height:calc(58px + env(safe-area-inset-bottom));
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x;
  }
  .bot-nav::-webkit-scrollbar { display:none; }
  /* Inner wrapper — always full width */
  .bot-nav-inner {
    display:flex; align-items:stretch;
    width:100%; min-width:max-content;
  }
  @media(max-width:600px) {
    .bot-nav { justify-content:flex-start; }
  }
  .bn-item {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; cursor:pointer;
    padding:0 20px; flex:1;
    background:none; border:none; text-decoration:none;
    border-bottom:2px solid transparent;
    flex-shrink:0; min-width:72px;
    transition:color .2s, border-color .2s;
    font-family:'Space Grotesk',sans-serif;
  }
  .bn-item svg {
    width:20px; height:20px; stroke:var(--muted); fill:none;
    stroke-width:1.8; transition:stroke .2s; flex-shrink:0;
  }
  .bn-item span {
    font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); transition:color .2s; font-weight:700; white-space:nowrap;
  }
  .bn-item.active svg { stroke:var(--cyan); }
  .bn-item.active span { color:var(--cyan); }
  .bn-item.active { border-bottom-color:var(--cyan); }
  .bn-item:hover svg { stroke:var(--text); }
  .bn-item:hover span { color:var(--text); }
  .bn-center-wrap { display:none; }
  .bn-center { display:none; }

  /* Push main content above bottom nav — always */
  body { padding-bottom:80px; }
  footer { margin-bottom:0; padding-bottom:1rem; }

  /* ── TRANSPORT BUTTONS in modal ── */
  .transport-row {
    display:flex; gap:.65rem; margin-top:1.4rem; flex-wrap:wrap;
  }
  .btn-uber {
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:.78rem 1rem; border-radius:50px;
    background:#fff; color:#000;
    font-weight:800; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
    border:none; cursor:pointer; text-decoration:none;
    transition:opacity .2s, transform .2s; white-space:nowrap;
  }
  .btn-uber:hover { opacity:.88; transform:translateY(-1px); }
  .btn-uber-logo { font-size:1rem; font-weight:900; color:#000; line-height:1; }
  .btn-maps {
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    padding:.78rem 1rem; border-radius:50px;
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    color:#000; font-weight:800; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
    border:none; cursor:pointer; text-decoration:none;
    transition:opacity .2s, transform .2s; white-space:nowrap;
  }
  .btn-maps:hover { opacity:.88; transform:translateY(-1px); }
  .btn-maps svg { width:14px; height:14px; stroke:#000; fill:none; stroke-width:2.5; flex-shrink:0; }
  .btn-close-sm {
    padding:.78rem 1.1rem; border-radius:50px;
    background:transparent; color:var(--text);
    font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
    border:1px solid var(--border); cursor:pointer; transition:border-color .2s;
    white-space:nowrap;
  }
  .btn-close-sm:hover { border-color:var(--magenta); color:var(--magenta); }

  /* ── CITY WHEEL TICKER ── */
  .hero-title-wrap {
    display:flex; flex-direction:column; align-items:center;
    margin-bottom:.8rem;
    animation:fadeUp .7s ease both;
  }
  .hero-line1 {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(3rem,9vw,6.5rem);
    line-height:.93; letter-spacing:.05em;
    background:linear-gradient(140deg,#fff 0%,var(--cyan) 45%,var(--magenta) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  .hero-divider-line {
    width:clamp(80px,18vw,160px); height:2px;
    background:linear-gradient(90deg,transparent,rgba(0,245,255,.4),transparent);
    margin:.35rem 0;
  }
  .hero-city-wrap {
    display:flex; align-items:center; gap:.6rem; line-height:1;
  }
  .hero-city-label {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.2rem,3.5vw,2.2rem);
    letter-spacing:.25em; text-transform:uppercase;
    color:rgba(255,255,255,0.35);
  }
  .hero-city-ticker {
    height:clamp(2.2rem,6.5vw,5rem);
    overflow:hidden;
    position:relative;
    /* Fade mask so only the centre city is fully visible */
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
  }
  .hero-city-drum {
    display:flex; flex-direction:column;
    animation:none;
    will-change:transform;
  }
  .hero-city-item {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2.2rem,7vw,5.5rem);
    line-height:1; letter-spacing:.05em;
    white-space:nowrap;
    background:linear-gradient(140deg,#fff 0%,var(--cyan) 55%,var(--magenta) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    padding:.05em 0;
    height:clamp(2.2rem,6.5vw,5rem);
    display:flex; align-items:center;
    opacity:0;
    transition:opacity .15s;
  }
  .hero-city-item.active {
    opacity:1;
  }
  @keyframes drumSpin {
    from { transform:translateY(var(--from)); }
    to   { transform:translateY(var(--to)); }
  }

  /* ── CALENDAR PAGE ── */
  .cal-page { display:none; position:fixed; inset:0; z-index:500; background:var(--bg); overflow-y:auto; padding-bottom:80px; flex-direction:column; }
  .cal-page.open { display:flex; }

  .cal-page-hdr { display:none; }
  .cal-close-btn { display:none; }

  /* ── iOS-style widget calendar — compact like phone widget ── */
  .cal-month-wrap {
    margin: .3rem .5rem .25rem;
    background: rgba(36,34,32,0.92);
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    border-radius: 16px;
    padding: .55rem .6rem .5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05);
    width: calc(100% - 1rem);
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  .cal-month-nav {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:.3rem; gap:.2rem;
  }
  .cal-month-label {
    font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
    font-size:.65rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--magenta);
    -webkit-text-fill-color: var(--magenta);
    background: none;
    flex:1;
  }
  .cal-month-arrow {
    width:16px; height:16px; border-radius:50%;
    background: rgba(255,255,255,.08); border: none;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .15s; flex-shrink:0;
  }
  .cal-month-arrow:hover { background:rgba(255,255,255,.16); }
  .cal-month-arrow svg { width:7px; height:7px; stroke:rgba(255,255,255,.75); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
  .cal-dow-row {
    display:grid; grid-template-columns:repeat(7,1fr);
    margin-bottom:.18rem;
  }
  .cal-dow-cell {
    text-align:center; font-size:.58rem; font-weight:600;
    font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    color: rgba(255,255,255,.55); padding:.04rem 0;
  }
  .cal-grid {
    display:grid; grid-template-columns:repeat(7,1fr); gap:0;
  }
  .cal-cell {
    aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    border-radius:50%; cursor:pointer; position:relative;
    transition:background .12s;
    font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    font-size:.72rem; font-weight:500; color:rgba(255,255,255,.88);
    -webkit-tap-highlight-color:transparent;
  }
  .cal-cell:hover { background:rgba(255,255,255,.08); }
  .cal-cell.other-month { color:rgba(255,255,255,.2); }
  .cal-cell.other-month:hover { background:rgba(255,255,255,.04); }
  .cal-cell.has-event::after {
    content:''; position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
    width:2px; height:2px; border-radius:50%; background:rgba(255,255,255,.5);
  }
  .cal-cell.today {
    background: var(--magenta);
    color: #fff; font-weight:700;
    box-shadow: 0 1px 6px rgba(255,45,120,.4);
  }
  .cal-cell.today:hover { background:var(--magenta); }
  .cal-cell.selected:not(.today) {
    background: rgba(255,255,255,.18);
    color:#fff; font-weight:600;
  }
  .cal-cell.today.selected { background:var(--magenta); color:#fff; }
  .cal-cell.today.has-event::after { background:rgba(255,255,255,.7); }

  /* Event list inside calendar page */
  .cal-page-body { padding:.25rem .6rem .6rem; flex:1; overflow-y:auto; }
  .cpb-count { font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; }

  /* ── Calendar search bar ── */
  .cal-search-bar {
    display:flex; align-items:center; gap:.4rem;
    margin:0 .6rem .25rem; padding:.32rem .65rem;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
    border-radius:50px; transition:border-color .2s;
    flex-shrink:0;
  }
  .cal-search-bar:focus-within { border-color:rgba(0,245,255,.4); background:rgba(0,245,255,.04); }
  .cal-search-bar input {
    flex:1; background:none; border:none; outline:none;
    color:var(--text); font-size:.72rem; font-family:inherit;
  }
  .cal-search-bar input::placeholder { color:var(--muted); }

  /* ── Modern compact event card ── */
  .cp-event-card {
    display:flex; gap:0; border-radius:9px; overflow:hidden;
    background:var(--card); border:1px solid rgba(255,255,255,.07);
    margin-bottom:.35rem; cursor:pointer;
    transition:transform .22s, border-color .22s, box-shadow .22s;
  }
  .cp-event-card:hover { transform:translateY(-1px); border-color:rgba(0,245,255,.3); box-shadow:0 4px 16px rgba(0,0,0,.45); }
  .cp-event-img {
    width:52px; flex-shrink:0; position:relative; overflow:hidden;
  }
  .cp-event-img img { width:100%; height:100%; object-fit:cover; display:block; }
  .cp-event-card:hover .cp-event-img img { filter:brightness(1.08); }
  .cp-live-dot {
    position:absolute; top:.3rem; left:.3rem;
    display:flex; align-items:center; gap:2px;
    background:rgba(0,0,0,.7); border-radius:50px; padding:1px 4px;
    backdrop-filter:blur(8px);
  }
  .cp-live-pip { width:4px; height:4px; border-radius:50%; background:var(--magenta); box-shadow:0 0 5px var(--magenta); animation:pdot 1.2s infinite; }
  .cp-live-txt { font-size:.42rem; font-weight:800; letter-spacing:.1em; color:#fff; text-transform:uppercase; }
  .cp-event-body {
    flex:1; padding:.38rem .6rem; display:flex; flex-direction:column; justify-content:center; gap:.1rem; min-width:0;
  }
  .cp-venue { font-size:.48rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cp-event-name { font-family:'Bebas Neue',sans-serif; font-size:.82rem; letter-spacing:.04em; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cp-dj { font-size:.56rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cp-meta { display:flex; gap:.22rem; flex-wrap:wrap; align-items:center; margin-top:.1rem; }
  .cp-tag {
    font-size:.48rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    padding:.1rem .42rem; border-radius:50px;
    background:rgba(155,93,229,.14); border:1px solid rgba(155,93,229,.3); color:var(--purple);
  }
  .cp-cover-free { font-size:.48rem; font-weight:800; padding:.1rem .42rem; border-radius:50px; background:rgba(0,214,143,.12); border:1px solid rgba(0,214,143,.3); color:var(--green); }
  .cp-cover-paid { font-size:.48rem; font-weight:800; padding:.1rem .42rem; border-radius:50px; background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.28); color:var(--gold); }
  .cp-time { font-size:.54rem; color:var(--muted); display:flex; align-items:center; gap:.25rem; }
  .cp-empty { text-align:center; padding:2rem 1.5rem; color:var(--muted); }
  .cp-empty-ico { font-size:2rem; margin-bottom:.6rem; }
  .cp-empty-txt { font-size:.78rem; }

  /* ── QUEUE CLIP PANEL ── */
  .live-feed-panel {
    border-radius:0 0 14px 14px;
    overflow:hidden;
  }
  .lfp-wrap {
    background:rgba(0,0,0,.38);
    border-top:1px solid var(--border);
    padding:.9rem 1rem 1rem;
  }

  /* Video player */
  .lfp-video-wrap {
    position:relative; border-radius:12px; overflow:hidden;
    background:#000; margin-bottom:.75rem;
    aspect-ratio:9/5;
  }
  .lfp-video {
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .lfp-video-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 45%);
    pointer-events:none;
  }
  .lfp-video-badge {
    position:absolute; top:.55rem; left:.55rem;
    display:flex; align-items:center; gap:5px;
    background:rgba(0,0,0,.72); backdrop-filter:blur(8px);
    border-radius:50px; padding:4px 10px;
  }
  .lfp-live-pip {
    width:7px; height:7px; border-radius:50%;
    background:var(--magenta); box-shadow:0 0 6px var(--magenta);
    animation:pdot 1.2s infinite; flex-shrink:0;
  }
  .lfp-live-txt {
    font-size:.6rem; font-weight:800; letter-spacing:.1em;
    color:#fff; text-transform:uppercase;
  }
  .lfp-timestamp {
    position:absolute; bottom:.55rem; left:.55rem;
    font-size:.6rem; color:rgba(255,255,255,.65);
    font-weight:600; letter-spacing:.04em;
  }
  .lfp-stale-overlay {
    position:absolute; inset:0;
    background:rgba(0,0,0,.72);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px;
  }
  .lfp-stale-ico { font-size:1.8rem; }
  .lfp-stale-txt {
    font-size:.72rem; color:rgba(255,255,255,.6);
    font-weight:600; letter-spacing:.05em; text-align:center;
  }

  /* No clip state */
  .lfp-empty {
    border:2px dashed rgba(255,255,255,.1); border-radius:12px;
    padding:1.4rem .8rem; text-align:center; margin-bottom:.75rem;
  }
  .lfp-empty-ico { font-size:1.6rem; margin-bottom:.4rem; }
  .lfp-empty-txt { font-size:.72rem; color:var(--muted); line-height:1.6; }

  /* Upload button */
  .lfp-upload-btn {
    width:100%; display:flex; align-items:center; justify-content:center; gap:7px;
    padding:.62rem .9rem; border-radius:10px; cursor:pointer; margin-bottom:.65rem;
    background:linear-gradient(135deg,rgba(255,45,120,.18),rgba(155,93,229,.18));
    border:1px solid rgba(255,45,120,.35); color:var(--magenta);
    font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    transition:all .2s;
  }
  .lfp-upload-btn:hover { background:linear-gradient(135deg,rgba(255,45,120,.3),rgba(155,93,229,.28)); border-color:var(--magenta); }
  .lfp-upload-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; flex-shrink:0; }
  .lfp-upload-btn.uploading { opacity:.6; pointer-events:none; }
  .lfp-file-input { display:none; }

  /* Progress bar */
  .lfp-progress-wrap {
    height:3px; background:rgba(255,255,255,.07); border-radius:2px;
    overflow:hidden; margin-bottom:.65rem; display:none;
  }
  .lfp-progress-bar {
    height:100%; border-radius:2px; width:0%;
    background:linear-gradient(90deg,var(--magenta),var(--purple));
    transition:width .15s linear;
  }

  /* Social row */
  .lfp-social-row {
    display:flex; gap:.4rem; margin-top:.5rem;
  }
  .lfp-social-btn {
    flex:1; display:flex; align-items:center; justify-content:center; gap:4px;
    padding:.42rem .4rem; border-radius:8px; text-decoration:none;
    font-size:.58rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    transition:opacity .18s;
  }
  .lfp-social-btn:hover { opacity:.8; }
  .lfp-hint {
    font-size:.58rem; color:var(--muted); text-align:center;
    margin-top:.6rem; letter-spacing:.04em; line-height:1.55;
  }

  /* ── EVENTS PAGE ── */
  .events-page { display:none; position:fixed; inset:0; z-index:500; background:var(--bg); overflow-y:auto; padding-bottom:90px; }
  .events-page.open { display:block; }
  .events-page-hdr {
    position:sticky; top:0; z-index:10; background:rgba(7,7,15,0.97);
    backdrop-filter:blur(24px); border-bottom:1px solid var(--border);
    padding:0 1.2rem; height:56px; display:flex; align-items:center; gap:1rem;
  }
  .events-page-title { font-family:"Bebas Neue",sans-serif; font-size:1.5rem; letter-spacing:.1em; }

  /* Filter chips row */
  .ev-chips { display:flex; gap:.5rem; padding:.9rem 1.2rem; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--border); }
  .ev-chips::-webkit-scrollbar { display:none; }
  .ev-chip {
    flex-shrink:0; padding:.5rem 1.1rem; border-radius:50px; font-size:.78rem;
    font-weight:700; letter-spacing:.05em; cursor:pointer; transition:all .2s;
    background:var(--surface); border:1px solid var(--border); color:var(--muted);
    font-family:inherit;
  }
  .ev-chip.active { background:var(--magenta); border-color:var(--magenta); color:#fff; }

  /* Event card — compact horizontal */
  .ev-card {
    margin:.55rem 1rem 0; border-radius:16px; overflow:hidden;
    background:var(--card); border:1px solid rgba(255,255,255,.08);
    cursor:pointer; transition:border-color .2s, transform .2s;
    display:flex; gap:0;
  }
  .ev-card:hover { border-color:rgba(255,45,120,.3); transform:translateY(-2px); }
  .ev-card-img-wrap { width:100px; flex-shrink:0; position:relative; overflow:hidden; }
  .ev-card-img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.7); }
  /* iOS-style date tile in top-left corner of flyer thumb */
  .ev-card-date-tile {
    position:absolute; top:6px; left:6px;
    background:rgba(255,255,255,.96); color:#000;
    border-radius:8px; padding:2px 0 3px;
    width:38px; text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.4);
    font-family:-apple-system,'SF Pro Display','Helvetica Neue',sans-serif;
    z-index:2; pointer-events:none;
  }
  .ev-card-date-tile-month {
    display:block;
    font-size:.52rem; font-weight:700; letter-spacing:.08em;
    color:#d63030; text-transform:uppercase; line-height:1;
    margin-bottom:1px;
  }
  .ev-card-date-tile-day {
    display:block;
    font-size:1.05rem; font-weight:800; line-height:1;
    color:#000;
  }
  .ev-card-body { padding:.8rem .95rem; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
  .ev-card-source {
    display:flex; align-items:center; gap:.4rem;
    font-size:.58rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--magenta); margin-bottom:.3rem;
  }
  .ev-card-live-pip { width:6px; height:6px; border-radius:50%; background:var(--magenta); box-shadow:0 0 5px var(--magenta); animation:pdot 1.2s infinite; flex-shrink:0; }
  .ev-card-title { font-family:"Bebas Neue",sans-serif; font-size:1.1rem; letter-spacing:.04em; line-height:1.05; margin-bottom:.4rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ev-card-meta { display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:.55rem; }
  .ev-meta-pill {
    display:flex; align-items:center; gap:4px; padding:.2rem .55rem;
    border-radius:50px; font-size:.6rem; font-weight:600;
    background:var(--surface); border:1px solid var(--border); color:var(--muted2);
  }
  .ev-meta-pill svg { width:10px; height:10px; flex-shrink:0; }
  .ev-meta-price { background:rgba(0,214,143,.12); border-color:rgba(0,214,143,.3); color:var(--green); font-weight:800; }
  .ev-meta-price.paid { background:rgba(255,215,0,.1); border-color:rgba(255,215,0,.28); color:var(--gold); }
  .ev-card-actions { display:flex; gap:.4rem; align-items:center; }
  .ev-btn-tickets {
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    padding:.45rem 1rem; border-radius:10px;
    background:var(--magenta); color:#fff;
    font-weight:800; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
    border:none; cursor:pointer; text-decoration:none; transition:opacity .2s; white-space:nowrap;
    align-self:center;
  }
  .ev-btn-tickets:hover { opacity:.88; }
  .ev-ride-col { display:flex; flex-direction:column; gap:.3rem; }
  .ev-btn-uber, .ev-btn-lyft {
    display:flex; align-items:center; justify-content:center; gap:4px;
    padding:.3rem .55rem; border-radius:8px;
    font-weight:800; font-size:.6rem; letter-spacing:.03em;
    border:none; cursor:pointer; text-decoration:none; transition:opacity .2s; white-space:nowrap;
  }
  .ev-btn-uber { background:#fff; color:#000; }
  .ev-btn-lyft { background:#FF00BF; color:#fff; }
  .ev-btn-uber:hover, .ev-btn-lyft:hover { opacity:.85; }

  /* ── PROFILE / ME PAGE ── */
  .profile-page { display:none; position:fixed; inset:0; z-index:500; background:#000; overflow-y:auto; padding-bottom:90px; }
  .profile-page.open { display:block; }
  .profile-page-hdr {
    position:sticky; top:0; z-index:10; background:rgba(8,8,26,.97);
    backdrop-filter:blur(24px); border-bottom:1px solid var(--border);
    padding:0 1.2rem; height:56px; display:flex; align-items:center;
  }
  .profile-page-title { font-family:"Bebas Neue",sans-serif; font-size:1.4rem; letter-spacing:.1em; }
  .profile-avatar-wrap { text-align:center; padding:2rem 0 1.5rem; }
  .profile-avatar-circle {
    width:88px; height:88px; border-radius:50%;
    background:linear-gradient(135deg,#c850c0,#4158d0);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 1rem; font-size:2.2rem;
    box-shadow:0 0 30px rgba(200,80,192,.4);
  }
  .profile-username { font-family:"Bebas Neue",sans-serif; font-size:2rem; letter-spacing:.1em; }
  .profile-location { font-size:.85rem; color:var(--muted2); margin-top:.25rem; }
  .profile-stats-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.6rem; padding:0 1.2rem 1.5rem; }
  .profile-stat-box {
    background:var(--card); border:1px solid var(--border);
    border-radius:16px; padding:1.1rem .8rem; text-align:center;
  }
  .profile-stat-num { font-family:"Bebas Neue",sans-serif; font-size:2rem; letter-spacing:.04em; color:var(--cyan); }
  .profile-stat-lbl { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted2); margin-top:.15rem; }
  .profile-section-title {
    font-family:"Bebas Neue",sans-serif; font-size:1.1rem; letter-spacing:.1em;
    padding:0 1.2rem; margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem;
  }
  .profile-saved-list { padding:0 1.2rem; }
  .profile-saved-item {
    display:flex; align-items:center; gap:.9rem; padding:.85rem; margin-bottom:.6rem;
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    cursor:pointer; transition:border-color .2s;
  }
  .profile-saved-item:hover { border-color:var(--border2); }
  .profile-saved-img { width:50px; height:50px; border-radius:10px; background-size:cover; background-position:center; filter:brightness(.7); flex-shrink:0; }
  .profile-saved-info { flex:1; min-width:0; }
  .profile-saved-name { font-size:.95rem; font-weight:600; margin-bottom:.2rem; }
  .profile-saved-meta { font-size:.72rem; color:var(--muted2); }
  .profile-saved-heart { color:var(--red,#ff4455); font-size:1.1rem; flex-shrink:0; }
  .profile-empty { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:2.5rem 1rem; text-align:center; margin:0 1.2rem; }
  .profile-empty-hint { font-size:.82rem; color:var(--muted2); margin-top:.5rem; line-height:1.7; }

  /* Follow us social icons */
  .profile-follow { padding:1.5rem 1.2rem; }
  .profile-follow-label { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted2); margin-bottom:.75rem; font-weight:600; }
  .profile-social-icons { display:flex; gap:.65rem; }
  .psocial-icon {
    width:46px; height:46px; border-radius:12px; display:flex; align-items:center;
    justify-content:center; cursor:pointer; text-decoration:none; transition:transform .18s, opacity .18s;
    flex-shrink:0;
  }
  .psocial-icon:hover { transform:scale(1.08); opacity:.9; }
  .psocial-icon svg { width:22px; height:22px; }
  .psocial-ig { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
  .psocial-fb { background:#1877f2; }
  .psocial-tt { background:#000; border:1px solid rgba(255,255,255,.15); }
  .psocial-dc { background:#5865f2; }

  /* ── RIDE + SHARE buttons in modal ── */
  .modal-ride-row { display:flex; gap:.5rem; margin-bottom:.5rem; }
  .btn-ride {
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:.7rem .8rem; border-radius:12px;
    font-weight:800; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase;
    border:none; cursor:pointer; text-decoration:none; transition:opacity .18s; white-space:nowrap;
  }
  .btn-ride:hover { opacity:.88; }
  .btn-ride-uber { background:#fff; color:#000; }
  .btn-ride-lyft { background:#FF00BF; color:#fff; }
  .btn-share-row { display:flex; gap:.5rem; }
  .btn-share {
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:.7rem .8rem; border-radius:12px;
    background:rgba(0,245,255,.08); border:1px solid rgba(0,245,255,.22); color:var(--cyan);
    font-weight:700; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase;
    cursor:pointer; transition:all .18s; white-space:nowrap; font-family:inherit;
  }
  .btn-share:hover { background:rgba(0,245,255,.15); }
  .btn-share svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; flex-shrink:0; }
  .btn-maps2 {
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:.7rem .8rem; border-radius:12px;
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    color:#000; font-weight:800; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase;
    border:none; cursor:pointer; text-decoration:none; transition:opacity .18s; white-space:nowrap;
  }
  .btn-maps2:hover { opacity:.88; }
  .btn-maps2 svg { width:13px; height:13px; stroke:#000; fill:none; stroke-width:2.5; flex-shrink:0; }

  /* ── LIGHT MODE ── */
  body.light {
    --bg:#F4F4FA; --surface:#FFFFFF; --card:#FFFFFF;
    --text:#0A0A0F; --muted:#8E8EA0; --border:rgba(0,0,0,0.06);
    --border-hover:rgba(139,92,246,0.3);
    --glow-purple:rgba(139,92,246,0.06);
    --glow-magenta:rgba(255,45,120,0.04);
  }
  body.light::before { background-image:linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px); }
  body.light header { background:rgba(242,242,247,0.95); }
  body.light .c-card { background:#fff; border-color:rgba(0,0,0,.06); }
  body.light .modal { background:#fff; }
  body.light .c-name,.body.light .m-name { color:#0A0A0F; }

  /* ── THEME TOGGLE ── */
  .theme-btn {
    width:34px; height:34px; border-radius:50%;
    background:var(--surface); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .2s; flex-shrink:0;
    font-size:16px; line-height:1;
  }
  .theme-btn:hover { border-color:var(--cyan); }

  /* ── WAIT TIME ── */
  .wait-bar {
    display:flex; gap:.35rem; align-items:center;
    padding:.45rem .9rem; border-bottom:1px solid var(--border);
  }
  .wait-label { font-size:.6rem; color:var(--muted); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-right:.1rem; }
  .wait-btn {
    font-size:.6rem; font-weight:700; padding:.22rem .6rem; border-radius:50px;
    cursor:pointer; border:1px solid var(--border); background:var(--surface);
    color:var(--muted); transition:all .18s; font-family:inherit;
  }
  .wait-btn:hover { border-color:var(--border-hover); color:var(--text); }
  .wait-btn.w-active-none { background:rgba(0,255,133,.12); border-color:rgba(0,255,133,.3); color:var(--green); }
  .wait-btn.w-active-short { background:rgba(255,215,0,.1); border-color:rgba(255,215,0,.28); color:var(--gold); }
  .wait-btn.w-active-medium { background:rgba(255,165,0,.12); border-color:rgba(255,165,0,.3); color:orange; }
  .wait-btn.w-active-long { background:rgba(255,45,120,.12); border-color:rgba(255,45,120,.3); color:var(--magenta); }
  .wait-result {
    margin-left:auto; font-size:.6rem; font-weight:800; padding:.22rem .65rem;
    border-radius:50px; letter-spacing:.06em; text-transform:uppercase;
  }

  /* ── FEATURED VENUE ── */
  .featured-card {
    margin:0 1.5rem 2rem; border-radius:20px; overflow:hidden;
    position:relative; cursor:pointer;
    background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(255,45,120,.1));
    border:1px solid rgba(139,92,246,.3);
    transition:transform .25s, box-shadow .25s;
    animation:fadeUp .5s ease both;
  }
  .featured-card:hover { transform:translateY(-3px); box-shadow:0 16px 50px rgba(255,45,120,.2); }
  .featured-img { width:100%; height:220px; object-fit:cover; display:block; filter:brightness(.55) saturate(.8); }
  .featured-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.15) 60%,transparent 100%); }
  .featured-badge {
    position:absolute; top:14px; left:14px;
    background:var(--magenta); color:#fff;
    font-size:.6rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
    padding:.3rem .75rem; border-radius:50px;
    box-shadow:0 0 14px rgba(255,45,120,.6);
    animation:pulse-badge 2s infinite;
  }
  @keyframes pulse-badge{0%,100%{box-shadow:0 0 10px rgba(255,45,120,.5)}50%{box-shadow:0 0 22px rgba(255,45,120,.9)}}
  .featured-body { position:absolute; bottom:0; left:0; right:0; padding:1.2rem 1.4rem 1.5rem; }
  .featured-label { font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--magenta); font-weight:700; margin-bottom:.3rem; }
  .featured-name { font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:.06em; line-height:1; margin-bottom:.4rem; }
  .featured-pills { display:flex; gap:.4rem; flex-wrap:wrap; }

  /* ── MAP PAGE ── */
  .map-page-overlay{display:none;position:fixed;inset:0;z-index:500;background:#07070f;flex-direction:column;overflow:hidden;}
  .map-page-overlay.open{display:flex;}
  .my-dot{width:14px;height:14px;background:var(--cyan);border-radius:50%;border:3px solid rgba(7,7,15,0.9);box-shadow:0 0 0 5px rgba(0,229,204,0.22);animation:myLoc 2s infinite;}
  @keyframes myLoc{0%,100%{box-shadow:0 0 0 5px rgba(0,229,204,0.22);}50%{box-shadow:0 0 0 12px rgba(0,229,204,0);}}
  .map-locate-btn{width:36px;height:36px;background:linear-gradient(135deg,var(--cyan),#00BFFF);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
  .map-hdr{height:54px;display:flex;align-items:center;gap:10px;padding:0 16px;background:rgba(7,7,15,0.97);flex-shrink:0;border-bottom:1px solid var(--border);}
  .map-hdr-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:0.06em;flex:1;}
  .map-filter-btns{display:flex;gap:6px;}
  .mfb{font-size:10px;font-weight:600;border-radius:100px;padding:6px 12px;border:1px solid var(--border);color:var(--muted);cursor:pointer;background:var(--surface);transition:all .2s;white-space:nowrap;}
  .mfb.on{border-color:var(--cyan);color:var(--cyan);background:rgba(0,229,204,0.08);}
  .map-container{flex:1;position:relative;min-height:0;}
  #leafletMapOverlay{position:absolute;inset:0;width:100%;height:100%;}
  .leaflet-tile-pane{filter:brightness(0.88) saturate(0.7) hue-rotate(180deg) invert(1);}
  .leaflet-container{background:var(--bg);}
  .cm{background:var(--card);border:2px solid rgba(0,229,204,0.3);border-radius:13px;padding:7px 10px;min-width:80px;text-align:center;box-shadow:0 4px 18px rgba(0,0,0,0.8);cursor:pointer;transition:all .2s;font-family:'Space Grotesk',sans-serif;}
  .cm:hover,.cm.on{border-color:var(--cyan);box-shadow:0 0 16px rgba(0,229,204,0.3);}
  .cm.restaurant{border-color:rgba(255,107,43,0.4);}
  .cm.restaurant:hover,.cm.restaurant.on{border-color:#ff6b2b;}
  .cm-name{font-size:8.5px;font-weight:700;color:var(--text);}
  .cm-dist{font-size:7.5px;color:var(--muted);}
  .map-card{position:absolute;bottom:0;left:0;right:0;z-index:1000;background:var(--card);border-radius:20px 20px 0 0;padding:16px 16px 20px;transform:translateY(100%);transition:transform .36s cubic-bezier(0.22,0.8,0.22,1);box-shadow:0 -4px 30px rgba(0,0,0,0.7);border-top:1px solid var(--border);pointer-events:none;}
  .map-card.open{transform:translateY(0);pointer-events:all;}
  .mc-top{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;}
  .mc-photo{width:52px;height:52px;border-radius:11px;background-size:cover;background-position:center;flex-shrink:0;}
  .mc-info{flex:1;}
  .mc-name{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:0.04em;line-height:1;margin-bottom:2px;}
  .mc-area{font-size:11px;color:var(--muted);}
  .mc-going{font-size:12px;font-weight:700;color:var(--green);}
  .mc-type{font-size:9px;font-weight:700;color:#ff6b2b;letter-spacing:0.15em;margin-bottom:2px;}
  .mc-close{width:28px;height:28px;background:var(--surface);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
  .mc-close svg{width:13px;height:13px;stroke:var(--muted);}
  .mc-ride-row{display:flex;gap:8px;margin-bottom:8px;}
  .mc-uber-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border-radius:11px;padding:11px;text-decoration:none;transition:all .2s;}
  .mc-uber-wm{font-size:15px;font-weight:900;color:#000;}
  .mc-lyft-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:#FF00BF;border-radius:11px;padding:11px;text-decoration:none;transition:all .2s;}
  .mc-lyft-wm{font-size:15px;font-weight:900;color:#fff;font-style:italic;}
  .mc-btn-lbl{font-size:10px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;}
  .mc-uber-btn .mc-btn-lbl{color:#555;}
  .mc-dir-row{display:flex;gap:7px;}
  .mc-dir-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:11px;padding:10px 8px;text-decoration:none;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:all .2s;}
  .mc-dir-btn span{font-size:10px;font-weight:700;color:var(--text);}
  .mc-waze-btn{border-color:rgba(51,204,255,0.3);}
  .mc-info-btn{border-color:rgba(155,93,229,0.3);background:rgba(155,93,229,0.08);}
  .map-strip{height:70px;background:var(--card);border-top:1px solid var(--border);overflow-x:auto;display:flex;gap:8px;padding:8px 14px;scrollbar-width:none;flex-shrink:0;}
  .map-strip::-webkit-scrollbar{display:none;}
  .msc{flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:8px 12px;cursor:pointer;transition:all .2s;min-width:100px;}
  .msc.on{border-color:var(--cyan);background:rgba(0,229,204,0.07);}
  .msc.rest-strip{border-color:rgba(255,107,43,0.2);}
  .msc.rest-strip.on{border-color:#ff6b2b;}
  .msc-dot{width:6px;height:6px;border-radius:50%;margin-bottom:3px;}
  .msc-name{font-size:10px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px;}
  .msc-area{font-size:9px;color:var(--muted);}

  /* ── PUSH NOTIFICATION PROMPT ── */
  .notif-prompt {
    position:fixed; bottom:90px; left:1rem; right:1rem; z-index:600;
    background:linear-gradient(135deg,rgba(155,93,229,.18),rgba(0,229,204,.12));
    border:1px solid rgba(155,93,229,.4); border-radius:18px;
    padding:1rem 1.1rem; display:none;
    animation:slideUp .4s ease;
    backdrop-filter:blur(20px);
  }
  .notif-prompt.show { display:flex; gap:.9rem; align-items:center; }
  @keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
  .notif-prompt-ico { font-size:1.8rem; flex-shrink:0; }
  .notif-prompt-body { flex:1; }
  .notif-prompt-title { font-size:.82rem; font-weight:700; margin-bottom:.2rem; }
  .notif-prompt-sub { font-size:.7rem; color:var(--muted); line-height:1.5; }
  .notif-prompt-btns { display:flex; gap:.4rem; margin-top:.6rem; }
  .notif-yes {
    padding:.38rem .9rem; border-radius:50px; font-size:.68rem; font-weight:800;
    background:var(--purple); color:#fff; border:none; cursor:pointer;
    letter-spacing:.06em; text-transform:uppercase; font-family:inherit;
  }
  .notif-no {
    padding:.38rem .9rem; border-radius:50px; font-size:.68rem; font-weight:600;
    background:transparent; color:var(--muted); border:1px solid var(--border);
    cursor:pointer; font-family:inherit;
  }

  /* ── ARTIST BADGE on venue cards ── */
  .artist-badge {
    position:absolute; bottom:.6rem; left:.6rem; right:2.6rem;
    display:flex; align-items:center; gap:.5rem;
    z-index:6; pointer-events:none;
  }
  .artist-avatar {
    width:30px; height:30px; border-radius:50%;
    overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:.65rem; font-weight:800; letter-spacing:.02em;
  }
  .artist-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
  .artist-info { flex:1; min-width:0; }
  .artist-name-lbl {
    font-size:.67rem; font-weight:800; letter-spacing:.04em;
    line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .artist-when-lbl {
    font-size:.54rem; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:.08rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .artist-type-pill {
    flex-shrink:0; font-size:.54rem; font-weight:800; letter-spacing:.08em;
    text-transform:uppercase; padding:.16rem .48rem; border-radius:50px;
    white-space:nowrap;
  }
  /* Tonight = gold */
  .artist-badge.ab-tonight .artist-avatar { border:1.5px solid rgba(255,215,0,.65); background:rgba(255,215,0,.18); color:#ffd700; }
  .artist-badge.ab-tonight .artist-name-lbl { color:#ffd700; }
  .artist-badge.ab-tonight .artist-type-pill { background:rgba(255,215,0,.15); border:1px solid rgba(255,215,0,.45); color:#ffd700; }
  /* Upcoming = purple */
  .artist-badge.ab-upcoming .artist-avatar { border:1.5px solid rgba(155,93,229,.7); background:rgba(155,93,229,.18); color:#c8a0ff; }
  .artist-badge.ab-upcoming .artist-name-lbl { color:#c8a0ff; }
  .artist-badge.ab-upcoming .artist-type-pill { background:rgba(155,93,229,.15); border:1px solid rgba(155,93,229,.45); color:#c8a0ff; }



  .card-heart {
    display:flex; align-items:center; justify-content:center; gap:4px;
    padding:.38rem .7rem; border-radius:50px;
    font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    cursor:pointer; transition:all .22s; white-space:nowrap;
    font-family:inherit; outline:none; appearance:none;
    background:rgba(255,45,120,.08);
    color:var(--muted);
    border:1px solid rgba(255,45,120,.2);
    flex-shrink:0;
  }
  .card-heart:hover {
    background:rgba(255,45,120,.16);
    border-color:rgba(255,45,120,.45);
    color:var(--magenta);
    transform:translateY(-1px);
  }
  .card-heart.saved {
    background:rgba(255,45,120,.18);
    border-color:var(--magenta);
    color:var(--magenta);
  }
  .card-heart-icon { font-size:.78rem; line-height:1; transition:transform .18s; }
  .card-heart:active .card-heart-icon,
  .card-heart.heart-pop .card-heart-icon { transform:scale(1.5); }
  @keyframes heartPop {
    0%   { transform:scale(1); }
    40%  { transform:scale(1.55); }
    70%  { transform:scale(.9); }
    100% { transform:scale(1); }
  }
  .card-heart.heart-pop .card-heart-icon { animation:heartPop .38s cubic-bezier(.36,.07,.19,.97); }
  .card-heart-count { font-size:.6rem; font-weight:800; min-width:8px; }


  /* ── ADMIN VENUE PHOTO UPLOAD ── */
  .m-cam-btn {
    position:absolute; bottom:.7rem; right:.7rem; z-index:20;
    width:38px; height:38px; border-radius:50%;
    background:rgba(0,0,0,.72); backdrop-filter:blur(10px);
    border:1.5px solid rgba(255,255,255,.3);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .2s;
  }
  .m-cam-btn:hover { background:rgba(0,245,255,.25); border-color:var(--cyan); }
  .m-cam-btn svg { width:16px; height:16px; stroke:#fff; }
  .m-cam-btn.uploading { animation:camPulse 1s ease-in-out infinite; border-color:var(--cyan); }
  @keyframes camPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
  .m-cam-done {
    position:absolute; bottom:.7rem; right:.7rem; z-index:20;
    background:rgba(0,255,133,.2); border:1.5px solid var(--green);
    border-radius:50%; width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    font-size:1rem;
  }


  .reaction-particle {
    position:fixed; pointer-events:none; z-index:9999;
    font-size:1.4rem; line-height:1;
    will-change:transform, opacity;
    animation:reactionFly var(--dur, .9s) var(--ease, cubic-bezier(.2,.8,.4,1)) forwards;
    transform-origin:center;
  }
  @keyframes reactionFly {
    0%   { transform:translate(0,0) scale(0.3) rotate(var(--rot0)); opacity:1; }
    60%  { opacity:1; }
    100% { transform:translate(var(--tx), var(--ty)) scale(var(--sf,1)) rotate(var(--rot1)); opacity:0; }
  }

  /* ── FR/EN TOGGLE ── */
  .lang-btn {
    padding:.26rem .62rem; border-radius:7px;
    font-size:.7rem; font-weight:800; letter-spacing:.12em;
    cursor:pointer; border:1.5px solid var(--border);
    background:transparent; color:var(--muted);
    transition:all .2s; font-family:inherit;
  }
  .lang-btn:hover { border-color:var(--cyan); color:var(--cyan); }
  .lang-btn.fr-on  { border-color:var(--cyan); color:var(--cyan); background:rgba(0,245,255,.08); }

  /* ── iOS-STYLE SHARE SHEET ── */
  .share-sheet-bg {
    position:fixed; inset:0; z-index:3000;
    background:rgba(0,0,0,.45); backdrop-filter:blur(12px);
    display:flex; flex-direction:column; justify-content:flex-end;
    animation:bgFadeIn .22s ease;
  }
  @keyframes bgFadeIn { from{opacity:0} to{opacity:1} }
  .share-sheet {
    background:rgba(18,18,42,0.97);
    border-radius:20px 20px 0 0;
    padding:0 0 max(24px, env(safe-area-inset-bottom));
    animation:sheetUp .3s cubic-bezier(.32,1.2,.4,1) both;
    max-width:480px; width:100%; margin:0 auto;
  }
  @keyframes sheetUp { from{transform:translateY(100%);opacity:.4} to{transform:translateY(0);opacity:1} }
  .share-sheet-handle {
    width:36px; height:4px; background:rgba(255,255,255,.2);
    border-radius:2px; margin:10px auto 0;
  }
  .share-sheet-venue {
    display:flex; align-items:center; gap:11px;
    padding:14px 18px 12px; border-bottom:1px solid rgba(255,255,255,.07);
  }
  .share-sheet-venue img {
    width:44px; height:44px; border-radius:10px;
    object-fit:cover; flex-shrink:0; filter:brightness(.75);
  }
  .share-sheet-venue-name { font-weight:700; font-size:.92rem; margin-bottom:2px; }
  .share-sheet-venue-addr { font-size:.72rem; color:rgba(255,255,255,.45); }
  .share-sheet-options { padding:6px 12px 0; }
  .share-sheet-row {
    display:flex; align-items:center; gap:14px;
    padding:13px 6px; border-bottom:1px solid rgba(255,255,255,.06);
    cursor:pointer; border-radius:0; transition:background .15s;
  }
  .share-sheet-row:last-child { border-bottom:none; }
  .share-sheet-row:active { background:rgba(255,255,255,.06); }
  .share-sheet-icon {
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:17px;
  }
  .share-sheet-row-label { font-size:.9rem; font-weight:500; color:#f0f0ff; }
  .share-sheet-divider { height:8px; background:rgba(0,0,0,.3); margin:0; }
  .share-sheet-cancel {
    margin:0 12px 0; padding:15px;
    text-align:center; font-size:.95rem; font-weight:600;
    color:rgba(255,255,255,.55); cursor:pointer;
    border-radius:14px; background:rgba(255,255,255,.06);
    transition:background .15s;
  }
  .share-sheet-cancel:active { background:rgba(255,255,255,.1); }

  /* ── CARD FOOT with social icon ── */
  .c-foot {
    display:flex; align-items:center; gap:.5rem;
    flex-wrap:wrap;
  }
  .c-foot-ig {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:6px;
    background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    flex-shrink:0; text-decoration:none; transition:opacity .18s;
  }
  .c-foot-ig:hover { opacity:.8; }
  .c-foot-ig svg { width:11px; height:11px; stroke:#fff; fill:none; stroke-width:2; }

  /* ── POPULAR TIMES / WAIT BAR ── */
  .popular-bar {
    padding:.6rem .9rem .55rem;
    border-top:1px solid var(--border);
  }
  .popular-top {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:.5rem;
  }
  .popular-status {
    font-size:.65rem; font-weight:700; letter-spacing:.04em;
  }
  .popular-status.ps-dead    { color:var(--muted); }
  .popular-status.ps-quiet   { color:var(--cyan); }
  .popular-status.ps-moderate{ color:var(--gold); }
  .popular-status.ps-busy    { color:orange; }
  .popular-status.ps-packed  { color:var(--magenta); }
  .popular-live-badge {
    font-size:.55rem; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; padding:.15rem .5rem; border-radius:50px;
    background:rgba(255,45,120,.15); border:1px solid rgba(255,45,120,.3);
    color:var(--magenta); display:flex; align-items:center; gap:4px;
  }
  .popular-live-dot {
    width:5px; height:5px; border-radius:50%;
    background:var(--magenta); animation:pdot 1.2s infinite;
  }
  /* Bar chart */
  .popular-chart {
    display:flex; align-items:flex-end; gap:2px; height:28px;
    margin-bottom:.45rem;
  }
  .popular-col {
    flex:1; border-radius:2px 2px 0 0; min-height:3px;
    transition:height .3s ease, background .3s;
    position:relative; cursor:default;
  }
  .popular-col.current {
    border-radius:2px 2px 0 0;
    outline:2px solid rgba(255,255,255,.6);
    outline-offset:1px;
  }
  /* Report row */
  .popular-report {
    display:flex; align-items:center; gap:.3rem; flex-wrap:wrap;
  }
  .popular-report-lbl {
    font-size:.58rem; color:var(--muted); letter-spacing:.04em; flex-shrink:0;
  }
  .pr-btn {
    font-size:.58rem; font-weight:700; padding:.15rem .48rem; border-radius:50px;
    cursor:pointer; border:1px solid var(--border); background:transparent;
    color:var(--muted); transition:all .15s; font-family:inherit; flex-shrink:0;
  }
  .pr-btn:hover { border-color:rgba(0,245,255,.3); color:var(--cyan); }
  .pr-btn.pr-active-quiet    { background:rgba(0,245,255,.1);   border-color:rgba(0,245,255,.3);  color:var(--cyan); }
  .pr-btn.pr-active-moderate { background:rgba(255,215,0,.1);   border-color:rgba(255,215,0,.28); color:var(--gold); }
  .pr-btn.pr-active-busy     { background:rgba(255,165,0,.12);  border-color:rgba(255,165,0,.3);  color:orange; }
  .pr-btn.pr-active-packed   { background:rgba(255,45,120,.12); border-color:rgba(255,45,120,.3); color:var(--magenta); }
  .popular-report-note {
    font-size:.55rem; color:var(--muted); margin-top:.3rem;
    letter-spacing:.03em; width:100%;
  }

  .c-foot-tt {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:6px;
    background:#000; border:1px solid rgba(255,255,255,.15);
    flex-shrink:0; text-decoration:none; transition:opacity .18s;
  }
  .c-foot-tt:hover { opacity:.8; }
  .c-foot-tt svg { width:11px; height:11px; }

  .c-foot-web {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:6px;
    background:rgba(155,93,229,.25); border:1px solid rgba(155,93,229,.35);
    flex-shrink:0; text-decoration:none; transition:opacity .18s;
  }
  .c-foot-web:hover { opacity:.8; }
  .c-foot-web svg { width:11px; height:11px; stroke:#c8a0ff; fill:none; stroke-width:2; }

  /* ── ACTIVITY TICKER ── */
  .activity-ticker {
    position:sticky; top:60px; z-index:190;
    height:34px; overflow:hidden;
    background:rgba(8,8,26,0.88);
    backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(139,92,246,0.06);
    display:flex; align-items:center;
    mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  }
  .ticker-track {
    display:flex; align-items:center; gap:0;
    white-space:nowrap;
    animation:tickerScroll 90s linear infinite;
    will-change:transform;
  }
  .ticker-track:hover { animation-play-state:paused; }
  @keyframes tickerScroll {
    0%   { transform:translateX(0); }
    100% { transform:translateX(-50%); }
  }
  .ticker-item {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:0 1.8rem; font-size:.67rem; font-weight:600;
    color:rgba(240,240,255,0.55); letter-spacing:.03em;
    border-right:1px solid rgba(255,255,255,0.05);
    height:34px; flex-shrink:0;
  }
  .ticker-item:last-child { border-right:none; }
  .ticker-avatar {
    font-size:.85rem; line-height:1; flex-shrink:0;
  }
  .ticker-name { color:rgba(240,240,255,0.8); font-weight:700; }
  .ticker-action { color:rgba(240,240,255,0.45); }
  .ticker-venue { color:var(--cyan); font-weight:700; }
  .ticker-time { color:rgba(240,240,255,0.28); font-size:.6rem; margin-left:.15rem; }
  .ticker-pip {
    width:5px; height:5px; border-radius:50%;
    background:var(--cyan); opacity:.5; flex-shrink:0;
    margin-right:.2rem;
  }
  /* Live clip items in the ticker */
  .ticker-item.ticker-live {
    color:rgba(240,240,255,0.75);
    background:rgba(220,30,30,0.07);
    border-right-color:rgba(220,30,30,0.12);
  }
  .ticker-live-dot {
    width:6px; height:6px; border-radius:50%;
    background:#ff4444; box-shadow:0 0 6px #ff4444;
    animation:livePulse 1.2s ease-in-out infinite;
    flex-shrink:0;
  }
  .ticker-live-badge {
    font-size:.58rem; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; color:#ff4444;
  }
  .ticker-live-venue { color:#ff8888; font-weight:700; }
  .ticker-live-thumb {
    width:20px; height:20px; border-radius:4px;
    object-fit:cover; flex-shrink:0;
    border:1px solid rgba(255,68,68,0.4);
  }
  /* Artist booking items in the ticker */
  .ticker-item.ticker-artist {
    color:rgba(240,240,255,0.75);
    background:rgba(155,93,229,0.07);
    border-right-color:rgba(155,93,229,0.15);
  }
  .ticker-item.ticker-artist.ta-tonight {
    background:rgba(255,215,0,0.06);
    border-right-color:rgba(255,215,0,0.14);
  }
  .ticker-artist-dot {
    width:6px; height:6px; border-radius:50%;
    background:#9b5de5; box-shadow:0 0 5px #9b5de5;
    flex-shrink:0;
  }
  .ticker-item.ticker-artist.ta-tonight .ticker-artist-dot {
    background:#ffd700; box-shadow:0 0 5px #ffd700;
    animation:livePulse 1.4s ease-in-out infinite;
  }
  .ticker-artist-badge {
    font-size:.58rem; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; color:#9b5de5;
  }
  .ticker-item.ticker-artist.ta-tonight .ticker-artist-badge { color:#ffd700; }
  .ticker-artist-name { font-weight:800; color:#c8a0ff; }
  .ticker-item.ticker-artist.ta-tonight .ticker-artist-name { color:#ffd700; }
  .ticker-artist-venue { color:rgba(240,240,255,0.65); font-weight:600; }
  .ticker-artist-thumb {
    width:20px; height:20px; border-radius:50%;
    object-fit:cover; flex-shrink:0;
    border:1px solid rgba(155,93,229,0.5);
  }
  .ticker-item.ticker-artist.ta-tonight .ticker-artist-thumb {
    border-color:rgba(255,215,0,0.5);
  }
  /* Idle state when no clips active */
  .ticker-item.ticker-idle {
    color:rgba(240,240,255,0.22);
    border-right-color:rgba(255,255,255,0.03);
  }
  .ticker-idle-dot {
    width:5px; height:5px; border-radius:50%;
    background:rgba(255,255,255,0.15); flex-shrink:0;
  }
  .ticker-idle-txt {
    font-size:.63rem; letter-spacing:.04em;
  }

  /* ── CARD SWIPE GALLERY ── */
  /* .c-img aspect-ratio and overflow set globally above */
  .c-gallery-track {
    display:flex; width:100%; height:100%;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    will-change:transform;
  }
  .c-gallery-slide {
    flex-shrink:0; width:100%; height:100%; position:relative;
  }
  .c-gallery-slide img {
    width:100%; height:100%; object-fit:cover; object-position:center; display:block;
    pointer-events:none; user-select:none; -webkit-user-drag:none;
  }
  /* Dots — big Instagram style at bottom center */
  .c-gallery-dots {
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    display:flex; gap:5px; z-index:6; pointer-events:none;
  }
  .c-gallery-dot {
    width:6px; height:6px; border-radius:50%;
    background:rgba(255,255,255,.45);
    transition:background .2s, transform .2s, width .2s;
    flex-shrink:0;
    box-shadow:0 1px 3px rgba(0,0,0,.5);
  }
  .c-gallery-dot.active {
    background:#fff;
    transform:scale(1.35);
  }
  /* Arrow buttons — always slightly visible, bigger on hover */
  .c-gallery-btn {
    position:absolute; top:50%; transform:translateY(-50%);
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.18);
    border:none; color:#fff;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    z-index:6;
    opacity:0.55;
    transition:opacity .18s, background .18s, transform .18s;
    backdrop-filter:blur(8px);
    pointer-events:auto;
    box-shadow:0 2px 8px rgba(0,0,0,.35);
  }
  .c-img:hover .c-gallery-btn,
  .c-card:hover .c-gallery-btn { opacity:1; }
  .c-gallery-btn:hover { background:rgba(255,255,255,.35); transform:translateY(-50%) scale(1.08); }
  .c-gallery-btn.prev { left:10px; }
  .c-gallery-btn.next { right:10px; }
  .c-gallery-btn svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
  /* Photo count badge */
  .c-gallery-count {
    position:absolute; top:.6rem; right:.6rem; z-index:6;
    background:rgba(0,0,0,.52); backdrop-filter:blur(6px);
    color:#fff; font-size:.58rem; font-weight:700; letter-spacing:.05em;
    padding:.2rem .55rem; border-radius:50px;
    display:flex; align-items:center; gap:4px;
    pointer-events:none;
    box-shadow:0 1px 6px rgba(0,0,0,.3);
  }
  .c-gallery-count svg { width:9px; height:9px; stroke:#fff; fill:none; stroke-width:2; }
  /* On touch devices always show arrows */
  @media (hover: none) {
    .c-gallery-btn { opacity:0.7; }
    .c-gallery-dot { width:7px; height:7px; }
  }
  /* ══ LIGHTBOX MODAL ══════════════════════════════════════════════════
     Technique 1 — display:flex (centering & column layout)
     Technique 2 — overflow-x:auto  (thumbnail strip)
     Technique 3 — position:fixed   (full-viewport overlay)
  ══════════════════════════════════════════════════════════════════ */

  /* Overlay: position:fixed covers the entire viewport */
  #lightbox {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 200000;
    /* display:flex lays out top-bar / image-area / bottom-bar as a column */
    display: flex;
    flex-direction: column;
    touch-action: none;
    animation: lbFadeIn .18s ease;
  }

  /* Top bar */
  #lb-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem 1rem;
    background: linear-gradient(to bottom, rgba(0,0,0,.75), transparent);
    pointer-events: none;
  }
  #lb-topbar-left  { pointer-events: auto; display: flex; flex-direction: column; gap: 1px; }
  #lb-topbar-right { pointer-events: auto; display: flex; align-items: center; gap: .55rem; }
  #lb-venue-name   { font-size: .95rem; font-weight: 700; color: #fff; letter-spacing: .01em; }
  #lb-counter      { font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.5); letter-spacing: .08em; }

  /* Circular icon button shared by close, grid-toggle, fullscreen */
  .lb-icon-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.14);
    border: none; color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
  }
  .lb-icon-btn:hover { background: rgba(255,255,255,.28); }

  /* Main image area: flex:1 fills remaining space */
  #lb-main {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
  }

  /* Image viewport — absolute-fills #lb-main */
  #lb-img-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: grab;
  }
  #lb-img-wrap.dragging { cursor: grabbing; }

  #lb-img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    transition: none;
  }
  #lb-img.fading { opacity: 0; transition: opacity .12s; }

  /* Navigation arrows — absolute within #lb-main */
  .lb-nav-btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 10;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .12s;
    box-shadow: 0 4px 20px rgba(0,0,0,.6);
  }
  .lb-nav-btn:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.08); }
  #lb-prev { left: 14px; }
  #lb-next { right: 14px; }

  /* Bottom bar */
  #lb-bottom {
    flex-shrink: 0;
    padding: .6rem 0 .75rem;
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
  }

  /* Dot indicators: display:flex for row layout */
  #lb-dots {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .lb-dot {
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    transition: all .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.6);
    flex-shrink: 0;
  }
  .lb-dot.active { background: #fff; width: 8px !important; height: 8px !important; }

  /* Thumbnail strip: overflow-x:auto + display:flex for horizontal scroll */
  #lb-thumbs {
    display: flex;
    gap: 5px;
    overflow-x: auto;        /* Technique 2 — horizontal scroll */
    padding: 6px 12px 2px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  #lb-thumbs::-webkit-scrollbar { display: none; }
  .lb-thumb {
    flex-shrink: 0;
    width: 58px; height: 58px;
    border-radius: 8px; overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: .55;
    transition: all .2s;
    scroll-snap-align: center;
  }
  .lb-thumb.active { border-color: #fff; opacity: 1; }
  .lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  @keyframes lbFadeIn { from { opacity:0 } to { opacity:1 } }

  /* Hide side arrows on small phones — swipe to navigate */
  @media (max-width: 480px) {
    #lb-prev, #lb-next { display: none !important; }
  }

  /* ══════════════════════════════════════════════════════
     MOBILE-FIRST OVERHAUL  ≤ 768px
     All desktop styles above are untouched.
     These only activate on phones/tablets.
  ══════════════════════════════════════════════════════ */
  @media (max-width: 768px) {

    /* ── GLOBAL RESETS ── */
    html, body {
      overflow-x: hidden;
      width: 100%;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
    }
    body {
      padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }
    * { -webkit-tap-highlight-color: transparent; }
    img { max-width: 100%; height: auto; }

    /* Grid background less intense on mobile for perf */
    body::before { background-size: 40px 40px; opacity: .6; }

    /* ── HEADER ── */
    header {
      height: 54px;
      padding: 0 1rem;
      position: sticky; top: 0; z-index: 200;
      background: rgba(8,8,26,.92);
      border-bottom-color: rgba(139,92,246,.06);
    }
    .logo { font-size: 1.55rem; }
    .logo-city-ticker { display: none; }
    header nav { display: none !important; }
    .bot-nav { display: flex !important; }
    .mobile-hdr-btns { display: flex; gap: .35rem; }
    /* Make header buttons easier to tap */
    .lang-btn, .theme-btn {
      min-width: 40px; min-height: 40px;
      display: flex; align-items: center; justify-content: center;
      font-size: .75rem;
    }

    /* ── ACTIVITY TICKER ── */
    .activity-ticker { height: 30px; top: 54px; }
    .ticker-item { font-size: .6rem; padding: 0 1.2rem; }

    /* ── HERO ── */
    .hero {
      padding: 1.6rem 1rem 1.4rem;
      text-align: center;
    }
    .hero-glow {
      width: 320px; height: 200px; top: -60px;
      opacity: .7;
    }
    .hero-line1 {
      font-size: clamp(2.4rem, 12vw, 4rem);
      line-height: .92;
    }
    .hero-divider-line { width: 60px; margin: .3rem auto; }
    .hero-city-wrap { gap: .4rem; }
    .hero-city-label { font-size: clamp(1rem, 3.5vw, 1.5rem); }
    .hero-city-ticker { height: clamp(1.8rem, 7vw, 3rem); }
    .hero-city-item {
      font-size: clamp(1.8rem, 7vw, 3rem);
      height: clamp(1.8rem, 7vw, 3rem);
    }

    /* ── SEARCH ROW ── */
    .search-row {
      flex-direction: column;
      gap: .6rem;
      max-width: 100%;
      padding: 0;
    }
    .s-wrap { min-width: 0; width: 100%; }
    .s-input {
      font-size: 1rem;
      padding: .9rem 1rem .9rem 2.8rem;
      border-radius: 16px;
      background: rgba(14,14,36,.9);
      border-color: rgba(139,92,246,.1);
    }
    .s-select {
      width: 100%;
      min-width: 0;
      font-size: 1rem; /* prevents iOS auto-zoom */
      padding: .85rem 2.4rem .85rem 1rem;
      border-radius: 14px;
    }

    /* ── TABS → Horizontal scrollable chip strip ── */
    .tabs {
      display: flex;
      padding: .9rem .9rem;
      gap: 1.1rem;
      justify-content: flex-start;
      overflow-x: auto;
      flex-wrap: nowrap;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 95%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 95%, transparent 100%);
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab {
      flex-shrink: 0;
      scroll-snap-align: start;
      padding: 0 0 .6rem;
      min-height: auto;
      font-size: .76rem;
      white-space: nowrap;
      border-radius: 0;
    }

    /* ── SECTION WRAPPER ── */
    .section {
      padding: 0 .9rem 2.5rem;
    }
    .sec-head {
      margin-bottom: 1.2rem;
      padding-top: .2rem;
    }
    .sec-title { font-size: 1.4rem; }
    .divider { margin: 1.4rem 0; }

    /* ── VENUE CARDS GRID → Single column full-width ── */
    .grid {
      gap: 1.15rem;
    }
    .borough-head {
      padding: 0 .9rem;
      margin-bottom: .8rem;
    }
    .borough-title { font-size: 1rem; }
    .borough-scroll {
      gap: .85rem;
      padding: 0 .9rem 1rem;
    }
    .borough-scroll > .c-card {
      flex: 0 0 78vw;
      width: 78vw;
      max-width: 320px;
    }
    .c-card {
      border-radius: 18px;
      /* Reduce animation cost on mobile */
      animation: none;
    }
    /* aspect-ratio on .c-img scales naturally — no height override needed */

    .c-body { padding: .95rem 1rem; }
    .c-name { font-size: 1.35rem; }
    .c-addr { font-size: .72rem; margin-bottom: .55rem; }
    .c-foot {
      margin-top: .75rem;
      padding-top: .75rem;
      flex-wrap: wrap;
      gap: .4rem;
    }

    /* ── CARD ACTION BUTTONS → Taller tap targets ── */
    .card-actions {
      margin-top: .75rem;
      padding-top: .75rem;
      gap: .5rem;
    }
    .card-uber, .card-live {
      min-height: 44px;
      padding: .6rem .9rem;
      font-size: .68rem;
      border-radius: 12px;
    }

    /* ── VIBE ROW ── */
    .vibe-row { margin-top: .5rem; gap: .3rem; }
    .crowd-pill, .dress-pill { font-size: .58rem; padding: .15rem .5rem; }

    /* ── PODIUM → full-width single column ── */
    .podium { grid-template-columns: 1fr; gap: .9rem; margin-bottom: 2rem; }
    .p-card:nth-child(2) { transform: none !important; }
    .p-card { aspect-ratio: 16/9; border-radius: 16px; }
    .p-name { font-size: 1.3rem; }

    /* ── TONIGHT STRIP → vertical stack full-width ── */
    .tonight-strip {
      display: flex;
      flex-direction: column;
      gap: .85rem;
    }
    .tonight-card { border-radius: 16px; }
    .tonight-thumb { height: 160px; }
    .tonight-thumb.artist-thumb { height: 200px; }
    .tonight-body { padding: .85rem .95rem .95rem; }
    .tonight-event { font-size: 1.15rem; }

    /* ── THIS WEEK STRIP → keep horizontal scroll, bigger cards ── */
    .thisweek-strip { gap: .65rem; padding-bottom: .75rem; }
    .thisweek-card { width: 160px; }
    .thisweek-img { height: 95px; }
    .thisweek-body { padding: .55rem .65rem .7rem; }
    .thisweek-event { font-size: .88rem; }

    /* ── WEEKLY CALENDAR ── */
    .cal-days { gap: .4rem; margin-bottom: 1rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .cal-days::-webkit-scrollbar { display: none; }
    .cal-day-btn { flex-shrink: 0; min-width: 60px; padding: .5rem .35rem; border-radius: 10px; min-height: 52px; }
    .cal-day-name { font-size: .88rem; }
    .cal-events-grid { grid-template-columns: 1fr; gap: .75rem; }
    .cal-event-card { border-radius: 14px; }
    .cal-event-img { width: 80px; }

    /* ── CALENDAR PAGE ── */
    .cal-page-body { padding: 1rem; }
    .cal-page-days { padding: .9rem 1rem; gap: .45rem; }
    .cpd-btn { padding: .55rem .85rem; min-width: 56px; min-height: 52px; }
    .cp-event-img { width: 100px; }
    .cp-event-name { font-size: 1.2rem; }

    /* ── MODAL ── */
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal {
      border-radius: 24px 24px 0 0;
      max-height: 94vh;
      max-width: 100%;
      width: 100%;
      animation: mInMobile .3s cubic-bezier(.32,1,.4,1) both;
      border-color: rgba(139,92,246,.1);
    }
    @keyframes mInMobile {
      from { transform: translateY(100%); opacity: .4; }
      to   { transform: translateY(0);    opacity: 1; }
    }
    .m-head { height: 220px; }
    .m-body { padding: 1.1rem 1.1rem calc(2rem + env(safe-area-inset-bottom)); }
    .m-name { font-size: 1.75rem; }
    .m-addr { font-size: .8rem; }
    .m-text { font-size: .82rem; }
    .m-actions { gap: .6rem; }
    .btn-go, .btn-cls {
      min-height: 48px;
      font-size: .82rem;
    }
    .transport-row { gap: .55rem; margin-top: 1rem; }
    .btn-uber, .btn-maps, .btn-close-sm { min-height: 48px; border-radius: 14px; }
    /* Close button bigger on mobile */
    .m-close { width: 40px; height: 40px; font-size: 1.2rem; }

    /* ── VENUE GALLERY in modal ── */
    .venue-gallery { gap: 7px; }
    .gallery-img { height: 170px; }

    /* ── LIVE FEED PANEL ── */
    .lfp-video-wrap { aspect-ratio: 16/9; }
    .lfp-wrap { padding: .75rem .85rem .9rem; }

    /* ── BOTTOM NAV ── */
    .bot-nav { height: calc(56px + env(safe-area-inset-bottom)); }
    .bn-item { padding: 0 16px; min-width: 64px; }

    /* ── EVENTS PAGE ── */
    .events-page { padding-bottom: 80px; }
    .ev-chips {
      gap: .4rem;
      padding: .75rem .9rem;
      overflow-x: auto;
      flex-wrap: nowrap;
      scrollbar-width: none;
    }
    .ev-chips::-webkit-scrollbar { display: none; }
    .ev-chip { flex-shrink: 0; min-height: 40px; font-size: .7rem; }
    .ev-card { border-radius: 14px; }
    .ev-card-img { width: 80px; }

    /* ── PROFILE PAGE ── */
    .profile-page { padding-bottom: 80px; }
    .profile-saved-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: .65rem !important;
    }
    .profile-saved-img { height: 100px !important; }

    /* ── POPULAR TIMES BAR ── */
    .popular-bar { padding: .55rem .85rem .5rem; }
    .popular-chart { height: 24px; }
    .pr-btn { min-height: 36px; }

    /* ── SECTION HEAD ── */
    .sec-head { padding: 0 .9rem; margin-bottom: 1rem; }

    /* ── SHARE SHEET ── */
    .share-sheet { max-width: 100%; }

    /* ── FEATURED CARD ── */
    .featured-card { border-radius: 16px; }
    .featured-img { height: 200px !important; }

    /* ── CARD GALLERY DOTS ── bigger hit area ── */
    .c-gallery-dot { width: 7px; height: 7px; }
    .c-gallery-btn { width: 38px; height: 38px; }

    /* ── CARD OVERLAY ── tighter on mobile ── */
    .c-overlay { padding: .55rem .8rem .65rem; }
    .c-name { font-size: 1.3rem; margin-bottom: .2rem; }
    .metro-pill, .parking-pill { font-size: .58rem; padding: .14rem .48rem; }
    .parking-p { width: 12px; height: 12px; font-size: .5rem; }
    .c-transit-row { gap: .28rem; margin-top: .25rem; }

    /* ── NO RESULTS ── */
    .no-res { padding: 3rem 1.2rem; }

    /* ── FOOTER ── */
    footer { padding: 1.4rem 1rem; font-size: .7rem; }
  }

  /* ── Tiny phones (iPhone SE etc) ── */
  @media (max-width: 390px) {
    .hero-line1 { font-size: 2.2rem; }
    .hero-city-item { font-size: 1.6rem; }
    header { height: 50px; }
    .logo { font-size: 1.4rem; }

    .thisweek-card { width: 145px; }
    .grid { gap: .85rem; }

    .c-name { font-size: 1.2rem; }
    .metro-pill, .parking-pill { font-size: .54rem; padding: .12rem .42rem; }
  }


  /* ══════════════════════════════════════════════
     PERFORMANCE LAYER — Mobile GPU + rendering
     ══════════════════════════════════════════════ */

  /* Skip rendering off-screen cards entirely */
  .c-card {
    /* contain: layout style paint keeps cards isolated without content-visibility crash risk */
  }

  /* CSS containment — tells browser each card is independent */
  .c-card, .tonight-card, .thisweek-card {
    contain: layout style paint;
  }

  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
    .ticker-track { animation: none !important; }
    .reaction-particle { display: none !important; }
  }

  /* Mobile-specific: kill GPU layers + reduce filter cost */
  @media (max-width: 768px) {
    /* Remove will-change (each one = 1 GPU layer = VRAM consumed) */
    .c-img img,
    .ticker-track,
    .c-gallery-track,
    .reaction-particle,
    .tonight-thumb img,
    .thisweek-img img,
    .lightbox-img,
    .hero-city-drum {
      will-change: auto !important;
    }

    /* Reduce backdrop-filter blur on glass elements (very GPU-expensive) */
    header,
    .bot-nav,
    .activity-ticker {
      backdrop-filter: blur(16px) !important;
      -webkit-backdrop-filter: blur(16px) !important;
    }

    /* Reduce box-shadow complexity on cards during scroll */
    .c-card {
      box-shadow: 0 2px 12px rgba(0,0,0,.4);
    }
    .c-card:hover, .c-card:active {
      box-shadow: 0 4px 20px rgba(0,0,0,.5);
    }

    /* Search filter section mobile styles */
    .search-filter-section {
      padding: 1rem 1.2rem 1.5rem;
    }

    /* ── MOBILE CRASH FIXES ── */

    /* Kill ALL will-change globally on mobile - each one uses GPU VRAM */
    * {
      will-change: auto !important;
    }

    /* Kill all backdrop-filters except critical nav elements - huge GPU cost */
    .admin-dash, .admin-overlay, .modal-overlay,
    .search-overlay, .ev-overlay, .profile-overlay,
    .lightbox-overlay, .map-overlay, .calendar-overlay,
    .tonight-score-wrap, .c-card,
    .admin-tab-pane, .admin-body,
    .m-sheet, .m-body, .m-header {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /* Disable hover transforms on mobile (no hover anyway, wastes resources) */
    .c-card:hover,
    .tonight-card:hover,
    .thisweek-card:hover,
    .ev-card:hover {
      transform: none !important;
    }

    /* Disable expensive animations that run continuously */
    .hero-grain,
    .reaction-particle,
    @keyframes heroBadgePulse { to { opacity: 1; transform: none; } }

    /* Disable card hover scale on images */
    .c-card:hover .c-img img,
    .tonight-card:hover .tonight-thumb img {
      transform: none !important;
    }

    /* Contain paint areas - prevents full-page repaints on scroll */
    .c-card {
      contain: layout style paint;
    }

    /* Reduce animation complexity */
    .hero-live-pip,
    .card-live-dot,
    .ev-card-live-pip {
      animation-duration: 3s !important;
    }

    /* Disable parallax/transform animations on scroll */
    .hero-v2 {
      will-change: auto !important;
      transform: none !important;
    }

    /* Simpler transitions on mobile */
    .c-card, .tonight-card, .ev-card, .thisweek-card {
      transition: none !important;
    }

    /* Prevent momentum scroll from rendering too many cards at once */
    #grid {
      -webkit-overflow-scrolling: auto;
      overflow-anchor: none;
      /* CRITICAL: Extra space at bottom so last cards don't collide with bot-nav */
      padding-bottom: 120px !important;
    }

    /* Reduce image quality demand on small screens */
    .c-img img, .tonight-thumb img, .thisweek-img img {
      image-rendering: auto;
    }

    /* content-visibility: auto intentionally removed — causes Safari crash on fast scroll
       contain: layout style paint (below) is sufficient and safe */

    /* When user is actively scrolling, freeze ALL animations */
    html.is-scrolling .c-card,
    html.is-scrolling .ev-card,
    html.is-scrolling .tonight-card,
    html.is-scrolling .thisweek-card,
    html.is-scrolling .c-img img,
    html.is-scrolling .tonight-thumb img,
    html.is-scrolling .thisweek-img img,
    html.is-scrolling .ticker-track,
    html.is-scrolling .hero-live-pip,
    html.is-scrolling .card-live-dot,
    html.is-scrolling .ev-card-live-pip,
    html.is-scrolling .ev-pip,
    html.is-scrolling .reaction-particle,
    html.is-scrolling .lit-flame,
    html.is-scrolling [class*="pulse"],
    html.is-scrolling [class*="spin"] {
      animation-play-state: paused !important;
      transition: none !important;
    }

    /* Bot-nav backdrop-filter is the BIGGEST GPU hog at bottom of page
       Replace with solid color on mobile - same look, no GPU cost */
    .bot-nav {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: rgba(8, 8, 12, 0.96) !important;
    }
  }

  /* Extra aggressive for small phones */
  @media (max-width: 390px) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .hero-grain { display: none !important; }
  }


  /* ══════ SEARCH OVERLAY ══════ */
  .search-overlay {
    position:fixed; inset:0; z-index:600;
    background:var(--bg);
    display:none; flex-direction:column;
    opacity:0; transition:opacity .18s;
  }
  .search-overlay.open { display:flex; opacity:1; }
  .search-overlay-bar {
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; border-bottom:1px solid var(--border);
    background:var(--surface);
  }
  .search-overlay-bar svg {
    width:18px; height:18px; color:var(--muted); flex-shrink:0;
  }
  .search-overlay-bar input {
    flex:1; background:none; border:none; outline:none;
    font-family:'Space Grotesk',sans-serif; font-size:16px; color:var(--text);
    -webkit-appearance:none;
  }
  .search-overlay-bar input::placeholder { color:rgba(120,120,160,.5); }
  .search-overlay-cancel {
    font-size:14px; font-weight:600; color:var(--purple);
    cursor:pointer; background:none; border:none; padding:6px 8px;
    font-family:'Space Grotesk',sans-serif; flex-shrink:0;
  }
  .search-overlay-results {
    flex:1; overflow-y:auto; padding:6px 16px;
    -webkit-overflow-scrolling:touch;
  }
  .search-overlay-item {
    display:flex; align-items:center; gap:14px;
    padding:12px 0; border-bottom:1px solid var(--border);
    cursor:pointer; transition:background .15s;
  }
  .search-overlay-item:active { background:rgba(255,255,255,.03); }
  .search-overlay-img {
    width:52px; height:52px; border-radius:12px;
    object-fit:cover; flex-shrink:0; background:var(--surface);
  }
  .search-overlay-info { flex:1; min-width:0; }
  .search-overlay-name {
    font-size:14px; font-weight:700; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .search-overlay-addr {
    font-size:11.5px; color:var(--muted); margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .search-overlay-badge {
    font-size:9px; font-weight:700; padding:3px 8px; border-radius:50px;
    flex-shrink:0;
  }
  .search-overlay-empty {
    text-align:center; padding:48px 20px; color:var(--muted);
  }
  .search-overlay-empty-icon { font-size:2rem; margin-bottom:8px; }

  @media (max-width:768px) {
    .search-overlay-bar { padding:10px 14px; }
    .search-overlay-bar input { font-size:16px; } /* prevent iOS zoom */
  }



/* ═══════════════════════════════════════
   INSTAGRAM-STYLE FLOATING NAV OVERRIDE
═══════════════════════════════════════ */
.bot-nav {
    position:fixed; bottom:0; left:0; right:0; z-index:800;
    background:rgba(8,8,26,0.96); backdrop-filter:blur(32px) saturate(1.3);
    -webkit-backdrop-filter:blur(32px) saturate(1.3);
    border-top:1px solid var(--border);
    display:flex; align-items:stretch; justify-content:center;
    padding:0 0 env(safe-area-inset-bottom);
    height:calc(58px + env(safe-area-inset-bottom));
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x;
  }
  .bot-nav::-webkit-scrollbar { display:none; }
  /* Inner wrapper — always full width */
  .bot-nav-inner {
    display:flex; align-items:stretch;
    width:100%; min-width:max-content;
  }
  @media(max-width:600px) {
    .bot-nav { justify-content:flex-start; }
  }
  .bn-item {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; cursor:pointer;
    padding:0 20px; flex:1;
    background:none; border:none; text-decoration:none;
    border-bottom:2px solid transparent;
    flex-shrink:0; min-width:72px;
    transition:color .2s, border-color .2s;
    font-family:'Space Grotesk',sans-serif;
  }
  .bn-item svg {
    width:20px; height:20px; stroke:var(--muted); fill:none;
    stroke-width:1.8; transition:stroke .2s; flex-shrink:0;
  }
  .bn-item span {
    font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); transition:color .2s; font-weight:700; white-space:nowrap;
  }
  .bn-item.active svg { stroke:var(--accent); }
  .bn-item.active span { color:var(--accent); }
  .bn-item.active { border-bottom-color:var(--accent); }
  .bn-item:hover svg { stroke:var(--text); }
  .bn-item:hover span { color:var(--text); }
  .bn-center-wrap { display:none; }
  .bn-center { display:none; }


/* Override to pill/floating style */
.bot-nav {
  bottom: 1.2rem !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 2.4rem);
  border-top: none !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 999px !important;
  padding: .38rem .5rem !important;
  height: auto !important;
  background: rgba(14,14,22,.45) !important;
  backdrop-filter: blur(32px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.6) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow: visible !important;
  justify-content: center !important;
  gap: .1rem;
  transition: opacity .3s, transform .3s;
}
@media (min-width: 900px) {
  .bot-nav {
    bottom: 1.8rem !important;
    padding: .5rem .7rem !important;
    gap: .3rem;
  }
}
.bot-nav.nav-hidden {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}
.bot-nav-inner {
  display: flex; align-items: center;
  width: auto !important; min-width: 0 !important;
  gap: .1rem;
}
@media (min-width: 900px) {
  .bot-nav-inner { gap: .3rem; }
}
.bn-item {
  width: 46px; height: 46px;
  border-radius: 50% !important;
  padding: 0 !important;
  flex: none !important;
  min-width: 0 !important;
  border-bottom: none !important;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s;
}
@media (min-width: 900px) {
  .bn-item { width: 58px; height: 58px; cursor: pointer; }
}
.bn-item span { display: none !important; }
.bn-item svg  { width: 21px; height: 21px; }
@media (min-width: 900px) {
  .bn-item svg { width: 25px; height: 25px; }
}
.bn-item.active {
  background: rgba(255,255,255,.1);
  border-bottom: none !important;
}
.bn-item.active svg { stroke: var(--accent) !important; }
.bn-item:hover { background: rgba(255,255,255,.08); }

/* Center "play/tonight" button */
#bnMap {
  width: 50px !important; height: 50px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 50% !important;
}
@media (min-width: 900px) {
  #bnMap { width: 64px !important; height: 64px !important; }
}
#bnMap:hover { background: rgba(255,255,255,.2) !important; transform: scale(1.06); }
#bnMap svg   { stroke: #fff !important; }
#bnMap span  { display: none !important; }

/* Saved dot badge */
.bn-item { position: relative; }
.bn-dot {
  position: absolute; top: 8px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid rgba(14,14,22,.72);
  display: none;
}
.bn-dot.show { display: block; }

/* No label body padding needed - pill floats */
body { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }



/* Search overlay: slide up from bottom like Instagram */
.search-overlay {
  justify-content: flex-end !important;
  background: rgba(0,0,0,.65) !important;
  backdrop-filter: blur(5px) !important;
}
.search-overlay.open { display: flex !important; opacity: 1 !important; }
.search-overlay-bar {
  border-radius: 20px 20px 0 0 !important;
  padding: 1.1rem 1.2rem 1rem !important;
  background: rgba(18,18,28,.97) !important;
}
.search-overlay-results {
  background: rgba(18,18,28,.97) !important;
  max-height: 60vh;
}

/* Quick suggestion chips */
.so-chips {
  display: flex; gap: .4rem; flex-wrap: wrap; padding: .6rem 0 .2rem;
}
.so-chip {
  padding: .35rem .8rem; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.65); font-size: .76rem; font-weight: 600;
  cursor: pointer; transition: background .15s;
  font-family: inherit;
}
.so-chip:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Scroll hide/show animation */
@keyframes navFadeUp { from { opacity:0; transform:translateX(-50%) translateY(12px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }