/* ================================================================
   MELTE — THEME SYSTEM / AUDIT REBUILD
   Loaded after base.css. No route should inherit the wrong surface.
   ================================================================ */
:root{
  --melte-red:#E10600;
  --melte-pink:#FF9AA2;
  --melte-cream:#FDEBD0;
  --melte-chocolate:#5B2A1A;
  --melte-butter:#FFD34E;
  --melte-apple:#17120f;
  --melte-apple-2:#0d0b0a;
  --melte-ink:#5B2A1A;
  --melte-paper:#FFFDFB;
  --melte-paper-2:#FFF8F3;
  --melte-paper-3:#F6E6D8;
}

/* ---------- Asset / logo hardening ---------- */
.hero-logo,
.melte-login-mark img,
.melte-login-brand img,
.vbtn img,
.vbtn-rail img,
.px-head .wordmark img,
.logo img{
  display:block;
  max-width:100%;
}
.hero-logo{width:min(300px,78vw)!important;height:auto!important;object-fit:contain}
.melte-login-mark img{width:100%!important;height:100%!important;object-fit:contain}
.melte-login-brand img{height:auto!important;object-fit:contain}

/* ---------- App shell: every route gets a declared palette ---------- */
#view[data-route="discover"],
#view[data-route="communities"],
#view[data-route="messages"],
#view[data-route="settings"]{
  --onyx:var(--melte-apple);
  --s1:#1c1714;
  --s2:#241d19;
  --s3:#30251f;
  --fg:#FDEBD0;
  --dim:rgba(253,235,208,.68);
  --faint:rgba(253,235,208,.42);
  --line:rgba(253,235,208,.13);
  --line2:rgba(253,235,208,.22);
  --nude:#FDEBD0;
  --rose:#FF9AA2;
  --cherry:#E10600;
  --cream:#FDEBD0;
  --ink:#FDEBD0;
  background:radial-gradient(900px 480px at 50% -120px,rgba(225,6,0,.13),transparent 68%),linear-gradient(180deg,#17120f 0%,#100d0b 46%,#0b0908 100%)!important;
  color:var(--fg)!important;
}

#view[data-route="feed"],
#view[data-route="events"],
#view[data-route="connections"]{
  --onyx:var(--melte-cream);
  --s1:var(--melte-paper);
  --s2:#FFF8F3;
  --s3:#F1D8C6;
  --fg:var(--melte-chocolate);
  --dim:rgba(91,42,26,.72);
  --faint:rgba(91,42,26,.48);
  --line:rgba(91,42,26,.12);
  --line2:rgba(91,42,26,.18);
  --nude:var(--melte-chocolate);
  --rose:var(--melte-red);
  --cherry:var(--melte-red);
  --cream:var(--melte-chocolate);
  --ink:var(--melte-chocolate);
  background:linear-gradient(180deg,#FDEBD0 0%,#FFF8F3 46%,#F6E6D8 100%)!important;
  color:var(--fg)!important;
}

#view[data-route="profile"]{
  --onyx:#0f0d0c;
  --s1:#17120f;
  --s2:#211a16;
  --s3:#2c211c;
  --fg:#FDEBD0;
  --dim:rgba(253,235,208,.68);
  --faint:rgba(253,235,208,.42);
  --line:rgba(253,235,208,.13);
  --line2:rgba(253,235,208,.22);
  --nude:#FDEBD0;
  --rose:#FF9AA2;
  --cherry:#E10600;
  background:linear-gradient(180deg,#17120f 0%,#0f0d0c 42%,#0b0a09 100%)!important;
  color:#FDEBD0!important;
}

/* Do not let the old generic .page paint a conflicting background. */
#view[data-route="discover"] .page,
#view[data-route="communities"] .page,
#view[data-route="messages"] .page,
#view[data-route="settings"] .page,
#view[data-route="feed"] .page,
#view[data-route="events"] .page,
#view[data-route="connections"] .page{
  background:transparent!important;
  color:inherit!important;
}

/* ---------- Dark Apple routes ---------- */
#view[data-route="discover"] .label,
#view[data-route="discover"] .dim,
#view[data-route="discover"] .hint,
#view[data-route="communities"] .label,
#view[data-route="communities"] .dim,
#view[data-route="communities"] .hint,
#view[data-route="messages"] .label,
#view[data-route="messages"] .dim,
#view[data-route="messages"] .hint,
#view[data-route="settings"] .label,
#view[data-route="settings"] .dim,
#view[data-route="settings"] .hint{color:var(--dim)!important}

#view[data-route="discover"] h1,
#view[data-route="discover"] h2,
#view[data-route="discover"] h3,
#view[data-route="communities"] h1,
#view[data-route="communities"] h2,
#view[data-route="communities"] h3,
#view[data-route="messages"] h1,
#view[data-route="messages"] h2,
#view[data-route="messages"] h3,
#view[data-route="settings"] h1,
#view[data-route="settings"] h2,
#view[data-route="settings"] h3{color:var(--fg)}

#view[data-route="discover"] .px-tool,
#view[data-route="discover"] .chip,
#view[data-route="communities"] .chip,
#view[data-route="messages"] .ibtn,
#view[data-route="settings"] .ibtn{
  color:var(--fg);
  border-color:var(--line);
  background:rgba(255,255,255,.035);
}
#view[data-route="discover"] .chip.on,
#view[data-route="communities"] .chip.on{background:var(--cream);color:#17120f;border-color:var(--cream)}
#view[data-route="discover"] .px-context{color:var(--dim);background:rgba(255,255,255,.035);border-color:var(--line)}
#view[data-route="discover"] .px-context b{color:var(--fg)}

/* Communities: dark, never cream. */
#view[data-route="communities"] .cm-home,
#view[data-route="communities"] .cm-home *{color:inherit}
#view[data-route="communities"] .cm-home{background:transparent!important}
#view[data-route="communities"] .cm-search .in,
#view[data-route="communities"] .cm-journey,
#view[data-route="communities"] .card,
#view[data-route="communities"] .panel{background:rgba(255,255,255,.035)!important;border-color:var(--line)!important}
#view[data-route="communities"] .cm-search .in{color:var(--fg)!important}
#view[data-route="communities"] .cm-search .in::placeholder{color:var(--faint)!important}

/* Messages: dark, never cream. */
#view[data-route="messages"] .melte-messages-page{background:transparent!important;color:var(--fg)!important}
#view[data-route="messages"] .melte-msg-header h1,
#view[data-route="messages"] .melte-msg-sectionhead h2,
#view[data-route="messages"] .melte-convo-name,
#view[data-route="messages"] .melte-msg-empty h3{color:var(--fg)!important}
#view[data-route="messages"] .melte-msg-header p,
#view[data-route="messages"] .melte-msg-sectionhead>div>span,
#view[data-route="messages"] .melte-convo-preview{color:var(--dim)!important}
#view[data-route="messages"] .melte-convo,
#view[data-route="messages"] .melte-msg-match,
#view[data-route="messages"] .melte-msg-empty{background:rgba(255,255,255,.035)!important;border-color:var(--line)!important;color:var(--fg)!important}

/* Settings: dark, including its cards and utility rows. */
#view[data-route="settings"] .melte-settings-page,
#view[data-route="settings"] .settings-page{background:transparent!important;color:var(--fg)!important}
#view[data-route="settings"] .card,
#view[data-route="settings"] .panel,
#view[data-route="settings"] .tr,
#view[data-route="settings"] .melte-settings-card{background:rgba(255,255,255,.035)!important;border-color:var(--line)!important;color:var(--fg)!important}
#view[data-route="settings"] .dim,#view[data-route="settings"] .hint{color:var(--dim)!important}

/* ---------- Cream editorial routes ---------- */
#view[data-route="feed"],
#view[data-route="events"],
#view[data-route="connections"]{
  color:var(--melte-chocolate)!important;
}
#view[data-route="feed"] .topbar .ibtn,
#view[data-route="events"] .topbar .ibtn,
#view[data-route="connections"] .topbar .ibtn{
  color:var(--melte-chocolate)!important;
  border-color:rgba(91,42,26,.16)!important;
  background:rgba(255,255,255,.52)!important;
}
#view[data-route="feed"] .label,
#view[data-route="feed"] .dim,
#view[data-route="feed"] .hint,
#view[data-route="events"] .label,
#view[data-route="events"] .dim,
#view[data-route="events"] .hint,
#view[data-route="connections"] .label,
#view[data-route="connections"] .dim,
#view[data-route="connections"] .hint{color:var(--dim)!important}
#view[data-route="feed"] h1,
#view[data-route="feed"] h2,
#view[data-route="feed"] h3,
#view[data-route="events"] h1,
#view[data-route="events"] h2,
#view[data-route="events"] h3,
#view[data-route="connections"] h1,
#view[data-route="connections"] h2,
#view[data-route="connections"] h3{color:var(--melte-chocolate)!important}

#view[data-route="feed"] .post,
#view[data-route="feed"] .card,
#view[data-route="feed"] .panel,
#view[data-route="events"] .card,
#view[data-route="events"] .panel,
#view[data-route="connections"] .card,
#view[data-route="connections"] .panel,
#view[data-route="connections"] .melte-network-card,
#view[data-route="connections"] .melte-network-row{
  background:var(--melte-paper)!important;
  color:var(--melte-chocolate)!important;
  border-color:rgba(91,42,26,.12)!important;
  box-shadow:0 16px 42px rgba(91,42,26,.09)!important;
}
#view[data-route="feed"] .post .pq,
#view[data-route="feed"] .post .ab,
#view[data-route="feed"] .post strong,
#view[data-route="feed"] .post b{color:var(--melte-chocolate)!important}
#view[data-route="feed"] .post .dim,
#view[data-route="feed"] .post .hint{color:rgba(91,42,26,.58)!important}
#view[data-route="feed"] .post .ab.on{color:var(--melte-red)!important}

#view[data-route="events"] .chip,
#view[data-route="connections"] .chip{
  color:var(--melte-chocolate)!important;
  background:rgba(255,255,255,.56)!important;
  border-color:rgba(91,42,26,.15)!important;
}
#view[data-route="events"] .chip.on,
#view[data-route="connections"] .chip.on{background:var(--melte-chocolate)!important;color:var(--melte-cream)!important;border-color:var(--melte-chocolate)!important}
#view[data-route="events"] .evh h1{color:var(--melte-chocolate)!important}
#view[data-route="events"] .evh p,
#view[data-route="events"] .sec-h,
#view[data-route="events"] .hint{color:rgba(91,42,26,.62)!important}
#view[data-route="events"] .evc,
#view[data-route="events"] .ptile{color:var(--melte-chocolate)!important}

#view[data-route="connections"] .melte-network-page{background:transparent!important;color:var(--melte-chocolate)!important}
#view[data-route="connections"] .melte-network-hero,
#view[data-route="connections"] .melte-network-tabs{color:var(--melte-chocolate)!important}
#view[data-route="connections"] .melte-network-row b,
#view[data-route="connections"] .melte-network-row span{color:inherit!important}

/* Cream route forms / inputs: never inherit pale text from the dark base. */
#view[data-route="feed"] input,
#view[data-route="feed"] textarea,
#view[data-route="events"] input,
#view[data-route="events"] textarea,
#view[data-route="connections"] input,
#view[data-route="connections"] textarea{
  color:var(--melte-chocolate)!important;
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(91,42,26,.15)!important;
}
#view[data-route="feed"] input::placeholder,
#view[data-route="events"] input::placeholder,
#view[data-route="connections"] input::placeholder{color:rgba(91,42,26,.45)!important}

/* Cream primary buttons: chocolate ink, red only for key actions. */
#view[data-route="feed"] .btn,
#view[data-route="events"] .btn,
#view[data-route="connections"] .btn{color:var(--melte-cream);background:var(--melte-chocolate);border-color:var(--melte-chocolate)}
#view[data-route="feed"] .btn.ghost,
#view[data-route="events"] .btn.ghost,
#view[data-route="connections"] .btn.ghost{color:var(--melte-chocolate);background:rgba(255,255,255,.5);border-color:rgba(91,42,26,.18)}

/* ---------- Shared safety: no accidental light-on-light UI ---------- */
#view[data-route="feed"] svg,
#view[data-route="events"] svg,
#view[data-route="connections"] svg{color:currentColor}
#view[data-route="feed"] .badge:not(.cherry),
#view[data-route="events"] .badge:not(.cherry),
#view[data-route="connections"] .badge:not(.cherry){background:rgba(91,42,26,.08)!important;color:var(--melte-chocolate)!important}

/* ---------- Super Melted: delicate cherry glaze (ice-cream topping) ---------- */
.super-melted-card{isolation:isolate!important;overflow:hidden!important}
.super-melted-layer{position:absolute!important;inset:0!important;z-index:8!important;pointer-events:none!important;overflow:hidden!important;border-radius:inherit!important;box-shadow:inset 0 0 30px rgba(225,29,63,.22)!important}
.super-melted-layer:before,.super-melted-layer:after{content:none!important}
.sm-rim{position:absolute;inset:0;border-radius:inherit;padding:2px;
  background:linear-gradient(125deg,rgba(109,6,24,.9) 0%,rgba(225,29,63,.95) 30%,rgba(255,160,175,.95) 46%,rgba(225,29,63,.95) 58%,rgba(109,6,24,.9) 100%) 0 0/300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:smSheen 9s linear infinite}
.sm-svg{position:absolute;left:0;top:0;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 3px 4px rgba(60,0,12,.5))}
.sm-d{animation:smCreep 7s cubic-bezier(.45,.05,.4,1) infinite}
.sm-fall{opacity:0;animation:smFall 7s cubic-bezier(.5,.05,.7,.6) infinite}
@keyframes smCreep{0%{transform:scaleY(.9)}60%{transform:scaleY(1.1)}68%{transform:scaleY(1.02)}100%{transform:scaleY(.9)}}
@keyframes smFall{0%,60%{opacity:0;transform:translateY(0) scale(.55)}64%{opacity:.95;transform:translateY(3px) scale(1)}100%{opacity:0;transform:translateY(var(--fall)) scale(.85,1.2)}}
@keyframes smSheen{0%{background-position:0 0}100%{background-position:300% 300%}}
.super-melted-pill{position:absolute!important;top:30px!important;left:20px!important;padding:7px 11px!important;border-radius:999px!important;background:rgba(253,235,208,.92)!important;color:#5B2A1A!important;font:800 10px/1 Montserrat,sans-serif!important;letter-spacing:.17em!important;box-shadow:0 8px 24px rgba(0,0,0,.2)!important;backdrop-filter:blur(12px);display:inline-flex;align-items:center;gap:7px}
.super-melted-pill i{width:8px;height:8px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#E10600;box-shadow:0 0 8px rgba(225,6,0,.8)}
.super-melted-banner{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid rgba(225,6,0,.32);border-radius:20px;background:linear-gradient(135deg,rgba(225,6,0,.16),rgba(255,154,162,.08));box-shadow:0 10px 32px rgba(225,6,0,.12);margin-bottom:4px}
.super-melted-banner strong{display:block;color:#FDEBD0!important;font-size:13px;margin-top:3px}
.super-melted-banner .label{color:#FF9AA2!important;letter-spacing:.15em;font-size:9px}
.super-melted-symbol{width:56px!important;height:56px!important;flex:0 0 56px!important;border-radius:17px;background:#E10600 url('../brand/melte-symbol-red.png') center/contain no-repeat!important;box-shadow:0 0 28px rgba(225,6,0,.3);font-size:0!important}

/* ---------- Demo visibility ---------- */
.melte-demo-note{display:flex;align-items:flex-start;gap:12px;margin:0 22px 10px;padding:12px 14px;border:1px solid rgba(255,154,162,.22);border-radius:18px;background:rgba(225,6,0,.08);color:#FDEBD0}
.melte-demo-note strong{display:block;color:#FDEBD0;margin-bottom:2px}
.melte-demo-note span{display:block;color:rgba(253,235,208,.66);font-size:12px;line-height:1.5}
.melte-demo-note .demo-mark{width:28px;height:28px;flex:0 0 28px;border-radius:9px;background:#E10600 url('../brand/melte-symbol-red.png') center/contain no-repeat}

/* ---------- Login / entry surfaces stay dark ---------- */
#stage .ob{color:#FDEBD0!important}
#stage .ob .dim,#stage .ob .hint,#stage .ob .label{color:rgba(253,235,208,.68)!important}
#stage .ob h1,#stage .ob h2,#stage .ob h3{color:#FDEBD0!important}

@media(max-width:680px){
  .super-melted-pill{top:15px!important;left:15px!important;font-size:8px!important}
  .melte-demo-note{margin-inline:16px}
}
@media(prefers-reduced-motion:reduce){.sm-rim,.sm-d,.sm-fall{animation:none!important}.sm-fall{display:none}}

/* =========================================================
   DISCOVER — PORTRAIT STORY CARD
   The Discover profile is intentionally 9:16 on mobile and desktop.
   Never stretch it into a landscape card.
   ========================================================= */
#view[data-route="discover"] .px-deck{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:0 !important;
  padding:6px 18px 0 !important;
}

#view[data-route="discover"] .px-deck .deck{
  position:relative !important;
  flex:0 0 auto !important;
  width:auto !important;
  height:min(66vh, 650px) !important;
  max-height:650px !important;
  max-width:calc(100vw - 56px) !important;
  aspect-ratio:9 / 16 !important;
  margin:0 auto !important;
}

#view[data-route="discover"] .px-deck .dcard{
  border-radius:30px !important;
  aspect-ratio:9 / 16 !important;
  box-shadow:0 26px 70px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.10) !important;
}

#view[data-route="discover"] .px-deck .dcard .dm{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 38% !important;
}

/* Give the story image the visual priority; content sits over the lower image. */
#view[data-route="discover"] .px-deck .dcard .dinfo{
  padding:24px 20px 22px !important;
  gap:7px !important;
}

#view[data-route="discover"] .px-deck .dcard .dinfo h2{
  font-size:29px !important;
  line-height:1.05 !important;
}

#view[data-route="discover"] .px-deck .dcard .dinfo p{
  font-size:13px !important;
  -webkit-line-clamp:2 !important;
}

/* Keep the Super Melted liquid signature aligned to the portrait frame. */
#view[data-route="discover"] .super-melted-layer,
#view[data-route="discover"] .super-melted-layer:before{
  border-radius:30px !important;
}



#view[data-route="discover"] .px-actions{
  flex:0 0 auto !important;
  padding:12px 22px 18px !important;
}

@media (max-width:680px){
  #view[data-route="discover"] .px-deck{
    padding:4px 12px 0 !important;
  }

  #view[data-route="discover"] .px-deck .deck{
    height:min(64vh, 610px) !important;
    max-height:610px !important;
    max-width:calc(100vw - 44px) !important;
  }

  #view[data-route="discover"] .px-deck .dcard{
    border-radius:27px !important;
  }

  #view[data-route="discover"] .px-deck .dcard .dinfo{
    padding:22px 18px 20px !important;
  }

  #view[data-route="discover"] .px-deck .dcard .dinfo h2{
    font-size:27px !important;
  }

  #view[data-route="discover"] .super-melted-layer,
  #view[data-route="discover"] .super-melted-layer:before{
    border-radius:27px !important;
  }
}

@media (max-height:760px) and (max-width:680px){
  #view[data-route="discover"] .px-deck .deck{
    height:min(56vh, 500px) !important;
    max-height:500px !important;
  }
}

/* =========================================================
   DISCOVER — MOBILE IMMERSIVE STORY MODE v2
   Goal: one profile at a time. Do not expose the entire
   dashboard stack above the photo on a phone/browser viewport.
   ========================================================= */
@media (max-width:680px){
  #view[data-route="discover"]{
    overflow:hidden !important;
    padding-bottom:0 !important;
  }

  #view[data-route="discover"] .px-disc{
    height:100dvh !important;
    min-height:0 !important;
    max-width:none !important;
    overflow:hidden !important;
    padding-bottom:0 !important;
  }

  /* Compact app header: keep navigation, remove excess vertical chrome. */
  #view[data-route="discover"] .px-head{
    flex:0 0 auto !important;
    height:58px !important;
    box-sizing:border-box !important;
    padding:8px 14px 6px !important;
    gap:10px !important;
  }
  #view[data-route="discover"] .px-head .wordmark img{height:20px !important}
  #view[data-route="discover"] .px-title strong{font-size:20px !important}
  #view[data-route="discover"] .px-title span{font-size:9px !important;margin-top:2px !important}
  #view[data-route="discover"] .px-tool{width:38px !important;height:38px !important;border-radius:13px !important}
  #view[data-route="discover"] .px-tools{gap:5px !important}

  /* Category switcher is the only secondary navigation kept visible. */
  #view[data-route="discover"] .px-tabs{
    flex:0 0 auto !important;
    height:44px !important;
    box-sizing:border-box !important;
    padding:2px 14px 8px !important;
    gap:6px !important;
  }
  #view[data-route="discover"] .px-tabs .chip{
    min-height:34px !important;
    padding:0 14px !important;
    white-space:nowrap !important;
  }

  /* Demo explanation and location/filter row are intentionally not in the
     mobile visual stack. The profile itself communicates Super Melted. */
  #view[data-route="discover"] .melte-demo-note,
  #view[data-route="discover"] .px-context{
    display:none !important;
  }

  /* The profile is the screen. 9:16, centered, with no landscape fallback. */
  #view[data-route="discover"] .px-deck{
    position:relative !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 0 8px !important;
    overflow:visible !important;
  }
  #view[data-route="discover"] .px-deck .deck{
    width:min(88vw, 390px) !important;
    height:auto !important;
    max-width:390px !important;
    max-height:calc(100dvh - 178px) !important;
    aspect-ratio:9 / 16 !important;
  }
  #view[data-route="discover"] .px-deck .dcard{
    width:100% !important;
    height:100% !important;
    aspect-ratio:9 / 16 !important;
    border-radius:26px !important;
  }
  #view[data-route="discover"] .px-deck .dcard .dm{
    object-fit:cover !important;
    object-position:center center !important;
  }

  /* Less copy on the image; this is a visual discovery surface, not a profile page. */
  #view[data-route="discover"] .dcard .dinfo{
    padding:18px 17px 70px !important;
  }
  #view[data-route="discover"] .dcard .dinfo h2{font-size:27px !important}
  #view[data-route="discover"] .dcard .dinfo p{
    font-size:12px !important;
    line-height:1.4 !important;
    -webkit-line-clamp:2 !important;
  }
  #view[data-route="discover"] .dcard .dinfo .tags{font-size:10px !important}
  #view[data-route="discover"] .dcard .dinfo .city{font-size:11px !important}

  /* Actions float at the bottom of the story instead of creating a second
     large row that pushes the next profile below the fold. */
  #view[data-route="discover"] .px-actions{
    position:absolute !important;
    z-index:20 !important;
    left:50% !important;
    bottom:14px !important;
    transform:translateX(-50%) !important;
    width:auto !important;
    padding:0 !important;
    gap:12px !important;
    pointer-events:none !important;
  }
  #view[data-route="discover"] .px-actions .rb{pointer-events:auto !important}
  #view[data-route="discover"] .px-actions .rb.pass{width:52px !important;height:52px !important}
  #view[data-route="discover"] .px-actions .rb.sup{width:54px !important;height:54px !important}
  #view[data-route="discover"] .px-actions .rb.like{width:64px !important;height:64px !important}

  /* Story controls sit inside the image, like a real mobile discovery surface. */
  #view[data-route="discover"] .dsegs{
    top:10px !important;
    left:10px !important;
    right:10px !important;
  }
  #view[data-route="discover"] .super-melted-pill{
    top:42px !important;
    left:14px !important;
    z-index:12 !important;
  }

  /* Remove the instructional card from the first viewport. */
  #view[data-route="discover"] .px-hint{display:none !important}
}

/* Extra-short phones: preserve portrait photos without forcing a landscape card. */
@media (max-width:680px) and (max-height:720px){
  #view[data-route="discover"] .px-head{height:52px !important}
  #view[data-route="discover"] .px-tabs{height:40px !important;padding-bottom:5px !important}
  #view[data-route="discover"] .px-deck .deck{max-height:calc(100dvh - 146px) !important}
  #view[data-route="discover"] .px-actions{bottom:8px !important}
}

/* Super Melted (Discover): pill sits just under the syrup band */
#view[data-route="discover"] .super-melted-pill{top:44px!important;left:16px!important;z-index:12!important;border:1px solid rgba(91,42,26,.10)!important;box-shadow:0 8px 18px rgba(0,0,0,.22)!important}
#view[data-route="discover"] .super-melted-card{overflow:hidden!important;isolation:isolate!important}
#view[data-route="discover"] .super-melted-layer{inset:0!important}

/* ================================================================
   MELTE — DARK RED ROUTES
   Feed / Events / Network use the same low-luminance family as the
   rest of the app. Cream remains a text/accent color, never a page
   background, so route changes do not produce a bright visual flash.
   ================================================================ */
#view[data-route="feed"],
#view[data-route="events"],
#view[data-route="connections"]{
  --onyx:#240707;
  --s1:#2d0909;
  --s2:#351010;
  --s3:#421313;
  --fg:#FDEBD0;
  --dim:rgba(253,235,208,.70);
  --faint:rgba(253,235,208,.42);
  --line:rgba(253,235,208,.13);
  --line2:rgba(253,235,208,.22);
  --nude:#FDEBD0;
  --rose:#FF9AA2;
  --cherry:#E10600;
  --cream:#FDEBD0;
  --ink:#FDEBD0;
  background:
    radial-gradient(850px 430px at 50% -130px,rgba(225,6,0,.18),transparent 68%),
    linear-gradient(180deg,#2a0808 0%,#1f0606 48%,#140404 100%)!important;
  color:var(--fg)!important;
}

#view[data-route="feed"] .page,
#view[data-route="events"] .page,
#view[data-route="connections"] .page,
#view[data-route="connections"] .melte-network-page{
  background:transparent!important;
  color:var(--fg)!important;
}

#view[data-route="feed"] h1,
#view[data-route="feed"] h2,
#view[data-route="feed"] h3,
#view[data-route="events"] h1,
#view[data-route="events"] h2,
#view[data-route="events"] h3,
#view[data-route="connections"] h1,
#view[data-route="connections"] h2,
#view[data-route="connections"] h3,
#view[data-route="connections"] .melte-network-hero,
#view[data-route="connections"] .melte-network-tabs{
  color:var(--fg)!important;
}

#view[data-route="feed"] .label,
#view[data-route="feed"] .dim,
#view[data-route="feed"] .hint,
#view[data-route="events"] .label,
#view[data-route="events"] .dim,
#view[data-route="events"] .hint,
#view[data-route="connections"] .label,
#view[data-route="connections"] .dim,
#view[data-route="connections"] .hint{
  color:var(--dim)!important;
}

/* Cards become dark glass instead of cream paper. */
#view[data-route="feed"] .post,
#view[data-route="feed"] .card,
#view[data-route="feed"] .panel,
#view[data-route="events"] .card,
#view[data-route="events"] .panel,
#view[data-route="connections"] .card,
#view[data-route="connections"] .panel,
#view[data-route="connections"] .melte-network-card,
#view[data-route="connections"] .melte-network-row,
#view[data-route="events"] .evc,
#view[data-route="events"] .ptile{
  background:rgba(255,255,255,.045)!important;
  color:var(--fg)!important;
  border-color:rgba(253,235,208,.11)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.28)!important;
}

#view[data-route="feed"] .post .pq,
#view[data-route="feed"] .post .ab,
#view[data-route="feed"] .post strong,
#view[data-route="feed"] .post b,
#view[data-route="events"] .evc,
#view[data-route="events"] .ptile,
#view[data-route="connections"] .melte-network-row b,
#view[data-route="connections"] .melte-network-row span{
  color:var(--fg)!important;
}

#view[data-route="feed"] .post .dim,
#view[data-route="feed"] .post .hint,
#view[data-route="events"] .evh p,
#view[data-route="events"] .sec-h,
#view[data-route="events"] .hint{
  color:var(--dim)!important;
}

/* Controls stay dark; red is reserved for active / important states. */
#view[data-route="feed"] .topbar .ibtn,
#view[data-route="events"] .topbar .ibtn,
#view[data-route="connections"] .topbar .ibtn,
#view[data-route="events"] .chip,
#view[data-route="connections"] .chip{
  color:var(--fg)!important;
  background:rgba(255,255,255,.035)!important;
  border-color:var(--line)!important;
}

#view[data-route="events"] .chip.on,
#view[data-route="connections"] .chip.on{
  background:var(--cherry)!important;
  color:#fff7f4!important;
  border-color:var(--cherry)!important;
}

#view[data-route="feed"] .post .ab.on{color:var(--cherry)!important}

#view[data-route="feed"] input,
#view[data-route="feed"] textarea,
#view[data-route="events"] input,
#view[data-route="events"] textarea,
#view[data-route="connections"] input,
#view[data-route="connections"] textarea{
  color:var(--fg)!important;
  background:rgba(255,255,255,.045)!important;
  border-color:var(--line)!important;
}
#view[data-route="feed"] input::placeholder,
#view[data-route="events"] input::placeholder,
#view[data-route="connections"] input::placeholder{
  color:var(--faint)!important;
}

#view[data-route="feed"] .btn,
#view[data-route="events"] .btn,
#view[data-route="connections"] .btn{
  color:#fff7f4!important;
  background:var(--cherry)!important;
  border-color:var(--cherry)!important;
}
#view[data-route="feed"] .btn.ghost,
#view[data-route="events"] .btn.ghost,
#view[data-route="connections"] .btn.ghost{
  color:var(--fg)!important;
  background:rgba(255,255,255,.035)!important;
  border-color:var(--line)!important;
}

/* Kill common legacy light surfaces on these three routes. */
#view[data-route="feed"] [style*="background:#FDEBD0"],
#view[data-route="feed"] [style*="background: #FDEBD0"],
#view[data-route="events"] [style*="background:#FDEBD0"],
#view[data-route="events"] [style*="background: #FDEBD0"],
#view[data-route="connections"] [style*="background:#FDEBD0"],
#view[data-route="connections"] [style*="background: #FDEBD0"]{
  background:transparent!important;
}

/* Super Melted banner (profile): syrup edge with small drips */
.super-melted-banner{position:relative;overflow:hidden;padding-top:20px!important}
.super-melted-banner:before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:linear-gradient(180deg,#6a0012,#E10600);box-shadow:inset 0 1px 0 rgba(255,140,155,.55)}
.super-melted-banner:after{content:"";position:absolute;left:0;right:0;top:7px;height:12px;pointer-events:none;
  background:radial-gradient(ellipse 5px 11px at 50% 0,#E10600 96%,transparent) 14% 0/auto 11px no-repeat,
             radial-gradient(ellipse 4px 7px at 50% 0,#c4001a 96%,transparent) 38% 0/auto 7px no-repeat,
             radial-gradient(ellipse 6px 12px at 50% 0,#E10600 96%,transparent) 63% 0/auto 12px no-repeat,
             radial-gradient(ellipse 4px 8px at 50% 0,#c4001a 96%,transparent) 86% 0/auto 8px no-repeat;
  animation:smBannerDrip 5.5s ease-in-out infinite}
@keyframes smBannerDrip{0%,100%{transform:scaleY(.6);transform-origin:top}50%{transform:scaleY(1.25);transform-origin:top}}
@media(prefers-reduced-motion:reduce){.super-melted-banner:after{animation:none!important}}

/* =========================================================================
   MOBILE UX v3 — DISCOVER CARD + PROFILE
   One clean layout contract (replaces the stacked overrides above on phones):
   • the card ends ABOVE the bottom tab bar (nothing is hidden behind it)
   • Pass / Super / Like float inside the card's lower edge
   • text is reserved its own space above the buttons — never clipped
   ========================================================================= */
@media (max-width:680px){
  #view[data-route="discover"]{--nav-h:calc(72px + env(safe-area-inset-bottom,0px));--act-h:58px}

  #view[data-route="discover"] .px-disc{display:flex!important;flex-direction:column!important;height:100dvh!important}
  #view[data-route="discover"] .px-deck{
    flex:1 1 0!important;min-height:0!important;align-items:stretch!important;justify-content:center!important;
    padding:6px 12px calc(var(--nav-h) + 10px)!important}
  #view[data-route="discover"] .px-deck .deck{
    width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;
    aspect-ratio:auto!important;margin:0!important}
  #view[data-route="discover"] .px-deck .dcard{aspect-ratio:auto!important;border-radius:28px!important}
  #view[data-route="discover"] .super-melted-layer{border-radius:28px!important}

  /* text block: sits on a soft scrim, leaves room for the action buttons */
  #view[data-route="discover"] .px-deck .dcard .dgrad{background:linear-gradient(180deg,rgba(13,13,13,0) 34%,rgba(13,13,13,.55) 58%,rgba(13,13,13,.94) 100%)!important}
  #view[data-route="discover"] .px-deck .dcard .dinfo{
    padding:0 18px calc(var(--act-h) + 26px)!important;gap:6px!important}
  #view[data-route="discover"] .px-deck .dcard .dinfo h2{font-size:27px!important;line-height:1.08!important}
  #view[data-route="discover"] .px-deck .dcard .dinfo .city{font-size:11px!important;letter-spacing:.14em!important}
  #view[data-route="discover"] .px-deck .dcard .dinfo .tags{font-size:11px!important}
  #view[data-route="discover"] .px-deck .dcard .dinfo p{font-size:13px!important;line-height:1.42!important;-webkit-line-clamp:2!important}
  #view[data-route="discover"] .px-deck .dcard .dinfo .badge{font-size:10px!important;padding:6px 10px!important;width:fit-content}

  /* actions: inside the card, above the tab bar */
  #view[data-route="discover"] .px-actions{
    position:absolute!important;left:50%!important;transform:translateX(-50%)!important;
    bottom:calc(var(--nav-h) + 24px)!important;z-index:20!important;padding:0!important;gap:14px!important;
    width:auto!important;height:var(--act-h)!important;align-items:center!important;pointer-events:none!important}
  #view[data-route="discover"] .px-actions .rb{pointer-events:auto!important;box-shadow:0 8px 22px rgba(0,0,0,.45)!important}
  #view[data-route="discover"] .px-actions .rb.pass{width:50px!important;height:50px!important}
  #view[data-route="discover"] .px-actions .rb.sup{width:46px!important;height:46px!important}
  #view[data-route="discover"] .px-actions .rb.like{width:58px!important;height:58px!important}
  #view[data-route="discover"] .px-hint{display:none!important}
}
/* short phones: trade secondary copy for photo */
@media (max-width:680px) and (max-height:720px){
  #view[data-route="discover"]{--act-h:50px}
  #view[data-route="discover"] .px-deck .dcard .dinfo h2{font-size:23px!important}
  #view[data-route="discover"] .px-deck .dcard .dinfo .tags{display:none!important}
  #view[data-route="discover"] .px-deck .dcard .dinfo p{-webkit-line-clamp:1!important}
  #view[data-route="discover"] .px-actions .rb.pass{width:44px!important;height:44px!important}
  #view[data-route="discover"] .px-actions .rb.sup{width:40px!important;height:40px!important}
  #view[data-route="discover"] .px-actions .rb.like{width:50px!important;height:50px!important}
}

/* Profile detail (people + groups): hero never swallows the whole first screen,
   so name, bio and members are visible without hunting for them. */
@media (max-width:680px){
  .profile-detail .pd-hero{height:min(54vh,470px)!important}
  .profile-detail .pd-hero:has(.ggrid){height:min(42vh,360px)!important}
  .profile-detail .pd-body{margin-top:-60px!important;gap:22px!important}
  .profile-detail .pd-name{font-size:clamp(28px,8vw,38px)!important;gap:8px!important;line-height:1.08!important}
  .profile-detail .pd-body>p{font-size:15.5px!important;line-height:1.62!important;max-width:none!important;position:relative;z-index:2}
  .profile-detail .pd-body{padding-bottom:150px!important}
}

/* polish */
@media (max-width:680px){
  #view[data-route="discover"] .gcardd .gwrap{inset:0 0 36% 0!important}
  .profile-detail .pd-hero:has(.ggrid)+.pd-body{margin-top:-24px!important}
}
@media (max-width:380px){
  .tabbar .tab{font-size:8.5px!important;letter-spacing:.05em!important}
}


/* ================================================================
   MELTE WELCOME — FIXED HERO / COMPACT DESKTOP UX
   Background is visual only; all CTAs remain real HTML <button>s.
   ================================================================ */
.ob:has(.melte-ob-intro){
  position:relative!important;
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
  background:#0b0707!important;
}
.ob:has(.melte-ob-intro) .ob-bg{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  overflow:hidden!important;
}
.ob:has(.melte-ob-intro) .ob-bg img.ph{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  filter:none!important;
}
.ob:has(.melte-ob-intro) .ob-bg::after{
  background:linear-gradient(180deg,rgba(8,5,5,.16) 0%,rgba(8,5,5,.06) 45%,rgba(8,5,5,.48) 100%)!important;
}
.ob:has(.melte-ob-intro) .body{
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.ob:has(.melte-ob-intro) .body .inner{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  padding:0!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  pointer-events:none!important;
}
.ob:has(.melte-ob-intro) .body .hero-logo{
  position:absolute!important;
  top:4.5vh!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:min(250px,25vw)!important;
  max-height:18vh!important;
  object-fit:contain!important;
  z-index:8!important;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))!important;
}
.ob:has(.melte-ob-intro) .melte-ob-intro,
.ob:has(.melte-ob-intro) .melte-ob-benefits{
  visibility:hidden!important;
  pointer-events:none!important;
}
.ob:has(.melte-ob-intro) .foot{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:20!important;
  padding:0 18px max(12px,env(safe-area-inset-bottom,0px))!important;
  background:linear-gradient(180deg,transparent 0%,rgba(7,4,4,.82) 35%,rgba(7,4,4,.96) 100%)!important;
  pointer-events:auto!important;
}
.ob:has(.melte-ob-intro) .foot .inner{
  width:min(480px,calc(100vw - 36px))!important;
  margin:0 auto!important;
  padding:26px 0 0!important;
  display:grid!important;
  gap:9px!important;
}
.ob:has(.melte-ob-intro) .foot .btn.block{
  width:100%!important;
  height:50px!important;
  min-height:50px!important;
  padding:0 18px!important;
  border-radius:15px!important;
  font-size:13px!important;
  letter-spacing:.015em!important;
}
.ob:has(.melte-ob-intro) .foot .hint{
  margin:2px auto 0!important;
  font-size:10px!important;
  line-height:1.35!important;
  max-width:520px!important;
}
.ob:has(.melte-ob-intro) .foot .btn.ghost{
  background:rgba(8,5,5,.34)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
@media(max-width:700px){
  .ob:has(.melte-ob-intro) .body .hero-logo{
    top:4vh!important;
    width:min(210px,42vw)!important;
  }
  .ob:has(.melte-ob-intro) .foot .inner{
    width:min(430px,calc(100vw - 28px))!important;
    padding-top:18px!important;
  }
  .ob:has(.melte-ob-intro) .foot .btn.block{
    height:48px!important;
    min-height:48px!important;
    font-size:12px!important;
  }
  .ob:has(.melte-ob-intro) .foot .hint{font-size:9px!important}
}
@media(max-height:720px) and (min-width:701px){
  .ob:has(.melte-ob-intro) .body .hero-logo{
    top:2.5vh!important;
    width:210px!important;
    max-height:14vh!important;
  }
  .ob:has(.melte-ob-intro) .foot .inner{padding-top:14px!important;gap:7px!important}
  .ob:has(.melte-ob-intro) .foot .btn.block{
    height:44px!important;
    min-height:44px!important;
  }
}

/* MELTE v15 — clean image + real HTML welcome copy */
.ob:has(.melte-ob-intro) .body{
  z-index:5!important;
}
.ob:has(.melte-ob-intro) .body .inner{
  pointer-events:none!important;
}
.ob:has(.melte-ob-intro) .body .hero-logo{
  pointer-events:none!important;
}
.ob:has(.melte-ob-intro) .melte-ob-intro{
  visibility:visible!important;
  pointer-events:none!important;
  position:absolute!important;
  left:50%!important;
  top:24%!important;
  transform:translateX(-50%)!important;
  width:min(720px,88vw)!important;
  text-align:center!important;
  z-index:7!important;
}
.ob:has(.melte-ob-intro) .melte-ob-intro *{
  visibility:visible!important;
}
.ob:has(.melte-ob-intro) .melte-ob-intro h1,
.ob:has(.melte-ob-intro) .melte-ob-intro .title{
  font-size:clamp(34px,4.2vw,62px)!important;
  line-height:1.05!important;
  margin:10px auto 18px!important;
}
.ob:has(.melte-ob-intro) .melte-ob-intro p{
  font-size:clamp(14px,1.35vw,20px)!important;
  line-height:1.55!important;
  max-width:680px!important;
  margin:0 auto!important;
}
.ob:has(.melte-ob-intro) .melte-ob-intro .eyebrow,
.ob:has(.melte-ob-intro) .melte-ob-intro .kicker{
  font-size:12px!important;
  letter-spacing:.22em!important;
}
.ob:has(.melte-ob-intro) .melte-ob-benefits{
  visibility:hidden!important;
}
@media(max-width:700px){
  .ob:has(.melte-ob-intro) .melte-ob-intro{
    top:20%!important;
    width:calc(100vw - 34px)!important;
  }
  .ob:has(.melte-ob-intro) .melte-ob-intro h1,
  .ob:has(.melte-ob-intro) .melte-ob-intro .title{
    font-size:34px!important;
  }
}

/* =========================================================
   MELTE ADMIN — DARK CONSOLE
   High-contrast admin surface so light text is always readable.
   ========================================================= */
html:has(body .melte-admin-shell),
body:has(.melte-admin-shell){
  background:#0b0708!important;
  color:#f8eee9!important;
}
body:has(.melte-admin-shell){
  min-height:100vh!important;
  background:
    radial-gradient(circle at 85% 0%, rgba(145,0,25,.22), transparent 34%),
    radial-gradient(circle at 10% 10%, rgba(80,15,25,.18), transparent 30%),
    #0b0708!important;
}
body:has(.melte-admin-shell) *{
  box-sizing:border-box;
}
.melte-admin-shell{
  min-height:100vh!important;
  background:transparent!important;
  color:#f8eee9!important;
}
.melte-admin-shell .admin-topbar,
.melte-admin-shell header,
.melte-admin-shell .topbar{
  background:rgba(18,10,11,.94)!important;
  border-color:rgba(255,220,210,.14)!important;
  color:#f8eee9!important;
}
.melte-admin-shell .card,
.melte-admin-shell .panel,
.melte-admin-shell .stat,
.melte-admin-shell .table-wrap,
.melte-admin-shell .review-card,
.melte-admin-shell .profile-card,
.melte-admin-shell .admin-card,
.melte-admin-shell .section{
  background:rgba(24,13,15,.94)!important;
  border:1px solid rgba(255,220,210,.14)!important;
  color:#f8eee9!important;
  box-shadow:0 18px 55px rgba(0,0,0,.28)!important;
}
.melte-admin-shell h1,
.melte-admin-shell h2,
.melte-admin-shell h3,
.melte-admin-shell h4,
.melte-admin-shell strong,
.melte-admin-shell b,
.melte-admin-shell label{
  color:#fff4ef!important;
}
.melte-admin-shell p,
.melte-admin-shell span,
.melte-admin-shell small,
.melte-admin-shell .muted,
.melte-admin-shell .subtle{
  color:#d8c4be!important;
}
.melte-admin-shell table,
.melte-admin-shell th,
.melte-admin-shell td{
  color:#f8eee9!important;
  border-color:rgba(255,220,210,.12)!important;
}
.melte-admin-shell th{
  background:#211214!important;
  color:#ffd8ce!important;
}
.melte-admin-shell tr:hover td{
  background:rgba(225,6,0,.08)!important;
}
.melte-admin-shell input,
.melte-admin-shell textarea,
.melte-admin-shell select{
  background:#120b0c!important;
  color:#fff4ef!important;
  border:1px solid rgba(255,220,210,.2)!important;
}
.melte-admin-shell input::placeholder,
.melte-admin-shell textarea::placeholder{
  color:#a9918b!important;
}
.melte-admin-shell button{
  color:#fff4ef!important;
}
.melte-admin-shell .btn,
.melte-admin-shell button{
  border-color:rgba(255,220,210,.2)!important;
}
.melte-admin-shell .btn.primary,
.melte-admin-shell .primary,
.melte-admin-shell button[data-action="approve"]{
  background:#d7072b!important;
  color:white!important;
  border-color:#d7072b!important;
}
.melte-admin-shell .btn.danger,
.melte-admin-shell .danger,
.melte-admin-shell button[data-action="reject"]{
  background:#3a1118!important;
  color:#ffb7bd!important;
  border-color:#8f2638!important;
}
.melte-admin-shell .tabs button,
.melte-admin-shell .tab{
  background:#160d0f!important;
  color:#d9c5bf!important;
  border-color:rgba(255,220,210,.12)!important;
}
.melte-admin-shell .tabs button.active,
.melte-admin-shell .tab.active{
  background:#d7072b!important;
  color:white!important;
  border-color:#d7072b!important;
}
.melte-admin-shell .badge,
.melte-admin-shell .status{
  background:#2a1719!important;
  color:#ffd7cd!important;
  border-color:rgba(255,220,210,.16)!important;
}
.melte-admin-shell a{
  color:#ffb7bd!important;
}
.melte-admin-shell .notice.error{
  background:#351318!important;
  color:#ffc4c8!important;
  border-color:#9d3444!important;
}
.melte-admin-shell .notice.success{
  background:#14231c!important;
  color:#b9f0d0!important;
  border-color:#2e7750!important;
}

/* ================================================================
   V65 — DISCOVER PROFILE CARD FIX (APPLIED TO LIVE ASSET CSS)
   Desktop: true horizontal card, same width as location row.
   Mobile: keep vertical discovery card.
   Media: never crop; preserve full source image.
   ================================================================ */
@media (min-width:681px){
  #view[data-route="discover"] .px-deck{
    width:auto !important;
    height:clamp(390px,52vh,560px) !important;
    min-height:390px !important;
    max-height:560px !important;
    margin:0 !important;
    padding:0 22px !important;
    display:block !important;
    position:relative !important;
    overflow:visible !important;
  }

  #view[data-route="discover"] .px-deck .deck{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    position:relative !important;
  }

  #view[data-route="discover"] .px-deck .dcard{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
    display:block !important;
    border-radius:28px !important;
    overflow:hidden !important;
  }

  /* Photo occupies the left side. The complete image is always visible. */
  #view[data-route="discover"] .px-deck .dcard .dmwrap{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    right:auto !important;
    width:44% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#090807 !important;
  }

  #view[data-route="discover"] .px-deck .dcard .dm,
  #view[data-route="discover"] .px-deck .dcard .dmwrap img,
  #view[data-route="discover"] .px-deck .dcard .dmwrap video{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
  }

  /* Information occupies the right side, never over the photo. */
  #view[data-route="discover"] .px-deck .dcard .dgrad{
    left:44% !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    background:linear-gradient(90deg,rgba(13,13,13,.15) 0%,rgba(13,13,13,.96) 14%,rgba(13,13,13,.99) 100%) !important;
  }

  #view[data-route="discover"] .px-deck .dcard .dinfo{
    left:44% !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    padding:42px 48px 36px !important;
    justify-content:flex-end !important;
    gap:9px !important;
    z-index:5 !important;
  }

  #view[data-route="discover"] .px-deck .dcard .dinfo h2{
    font-size:clamp(30px,3vw,42px) !important;
    line-height:1.05 !important;
  }

  #view[data-route="discover"] .px-deck .dcard .dinfo p{
    max-width:50ch !important;
    font-size:14px !important;
    line-height:1.5 !important;
    -webkit-line-clamp:3 !important;
  }

  /* Media indicators remain attached to the photo area. */
  #view[data-route="discover"] .px-deck .dcard .dsegs{
    left:16px !important;
    right:auto !important;
    width:calc(44% - 32px) !important;
    z-index:8 !important;
  }

  /* Going/event badge stays inside the photo area. */
  #view[data-route="discover"] .px-deck .dcard > .badge{
    left:16px !important;
    right:auto !important;
    top:28px !important;
    z-index:9 !important;
  }

  #view[data-route="discover"] .px-deck .dcard .super-melted-layer{
    z-index:10 !important;
    pointer-events:none !important;
  }

  #view[data-route="discover"] .px-deck .dcard .super-melted-pill{
    z-index:12 !important;
  }

  #view[data-route="discover"] .px-actions{
    position:relative !important;
    z-index:30 !important;
    padding:14px 22px 24px !important;
  }
}

/* Smaller desktop screens: reduce height but keep the same horizontal layout. */
@media (min-width:681px) and (max-height:800px){
  #view[data-route="discover"] .px-deck{
    height:clamp(340px,48vh,460px) !important;
    min-height:340px !important;
    max-height:460px !important;
  }
  #view[data-route="discover"] .px-deck .dcard .dinfo{
    padding:32px 38px 28px !important;
  }
}

/* Mobile: vertical card remains intentional. */
@media (max-width:680px){
  #view[data-route="discover"] .px-deck .dcard .dm,
  #view[data-route="discover"] .px-deck .dcard .dmwrap img,
  #view[data-route="discover"] .px-deck .dcard .dmwrap video{
    object-fit:cover !important;
  }
}

/* MELTE V66 — SUPER MELTED: red blinking lights, no cherry drip */
.super-melted-lights{position:absolute!important;inset:0!important;z-index:8!important;pointer-events:none!important;overflow:hidden!important;border-radius:inherit!important;box-shadow:inset 0 0 34px rgba(225,6,0,.13)!important;background:transparent!important}
.super-melted-lights .sm-light-field{position:absolute;left:0;right:0;top:0;height:54px;display:block;pointer-events:none!important}
.super-melted-lights .sm-light{position:absolute;left:var(--x);top:10px;width:var(--size);height:var(--size);border-radius:50%;background:#ff1b1b;box-shadow:0 0 5px rgba(255,27,27,.95),0 0 12px rgba(225,6,0,.72),0 0 22px rgba(225,6,0,.35);transform:translateX(-50%);animation:smBlink 1.35s ease-in-out infinite;animation-delay:var(--delay);}
.super-melted-lights .sm-light:nth-child(2n){top:17px}
.super-melted-lights .sm-light:nth-child(3n){top:7px}
.super-melted-lights .super-melted-pill{z-index:12!important}
@keyframes smBlink{0%,100%{opacity:.28;transform:translateX(-50%) scale(.72);filter:brightness(.8)}45%{opacity:1;transform:translateX(-50%) scale(1.12);filter:brightness(1.45)}60%{opacity:.72;transform:translateX(-50%) scale(.92);filter:brightness(1.1)}}
@media(prefers-reduced-motion:reduce){.super-melted-lights .sm-light{animation:none!important;opacity:.78!important;transform:translateX(-50%)!important}}