/* ===== UNDRGRADZ — styles.css (extracted from undrgradz_v23.html · NEON) ===== */

/* Graduate se queda en CDN: solo la usa este CSS. */
@import url('https://fonts.googleapis.com/css2?family=Graduate&display=swap');

/* Boldonse EMPAQUETADA (fonts/Boldonse.woff2): la marca no puede depender de
   la red — en un arranque frío sin conexión el wordmark caía a Outfit 400. */
@font-face {
  font-family: 'Boldonse';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format('woff2');
}

:root {
  --font-serif: "Outfit", system-ui, sans-serif;
  /* Display de marca (titulares de sección, wordmark). Boldonse solo tiene
     peso 400 y dibuja MUY por encima de su caja: usar line-height ≥1.4 y
     nunca dentro de un overflow:hidden vertical apretado. */
  --font-display: "Boldonse", "Outfit", system-ui, sans-serif;
  /* Varsity palette — collegiate blue / red / white. Bright enough to still
     read as neon on a near-black ground, but institutional rather than club. */
  --p: #3d7bff;        /* varsity blue — primary */
  --p2: #791515;       /* varsity red — deep crimson accent */
  --p-rgb: 61, 123, 255;
  --varsity-blue: #3d7bff;
  /* Red used three ways, because one deep crimson can't do all jobs on black:
       --red-fill  solid fills with white text on top  (contrast 10.7 ✓)
       --red-ink   red text / icons / borders ON dark   (fill is only 1.8 — unreadable)
       --red-deep  the darker stop for red gradients */
  --varsity-red: #791515;
  --red-fill: #791515;
  --red-ink: #dc2626;
  --red-deep: #580f0f;
  /* Wine scale — reads burgundy, not pink. --wine is the darkest that still
     works as text/border on dark (~2.9); --wine-fill is for solid backgrounds
     with white text; --wine-glow the halo tint. */
  --wine: #dc2626;
  --wine-fill: #791515;
  --wine-deep: #580f0f;
  --varsity-navy: #0f1b3d;   /* deep field for panels */
  --varsity-chalk: #ffffff;
  --gbd: rgba(255, 255, 255, 0.3);
  --gbdl: rgba(255, 255, 255, 0.22);
  --gs:
    0 8px 32px rgba(0, 0, 0, 0.2), 0 1.5px 0 rgba(255, 255, 255, 0.18) inset;
  --gss:
    0 4px 16px rgba(0, 0, 0, 0.14), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
  --blur: blur(5px) saturate(120%);
  --blurs: blur(4px) saturate(120%);
  --blurh: blur(7px) saturate(130%);
  --fg: #fff;
  --fg2: rgba(255, 255, 255, 0.7);
  --fg3: rgba(255, 255, 255, 0.38);
  --r: 20px;
  --rs: 14px;
  --rx: 11px;
  --font: "DM Sans", system-ui, -apple-system, sans-serif;
  --s: 14px;
  /* Safe Area Insets for iOS Notch / Dynamic Island & Android Gesture Bar */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
/* ── DESIGN SYSTEM TOKENS (additive — used by the new icon system & ongoing refactor) ── */
:root {
  /* Type scale — 8 steps replacing 30 ad-hoc text sizes (incl. the 10.5/11.5/13.5
     half-pixel ones). Every text size in a refactored screen lands on a step.
     Sizes above 28px are glyphs (emoji, avatars, hero numbers), not text — those
     stay literal on purpose. */
  --fs-2xs: 10px;   /* micro: counters, tiny badges */
  --fs-xs: 11px;    /* uppercase labels, meta */
  --fs-sm: 12px;    /* secondary text, chips */
  --fs-base: 14px;  /* body, buttons */
  --fs-md: 16px;    /* emphasis */
  --fs-lg: 18px;    /* card titles */
  --fs-xl: 22px;    /* sheet / modal titles */
  --fs-2xl: 28px;   /* hero */

  /* Radius scale — 5 steps + a pill, replacing 19 ad-hoc values */
  /* Tightened for the varsity pass — collegiate design is geometric, not bubbly */
  --rad-xs: 6px;    /* inline tags, bars */
  --rad-sm: 10px;   /* badges, small controls */
  --rad-md: 12px;   /* buttons */
  --rad-lg: 16px;   /* inner blocks */
  --rad-xl: 18px;   /* cards, sheets */
  --rad-pill: 999px;/* chips, tags */

  /* Glow tiers — the app had 216 competing glows. Exactly three levels now:
     primary  → the ONE main action on a screen
     selected → the active chip / current state
     none     → everything else leans on border + fill (see --el-* for depth) */
  /* Retired: the amber halo sat on ~8 buttons regardless of their own colour
     (blue, green, orange), which read as a dirty smear rather than neon. Kept
     as a token set to none so the ~8 inline `box-shadow:var(--glow-primary)`
     usages in app.js resolve cleanly instead of needing 8 separate edits. */
  --glow-primary: none;
  --glow-selected: 0 0 12px rgba(61, 123, 255, 0.28);
  --glow-none: none;
  /* Accent — warm amber→wine gradient for primary actions (the "VER TODOS" look).
     Cálido→cálido, so it never passes through magenta. White text sits on the
     mid/wine zone where it stays legible. */
  --accent: #f59e0b;        /* amber — start of the warm gradient */
  --accent-deep: #791515;   /* wine — end */
  --accent-light: #fbbf24;  /* hover / detail */
  --fw-reg: 400;
  --fw-med: 600;
  --fw-bold: 800;
  --fw-black: 900;
  /* spacing scale (4-based) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  /* semantic colors */
  --c-success: #34d399;
  --c-warning: #fbbf24;
  --c-danger: #dc2626;
  --c-info: #60a5fa;
  --c-accent: var(--p);
  --c-success-bg: rgba(52, 211, 153, 0.12);
  --c-danger-bg: rgba(248, 113, 113, 0.12);
  --c-warning-bg: rgba(251, 191, 36, 0.12);
  --c-info-bg: rgba(96, 165, 250, 0.12);
  /* neutral surfaces */
  --surf-1: rgba(255, 255, 255, 0.05);
  --surf-2: rgba(255, 255, 255, 0.08);
  --surf-3: rgba(255, 255, 255, 0.12);
  /* elevation */
  --el-1: 0 1px 3px rgba(0, 0, 0, 0.25);
  --el-2: 0 4px 14px rgba(0, 0, 0, 0.3);
  --el-3: 0 12px 32px rgba(0, 0, 0, 0.4);
  /* Motion — 3 durations, not 12. A tap and a sheet should not share a speed.
     --dur-fast  presses, hovers, colour swaps
     --dur       the default for anything interactive
     --dur-slow  sheets, panels, anything that travels a long distance */
  --dur-fast: 0.12s;
  --dur: 0.2s;
  --dur-slow: 0.32s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);      /* standard */
  --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1); /* decelerate — entrances */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot — playful pops */
}
/* ── NEON DESIGN LAYER (reskin — palette, gradients, glows, category colors) ── */
:root {
  /* neon accent palette */
  --neon-pink: var(--c-blue);
  --neon-magenta: var(--c-red-ink);
  --neon-purple: var(--c-blue);
  --neon-violet: var(--c-blue-navy);
  --neon-blue: var(--c-blue-deep);
  --neon-cyan: var(--c-cyan);
  --neon-green: var(--c-green);
  --neon-lime: var(--c-lime);
  --neon-orange: var(--c-orange);
  --neon-amber: var(--c-amber-deep);
  --neon-gold: var(--c-amber);
  --neon-red: var(--c-red-ink);
  /* category colors (from reference key) */
  --cat-nightlife: #ff4d8d;
  --cat-study: #4d84ff;
  --cat-sports: #22c5e5;
  --cat-gaming: #3b82f6;
  --cat-dorm: #f59e0b;
  --cat-campus: #06b6d4;
  --cat-greek: #fbbf24;
  --cat-abroad: #22d3ee;
  --cat-arts: #3d7bff;
  --cat-business: #22c55e;
  --cat-tech: #3b82f6;
  /* signature gradients */
  --grad-primary: linear-gradient(135deg, #f59e0b, #791515); /* pink→orange CTA */
  --grad-purple: linear-gradient(135deg, #f59e0b, #791515); /* purple→pink */
  --grad-brand: linear-gradient(135deg, #f59e0b, #791515);
  --grad-cyan: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
  --grad-gold: linear-gradient(135deg, #fbbf24 0%, #fb923c 100%);
  /* neon glows */
  --glow-p: 0 0 18px rgba(61, 123, 255, 0.45);
  --glow-purple: 0 0 18px rgba(61, 123, 255, 0.45);
  --glow-cyan: 0 0 18px rgba(34, 211, 238, 0.42);
  --glow-sm: 0 0 10px rgba(61, 123, 255, 0.35);
  --glow-soft: 0 0 24px rgba(61, 123, 255, 0.28);
}
/* Inline SVG icon — inherits text color via currentColor, aligns with text */
.ico {
  display: inline-block;
  vertical-align: -0.14em;
  flex-shrink: 0;
  stroke: currentColor;
}
.ico-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: none !important;
}
body {
  background:
    linear-gradient(rgba(8, 4, 17, 0.6), rgba(6, 3, 13, 0.86)),
    radial-gradient(60% 46% at 4% -6%, var(--p), transparent 60%),
    radial-gradient(56% 44% at 100% 4%, var(--p2), transparent 60%),
    radial-gradient(95% 70% at 50% 112%, var(--p), transparent 64%), #000000;
  /* background-attachment:fixed removed — on iOS WKWebView it is not
     honored but still forces a full-viewport composited backing layer
     that intermittently drops touch hit-tests (random dropped taps). */
  color: var(--fg);
}
body::before {
  content: "";
  position: fixed;
  width: 380px;
  height: 380px;
  top: -80px;
  right: -80px;
  background: radial-gradient(circle, var(--p) 0%, transparent 70%);
  opacity: 0.22;
  filter: blur(60px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: orb 12s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  width: 320px;
  height: 320px;
  bottom: 80px;
  left: -60px;
  background: radial-gradient(circle, var(--p2) 0%, transparent 70%);
  opacity: 0.18;
  filter: blur(50px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: orb 12s ease-in-out infinite alternate;
  animation-delay: -6s;
}
@keyframes orb {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(28px, 38px) scale(1.14);
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.glass {
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--gbd);
  box-shadow: var(--gs);
}
.gc {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: var(--blurs);
  -webkit-backdrop-filter: var(--blurs);
  border: 1px solid var(--gbdl);
  border-radius: var(--r);
  box-shadow: var(--gss);
  margin: 0 var(--s) 11px;
  overflow: hidden;
  width: calc(100% - var(--s) * 2);
}
.gi {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid var(--gbdl);
  border-radius: var(--rx);
  color: var(--fg);
  font-family: var(--font);
  font-size:var(--fs-base);
  padding: 12px 14px;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.gi::placeholder {
  color: var(--fg3);
}
.gi:focus {
  border-color: var(--p);
  background: rgba(255, 255, 255, 0.14);
}
.gi option {
  background: #1a1a2e;
}
textarea.gi {
  resize: none;
}
.gbtn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: var(--rs);
  border: none;
  font-family: var(--font);
  font-size:var(--fs-base);
  font-weight:600;
  cursor: pointer;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow:var(--el-2);
  transition: transform var(--dur);
}
.gbtn::before,
.jbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.gbtn:active {
  transform: scale(0.97);
}
.gbtn-ghost {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: var(--rs);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--gbdl);
  color: var(--fg2);
  font-family: var(--font);
  font-size:var(--fs-base);
  cursor: pointer;
  margin-top: 8px;
}
.jbtn {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: var(--rs);
  border: none;
  font-family: var(--font);
  font-weight:600;
  font-size:var(--fs-base);
  cursor: pointer;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.jbtn:active {
  opacity: 0.82;
}
.abtn {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: var(--rs);
  border: none;
  font-family: var(--font);
  font-size:var(--fs-base);
  font-weight:600;
  cursor: pointer;
  color: #fff;
}
.epb {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: var(--rs);
  border: 1px solid var(--gbdl);
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg);
  font-family: var(--font);
  font-size:var(--fs-base);
  font-weight:500;
  cursor: pointer;
  margin-bottom: 8px;
}
.field {
  margin-bottom: 11px;
}
.field label {
  display: block;
  font-size:var(--fs-2xs);
  font-weight:600;
  color: var(--fg2);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  margin-bottom: 5px;
}
.g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.screen {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  flex-direction: column;
  z-index: 1;
}
.screen.active {
  display: flex;
}
#app.active {
  overflow: hidden;
  z-index: 2;
}
/* SPLASH */
#splash {
  align-items: center;
  justify-content: center;
  z-index: 999;
  background: linear-gradient(145deg, #0a0520, #0d1a3a);
}
.spl {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.spl-logo {
  font-size: 52px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  opacity: 0;
  transform: scale(0.72);
  transition: all 0.8s var(--ease-spring);
  font-family: var(--font-serif);
  display: inline-flex;
  align-items: flex-end;
  text-transform: uppercase;
}
.spl-logo span {
  opacity: 1;
}
.logo-undr {
  display: inline-block;
  transform: translateY(0);
  margin-right: 0.09em;
  color: #fff;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
  text-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.6),
    4px 4px 0 rgba(0, 0, 0, 0.5),
    5px 5px 0 rgba(0, 0, 0, 0.4),
    6px 6px 0 rgba(0, 0, 0, 0.25);
  paint-order: stroke fill;
}
.logo-gradz {
  display: inline-block;
  color: var(--p);
  -webkit-text-stroke: 2px var(--p2);
  text-shadow:
    3px 3px 0 var(--p2),
    4px 4px 0 var(--p2),
    5px 5px 0 var(--p2);
  paint-order: stroke fill;
}
.ob-logo .logo-undr,
.spl-logo .logo-undr {
  transform: translateY(0);
}
.tb-logo-undr {
  display: inline-block;
  transform: translateY(2px);
  color: #fff;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.4);
  text-shadow: 1.5px 1.5px 0 rgba(0, 0, 0, 0.3);
  paint-order: stroke fill;
}
.tb-logo-gradz {
  display: inline-block;
  color: var(--p);
  -webkit-text-stroke: 1px var(--p2);
  text-shadow: 1.5px 1.5px 0 var(--p2);
  paint-order: stroke fill;
}
/* Dark uni colors get lightened via JS (_applyPrimaryContrast) — no special logo override here. */
/* UNDRGRADZ LOGO — real artwork, personalized via a color tint (Settings → Logo Colors) */
:root {
  --lg-filter: none;
}
.ugz-logo-img {
  width: 210px;
  height: auto;
  display: block;
  /* border-radius: 30px;
  box-shadow:var(--el-3);
  filter: var(--lg-filter); */
}
/* Create-event form: keep the original look, just two small clean-ups */
.ev-create-tight #ev-ratio-rows {
  display: grid;
  gap: 14px;
}
.ev-create-tight #ev-greek-chips {
  max-height: 110px;
  overflow-y: auto;
}
/* Target Ratio: styled sliders with live filled-track */
.ratio-row {
  position: relative;
}
.ratio-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size:var(--fs-sm);
  font-weight:600;
  margin-bottom: 6px;
}
.ratio-pct-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 22px;
  border-radius:var(--rad-md);
  font-size:var(--fs-sm);
  font-weight:700;
  color: #fff;
  padding: 0 8px;
}
.ratio-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.ratio-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  transition: width var(--dur) ease;
}
.ratio-thumb {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #fff;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(255, 255, 255, 0.06);
  transform: translate(-50%, -50%);
  transition:
    left var(--dur) ease,
    border-color 0.2s;
  pointer-events: none;
}
.ratio-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ratio-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 34px;
}
/* Hangout / Chat section chips */
/* Custom categories colors for Hangouts section */
/* Per-section hues live in the CHIP COLOR SYSTEM block (--chip), further down. */
.evsec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius:var(--rad-lg);
  font-size:var(--fs-sm);
  font-weight:600;
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  color: var(--sec-color, rgba(255, 255, 255, 0.7));
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--dur) var(--ease-out);
  user-select: none;
}
.evsec-chip.on {
  background: var(--sec-bg) !important;
  border-color: var(--sec-color) !important;
  color: #fff !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--sec-color) 35%, transparent);
}
.chatsec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius:var(--rad-lg);
  font-size:var(--fs-sm);
  font-weight:600;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--dur) var(--ease-out);
  user-select: none;
}
.evsec-chip svg {
  color: var(--sec-color, var(--fg3));
  opacity: 0.85;
  transition: opacity 0.2s, filter 0.2s;
  flex-shrink: 0;
}
.chatsec-chip svg {
  opacity: 0.65;
  transition: opacity 0.2s, filter 0.2s;
  flex-shrink: 0;
}
.evsec-chip:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}
.chatsec-chip:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.evsec-chip:hover svg {
  opacity: 1;
}
.chatsec-chip:hover svg {
  opacity: 1;
}
.evsec-chip.on {
  background: var(--sec-bg, rgba(61, 123, 255, 0.15)) !important;
  border-color: var(--sec-color, var(--p)) !important;
  color: #fff !important;
  box-shadow: 0 0 12px var(--sec-color, var(--p));
}
.evsec-chip.on svg {
  opacity: 1;
  color: var(--sec-color, var(--p)) !important;
  filter: drop-shadow(0 0 4px var(--sec-color));
}
.chatsec-chip.on {
  background: var(--p);
  border-color: var(--p);
  color: #fff;
}
#ah-evtype-chips .yr-chip .ecl {
  display: none;
  margin-left: 5px;
}
#ah-evtype-chips .yr-chip.on .ecl {
  display: inline;
}
.chatsec-chip .csl {
  display: inline;
  margin-left: 5px;
}
.chatsec-chip.on .csl {
  display: inline;
}
#ev-section-row::-webkit-scrollbar,
#chat-section-row::-webkit-scrollbar {
  display: none;
  padding-top: 13%;
}
.match-bar-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}
.match-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #22c55e);
  border-radius: 3px;
  transition: width 0.4s;
}
.spl-sub {
  font-size:var(--fs-sm);
  color: var(--fg2);
  margin-top: 5px;
  opacity: 0;
  transition: opacity 0.6s 0.5s;
}
.spl-bar {
  width: 120px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  margin-top: 28px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s 0.3s;
}
.spl-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width 2.2s linear;
}
/* AUTH */
#authscreen {
  align-items: center;
  justify-content: center;
}
.auth-mode-chip {
  padding: 7px 14px;
  border-radius:var(--rad-lg);
  font-size:var(--fs-sm);
  font-weight:600;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all var(--dur);
  user-select: none;
}
.auth-mode-chip.on {
  background: var(--p);
  border-color: var(--p);
  color: #fff;
}
/* ONBOARDING */
#onboarding {
  align-items: center;
  padding: calc(16px + env(safe-area-inset-top)) var(--s) 24px;
}
.ob-wrap {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.ob-logo {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1.5px;
  text-align: center;
  margin-bottom: 3px;
  font-family: var(--font-serif);
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  text-transform: uppercase;
}
.ob-logo span {
  opacity: 1;
}
.ob-tag {
  font-size:var(--fs-xs);
  color: var(--fg2);
  text-align: center;
  margin-bottom: 16px;
}
.ob-panel {
  padding: 18px;
  border-radius: var(--r);
  width: 100%;
  animation: fadeUp 0.25s ease-out forwards;
}
.ob-title {
  font-size:var(--fs-lg);
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}
.ob-hint {
  font-size:var(--fs-sm);
  color: var(--fg2);
  margin-bottom: 14px;
  line-height: 1.5;
}
.udet {
  border-radius: var(--rx);
  padding: 9px 12px;
  font-size:var(--fs-sm);
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--gbdl);
  width: 100%;
  margin-bottom: 10px;
}
.ud {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.code-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 14px 0;
}
.ci {
  width: 40px;
  height: 50px;
  text-align: center;
  font-size:var(--fs-lg);
  font-weight: 800;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid var(--gbdl);
  border-radius: var(--rx);
  color: #fff;
  outline: none;
  font-family: var(--font);
}
.ci:focus {
  border-color: var(--p);
}
.flag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.flag-chip {
  font-size:var(--fs-xl);
  cursor: pointer;
  padding: 6px 8px;
  border-radius:var(--rad-sm);
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.06);
  transition: all 0.2s;
}
.flag-chip.on {
  border-color: var(--p);
  background: rgba(255, 255, 255, 0.12);
}
.b5s {
  margin-bottom: 14px;
}
.b5-title {
  font-size:var(--fs-base);
  font-weight:600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 8px 15px;
  border-radius:var(--rad-xl);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
  color: #fff;
}
.b5-title::after {
  content: "▾";
  font-size:var(--fs-2xs);
  opacity: 0.8;
}
.b5s.collapsed .b5-title::after {
  content: "▸";
}
.b5s.collapsed .b5-title {
  margin-bottom: 0;
}
.b5s.collapsed .b5-chips {
  display: none;
}
.b5-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.b5c {
  padding: 5px 10px;
  border-radius:var(--rad-lg);
  font-size:var(--fs-sm);
  font-weight:500;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: var(--fg2);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.2s;
}
.b5c.on {
  color: #fff;
  border-color: transparent;
}
.b5-cnt {
  font-size:var(--fs-sm);
  font-weight:600;
  color: var(--fg2);
  text-align: right;
  margin-bottom: 10px;
}
.b5-cnt span {
  color: var(--p);
}
.id-box {
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: var(--rx);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  font-size:var(--fs-sm);
  color: var(--fg2);
  transition: border-color 0.2s;
  width: 100%;
  margin-bottom: 11px;
}
.id-box.done {
  border-color: #22c55e;
  color: #22c55e;
  border-style: solid;
}
.id-box:hover {
  border-color: rgba(255, 255, 255, 0.38);
}
.id-box.done:hover {
  border-color: #16a34a;
}

/* Onboarding step 2 — verification document panels (Student Government,
   Content Creator, Athletics). Revealed when the matching option is picked. */
.ob4-verif-panel {
  animation: ob4VerifIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ob4VerifIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ob4-verif-panel { animation: none; }
}
.gender-chip {
  padding: 8px 16px;
  border-radius:var(--rad-lg);
  font-size:var(--fs-base);
  font-weight:600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--dur);
  flex: 1;
  text-align: center;
}
.gender-chip.male {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}
.gender-chip.male.on {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}
.gender-chip.female {
  background: rgba(240, 62, 90, 0.12);
  border-color: rgba(240, 62, 90, 0.3);
  color: #dc2626;
}
.gender-chip.female.on {
  background: #791515;
  border-color: #dc2626;
  color: #fff;
}
.gender-chip.other {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.3);
  color: #a9c4ff;
}
.gender-chip.other.on {
  background: #2b5fd9;
  border-color: #2b5fd9;
  color: #fff;
}
/* APP */
#app {
  background:
    linear-gradient(
      rgba(9, 5, 18, 0.48) 0%,
      rgba(8, 4, 15, 0.9) 38%,
      rgba(8, 4, 15, 0.88) 72%,
      rgba(9, 5, 20, 0.52) 100%
    ),
    radial-gradient(90% 42% at 0% -9%, var(--p), transparent 56%),
    radial-gradient(90% 42% at 100% -9%, var(--p2), transparent 56%),
    radial-gradient(96% 32% at 50% 113%, var(--p), transparent 60%), #09040f;
  display: none;
  flex-direction: column;
  position: fixed;
  inset: 0;
}
.screen:not(.active) {
  display: none !important;
  pointer-events: none !important;
  z-index: -1 !important;
  visibility: hidden !important;
}
#app.active,
#authscreen.active,
#onboarding.active {
  display: flex !important;
  flex-direction: column;
  z-index: 10 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
.app-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 90px;
  position: relative;
  z-index: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.topbar {
  position: fixed; /* pinned to the top across the whole app — never scrolls away */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(13px + env(safe-area-inset-top)) var(--s) 9px;
  top: 0;
  left: 0;
  right: 0;
  max-width: 440px;
  margin: 0 auto;
  z-index: 200;
  /* subtle fade so content scrolling underneath doesn't bleed through the gaps */
  background: linear-gradient(180deg, rgba(9, 4, 20, 0.96) 45%, rgba(9, 4, 20, 0.72) 78%, transparent);
  pointer-events: none;
}
.topbar > * {
  pointer-events: auto;
}
.tb-title {
  /* Boldonse ahora sí se carga (antes caía al fallback). Peso 400: es el
     único que existe; el faux-bold la deformaba. */
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: flex-end;
  text-transform: uppercase;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
/* Bare icons — no circle. Width/height stay: #notif-badge is positioned at
   top:-5px;right:-5px against this box, so shrinking it would move the badge. */
.tbi {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: transparent;
  color: #fff;
  font-size:var(--fs-base);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bot-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 8px calc(12px + env(safe-area-inset-bottom));
  z-index: 100;
}
.bot-inner:empty {
  display: none !important;
}
.bot-inner {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--blurh);
  -webkit-backdrop-filter: var(--blurh);
  border: 1px solid var(--gbd);
  border-radius:var(--rad-xl);
  box-shadow: var(--gs);
  padding: 4px 2px;
  margin: 0 3px;
}
.np {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 2px 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius:var(--rad-lg);
  transition: all var(--dur) var(--ease);
  color: rgba(255, 255, 255, 0.52);
  position: relative;
}
.np .ni {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  transition: all var(--dur) var(--ease);
}
.np .nl {
  font-size:var(--fs-2xs);
  font-weight:600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.np.active {
  color: #fff;
}
.np.active .ni {
  width: 40px;
  height: 40px;
  margin-top: -8px;
}
.nbadge {
  position: absolute;
  top: 3px;
  right: calc(50% - 24px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius:var(--rad-xs);
  background: var(--p);
  font-size:var(--fs-2xs);
  font-weight:600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(10, 5, 30, 0.6);
}
.section {
  display: none;
  padding-top: calc(52px + env(safe-area-inset-top));
}
.section.active {
  display: block;
}
.sh {
  font-size:var(--fs-2xs);
  font-weight:600;
  color: var(--fg2);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  padding: 12px var(--s) 6px;
}
.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius:var(--rad-lg);
  font-size:var(--fs-xs);
  font-weight:500;
  background: rgba(255, 255, 255, 0.09);
  color: var(--fg2);
  border: 1px solid var(--gbdl);
}
.tag.hi {
  color: var(--p);
  border-color: rgba(61, 123, 255, 0.4);
  background: rgba(61, 123, 255, 0.08);
}
.tag.gold {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.08);
}
.tag.blue {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(96, 165, 250, 0.08);
}
.tag.green {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.08);
}
/* HANGOUTS */
.ev-tabs {
  display: flex;
  gap: 6px;
  padding: 9px var(--s) 4px;
  overflow-x: auto;
}
.ev-tab {
  padding: 8px 14px;
  border-radius:var(--rad-xl);
  font-size:var(--fs-sm);
  font-weight:600;
  border: 1px solid var(--gbdl);
  cursor: pointer;
  transition: all var(--dur);
  background: rgba(255, 255, 255, 0.09);
  color: var(--fg2);
  white-space: nowrap;
}
.ev-tab.active {
  color: #fff;
  border-color: transparent;
}
.ev-panel {
  display: none;
}
.ev-panel.active {
  display: block;
}
.ev-inner {
  padding: 13px;
}
.ev-title {
  font-size:var(--fs-md);
  font-weight:700;
  color: #fff;
  margin-bottom: 2px;
}
.ev-meta {
  font-size:var(--fs-xs);
  color: var(--fg2);
  line-height: 1.7;
}
.bar-t {
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}
.bar-f {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s;
}
.gtrack {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}
.gf {
  background: linear-gradient(90deg, #e91e8c, #791515);
  transition: width 0.3s;
}
.gm {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width 0.3s;
}
.glg {
  background: linear-gradient(90deg, #ca8a04, #fbbf24);
  transition: width 0.3s;
}
.gsl {
  width: 100%;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: #3d7bff;
  outline: none;
  margin-top: 7px;
  cursor: pointer;
}
.gsl::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow:var(--el-1);
  border: 2px solid #3d7bff;
}
.gsl::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #3d7bff;
  cursor: pointer;
  box-shadow:var(--el-1);
}
.yr-chip {
  padding: 5px 11px;
  border-radius:var(--rad-lg);
  font-size:var(--fs-xs);
  font-weight:500;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: var(--fg2);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.2s;
}
.yr-chip.on {
  border-color: var(--p);
  background: var(--p);
  color: #fff;
}
/* Hide all lock icons on filters (A+ Student badge already marks premium filters) */
.filter-lock-ic {
  display: none !important;
}
.aplus-on .filter-lock-badge {
  display: none !important;
}
/* On A+, the previously-locked event/filter chips become fully usable (no dimming) */
.aplus-on #ev-ethnic-chips .yr-chip,
.aplus-on #ev-politics-chips .yr-chip,
.aplus-on #ev-major-chips .yr-chip,
.aplus-on #ev-uni-choose-chips .yr-chip {
  opacity: 1 !important;
}
/* FEED / MAIN */
.compose-w {
  padding: 10px var(--s) 4px;
}
.comp-i {
  padding: 13px;
}
.cta {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font);
  font-size:var(--fs-base);
  resize: none;
  outline: none;
  min-height: 60px;
}
.compose-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--gbdl);
  margin-bottom: 9px;
}
.cex-label {
  padding: 7px 11px;
  border-radius:var(--rad-lg);
  border: 1px solid var(--gbdl);
  background: rgba(255, 255, 255, 0.07);
  font-size:var(--fs-sm);
  font-weight:500;
  color: var(--fg2);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: var(--font);
}
.cex-label:active {
  background: rgba(255, 255, 255, 0.15);
}
.cex-label.on {
  border-color: var(--p);
  color: var(--p);
}
.cfoot {
  display: flex;
  justify-content: flex-end;
}
.pbtn {
  padding: 8px 20px;
  border-radius:var(--rad-lg);
  border: none;
  font-family: var(--font);
  font-size:var(--fs-base);
  font-weight:600;
  cursor: pointer;
  color: #fff;
}
.poll-box {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--rx);
  border: 1px solid var(--gbdl);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.poll-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.poll-inp {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-xs);
  color: #fff;
  font-family: var(--font);
  font-size:var(--fs-base);
  padding: 7px 10px;
  outline: none;
}
.fp .pt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px 8px;
}
.fp .pav {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-base);
  font-weight:600;
  color: #fff;
  flex-shrink: 0;
  cursor: pointer;
}
.fp .pn {
  font-size:var(--fs-base);
  font-weight:600;
  color: #fff;
}
.fp .pt2 {
  font-size:var(--fs-xs);
  color: var(--fg2);
}
.fp .pb {
  font-size:var(--fs-base);
  line-height: 1.55;
  padding: 0 13px 12px;
}
.fp .ptags {
  padding: 0 13px 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pacts {
  display: flex;
  border-top: 1px solid var(--gbdl);
}
.pa {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  font-size:var(--fs-base);
  font-weight:500;
  color: var(--fg2);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font);
  transition: color 0.2s;
}
.pa:not(:last-child) {
  border-right: 1px solid var(--gbdl);
}
.pa.liked {
  color: var(--p);
}
.poll-rendered {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--rx);
  border: 1px solid var(--gbdl);
  padding: 10px 13px;
  margin: 0 13px 10px;
}
.poll-opt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  cursor: pointer;
}
.poll-opt-bar {
  flex: 1;
  height: 28px;
  border-radius:var(--rad-xs);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gbdl);
  position: relative;
  overflow: hidden;
}
.poll-opt-fill {
  position: absolute;
  inset: 0;
  border-radius:var(--rad-xs);
  transition: width 0.4s;
}
.poll-opt-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size:var(--fs-sm);
  font-weight:500;
  color: #fff;
  z-index: 1;
}
.poll-opt-pct {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size:var(--fs-xs);
  font-weight:600;
  color: rgba(255, 255, 255, 0.8);
  z-index: 1;
}
.poll-voters {
  font-size:var(--fs-xs);
  color: var(--fg2);
  text-align: center;
  margin-top: 3px;
}
.comments-section {
  border-top: 1px solid var(--gbdl);
  padding: 10px 13px;
}
.comment-item {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.comment-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-sm);
  font-weight:600;
  flex-shrink: 0;
  color: #fff;
}
.comment-bubble {
  background: rgba(255, 255, 255, 0.07);
  border-radius:var(--rad-sm) 12px 12px 4px;
  padding: 8px 11px;
}
.comment-author {
  font-size:var(--fs-xs);
  font-weight:600;
  color: var(--fg);
  margin-bottom: 2px;
}
.comment-text {
  font-size:var(--fs-base);
  color: var(--fg2);
  line-height: 1.4;
}
.comment-actions {
  display: flex;
  gap: 8px;
  margin-top: 5px;
}
.cact-btn {
  background: transparent;
  border: none;
  color: var(--fg3);
  font-size:var(--fs-xs);
  font-weight:500;
  cursor: pointer;
  font-family: var(--font);
  padding: 2px 6px;
  border-radius:var(--rad-sm);
  transition: all 0.2s;
}
.cact-btn:active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg2);
}
.comment-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.comment-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-lg);
  padding: 8px 14px;
  color: #fff;
  font-family: var(--font);
  font-size:var(--fs-base);
  outline: none;
}
.comment-send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--p);
  color: #fff;
  font-size:var(--fs-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.post-img-preview {
  width: 100%;
  border-radius: var(--rx);
  max-height: 280px;
  object-fit: cover;
  display: block;
  margin-bottom: 8px;
}
/* CHATS */
.citem {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px var(--s);
  cursor: pointer;
  transition: background var(--dur);
}
.citem:active {
  background: rgba(255, 255, 255, 0.05);
}
.cav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-lg);
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}
.cav.grp {
  border-radius:var(--rad-md);
}
.online-d {
  position: absolute;
  bottom: 1px;
  left: 1px; /* lado opuesto (antes right) */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0a1628;
}
.cmeta {
  flex: 1;
  min-width: 0;
}
.cnm {
  font-size:var(--fs-base);
  font-weight:600;
  color: #fff;
  margin-bottom: 2px;
}
.cpre {
  font-size:var(--fs-sm);
  color: var(--fg2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctm {
  font-size:var(--fs-2xs);
  color: var(--fg3);
}
.cunrd {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size:var(--fs-2xs);
  font-weight:600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* CHAT WINDOW */
.cwin {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  background: var(--bg, #0a0518);
  /* Glide the lift with iOS's own keyboard timing (≈0.25s, curve 7) so the bar
     rises in lockstep WITH the keyboard — like Instagram/WhatsApp. The height is
     set directly (inline px) by the keyboardWillShow handler so WebKit actually
     runs the transition (it won't animate a value delivered via a CSS var). */
  transition: padding-bottom 0.25s cubic-bezier(0.38, 0.7, 0.125, 1);
}
.cwin.open {
  display: flex;
}
/* ===== CHAT WINDOW UNDRGRADZ FLOW DEFAULT BACKGROUND SYSTEM ===== */
.cwbg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 20%, #0d0620 0%, #060312 65%, #030108 100%) !important;
  overflow: hidden !important;
}

.cwbgo {
  position: absolute;
  inset: 0;
  background: rgba(4, 2, 10, 0.6) !important;
  pointer-events: none;
  z-index: 1;
}
/* Freeze the animated chat background — the continuously-animating SVG/glow
   layers lag iOS and compete with the bubbles. Keep it static and dim. */
#chat-flow-bg, .chat-flow-bg { opacity: 0.32 !important; }
#chat-flow-bg *, .chat-flow-bg *,
.chat-glow-magenta, .chat-glow-blue, .chat-glow-violet,
.chat-layer-bg-deep, .chat-layer-main, .chat-layer-threads, .chat-flow-svg {
  animation: none !important;
}

.chat-flow-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Capa 2: Ambient Glow Orbs */
.chat-flow-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(110px);
  will-change: transform, opacity;
}

.chat-glow-magenta {
  top: -120px;
  left: -80px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(240, 62, 90, 0.25), transparent 70%);
  animation: chatGlowPulse 14s ease-in-out infinite alternate;
}

.chat-glow-blue {
  bottom: -140px;
  right: -90px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.28), transparent 70%);
  animation: chatGlowPulse 16s ease-in-out infinite alternate-reverse;
}

.chat-glow-violet {
  top: 40%;
  left: 25%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(61, 123, 255, 0.16), transparent 70%);
  filter: blur(130px);
  animation: chatGlowPulse 20s ease-in-out infinite alternate;
}

@keyframes chatGlowPulse {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.65; }
  50% { transform: translate3d(25px, -18px, 0) scale(1.12); opacity: 0.85; }
  100% { transform: translate3d(-18px, 20px, 0) scale(0.94); opacity: 0.6; }
}

/* Capa 3, 4, 5: SVG Flow Lines & Connection Nodes */
.chat-flow-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  object-fit: cover;
}

.chat-layer-bg-deep {
  animation: chatDriftDeep 28s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
  will-change: transform;
}

.chat-layer-main {
  animation: chatStreamMain 20s ease-in-out infinite alternate;
  transform-origin: 45% 45%;
  will-change: transform;
}

.chat-layer-threads {
  animation: chatThreadsPulse 16s ease-in-out infinite alternate-reverse;
  transform-origin: 55% 55%;
  will-change: transform;
}

.chat-layer-particles {
  animation: chatParticlesPulse 12s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes chatDriftDeep {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(14px, -18px, 0) rotate(1deg) scale(1.02); }
  100% { transform: translate3d(-12px, 12px, 0) rotate(-1deg) scale(0.98); }
}

@keyframes chatStreamMain {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  40% { transform: translate3d(-18px, 12px, 0) rotate(-1.5deg) scale(1.02); }
  80% { transform: translate3d(14px, -15px, 0) rotate(1deg) scale(0.985); }
  100% { transform: translate3d(-10px, 8px, 0) rotate(-0.8deg) scale(1.01); }
}

@keyframes chatThreadsPulse {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(20px, -16px, 0) scale(1.03); }
  100% { transform: translate3d(-15px, 14px, 0) scale(0.97); }
}

@keyframes chatParticlesPulse {
  0% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.15); }
  100% { opacity: 0.65; transform: scale(0.92); }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  .chat-layer-bg-deep,
  .chat-layer-main,
  .chat-layer-threads,
  .chat-layer-particles,
  .chat-flow-glow {
    animation: none !important;
  }
}
.cwtb {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--s) 12px;
  background: rgba(10, 10, 12, 0.78);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cwbk {
  background: transparent;
  border: none;
  color: var(--fg2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: auto;
  height: auto;
  transition: color var(--dur) ease;
}
.cwbk:hover, .cwbk:active {
  color: #fff;
}
.cwav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-md);
  font-weight:600;
  color: #fff;
  flex-shrink: 0;
}
.cwnm {
  font-size:var(--fs-md);
  font-weight:600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cwsub {
  font-size:var(--fs-xs);
  color: var(--fg2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-bg-btn {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fg2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur) ease;
}
.cw-bg-btn:hover, .cw-bg-btn:active {
  color: #fff;
}
.cmsgs {
  flex: 1;
  overflow-y: auto;
  padding: 12px var(--s);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msg {
  max-width: 78%;
  padding: 9px 13px;
  border-radius:var(--rad-lg);
  font-size:var(--fs-base);
  line-height: 1.5;
  word-break: break-word;
}
.msg.out {
  align-self: flex-end;
  background: var(--chat-out-bg, var(--p));
  color: #fff;
  border-radius:var(--rad-lg) 18px 4px 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Message grouping, date chips, "seen" avatar, typing dots ── */
/* Tighten a same-sender run (the 8px flex gap stays between different senders). */
.cmsgs .msg.out + .msg.out,
.cmsgs .msg.in + .msg.in { margin-top: -5px; }
/* Only the LAST bubble of a run keeps its tail corner. */
.cmsgs .msg.out:has(+ .msg.out) { border-bottom-right-radius: var(--rad-lg); }
.cmsgs .msg.in:has(+ .msg.in) { border-bottom-left-radius: var(--rad-lg); }

.msg-datesep {
  align-self: center;
  font-size: var(--fs-2xs);
  font-weight: 800;
  color: var(--fg2);
  background: rgba(2, 3, 8, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--rad-pill);
  padding: 3px 12px;
  margin: 4px 0;
}
.msg-seen { align-self: flex-end; margin: -3px 2px 0 0; }

.typing-bubble {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 11px 14px !important;
  align-self: flex-start;
}
.typing-bubble .tdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg2);
  animation: tdotb 1.2s infinite ease-in-out;
}
.typing-bubble .tdot:nth-child(2) { animation-delay: 0.15s; }
.typing-bubble .tdot:nth-child(3) { animation-delay: 0.3s; }
@keyframes tdotb {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
/* Unified Audio Player & Icebreaker Card Styles */
.msg-audio-player-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.35), rgba(139, 92, 246, 0.35));
  border: 1.5px solid rgba(236, 72, 153, 0.45);
  border-radius: 22px;
  padding: 10px 16px;
  min-width: 220px;
  max-width: 280px;
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.msg.in .msg-audio-player-wrapper,
.msg.out .msg-audio-player-wrapper {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.35), rgba(139, 92, 246, 0.35));
  border: 1.5px solid rgba(236, 72, 153, 0.45);
}
.msg-audio-play-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: #d02040;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, background 0.15s ease;
}
.msg-audio-play-btn:active {
  transform: scale(0.92);
}
.msg-audio-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.msg-audio-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.msg-audio-fill {
  height: 100%;
  width: 0%;
  background: #ffffff;
  border-radius: 3px;
  transition: width 0.1s linear;
}
.msg-audio-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Unified Icebreaker Game Card */
.msg-game-card {
  background: linear-gradient(135deg, #059669, #0d9488, #0f766e) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  border-radius: 18px !important;
  padding: 12px 16px !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(13, 148, 136, 0.25) !important;
  max-width: 290px;
}
.msg.out .msg-game-card,
.msg.in .msg-game-card {
  background: linear-gradient(135deg, #059669, #0d9488, #0f766e) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
}
.msg-game-badge {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.msg-game-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: #ffffff;
}
.msg.in {
  align-self: flex-start;
  background: var(--chat-in-bg, rgba(22, 28, 48, 0.86));
  color: var(--fg);
  border-radius:var(--rad-lg) 18px 18px 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.msnd {
  font-size:var(--fs-2xs);
  font-weight:600;
  color: var(--fg2);
  margin-bottom: 3px;
}
.cbar {
  position: relative;
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px calc(14px + env(safe-area-inset-bottom)) 10px;
  background: #0b141a;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cbar-capsule {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #1f2c34;
  border-radius:var(--rad-xl);
  padding: 3px 8px 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.cbar-btn-ic {
  background: transparent;
  border: none;
  color: rgba(169, 196, 255, 0.7);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color var(--dur) ease, background var(--dur) ease;
  flex-shrink: 0;
}
.cbar-btn-ic:hover, .cbar-btn-ic:active {
  color: #e9edef;
  background: rgba(255, 255, 255, 0.08);
}
.cbar-icon {
  font-size:var(--fs-xl);
  cursor: pointer;
  padding: 4px;
  color: var(--fg2);
}
.cinp {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #e9edef !important;
  font-family: var(--font);
  font-size:var(--fs-md);
  line-height: 20px;
  padding: 8px 4px !important;
  box-shadow: none !important;
}
.cinp::placeholder {
  color: #8696a0;
  opacity: 1;
}
.chat-standalone-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  /* DEFAULT (no university): the same red as the sign-up / log-in buttons,
     flat, no halo. */
  background: #dc2626 !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: none !important;
  transition: transform var(--dur) ease, background var(--dur) ease;
}
/* WITH a university chosen: a circular button with a gradient of the school's
   two colors. */
html.uni-set .chat-standalone-btn {
  background: linear-gradient(135deg, var(--uni-p, var(--red-fill)), var(--uni-p2, var(--red-deep))) !important;
}
.chat-standalone-btn:active {
  transform: scale(0.93);
  filter: brightness(1.1);
}
.sbtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--p);
  color: #fff;
  font-size:var(--fs-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bg-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: rgba(20, 10, 40, 0.97);
  backdrop-filter: var(--blur);
  border-radius:var(--rad-lg) 20px 0 0;
  padding: 16px var(--s) 28px;
  transform: translateY(100%);
  transition: transform 0.3s;
}
.bg-sheet.open {
  transform: translateY(0);
}
.bg-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.bg-opt {
  width: 52px;
  height: 52px;
  border-radius:var(--rad-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
}
.bg-opt.sel {
  border-color: #fff;
}
/* UNICRUSH */
.crush-top {
  display: flex;
  background: rgba(255, 255, 255, 0.08);
  border-radius:var(--rad-md);
  padding: 3px;
  margin: 10px var(--s) 8px;
  border: 1px solid var(--gbdl);
}
.crush-tab {
  flex: 1 1 auto;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  border: none;
  border-radius:var(--rad-sm);
  font-family: var(--font);
  font-size:var(--fs-sm);
  font-weight:600;
  cursor: pointer;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  transition: all var(--dur);
}
.crush-tab.active {
  color: #fff;
  padding: 8px 14px !important;
}
.crush-tab .tab-lbl {
  display: none !important;
}
.crush-tab.active .tab-lbl {
  display: inline-block !important;
}
.crush-tab-panel {
  display: none;
}
.crush-tab-panel.active {
  display: block;
}
.crush-card-wrap {
  /* Fill the area under the tabs and center the (smaller) card; reserve room at
     the bottom for the fixed action dock so nothing hides behind it. */
  min-height: calc(100dvh - 110px - env(safe-area-inset-top));
  padding: 6px var(--s) calc(96px + env(safe-area-inset-bottom));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.crush-card-wrap > .crush-card {
  width: 100%;
}
.crush-card {
  border-radius:var(--rad-xl);
  overflow: hidden;
  background: #0a0518;
  border: 1px solid var(--gbdl);
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  /* 240→190: the global bottom-nav is hidden on the deck (body.crush-deck-on),
     so we no longer reserve its space — the photo gets taller, gap disappears. */
  max-height: calc(100dvh - 190px);
  display: flex;
  flex-direction: column;
  /* NOTE: the 190px reserves space for the swipe-deck's tabs + action dock. In the
     View Profile modal that chrome doesn't exist, so the card must fill instead —
     see the #user-crush-modal override below (kills the ~77px black band). */
}
/* View Profile modal: the card fills the sheet (no swipe-deck chrome here). */
#user-crush-modal .crush-card { max-height: 100% !important; }
.crush-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: 12px;
}
.crush-scroll::-webkit-scrollbar {
  width: 0;
}
.crush-photo-block {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #0a0518;
}
.crush-photo-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.crush-info-block {
  margin: 10px 12px;
  padding: 15px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-md);
  color: #fff;
  position: relative;
  line-height: 1.5;
}
.crush-info-block + .crush-info-block {
}
.crush-reply {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--p);
  color: #fff;
  border: none;
  border-radius:var(--rad-lg);
  padding: 5px 11px;
  font-family: var(--font);
  font-size:var(--fs-xs);
  font-weight:600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow:var(--el-2);
}
.crush-prompt {
  margin: 10px 12px;
  padding: 16px;
  background: rgba(240, 62, 90, 0.06);
  border: 1px solid rgba(240, 62, 90, 0.22);
  border-radius:var(--rad-md);
  position: relative;
}
.crush-prompt-q {
  font-size:var(--fs-xs);
  font-weight:600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
  padding-right: 70px;
}
.crush-prompt-a {
  font-size:var(--fs-lg);
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  padding-right: 70px;
}
.crush-cover-info {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 9px;
  z-index: 3;
  color: #fff;
}
.crush-cover-ov {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 2%,
    rgba(0, 0, 0, 0.3) 60%,
    transparent
  );
  pointer-events: none;
  z-index: 2;
}
/* legacy holders */
.crush-info {
  display: none;
}
.crush-photo-area {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.crush-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.crush-photo-dots {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  z-index: 4;
  pointer-events: none;
}
.crush-photo-dot {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  transition: all 0.2s;
  flex: 1;
  max-width: 32px;
}
.crush-photo-dot.active {
  background: #fff;
  opacity: 1;
}
.crush-nav-l {
  position: absolute;
  left: 0;
  top: 0;
  width: 40%;
  height: 100%;
  z-index: 3;
  cursor: pointer;
  background: transparent;
}
.crush-nav-r {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  z-index: 3;
  cursor: pointer;
  background: transparent;
}
.gal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.2s;
  cursor: pointer;
}
.gal-dot.active {
  background: #fff;
}
.post-gallery-wrap {
  margin: 0 13px 10px;
  border-radius: var(--rx);
  overflow: hidden;
  position: relative;
  background: #000;
}
.post-gallery-imgs {
  display: flex;
  transition: transform 0.3s;
}
.post-gallery-img {
  min-width: 100%;
  max-height: 360px;
  object-fit: contain;
  display: block;
  background: #000;
}
.post-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  color: #fff;
  font-size:var(--fs-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.post-gallery-nav-l {
  left: 8px;
}
.post-gallery-nav-r {
  right: 8px;
}
.post-gallery-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
}
/* PHOTO LAYOUT PICKER */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.layout-opt {
  border-radius:var(--rad-sm);
  border: 2px solid var(--gbdl);
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 6px 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.layout-opt:active,
.layout-opt.sel {
  border-color: var(--p);
  background: rgba(var(--p-rgb, 61, 123, 255), 0.15);
}
.layout-preview {
  display: grid;
  gap: 2px;
  height: 52px;
  margin-bottom: 5px;
  border-radius:var(--rad-xs);
  overflow: hidden;
}
.lp-cell {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.layout-name {
  font-size:var(--fs-2xs);
  font-weight:600;
  color: var(--fg2);
}
.layout-upload-grid {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}
.layout-slot {
  aspect-ratio: 1;
  border-radius:var(--rad-sm);
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.layout-slot.filled {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.15);
}
/* LAYOUT RENDER STYLES */
.pl-full img {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  display: block;
  background: #000;
}
.pl-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.pl-split img,
.pl-stack img,
.pl-feature .lf img,
.pl-feature .lr img,
.pl-mosaic .lm img,
.pl-mosaic .rm img,
.pl-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pl-split {
  height: 220px;
}
.pl-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  height: 300px;
}
.pl-feature {
  display: grid;
  grid-template-rows: 200px 120px;
  gap: 2px;
}
.pl-feature-top img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.pl-feature-bot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.pl-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  height: 280px;
}
.pl-mosaic-l img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pl-mosaic-r {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
.pl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  height: 280px;
}
.crush-det {
  font-size:var(--fs-sm);
  color: var(--fg2);
  margin-bottom: 6px;
}
.crush-bio {
  font-size:var(--fs-base);
  color: var(--fg);
  line-height: 1.5;
  margin-bottom: 8px;
}
.crush-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cc {
  padding: 4px 10px;
  border-radius:var(--rad-md);
  font-size:var(--fs-xs);
  font-weight:500;
  border: 1px solid var(--gbdl);
  color: var(--fg2);
}
.crush-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 6px 4px;
  margin: 12px auto 0;
  width: fit-content;
  border-radius: 36px;
  /* pill container is invisible now — only the button circles show */
  background: transparent;
  border: none;
  box-shadow: none;
}
.crush-card-wrap > .crush-actions {
  position: sticky;
  bottom: 8px;
  z-index: 60;
}
/* ── Crush swipe dock: one bar that slides between [actions] ↔ [nav] ────── */
.crush-dock {
  position: fixed; /* pinned to the bottom so the action buttons always "follow" */
  left: 0;
  right: 0;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 60;
  width: calc(100% - 24px);
  max-width: 380px;
  margin: 0 auto;
  overflow: hidden;
}
.crush-dock-track {
  display: flex;
  width: 200%;
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  touch-action: pan-y;
}
.crush-dock-track.show-nav {
  transform: translateX(-50%);
}
.crush-dock-page {
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crush-dock-page .crush-actions {
  margin-top: 0 !important;
}
.crush-dock-page .bot-inner {
  width: 100%;
  max-width: 340px;
}
.crush-dock-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
  padding: 4px 0; /* larger tap area without larger dots */
}
.crush-dock-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  opacity: 0.6;
  transition: opacity 0.2s, width 0.2s, background 0.2s;
}
.crush-dock-dots span.on {
  background: #fff;
  width: 18px;
  opacity: 1;
  border-radius: 3px;
}
/* while the Crush deck is on screen, the global bottom nav is replaced by the
   dock's second page — hide the global one to avoid two navs. */
body.crush-deck-on .bot-nav {
  display: none !important;
}
/* Plans is not a bottom-nav destination — the nav there could only take you to
   a different section, never back to where you came from. The top-bar chevron
   does that instead, so the nav goes away and its 90px of scroll clearance with
   it. Same body-class mechanism as the Crush deck above. */
body.plans-fullscreen .bot-nav {
  display: none !important;
}
body.plans-fullscreen .app-scroll {
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
/* The Crush swipe deck is a fixed card + fixed dock — the whole section must not
   scroll (other sections still scroll normally). */
body.crush-deck-on #app-scroll {
  overflow: hidden !important;
}
/* Deck card is a fixed, non-scrolling photo that fills the card (no black gap,
   no scroll). The full profile scrolls only inside the details modal (tap photo). */
#crush-card {
  height: calc(100dvh - 240px - env(safe-area-inset-top)) !important;
  max-height: 640px !important;
}
#crush-card .crush-card-inner,
#crush-card .crush-scroll,
#crush-card .crush-gallery {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  flex: none !important;
}
/* First-run "tap to see profile" hint: breathes for attention, then fades away. */
@keyframes crushTapBreath {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.09); }
}
@keyframes crushTapFade { to { opacity: 0; } }
.crush-tap-hint {
  animation: crushTapBreath 1.3s ease-in-out infinite, crushTapFade 0.5s ease 4.5s forwards;
}
.crb {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(18, 10, 35, 0.6) !important;
  backdrop-filter: blur(4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur), border-color var(--dur), box-shadow var(--dur), color var(--dur) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}
.crb-svg {
  width: 17px !important;
  height: 17px !important;
  display: block;
  stroke: currentColor;
  stroke-width: 2.2 !important;
}
.crb-svg.crb-undo-svg {
  width: 15px !important;
  height: 15px !important;
}
.crb:hover {
  transform: scale(1.1);
}
.crb:active {
  transform: scale(0.9) !important;
}
/* Neon Red X (Reject) */
.crb-neon-x {
  border: 2.5px solid var(--wine) !important;
  color: var(--wine) !important;
}
.crb-neon-x:hover {
  box-shadow: 0 0 12px color-mix(in srgb, var(--wine) 60%, transparent),
              inset 0 0 12px color-mix(in srgb, var(--wine) 35%, transparent) !important;
}
/* Neon Yellow Arrow (Rewind) */
.crb-neon-undo {
  border: 2.5px solid #f59e0b !important;
  color: #f59e0b !important;
  
}
.crb-neon-undo:hover {
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.7), inset 0 0 12px rgba(245, 158, 11, 0.4) !important;
}
/* Neon Blue Star (Super Like) */
.crb-neon-star {
  border: 2.5px solid #06b6d4 !important;
  color: #06b6d4 !important;
  
}
.crb-neon-star:hover {
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.7), inset 0 0 12px rgba(6, 182, 212, 0.4) !important;
}
/* Neon Pink Flower (Rose) */
.crb-neon-rose {
  border: 2.5px solid #dc2626 !important;
  color: #dc2626 !important;
  
}
.crb-neon-rose:hover {
  box-shadow: 0 0 12px rgba(240, 62, 90, 0.7), inset 0 0 12px rgba(240, 62, 90, 0.4) !important;
}
/* Neon Green Heart (Like) */
.crb-neon-heart {
  border: 2.5px solid #22c55e !important;
  color: #22c55e !important;
  
}
.crb-neon-heart:hover {
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.7), inset 0 0 12px rgba(34, 197, 94, 0.4) !important;
}
.swipe-overlay {
  position: absolute !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 112px !important;
  height: 112px !important;
  border-radius: 50% !important;
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  opacity: 0;
  pointer-events: none !important;
  z-index: 100 !important;
  padding: 0 !important;
  font-size: 58px !important;
  line-height: 1 !important;
  border: 5px solid transparent !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  transition: opacity var(--dur) ease, transform var(--dur) ease !important;
}

#swipe-overlay-like {
  top: 30px !important;
  left: 20px !important;
  border-color: #4ade80 !important;
  color: #4ade80 !important;
  box-shadow: 0 0 20px rgba(74,222,128,0.55), inset 0 0 12px rgba(74,222,128,0.35) !important;
  transform: rotate(-15deg) scale(0.85) !important;
}

#swipe-overlay-reject {
  top: 30px !important;
  right: 20px !important;
  border-color: #dc2626 !important;
  color: #dc2626 !important;
  box-shadow: 0 0 20px rgba(220,38,38,0.55), inset 0 0 12px rgba(220,38,38,0.35) !important;
  transform: rotate(15deg) scale(0.85) !important;
}

#swipe-overlay-maybe {
  top: 68% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.85) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 20px rgba(56,189,248,0.55), inset 0 0 12px rgba(56,189,248,0.35) !important;
}

.crush-card:has(.crush-card-inner) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.crush-card-inner {
  border-radius:var(--rad-xl) !important;
  overflow: hidden !important;
  background: #0b0818 !important;
  border: 1px solid rgba(61, 123, 255, 0.18) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), var(--glow-soft) !important;
  display: flex !important;
  flex-direction: column !important;
  transform-origin: center bottom !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
  overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: none !important;
}

.crush-card-inner.current {
  position: relative !important;
  z-index: 2 !important;
  cursor: grab !important;
  width: 100% !important;
  height: auto !important;
  touch-action: pan-y !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}

.crush-card-inner.current:active {
  cursor: grabbing !important;
}

.crush-card-inner.current * {
  -webkit-user-drag: none !important;
}

.crush-card-inner.next {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: #06030e;
  border: 1px solid rgba(61, 123, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.neon-placeholder-container {
  position: relative !important;
  width: 180px !important;
  height: 180px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.neon-badge {
  position: absolute !important;
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  transform: scale(0.5) !important;
  will-change: transform, opacity !important;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) ease !important;
  background: rgba(6, 3, 14, 0.85) !important;
}

.neon-svg {
  width: 64px !important;
  height: 64px !important;
}

/* Neon Badge - Like (Green) */
.neon-badge-like {
  border: 3px solid #22c55e !important;
  color: #22c55e !important;
  
}
.neon-badge-like .neon-svg {
  ) !important;
}

/* Neon Badge - Reject (Red) */
.neon-badge-reject {
  border: 3px solid #ef4444 !important;
  color: #ef4444 !important;
  
}
.neon-badge-reject .neon-svg {
  ) !important;
}

/* Neon Badge - Maybe (Cyan) */
.neon-badge-maybe {
  border: 3px solid #38bdf8 !important;
  color: #38bdf8 !important;
  
}
.neon-badge-maybe .neon-svg {
  ) !important;
}

.crush-card-inner .crush-scroll {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 10px !important;
}
.liked-card {
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 var(--s) 11px;
  border: 1px solid var(--gbdl);
  position: relative;
  aspect-ratio: 1;
}
.liked-card-blur {
  filter: blur(12px);
  pointer-events: none;
  user-select: none;
}
.liked-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  gap: 10px;
}
.love-filter-section {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gbdl);
  border-radius: var(--rs);
  padding: 13px;
  margin-bottom: 10px;
}
.love-filter-title {
  font-size:var(--fs-xs);
  font-weight:600;
  color: var(--fg2);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Accordion: collapsed sections show only their title row */
.love-filter-section.collapsed {
  padding: 11px 13px;
}
.love-filter-section.collapsed > *:not(.love-filter-title) {
  display: none !important;
}
.love-filter-section.collapsed .love-filter-title {
  margin-bottom: 0;
}
.evfilt {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gbdl);
  border-radius: var(--rs);
  padding: 13px;
  margin: 0 0 10px !important;
}
.evfilt.collapsed {
  padding: 12px 13px;
}
.evfilt.collapsed > *:not(.evfilt-h) {
  display: none !important;
}
.evfilt-h {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.evfilt.collapsed .evfilt-h {
  margin-bottom: 0;
}
.evfilt-h::after {
  content: "▾";
  margin-left: auto;
  color: var(--fg3);
  font-size:var(--fs-sm);
  font-weight:600;
}
.evfilt.collapsed .evfilt-h::after {
  content: "▸";
}
.acc-caret {
  margin-left: auto;
  font-size:var(--fs-sm);
  color: var(--fg2);
  font-weight:500;
}
.acc-badge {
  color: var(--p);
  font-weight:600;
}
/* 🍂 Seasonal skin particles */
#season-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
#season-particles span {
  will-change: transform;
}
@keyframes season-fall {
  0% {
    transform: translateY(-12vh) rotate(0deg);
  }
  100% {
    transform: translateY(112vh) rotate(360deg);
  }
}
/* PROFILE */
.pbanner {
  height: 260px;
  position: relative;
  cursor: pointer;
  border-radius: 0;
}
.pbi {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--p), var(--p2));
  background-size: cover;
  background-position: center;
}
.pbov {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
}
.ppic-w {
  padding: 0 var(--s);
  margin-top: -32px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.ppic {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid rgba(20, 10, 40, 0.97);
  background: var(--p);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-2xl);
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.ped {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-xs);
  cursor: pointer;
}
.pinf {
  padding: 0 var(--s) 8px;
}
.pnm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.pnm {
  font-size:var(--fs-xl);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
  font-family: var(--font-serif);
}
.vbadge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vbadge.verified {
  background: #1d9bf0;
}
@keyframes matchFadeIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes matchHeartPop {
  0% {
    transform: scale(0) rotate(-20deg);
  }
  60% {
    transform: scale(1.3) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
@keyframes matchAvatarIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes matchPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
.phdl {
  font-size:var(--fs-sm);
  color: var(--fg2);
  margin-bottom: 5px;
}
.uni-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius:var(--rad-md);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--gbdl);
  font-size:var(--fs-xs);
  font-weight:500;
  color: var(--fg2);
  margin-bottom: 9px;
}
.pbio {
  font-size:var(--fs-base);
  color: var(--fg2);
  line-height: 1.5;
  margin-bottom: 8px;
}
.pstats {
  display: flex;
  gap: 18px;
  margin-bottom: 8px;
}
.sn {
  font-size:var(--fs-lg);
  font-weight: 900;
  color: #fff;
}
.sl2 {
  font-size:var(--fs-2xs);
  color: var(--fg2);
  font-weight:500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sep {
  height: 1px;
  background: var(--gbdl);
  margin: 4px 0;
}
.psec {
  font-size:var(--fs-2xs);
  font-weight:600;
  color: var(--fg2);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  padding: 10px var(--s) 6px;
}
.crows {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 var(--s) 12px;
}
.cpill {
  padding: 5px 11px;
  border-radius:var(--rad-md);
  font-size:var(--fs-sm);
  font-weight:500;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--gbdl);
  color: var(--fg2);
}
.cpill.on {
  background: rgba(61, 123, 255, 0.12);
  border-color: rgba(61, 123, 255, 0.3);
  color: #fff;
}
#prof-interests .cpill:nth-child(6n + 1) {
  background: rgba(240, 62, 90, 0.2);
  border-color: rgba(240, 62, 90, 0.5);
  color: #fff;
}
#prof-interests .cpill:nth-child(6n + 2) {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
  color: #fff;
}
#prof-interests .cpill:nth-child(6n + 3) {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.5);
  color: #fff;
}
#prof-interests .cpill:nth-child(6n + 4) {
  background: rgba(251, 191, 36, 0.22);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fff;
}
#prof-interests .cpill:nth-child(6n + 5) {
  background: rgba(61, 123, 255, 0.2);
  border-color: rgba(61, 123, 255, 0.5);
  color: #fff;
}
#prof-interests .cpill:nth-child(6n + 6) {
  background: rgba(20, 184, 166, 0.2);
  border-color: rgba(20, 184, 166, 0.5);
  color: #fff;
}
.org-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 var(--s) 12px;
}
.org-ic {
  width: 38px;
  height: 38px;
  border-radius:var(--rad-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-lg);
}
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 var(--s) 12px;
  max-width: 380px;
  margin: 0 auto;
}
.pgcell {
  aspect-ratio: 3/4;
  background: rgba(255, 255, 255, 0.07);
  border-radius:var(--rad-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-xl);
  cursor: grab;
  overflow: hidden;
  position: relative;
}
.pgcell.add {
  border: 2px dashed rgba(61, 123, 255, 0.4) !important;
  border-color: rgba(61, 123, 255, 0.4) !important;
  font-size:var(--fs-xl);
  color: var(--p) !important;
  cursor: pointer;
}
.pgcell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Profile Crush grid — first cell is highlighted as the "shown" photo (used in friend requests / groups) */
#prof-photos {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
#prof-photos .pgcell:first-child {
  border: 2px solid var(--p);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}
#prof-photos .pgcell:first-child::after {
  content: "★ Cover";
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--p);
  color: #fff;
  font-size:var(--fs-2xs);
  font-weight:700;
  border-radius:var(--rad-xs);
  padding: 2px 6px;
  letter-spacing: 0.3px;
  z-index: 4;
  pointer-events: none;
}
.pgcell.dragging {
  opacity: 0.4;
}
.pgcell.drag-over {
  outline: 2px solid var(--p);
  outline-offset: -2px;
}
.prof-tab {
  flex: 1;
  padding: 9px 4px;
  border: none;
  border-radius:var(--rad-sm);
  font-family: var(--font);
  font-size:var(--fs-xs);
  font-weight:600;
  cursor: pointer;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  transition: all var(--dur);
}
.prof-tab.active {
  background: var(--p);
  color: #fff;
}
/* PREMIUM */
.plan-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.07);
  border-radius:var(--rad-md);
  padding: 3px;
  margin: 0 var(--s) 12px;
  border: 1px solid var(--gbdl);
}
.plan-tab {
  flex: 1;
  padding: 9px;
  border: none;
  border-radius:var(--rad-sm);
  font-family: var(--font);
  font-size:var(--fs-sm);
  font-weight:600;
  cursor: pointer;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
}
.plan-tab.on {
  color: #fff;
}
.plan-c {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--gbdl);
  border-radius: var(--r);
  padding: 16px;
  margin: 0 var(--s) 11px;
}
.plan-c.feat {
  border-color: var(--p);
  background: rgba(61, 123, 255, 0.06);
}
.plnm {
  font-size:var(--fs-lg);
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}
.plpr {
  font-size:var(--fs-2xl);
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
}
.plpr span {
  font-size:var(--fs-base);
  font-weight: 400;
  color: var(--fg2);
}
.plf {
  font-size:var(--fs-base);
  color: var(--fg2);
  padding: 3px 0;
}
.plf.hi {
  color: var(--fg);
  font-weight:500;
}
.plf.hi::before {
  content: "✓ ";
  color: var(--p);
}
.phero {
  border-radius: var(--r);
  padding: 24px 18px;
  margin: 0 var(--s) 12px;
  position: relative;
  overflow: hidden;
}
.phero-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  filter: blur(60px);
}
.ph2 {
  font-size:var(--fs-xl);
  font-weight: 900;
  color: #fff;
  position: relative;
  font-family: var(--font-serif);
}
.pp2 {
  font-size:var(--fs-base);
  color: rgba(255, 255, 255, 0.75);
  position: relative;
  margin-top: 4px;
}
/* MODALS */
.mov {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.mov.open {
  display: flex;
}
.msheet {
  background: rgba(18, 10, 35, 0.98);
  backdrop-filter: var(--blur);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-xl) 24px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 16px 18px 32px;
}
.mhnd {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 auto 16px;
}
.mtitle {
  font-size:var(--fs-lg);
  font-weight: 900;
  color: #fff;
  margin-bottom: 14px;
}
.frr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--gbdl);
}
.frr.sel .frck {
  color: var(--p);
}
.frck {
  margin-left: auto;
  font-size:var(--fs-md);
  color: var(--fg3);
}
/* SETTINGS */
.settings-section-title {
  font-size:var(--fs-xs);
  font-weight:600;
  color: var(--fg2);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  margin: 14px 0 8px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--gbdl);
}
.ig-sheet {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  max-width: 460px;
  margin: 0 auto;
}
.ig-sheet-hd {
  text-align: center;
  color: var(--fg2);
  font-size:var(--fs-sm);
  font-weight:500;
  padding: 11px;
  background: #1f1f27;
  border-radius:var(--rad-md) 14px 0 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
}
.ig-sheet-grp {
  background: #1f1f27;
  border-radius:var(--rad-md);
  overflow: hidden;
  margin-bottom: 8px;
}
.ig-sheet-hd + .ig-sheet-grp {
  border-radius: 0 0 14px 14px;
  margin-top: 0;
}
.ig-act {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: var(--font);
  font-size:var(--fs-md);
  font-weight: 600;
  padding: 15px;
  cursor: pointer;
  text-align: center;
}
.ig-act:last-child {
  border-bottom: none;
}
.ig-act.danger {
  color: #ff453a;
  font-weight:500;
}
.ig-act.bold {
  font-weight:600;
}
.ig-act:active {
  background: rgba(255, 255, 255, 0.06);
}
.crush-more-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  border: none;
  color: #fff;
  font-size:var(--fs-xl);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
html.light-primary:not(.acc-white):not(.acc-black) .gbtn,
html.light-primary:not(.acc-white):not(.acc-black) .abtn,
html.light-primary:not(.acc-white):not(.acc-black) .jbtn,
html.light-primary:not(.acc-white):not(.acc-black) .yr-chip.on,
html.light-primary:not(.acc-white):not(.acc-black) .auth-mode-chip.on,
html.light-primary:not(.acc-white):not(.acc-black) .nav-pill,
html.acc-black .gbtn,
html.acc-black .abtn,
html.acc-black .jbtn,
html.acc-black .yr-chip.on,
html.acc-black .auth-mode-chip.on,
html.acc-black .nav-pill {
  color: #000 !important;
}
html.acc-white .gbtn,
html.acc-white .abtn,
html.acc-white .jbtn,
html.acc-white .yr-chip.on,
html.acc-white .auth-mode-chip.on,
html.acc-white .nav-pill {
  color: #fff !important;
}
.settings-label {
  font-size:var(--fs-base);
  font-weight:500;
  color: var(--fg);
}
.settings-sub {
  font-size:var(--fs-xs);
  color: var(--fg2);
  margin-top: 2px;
}
.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
/* NETWORK */
.net-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--gbdl);
  border-radius: var(--r);
  padding: 14px;
  margin: 0 var(--s) 10px;
}
/* SWITCH */
.sw {
  width: 40px;
  height: 22px;
  border-radius:var(--rad-sm);
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  cursor: pointer;
  transition: background var(--dur);
  flex-shrink: 0;
}
.sw::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform var(--dur);
}
.sw.on {
  background: var(--p);
}
.sw.on::after {
  transform: translateX(18px);
}
/* BIZ BANNERS */
.biz-banner {
  margin: 0 var(--s) 11px;
  border-radius: var(--rs);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  width: calc(100% - var(--s) * 2);
}
.biz-img {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
}
.biz-ov {
  position: absolute;
  inset: 0;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, transparent 58%);
}
.biz-title-txt {
  font-size:var(--fs-md);
  font-weight:700;
  color: #fff;
}
.biz-disc {
  font-size:var(--fs-sm);
  color: rgba(255, 255, 255, 0.78);
  margin-top: 1px;
}
.biz-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 9px;
  border-radius:var(--rad-lg);
  font-size:var(--fs-2xs);
  font-weight:600;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
/* PAYMENT */
.pay-card-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.pay-card-type {
  flex: 1;
  padding: 12px;
  border-radius: var(--rs);
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: all var(--dur);
}
.pay-card-type.sel {
  border-color: var(--p);
  background: rgba(255, 255, 255, 0.12);
}
.pay-input {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid var(--gbdl);
  border-radius: var(--rx);
  color: #fff;
  font-family: var(--font);
  font-size:var(--fs-base);
  padding: 12px 14px;
  outline: none;
  margin-bottom: 10px;
}
.pay-input:focus {
  border-color: var(--p);
}
.pay-input::placeholder {
  color: var(--fg3);
}
/* AGE BLOCK */
.age-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.age-modal.open {
  display: flex;
}
/* GIF PICKER */
.gif-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.gif-modal.open {
  display: flex;
}
.gif-sheet {
  background: rgba(18, 10, 35, 0.98);
  backdrop-filter: var(--blur);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-xl) 24px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 70dvh;
  overflow-y: auto;
  padding: 14px 16px 28px;
}
.gif-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.gif-cell {
  border-radius:var(--rad-sm);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gbdl);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gif-cell:active {
  opacity: 0.7;
}
.gif-cell canvas {
  width: 100%;
  height: 100%;
  border-radius:var(--rad-sm);
}
/* STICKER TOOLTIP */
.sticker-pop {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 10, 35, 0.98);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-md);
  padding: 10px;
  width: 300px;
  max-height: 380px;
  overflow-y: auto;
  z-index: 350;
  box-shadow: var(--gs);
  display: none;
}
.sticker-pop.open {
  display: block;
}
.stk-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 6px;
}
.stk-tab {
  flex: 1;
  padding: 5px 3px;
  border: none;
  border-radius:var(--rad-xs);
  font-family: var(--font);
  font-size:var(--fs-2xs);
  font-weight:600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.07);
  color: var(--fg3);
  text-align: center;
}
.stk-tab.on {
  background: var(--p);
  color: #fff;
}
/* Dual-handle age range slider */
.age-slider-wrap {
  position: relative;
  height: 46px;
  display: flex;
  align-items: center;
  margin: 14px 0 4px;
  padding: 0 4px;
}
.age-slider-track {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 10px;
  border-radius:var(--rad-xs);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.age-slider-fill {
  position: absolute;
  height: 10px;
  border-radius:var(--rad-xs);
  background: linear-gradient(90deg, var(--p), #e91e8c);
  
}
.age-slider-wrap input[type="range"] {
  position: absolute;
  left: 4px;
  right: 4px;
  width: calc(100% - 8px);
  height: 10px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
  margin: 0;
}
.age-slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--p);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 0 0 4px rgba(233, 30, 140, 0.18);
  cursor: pointer;
  pointer-events: all;
  transition: transform var(--dur);
}
.age-slider-wrap input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--p);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 0 0 4px rgba(233, 30, 140, 0.18);
  cursor: pointer;
  pointer-events: all;
}
.age-slider-wrap input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.18);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.55),
    0 0 0 6px rgba(233, 30, 140, 0.28);
}
.age-range-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--p), #e91e8c);
  color: #fff;
  font-size:var(--fs-xs);
  font-weight:700;
  padding: 3px 10px;
  border-radius:var(--rad-md);
  letter-spacing: 0.2px;
  box-shadow:var(--el-2);
}
.age-end-num {
  font-size:var(--fs-base);
  font-weight:700;
  color: rgba(255, 255, 255, 0.55);
}
.age-end-num.active {
  color: #fff;
}
.stk-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.stk-item {
  aspect-ratio: 1;
  border-radius:var(--rad-xs);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gbdl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-xl);
  cursor: pointer;
  transition: transform var(--dur-fast);
  position: relative;
}
.stk-fav-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fbbf24;
  font-size:var(--fs-2xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.stk-item:active {
  transform: scale(0.88);
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bot-nav {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
::-webkit-scrollbar-thumb {
  background: transparent !important;
}
* {
  scrollbar-width: none;
}
.ev-cal-day {
  text-align: center;
  font-size:var(--fs-sm);
  font-weight:500;
  color: #fff;
  border-radius:var(--rad-xs);
  padding: 5px 2px;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: var(--font);
  transition: background var(--dur);
}
.ev-cal-day:hover {
  background: rgba(255, 255, 255, 0.1);
}
.ev-cal-day.selected {
  background: var(--p);
  color: #fff;
}
.ev-cal-day.today {
  border: 1.5px solid var(--p);
}
.ev-cal-day.past {
  color: rgba(255, 255, 255, 0.25);
  cursor: default;
}
.ev-cal-day.empty {
  cursor: default;
}
/* MOTION & ANIMATIONS */
@keyframes cardIn {
  from {
    opacity: 0;
    transform: scale(0.93) translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5) rotate(0deg);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-240px) scale(1.35) rotate(var(--r, 12deg));
  }
}
@keyframes shimmerSweep {
  0% {
    transform: translateX(-130%);
  }
  60%,
  100% {
    transform: translateX(260%);
  }
}
@keyframes flameFlicker {
  0%,
  100% {
    transform: scale(1) rotate(-3deg);
  }
  50% {
    transform: scale(1.15) rotate(3deg);
  }
}
@keyframes sectionIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ringPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(240, 62, 90, 0.45);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(240, 62, 90, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(240, 62, 90, 0);
  }
}
@keyframes glowPulse {
  0%,
  100% {
    box-shadow:var(--el-3);
  }
  50% {
    box-shadow:var(--el-3);
  }
}
@keyframes barGrow {
  from {
    width: 0 !important;
  }
}
/* button micro-press (skips toggles/range) */
button {
  transition: transform 0.09s ease;
}
button:active {
  transform: scale(0.95);
}
.gbtn:active,
.jbtn:active,
.crb:active {
  transform: scale(0.94);
}
/* section transition on switch */
.section.active {
  animation: sectionIn 0.3s ease;
}
/* card entrance — replayed via .replay toggle in renderCrush */
.crush-card.replay {
  animation: cardIn 0.34s cubic-bezier(0.2, 0.8, 0.3, 1);
}
/* staggered list entrance */
.stagger > * {
  animation: fadeUp 0.45s ease backwards;
}
.stagger > *:nth-child(1) {
  animation-delay: 0.02s;
}
.stagger > *:nth-child(2) {
  animation-delay: 0.06s;
}
.stagger > *:nth-child(3) {
  animation-delay: 0.1s;
}
.stagger > *:nth-child(4) {
  animation-delay: 0.14s;
}
.stagger > *:nth-child(5) {
  animation-delay: 0.18s;
}
.stagger > *:nth-child(6) {
  animation-delay: 0.22s;
}
.stagger > *:nth-child(7) {
  animation-delay: 0.26s;
}
.stagger > *:nth-child(8) {
  animation-delay: 0.3s;
}
/* shimmering sheen (spotlight, MVP) */
.shine-card {
  position: relative;
}
.shine-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.16),
    transparent
  );
  animation: shimmerSweep 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.glow-pulse {
  animation: glowPulse 2.6s ease-in-out infinite;
}
.flame-pulse {
  display: inline-block;
  animation: flameFlicker 1.5s ease-in-out infinite;
  transform-origin: center bottom;
}
.pop-in {
  animation: popIn 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.heart-particle {
  position: fixed;
  z-index: 100002;
  pointer-events: none;
  animation: floatUp 1.7s ease-out forwards;
  will-change: transform, opacity;
}
/* ── second wave ── */
@keyframes skelShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes navBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px) scale(1.14);
  }
  60% {
    transform: translateY(-1px);
  }
}
@keyframes badgePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.32);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes toastUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
.np.active .ni {
  animation: navBounce 0.42s ease;
}
.skel {
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0.13) 50%,
    rgba(255, 255, 255, 0.05) 70%
  );
  background-size: 200% 100%;
  animation: skelShimmer 1.25s linear infinite;
  border-radius:var(--rad-md);
}
#notif-badge.np-pulse {
  animation: badgePulse 0.5s ease;
}
.toast-up {
  animation: toastUp 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* ============ RESPONSIVE — center as a phone column on tablets/desktop ============ */
@media (min-width: 500px) {
  html,
  body {
    background:
      linear-gradient(rgba(8, 4, 17, 0.58), rgba(6, 3, 13, 0.86)),
      radial-gradient(820px 560px at 6% -8%, var(--p), transparent 58%),
      radial-gradient(740px 500px at 100% 4%, var(--p2), transparent 58%),
      radial-gradient(1050px 700px at 50% 112%, var(--p), transparent 62%),
      #000000;
    /* background-attachment:fixed removed (see note on body rule) */
  }
  .screen {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    border-radius:var(--rad-xl) 26px 0 0;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 30px 90px rgba(0, 0, 0, 0.6);
  }
  .cwin {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
  .bot-nav {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
  .msheet {
    max-width: 440px;
  }
}
@media (min-width: 1024px) {
  .screen {
    max-width: 460px;
  }
  .bot-nav {
    max-width: 460px;
  }
  .msheet {
    max-width: 460px;
  }
  .cwin {
    max-width: 460px;
  }
}
/* ── Small-phone responsive scaling ──────────────────────────────────────
   Every text size and the base spacing read from these root tokens, so
   scaling them here makes the WHOLE app fit compact phones (iPhone SE/mini,
   small Androids) in one place — no per-screen tweaks needed. --fs-md is left
   at 16px on purpose: it is the input font-size, and anything below 16px makes
   iOS zoom the page on focus. */
@media (max-width: 380px) {
  :root {
    --s: 12px;
    --fs-2xs: 9.5px;
    --fs-xs: 10.5px;
    --fs-sm: 11.5px;
    --fs-base: 13.5px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-2xl: 25px;
    --r: 18px;
  }
}
@media (max-width: 340px) {
  :root {
    --s: 10px;
    --fs-2xs: 9px;
    --fs-xs: 10px;
    --fs-sm: 11px;
    --fs-base: 13px;
    --fs-lg: 16px;
    --fs-xl: 19px;
    --fs-2xl: 23px;
    --r: 16px;
  }
}
/* never let content overflow the frame horizontally */
img,
video,
canvas,
svg {
  max-width: 100%;
}

/* ===== CREATE HANGOUT redesign ===== */
#evp-create .eh-head {
  text-align: center;
  padding: 8px 0 16px;
}
/* ══ CREATE EVENT — one hue per step ══
   These eight cards were the last big surface still on the old purple glass
   (rgba(38,20,68,.65) + blur), which made the whole Create screen look like a
   different app. Black now, one 1.5px border, no blur and no resting drop
   shadow — the same recipe as every other card.
   Each step owns a hue that its number, border and title all share, so a long
   form becomes something you can scan. --step-hue is set per data-step below;
   an explicit attribute rather than :nth-of-type, because .eh-head is a sibling
   <div> too and would shift the whole count by one. */
/* The box is gone: each step is now a title with a chevron over a coloured
   underline, the same shape as the Settings sections. Collapsing reuses the
   .evfilt recipe already used by the filter rows in card 6 — a class plus
   display:none — and NOT the Settings accordion's max-height + overflow:hidden,
   which caps at 1000px (card 6 is taller than that) and would clip the date
   picker popup in card 2. */
#evp-create .ehcard {
  --step-hue: rgba(255, 255, 255, 0.34);
  position: relative;
  z-index: 1;
  background: #000;
  border: 1.5px solid color-mix(in srgb, var(--step-hue) 45%, transparent);
  border-radius: var(--rad-lg);
  padding: 16px 15px;
  margin-bottom: 14px;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--step-hue) 8%, transparent);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Each step keeps its own colour so the flow stays lively; the STATE layers on
   top (open = a lit card in that hue, done = a green ✓). */
#evp-create .ehcard[data-step="1"] { --step-hue: var(--c-blue); }
#evp-create .ehcard[data-step="2"] { --step-hue: var(--c-cyan); }
#evp-create .ehcard[data-step="3"] { --step-hue: var(--c-red-ink); }
#evp-create .ehcard[data-step="4"] { --step-hue: var(--c-lime); }
#evp-create .ehcard[data-step="5"] { --step-hue: var(--c-pink); }
#evp-create .ehcard[data-step="6"] { --step-hue: var(--c-violet); }
#evp-create .ehcard[data-step="7"] { --step-hue: var(--c-amber); }
#evp-create .ehcard[data-step="8"] { --step-hue: var(--c-green); }

/* The step number and the title follow the card. The inline colours these
   titles used to carry are gone from index.html, or they would win over this. */
#evp-create .ehsec .ehnum {
  background: color-mix(in srgb, var(--step-hue) 82%, #000) !important;
  border: 1.5px solid var(--step-hue);
  color: #fff;
}
#evp-create .ehsec .ehtitle {
  color: var(--step-hue);
}
#evp-create .ehcard:has(#ev-cal-wrap:not([style*="display: none"])),
#evp-create .ehcard:has(#ev-cal-wrap[style*="display: block"]) {
  z-index: 500 !important;
}
/* Focus/hover brightens the step's own edge instead of adding a crimson halo to
   a card that is not selectable. */
#evp-create .ehcard:focus-within,
#evp-create .ehcard:hover {
  border-color: var(--step-hue);
}
.ev-stock-choice {
  transition: transform 0.2s var(--ease), border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.ev-stock-choice:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: rgba(240, 62, 90, 0.6) !important;
  box-shadow: 0 8px 20px rgba(240, 62, 90, 0.35) !important;
}
.ev-stock-choice.selected:hover {
  border-color: var(--p) !important;
}
@keyframes pulse-arrow {
  0%, 100% { transform: translateX(0); opacity: 0.75; }
  50% { transform: translateX(4px); opacity: 1; }
}
#evp-create .ehsec {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size:var(--fs-sm);
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 13px;
  cursor: pointer;
  touch-action: manipulation;
}
#evp-create .ehsec .ehnum {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #791515;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-xs);
  font-weight:700;
  flex-shrink: 0;
  
}
#evp-create .ehsec .ehic {
  font-size:var(--fs-md);
}
#evp-create .ehtip {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: rgba(61, 123, 255, 0.1);
  border: 1px solid rgba(61, 123, 255, 0.28);
  border-radius:var(--rad-md);
  padding: 11px 12px;
  margin-top: 6px;
  font-size:var(--fs-sm);
  color: #fff;
  line-height: 1.45;
}
#evp-create .ehtip-i {
  color: #a9c4ff;
}
#evp-create .ehsug {
  flex: 0 0 150px;
  background: rgba(43, 95, 217, 0.1);
  border: 1px solid rgba(43, 95, 217, 0.3);
  border-radius:var(--rad-md);
  padding: 12px;
}
#evp-create .ehbars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 56px;
}
#evp-create .ehbars span {
  flex: 1;
  background: linear-gradient(180deg, #22d3ee, #3d7bff);
  border-radius: 3px;
  min-height: 4px;
}
#evp-create .ehtoggle {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-md);
  padding: 4px;
  margin-bottom: 10px;
}
#evp-create .ehtog {
  flex: 1;
  padding: 9px;
  border-radius:var(--rad-sm);
  border: none;
  background: transparent;
  color: var(--fg2);
  font-family: var(--font);
  font-size:var(--fs-sm);
  font-weight:600;
  cursor: pointer;
}
#evp-create .ehtog.on {
  background: rgba(240, 62, 90, 0.16);
  color: #dc2626;
  box-shadow: inset 0 0 0 1px rgba(240, 62, 90, 0.4);
}
#evp-create .ehmini {
  flex: 1;
  padding: 9px;
  border-radius:var(--rad-sm);
  border: 1px solid var(--gbdl);
  background: rgba(43, 95, 217, 0.08);
  color: #a9c4ff;
  font-family: var(--font);
  font-size:var(--fs-sm);
  font-weight:600;
  cursor: pointer;
}
#evp-create .ehstep {
  display: flex;
  align-items: center;
  gap: 8px;
}
#evp-create .ehstepb {
  width: 40px;
  height: 44px;
  border-radius:var(--rad-sm);
  border: 1px solid var(--gbdl);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size:var(--fs-xl);
  font-weight: 900;
  cursor: pointer;
  flex-shrink: 0;
}
#evp-create .ehprev {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-md);
  padding: 12px;
  margin-bottom: 10px;
}
#evp-create .ehprev-thumb {
  width: 78px;
  height: 78px;
  border-radius:var(--rad-sm);
  background: #791515;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
}
#evp-create .ehprev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size:var(--fs-xs);
  font-weight:500;
  color: var(--fg2);
  margin-bottom: 12px;
  padding: 0 2px;
}
#evp-create #ev-publish-btn {
  /* Was a hardcoded crimson→orange gradient, which made Publish the one primary
     button that never took the school colour. */
  background: linear-gradient(90deg, var(--p), color-mix(in srgb, var(--p) 55%, #000)) !important;
  font-size:var(--fs-md);
  font-weight:700;
  box-shadow:var(--el-3);
}


/* ===== A+ Plans (planes2) ===== */
/* One gutter for the whole screen. Every child used to carry its own
   `margin:0 16px` + `width:calc(100% - 32px)` + `box-sizing:border-box` — a dozen
   copies of the same number, none of them the app's own --s. Children are plain
   blocks now; anything that must bleed to the edge (the Rewards path scroller)
   cancels it with .plans-bleed below. */
#plans-content {
  padding: 0 var(--s);
}
#plans-content .plans-bleed {
  margin-inline: calc(var(--s) * -1);
  padding-inline: var(--s);
}
#plans-content .ap-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  /* background: linear-gradient(120deg, #2b5fd9, #3d7bff 50%, #f97316); */
  border-radius:var(--rad-lg);
  padding: 18px;
  margin-bottom: 16px;
  /* box-shadow:var(--el-3);*/
} 
#plans-content .ap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 16px;
}
/* Layout only. The look comes from .neon-card (black fill + per-feature
   coloured edge + halo); background/border were removed here because this
   selector is ID-scoped and would otherwise outrank that class. */
#plans-content .ap-feat {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px 11px;
}
#plans-content .ap-feat-ic {
  font-size:var(--fs-lg);
  flex-shrink: 0;
}
/* Neon Category Chips for Chats - Exact Unselected & Selected Neon Colors */
.chatsec-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius:var(--rad-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font);
  font-size:var(--fs-sm);
  font-weight:600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  user-select: none;
}
.chatsec-chip svg {
  flex-shrink: 0;
  display: block;
  stroke: currentColor;
}
.chatsec-chip .csl {
  color: inherit;
}
.chatsec-chip:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.07);
}

/* ══ EMPTY STATE ══
   Empty states ranged from a full illustrated block to bare "No classes yet".
   One component so every dead end explains itself and offers a way out. */
.empty-state { text-align: center; padding: 40px var(--s); }
.empty-state .es-ico {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(61, 123, 255, 0.12);
  border: 1px solid rgba(61, 123, 255, 0.3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; color: #a9c4ff;
}
.empty-state .es-ico svg { width: 28px; height: 28px; }
.empty-state .es-title { font-size: var(--fs-md); font-weight:700; color: #fff; margin-bottom: 5px; }
.empty-state .es-body {
  font-size: var(--fs-sm); color: var(--fg2); line-height: 1.5;
  max-width: 240px; margin: 0 auto 16px;
}
.empty-state .es-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px; border-radius: var(--rad-md); border: none;
  background: var(--p); color: #fff; cursor: pointer;
  font-family: var(--font); font-size: var(--fs-base); font-weight:700;
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.empty-state .es-cta:active { transform: translateY(1px) scale(0.98); filter: brightness(1.08); }

/* ══ TEXT ROLES ══
   The same size+weight+colour combos were pasted inline hundreds of times.
   Naming them means a copy tweak is one edit here instead of 35 in app.js. */
.t-meta        { font-size: var(--fs-xs);   color: var(--fg2); }
.t-sub         { font-size: var(--fs-sm);   color: var(--fg2); }
.t-body        { font-size: var(--fs-base); font-weight: 400; color: var(--fg2); }
.t-body-strong { font-size: var(--fs-base); font-weight:600; color: #fff; }
.t-body-black  { font-size: var(--fs-base); font-weight:700; color: #fff; }
.t-sub-strong  { font-size: var(--fs-sm);   font-weight:600; color: #fff; }
.t-title       { font-size: var(--fs-lg);   font-weight: 900; color: #fff; }
.t-title-md    { font-size: var(--fs-md);   font-weight:700; color: #fff; }
/* Varsity label — wide-tracked small caps, the way team programmes and student
   credentials set their headers. The tracking is what reads collegiate. */
.t-label {
  font-size: var(--fs-xs); font-weight: 700; color: var(--fg2);
  text-transform: uppercase; letter-spacing: 1.6px;
}

/* ══ VARSITY CHROME ══ */
/* Hairline rule — the divider a programme or a transcript uses */
.v-rule {
  height: 1px; border: 0; margin: 12px 0;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.14) 15%, rgba(255,255,255,0.14) 85%, transparent);
}
.v-rule-solid { height: 1px; border: 0; margin: 12px 0; background: rgba(255,255,255,0.1); }

/* Stat block — numbers carry the weight, labels stay quiet and tracked */
.v-stats { display: flex; align-items: stretch; }
.v-stat { flex: 1; text-align: center; padding: 4px 8px; }
.v-stat + .v-stat { border-left: 1px solid rgba(255,255,255,0.1); }
.v-stat-num {
  font-family: 'Outfit', var(--font), sans-serif;
  font-size: var(--fs-xl); font-weight: 800; color: #fff;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.v-stat-lbl {
  font-size: 10px; font-weight: 700; color: var(--fg2);
  text-transform: uppercase; letter-spacing: 1.4px; margin-top: 3px;
}

/* Section header: tracked caps trailing into a rule, instead of another bold line */
.v-head {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--fg2);
  text-transform: uppercase; letter-spacing: 1.6px;
  margin: 18px 0 10px;
}
.v-head::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.12); }
.t-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

/* ══ CHIP COLOR SYSTEM ══
   Every filter chip owns a hue (--chip) and derives its whole look from it:
     idle      → 10% tinted fill, 40% border, label + icon in the hue
     selected  → 28% fill, solid border, glow, white label + icon
   This is the recipe the Friends / Events chips already had; now every chip in
   Chats and Hangouts follows it, so a chip's fill always matches its lettering. */

/* Section hues — ordered so neighbours in the chip row never share a family:
   green → rose → blue → orange → purple → amber → cyan → pink. No two sections
   share a colour, and none sits next to the purple ⊕ button. */
.chatsec-chip[data-sec="all"],        .evsec-chip[data-sec="all"]        { --chip: var(--c-emerald); } /* emerald */
.chatsec-chip[data-sec="nightlife"],  .evsec-chip[data-sec="nightlife"]  { --chip: var(--wine); } /* wine */
.chatsec-chip[data-sec="study"],      .evsec-chip[data-sec="study"]      { --chip: var(--c-blue-soft); } /* blue    */
.chatsec-chip[data-sec="sports"],     .evsec-chip[data-sec="sports"]     { --chip: var(--c-lime); } /* lime — same green as campus, by request */
.chatsec-chip[data-sec="dorm"],       .evsec-chip[data-sec="dorm"]       { --chip: var(--c-violet); } /* purple — was #6b9bff, which was actually blue despite this comment */
.chatsec-chip[data-sec="greek"],      .evsec-chip[data-sec="greek"]      { --chip: var(--c-amber); } /* amber   */
.chatsec-chip[data-sec="abroad"],     .evsec-chip[data-sec="abroad"]     { --chip: var(--c-teal); } /* turquoise */
.chatsec-chip[data-sec="campus"],     .evsec-chip[data-sec="campus"]     { --chip: var(--c-fuchsia); } /* magenta — lime moved to sports, so this stays unique */
.chatsec-chip[data-sec="gaming"],     .evsec-chip[data-sec="gaming"]     { --chip: var(--c-blue); } /* violet  */
.chatsec-chip[data-sec="networking"], .evsec-chip[data-sec="networking"] { --chip: var(--c-indigo); } /* indigo  */
.chatsec-chip[data-sec="clubs"],      .evsec-chip.evsec-clubs            { --chip: var(--c-teal); } /* teal    */
.chatsec-chip[data-sec="alumni"],     .evsec-chip.evsec-alumni           { --chip: var(--c-lime); } /* lime    */

/* Chats-only chips */
.chatsec-chip[data-sec="individuals"],
.chatsec-chip[data-sec="friends"]     { --chip: var(--c-orange-deep); } /* orange */
.chatsec-chip[data-sec="matches"]     { --chip: var(--wine); } /* wine */
.chatsec-chip[data-sec="events"]      { --chip: var(--c-sky); } /* sky    */

/* Idle */
#sec-chats .chatsec-chip,
#sec-hangouts .evsec-chip {
  background: color-mix(in srgb, var(--chip, #3d7bff) 10%, transparent) !important;
  border: 1.5px solid color-mix(in srgb, var(--chip, #3d7bff) 40%, transparent) !important;
  color: var(--chip, #3d7bff) !important;
}
#sec-chats .chatsec-chip svg,
#sec-hangouts .evsec-chip svg {
  stroke: var(--chip, #3d7bff) !important;
  color: var(--chip, #3d7bff) !important;
  opacity: 1 !important;
}
#sec-chats .chatsec-chip .csl { color: var(--chip, #3d7bff) !important; }

/* Selected — "selected" glow tier: present but quiet, so it never competes with
   the screen's primary action. Idle chips carry no glow at all. */
#sec-chats .chatsec-chip.on,
#sec-hangouts .evsec-chip.on {
  background: color-mix(in srgb, var(--chip, #3d7bff) 28%, transparent) !important;
  border-color: var(--chip, #3d7bff) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--chip, #3d7bff) 30%, transparent) !important;
  color: #fff !important;
}
#sec-chats .chatsec-chip.on svg,
#sec-hangouts .evsec-chip.on svg {
  stroke: #fff !important;
  color: #fff !important;
}
#sec-chats .chatsec-chip.on .csl {
  color: #fff !important;
  text-shadow: 0 0 8px #fff !important;
}

/* Nightlife & Matches, when selected, take the deep wine fill (white text on
   top) instead of a tint — this is where the user wanted the burgundy to read. */
#sec-hangouts .evsec-chip[data-sec="nightlife"].on,
#sec-chats .chatsec-chip[data-sec="nightlife"].on,
#sec-chats .chatsec-chip[data-sec="matches"].on {
  background: var(--wine-deep) !important;
  border-color: var(--wine) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--wine-deep) 55%, transparent) !important;
}

/* All/Unread/Fav sub-tabs */
#chat-subtabs {
  display: flex;
  gap: 8px;
  padding: 2px var(--s) 8px;
}
#chat-subtabs .cst {
  font-size:var(--fs-sm);
  font-weight:600;
  color: var(--fg2);
  padding: 5px 12px;
  border-radius:var(--rad-md);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--gbdl);
}
#chat-subtabs .cst.on {
  background: rgba(61, 123, 255, 0.18);
  color: #fff;
  border-color: rgba(61, 123, 255, 0.5);
}
/* ===== Notifications redesign ===== */
.nfchips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.nfchips::-webkit-scrollbar {
  display: none;
}
.nfchip {
  flex-shrink: 0;
  font-size:var(--fs-sm);
  font-weight:600;
  color: var(--fg2);
  padding: 7px 13px;
  border-radius:var(--rad-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--gbdl);
  cursor: pointer;
  white-space: nowrap;
}
.nfchip.on {
  background: var(--p);
  border-color: var(--p);
  color: #fff;
}
.ncard {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-md);
  padding: 12px;
  margin-bottom: 9px;
  position: relative;
}
.ncard.new {
  background: rgba(43, 95, 217, 0.08);
  border-color: rgba(43, 95, 217, 0.3);
}
.nic {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-lg);
  color: #fff;
  flex-shrink: 0;
}
.ndot {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p);
}

/* ===== Alumni Connect ===== */
.ah-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--s) 6px;
  border-bottom: 1px solid var(--gbdl);
}
.ah-tabs::-webkit-scrollbar {
  display: none;
}
.ah-tab {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  min-width: 56px;
}
.ah-tab-ic {
  font-size:var(--fs-lg);
  filter: grayscale(0.4);
  opacity: 0.7;
}
.ah-tab-l {
  font-size:var(--fs-2xs);
  font-weight:600;
  color: var(--fg2);
  white-space: nowrap;
}
.ah-tab.on {
  border-bottom-color: #9e1b1b;
}
.ah-tab.on .ah-tab-ic {
  filter: none;
  opacity: 1;
}
.ah-tab.on .ah-tab-l {
  color: #dc2626;
}
.ah-week {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--s) 4px;
}
.ah-week::-webkit-scrollbar {
  display: none;
}
.ah-day {
  flex-shrink: 0;
  width: 74px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-md);
  padding: 10px 4px;
}
.ah-day-d {
  font-size:var(--fs-2xs);
  font-weight:600;
  color: var(--fg2);
  letter-spacing: 0.5px;
}
.ah-day-n {
  font-size:var(--fs-xl);
  font-weight: 900;
  color: #fff;
  margin: 2px 0;
}
.ah-day-c {
  font-size:var(--fs-2xs);
  color: var(--fg3);
}
.ah-day.on {
  background: linear-gradient(160deg, #9e1b1b, #b91c4a);
  border-color: #9e1b1b;
}
.ah-day.on .ah-day-d,
.ah-day.on .ah-day-c {
  color: rgba(255, 255, 255, 0.85);
}
.ahc {
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-lg);
  padding: 12px;
  margin-bottom: 12px;
}
.ahc-thumb {
  width: 86px;
  flex-shrink: 0;
  border-radius:var(--rad-md);
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.ahc-logo {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-md);
  font-weight:700;
  box-shadow:var(--el-1);
}
.ahc-cat {
  display: inline-block;
  font-size:var(--fs-2xs);
  font-weight:700;
  letter-spacing: 0.4px;
  color: #fff;
  background: linear-gradient(135deg, #2b5fd9, #3d7bff);
  border-radius:var(--rad-xs);
  padding: 3px 8px;
}
.ahc-hosted {
  font-size:var(--fs-2xs);
  font-weight:600;
  color: #93c5fd;
  background: rgba(96, 165, 250, 0.14);
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius:var(--rad-sm);
  padding: 2px 8px;
  white-space: nowrap;
}
.ahc-res {
  background: var(--p);
  border: none;
  border-radius:var(--rad-sm);
  padding: 9px 16px;
  color: #fff;
  font-family: var(--font);
  font-size:var(--fs-sm);
  font-weight:700;
  cursor: pointer;
}

/* ===== Communities ===== */
.cm-tab {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius:var(--rad-md);
  border: 1px solid var(--gbdl);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg2);
  cursor: pointer;
}
.cm-tab.on {
  border-color: #9e1b1b;
  color: #dc2626;
  background: rgba(225, 29, 72, 0.08);
}
.cmc {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-md);
  padding: 13px;
  margin-bottom: 10px;
}
.cmc-ic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-xl);
  flex-shrink: 0;
}

/* ===== New Group ===== */
.grp-cover-color {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  box-sizing: border-box;
}
.grp-cover-color.on {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(43, 95, 217, 0.5);
}
.grp-emoji {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gbdl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-xl);
  cursor: pointer;
}
.grp-tpl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size:var(--fs-sm);
  font-weight:600;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-lg);
  padding: 8px 13px;
  cursor: pointer;
}
#fr-rows .frr {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
#fr-rows .frr .frchk {
  width: 22px;
  height: 22px;
  border-radius:var(--rad-xs);
  border: 2px solid var(--fg3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-base);
  color: transparent;
  font-weight:700;
}
#fr-rows .frr.sel .frchk {
  background: var(--p);
  border-color: var(--p);
  color: #fff;
}
#fr-rows .frr .frck {
  display: none;
}
.grp-sel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(43, 95, 217, 0.14);
  border: 1px solid rgba(43, 95, 217, 0.4);
  border-radius:var(--rad-lg);
  padding: 4px 6px 4px 4px;
  font-size:var(--fs-sm);
  font-weight:500;
  color: #fff;
}
.grp-sel-chip .x {
  cursor: pointer;
  color: var(--fg2);
  font-weight:700;
  padding: 0 3px;
}

/* ===== Chat Profile & Settings ===== */
.cps-row {
  display: flex;
  align-items: center;
  gap: 13px;
  background: color-mix(in srgb, var(--uni-accent, var(--p)) 6%, rgba(255, 255, 255, 0.02));
  border: 1px solid color-mix(in srgb, var(--uni-accent, var(--p)) 40%, transparent);
  border-radius:var(--rad-md);
  padding: 13px 14px;
  margin-bottom: 10px;
}
.cps-ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-lg);
  color: #fff;
  flex-shrink: 0;
}
.cps-sw {
  width: 48px;
  height: 27px;
  border-radius:var(--rad-md);
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.cps-sw.on {
  background: #22c55e;
}
.cps-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}
.cps-sw.on .cps-knob {
  left: 24px;
}

/* ===== Settings screen ===== */
.set-h {
  font-size:var(--fs-lg);
  font-weight: 900;
  color: #fff;
  margin: 20px 2px 10px;
}
.set-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-lg);
  overflow: hidden;
  margin-bottom: 4px;
}
.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.set-card > .set-row:last-child {
  border-bottom: none;
}
.set-ic {
  width: 40px;
  height: 40px;
  border-radius:var(--rad-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-lg);
  color: #fff;
  flex-shrink: 0;
}
.set-t {
  font-size:var(--fs-base);
  font-weight:600;
  color: #fff;
}
.set-s {
  font-size:var(--fs-xs);
  color: var(--fg2);
  margin-top: 1px;
}
.set-chg {
  padding: 7px 15px;
  border-radius:var(--rad-lg);
  border: 1px solid var(--gbdl);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font);
  font-size:var(--fs-sm);
  font-weight:600;
  cursor: pointer;
  flex-shrink: 0;
}

/* ===== Chats deep redesign (Sleek Compact Rows with Line Dividers) ===== */
.citem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--s);
  margin: 0;
  background: transparent;
  border: none;
  border-bottom: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  transition: background var(--dur) ease;
}
/* iMessage-style inset divider — starts past the avatar column instead of
   slicing edge-to-edge under it. */
.citem::after {
  content: '';
  position: absolute;
  left: calc(var(--s) + 64px);
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  pointer-events: none;
}
.citem:last-child::after { display: none; }

.citem:hover,
.citem:active {
  background: rgba(255, 255, 255, 0.05);
}

.cav {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50%;
  font-size:var(--fs-lg) !important;
  flex-shrink: 0;
  position: relative;
}

.cav.evt {
  border-radius:var(--rad-sm) !important;
  width: 40px !important;
  height: 40px !important;
  font-size:var(--fs-lg) !important;
}

.citem .cmeta {
  flex: 1;
  min-width: 0;
}

.citem .cnm {
  font-size:var(--fs-base);
  font-weight:600;
  color: #ffffff;
  line-height: 1.2;
}

.citem .cpre {
  font-size:var(--fs-xs);
  color: var(--fg2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.citem .ctm {
  font-size:var(--fs-2xs);
  color: var(--fg3);
  font-weight:500;
}

.citem .cunrd {
  font-size:var(--fs-2xs);
  font-weight:700;
  color: #fff;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--rad-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Unread rows earn a heavier name, a brighter preview and an accent time, so the
   list has a read/unread rhythm instead of one flat weight. */
.citem:has(.cunrd) .cnm { font-weight: 800; }
.citem:has(.cunrd) .cpre { color: #fff; font-weight: 600; }
.citem:has(.cunrd) .ctm { color: var(--p); font-weight: 700; }

.chat-grp-hdr {
  font-size:var(--fs-2xs);
  font-weight:700;
  color: #a9c4ff;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  padding: 14px var(--s) 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-grp-hdr::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(196, 181, 253, 0.25), transparent);
}

/* ===== Progressive Swipe-to-Reveal Action Drawer ===== */
.citem {
  position: relative !important;
  overflow: hidden !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.citem-actions {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  display: none !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 10 !important;
  pointer-events: none;
  width: 0px;
  background: rgba(13, 7, 29, 0.95) !important;
}

.citem-actions.active {
  display: flex !important;
  pointer-events: auto !important;
  width: auto !important;
}

/* Friends / Events chip colors now come from the CHIP COLOR SYSTEM block above. */

.citem-act-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size:var(--fs-md) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  
  user-select: none !important;
  transition: transform var(--dur) ease, filter var(--dur) ease;
}

.citem-act-btn:active {
  transform: scale(0.9) !important;
}

.citem-act-pin {
  background: #3b82f6 !important;
  
}

.citem-act-mute {
  background: #f59e0b !important;
  
}

.citem-act-flag {
  background: #3d7bff !important;
  
}

.citem-act-close {
  background: #791515 !important;
  
}
.cav img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  position: absolute;
  inset: 0;
}
.cav.evt span,
.cav.grp span {
  position: relative;
  z-index: 1;
}
.cctx {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size:var(--fs-xs);
  font-weight:500;
  color: #a9c4ff;
  margin-bottom: 2px;
}
.cdot {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--p);
  
}

/* ===== 4-phase onboarding ===== */
.ob4-brand {
  display: flex;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  margin: 4px 0 16px;
}
.ob4-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ob4-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.ob4-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--gbdl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-base);
  font-weight:700;
  color: var(--fg2);
}
.ob4-step.cur .ob4-dot {
  background: #9e1b1b;
  border-color: #9e1b1b;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.18);
}
.ob4-step.done .ob4-dot {
  background: #9e1b1b;
  border-color: #9e1b1b;
  color: #fff;
}
.ob4-lbl {
  font-size:var(--fs-xs);
  font-weight:500;
  color: var(--fg2);
}
.ob4-step.cur .ob4-lbl,
.ob4-step.done .ob4-lbl {
  color: #fff;
}
.ob4-line {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 4px;
  margin-bottom: 20px;
}
.ob4-line.on {
  background: #9e1b1b;
}
.ob4-title {
  font-size:var(--fs-xl);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
}
.ob4-sub {
  font-size:var(--fs-sm);
  color: var(--fg2);
  margin-top: 3px;
  line-height: 1.4;
}
.ob4-flabel {
  font-size:var(--fs-2xs);
  font-weight:700;
  color: var(--fg2);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin: 14px 0 6px;
}
.ob4-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size:var(--fs-sm);
  font-weight:600;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-lg);
  padding: 9px 15px;
  cursor: pointer;
}
.ob4-chip.on {
  background: linear-gradient(135deg, #9e1b1b, #791515);
  border-color: #9e1b1b;
}
.ob4-cta {
  width: 100%;
  box-sizing: border-box;
  background: var(--p);
  border: none;
  border-radius:var(--rad-md);
  padding: 15px;
  color: #fff;
  font-family: var(--font);
  font-size:var(--fs-md);
  font-weight:700;
  cursor: pointer;
  margin-top: 18px;
}
.ob4-catchip {
  flex-shrink: 0;
  font-size:var(--fs-sm);
  font-weight:600;
  color: var(--fg2);
  padding: 8px 15px;
  border-radius:var(--rad-lg);
  background: transparent;
  border: 1px solid var(--gbdl);
  cursor: pointer;
  white-space: nowrap;
}
.ob4-catchip.on {
  background: linear-gradient(135deg, #3d7bff, #2b5fd9);
  border-color: #3d7bff;
  color: #fff;
}
.ob4-int {
  position: relative;
  border-radius:var(--rad-md);
  border: 1px solid var(--gbdl);
  background: rgba(255, 255, 255, 0.03);
  padding: 16px 8px 12px;
  text-align: center;
  cursor: pointer;
}
.ob4-int.on {
  border-color: var(--p);
  background: color-mix(in srgb, var(--p) 16%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--p) 55%, transparent);
}
.ob4-int .ie {
  font-size:var(--fs-2xl);
}
.ob4-int .inm {
  font-size:var(--fs-sm);
  font-weight:600;
  color: #fff;
  margin-top: 6px;
}
.ob4-int .iadd {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--gbdl);
  color: var(--fg2);
  font-size:var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ob4-int.on .iadd {
  background: var(--p);
  border-color: var(--p);
  color: #fff;
}

@keyframes ugzConfFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(108vh) rotate(600deg); opacity: 0.15; }
}
/* Password strength meter (step 1) */
.pw-bar {
  flex: 1;
  height: 4px;
  border-radius: var(--rad-pill);
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease;
}
/* Sign-up step 1: group the field wall into labelled glass sub-cards. */
.ob4-subcard {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--gbdl);
  border-radius: var(--rad-md);
  padding: 14px;
  margin-bottom: 14px;
}
.ob4-subcard-h {
  font-size: var(--fs-2xs);
  font-weight: 800;
  color: var(--fg2);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

.li-role {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-radius:var(--rad-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}
.li-role.on {
  border-color: var(--p);
  background: rgba(61, 123, 255, 0.12);
}

.pay-method {
  flex: 1;
  min-width: 0;
  height: 44px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
  transition: all var(--dur) cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  user-select: none;
}
.pay-method i {
  font-size:var(--fs-2xl);
  transition: all var(--dur) ease;
}
.pay-method:hover {
  opacity: 0.95;
  transform: translateY(-2px) scale(1.12);
}
.pay-method.sel {
  opacity: 1;
  transform: translateY(-4px) scale(1.25);
}
.pay-method.sel::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
  
}

/* Neon Colors & Glows per Brand */
.pay-card i {
  color: #38bdf8;
  );
}
.pay-card.sel i {
  color: #38bdf8;
  );
}
.pay-card.sel { color: #38bdf8; }

.pay-visa i {
  color: #818cf8;
  );
}
.pay-visa.sel i {
  color: #a5b4fc;
  );
}
.pay-visa.sel { color: #a5b4fc; }

.pay-mastercard i {
  color: #fb923c;
  );
}
.pay-mastercard.sel i {
  color: #ffedd5;
  );
}
.pay-mastercard.sel { color: #fb923c; }

.pay-amex i {
  color: #22d3ee;
  );
}
.pay-amex.sel i {
  color: #67e8f9;
  );
}
.pay-amex.sel { color: #22d3ee; }

.pay-apple i {
  color: #f1f5f9;
  );
}
.pay-apple.sel i {
  color: #ffffff;
  );
}
.pay-apple.sel { color: #ffffff; }

.pay-google i {
  color: #34d399;
  );
}
.pay-google.sel i {
  color: #6ee7b7;
  );
}
.pay-google.sel { color: #34d399; }

.pay-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius:var(--rad-md);
  padding: 13px 15px;
  font-family: var(--font);
  font-size:var(--fs-base);
  font-weight:500;
  color: #fff;
  outline: none;
  margin-bottom: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}
.pay-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
  font-weight: 600;
}
.pay-input:focus {
  border-color: #3d7bff;
  box-shadow: 0 0 12px rgba(61, 123, 255, 0.25);
  background: rgba(255, 255, 255, 0.07);
}

.evtag {
  display: inline-block;
  font-size:var(--fs-2xs);
  font-weight:500;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-sm);
  padding: 3px 9px;
}

.prof-quick {
  flex: 1;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gbdl);
  border-radius:var(--rad-md);
  padding: 11px 4px;
  cursor: pointer;
  font-size:var(--fs-xs);
  font-weight:600;
  color: #fff;
}
.prof-quick > div:last-child {
  margin-top: 4px;
}

/* ===== AURORA UI — university-colored ambient + glows ===== */
@keyframes auroraDrift {
  0% {
    transform: translate3d(-4%, -2%, 0) scale(1.05);
  }
  100% {
    transform: translate3d(4%, 3%, 0) scale(1.12);
  }
}
.screen {
  position: fixed;
}
.screen::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(40% 34% at 18% 12%, var(--p), transparent 60%),
    radial-gradient(38% 30% at 82% 22%, var(--p2), transparent 60%),
    radial-gradient(50% 40% at 50% 96%, var(--p), transparent 62%);
  filter: blur(60px);
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
.bot-inner {
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.45),
    0 0 44px -10px var(--p) !important;
}
.msheet {
  box-shadow:
    0 -10px 60px -22px var(--p),
    0 20px 60px rgba(0, 0, 0, 0.6) !important;
}
.gc {
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.35),
    0 0 32px -20px var(--p);
}
.np.active .ni {
  filter: drop-shadow(0 0 10px var(--p));
}

/* ===== AURORA v2 — more visible in-app + secondary-color glow ===== */
.screen::before {
  opacity: 0.9;
  inset: -15%;
  filter: blur(46px);
  background:
    radial-gradient(46% 40% at 14% 8%, var(--p), transparent 62%),
    radial-gradient(44% 36% at 86% 18%, var(--p2), transparent 62%),
    radial-gradient(60% 48% at 50% 100%, var(--p), transparent 64%);
}
/* soft glow behind buttons (secondary color halo, like the reference) */
.gbtn,
.jbtn,
.epb,
.sbtn,
.ob4-cta,
.ahc-res,
.abtn {
  box-shadow:
    0 6px 24px -7px var(--p2),
    0 6px 28px -10px var(--p) !important;
}
.gbtn-ghost {
  box-shadow: none !important;
}
/* GRADZ wordmark: secondary-color GLOW instead of a hard offset shadow */
.logo-gradz {
  -webkit-text-stroke: 1.5px var(--p2);
  text-shadow:
    0 2px 10px var(--p2),
    0 0 22px var(--p2);
}
.tb-logo-gradz {
  text-shadow:
    0 1px 6px var(--p2),
    0 0 13px var(--p2);
}
.ob4-gradz,
.logo-gradz {
  filter: none;
}

/* ===== AURORA — subtle tuning (softer glows) ===== */
.screen::before {
  opacity: 0.55;
}
.gbtn,
.jbtn,
.epb,
.sbtn,
.ob4-cta,
.ahc-res,
.abtn {
  box-shadow:
    0 4px 16px -8px var(--p2),
    0 3px 14px -10px var(--p) !important;
}
.gbtn-ghost {
  box-shadow: none !important;
}
.logo-gradz {
  text-shadow:
    0 2px 8px var(--p2),
    0 0 14px var(--p2);
}
.tb-logo-gradz {
  text-shadow:
    0 1px 5px var(--p2),
    0 0 9px var(--p2);
}
.bot-inner {
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.4),
    0 0 30px -14px var(--p) !important;
}
.msheet {
  box-shadow:
    0 -8px 44px -26px var(--p),
    0 20px 60px rgba(0, 0, 0, 0.6) !important;
}
.gc {
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.32),
    0 0 24px -22px var(--p);
}
.np.active .ni {
  filter: drop-shadow(0 0 7px var(--p));
}

/* ===== GRADZ — university gradient fill (transition) + soft glow ===== */
.logo-gradz {
  background: linear-gradient(105deg, var(--p) 8%, var(--p2) 92%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter: drop-shadow(0 3px 9px var(--p2)) drop-shadow(0 0 14px var(--p)) !important;
}
.tb-logo-gradz {
  background: linear-gradient(105deg, var(--p) 8%, var(--p2) 92%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 1px 5px var(--p2)) drop-shadow(0 0 8px var(--p)) !important;
}

/* ===== GRADZ logo: normal by default, university-colored once a uni is added ===== */
.logo-gradz {
  background: none !important;
  color: var(--p) !important;
  -webkit-text-fill-color: var(--p) !important;
  -webkit-text-stroke: 2px var(--p2) !important;
  text-shadow:
    3px 3px 0 var(--p2),
    4px 4px 0 var(--p2),
    5px 5px 0 var(--p2) !important;
  filter: none !important;
}
.tb-logo-gradz {
  background: none !important;
  color: var(--p) !important;
  -webkit-text-fill-color: var(--p) !important;
  text-shadow: 1.5px 1.5px 0 var(--p2) !important;
  filter: none !important;
}
html.uni-set .logo-gradz {
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  color: var(--p) !important;
  -webkit-text-fill-color: var(--p) !important;
  filter: drop-shadow(0 2px 9px var(--p2)) drop-shadow(0 0 16px var(--p2)) !important;
}
html.uni-set .tb-logo-gradz {
  text-shadow: none !important;
  filter: drop-shadow(0 1px 5px var(--p2)) drop-shadow(0 0 9px var(--p2)) !important;
}

/* GRADZ (uni-set): stronger glow */
html.uni-set .logo-gradz {
  filter: drop-shadow(0 2px 10px var(--p2)) drop-shadow(0 0 22px var(--p2))
    drop-shadow(0 0 40px var(--p)) !important;
}
html.uni-set .tb-logo-gradz {
  filter: drop-shadow(0 1px 6px var(--p2)) drop-shadow(0 0 13px var(--p2))
    drop-shadow(0 0 22px var(--p)) !important;
}

/* GRADZ (uni-set): primary-dominant gradient + soft glow */
html.uni-set .logo-gradz {
  background: linear-gradient(
    100deg,
    var(--p) 0%,
    var(--p) 60%,
    var(--p2) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 8px var(--p2)) drop-shadow(0 0 13px var(--p)) !important;
}
html.uni-set .tb-logo-gradz {
  background: linear-gradient(
    100deg,
    var(--p) 0%,
    var(--p) 60%,
    var(--p2) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 1px 5px var(--p2)) drop-shadow(0 0 8px var(--p)) !important;
}

/* GRADZ (uni-set): clean school color, no glow */
html.uni-set .logo-gradz {
  background: none !important;
  color: var(--p) !important;
  -webkit-text-fill-color: var(--p) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55) !important;
  filter: none !important;
}
html.uni-set .tb-logo-gradz {
  background: none !important;
  color: var(--p) !important;
  -webkit-text-fill-color: var(--p) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  filter: none !important;
}

/* primary buttons: solid + secondary-color glow */
.gbtn,
.jbtn,
.epb,
.sbtn,
.ob4-cta,
.ahc-res,
.abtn,
.set-chg {
  box-shadow:
    0 6px 22px -6px var(--p2),
    0 2px 12px -7px var(--p2) !important;
}
.gbtn-ghost {
  box-shadow: none !important;
}

/* ===== GLASS buttons with university-primary border ===== */
.gbtn,
.ob4-cta,
.epb,
.sbtn,
.abtn,
.ahc-res,
.set-chg,
#ev-publish-btn {
  background: rgba(43, 95, 217, 0.14) !important;
  background: color-mix(in srgb, var(--p) 16%, transparent) !important;
  border: 1.5px solid var(--p) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  color: #fff !important;
  box-shadow:
    0 6px 22px -8px var(--p2),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}
.gbtn-ghost {
  box-shadow: none !important;
}

/* Outline buttons: transparent fill + primary border, no shadow */
.gbtn,
.ob4-cta,
.epb,
.sbtn,
.abtn,
.ahc-res,
.set-chg,
#ev-publish-btn {
  background: transparent !important;
  border: 1.5px solid var(--p) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: #fff !important;
  box-shadow: none !important;
}
.gbtn-ghost {
  box-shadow: none !important;
}

/* ===== Premium buttons: filled school color + gloss + soft secondary glow ===== */
.gbtn,
.ob4-cta,
.epb,
.sbtn,
.abtn,
.ahc-res,
.set-chg,
#ev-publish-btn {
  background: var(--p) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--p) 86%, #fff 14%) 0%,
    var(--p) 52%,
    color-mix(in srgb, var(--p) 88%, #000 12%) 100%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--p) 55%, #fff) !important;
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow:
    0 9px 24px -9px var(--p2),
    0 3px 12px -7px var(--p2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 9px rgba(0, 0, 0, 0.22) !important;
}
.gbtn-ghost {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--gbdl) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Premium button refinement: softer gloss (no muddy bottom shadow) + press feedback + shimmer */
.gbtn,
.ob4-cta,
.epb,
.sbtn,
.abtn,
.ahc-res,
.set-chg,
#ev-publish-btn {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-fast) ease,
    filter var(--dur-fast) ease;
  box-shadow:
    0 9px 24px -10px var(--p2),
    0 3px 12px -8px var(--p2),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.gbtn:active,
.ob4-cta:active,
.epb:active,
.sbtn:active,
.abtn:active,
.ahc-res:active,
#ev-publish-btn:active {
  transform: translateY(1px) scale(0.994);
  filter: brightness(1.06);
}
@keyframes btnShimmer {
  0%,
  70% {
    left: -65%;
  }
  86%,
  100% {
    left: 135%;
  }
}
.gbtn::after,
.ob4-cta::after,
.sbtn::after,
.abtn::after,
.ahc-res::after,
#ev-publish-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -65%;
  width: 42%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: skewX(-18deg);
  /* Ran `btnShimmer 5s infinite`, so every primary button in the app was
     permanently animating. Now it only sweeps while the button is pressed. */
  animation: none;
}
.gbtn-ghost::after {
  display: none;
}

/* Buttons: depth only, no coloured halo. The old `0 0 12px var(--p2)` stop tinted
   every button with the university's secondary colour, producing green/yellow
   rings that clashed with the button's own fill (and the line around Get A+). */
.gbtn,
.ob4-cta,
.epb,
.sbtn,
.abtn,
.ahc-res,
.set-chg,
#ev-publish-btn {
  box-shadow: 0 10px 22px -13px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

/* white/light secondary: no colored glow on buttons */
html.light-secondary .gbtn,
html.light-secondary .ob4-cta,
html.light-secondary .epb,
html.light-secondary .sbtn,
html.light-secondary .abtn,
html.light-secondary .ahc-res,
html.light-secondary .set-chg,
html.light-secondary #ev-publish-btn {
  box-shadow:
    0 9px 22px -13px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

/* ===== glass-primary active chips =====
   (.chatsec-chip.on is excluded — it gets its hue from the CHIP COLOR SYSTEM block) */
.yr-chip[data-scope].on {
  background: rgba(43, 95, 217, 0.18) !important;
  background: color-mix(in srgb, var(--p) 20%, transparent) !important;
  border-color: var(--p) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
}

/* My University custom scope styling */
.yr-chip[data-scope="mine"] {
  background: transparent !important;
}
.yr-chip[data-scope="mine"].on {
  border: 1.5px solid var(--p) !important;
  border-color: var(--p) !important;
  color: #fff !important;
  box-shadow: 0 0 10px var(--p), inset 0 0 4px var(--p) !important;
  text-shadow: 0 0 5px var(--p) !important;
}

/* Admirers Neon Sub-tab Buttons */
/* The _gradSkin recipe (see app.js) expressed in CSS, so these two tabs match
   the A+ / Cheats / Invite bar and the university buttons: idle is a nearly
   black gradient with the hue on the edge and the label, selected fills with the
   hue at 72% strength and gains a gradient edge plus a halo.
   One hue variable per tab collapses what used to be two duplicated .on blocks. */
/* Azul, amarillo y rojo, en el orden en que salen en pantalla. Antes eran cian,
   rosa y naranja; el naranja sobre el relleno degradado salía marrón. */
.adm-sub-btn[data-sub="likes"]  { --sub-hue: var(--c-orange-deep); } /* Likes Sent */
.adm-sub-btn[data-sub="foryou"] { --sub-hue: var(--c-lime); }        /* For you    */
.adm-sub-btn[data-sub="saw"]    { --sub-hue: var(--c-violet); }      /* Admirers   */
/* Tab 2 (Admirers) was merged into Secret Admirers; its rules are gone. */

/* Subrayado, no pastilla. El relleno degradado del tono hacia negro ensuciaba el
   color — el naranja de Admirers acababa marrón. Es la misma receta que ya usan
   .nfchip, .evsec-chip, .ob4-catchip y las barras de pestañas: sin caja, etiqueta
   blanca y el tono en una línea de 3px debajo, apagada al 30% y encendida en la
   seleccionada. */
.adm-sub-btn {
  --sub-hue: var(--c-blue);
  position: relative;
  flex: 1;
  text-align: center;
  /* hueco abajo para la línea */
  padding: 9px 4px 11px;
  border-radius: 0;
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: color var(--dur) var(--ease);
  background: transparent;
  border: none;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.72);
}
.adm-sub-btn.on {
  background: transparent;
  border: none;
  box-shadow: none;
  text-shadow: none;
  color: #fff;
}
.adm-sub-btn::after {
  content: "";
  position: absolute;
  left: 7px; right: 7px; bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--sub-hue);
  /* En reposo la línea está, apagada y sin brillo. El brillo vive en .on. */
  opacity: 0.3;
  box-shadow: none;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  pointer-events: none;
}
.adm-sub-btn.on::after {
  opacity: 1;
  box-shadow: 0 0 10px color-mix(in srgb, var(--sub-hue) 65%, transparent);
}
/* The icon inherits currentColor in both states. It used to be pinned to the
   hue, which on the selected tab is the colour of its own fill. */
.adm-sub-btn svg {
  color: currentColor;
}
/* The per-hue `.on svg` override is gone: it painted the icon in the same colour
   as the selected tab's fill. Icons now inherit currentColor (see above). */

/* Discover tabs sub-tabs SVGs explicitly styled for visibility */
.crush-tab svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  stroke-width: 2.2 !important;
}
/* ===== Join buttons → current premium button style ===== */
.jbtn {
  background: var(--p) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--p) 86%, #fff 14%) 0%,
    var(--p) 52%,
    color-mix(in srgb, var(--p) 88%, #000 12%) 100%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--p) 55%, #fff) !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  /* No resting halo: this is a button, not a selected state — the same rule
     --glow-primary:none enforces elsewhere. The drop shadow and the top gloss
     stay, so it still reads as raised without glowing. */
  box-shadow: 0 10px 22px -13px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transition:
    transform var(--dur-fast) ease,
    filter var(--dur-fast) ease;
}
html.light-secondary .jbtn {
  box-shadow:
    0 9px 22px -13px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.jbtn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -65%;
  width: 42%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: skewX(-18deg);
  /* Ran `btnShimmer 5s infinite`, so every primary button in the app was
     permanently animating. Now it only sweeps while the button is pressed. */
  animation: none;
}
.jbtn:active {
  transform: translateY(1px) scale(0.994);
  filter: brightness(1.06);
}
/* keep Join state colors distinct */
.jbtn[style*="16a34a"] {
  background: #16a34a !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.jbtn[style*="3a3a4a"],
.jbtn:disabled {
  background: #3a3a4a !important;
  box-shadow: none !important;
  border-color: var(--gbdl) !important;
  text-shadow: none !important;
}
.jbtn[style*="rgba(255,255,255"] {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  border-color: var(--gbdl) !important;
}
.jbtn[style*="16a34a"]::after,
.jbtn[style*="rgba(255,255,255"]::after,
.jbtn:disabled::after {
  display: none;
}

/* ===== bottom nav: icons only, smaller ===== */
.nl {
  display: none !important;
}
.np {
  gap: 0 !important;
  padding: 12px 2px !important;
}
.np .ni {
  width: 26px !important;
  height: 26px !important;
}
.np .ni svg {
  width: 23px !important;
  height: 23px !important;
}
/* ===== tabs (Crush/Campus + Profile) → glass with primary border ===== */
.crush-tab,
.prof-tab {
  border: 1.5px solid transparent !important;
}
.crush-tab.active,
.prof-tab.active {
  background: rgba(43, 95, 217, 0.18) !important;
  background: color-mix(in srgb, var(--p) 22%, transparent) !important;
  border: 1.5px solid var(--p) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

/* ══ EDIT-PROFILE CONTROLS ══
   Two shapes here. `Full name / Acronym` and `Full (Senior) / Acronym (SR)` are
   one-of-two choices, so they are segmented controls: one outlined container, no
   gap, the picked half filled. The four action buttons are separate destinations,
   so they stay as separate rows — but each gets its own hue instead of all four
   sharing --p, matching the settings cards and notification chips.
   --p is reassigned at login to the school colour, so the segmented pairs theme
   themselves per campus for free. */

/* ── Segmented pairs ── */
/* Toggles de Profile con el mismo look que el pill Sign Up / Log In del auth:
   cápsula oscura + pastilla roja activa. */
#ptab-panel-crush .seg2 {
  display: flex;
  gap: 4px;
  background: rgba(6, 9, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--rad-pill);
  padding: 5px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
}
#ptab-panel-crush .seg2 .seg2-half {
  flex: 1;
  border: none !important;
  border-radius: var(--rad-pill) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--fg2) !important;
  padding: 12px 8px !important;
  font-weight: 800 !important;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
#ptab-panel-crush .seg2 .seg2-half:active { transform: scale(0.97); }
/* Activo: _pfStyleBtns() escribe background:var(--p) inline; este selector lo
   detecta y lo pinta como el pill rojo del auth. */
#ptab-panel-crush .seg2 .seg2-half[style*="var(--p)"] {
  background: linear-gradient(160deg, color-mix(in srgb, var(--p) 92%, #fff), color-mix(in srgb, var(--p) 52%, #000)) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--p) 70%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ── Action rows, one hue each ── */
#ptab-panel-crush .act-btn {
  --act: #3d7bff;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px !important;
  text-align: left;
  border: 1.5px solid color-mix(in srgb, var(--act) 62%, transparent) !important;
  border-radius: var(--rad-md) !important;
  background: #000 !important;
  /* Static destinations, not a selected state: border only, no halo. */
  box-shadow: none !important;
  color: #fff !important;
  transition: border-color var(--dur) var(--ease);
}
/* Explicit attribute, not an onclick substring: the previous version matched
   button[onclick*="openPromptsEditor"] and friends, so renaming any handler
   dropped the styling silently. */
#ptab-panel-crush .act-btn[data-hue="blue"]   { --act: #3d7bff; }
#ptab-panel-crush .act-btn[data-hue="violet"] { --act: #c084fc; }
#ptab-panel-crush .act-btn[data-hue="cyan"]   { --act: #06b6d4; }
#ptab-panel-crush .act-btn[data-hue="amber"]  { --act: #fbbf24; }
/* Same tinted-tile idea as the DATE & TIME / LOCATION icons in the event modal:
   it gives the emoji a home and the row a fixed left edge to scan down. */
#ptab-panel-crush .act-btn .act-ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rad-sm);
  background: color-mix(in srgb, var(--act) 20%, #000);
  border: 1.5px solid color-mix(in srgb, var(--act) 60%, transparent);
  font-size: var(--fs-base);
  line-height: 1;
}

/* middle nav icon (Campus) — match the others' visual size */
#np-discover .ni svg {
  width: 28px !important;
  height: 28px !important;
}

/* aurora overlay must not intercept clicks */
.screen::before {
  pointer-events: none !important;
}

/* ===== bigger / brighter aurora blobs that reach the center (inside the app) ===== */
#app {
  background:
    linear-gradient(
      180deg,
      rgba(9, 5, 18, 0.4) 0%,
      rgba(8, 4, 15, 0.72) 42%,
      rgba(8, 4, 15, 0.7) 64%,
      rgba(9, 5, 20, 0.44) 100%
    ),
    radial-gradient(118% 60% at -6% -6%, var(--p), transparent 56%),
    radial-gradient(118% 60% at 106% -6%, var(--p2), transparent 56%),
    radial-gradient(88% 54% at 0% 44%, var(--p2), transparent 62%),
    radial-gradient(88% 54% at 100% 58%, var(--p), transparent 62%),
    radial-gradient(124% 64% at 50% 112%, var(--p), transparent 60%),
    radial-gradient(78% 56% at 50% 46%, var(--p), transparent 74%), #09040f !important;
}

/* ===== floating "new chat" button — glass + glow ===== */
/* Floating action button — one definition shared by Chats (.chat-fab) and
   Hangouts (.app-fab) so the two screens can't drift apart. */
.chat-fab,
.app-fab {
  position: fixed;
  right: 18px;
  bottom: calc(104px + env(safe-area-inset-bottom)); /* separado del nav (antes pegado) */
  z-index: 120;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size:var(--fs-2xl);
  font-weight: 400;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, var(--p) 28%, transparent);
  border: 1.5px solid var(--p);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 0 12px -2px var(--p2),
    0 12px 28px -12px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:
    transform var(--dur-fast) ease,
    filter var(--dur-fast) ease;
}
.app-fab svg { width: 24px; height: 24px; }
.chat-fab:active,
.app-fab:active {
  transform: translateY(1px) scale(0.96);
  filter: brightness(1.08);
}
html.light-secondary .chat-fab,
html.light-secondary .app-fab {
  box-shadow:
    0 12px 28px -12px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Hangouts controls layout — the neon-underline visuals live in one authoritative
   block after all the #ev-filter-sel rules (search "scope + sort"). */
.ev-ctrl-sel { -webkit-appearance: none !important; appearance: none !important; }
#hangout-uniscope { flex: 1 1 auto; min-width: 0; display: flex; }
#ev-uniscope-sel { width: 100% !important; }
#ev-filter-sel { flex: 0 0 auto !important; width: auto !important; max-width: 54% !important; }

/* ══════════════════════════════════════════════════════════════════
   NEON RESKIN OVERRIDE LAYER  (appended — wins by cascade order)
   Only touches color / background / border / shadow / gradient.
   No layout, sizing, or behavior changes.
   ══════════════════════════════════════════════════════════════════ */

/* ---- FLAT deep-purple canvas; AURORA UI removed per user ---- */
body {
  background: #110b24 !important;
}
#app {
  background: linear-gradient(
    180deg,
    #150e2e 0%,
    #100b24 58%,
    #0c0820 100%
  ) !important;
}
/* kill the animated aurora: body orbs + per-screen drifting glow overlay */
body::before,
body::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  background: none !important;
}
.screen::before {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* ---- cards: dark neon-glass instead of white glass ---- */
.gc,
.glass {
  background: rgba(17, 14, 30, 0.62);
  border: 1px solid rgba(61, 123, 255, 0.16);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.set-card,
.plan-c,
.love-filter-section,
.evfilt,
.crush-info-block,
.poll-box,
.poll-rendered,
.comp-i,
.ob-panel {
  background: rgba(17, 14, 30, 0.6) !important;
  border-color: rgba(61, 123, 255, 0.14) !important;
}
.crush-card {
  background: #0b0818;
  border: 1px solid rgba(61, 123, 255, 0.18);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.5),
    var(--glow-soft);
}
.liked-card {
  background: rgba(17, 14, 30, 0.6);
  border-color: rgba(61, 123, 255, 0.14);
}

/* featured / highlighted cards get a neon ring + glow */
.plan-c.feat {
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(rgba(19, 14, 34, 0.9), rgba(19, 14, 34, 0.9)) padding-box,
    var(--grad-purple) border-box !important;
  
}

/* ---- ALL buttons: unified pink→orange gradient, NO shadows (per user) ---- */
.gbtn,
.jbtn,
.pbtn,
.abtn,
.ob4-cta,
.ahc-res,
.crush-reply,
.sbtn,
.comment-send {
  background: var(--grad-primary) !important;
}
.gbtn,
.jbtn,
.pbtn,
.abtn,
.epb,
.ehstepb,
.ob4-cta,
.ahc-res,
.set-chg,
.crush-reply,
.sbtn,
.comment-send,
#ev-publish-btn,
button.gbtn,
button.jbtn {
  border: none !important;
  box-shadow: none !important;
}
.gbtn:active,
.jbtn:active,
.pbtn:active,
.abtn:active {
  filter: brightness(1.06);
}
/* flat buttons: kill the glossy glass sheen overlay */
.gbtn::before,
.jbtn::before,
.pbtn::before,
.abtn::before,
.ob4-cta::before,
.ahc-res::before,
.crush-reply::before {
  display: none !important;
  content: none !important;
  background: none !important;
}
.gbtn,
.jbtn,
.pbtn,
.abtn,
.ob4-cta,
.ahc-res,
.crush-reply {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---- inputs: neon focus ---- */
.gi:focus,
.cinp:focus,
.comment-input:focus,
.ci:focus,
.poll-inp:focus {
  border-color: var(--neon-purple) !important;
  box-shadow:
    0 0 0 3px rgba(61, 123, 255, 0.16),
    0 0 14px rgba(61, 123, 255, 0.22);
}

/* ---- bottom nav: glass slab + neon active pill ---- */
.bot-inner {
  background: rgba(12, 9, 24, 0.72);
  border: 1px solid rgba(61, 123, 255, 0.2);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(61, 123, 255, 0.14);
}
/* .np.active{color:#fff;background:var(--grad-purple);box-shadow:0 8px 22px rgba(61,123,255,0.45),0 0 18px rgba(240,62,90,0.35);} */
/* .np.active .ni,.np.active .ico{filter:drop-shadow(0 0 6px rgba(255,255,255,0.6));} */

/* ---- active tabs & chips: gradient fill + glow ----
   (.chatsec-chip.on is excluded — see the CHIP COLOR SYSTEM block) */
.ev-tab.active,
.auth-mode-chip.on,
.yr-chip.on,
.plan-tab.on,
.prof-tab.active,
.crush-tab.active,
.b5-title {
  background: var(--grad-purple) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow:var(--el-2);
}
.crush-tab.active,
.prof-tab.active,
.plan-tab.on,
.plan-tab.on,
.crush-tab.active {
  box-shadow:var(--el-2);
}
.cex-label.on {
  border-color: var(--neon-pink);
  color: var(--neon-pink);
  background: rgba(61, 123, 255, 0.1);
}

/* ---- tags / pills accents ---- */
.tag.hi {
  color: var(--neon-pink);
  border-color: rgba(61, 123, 255, 0.45);
  background: rgba(61, 123, 255, 0.1);
}
.cpill.on {
  background: rgba(61, 123, 255, 0.14);
  border-color: rgba(61, 123, 255, 0.4);
  color: #fff;
}

/* ---- progress bars: gradient + glow ---- */
.bar-f,
.spl-fill,
.match-bar-fill {
  background: var(--grad-primary) !important;
  
}
.gf {
  background: #791515;
}
.gm {
  background: linear-gradient(90deg, #3b82f6, #22d3ee);
}
.glg {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* ---- chat bubbles: neon sent bubble ---- */
.msg.out {
  background: var(--chat-out-bg, var(--p)) !important;
  box-shadow: var(--chat-out-shadow, 0 3px 14px rgba(61, 123, 255, 0.35)) !important;
}

.vbadge {
  background: #f59e0b;
}
.vbadge.verified {
  background: #1d9bf0;
}

/* ---- neon icon utilities (opt-in): color + currentColor glow ---- */
.ico-neon {
  
}
.catc-nightlife {
  color: var(--cat-nightlife);
}
.catc-study {
  color: var(--cat-study);
}
.catc-sports {
  color: var(--cat-sports);
}
.catc-gaming {
  color: var(--cat-gaming);
}
.catc-dorm {
  color: var(--cat-dorm);
}
.catc-campus {
  color: var(--cat-campus);
}
.catc-greek {
  color: var(--cat-greek);
}
.catc-abroad {
  color: var(--cat-abroad);
}
/* soft glow on accent-colored icon tiles seen across the app */
.org-ic .ico,
.ped .ico,
.crb .ico {
  
}

/* section headers pick up a subtle neon tint */
.sh,
.psec,
.love-filter-title {
  color: rgba(196, 181, 253, 0.72);
}

/* ----- inline block 2 (slider thumb etc.) ----- */
#primary-hue::-webkit-slider-thumb,
#secondary-hue::-webkit-slider-thumb,
#vbadge-hue::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #333;
  cursor: pointer;
  box-shadow:var(--el-1);
}

/* ── PROFILE COVER SELECTOR ── */
.cover-option-card:hover {
  transform: translateY(-2px);
  box-shadow:var(--el-2);
  border-color: var(--p) !important;
}

/* ── HANGOUT EVENT CARDS & NEON FILTER SELECT ── */
#ev-filter-sel {
  background: rgba(22, 14, 45, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1.5px solid rgba(61, 123, 255, 0.6) !important;
  border-radius:var(--rad-lg) !important;
  color: #ffffff !important;
  font-family: var(--font) !important;
  font-size:var(--fs-base) !important;
  font-weight:600 !important;
  padding: 10px 16px !important;
  
  transition: all var(--dur) var(--ease) !important;
  outline: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}

#ev-filter-sel:hover, #ev-filter-sel:focus {
  border-color: #6b9bff !important;
  box-shadow: 0 0 12px rgba(61, 123, 255, 0.7), inset 0 0 14px rgba(61, 123, 255, 0.3) !important;
  transform: translateY(-1px) !important;
}

#ev-filter-sel option {
  background: #120a23 !important;
  color: #ffffff !important;
  font-weight:500 !important;
  padding: 10px !important;
}

.hangout-item-card {
  transition: transform var(--dur) var(--ease), border-color var(--dur) ease, box-shadow var(--dur) ease !important;
}
/* Hover used to swap in a purple border and a blue halo — a third hue on a card
   that now carries its section's colour on the border. It just brightens. */
.hangout-item-card:hover {
  transform: translateY(-4px) scale(1.008) !important;
  filter: brightness(1.08);
}

/* ── SIGN UP IDENTITY INPUT UPGRADES ── */
.ob4-cta:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

#ob-phone-flag-dropdown::-webkit-scrollbar {
  width: 6px;
}
#ob-phone-flag-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
#ob-phone-flag-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

/* ── CRUSH DETAILS SHEET OVERRIDES ── */
#crush-details-content .crush-info-block {
  margin: 0 !important;
  padding: 18px 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08) !important;
}

#crush-details-content .crush-info-block:last-child {
  border-bottom: none !important;
}

#crush-details-content .crush-prompt {
  margin: 0 !important;
  padding: 20px 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08) !important;
}

#crush-details-content .crush-prompt:last-child {
  border-bottom: none !important;
}

/* ── 3D MAGIC SPELLBOOK REVEAL ANIMATIONS & LAYOUTS (AAA QUALITY) ── */
#likedyou-pop {
  transition: opacity 0.5s ease-in-out;
}

.ly-book-container {
  perspective: 1500px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: rgba(8, 4, 16, 0.45);
}

.ly-book-wrapper {
  position: relative;
  width: 300px;
  height: 540px;
  transform-style: preserve-3d;
  transform: translate(-45%, 65%) scale(0.12) rotate(-25deg);
  opacity: 0;
  transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.2s ease-out;
  margin-top: 20px;
}

.ly-book-wrapper.entrance-active {
  transform: translate(0, 0) scale(1) rotate(0deg);
  opacity: 1;
  animation: lySpellbookFloat 4s ease-in-out infinite 1.5s;
}

.ly-book-wrapper.book-open-active {
  transform: translateX(0px) scale(0.95) rotateY(0deg);
  animation: none !important;
}

.ly-book-wrapper.exit-anticipate {
  transform: scale(0.9) rotate(-4deg) translateY(15px) !important;
  transition: transform 0.4s var(--ease-spring) !important;
  animation: none !important;
}

.ly-book-wrapper.exit-flyout {
  transform: translate(-65%, 85%) scale(0.06) rotate(-35deg) !important;
  transition: transform 1.3s cubic-bezier(0.7, 0, 0.84, 0), opacity 1.3s ease-in !important;
  opacity: 0 !important;
  animation: none !important;
}

.ly-book {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

@keyframes lySpellbookFloat {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(0.4deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Book Cover - Worn Leather Material */
.ly-cover {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, #2f144d 0%, #130722 65%, #08020e 100%) !important;
  border: 2px solid #8e6d2f;
  border-radius:var(--rad-xs) 20px 20px 8px;
  box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.75), 
              inset 0 0 35px rgba(0, 0, 0, 0.9), 
              inset 0 0 10px rgba(181, 137, 61, 0.25),
              0 0 25px rgba(253, 186, 116, 0.08) !important;
  z-index: 100;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform 1.6s var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}

/* Leather Spine Crease and Ribs */
.ly-cover::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 18px;
  background: linear-gradient(to right, #05010a, #200e33 40%, #10061c 70%, #05010a);
  box-shadow: inset -1px 0 2px rgba(255, 255, 255, 0.04);
  border-radius:var(--rad-xs) 0 0 8px;
}

/* Brass Ornaments (Corners) */
.ly-corner-brass {
  position: absolute;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #e5c158 0%, #8c6820 45%, #dbb853 75%, #6e4e14 100%) !important;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  z-index: 105;
}
.ly-corner-tl { top: -2px; left: -2px; border-radius:var(--rad-xs) 0 20px 0; }
.ly-corner-tr { top: -2px; right: -2px; border-radius: 0 8px 0 20px; }
.ly-corner-bl { bottom: -2px; left: -2px; border-radius: 0 20px 8px 0; }
.ly-corner-br { bottom: -2px; right: -2px; border-radius:var(--rad-lg) 0 0 8px; }

/* Metallic Lock Latch/Clasp */
.ly-book-latch {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 26px;
  height: 52px;
  background: linear-gradient(to right, #e5c158, #a0782a 50%, #6e4e14) !important;
  border-radius: 4px 10px 10px 4px;
  border: 1.5px solid #4a340e;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.6);
  z-index: 110;
  transform-origin: left center;
  transition: transform 0.6s var(--ease-out);
}
.ly-book-latch.unlocked {
  transform: translateY(-50%) rotate(135deg);
  box-shadow: -3px 3px 8px rgba(0,0,0,0.4);
}

.ly-book-wrapper.book-open-active .ly-cover {
  transform: rotateY(-145deg);
  pointer-events: none;
}

/* Staggered Intermediate Flipping Pages (10 pages) */
.ly-page-flip {
  position: absolute;
  inset: 1px 2px 1px 1px;
  background: #fbf7ee;
  border-radius: 4px 18px 18px 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  transform-origin: left center;
  transform: rotateY(0deg);
  backface-visibility: hidden;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 18px 0 20px rgba(0,0,0,0.06);
  transition: transform 0.8s var(--ease-out), opacity 0.2s;
}

.ly-page-flip-1 { z-index: 99; }
.ly-page-flip-2 { z-index: 98; }
.ly-page-flip-3 { z-index: 97; }
.ly-page-flip-4 { z-index: 96; }
.ly-page-flip-5 { z-index: 95; }
.ly-page-flip-6 { z-index: 94; }
.ly-page-flip-7 { z-index: 93; }
.ly-page-flip-8 { z-index: 92; }
.ly-page-flip-9 { z-index: 91; }
.ly-page-flip-10 { z-index: 90; }

.ly-page-flip.flip-active {
  opacity: 1;
}
.ly-page-flip-1.flip-active { transform: rotateY(-178deg); }
.ly-page-flip-2.flip-active { transform: rotateY(-176deg); }
.ly-page-flip-3.flip-active { transform: rotateY(-174deg); }
.ly-page-flip-4.flip-active { transform: rotateY(-172deg); }
.ly-page-flip-5.flip-active { transform: rotateY(-170deg); }
.ly-page-flip-6.flip-active { transform: rotateY(-168deg); }
.ly-page-flip-7.flip-active { transform: rotateY(-166deg); }
.ly-page-flip-8.flip-active { transform: rotateY(-164deg); }
.ly-page-flip-9.flip-active { transform: rotateY(-162deg); }
.ly-page-flip-10.flip-active { transform: rotateY(-160deg); }

/* Inside pages visual glow bursting leak */
.ly-book-glow {
  position: absolute;
  inset: 10px;
  border-radius:var(--rad-sm);
  
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.ly-book-wrapper.book-open-active .ly-book-glow {
  opacity: 0.6;
}

/* Open Book Parchment Spread */
.ly-spread {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -300px;
  right: 0;
  display: flex;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.7s ease 0.6s, transform 0.7s ease 0.6s;
  pointer-events: none;
  z-index: 10;
  transform-style: preserve-3d;
}

.ly-book-wrapper.book-open-active .ly-spread {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.ly-page-left, .ly-page-right {
  flex: 1;
  background: #fbf7ee;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

/* Simulating thick stack edge curves */
.ly-page-left {
  border-radius:var(--rad-lg) 4px 4px 20px;
  box-shadow: -15px 15px 35px rgba(0, 0, 0, 0.55), 
              inset -20px 0 25px rgba(0, 0, 0, 0.05),
              -2px 2px 0px #e7dbbf, -4px 4px 0px #cfc3a7, -6px 6px 0px #b7ab8f;
}

.ly-page-right {
  border-radius: 4px 20px 20px 4px;
  box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.55), 
              inset 20px 0 25px rgba(0, 0, 0, 0.05),
              2px 2px 0px #e7dbbf, 4px 4px 0px #cfc3a7, 6px 6px 0px #b7ab8f;
}

/* 3D Turning Page */
.ly-page-turning {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 300px;
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 45;
  transition: transform 0.8s var(--ease-out);
  pointer-events: auto;
}

.ly-page-turning.turned {
  transform: rotateY(-180deg);
}

.ly-page-turning-front, .ly-page-turning-back {
  position: absolute;
  inset: 0;
  background: #fbf7ee;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  backface-visibility: hidden;
  box-shadow: inset 15px 0 20px rgba(0,0,0,0.05);
  overflow: hidden;
}

.ly-page-turning-front {
  border-radius: 4px 20px 20px 4px;
  z-index: 2;
  transform: rotateY(0deg);
}

.ly-page-turning-back {
  border-radius:var(--rad-lg) 4px 4px 20px;
  transform: rotateY(180deg);
  box-shadow: inset -15px 0 20px rgba(0,0,0,0.05);
}

/* Page Navigation Indicators */
.ly-page-nav-indicator {
  position: absolute;
  bottom: 12px;
  font-size:var(--fs-xs);
  font-weight: 850;
  color: #b5893d;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  user-select: none;
  z-index: 100;
  letter-spacing: 0.5px;
}
.ly-page-nav-indicator:hover {
  color: #dc2626;
  transform: scale(1.05);
}
.ly-page-nav-next {
  right: 15px;
  animation: lyNavNextPulse 1.2s infinite alternate;
}
.ly-page-nav-prev {
  left: 15px;
  animation: lyNavPrevPulse 1.2s infinite alternate;
}
@keyframes lyNavNextPulse {
  0% { transform: translateX(0); }
  100% { transform: translateX(4px); }
}
@keyframes lyNavPrevPulse {
  0% { transform: translateX(0); }
  100% { transform: translateX(-4px); }
}

/* Page Spine crease shadow */
.ly-spine-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 297px;
  width: 6px;
  background: linear-gradient(to right, rgba(0,0,0,0.22), rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.22));
  z-index: 30;
  pointer-events: none;
}

/* Reveal Vertical Cards */
.ly-reveal-card {
  border-radius:var(--rad-sm);
  overflow: hidden;
  border: 1.5px solid rgba(181, 137, 61, 0.4);
  position: relative;
  height: 230px;
  aspect-ratio: 4/5;
  margin: 0 auto;
  background: #0b0b0e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.4s;
  user-select: none;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
}

.ly-reveal-card:hover {
  transform: translateY(-3px);
  border-color: rgba(240, 62, 90, 0.7);
}

.ly-reveal-card.card-selected {
  transform: translateY(-10px) scale(1.04) !important;
  box-shadow:var(--el-3);
  border-color: #dc2626 !important;
  z-index: 100;
}

.ly-reveal-card.card-dimmed {
  opacity: 0.35;
  transform: scale(0.96);
  pointer-events: none;
}

.ly-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(24px);
  transform: scale(1.18);
  transition: filter 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.ly-reveal-card.card-revealed .ly-card-photo {
  filter: blur(0);
  transform: scale(1);
}

.ly-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 24%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.55));
  z-index: 5;
  transition: opacity 0.5s ease;
}

.ly-card-qmark {
  font-size: 38px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
  z-index: 10;
  line-height: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.ly-reveal-card.card-revealed .ly-card-qmark {
  opacity: 0;
  transform: scale(0.1);
}

.ly-card-info {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 12;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
  text-align: center;
}

.ly-reveal-card.card-revealed .ly-card-info {
  opacity: 1;
  transform: translateY(0);
}

/* Choice Buttons */
.ly-choice-bar {
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  margin-top: 28px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  z-index: 150;
}

.ly-choice-bar.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ly-btn {
  flex: 1;
  padding: 13px 22px;
  border-radius:var(--rad-xl);
  font-weight:600;
  font-size:var(--fs-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform var(--dur), box-shadow 0.2s;
  border: none;
}

.ly-btn:active {
  transform: scale(0.95);
}

.ly-btn-no {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 2px solid #ef4444 !important;
  color: #ef4444 !important;
  
}

.ly-btn-no:hover {
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
}

.ly-btn-yes {
  background: rgba(34, 197, 94, 0.08) !important;
  border: 2px solid #22c55e !important;
  color: #22c55e !important;
  
}

.ly-btn-yes:hover {
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.45);
}

/* Match Screen */
.ly-match-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(8, 4, 16, 0.96);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.ly-match-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.ly-match-title {
  font-size: 36px;
  font-weight: 900;
  color: #dc2626;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 25px rgba(240, 62, 90, 0.7);
  animation: lyPulseGlow 1.5s infinite alternate;
  margin-bottom: 24px;
}

@keyframes lyPulseGlow {
  0% { text-shadow: 0 0 15px rgba(240, 62, 90, 0.5); transform: scale(0.98); }
  100% { text-shadow: 0 0 35px rgba(240, 62, 90, 0.9); transform: scale(1.02); }
}

.ly-match-avatars {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.ly-match-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid #dc2626;
  
  object-fit: cover;
}

/* Sparkle / Magic dust particles */
.ly-magic-dust {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fcd34d;
  border-radius: 50%;
  
  pointer-events: none;
  z-index: 15;
  animation: lyMagicDustFly 6s linear infinite;
}

@keyframes lyMagicDustFly {
  0% { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translate(var(--ex), var(--ey)) scale(1.5); opacity: 0; }
}

/* Particle heart items */
.ly-heart-particle {
  position: absolute;
  color: #dc2626;
  font-size:var(--fs-xl);
  pointer-events: none;
  animation: lyParticleFly 2s ease-out forwards;
}

@keyframes lyParticleFly {
  0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(var(--r)); opacity: 0; }
}

/* Drag instructions */
.ly-instruction {
  font-size:var(--fs-xs);
  font-weight:700;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 20px;
  animation: lyPulseText 1s infinite alternate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

@keyframes lyPulseText {
  0% { opacity: 0.35; }
  100% { opacity: 0.85; }
}

/* ── MOBILE COMPATIBILITY OVERRIDES (iOS Safari & Android Chrome) ── */

/* 1. Prevent iOS input auto-zoom on focus by ensuring min 16px font-size in mobile viewports */
@media (max-width: 767px) {
  .gi, .cinp, .comment-input, .ci, .poll-inp, .pay-input, input, select, textarea {
    font-size:var(--fs-md) !important;
  }
}

/* 2. Force cursor: pointer on all custom interactive elements for iOS target detection */
[onclick], 
.yr-chip, 
.auth-mode-chip, 
.evsec-chip, 
.chatsec-chip, 
.bot-nav, 
.np, 
.ni, 
.abtn, 
.gbtn, 
.gbtn-ghost, 
.stk-item, 
.cnm, 
.citem,
.biz-banner,
.neon-badge,
.crush-reply,
.row-actions button {
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 3. Smooth scrolling inertia for scrollable layers on iOS Safari */
.screen, 
.crush-scroll, 
.msheet, 
.gif-sheet, 
.chat-area, 
.chat-list-container, 
#chat-body, 
#matches-grid {
  -webkit-overflow-scrolling: touch !important;
}

/* 4. Disable native browser touch gestures on drag/swipe elements to prevent double-scroll bugs */
.crush-card-inner.current, 
.crush-card {
  touch-action: pan-y !important;
}
.net-card, 
#ly-cover, 
#ly-spread {
  touch-action: none !important;
}

/* 5. Safe selection & iOS touch responsiveness properties */
.no-select {
  -webkit-user-select: none !important;
  user-select: none !important;
}
input, textarea, select, button, a, [role="button"], .tbi, .app-fab, .chat-fab, .gi, .auth-tab-btn, .act-btn, .jbtn, .evsec-chip, .chatsec-chip {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text !important;
  user-select: text !important;
  pointer-events: auto !important;
}
button, a, [role="button"], .tbi, .app-fab, .chat-fab, .auth-tab-btn, .act-btn, .jbtn {
  pointer-events: auto;
}
.mov:not(.open),
.cwin:not(.open),
.age-modal:not(.open),
.gif-modal:not(.open) {
  display: none !important;
  pointer-events: none !important;
}

/* ============================================================
   iOS WKWebView TAP RELIABILITY — root-cause hardening
   Fixes taps that fail randomly across the whole app on iOS only.
   ============================================================ */
/* ~265 interactive rows in this app are plain <div onclick>. On iOS
   WKWebView a non-semantic element only becomes a reliable tap target
   when it is clearly "clickable"; without this, synthetic-click
   hit-testing is flaky under heavy compositing and taps get dropped
   (retapping forces a recomposite, hence "tap 2-3 times"). Android's
   Blink never gated synthetic clicks this way, so it always worked.
   touch-action:manipulation also drops the double-tap wait. */
[onclick] {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* The bottom nav is a full-width position:fixed bar (z-index:100). Its
   transparent margins around the pill were swallowing every tap that
   landed on the bar but outside a button. Let taps fall through the
   bar itself and only hit its real children — same pattern .topbar
   already uses. */
.bot-nav {
  pointer-events: none;
}
.bot-nav > *,
.bot-nav .bot-inner,
.bot-nav .np,
.bot-nav button {
  pointer-events: auto;
}

/* ============================================================
   iOS WKWebView COMPOSITING RELIEF (fixes the FREEZE)
   Cause: opening a full-screen glass screen (Settings, Sign Up)
   stacks dozens of backdrop-filter:blur() layers ON TOP of an app
   that already runs blur() aurora/orb animations. WKWebView's web
   content process saturates and hangs → the whole app freezes.
   Android's compositor absorbs it, so it only happens on iOS.
   Fix: on iOS only, drop backdrop-filter (keep a solid fallback so
   glass stays legible) and stop the always-on blur animations.
   ============================================================ */
body.is-ios *,
body.is-ios *::before,
body.is-ios *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Glass surfaces relied on the blur for legibility — give them a solid
   dark fallback now that the blur is gone. */
body.is-ios .glass,
body.is-ios .gc,
body.is-ios .bot-inner,
body.is-ios .msheet,
body.is-ios .mov,
body.is-ios .topbar .glass,
body.is-ios .ugz-modal-overlay {
  background-color: rgba(14, 9, 28, 0.94) !important;
}
/* The full-screen blurred aurora/orbs animate forever, forcing the GPU to
   re-composite a viewport-sized blurred layer every frame. Freeze them
   (still visible, just static → composited once). */
body.is-ios::before,
body.is-ios::after,
body.is-ios .screen::before {
  animation: none !important;
}

/* Campus category selector pills */
.campus-cat-pill {
  padding: 8px 14px;
  border-radius:var(--rad-lg);
  font-family: var(--font);
  font-size:var(--fs-sm);
  font-weight:500;
  cursor: pointer;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--neon-purple);
  text-shadow: 0 0 8px rgba(61, 123, 255, 0.4);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.campus-cat-pill:hover {
  background: rgba(255, 255, 255, 0.08);
}

.crush-tab-panel {
  display: none;
}
.crush-tab-panel.active {
  display: block;
}

/* ── STUBHUB TICKET CARDS & NEON GLOW ── */
.stubhub-event-card {
  position: relative;
  border-radius:var(--rad-lg);
  background: rgba(18, 12, 32, 0.85);
  border: 1.5px solid rgba(61, 123, 255, 0.6);
  
  overflow: hidden;
  margin-bottom: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.stubhub-event-card:hover {
  transform: translateY(-2px);
  border-color: #3d7bff;
  box-shadow: 0 0 12px rgba(61, 123, 255, 0.45), inset 0 0 16px rgba(61, 123, 255, 0.2);
}

.stubhub-badge {
  background: linear-gradient(135deg, #3d7bff, #3d7bff);
  color: #fff;
  font-size:var(--fs-2xs);
  font-weight:700;
  padding: 4px 10px;
  border-radius:var(--rad-sm);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── FACEBOOK MARKETPLACE GRID & CARDS ── */
.fb-marketplace-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.fb-product-card {
  background: rgba(22, 16, 38, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius:var(--rad-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.fb-product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.25);
}

.fb-product-img {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.fb-product-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
}

.fb-product-info {
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fb-product-price {
  font-size:var(--fs-md);
  font-weight:700;
  color: #22c55e;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}
.fb-product-title {
  font-size:var(--fs-sm);
  font-weight:600;
  color: #ffffff;
  line-height: 1.35;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fb-product-delivery {
  font-size:var(--fs-2xs);
  color: var(--fg2);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── NEON SUBPALLS FOR MARKETPLACE ── */
.mk-subpill {
  padding: 7px 13px;
  border-radius:var(--rad-md);
  font-size:var(--fs-xs);
  font-weight:600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* ── MARKETPLACE DROPDOWN MENU (HANGOUTS STYLE) ── */
.mk-action-popover {
  position: absolute;
  top: 40px;
  right: 12px;
  z-index: 100;
  background: rgba(18, 12, 35, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius:var(--rad-md);
  padding: 6px;
  width: 200px;
  box-shadow:var(--el-3);
  display: none;
  flex-direction: column;
  gap: 4px;
}
.mk-action-popover.open {
  display: flex;
}
.mk-popover-item {
  padding: 10px 12px;
  border-radius:var(--rad-sm);
  font-size:var(--fs-sm);
  font-weight:600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background var(--dur) ease;
}
.mk-popover-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ════════════════════ CRUSH SWIPE & DETAILS MODAL NEON REDESIGN ════════════════════ */
.crush-card {
  border-radius:var(--rad-xl) !important;
  overflow: hidden !important;
  background: rgba(16, 8, 32, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 2px solid rgba(61, 123, 255, 0.6) !important;
  
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* En los modales de "ver perfil" (amigos) y "likes sent" la card se APLANA: el
   radio y la orilla los pone el modal/.msheet, no la card. Antes el borde azul
   de 2px !important quedaba DENTRO de la hoja = doble marco que se veía roto. */
#user-crush-modal .crush-card,
.mov .msheet .crush-card {
  border: none !important;
  border-radius: var(--rad-xl) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* La foto (galería) toma la esquina redondeada de la card que la contiene. */
#user-crush-modal .crush-card .crush-gallery,
.mov .msheet .crush-card .crush-gallery {
  border-radius: var(--rad-xl) !important;
}

.crush-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  padding: 8px 10px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 40px !important;
  box-shadow: none !important;
  margin-top: 14px !important;
}

.crb {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s var(--ease-spring), box-shadow var(--dur) ease, border-color var(--dur) ease !important;
}

.crb-neon-x {
  border: 2px solid var(--wine) !important;
  color: var(--wine) !important;
  background: color-mix(in srgb, var(--wine) 16%, transparent) !important;
}
.crb-neon-x:hover {
  transform: scale(1.16) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--wine) 70%, transparent),
              inset 0 0 12px color-mix(in srgb, var(--wine) 45%, transparent) !important;
}

.crb-neon-undo {
  border: 2px solid #f59e0b !important;
  color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.12) !important;
  
}
.crb-neon-undo:hover {
  transform: scale(1.16) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.85), inset 0 0 12px rgba(245, 158, 11, 0.5) !important;
}

.crb-neon-star {
  border: 2px solid #06b6d4 !important;
  color: #06b6d4 !important;
  background: rgba(6, 182, 212, 0.12) !important;
  
}
.crb-neon-star:hover {
  transform: scale(1.16) !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.85), inset 0 0 12px rgba(6, 182, 212, 0.5) !important;
}

.crb-neon-rose {
  border: 2px solid #dc2626 !important;
  color: #dc2626 !important;
  background: rgba(240, 62, 90, 0.12) !important;
  
}
.crb-neon-rose:hover {
  transform: scale(1.16) !important;
  box-shadow: 0 0 12px rgba(240, 62, 90, 0.85), inset 0 0 12px rgba(240, 62, 90, 0.5) !important;
}

.crb-neon-heart {
  border: 2px solid #10b981 !important;
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  
}
.crb-neon-heart:hover {
  transform: scale(1.16) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.85), inset 0 0 12px rgba(16, 185, 129, 0.5) !important;
}

/* Profile Detail Modal Styles - Crisp & Sharp High Legibility */
#crush-details-modal {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

#crush-details-modal .msheet {
  background: #110924 !important;
  border-top: 1.5px solid rgba(61, 123, 255, 0.6) !important;
  border-left: 1px solid rgba(61, 123, 255, 0.3) !important;
  border-right: 1px solid rgba(61, 123, 255, 0.3) !important;
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.8), 0 0 24px rgba(61, 123, 255, 0.3) !important;
}

#crush-details-modal .mhnd {
  background: rgba(61, 123, 255, 0.7) !important;
  
  width: 44px !important;
  height: 4.5px !important;
  border-radius:var(--rad-sm) !important;
}

#crush-details-title {
  font-size:var(--fs-lg) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
  text-shadow: none !important;
}

.crush-info-block {
  margin: 12px 12px !important;
  padding: 16px 18px !important;
  background: rgba(22, 14, 42, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius:var(--rad-lg) !important;
  color: #ffffff !important;
  position: relative !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ════════════════════ CAMPUS SEARCH NEON REDESIGN ════════════════════ */
#crush-search-input {
  width: 100% !important;
  /* Gradient BORDER in the university colours over a primary-tinted fill. */
  background: linear-gradient(color-mix(in srgb, var(--p) 22%, #0a0713), color-mix(in srgb, var(--p) 22%, #0a0713)) padding-box,
              linear-gradient(135deg, var(--p), var(--p2)) border-box !important;
  border: 1.5px solid transparent !important;
  border-radius:var(--rad-xl) !important;
  padding: 12px 18px 12px 44px !important;
  color: #ffffff !important;
  font-family: var(--font) !important;
  font-size:var(--fs-base) !important;
  font-weight:500 !important;
  outline: none !important;
  transition: box-shadow var(--dur) ease !important;
}

#crush-search-input:focus {
  box-shadow: 0 0 14px color-mix(in srgb, var(--p) 45%, transparent) !important;
}

.search-student-card {
  margin: 0 0 12px 0 !important;
  padding: 14px 16px !important;
  /* Fill tinted with the student's PRIMARY school colour, gradient BORDER in the
     student's colours (--card-p/--card-p2, set per row; falls back to the viewer's
     school). No coloured glow behind the card. */
  background: linear-gradient(color-mix(in srgb, var(--card-p, var(--p)) 30%, #0a0713), color-mix(in srgb, var(--card-p, var(--p)) 30%, #0a0713)) padding-box,
              linear-gradient(135deg, var(--card-p, var(--p)), var(--card-p2, var(--p2))) border-box !important;
  border: 1.5px solid transparent !important;
  border-radius:var(--rad-lg) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease !important;
}

.search-student-card:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45) !important;
}

.spotlight-rank-card {
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) ease !important;
  /* Resting lift, so the cards read as sitting above the page instead of only
     gaining depth on hover — which never fires on the phone this ships to. */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
}

.spotlight-rank-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 28px rgba(61, 123, 255, 0.5) !important;
}

/* Press feedback — the only state a touch device actually reaches. */
.spotlight-rank-card:active {
  transform: scale(0.97) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55) !important;
}

/* Likes Sent grid cards, same treatment in the tab's orange hue. */
.sent-like-card {
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) ease, border-color var(--dur) ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.sent-like-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 158, 11, 0.85);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.6), 0 0 22px rgba(245, 158, 11, 0.35);
}

.sent-like-card:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.fomo-locked-card {
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) ease, border-color var(--dur) ease !important;
}

.fomo-locked-card:hover {
  transform: translateY(-4px) scale(1.03) !important;
  border-color: #dc2626 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 30px rgba(240, 62, 90, 0.8) !important;
}

@keyframes fomoPulse {
  0% {
    transform: scale(1);
    
  }
  50% {
    transform: scale(1.08);
    
  }
  100% {
    transform: scale(1);
    
  }
}

.citem {
  position: relative !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
}

.citem-inner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px var(--s) !important;
  width: 100% !important;
  background: inherit !important;
  position: relative !important;
  z-index: 2 !important;
  transition: transform var(--dur) var(--ease-spring) !important;
}

.citem:hover .citem-inner {
  background: rgba(255, 255, 255, 0.04) !important;
}

.cunrd {
  background: var(--p) !important;
  color: #ffffff !important;
  font-weight:700 !important;
}

.chatsec-chip.on { font-weight:700 !important; }

/* ══════════ PROFILE 4-SUBVIEW NEON OVERRIDES ══════════ */
.prof-tab {
  flex: 1 !important;
  padding: 10px 8px !important;
  border-radius:var(--rad-md) !important;
  font-size:var(--fs-sm) !important;
  font-weight:600 !important;
  color: #a9c4ff !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* ══ PROFILE ACCENT ══
   Each tab owns a hue and the whole section takes it while that tab is open, so
   Profile stops reading as one endless wall of pink. #sec-profile carries
   --prof-accent; switchProfTab() swaps it. */
#ptab-crush    { --tab-accent: var(--wine); } /* wine */
#ptab-activity { --tab-accent: #fbbf24; } /* amber  */
#ptab-safety   { --tab-accent: #34d399; } /* green  */
#ptab-filters  { --tab-accent: #60a5fa; } /* blue   */

.prof-tab { color: color-mix(in srgb, var(--tab-accent, #a9c4ff) 72%, #ffffff) !important; }

.prof-tab.active {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tab-accent, #3d7bff) 78%, #000000),
    var(--tab-accent, #791515)) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--tab-accent, #3d7bff) 60%, transparent) !important;
  color: #ffffff !important;
  font-weight:700 !important;
}

/* Tab strip + section chrome follow the active tab's hue */
#sec-profile #prof-tabs {
  border-color: color-mix(in srgb, var(--prof-accent, #3d7bff) 50%, transparent) !important;
  
}
#sec-profile .love-filter-section {
  border-color: color-mix(in srgb, var(--prof-accent, #3d7bff) 45%, transparent) !important;
  
}

.love-filter-section {
  background: rgba(22, 14, 42, 0.75) !important;
  border: 1.5px solid rgba(61, 123, 255, 0.45) !important;
  border-radius:var(--rad-xl) !important;
  
  padding: 18px 16px !important;
  margin-bottom: 14px !important;
  backdrop-filter: blur(12px) !important;
}

.love-filter-title {
  font-size:var(--fs-base) !important;
  font-weight:700 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px !important;
}

.yr-chip {
  background: rgba(14, 8, 30, 0.8) !important;
  border: 1px solid rgba(61, 123, 255, 0.35) !important;
  color: #d6e4ff !important;
  font-weight:500 !important;
  border-radius:var(--rad-md) !important;
  padding: 7px 13px !important;
  transition: all 0.2s ease !important;
}

.yr-chip.on {
  background: #791515 !important;
  border: 1.5px solid #dc2626 !important;
  color: #ffffff !important;
  font-weight:700 !important;
  box-shadow: 0 0 12px rgba(240, 62, 90, 0.5) !important;
}

.age-range-pill {
  background: linear-gradient(135deg, #791515, #791515) !important;
  
  color: #ffffff !important;
  font-weight:700 !important;
  padding: 2px 10px !important;
  border-radius:var(--rad-sm) !important;
  font-size:var(--fs-sm) !important;
}

/* ── ONBOARDING 4 REDESIGN STYLES ── */
.ob4-brand {
  text-align: center;
  margin-bottom: 18px;
  position: relative;
}
.logo-undr {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 34px;
  font-weight: 1000;
  color: #ffffff;
  letter-spacing: -1.5px;
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.4);
}
.logo-gradz {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, #ffffff 0%, var(--uni-p, var(--p, #791515)) 45%, var(--uni-p2, var(--p2, #4d84ff)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 2px;
}

/* Sign-up (ob4) logo: solid GRADZ (red by default, university primary once picked)
   with a black 3D shadow — NOT the blue gradient. UNDR white, same black shadow. */
.ob4-brand .logo-undr {
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85), 4px 5px 8px rgba(0, 0, 0, 0.5) !important;
}
.ob4-brand .logo-gradz {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--uni-p, #dc2626) !important;
  -webkit-text-fill-color: var(--uni-p, #dc2626) !important;
  -webkit-text-stroke: 0 !important;   /* kill the blue outline that leaked from the base logo */
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85), 4px 5px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Onboarding Steps Bar */
.ob4-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 18px;
  padding: 0 4px;
}
.ob4-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
  position: relative;
}
.ob4-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-base);
  font-weight:700;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  transition: all var(--dur) ease;
}
.ob4-step.done .ob4-dot {
  background: var(--uni-p, #dc2626) !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
}
.ob4-step.cur .ob4-dot {
  background: var(--uni-p, #dc2626) !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  transform: scale(1.15);
}
.ob4-lbl {
  font-size:var(--fs-2xs);
  font-weight:600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ob4-step.cur .ob4-lbl, .ob4-step.done .ob4-lbl {
  color: #ffffff !important;
  text-shadow: 0 0 8px var(--uni-p, rgba(240, 62, 90, 0.6));
}
.ob4-line {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 -4px 18px;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.ob4-line.on {
  background: linear-gradient(90deg, var(--uni-p, #791515), var(--uni-p2, #4d84ff)) !important;
  box-shadow: 0 0 12px var(--uni-p, rgba(240, 62, 90, 0.7)) !important;
}

/* Neon CTA Button */
.ob4-cta {
  width: 100% !important;
  background: linear-gradient(135deg, var(--uni-p, #3d7bff), #791515 50%, var(--uni-p2, #3d7bff)) !important;
  color: #ffffff !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-weight: 1000 !important;
  font-size:var(--fs-md) !important;
  letter-spacing: 0.5px !important;
  padding: 15px 24px !important;
  border-radius:var(--rad-xl) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 12px var(--uni-p, rgba(240, 62, 90, 0.65)), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-top: 18px !important;
}
.ob4-cta:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 12px var(--uni-p, rgba(240, 62, 90, 0.85)), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}
.ob4-cta:disabled {
  opacity: 0.35 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Neon Chips */
.ob4-chip {
  background: rgba(18, 11, 38, 0.75) !important;
  border: 1px solid rgba(61, 123, 255, 0.35) !important;
  color: #d6e4ff !important;
  font-weight:600 !important;
  border-radius:var(--rad-lg) !important;
  padding: 8px 15px !important;
  font-size:var(--fs-sm) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.ob4-chip.on {
  background: linear-gradient(135deg, var(--uni-p, #791515), var(--uni-p2, #3d7bff)) !important;
  border: 1.5px solid #ffffff !important;
  color: #ffffff !important;
  font-weight:700 !important;
  box-shadow: 0 0 12px var(--uni-p, rgba(240, 62, 90, 0.6)) !important;
}

/* Category Chips */
.ob4-catchip {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight:600 !important;
  border-radius:var(--rad-md) !important;
  padding: 6px 14px !important;
  font-size:var(--fs-sm) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.ob4-catchip.on {
  background: linear-gradient(135deg, #06b6d4, #3b82f6) !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.6) !important;
}

/* ===== AUTH SCREEN BACKGROUND: UNDRGRADZ STUDENT ID / CAMPUS PASS ABSTRACT SYSTEM ===== */
#authscreen {
  background: radial-gradient(ellipse at 50% 20%, #0d0724 0%, #060312 65%, #030109 100%) !important;
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden !important;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  width: 100vw !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  z-index: 10;
}

#authscreen.active {
  display: flex !important;
}

#onboarding {
  background: radial-gradient(ellipse at 50% 20%, #0d0724 0%, #060312 65%, #030109 100%) !important;
  z-index: 100;
}

/* Localized touch-action optimization strictly for Sign Up / Onboarding form elements */
#onboarding input,
#onboarding button,
#onboarding select,
#onboarding textarea,
#onboarding .gi,
#onboarding .ob4-chip,
#authscreen input,
#authscreen button {
  touch-action: manipulation;
}

/* Background Container (Strictly behind the Login Form) */
.auth-bg-decor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 1;
}

.auth-bg-decor *,
.pass-cards-stage *,
.pass-card,
.pass-card * {
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Ambient Soft Glow Orbs */
.pass-ambient-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(120px);
  will-change: transform, opacity;
}

.pass-glow-magenta {
  top: -140px;
  left: -100px;
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(240, 62, 90, 0.26), transparent 70%);
  animation: passGlowPulse 10s ease-in-out infinite alternate;
}

.pass-glow-blue {
  bottom: -160px;
  right: -120px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.28), transparent 70%);
  animation: passGlowPulse 12s ease-in-out infinite alternate-reverse;
}

.pass-glow-violet {
  top: 35%;
  left: 20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(61, 123, 255, 0.14), transparent 70%);
  filter: blur(140px);
  animation: passGlowPulse 14s ease-in-out infinite alternate;
}

@keyframes passGlowPulse {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate3d(35px, -25px, 0) scale(1.15); opacity: 0.9; }
  100% { transform: translate3d(-25px, 30px, 0) scale(0.92); opacity: 0.65; }
}

/* 3D Perspective Stage for Cards */
.pass-cards-stage {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  perspective-origin: 50% 40%;
  pointer-events: none !important;
}

/* Base Abstract Student ID Card */
.pass-card {
  position: absolute;
  border-radius:var(--rad-md);
  background: linear-gradient(135deg, rgba(20, 14, 38, 0.82) 0%, rgba(12, 18, 38, 0.75) 100%) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1.5px solid rgba(240, 62, 90, 0.45);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 28px rgba(240, 62, 90, 0.25), inset 0 1.2px 1.2px rgba(255, 255, 255, 0.3);
  padding: 12px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  user-select: none !important;
  pointer-events: none !important;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Holographic Surface Overlay */
.pass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius:var(--rad-md);
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 35%, transparent 65%);
  pointer-events: none;
}

/* Horizontal Card Dimensions */
.pass-card:not(.pass-card-vert) {
  width: 230px;
  height: 135px;
}

/* Vertical Card Dimensions */
.pass-card-vert {
  width: 145px;
  height: 220px;
}

/* Card Header */
.pass-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pass-brand {
  font-family: 'Outfit', sans-serif;
  font-size:var(--fs-xs);
  font-weight:700;
  color: #ffffff;
  letter-spacing: 0.6px;
}

.pass-brand span {
  color: #dc2626;
}

.pass-chip {
  font-size: 7.5px;
  font-weight:600;
  background: rgba(244, 63, 94, 0.25);
  border: 1px solid rgba(244, 63, 94, 0.55);
  color: #ffcbd5;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.pass-chip.cyan {
  background: rgba(6, 182, 212, 0.25);
  border-color: rgba(6, 182, 212, 0.6);
  color: #a5f3fc;
}

.pass-chip.violet {
  background: rgba(61, 123, 255, 0.25);
  border-color: rgba(61, 123, 255, 0.6);
  color: #d6e4ff;
}

.pass-chip.magenta {
  background: rgba(240, 62, 90, 0.25);
  border-color: rgba(240, 62, 90, 0.6);
  color: #fbcfe8;
}

/* Card Body Layout */
.pass-body {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.pass-body-vert {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}

/* Abstract Profile Circle */
.pass-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  font-size:var(--fs-base);
}

.pass-avatar-circle.large {
  width: 44px;
  height: 44px;
  font-size:var(--fs-lg);
}

.pass-avatar-circle.sm {
  width: 28px;
  height: 28px;
  font-size:var(--fs-xs);
}

/* Abstract Line Bars */
.pass-lines-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pass-line-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.65);
}

.pass-line-bar.muted {
  background: rgba(255, 255, 255, 0.3);
  height: 4px;
}

.pass-line-bar.cyan {
  background: rgba(6, 182, 212, 0.8);
  height: 4px;
}

.w-90 { width: 90%; }
.w-85 { width: 85%; }
.w-80 { width: 80%; }
.w-70 { width: 70%; }
.w-65 { width: 65%; }
.w-60 { width: 60%; }
.w-55 { width: 55%; }
.w-50 { width: 50%; }
.w-40 { width: 40%; }

/* Abstract QR Block */
.pass-qr-abstract {
  font-size:var(--fs-xl);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
  letter-spacing: -1px;
}

/* Depth Layer Class Modifiers */
.pass-layer-fg {
  z-index: 3;
}

.pass-layer-mg {
  z-index: 2;
  opacity: 0.75;
  filter: blur(1.2px);
}

.pass-layer-bg {
  z-index: 1;
  opacity: 0.55;
  filter: blur(2px);
  scale: 0.75;
}

/* Card Positions & Floating Keyframes */
.pass-pos-top-right {
  top: 15px;
  right: -25px;
  border-color: rgba(61, 123, 255, 0.6) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.85), 0 0 35px rgba(61, 123, 255, 0.4) !important;
  animation: floatPass1 9s ease-in-out infinite alternate;
}

.pass-pos-top-left {
  top: 10px;
  left: -30px;
  border-color: rgba(59, 130, 246, 0.6) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.85), 0 0 35px rgba(59, 130, 246, 0.4) !important;
  animation: floatPass2 11s ease-in-out infinite alternate-reverse;
}

.pass-pos-mid-right {
  top: 38%;
  right: -65px;
  border-color: rgba(240, 62, 90, 0.5) !important;
  animation: floatPass3 13s ease-in-out infinite alternate;
}

.pass-pos-mid-left {
  top: 48%;
  left: -60px;
  border-color: rgba(6, 182, 212, 0.5) !important;
  animation: floatPass4 10s ease-in-out infinite alternate-reverse;
}

.pass-pos-bot-right {
  bottom: 5%;
  right: -30px;
  border-color: rgba(61, 123, 255, 0.45) !important;
  animation: floatPass5 12s ease-in-out infinite alternate;
}

.pass-pos-bot-left {
  bottom: 8%;
  left: -35px;
  border-color: rgba(240, 62, 90, 0.45) !important;
  animation: floatPass6 14s ease-in-out infinite alternate-reverse;
}

/* Floating Animations (3D Parallax Levitation) */
@keyframes floatPass1 {
  0% { transform: translate3d(0px, 0px, 40px) rotateX(16deg) rotateY(-20deg) rotateZ(-14deg); }
  50% { transform: translate3d(-14px, -20px, 70px) rotateX(22deg) rotateY(-12deg) rotateZ(-18deg); }
  100% { transform: translate3d(10px, 15px, 20px) rotateX(10deg) rotateY(-25deg) rotateZ(-10deg); }
}

@keyframes floatPass2 {
  0% { transform: translate3d(0px, 0px, 30px) rotateX(-14deg) rotateY(18deg) rotateZ(12deg); }
  50% { transform: translate3d(16px, -22px, 65px) rotateX(-8deg) rotateY(25deg) rotateZ(18deg); }
  100% { transform: translate3d(-12px, 12px, 10px) rotateX(-20deg) rotateY(10deg) rotateZ(6deg); }
}

@keyframes floatPass3 {
  0% { transform: translate3d(0px, 0px, -40px) rotateX(22deg) rotateY(-26deg) rotateZ(28deg); }
  50% { transform: translate3d(-15px, -18px, -15px) rotateX(28deg) rotateY(-18deg) rotateZ(34deg); }
  100% { transform: translate3d(12px, 14px, -65px) rotateX(15deg) rotateY(-32deg) rotateZ(22deg); }
}

@keyframes floatPass4 {
  0% { transform: translate3d(0px, 0px, -50px) rotateX(-18deg) rotateY(24deg) rotateZ(-22deg); }
  50% { transform: translate3d(15px, -16px, -25px) rotateX(-12deg) rotateY(30deg) rotateZ(-16deg); }
  100% { transform: translate3d(-10px, 15px, -75px) rotateX(-24deg) rotateY(16deg) rotateZ(-26deg); }
}

@keyframes floatPass5 {
  0% { transform: translate3d(0px, 0px, 15px) rotateX(12deg) rotateY(-15deg) rotateZ(-10deg); }
  50% { transform: translate3d(-12px, -18px, 45px) rotateX(18deg) rotateY(-8deg) rotateZ(-15deg); }
  100% { transform: translate3d(8px, 10px, -15px) rotateX(6deg) rotateY(-20deg) rotateZ(-6deg); }
}

@keyframes floatPass6 {
  0% { transform: translate3d(0px, 0px, 10px) rotateX(-10deg) rotateY(14deg) rotateZ(10deg); }
  50% { transform: translate3d(14px, -16px, 40px) rotateX(-5deg) rotateY(20deg) rotateZ(15deg); }
  100% { transform: translate3d(-10px, 12px, -20px) rotateX(-16deg) rotateY(8deg) rotateZ(5deg); }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .pass-card,
  .pass-ambient-glow {
    animation: none !important;
  }
}



/* Auth Container Card */
.auth-container-wrap {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  padding: calc(20px + env(safe-area-inset-top)) 24px 24px;
  box-sizing: border-box;
}

.auth-main-card {
  width: 100%;
  background: rgba(15, 23, 42, 0.84) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1.5px solid rgba(37, 99, 235, 0.45) !important;
  border-radius:var(--rad-xl) !important;
  padding: 34px 28px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85), 0 0 35px rgba(37, 99, 235, 0.3), 0 0 50px rgba(6, 182, 212, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease;
}

/* Auth Header - Authentic 3D Extrusion Logo (White UNDR + Crimson Red GRADZ with 3D Royal Blue Extruded Shadow) */
.auth-logo-text {
  font-family: 'Outfit', 'Graduate', 'Inter', sans-serif;
  font-size: 48px;
  font-weight: 1000;
  letter-spacing: -0.5px;
  text-align: center;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.auth-logo-text .logo-undr {
  display: inline-block !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85), 4px 5px 8px rgba(0, 0, 0, 0.5) !important;
  paint-order: stroke fill !important;
}

.auth-logo-text .logo-gradz {
  display: inline-block !important;
  color: #dc2626 !important;
  background: none !important;
  -webkit-text-fill-color: #dc2626 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85), 4px 5px 8px rgba(0, 0, 0, 0.5) !important;
  paint-order: stroke fill !important;
  filter: none !important;
}

.auth-subtitle {
  font-size:var(--fs-md);
  font-weight:500;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 26px;
}

/* Auth Tabs */
.auth-tabs-bar {
  display: flex;
  background: rgba(8, 12, 22, 0.75);
  border-radius:var(--rad-lg);
  padding: 5px;
  margin-bottom: 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  width: 100%;
  box-sizing: border-box;
}

.auth-tab-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius:var(--rad-md);
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size:var(--fs-md);
  font-weight:700;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  transition: all var(--dur) ease;
}

.auth-tab-btn.active {
  color: #ffffff !important;
  background: #dc2626 !important;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
}

/* Inputs & Autofill Fixes */
#authscreen input,
.auth-input-field,
#li-email,
#li-pass {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 52px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius:var(--rad-lg) !important;
  color: #ffffff !important;
  font-family: 'Outfit', 'Inter', var(--font), sans-serif !important;
  font-size:var(--fs-md) !important;
  font-weight:500 !important;
  padding: 0 18px !important;
  outline: none !important;
  transition: all var(--dur) ease !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

#authscreen input::placeholder,
.auth-input-field::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 500 !important;
}

#authscreen input:focus,
.auth-input-field:focus,
#li-email:focus,
#li-pass:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.55), 0 0 10px rgba(225, 29, 72, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  color: #ffffff !important;
}

/* Chrome / Safari Autofill Dark Override */
#authscreen input:-webkit-autofill,
#authscreen input:-webkit-autofill:hover, 
#authscreen input:-webkit-autofill:focus,
#authscreen input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px #0f172a inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Login CTA Button - Harmonious Crimson Red + Royal Blue Aurora Gradient */
#do-login-btn,
.auth-submit-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 54px !important;
  background: #dc2626 !important;
  color: #ffffff !important;
  font-family: 'Outfit', 'Inter', var(--font), sans-serif !important;
  font-size:var(--fs-lg) !important;
  font-weight: 1000 !important;
  letter-spacing: 0.5px !important;
  border-radius:var(--rad-lg) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.5), inset 0 1.5px 1px rgba(255, 255, 255, 0.35) !important;
  cursor: pointer !important;
  transition: all var(--dur) ease !important;
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#do-login-btn:hover,
.auth-submit-btn:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 0 18px rgba(220, 38, 38, 0.75), inset 0 1.5px 2px rgba(255, 255, 255, 0.5) !important;
}

#do-login-btn:active,
.auth-submit-btn:active {
  transform: translateY(1px) scale(0.99) !important;
}

/* Password Eye Button Fix */
#ob-pass-eye-login {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size:var(--fs-lg) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 0 18px 18px 0 !important;
  border-left: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  z-index: 2 !important;
}

#ob-pass-eye-login:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Sign Up Option Cards */
.auth-option-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 18px;
  border-radius:var(--rad-lg);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all var(--dur) ease;
}

/* Solo puntero real: en iOS el :hover se queda pegado tras el tap y la card
   no elegida quedaba "levantada" al volver del flujo de registro. */
@media (hover: hover) {
  .auth-option-card:hover {
    border-color: rgba(244, 63, 94, 0.7);
    background: rgba(244, 63, 94, 0.12);
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.38);
  }
}

/* ===== UNDRGRADZ GLOBAL CUSTOM MODAL SYSTEM ===== */
.ugz-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(10, 8, 22, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.ugz-modal-overlay.ugz-open {
  opacity: 1;
  pointer-events: auto;
}
.ugz-modal-card {
  width: min(92vw, 420px);
  background: linear-gradient(165deg, rgba(34, 20, 58, 0.96), rgba(14, 10, 26, 0.98));
  border: 1.5px solid rgba(240, 62, 90, 0.3);
  border-radius:var(--rad-xl);
  padding: 26px 22px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(240, 62, 90, 0.25);
  text-align: center;
  transform: scale(0.92);
  transition: transform var(--dur) var(--ease-spring);
  box-sizing: border-box;
}
.ugz-modal-overlay.ugz-open .ugz-modal-card {
  transform: scale(1);
}
.ugz-modal-badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-2xl);
  line-height: 1;
  flex-shrink: 0;
}

/* Variant Badges */
.ugz-modal-card.type-info .ugz-modal-badge {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.4));
  border: 1.5px solid rgba(59, 130, 246, 0.6);
  
  color: #60a5fa;
}
.ugz-modal-card.type-success .ugz-modal-badge {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.4));
  border: 1.5px solid rgba(16, 185, 129, 0.6);
  
  color: #34d399;
}
.ugz-modal-card.type-error .ugz-modal-badge {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.4));
  border: 1.5px solid rgba(239, 68, 68, 0.6);
  
  color: #dc2626;
}
.ugz-modal-card.type-warning .ugz-modal-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.4));
  border: 1.5px solid rgba(245, 158, 11, 0.6);
  
  color: #fbbf24;
}
.ugz-modal-card.type-confirm .ugz-modal-badge {
  background: linear-gradient(135deg, rgba(61, 123, 255, 0.25), rgba(43, 95, 217, 0.4));
  border: 1.5px solid rgba(61, 123, 255, 0.6);
  
  color: #6b9bff;
}
.ugz-modal-card.type-prompt .ugz-modal-badge {
  background: linear-gradient(135deg, rgba(240, 62, 90, 0.25), rgba(61, 123, 255, 0.4));
  border: 1.5px solid rgba(240, 62, 90, 0.6);
  
  color: #dc2626;
}
.ugz-modal-card.type-premium .ugz-modal-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(240, 62, 90, 0.3));
  border: 1.5px solid rgba(245, 158, 11, 0.85);
  
  color: #fbbf24;
}

.ugz-modal-title {
  font-size:var(--fs-lg);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}
.ugz-modal-message {
  font-size:var(--fs-base);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 20px;
}
.ugz-modal-input-wrap {
  margin-bottom: 20px;
}
.ugz-modal-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius:var(--rad-md);
  padding: 12px 14px;
  color: #fff;
  font-size:var(--fs-base);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ugz-modal-input:focus {
  border-color: #dc2626;
  box-shadow: 0 0 12px rgba(240, 62, 90, 0.45);
}
.ugz-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.ugz-modal-btn {
  flex: 1;
  min-height: 44px;
  border-radius:var(--rad-md);
  font-size:var(--fs-base);
  font-weight:600;
  cursor: pointer;
  border: none;
  transition: transform var(--dur) ease, filter var(--dur) ease, box-shadow var(--dur) ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ugz-modal-btn:active {
  transform: scale(0.97);
}
.ugz-btn-cancel {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.ugz-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.ugz-btn-confirm {
  background: #791515;
  color: #ffffff;
  box-shadow:var(--el-2);
}
.ugz-btn-confirm:hover {
  filter: brightness(1.1);
  box-shadow:var(--el-2);
}
.type-info .ugz-btn-confirm {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow:var(--el-2);
}
.type-success .ugz-btn-confirm {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow:var(--el-2);
}
.type-error .ugz-btn-confirm {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow:var(--el-2);
}
.type-warning .ugz-btn-confirm {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow:var(--el-2);
}
.type-premium .ugz-btn-confirm {
  background: linear-gradient(135deg, #f59e0b, #791515);
  box-shadow:var(--el-2);
}
.ugz-modal-card.type-cheat .ugz-modal-badge {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(61, 123, 255, 0.3));
  border: 1.5px solid rgba(56, 189, 248, 0.85);
  
  color: #38bdf8;
}
.type-cheat .ugz-btn-confirm {
  background: #791515;
  box-shadow:var(--el-2);
}

/* ---------- Post-purchase celebration ("subscribed") ---------- */
.ugz-modal-card.type-subscribed {
  position: relative;
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 40px rgba(245, 158, 11, 0.35);
  overflow: hidden;
}
.ugz-modal-card.type-subscribed .ugz-modal-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(43, 95, 217, 0.4));
  border: 1.5px solid rgba(245, 158, 11, 0.9);
  color: #fbbf24;
  position: relative;
  animation: ugzBadgePop 0.55s var(--ease-spring, ease) both;
}
.ugz-modal-card.type-subscribed .ugz-modal-badge::before,
.ugz-modal-card.type-subscribed .ugz-modal-badge::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 158, 11, 0.55);
  animation: ugzBadgeGlowPulse 1.8s ease-out infinite;
}
.ugz-modal-card.type-subscribed .ugz-modal-badge::after {
  animation-delay: 0.6s;
}
.type-subscribed .ugz-btn-confirm {
  background: linear-gradient(135deg, #fbbf24, #f59e0b 45%, #791515);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.45), var(--el-2);
}

@keyframes ugzBadgePop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ugzBadgeGlowPulse {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

.ugz-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.ugz-confetti-piece {
  position: absolute;
  top: -12px;
  width: 7px;
  height: 12px;
  opacity: 0;
  border-radius: 1px;
  animation-name: ugzConfettiFall;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes ugzConfettiFall {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(340px) translateX(var(--drift, 0px)) rotate(540deg); opacity: 0; }
}







/* ══════════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS — "mature but alive"
   Personality lives in how it FEELS, not in more colour. Applied through
   classes that already exist, so no markup changes. Honours reduced-motion.
   ══════════════════════════════════════════════════════════════════ */

/* 1 — Press feedback: everything tappable dips on touch. The single biggest
      "this feels responsive" win, and it costs nothing structurally. */
.gbtn, .gbtn-ghost, .evsec-chip, .chatsec-chip, .prof-tab, .es-cta,
.jbtn, .app-fab, .chat-fab, .yr-chip, .hangout-item-card, .citem,
button[onclick], [role="button"] {
  transition: transform var(--dur-fast) var(--ease),
              filter var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.gbtn:active, .gbtn-ghost:active, .es-cta:active, .jbtn:active,
.yr-chip:active, button[onclick]:active {
  transform: translateY(1px) scale(0.975);
  filter: brightness(1.06);
}
/* Chips get a livelier pop — they're small, a subtle press is invisible */
.evsec-chip:active, .chatsec-chip:active, .prof-tab:active {
  transform: scale(0.94);
}
/* Cards lift slightly instead of dipping — they're surfaces, not buttons */
.hangout-item-card:active, .citem:active {
  transform: scale(0.99);
  filter: brightness(1.03);
}

/* 2 — Selecting a chip gives a small confident bounce (spring easing) */
.evsec-chip.on, .chatsec-chip.on {
  animation: chipPop var(--dur) var(--ease-spring);
}
@keyframes chipPop {
  0%   { transform: scale(0.94); }
  55%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* 3 — The "going" count / stat numbers tick in when they mount */
.v-stat-num { animation: statIn 0.4s var(--ease-out) backwards; }
@keyframes statIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 4 — FAB entrance: a small spring so it announces itself once */
.app-fab, .chat-fab { animation: fabIn 0.34s var(--ease-spring) backwards; }
@keyframes fabIn {
  from { opacity: 0; transform: scale(0.6) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Accessibility: anyone who asked the OS to reduce motion gets none of it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Crush tabs (Search / Ranks / Admirers) active state → gradz red, not the
   amber gradient. Higher specificity so it beats the --grad-purple rule. */
#discover-tabs .crush-tab.active {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

/* ══ GROUP SETTINGS SHEET (.gsx-*) ══
   Own classes on purpose: the global rule at ~6594 forces every .gbtn/.jbtn to
   the amber→wine gradient with !important, so any inline colour there loses.
   These sit outside that selector list, which is what lets each action keep its
   own colour without an !important war. */

/* ── Banner header: the whole card IS the banner ── */
.gsx-banner {
  position: relative;
  height: 132px;
  border-radius: var(--rad-lg);
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--gbdl);
  background: linear-gradient(135deg, var(--p), var(--p2));
  display: flex;
  align-items: flex-end;
}
.gsx-banner-img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Scrim so the title stays legible over any photo */
.gsx-banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 38%, rgba(0, 0, 0, 0.78));
}
.gsx-banner-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  opacity: 0.5;
}
.gsx-banner-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  width: 100%;
  min-width: 0;
}
.gsx-banner-title {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Floating circular affordances on the banner itself */
.gsx-banner-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--fs-base);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.gsx-banner-btn:hover { background: rgba(0, 0, 0, 0.75); }
.gsx-banner-btn:active { transform: scale(0.92); }
.gsx-banner-btn.gsx-top {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}

/* ── Compact action buttons ── */
.gsx-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--rad-md);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: var(--surf-1);
  color: var(--fg);
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.gsx-btn:active { transform: scale(0.98); }
.gsx-btn:hover { filter: brightness(1.12); }

.gsx-btn--invite {
  background: color-mix(in srgb, var(--p) 16%, transparent);
  border-color: color-mix(in srgb, var(--p) 55%, transparent);
  color: #cfe0ff;
}
.gsx-btn--invite:hover {
  box-shadow: 0 0 12px color-mix(in srgb, var(--p) 32%, transparent);
}
/* Green = constructive. Tinted outline, matching the app's Allow/＋ convention. */
.gsx-btn--green {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.55);
  color: #4ade80;
}
.gsx-btn--green:hover { box-shadow: 0 0 12px rgba(34, 197, 94, 0.35); }

.gsx-btn--neutral {
  background: var(--surf-2);
  border-color: var(--gbdl);
  color: #fff;
}
/* Wine FILL with white lettering — 10.7:1, unlike wine-as-text which is 1.8:1. */
.gsx-btn--wine {
  background: var(--wine-fill);
  border-color: var(--wine);
  color: #fff;
}
.gsx-btn--wine:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--wine) 45%, transparent); }

.gsx-btn--danger {
  background: color-mix(in srgb, var(--wine-fill) 88%, #000);
  border-color: var(--wine);
  color: #fff;
}
.gsx-btn--danger:hover { box-shadow: 0 0 14px color-mix(in srgb, var(--wine) 50%, transparent); }

.gsx-divider {
  height: 1px;
  background: var(--gbdl);
  margin: 18px 0 14px;
}

/* ── Member bubble: neon, hue per member (--gsx-hue) ── */
.gsx-member {
  border-radius: var(--rad-lg);
  margin-bottom: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--gsx-hue, #3d7bff) 9%, rgba(255, 255, 255, 0.02));
  border: 1.5px solid color-mix(in srgb, var(--gsx-hue, #3d7bff) 42%, transparent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--gsx-hue, #3d7bff) 14%, transparent);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gsx-member:hover {
  border-color: color-mix(in srgb, var(--gsx-hue, #3d7bff) 70%, transparent);
}
/* Glow only intensifies on the OPEN row, so a list of members never turns into
   a wall of competing halos. */
.gsx-member.open {
  border-color: var(--gsx-hue, #3d7bff);
  box-shadow: 0 0 14px color-mix(in srgb, var(--gsx-hue, #3d7bff) 38%, transparent),
              inset 0 0 14px color-mix(in srgb, var(--gsx-hue, #3d7bff) 12%, transparent);
}
.gsx-member-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
}
.gsx-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid color-mix(in srgb, var(--gsx-hue, #3d7bff) 60%, transparent);
}
.gsx-name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.gsx-handle {
  font-size: var(--fs-xs);
  color: var(--fg2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gsx-nick {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: color-mix(in srgb, var(--gsx-hue, #3d7bff) 72%, #fff);
}
/* Chevron: the same glyph used for navigation rows, rotated 90° when open. */
.gsx-chev {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.gsx-chev:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.gsx-member.open .gsx-chev {
  transform: rotate(90deg);
  color: var(--gsx-hue, #3d7bff);
}
/* Collapsed by default; JS sets max-height to open it. */
.gsx-actions {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out), padding var(--dur-slow) var(--ease-out);
  padding: 0 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.gsx-member.open .gsx-actions {
  max-height: 220px;
  padding: 0 11px 11px;
}

/* ══ BLACK CANVAS ══════════════════════════════════════════════════════════
   The app read as dark purple, which flattened every neon accent. This layer
   makes the canvas pure black and every panel a NEUTRAL near-black.

   Why an appended override layer instead of editing the originals: the base
   surface is already forced by the "NEON RESKIN OVERRIDE LAYER" (~6524) with
   !important, so body:190 / #app:988 / #app:6456 are dead code. Editing them
   changes nothing — only a later, equally-important rule wins.

   The purple came from the blue channel sitting well above red/green
   (#110b24, rgba(17,14,30), rgba(22,14,42)...). Every value below keeps the
   three channels within ~4 points of each other, so the greys stay neutral and
   the only colour on screen is the neon itself. */

html,
body {
  background: #000 !important;
  background-image: none !important;
}
#app {
  background: #000 !important;
}
/* Aurora orbs — already disabled at 6536/6544; reasserted so a future edit
   upstream can't quietly bring the purple wash back. */
body::before,
body::after,
.screen::before {
  display: none !important;
  background: none !important;
}
/* #splash deliberately excluded — the intro keeps its blue gradient (see the
   #splash rule at ~433). Only the auth and onboarding screens go black. */
#authscreen,
#onboarding {
  background: #000 !important;
}

/* ── Panels & cards: one neutral step above the canvas so they stay legible
      as separate surfaces without reintroducing a colour cast. ── */
.gc,
.glass,
.set-card,
.plan-c,
.love-filter-section,
.evfilt,
.crush-info-block,
.poll-box,
.poll-rendered,
.comp-i,
.ob-panel,
.liked-card,
.cps-row,
.crush-card,
.crush-card-inner,
.crb,
.stubhub-event-card,
.fb-product-card,
.yr-chip,
.ob4-chip,
.citem-actions,
.neon-badge,
.neon-placeholder,
#ev-filter-sel,
#ev-filter-sel option,
.gi option,
#prof-tabs {
  background: #0b0b0e !important;
}

/* ── Sheets, popovers & modals: one step above panels. ── */
.msheet,
.gif-sheet,
.sticker-pop,
.mk-action-popover,
.ugz-modal-card,
.bg-sheet,
#crush-details-modal .msheet,
#chat-search-results-drop,
#search-results-drop,
#ev-cal-wrap {
  background: #0d0d11 !important;
}
.ugz-modal-overlay {
  background: rgba(0, 0, 0, 0.82) !important;
}

/* ── Chrome ── */
.bot-inner {
  background: #08080a !important;
}
.cwin {
  background: #000 !important;
}
/* The composer bar carried a WhatsApp teal-navy; neutralise it too. */
.cbar {
  background: rgba(11, 14, 28, 0.97) !important;
}
.cbar-capsule {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
/* Hide the camera icon while typing so the text field gets the room */
.cbar-capsule.typing .cbar-cam {
  display: none;
}
/* Chrome's autofill fill was slate navy. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #0b0b0e inset !important;
}

/* ══ .neon-card ══
   The canonical "black fill + coloured outline" recipe, previously copy-pasted
   inline in several places. Set the hue per element with style="--neon:<colour>",
   the same way --chip and --gsx-hue already work.
   Idle carries NO outer halo — only the border and a faint inset. The glow is
   reserved for .on, so a screen full of these reads as a set of frames with one
   of them lit, instead of a wall of competing light. */
.neon-card {
  --neon: var(--c-blue);
  background: #000;
  border: 1.5px solid var(--neon);
  border-radius: var(--rad-md);
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--neon) 10%, transparent);
}
/* Selected reads through a thicker edge and the halo — never through the fill,
   because every fill here is black. */
.neon-card.on {
  border-width: 2px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--neon) 65%, transparent),
              inset 0 0 12px color-mix(in srgb, var(--neon) 16%, transparent);
}

/* ══ Swipe deck: the two primary actions read bigger ══
   Order in index.html is undo · X · star · heart · rose, so the two large
   buttons land at positions 2 and 4 and the row stays symmetric. */
.crb-neon-x,
.crb-neon-heart {
  width: 68px !important;
  height: 68px !important;
  border-width: 2.5px !important;
}
.crb-neon-x .crb-svg,
.crb-neon-heart .crb-svg {
  width: 24px !important;
  height: 24px !important;
}

/* ══ NOTIFICATION FILTER CHIPS AS UNDERLINE TABS ══
   Each category keeps its own neon hue, but the pill is gone: white label, and
   the hue arrives as an underline on whichever one is picked — the same
   language as the section chips, the tab bars and the filter groups.
   These are single-select (one category at a time), so exactly one line is lit.
   The row lives at body level in the notifications sheet, so the #sec-scoped
   copies of this recipe never reach it and it needs its own. */
.nfchip[data-nf="all"]      { --chip: var(--c-cyan); } /* cyan    */
.nfchip[data-nf="social"]   { --chip: var(--c-pink); } /* pink    */
.nfchip[data-nf="campus"]   { --chip: var(--c-lime); } /* lime    */
.nfchip[data-nf="events"]   { --chip: var(--c-violet); } /* purple  */
.nfchip[data-nf="requests"] { --chip: var(--c-orange); } /* orange  */
.nfchip[data-nf="system"]   { --chip: var(--c-yellow); } /* neon yellow, by request */

.nfchip {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* room under the label for the line, which the .nfchips scroller already
     reserves with its own padding-bottom */
  padding: 7px 11px 10px;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--dur) var(--ease);
}
.nfchip.on {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #fff;
}
.nfchip::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--chip, #3d7bff);
  /* Idle: the line is there, dim and unlit. The glow lives on .on below. */
  box-shadow: none;
  transform: scaleX(1);
  transform-origin: center;
  opacity: 0.3;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  pointer-events: none;
}
.nfchip.on::after {
  transform: scaleX(1);
  opacity: 1;
  box-shadow: 0 0 10px var(--chip, #3d7bff),
              0 0 18px color-mix(in srgb, var(--chip, #3d7bff) 55%, transparent);
}

/* ══ SETTINGS — a different neon edge per section ══
   .set-card is the rounded box you see (rows themselves only draw a divider),
   so the border goes here. Beats the two earlier !important blocks that force a
   faint blue outline (~6589) and a flat black fill (~9468). */
#settings-modal .set-card {
  --sec-neon: var(--c-blue);
  border: 1.5px solid color-mix(in srgb, var(--sec-neon) 62%, transparent) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--sec-neon) 24%, transparent) !important;
}
/* Hues are assigned per card index from JS (_paintSettingsNeon): .set-h
   headers are also <div>, so :nth-of-type() would miscount them as cards. */

/* Log Out is destructive: wine fill + wine edge, not an outline like the rest. */
#settings-modal #set-logout-title,
#settings-modal #set-logout-title + .set-s {
  color: #fff !important;
}
#settings-modal .set-card:has(#set-logout-title) {
  --sec-neon: var(--wine);
  background: color-mix(in srgb, var(--wine) 26%, #000) !important;
  border-color: var(--wine) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--wine) 42%, transparent) !important;
}

/* ══ Gradient neon edge — highlights only ══
   Rounded corners rule out border-image, so this is the padding-box/border-box
   double-background trick (the same one .plan-c.feat already uses at ~6613).
   Deliberately NOT global: the trick consumes the `background` property, and
   ~138 places in app.js assign a background at runtime (hovers, toggles), which
   would silently erase the border. Solid hue borders also stay everywhere else
   because that is what tells Sports from Dorm, or one Settings section from
   the next — one shared gradient would flatten that language. */
.neon-card.grad {
  border: 1.5px solid transparent;
  background: linear-gradient(#000, #000) padding-box,
              linear-gradient(135deg, var(--neon), color-mix(in srgb, var(--neon) 35%, #fff)) border-box;
}
.neon-card.grad.on {
  border-width: 2px;
}

/* ══ Hangouts sort bubble — one hue per sort ══
   Must live after the BLACK CANVAS block (~9480), which forces
   `#ev-filter-sel { background:#0b0b0e !important }` with the same specificity;
   later wins. The chevron is re-declared because that rule uses the `background`
   shorthand and resets background-image along with it. */
#ev-filter-sel {
  --sort-hue: var(--c-blue);
  background-color: color-mix(in srgb, var(--sort-hue) 16%, #000) !important;
  border: 1.5px solid var(--sort-hue) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--sort-hue) 38%, transparent) !important;
  color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}
#ev-filter-sel[data-sort="compat"]   { --sort-hue: var(--c-pink); } /* pink   */
#ev-filter-sel[data-sort="trending"] { --sort-hue: var(--c-orange-deep); } /* orange */
#ev-filter-sel[data-sort="newest"]   { --sort-hue: var(--c-cyan); } /* cyan   */
#ev-filter-sel[data-sort="spots"]    { --sort-hue: var(--c-lime); } /* lime   */
#ev-filter-sel[data-sort="soon"]     { --sort-hue: var(--c-amber); } /* amber  */
#ev-filter-sel[data-sort="near"]     { --sort-hue: var(--c-rose); } /* rose   */
#ev-filter-sel:hover,
#ev-filter-sel:focus {
  border-color: var(--sort-hue) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--sort-hue) 60%, transparent) !important;
}

/* ══ SECTION CHIPS AS UNDERLINE TABS ══
   No pill, no fill, no border: white label, the section hue kept on the icon so
   the colour coding still reads at a glance, and a neon underline in that hue
   marking the selected one. Appended last and marked !important because the
   CHIP COLOR SYSTEM block (~4726) sets fill/border/colour with !important. */
#sec-chats .chatsec-chip,
#sec-hangouts .evsec-chip,
#sec-chats .chatsec-chip.on,
#sec-hangouts .evsec-chip.on,
#sec-chats .chatsec-chip:hover,
#sec-hangouts .evsec-chip:hover {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 12px 10px !important;
  /* Idle labels are white but softened, so the selected one still stands out
     even before you notice the underline. */
  color: rgba(255, 255, 255, 0.72) !important;
  text-shadow: none !important;
}
#sec-chats .chatsec-chip.on,
#sec-hangouts .evsec-chip.on {
  color: #fff !important;
}
#sec-chats .chatsec-chip .csl,
#sec-hangouts .evsec-chip .csl {
  color: inherit !important;
  text-shadow: none !important;
}

/* Icon keeps the section hue in both states — that is what still tells Sports
   from Dorm when nothing is selected. */
#sec-chats .chatsec-chip svg,
#sec-hangouts .evsec-chip svg,
#sec-chats .chatsec-chip.on svg,
#sec-hangouts .evsec-chip.on svg {
  stroke: var(--chip, #3d7bff) !important;
  color: var(--chip, #3d7bff) !important;
  opacity: 1 !important;
}

/* The underline itself. Always present so it can animate, scaled to 0 until
   the chip is selected. */
#sec-chats .chatsec-chip::after,
#sec-hangouts .evsec-chip::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--chip, #3d7bff);
  /* Idle: the line is there, just dim and unlit — you can see every section's
     colour at a glance. Selecting it turns the glow on. */
  box-shadow: none;
  transform: scaleX(1);
  transform-origin: center;
  opacity: 0.3;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  pointer-events: none;
}
#sec-chats .chatsec-chip.on::after,
#sec-hangouts .evsec-chip.on::after {
  opacity: 1;
  box-shadow: 0 0 10px var(--chip, #3d7bff),
              0 0 18px color-mix(in srgb, var(--chip, #3d7bff) 55%, transparent);
}

/* Nightlife/Matches had a wine FILL when selected; with no pill there is
   nothing to fill, so they follow the same underline rule as everyone else. */
#sec-hangouts .evsec-chip[data-sec="nightlife"].on,
#sec-chats .chatsec-chip[data-sec="nightlife"].on,
#sec-chats .chatsec-chip[data-sec="matches"].on {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ══ UNDERLINE TABS, PART 2 ══
   Same treatment as the section chips: no pill, white label, neon underline on
   the selected one. Applied to the Campus tab bar, the Profile tab bar and the
   Hangouts sort control. Appended last, !important throughout, because each of
   these already has several competing !important rules earlier in the file. */

/* ── Campus: Search · Crush · Ranks · Secret Admirers ── */
#discover-tabs {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 2px;
}
#discover-tabs .crush-tab {
  position: relative !important;
  flex: 1 1 auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 9px 6px 11px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  text-shadow: none !important;
}
/* Needs its own background reset: the red-pill rule (~9177) is
   `#discover-tabs .crush-tab.active`, one class more specific than the block
   above, so it would keep painting the pill. */
#discover-tabs .crush-tab.active {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 9px 6px 11px !important;
}
/* Every label shows now — with no pill to mark the selection, icon-only tabs
   would leave three unlabelled glyphs. */
#discover-tabs .crush-tab .tab-lbl {
  display: inline-block !important;
  font-size: var(--fs-xs) !important;
}
#discover-tabs .crush-tab svg {
  color: inherit !important;
  stroke: currentColor !important;
}
/* Each Campus tab owns a hue, so the underline means something here too. */
#discover-tabs .crush-tab[id="ctab-search"] { --tab-hue: var(--c-cyan); }
#discover-tabs .crush-tab[id="ctab-swipe"]  { --tab-hue: var(--c-pink); }
#discover-tabs .crush-tab[id="ctab-liked"]  { --tab-hue: var(--c-orange); } /* Discover — kept the flame's orange from the old For you tab */

/* ── Profile: My Card · Activity · Safety · Filters ── */
#prof-tabs {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#sec-profile #prof-tabs .prof-tab,
#prof-tabs .prof-tab {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 9px 4px 11px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  text-shadow: none !important;
}
#prof-tabs .prof-tab.active {
  color: #fff !important;
}
#prof-tabs .prof-tab:nth-child(1) { --tab-hue: var(--wine); }
#prof-tabs .prof-tab:nth-child(2) { --tab-hue: var(--c-amber); }
#prof-tabs .prof-tab:nth-child(3) { --tab-hue: var(--c-emerald); }
#prof-tabs .prof-tab:nth-child(4) { --tab-hue: var(--c-blue); }

/* ── The shared underline ── */
#discover-tabs .crush-tab::after,
#prof-tabs .prof-tab::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--tab-hue, #3d7bff);
  /* Idle: the line is there, dim and unlit. The glow lives on .on below. */
  box-shadow: none;
  transform: scaleX(1);
  transform-origin: center;
  opacity: 0.3;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  pointer-events: none;
}
/* These two use .active rather than .on, so they need their own copy of the
   selected state — the glow lives here, the idle line above stays unlit. */
#discover-tabs .crush-tab.active::after,
#prof-tabs .prof-tab.active::after {
  transform: scaleX(1);
  opacity: 1;
  box-shadow: 0 0 10px var(--tab-hue, #3d7bff),
              0 0 18px color-mix(in srgb, var(--tab-hue, #3d7bff) 55%, transparent);
}

/* ── Hangouts sort control: underline instead of an outlined bubble ── */
#ev-filter-sel {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2.5px solid var(--sort-hue) !important;
  border-radius: 0 !important;
  box-shadow: 0 3px 10px -4px var(--sort-hue) !important;
  color: #fff !important;
  padding: 9px 34px 9px 4px !important;
}
#ev-filter-sel:hover,
#ev-filter-sel:focus {
  border-bottom-color: var(--sort-hue) !important;
  box-shadow: 0 4px 14px -4px var(--sort-hue) !important;
  transform: none !important;
}

/* ══ Hangouts scope + sort: ONE matching neon-underline language ══
   White label, a thick neon underline that glows in the control's hue, same
   size + padding so the two sit perfectly even on one row. The hue is the school
   PRIMARY on "My University" / SECONDARY on "Other Universities" (set inline as
   --ctl-hue by _uniScopeBannerHtml), and the per-option --sort-hue for Sort. */
#ev-uniscope-sel,
#ev-filter-sel {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 3px solid var(--ctl-hue, #fff) !important;
  box-shadow: 0 5px 16px -3px color-mix(in srgb, var(--ctl-hue, #fff) 80%, transparent) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: var(--font) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  padding: 6px 24px 7px 3px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 5px center !important;
  background-size: 12px !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--ctl-hue, #fff) 45%, transparent) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#ev-filter-sel { --ctl-hue: var(--sort-hue, var(--p)) !important; }
#ev-uniscope-sel:hover, #ev-uniscope-sel:focus,
#ev-filter-sel:hover, #ev-filter-sel:focus {
  box-shadow: 0 7px 22px -3px color-mix(in srgb, var(--ctl-hue, #fff) 92%, transparent) !important;
}

/* ══ FILTER CHIPS AS UNDERLINE TABS ══
   Same language as the section chips and tab bars: no pill, white label, neon
   underline on what is picked. Here the hue is per SECTION rather than per chip,
   so a whole group reads as one family — Interested In red, Workout & Diet
   green, Living Situation blue, and so on.
   These are multi-select ("pick any"), so several underlines can be lit at once.
   Scoped to the filters panel rather than an explicit list of group ids: new
   groups (and the ones populated from JS, like Workout/Diet/Living) pick this up
   automatically, and .yr-chip keeps its pill everywhere else in the app. */
#ptab-panel-filters #crush-int-chips        { --grp-hue: var(--c-red-ink); } /* red     */
#ptab-panel-filters #crush-workout-chips,
#ptab-panel-filters #crush-diet-chips       { --grp-hue: var(--c-green); } /* green   */
#ptab-panel-filters #crush-living-chips     { --grp-hue: var(--c-blue); } /* blue    */
#ptab-panel-filters #crush-year-chips       { --grp-hue: var(--c-amber); } /* amber   */
#ptab-panel-filters #crush-drink-chips      { --grp-hue: var(--c-orange); } /* orange  */
#ptab-panel-filters #crush-smoke-chips      { --grp-hue: var(--c-slate); } /* slate   */
#ptab-panel-filters #crush-schooltype-chips { --grp-hue: var(--c-cyan); } /* cyan    */
#ptab-panel-filters #crush-degree-chips     { --grp-hue: var(--c-lime); } /* lime    */
#ptab-panel-filters #crush-politics-chips   { --grp-hue: var(--c-violet); } /* purple  */
#ptab-panel-filters #crush-religion-chips   { --grp-hue: var(--c-pink-soft); } /* pink    */
#ptab-panel-filters #crush-ethnicity-chips  { --grp-hue: var(--c-teal); } /* teal    */
#ptab-panel-filters #crush-lang-chips       { --grp-hue: var(--c-indigo); } /* indigo  */
#ptab-panel-filters #crush-frat-chips       { --grp-hue: var(--c-yellow); } /* yellow  */
#ptab-panel-filters #crush-uni-chips        { --grp-hue: var(--c-pink); } /* magenta */
#ptab-panel-filters #crush-greenflag-chips  { --grp-hue: var(--c-green-soft); } /* mint    */
#ptab-panel-filters #crush-lovelang-chips   { --grp-hue: var(--c-fuchsia-soft); } /* orchid  */

#ptab-panel-filters .yr-chip,
#match-filters-wrap .yr-chip {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 7px 10px 10px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  text-shadow: none !important;
}
#ptab-panel-filters .yr-chip.on,
#match-filters-wrap .yr-chip.on {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#ptab-panel-filters .yr-chip::after,
#match-filters-wrap .yr-chip::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--grp-hue, #3d7bff);
  /* Idle: the line is there, dim and unlit. The glow lives on .on below. */
  box-shadow: none;
  transform: scaleX(1);
  transform-origin: center;
  opacity: 0.3;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  pointer-events: none;
}
#ptab-panel-filters .yr-chip.on::after,
#match-filters-wrap .yr-chip.on::after {
  transform: scaleX(1);
  opacity: 1;
  /* --grp-hue, the same variable the line above uses. It briefly read --tab-hue,
     which made every filter chip glow blue under a red/green/amber line. */
  box-shadow: 0 0 10px var(--grp-hue, #3d7bff),
              0 0 18px color-mix(in srgb, var(--grp-hue, #3d7bff) 55%, transparent);
}

/* ══ FILTER SECTION TITLES: A LINE PER SECTION ══
   The hue now lives on the .love-filter-section instead of the chip container,
   so the heading and its chips inherit the same --grp-hue and read as one
   family. The heading's line is a fade-out gradient rather than the chips'
   solid bar — it marks the section, it is not a selection state, so the two
   never get confused. */
#match-filters-wrap .love-filter-section:has(#crush-int-chips)        { --grp-hue: var(--c-red-ink); } /* red     */
#match-filters-wrap .love-filter-section:has(#crush-workout-chips),
#match-filters-wrap .love-filter-section:has(#crush-diet-chips)        { --grp-hue: var(--c-green); } /* green   */
#match-filters-wrap .love-filter-section:has(#crush-living-chips)      { --grp-hue: var(--c-blue); } /* blue    */
#match-filters-wrap .love-filter-section:has(#crush-year-chips)        { --grp-hue: var(--c-amber); } /* amber   */
#match-filters-wrap .love-filter-section:has(#crush-drink-chips)       { --grp-hue: var(--c-orange); } /* orange  */
#match-filters-wrap .love-filter-section:has(#crush-smoke-chips)       { --grp-hue: var(--c-slate); } /* slate   */
#match-filters-wrap .love-filter-section:has(#crush-schooltype-chips)  { --grp-hue: var(--c-cyan); } /* cyan    */
#match-filters-wrap .love-filter-section:has(#crush-degree-chips)      { --grp-hue: var(--c-lime); } /* lime    */
#match-filters-wrap .love-filter-section:has(#crush-politics-chips)    { --grp-hue: var(--c-violet); } /* purple  */
#match-filters-wrap .love-filter-section:has(#crush-religion-chips)    { --grp-hue: var(--c-pink-soft); } /* pink    */
#match-filters-wrap .love-filter-section:has(#crush-ethnicity-chips)   { --grp-hue: var(--c-teal); } /* teal    */
#match-filters-wrap .love-filter-section:has(#crush-lang-chips)        { --grp-hue: var(--c-indigo); } /* indigo  */
#match-filters-wrap .love-filter-section:has(#crush-frat-chips)        { --grp-hue: var(--c-yellow); } /* yellow  */
#match-filters-wrap .love-filter-section:has(#crush-uni-chips)         { --grp-hue: var(--c-pink); } /* magenta */
#match-filters-wrap .love-filter-section:has(#uc-mile-sl)              { --grp-hue: var(--c-sky); } /* sky     */
#match-filters-wrap .love-filter-section:has(#crush-age-min)           { --grp-hue: var(--c-orange-deep); } /* tangerine */

#match-filters-wrap .love-filter-title {
  position: relative;
  color: #fff;
  padding-bottom: 9px;
}
#match-filters-wrap .love-filter-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
              var(--grp-hue, #3d7bff) 0%,
              color-mix(in srgb, var(--grp-hue, #3d7bff) 45%, transparent) 45%,
              transparent 100%);
  box-shadow: 0 0 9px color-mix(in srgb, var(--grp-hue, #3d7bff) 60%, transparent);
  pointer-events: none;
}

/* ══ A+ SECTIONS ARE READ-ONLY WITHOUT A+ ══
   Any section whose heading carries the gold "A+ Student" tag has its body
   (chips, selects, sliders — everything but the heading itself) taken out of
   the hit-testing tree, so a free user can see what they'd get without being
   able to set a filter that would silently never apply. The heading keeps full
   contrast so the A+ badge stays legible as the reason. */
body:not(.aplus-on) #match-filters-wrap .love-filter-section:has(> .love-filter-title .tag.gold) > *:not(.love-filter-title) {
  pointer-events: none !important;
  opacity: 0.38 !important;
  filter: grayscale(0.45);
  user-select: none;
}
body:not(.aplus-on) #match-filters-wrap .love-filter-section:has(> .love-filter-title .tag.gold) .love-filter-title {
  cursor: not-allowed;
}

/* ══ PROFILE-CARD INTEREST CHIPS AS LINES ══
   Same underline language as the filter chips, but these are read-only facts,
   not toggles, so the line is lit permanently. Hue comes in per block from
   --ln-hue (matched-on blue, languages blue, likes red, green flags green). */
.ln-chip {
  position: relative;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 9px 9px !important;
  color: #fff !important;
  font-weight: 600;
}
.ln-chip::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ln-hue, #3d7bff);
  box-shadow: 0 0 9px var(--ln-hue, #3d7bff),
              0 0 16px color-mix(in srgb, var(--ln-hue, #3d7bff) 50%, transparent);
  pointer-events: none;
}

/* ══ EVENT FORM: "ALLOWED GENDERS" + "WHO CAN JOIN?" ══
   The _gradSkin recipe (app.js) as CSS, so the create-event form speaks the same
   language as the Plans tabs, the university buttons and the admirers sub-tabs:
   unselected is a nearly black gradient with the hue on the edge and the label,
   selected fills with the hue at 72% and gains a gradient edge plus a halo.
   The inline colours these buttons used to carry are gone from index.html and
   toggleGenderAllow no longer repaints them, because inline always beats a
   class and would have made this block dead. */
/* Saturated versions, by request. These must stay in step with _evMeta in
   app.js, which colours the ratio sliders and the stacked bar for the same three
   genders — a stylesheet cannot read a JS object, so the pair is kept in sync by
   hand and each side points at the other. */
.gallow[data-g="female"] { --g-hue: var(--c-pink); } /* strong pink   */
.gallow[data-g="male"]   { --g-hue: var(--c-blue-royal); } /* strong blue   */
.gallow[data-g="other"]  { --g-hue: var(--c-violet-deep); } /* strong purple */

.gallow,
#ev-year-chips .yr-chip {
  --g-hue: var(--c-blue);
  position: relative;
  border-radius: var(--rad-pill) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--g-hue) 22%, #000) 0%, #000 100%) !important;
  border: 1px solid color-mix(in srgb, var(--g-hue) 40%, transparent) !important;
  color: var(--g-hue) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
}
.gallow.on,
#ev-year-chips .yr-chip.on {
  /* The edge used to be a gradient ending in color-mix(hue, #fff), which read as
     a white outline around the filled chip. Solid hue instead. */
  border: 1.5px solid var(--g-hue) !important;
  background: linear-gradient(135deg,
                color-mix(in srgb, var(--g-hue) 72%, #000) 0%,
                color-mix(in srgb, var(--g-hue) 29%, #000) 100%) !important;
  color: #fff !important;
  /* No halo here, by request: the gradient fill and the lighter edge already
     mark the selection, and 7 chips glowing at once was too much. */
  box-shadow: none !important;
  text-shadow: none !important;
}

/* "Who can join?" gets one hue per year rather than a single colour for the
   group — same shape and states, only the colour changes. */
#ev-year-chips .yr-chip[data-yt="freshman"]  { --g-hue: var(--c-red-ink); } /* red    */
#ev-year-chips .yr-chip[data-yt="sophomore"] { --g-hue: var(--c-blue); } /* blue   */
#ev-year-chips .yr-chip[data-yt="junior"]    { --g-hue: var(--c-green); } /* green  */
#ev-year-chips .yr-chip[data-yt="senior"]    { --g-hue: var(--c-amber); } /* yellow */
#ev-year-chips .yr-chip[data-yt="all"]       { --g-hue: var(--c-slate); } /* slate — the hidden "Everyone" chip */

/* ══ HANGOUTS FILTERS (create-event card 6) AS UNDERLINE TABS ══
   Same language as the Crush filter groups: no pill, white label, a neon
   underline on what is picked, one hue per group so each section reads as a
   family. Listed by group id rather than by card, because card 6 also holds
   #ev-invite-chips — those are friends to invite, not filter values, and they
   keep their pill.
   Card 5 (allowed genders / who can join) deliberately stays as coloured pills:
   it sets who the event is for, it is not a filter over a list. */
#ev-uni-choose-chips { --hg-hue: var(--c-pink); } /* magenta — matches the University filter */
#ev-ethnic-chips     { --hg-hue: var(--c-teal); } /* teal    — matches Ethnicity  */
#ev-politics-chips   { --hg-hue: var(--c-violet); } /* purple  — matches Politics   */
#ev-greek-chips      { --hg-hue: var(--c-yellow); } /* yellow  — matches Greek life */
#ev-lang-chips       { --hg-hue: var(--c-indigo); } /* indigo  — matches Languages  */

#ev-uni-choose-chips .yr-chip,
#ev-ethnic-chips .yr-chip,
#ev-politics-chips .yr-chip,
#ev-greek-chips .yr-chip,
#ev-lang-chips .yr-chip {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 7px 10px 10px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  text-shadow: none !important;
}
#ev-uni-choose-chips .yr-chip.on,
#ev-ethnic-chips .yr-chip.on,
#ev-politics-chips .yr-chip.on,
#ev-greek-chips .yr-chip.on,
#ev-lang-chips .yr-chip.on {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#ev-uni-choose-chips .yr-chip::after,
#ev-ethnic-chips .yr-chip::after,
#ev-politics-chips .yr-chip::after,
#ev-greek-chips .yr-chip::after,
#ev-lang-chips .yr-chip::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--hg-hue, #3d7bff);
  /* Idle: the line is there, dim and unlit. The glow lives on .on below. */
  box-shadow: none;
  transform: scaleX(1);
  transform-origin: center;
  opacity: 0.3;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  pointer-events: none;
}
#ev-uni-choose-chips .yr-chip.on::after,
#ev-ethnic-chips .yr-chip.on::after,
#ev-politics-chips .yr-chip.on::after,
#ev-greek-chips .yr-chip.on::after,
#ev-lang-chips .yr-chip.on::after {
  transform: scaleX(1);
  opacity: 1;
  box-shadow: 0 0 10px var(--hg-hue, #3d7bff),
              0 0 18px color-mix(in srgb, var(--hg-hue, #3d7bff) 55%, transparent);
}

/* El rosa de For you se retiró: los tres tonos de la fila se declaran juntos
   arriba (~6303) como azul, amarillo y rojo. Esta regla venía DESPUÉS y con la
   misma especificidad, así que ganaba y dejaba For you en rosa. */

/* ══ PROFILE HEADER STATS ══
   The three-up strip over the cover photo, now on the shared .v-stats family
   instead of its own inline copy (the separators come from
   `.v-stat + .v-stat { border-left }`, so the two 1px spacer divs are gone).
   Only the container needs styling: it used to be the app's last light frosted
   element — white at 8% — which read as a leftover from before the black theme.
   Black-tinted now, with the blur kept because it sits on a photograph. */
.prof-stats {
  margin: 14px auto 0;
  max-width: 340px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--p) 55%, transparent);
  border-radius: var(--rad-lg);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}
/* .v-stat-lbl tracks at 1.4px, which is fine for GOING / CAPACITY / FILLED but
   wraps "EVENTS JOINED" onto two lines here and leaves that column taller than
   its neighbours. Tighter tracking keeps all three on one line. */
.prof-stats .v-stat-lbl {
  letter-spacing: 0.6px;
}

/* Activity > Events created / joined. Reuses .adm-sub-btn (the app's sub-tab
   recipe) with its own two hues: gold when you are the host, blue when you are
   an attendee. */
.adm-sub-btn[data-sub="act-created"] { --sub-hue: var(--c-amber); }
.adm-sub-btn[data-sub="act-joined"]  { --sub-hue: var(--c-blue); }

/* The sweep, on press only. */
.gbtn:active::after,
.ob4-cta:active::after,
.sbtn:active::after,
.abtn:active::after,
.ahc-res:active::after,
.jbtn:active::after,
#ev-publish-btn:active::after {
  animation: btnShimmer 0.7s ease-out 1;
}

/* ══ SETTINGS — cabeceras sin caja ══
   The grey rounded box around each section title was written inline by
   initSettingsAccordion(), not by CSS, which is why it could not be restyled
   from here. That JS no longer sets background/border/border-radius, so the
   spacing lives here now and the header is just its title plus the chevron. */
#settings-modal .set-h {
  padding: 12px 2px 10px;
  margin: 14px 0 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* A collapsed card is not a decoration — it is the card itself at zero height,
   still painting its 1.5px top and bottom borders as a ~3px bar with a halo,
   because the `border` !important below beats the `border:none` the accordion
   writes inline. Rather than fight that, make it deliberate: one clean 2px
   underline in the section's own hue, which is the same language the filter
   groups and the tab bars already use. Expanding restores the full outline. */
#settings-modal .set-card[style*="max-height: 0px"] {
  border: none !important;
  border-bottom: 2px solid color-mix(in srgb, var(--sec-neon) 70%, transparent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 2px !important;
}

/* ══ UNIVERSITY PICKER — cada escuela con sus propios colores ══
   The chips inside a .uni-chips-box already follow the underline language of the
   rest of the filters, but the line takes the school's real identity instead of
   the group hue: a gradient from its primary (--u-p) to its secondary (--u-p2),
   both written per chip by _uniChipsHtml() from universities.json.
   Scoped to .uni-chips-box so the other filter groups keep their own hue. */
.uni-chips-box .yr-chip {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 9px 9px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  text-shadow: none !important;
}
.uni-chips-box .yr-chip.on {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.uni-chips-box .yr-chip::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  /* !important: the earlier id-scoped layers (#ev-uni-choose-chips …::after and
     #ptab-panel-filters .yr-chip::after) sit one specificity tier above this
     two-class selector and would keep painting their flat group hue. */
  background: linear-gradient(90deg, var(--u-p, #3d7bff), var(--u-p2, #3d7bff)) !important;
  /* Idle: the line is there, dim and unlit. The glow lives on .on below. */
  box-shadow: none;
  transform: scaleX(1);
  transform-origin: center;
  opacity: 0.3;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  pointer-events: none;
}
.uni-chips-box .yr-chip.on::after {
  transform: scaleX(1);
  opacity: 1;
  box-shadow: 0 0 10px var(--u-p, #3d7bff),
              0 0 16px color-mix(in srgb, var(--u-p2, #3d7bff) 45%, transparent) !important;
}
/* The country headings inside the box are not chips — keep them out of it. */
.uni-chips-box .uni-grp-head::after { content: none; }

/* ══ CREATE EVENT — todo / doing / done accordion ══
   Three colours doing three jobs: neutral = to-do (collapsed row), --p = the
   step you're on (a lit workspace card), green = done (a ✓). --step-hue carries
   the state colour and every part (number, icon tile, underline, chevron, title)
   reads from it. */
/* Done wins over the per-step hue — a finished step turns green regardless of
   which step it was. */
#evp-create .ehcard.done { --step-hue: var(--c-green, #22c55e); }

#evp-create .ehcard {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--rad-lg) !important;
  box-shadow: none !important;
  padding: 0 6px !important;
  margin: 0 0 3px !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* OPEN step = a lit workspace card in the step's own colour. */
#evp-create .ehcard:not(.collapsed) {
  background: color-mix(in srgb, var(--step-hue) 7%, rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid color-mix(in srgb, var(--step-hue) 45%, transparent) !important;
  box-shadow: 0 0 22px color-mix(in srgb, var(--step-hue) 14%, transparent) !important;
  padding: 2px 14px 14px !important;
  margin: 0 0 12px !important;
}
#evp-create .ehcard.collapsed > *:not(.ehsec) { display: none !important; }

/* Header row. Collapsed rows share one quiet hairline; the open step gets a
   thick accent underline. */
#evp-create .ehsec {
  cursor: pointer;
  user-select: none;
  position: relative;
  gap: 10px;
  margin: 0 !important;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#evp-create .ehcard:not(.collapsed) .ehsec {
  margin: 0 0 12px !important;
  border-bottom: 2px solid color-mix(in srgb, var(--step-hue) 75%, transparent);
}
/* Emoji sits in a small state-coloured tile instead of floating naked. */
#evp-create .ehsec .ehic {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--step-hue) 16%, #000);
  border: 1px solid color-mix(in srgb, var(--step-hue) 30%, transparent);
  border-radius: var(--rad-sm);
  font-size: var(--fs-base);
  flex-shrink: 0;
}
/* Step number: a hollow ring in the state colour. */
#evp-create .ehsec .ehnum {
  width: 22px;
  height: 22px;
  border-radius: 50% !important;
  border: 1.5px solid color-mix(in srgb, var(--step-hue) 60%, transparent) !important;
  background: transparent !important;
  color: var(--step-hue) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  flex-shrink: 0;
}
#evp-create .ehsec .ehtitle { color: var(--step-hue) !important; }

/* DONE: the number becomes a filled green ✓ and the title dims. */
#evp-create .ehcard.done .ehnum {
  background: var(--c-green, #22c55e) !important;
  border-color: var(--c-green, #22c55e) !important;
  color: transparent !important;
  font-size: 0 !important;
}
#evp-create .ehcard.done .ehnum::after {
  content: "\2713";
  font-size: var(--fs-xs);
  font-weight: 900;
  color: #04150c;
}
#evp-create .ehcard.done .ehtitle { color: rgba(255, 255, 255, 0.62) !important; }

/* Chevron rotates open/closed instead of swapping glyphs. */
#evp-create .ehsec::after {
  content: "\25B8";
  margin-left: auto;
  color: var(--step-hue);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: transform 0.2s var(--ease);
}
#evp-create .ehcard:not(.collapsed) .ehsec::after { transform: rotate(90deg); }

/* The open body fades/slides in. */
#evp-create .ehcard:not(.collapsed) > *:not(.ehsec) {
  margin-left: 2px;
  margin-right: 2px;
  animation: ehIn 0.18s ease;
}
@keyframes ehIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Publish is the destination — give it a real glow. */
#ev-publish-btn {
  box-shadow: 0 6px 24px -4px color-mix(in srgb, var(--p) 50%, transparent) !important;
}

/* ══════════ SIGN UP / ONBOARDING: TODO A SUBRAYADO NEÓN ══════════
   The last stretch of the app still on pills. Same language as the filters and
   the tab bars: no capsule, white label, a neon line that lights on selection.
   Three families share the recipe and differ only in where the hue comes from —
   --ob-hue for a plain chip, the category hue for interests, and a flag gradient
   for languages. */

/* ── 1. Los chips de sign up ── */
.ob4-chip {
  /* No hardcoded hue: inherit --ob-hue from the section container (set by
     _ob4PaintLabels to the section title's colour) so each option's underline
     matches its title instead of always being red. Fallback stays red. */
  position: relative;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 7px 10px 10px !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
.ob4-chip.on {
  /* box-shadow has to be reset too: the layer at ~8337 forces a white edge and
     a coloured glow on the selected chip with !important. */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.ob4-chip::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--ob-line, var(--ob-hue, #dc2626));
  /* Idle: the line is there, dim and unlit. The glow lives on .on below. */
  box-shadow: none;
  transform: scaleX(1);
  transform-origin: center;
  opacity: 0.3;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  pointer-events: none;
}
.ob4-chip.on::after { transform: scaleX(1); opacity: 1;   box-shadow: 0 0 10px var(--ob-hue), 0 0 18px color-mix(in srgb, var(--ob-hue) 50%, transparent);
}

/* ── 2. Las pestañas de categoría de intereses, un tono cada una ── */
.ob4-catchip[data-cat="All"]      { --cat-hue: var(--c-blue); }
.ob4-catchip[data-cat="Lifestyle"]{ --cat-hue: var(--c-green); }
.ob4-catchip[data-cat="Hobbies"]  { --cat-hue: var(--c-violet); }
.ob4-catchip[data-cat="Arts"]     { --cat-hue: var(--c-pink); }
.ob4-catchip[data-cat="Sports"]   { --cat-hue: var(--c-lime); }
.ob4-catchip[data-cat="Academic"] { --cat-hue: var(--c-cyan); }
.ob4-catchip[data-cat="Social"]   { --cat-hue: var(--c-amber); }
.ob4-catchip {
  --cat-hue: var(--c-blue);
  position: relative;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 11px 11px !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
/* Same here: ~8357 sets a white border and a cyan halo with !important. */
.ob4-catchip.on {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.ob4-catchip::after {
  content: "";
  position: absolute;
  left: 7px; right: 7px; bottom: 0;
  height: 3px; border-radius: 2px;
  background: var(--cat-hue);
  /* Idle: the line is there, dim and unlit. The glow lives on .on below. */
  box-shadow: none;
  transform: scaleX(1); transform-origin: center; opacity: 0.3;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  pointer-events: none;
}
.ob4-catchip.on::after { transform: scaleX(1); opacity: 1;   box-shadow: 0 0 10px var(--cat-hue), 0 0 18px color-mix(in srgb, var(--cat-hue) 50%, transparent);
}

/* ── 3. Las tarjetas de interés heredan el tono de SU categoría ──
   data-cat comes from the third field of each INTERESTS4 entry, so an interest
   is always the colour of the category it belongs to, whichever tab you are on. */
.ob4-int[data-cat="Lifestyle"] { --cat-hue: var(--c-green); }
.ob4-int[data-cat="Hobbies"]   { --cat-hue: var(--c-violet); }
.ob4-int[data-cat="Arts"]      { --cat-hue: var(--c-pink); }
.ob4-int[data-cat="Sports"]    { --cat-hue: var(--c-lime); }
.ob4-int[data-cat="Academic"]  { --cat-hue: var(--c-cyan); }
.ob4-int[data-cat="Social"]    { --cat-hue: var(--c-amber); }
.ob4-int {
  --cat-hue: var(--c-blue);
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 14px 6px 13px !important;
}
.ob4-int::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 0;
  height: 3px; border-radius: 2px;
  background: var(--cat-hue);
  /* Idle: the line is there, dim and unlit. The glow lives on .on below. */
  box-shadow: none;
  transform: scaleX(1); transform-origin: center; opacity: 0.3;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  pointer-events: none;
}
.ob4-int.on::after { transform: scaleX(1); opacity: 1;   box-shadow: 0 0 10px var(--cat-hue), 0 0 18px color-mix(in srgb, var(--cat-hue) 50%, transparent);
}
.ob4-int.on { background: transparent !important; box-shadow: none !important; }
.ob4-int .inm { color: rgba(255, 255, 255, 0.78); }
.ob4-int.on .inm { color: #fff; }
/* The +/✓ corner badge loses its circle along with everything else. */
.ob4-int .iadd {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cat-hue) !important;
  font-weight: 800;
}

/* ── 4. Los badges A+ Student: texto subrayado en amarillo, sin cápsula ── */
.filter-lock-badge,
.tag.gold {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 3px !important;
  color: #fde047 !important;
  box-shadow: inset 0 -2px 0 0 #fde047 !important;
  text-shadow: 0 0 8px color-mix(in srgb, #fde047 45%, transparent);
}

/* ── Hangouts: Type of University / University chips a subrayado neón ──
   These two groups sit in card 6 and were still capsules. Cyan for the type,
   magenta for the university, matching their equivalents in the Crush filters. */
#ev-schooltype-chips { --hg-hue: var(--c-cyan); }
#ev-uni-scope        { --hg-hue: var(--c-pink); }
#ev-schooltype-chips .yr-chip,
#ev-uni-scope .yr-chip {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 7px 10px 10px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  text-shadow: none !important;
}
#ev-schooltype-chips .yr-chip.on,
#ev-uni-scope .yr-chip.on {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#ev-schooltype-chips .yr-chip::after,
#ev-uni-scope .yr-chip::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 0;
  height: 3px; border-radius: 2px;
  background: var(--hg-hue);
  /* Idle: the line is there, dim and unlit. The glow lives on .on below. */
  box-shadow: none;
  transform: scaleX(1); transform-origin: center; opacity: 0.3;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  pointer-events: none;
}
#ev-schooltype-chips .yr-chip.on::after,
#ev-uni-scope .yr-chip.on::after { transform: scaleX(1); opacity: 1;   box-shadow: 0 0 10px var(--hg-hue), 0 0 18px color-mix(in srgb, var(--hg-hue) 55%, transparent);
}

/* ── Los títulos de las secciones de sign up, subrayados ──
   .ob4-flabel is the label over each chip group (On campus I live…, I am
   involved in…, ethnicity, religion, politics). A fading line, the same shape
   the Match Filters headings use, so a heading never reads as a selection. */
.ob4-flabel,
#ob4-content .field > label {
  --ob-hue: #dc2626;
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.ob4-flabel::after,
#ob4-content .field > label::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ob-hue) 0%, color-mix(in srgb, var(--ob-hue) 45%, transparent) 45%, transparent 100%);
  box-shadow: 0 0 9px color-mix(in srgb, var(--ob-hue) 55%, transparent);
  pointer-events: none;
}

/* ── El CONTINUE del sign up: el primario de la escuela, sólido ──
   It was a three-stop gradient (uni primary → wine → uni secondary) with a white
   edge and a halo, then two stops. Now one flat colour: the school's primary,
   the same --uni-p that detectUni() writes from the email domain, so CONTINUE
   and the GRADZ logo always agree. No gradient, no border, no halo. */
.ob4-cta {
  background: var(--uni-p, var(--p)) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}
.ob4-cta:hover:not(:disabled) {
  box-shadow: none !important;
  filter: brightness(1.08);
}

/* ── Volver: dos salidas desde cualquier paso del sign up ── */
.ob4-backrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.ob4-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--rad-pill);
  background: #000;
  border: 1.5px solid color-mix(in srgb, var(--p) 45%, transparent);
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ob4-back:hover { border-color: var(--p); color: #fff; }
/* Leaving sign-up entirely is the destructive one, so it wears the wine edge. */
.ob4-back.exit { border-color: color-mix(in srgb, var(--wine) 55%, transparent); }
.ob4-back.exit:hover { border-color: var(--wine); }

/* The lone "Back to log in" now sits above the logo, so it reads as leaving the
   flow rather than as a step control. Quiet by default. */
.ob4-backrow {
  justify-content: flex-start;
  margin: 0 0 6px;
}
.ob4-back.exit {
  padding: 7px 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.62);
}
.ob4-back.exit:hover {
  border-color: color-mix(in srgb, var(--wine) 65%, transparent);
  color: #fff;
}

/* ── Login: fuera el borde blanco y el halo ──
   The tab bar, the selected tab and the submit button each carried a white edge
   plus a red halo (some of it as an inset white highlight, which is what read as
   an outline on the red fill). Flat now — the red fill is enough to say which
   one is selected. */
/* (Los overrides viejos de .auth-tabs-bar/.auth-tab-btn.active se retiraron:
   el BLOQUE 2 al final del archivo es la única fuente de verdad de los tabs
   de auth — eran frágiles al orden del archivo.) */
.auth-submit-btn,
#do-login-btn {
  border: none !important;
  box-shadow: none !important;
}
.auth-submit-btn:hover,
#do-login-btn:hover {
  box-shadow: none !important;
  filter: brightness(1.08);
}

/* ── Invite Friends: el interruptor en ámbar ──
   Scoped to this one toggle so it matches the amber "Friends portion" block it
   reveals; every other .sw keeps the school colour. */
#ev-friends-sw.on {
  background: #fbbf24 !important;
}

/* ── Los badges A+ Student vuelven a ser pastilla ──
   They were briefly yellow underlined text. Back to the capsule, and now BOTH
   classes share one recipe — .filter-lock-badge and .tag.gold used to be styled
   separately and drifted apart. */
.filter-lock-badge,
.tag.gold {
  display: inline-flex !important;
  align-items: center !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border: none !important;
  border-radius: var(--rad-pill) !important;
  padding: 2px 9px !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  white-space: nowrap;
}

/* ── El botón Publish toma el color de la sección elegida ──
   --pub-hue is written by onEvSectionChange() from _secColor(); the fallback
   keeps the school colour for the very first paint. */
#evp-create #ev-publish-btn {
  background: linear-gradient(90deg,
              var(--pub-hue, var(--p)),
              color-mix(in srgb, var(--pub-hue, var(--p)) 45%, #000)) !important;
}

/* ── La barra Friends / Matches / Events Joined, ahora en Activity ──
   .prof-stats was drawn to sit on the cover photo: frosted blur, translucent
   black, no bottom margin. In Activity it sits on flat black instead, so the
   blur has nothing to blur and the strip needs room under it before the
   Events Created / Joined list starts. */
.act-stats {
  margin: 0 auto 16px;
  max-width: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Give the strip a body so it isn't invisible black-on-black, and a soft
     accent border so it reads as a card. */
  background: linear-gradient(135deg, color-mix(in srgb, var(--prof-accent, #fbbf24) 12%, #000), #000);
  border: 1px solid color-mix(in srgb, var(--prof-accent, #fbbf24) 28%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--prof-accent, #fbbf24) 12%, transparent);
}

/* ── Los botones Change / Verify / Switch toman el color de su sección ──
   .set-chg went through six earlier layers (glass, ghost, gradient, glow…) and
   ended up as a vertical three-stop gradient in var(--p), the university colour,
   identical in every section. It now fills flat with the section's own
   --sec-neon — one solid colour, no gradient, no halo — so each button matches
   the card it sits in. --sec-ink is written next to --sec-neon by
   _paintSettingsNeon() and flips to black on the light hues.
   Scoped to #settings-modal and marked !important to clear the earlier layers;
   .set-chg outside Settings is unaffected. */
#settings-modal .set-chg {
  background: var(--sec-neon, var(--p)) !important;
  background-image: none !important;
  border: 1px solid var(--sec-neon, var(--p)) !important;
  color: var(--sec-ink, #fff) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ══ APP THEME · UNIVERSITY COLORS ═══════════════════════════════════════════
   Second look for the whole app, switched from Settings > Appearance. The
   canvas takes the school's primary and the GENERIC accents take its
   secondary; anything whose hue identifies a category keeps its own colour.

   Two variables, both written by _applyAppTheme():
     --uni-field  the canvas — color-mix(var(--p) 22%, #000)
     --uni-neon   the generic accent — normally var(--p2)

   Why 22% and not the flat school colour: on flat #01A986 (UTNC) its gold
   underline measures 1.06 contrast — 1.0 means the two colours are identical.
   At 22% it is 5.16 and the field still reads as UTNC green.

   Everything here is !important because it has to beat the BLACK CANVAS layer
   at ~9516 and the inline hues several of these variables get from JS. */

/* ── The canvas. These three rules are the only ones the mode has to overturn:
      BLACK CANVAS pins html/body/#app to #000 !important, which is exactly why
      the var(--p) gradients at 203 and 993 are dead code today. ── */
html.theme-uni,
html.theme-uni body {
  background: var(--uni-field, #000) !important;
  background-image: none !important;
}
html.theme-uni #app {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--uni-field, #000) 78%, #000) 0%,
    var(--uni-field, #000) 45%,
    color-mix(in srgb, var(--uni-field, #000) 82%, #000) 100%
  ) !important;
}
/* Panels and cards deliberately untouched — they stay near-black, which is what
   keeps every neon accent legible once the field behind them is coloured. */

/* ── Generic accents → the school's secondary.
      NOT touched, on purpose: --grp-hue, --chip, --cat-hue, --step-hue,
      --g-hue, --hg-hue, --sort-hue, --sec-neon, --pub-hue, --u-p/--u-p2.
      Each of those identifies a specific thing (which filter group, which
      interest category, which settings section), so flattening them would
      throw away information the colour is carrying. ── */
html.theme-uni .neon-card,
html.theme-uni .crush-tab,
html.theme-uni .prof-tab,
html.theme-uni .adm-sub-btn {
  --neon: var(--uni-neon) !important;
  --tab-hue: var(--uni-neon) !important;
  --sub-hue: var(--uni-neon) !important;
}
html.theme-uni {
  --neon-blue: var(--uni-neon) !important;
  --neon-cyan: var(--uni-neon) !important;
  --neon-pink: var(--uni-neon) !important;
  --neon-purple: var(--uni-neon) !important;
  --neon-violet: var(--uni-neon) !important;
  --neon-magenta: var(--uni-neon) !important;
  --neon-green: var(--uni-neon) !important;
  --neon-lime: var(--uni-neon) !important;
  --neon-gold: var(--uni-neon) !important;
  --neon-amber: var(--uni-neon) !important;
  --neon-orange: var(--uni-neon) !important;
  --neon-red: var(--uni-neon) !important;
}

/* ── Crush: one colour for all five actions, white glyphs. The SVGs already
      stroke with currentColor, so the colour declaration is enough. ── */
html.theme-uni .crb-neon-undo,
html.theme-uni .crb-neon-x,
html.theme-uni .crb-neon-star,
html.theme-uni .crb-neon-heart,
html.theme-uni .crb-neon-rose {
  background: var(--uni-neon) !important;
  border-color: var(--uni-neon) !important;
  color: #fff !important;
}
html.theme-uni .crb-neon-undo:hover,
html.theme-uni .crb-neon-x:hover,
html.theme-uni .crb-neon-star:hover,
html.theme-uni .crb-neon-heart:hover,
html.theme-uni .crb-neon-rose:hover {
  box-shadow: 0 0 14px color-mix(in srgb, var(--uni-neon) 70%, transparent) !important;
}

/* ── Sign-up and auth stay in Undrgradz: you have no school to theme with until
      you pick one, and step 3 hands out its own 12 label hues. ── */
html.theme-uni #authscreen,
html.theme-uni #onboarding {
  background: #000 !important;
}

/* ── Settings > Appearance: the two mode buttons. _paintAppThemeBtns() writes
      the fill inline via _gradSkin; only the row needs styling. ── */
#apptheme-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* ══ App Theme: apagado ══════════════════════════════════════════════════════
   The Undrgradz / University Colors switch is off (APP_THEME_ENABLED in app.js).
   The section is HIDDEN, not removed: applyLanguageTranslations() walks .set-h
   and _paintSettingsNeon() walks .set-card, both BY INDEX, so pulling these two
   nodes out of the markup would shift every section title and hue after them —
   the bug that has already bitten this file twice. display:none keeps them
   counted and everything stays aligned.
   Turning APP_THEME_ENABLED back on adds html.apptheme-on and they reappear.

   Written as :not(.apptheme-on) with !important rather than a hide/show pair:
   initSettingsAccordion() (app.js:16285) writes `display:flex` INLINE on every
   .set-h, so a plain rule loses, and a "show" rule of our own would have to
   guess the natural value and would fight the accordion. One rule, no guessing. */
html:not(.apptheme-on) #set-h-appearance,
html:not(.apptheme-on) #set-card-appearance {
  display: none !important;
}

/* ══ El registro sigue al correo: GRADZ y CONTINUE ═══════════════════════════
   Both read --uni-p, which detectUni() writes from the email domain on every
   keystroke, so the logo and the button always show the same school colour —
   UT Austin orange, UTNC green, UANL blue.

   Schools flagged brandDefault in the UNI table opt out of both and keep the
   default red. Only SMU carries it today: its own colours are red and blue, and
   the default red is already the one they want.

   Scoped to these two on purpose — --uni-p feeds a dozen other things on this
   screen (progress bar, glows, chips) that must keep the school's real colour. */
html.brand-default .ob4-brand .logo-gradz {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}
/* Aquí había un `html.brand-default .ob4-cta` que dejaba el CONTINUE de SMU en
   rojo plano. Se retiró: el degradado va en las 30 escuelas, SMU incluida
   — "solo el botón continue, no Gradz". La excepción sobrevive sólo en el logo,
   arriba. */

/* ══ PALETA · un token por color ═════════════════════════════════════════════
   Los mismos 28 valores que ya estaban repartidos en 126 declaraciones de
   --chip / --grp-hue / --cat-hue / --step-hue / --g-hue / --tab-hue /
   --sort-hue / --hg-hue / --sub-hue / --sec-neon / --neon, ahora nombrados en
   un solo sitio. Los valores sRGB son EXACTAMENTE los de antes: esto por si
   solo no cambia un pixel. Existe para que el bloque P3 de mas abajo tenga
   donde agarrarse. */
:root {
  --c-blue: #3d7bff;
  --c-pink: #ec4899;
  --c-amber: #fbbf24;
  --c-cyan: #22d3ee;
  --c-lime: #a3e635;
  --c-violet: #c084fc;
  --c-green: #22c55e;
  --c-teal: #2dd4bf;
  --c-orange: #fb923c;
  --c-red-ink: #dc2626;
  --c-indigo: #818cf8;
  --c-yellow: #fde047;
  --c-orange-deep: #f97316;
  --c-slate: #94a3b8;
  --c-emerald: #34d399;
  --c-sky: #38bdf8;
  --c-rose: #f43f5e;
  --c-pink-soft: #f472b6;
  --c-blue-soft: #60a5fa;
  --c-fuchsia: #d946ef;
  --c-cyan-deep: #06b6d4;
  --c-green-soft: #4ade80;
  --c-fuchsia-soft: #f0abfc;
  --c-blue-royal: #2563eb;
  --c-violet-deep: #8b5cf6;
}

/* ══ Los mismos colores, en Display P3 ═══════════════════════════════════════
   Casi toda la paleta ya esta EN EL LIMITE de sRGB — el azul #3d7bff tiene
   croma 0.207 y el maximo de sRGB en su tono es 0.207. En un monitor sRGB no
   hay nada mas que sacar; en la pantalla P3 de un iPhone si, entre un 8% y un
   46% mas. Por eso en el telefono se ven "apagados": no es un fallo, es que el
   monitor los exagera y el telefono los pinta exactos.

   Cada valor conserva la MISMA luminosidad y el MISMO tono; solo sube el croma
   hasta donde P3 llega. Los neutros (--c-slate, croma 0.035) quedan fuera: al
   maximo de P3 se convertirian en un azul saturado.

   La doble reja importa. @supports comprueba que el navegador entienda P3 y
   @media (color-gamut: p3) que la PANTALLA lo pueda mostrar. Un monitor sRGB
   no entra aqui y sigue viendo los hex de arriba, byte por byte. */
@supports (color: color(display-p3 1 0 0)) {
  @media (color-gamut: p3) {
    :root {
    --c-blue: oklch(0.616 0.223 262.9);  /* #3d7bff +8% */
    --c-pink: oklch(0.656 0.304 354.3);  /* #ec4899 +43% */
    --c-amber: oklch(0.837 0.198 84.4);  /* #fbbf24 +20% */
    --c-cyan: oklch(0.797 0.185 211.5);  /* #22d3ee +38% */
    --c-lime: oklch(0.849 0.263 128.8);  /* #a3e635 +27% */
    --c-violet: oklch(0.722 0.200 305.5);  /* #c084fc +13% */
    --c-green: oklch(0.723 0.281 149.6);  /* #22c55e +46% */
    --c-teal: oklch(0.785 0.191 181.9);  /* #2dd4bf +44% */
    --c-orange: oklch(0.758 0.212 55.9);  /* #fb923c +33% */
    --c-red-ink: oklch(0.577 0.266 27.3);  /* #dc2626 +41% */
    --c-indigo: oklch(0.680 0.185 276.9);  /* #818cf8 +17% */
    --c-yellow: oklch(0.905 0.211 98.1);  /* #fde047 +27% */
    --c-orange-deep: oklch(0.705 0.220 47.6);  /* #f97316 +18% */
    --c-emerald: oklch(0.773 0.229 163.2);  /* #34d399 +49% */
    --c-sky: oklch(0.754 0.165 232.7);  /* #38bdf8 +19% */
    --c-rose: oklch(0.645 0.292 16.4);  /* #f43f5e +35% */
    --c-pink-soft: oklch(0.725 0.267 349.8);  /* #f472b6 +52% */
    --c-blue-soft: oklch(0.714 0.165 254.6);  /* #60a5fa +15% */
    --c-fuchsia: oklch(0.667 0.335 322.1);  /* #d946ef +29% */
    --c-cyan-deep: oklch(0.715 0.168 215.2);  /* #06b6d4 +34% */
    --c-green-soft: oklch(0.800 0.295 151.7);  /* #4ade80 +62% */
    --c-fuchsia-soft: oklch(0.833 0.155 321.4);  /* #f0abfc +18% */
    --c-blue-royal: oklch(0.546 0.269 262.9);  /* #2563eb +25% */
    --c-violet-deep: oklch(0.606 0.255 292.7);  /* #8b5cf6 +17% */
    }
  }
}

/* ── color-scheme ──
   Sin esto iOS pinta en claro los controles nativos (select, campos de fecha, la
   barra de scroll) sobre una app que es negra entera. */
:root {
  color-scheme: dark;
}

/* ══ Los títulos de la tarjeta de Crush, subrayados ══════════════════════════
   Cada bloque ya trae su título en color (azul en Idiomas, rojo en Lo que me
   gusta, verde en Estilo de vida, azul en Clubs). La línea se saca con
   `currentColor`, así que toma ese mismo color sin repetirlo — y funciona
   aunque el color venga escrito de formas distintas: Clubs, por ejemplo, pone
   `color:var(--fg2)` y luego `color:#3d7bff` en el mismo atributo.

   Dos selectores porque hay dos formas de bloque: unos abren directo con el
   título y otros lo envuelven en un <div style="margin-bottom:0;">. El
   :not(:has(> div)) distingue el título (solo texto y spans) del envoltorio. */
.crush-info-block > div:first-child:not(:has(> div)),
.crush-info-block > div:first-child > div:first-child {
  position: relative;
  padding-bottom: 7px;
}
.crush-info-block > div:first-child:not(:has(> div))::after,
.crush-info-block > div:first-child > div:first-child::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.85;
  pointer-events: none;
}

/* ══ Sign up: el título toma el color de su línea ════════════════════════════
   _ob4PaintLabels() ya reparte los 12 tonos de _OB4_LABEL_HUES en --ob-hue, que
   hasta ahora solo pintaba el subrayado mientras el texto seguía gris. Ahora los
   dos van del mismo color, igual que en la tarjeta de Crush. */
.ob4-flabel {
  color: var(--ob-hue, var(--fg2));
}

/* ══ Your University: la línea, en los colores de la escuela ═════════════════
   Su subrayado y el del selector Full name / Acronym dejan el tono rotatorio y
   toman un degradado del primario al secundario de la universidad. Como la línea
   ya no es de un color, el título no puede "tomar el color de su línea" y se
   queda en blanco. */
.ob4-flabel--uni {
  color: #fff !important;
}
.ob4-flabel--uni::after,
.ob4-uniname-tog .ob4-chip::after {
  background: linear-gradient(90deg, var(--uni-p, var(--p)) 0%, var(--uni-p2, var(--p2)) 100%) !important;
  box-shadow: 0 0 9px color-mix(in srgb, var(--uni-p, var(--p)) 45%, transparent) !important;
}

/* ══ Escuelas con el color demasiado oscuro ══════════════════════════════════
   html.uni-dark la pone _ob4UpdateUniTheme() cuando el primario baja de 2.2 de
   contraste sobre negro — el azul de UTSA (#0C2340) da 1.33 y no se ve. Son 15
   de las 30. --uni-grad lleva el degradado ya resuelto, incluido el caso de BYU
   y UofL, cuyo secundario TAMBIÉN es oscuro y se abre hacia blanco.

   Solo el logo del REGISTRO. El de la pantalla de login (.auth-logo-text
   .logo-gradz, ~8798) sigue fijo en #dc2626 y no entra aquí. */
html.uni-dark .ob4-brand .logo-gradz {
  background: var(--uni-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* El CONTINUE, mismo degradado y sin borde. :disabled no entra: sigue gris. */
html.uni-dark .ob4-cta:not(:disabled) {
  background: var(--uni-grad) !important;
  background-image: var(--uni-grad) !important;
  border: none !important;
}

/* ══ El logo de la pantalla de LOGIN no sigue a la universidad ═══════════════
   Se pidió que solo cambiara el GRADZ del registro. No era el caso: la regla
   .auth-logo-text .logo-gradz (~8816) fija #dc2626, pero
   `html.uni-set .logo-gradz` (~6013) pesa más — dos clases y un elemento contra
   dos clases — y le ganaba, así que el logo del login venía tomando var(--p)
   desde siempre. Con un correo de UofL salía #AD0000.

   Esta regla añade el ancestro html para empatar en peso y ganar por posición,
   y neutraliza también el degradado de las escuelas oscuras por si llegara. */
html .auth-logo-text .logo-gradz,
html.uni-set .auth-logo-text .logo-gradz,
html.uni-dark .auth-logo-text .logo-gradz {
  background: none !important;
  background-image: none !important;
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}

/* ── El CONTINUE, en degradado con TODAS las escuelas ──
   Sustituye a la regla de html.uni-dark de más arriba: aquella solo cubría las
   15 oscuras y esta llega a las 30. --cta-grad la calcula _ob4UpdateUniTheme()
   con un criterio propio — que el texto blanco de encima se siga leyendo —, así
   que no es la misma que --uni-grad, que es la del logo.
   :disabled sigue fuera: gris, como estaba. */
.ob4-cta:not(:disabled) {
  background: var(--cta-grad, var(--uni-p, var(--p))) !important;
  background-image: var(--cta-grad, none) !important;
  border: none !important;
}

/* ══ La barra inferior, con el borde en degradado de la escuela ══════════════
   Llevaba un azul fijo (rgba(61,123,255,0.2), ~6790) que no tenía nada que ver
   con la universidad. Ahora el borde es un degradado del primario al secundario.

   El relleno va como linear-gradient(#08080a,#08080a) y NO como color: en el
   atajo `background` el color solo puede ir en la ÚLTIMA capa, así que ponerlo
   el primero invalidaría la declaración entera. Ese #08080a es el negro que ya
   fijaba la capa BLACK CANVAS (~9607), copiado aquí para no perderlo. */
.bot-inner {
  border: 1px solid transparent !important;
  background:
    linear-gradient(#08080a, #08080a) padding-box,
    linear-gradient(100deg, var(--p), var(--p2)) border-box !important;
}

/* ══ La rosa de Crush, en rosa magenta ══════════════════════════════════════
   Estaba en #dc2626, el mismo rojo que el botón X desde que se unificaron los
   rojos, así que los dos se leían igual. */
.crb-neon-rose {
  border-color: var(--c-pink) !important;
  color: var(--c-pink) !important;
  background: color-mix(in srgb, var(--c-pink) 14%, transparent) !important;
}
.crb-neon-rose:hover {
  box-shadow: 0 0 12px color-mix(in srgb, var(--c-pink) 85%, transparent),
              inset 0 0 12px color-mix(in srgb, var(--c-pink) 50%, transparent) !important;
}

/* ===== WEBKIT / IOS SAFARI CLICK & TAP RESPONSIVENESS FIXES ===== */
button, a, input, select, textarea, [role="button"],
.auth-option-card, .evsec-chip, .chatsec-chip, .ehsec, .tbi, .crush-tab, 
.yr-chip, .gender-chip, .flag-chip, .b5c, .b5-title, .sw, .es-cta, .gbtn, .gbtn-ghost {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* ==========================================================================
   CHAT VOICE RECORDING & AUDIO PLAYER STYLES (WHATSAPP/TELEGRAM-LIKE)
   ========================================================================== */

/* Recording bar container */
.chat-audio-rec-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(240, 62, 90, 0.45);
  border-radius: var(--rad-lg, 24px);
  padding: 6px 14px;
  animation: recBarSlide 0.25s ease-out;
  min-height: 42px;
}

@keyframes recBarSlide {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pulsing red recording indicator dot */
.chat-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  animation: recPulse 1.2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes recPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 14px #ef4444; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

/* Timer display */
.chat-rec-timer {
  font-family: monospace, sans-serif;
  font-size: var(--fs-md, 15px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

/* Audio waveform visualization bars */
.chat-rec-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  height: 18px;
  overflow: hidden;
  margin: 0 4px;
}

.chat-rec-wave-bar {
  width: 3px;
  background: linear-gradient(180deg, #f03e5a, #a855f7);
  border-radius: 2px;
  animation: waveBar 0.8s infinite ease-in-out alternate;
}

.chat-rec-wave-bar:nth-child(1) { height: 35%; animation-delay: 0.1s; }
.chat-rec-wave-bar:nth-child(2) { height: 75%; animation-delay: 0.3s; }
.chat-rec-wave-bar:nth-child(3) { height: 100%; animation-delay: 0.2s; }
.chat-rec-wave-bar:nth-child(4) { height: 50%; animation-delay: 0.4s; }
.chat-rec-wave-bar:nth-child(5) { height: 80%; animation-delay: 0.15s; }
.chat-rec-wave-bar:nth-child(6) { height: 40%; animation-delay: 0.35s; }

@keyframes waveBar {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}

/* Actions buttons in recording bar */
.chat-audio-btn {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.chat-audio-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.chat-audio-btn.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.chat-audio-btn.send-btn {
  background: linear-gradient(135deg, #f03e5a, #e11d48);
  color: #ffffff;
  width: 34px;
  height: 34px;
  box-shadow: 0 3px 10px rgba(240, 62, 90, 0.4);
}
.chat-audio-btn.send-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 5px 14px rgba(240, 62, 90, 0.6);
}

/* Audio Player Bubble in Chat */
.msg-audio-player-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  min-width: 210px;
  max-width: 260px;
  border-radius: 16px;
}

.msg.out .msg-audio-player-wrapper {
  background: linear-gradient(135deg, #f03e5a, #c026d3);
  color: #ffffff;
}
.msg.in .msg-audio-player-wrapper {
  background: rgba(30, 41, 59, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.msg-audio-play-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.15s ease, background 0.15s ease;
}
.msg-audio-play-btn:active {
  transform: scale(0.92);
}

.msg-audio-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.msg-audio-track {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
  cursor: pointer;
}

.msg-audio-fill {
  height: 100%;
  border-radius: 2px;
  background: #ffffff;
  width: 0%;
  transition: width 0.1s linear;
}

.msg-audio-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
}

/* ===== FULL-SCREEN VERTICAL SHEETS (SETTINGS, NOTIFICATIONS, CHAT SETTINGS, CREATE CHAT) ===== */
#settings-modal,
#notif-modal,
#chat-settings-modal,
#chat-create-menu,
.vertical-sheet-modal {
  align-items: flex-end !important;
  justify-content: center !important;
  transition: opacity 0.28s cubic-bezier(0.25, 1, 0.5, 1);
}

#settings-modal .msheet,
#notif-modal .msheet,
#chat-settings-modal .msheet,
#chat-create-menu .msheet,
.vertical-sheet-modal .msheet {
  max-height: 94dvh !important;
  border-radius: 24px 24px 0 0 !important;
  padding-top: calc(var(--sat) + 14px) !important;
  padding-bottom: calc(var(--sab) + 24px) !important;
  will-change: transform;
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  overflow-y: auto;
}

#settings-modal:not(.open) .msheet,
#notif-modal:not(.open) .msheet,
#chat-settings-modal:not(.open) .msheet,
#chat-create-menu:not(.open) .msheet,
.vertical-sheet-modal:not(.open) .msheet {
  transform: translate3d(0, 100%, 0);
}

#settings-modal.open .msheet,
#notif-modal.open .msheet,
#chat-settings-modal.open .msheet,
#chat-create-menu.open .msheet,
.vertical-sheet-modal.open .msheet {
  transform: translate3d(0, 0, 0);
}

/* ===== iOS SPECIFIC UI FIXES ===== */

/* 1. Chat input bar: remove extra bottom gap when typing/keyboard is open */
body.keyboard-open .cbar,
.cbar:focus-within {
  padding-bottom: 8px !important;
}

/* 3. Settings & Notifications top space fix on iOS */
body.is-ios #settings-modal .msheet,
body.is-ios #notif-modal .msheet {
  max-height: 100% !important;
  max-height: 100dvh !important;
  height: 100% !important;
  border-radius: 0 !important;
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
}

body.is-ios #settings-modal .mhnd,
body.is-ios #notif-modal .mhnd {
  display: none !important;
}






/* ══════════════════════════════════════════════════════════════════════════
   REDISEÑO · BLOQUE 1 — FUNDACIÓN
   Híbrido premium: base limpia + neón multicolor refinado. Solo estética;
   cero cambios de comportamiento.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Respuesta táctil universal ──
   Lo tocable se hunde al presionar. transform-only (barato). .gbtn, .jbtn,
   .gbtn-ghost y .yr-chip YA tienen su propio press aprobado (translateY+scale
   en la capa anterior) — no se tocan aquí para no partir el lenguaje. .crb
   también tiene el suyo (scale .9 !important). */
.act-btn,
.tbi,
.set-chg,
.set-row,
.cm-tab,
.ob4-chip,
.stk-tab,
.seg2-half {
  transition: transform var(--dur-fast) var(--ease);
}
.act-btn:active,
.tbi:active,
.set-chg:active,
.cm-tab:active,
.ob4-chip:active,
.stk-tab:active,
.seg2-half:active {
  transform: scale(0.96);
}
/* Las filas son superficies, no botones: se hunden apenas (convención ya
   establecida de scale(0.99) para cards). */
.set-row[onclick]:active {
  transform: scale(0.985);
}
.np:active .ni {
  transform: scale(0.9);
}

/* ── Bottom nav: el tab activo respira ──
   La capa de "solo iconos" fija .ni a 26px !important — la pastilla necesita
   aire, así que aquí se recupera el tamaño y se anula el margen flotante y el
   drop-shadow viejo (podían mezclar dos hues). */
.np.active .ni {
  width: 38px !important;
  height: 38px !important;
  margin-top: 0 !important;
  filter: none;
  background: color-mix(in srgb, var(--uni-accent, var(--p)) 16%, transparent);
  border-radius: 14px;
  box-shadow: 0 0 16px -5px color-mix(in srgb, var(--uni-accent, var(--p)) 75%, transparent);
}
.np .nbadge { top: 0; right: calc(50% - 26px); }

/* ── Título del topbar: Boldonse con guardarraíl de ancho ──
   Los títulos dinámicos largos ("Perfil Business") no deben besar los iconos
   laterales en 375px. Ellipsis exige display:block. */
.tb-title {
  display: block;
  max-width: calc(100% - 156px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
/* El stroke/sombra del wordmark estaban afinados para Outfit; Boldonse es
   ultra pesada y el stroke de 1px le tapa los ojos a la R/G/A. */
.tb-logo-undr,
.tb-logo-gradz {
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.28);
}

/* ── Accesibilidad: anillo de foco SOLO para controles no-texto ──
   Los inputs conservan sus estilos :focus propios (border/box-shadow); el
   anillo era redundante ahí y deformaba esquinas. */
:where(button, [role="button"], a, .np, .tbi, .set-chg):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--uni-accent, var(--p)) 70%, #fff);
  outline-offset: 2px;
}

/* ── Neón más sedoso ──
   El halo activo baja 65%→52%: el color sigue mandando sin gritar. */
.neon-card.on {
  box-shadow: 0 0 15px color-mix(in srgb, var(--neon) 52%, transparent),
              inset 0 0 12px color-mix(in srgb, var(--neon) 14%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   REDISEÑO · BLOQUE 2 — AUTH (login / sign up)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Wordmark en Boldonse (marca única app ↔ landing) ──
   Peso 400 (el único real); extrusión más corta y limpia + brillo rojo bajo
   GRADZ. Los !important son necesarios: las reglas viejas los usaban. */
.auth-logo-text {
  font-family: var(--font-display) !important;
  font-size: 37px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.5 !important;
  gap: 0 !important; /* UNDRGRADZ pegado, como el logo */
}
.auth-logo-text .logo-undr {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85), 3px 4px 10px rgba(0, 0, 0, 0.5) !important;
}
.auth-logo-text .logo-gradz {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85), 3px 4px 10px rgba(0, 0, 0, 0.5),
               0 0 26px rgba(220, 38, 38, 0.45) !important;
}

/* ── Tabs Sign Up / Log In → pill segmentado premium ──
   (El subrayado no gustó aquí.) Contenedor cápsula de vidrio oscuro; el tab
   activo se llena con degradado rojo + glow y brillo superior. switchAuthTab()
   solo alterna la clase .active. */
.auth-tabs-bar {
  background: rgba(6, 9, 18, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--rad-pill) !important;
  padding: 5px !important;
  gap: 4px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
}
.auth-tab-btn {
  position: relative;
  padding: 13px 8px !important;
  border-radius: var(--rad-pill) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.auth-tab-btn:active { transform: scale(0.97); }
.auth-tab-btn.active {
  color: #fff !important;
  background: linear-gradient(160deg, #ef3b3b, #b3121f) !important;
  box-shadow: 0 6px 20px -6px rgba(220, 38, 38, 0.75),
              0 0 18px -4px rgba(220, 38, 38, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

/* ── Cards Student / Alumni: tile de icono con hue propio + PROFUNDIDAD ──
   Misma receta que las feature-cards de A+ (aprobadas): borde degradado del
   hue + relleno tintado que cae a negro + glow interno. Nada plano. */
.auth-option-ic {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px;
  color: var(--oc, var(--p));
  background: color-mix(in srgb, var(--oc, var(--p)) 16%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--oc, var(--p)) 45%, transparent);
  box-shadow: 0 0 18px -6px var(--oc, var(--p));
}
.auth-option-card {
  border: 1.5px solid transparent;
  /* --oc-tint por card: el ámbar luce ~2.5x más brillante que el azul a la
     misma mezcla, así que Alumni lleva menos tinte para pesar lo mismo. */
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--oc, #f43f5e) var(--oc-tint, 12%), #0a0e1c), rgba(8, 10, 20, 0.94)) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--oc, #f43f5e) var(--oc-edge, 100%), transparent), color-mix(in srgb, var(--oc, #f43f5e) 30%, transparent) 58%, rgba(255, 255, 255, 0.14)) border-box;
  box-shadow:
    inset 0 0 20px color-mix(in srgb, var(--oc, #f43f5e) calc(var(--oc-tint, 12%) * 0.75), transparent),
    0 12px 28px -14px color-mix(in srgb, var(--oc, #f43f5e) 60%, transparent);
}
@media (hover: hover) {
  .auth-option-card:hover {
    border-color: color-mix(in srgb, var(--oc, #f43f5e) 70%, transparent);
    background: color-mix(in srgb, var(--oc, #f43f5e) 10%, transparent);
    box-shadow: 0 0 16px -5px color-mix(in srgb, var(--oc, #f43f5e) 60%, transparent);
  }
}
.auth-option-card:active {
  transform: scale(0.98);
  border-color: color-mix(in srgb, var(--oc, #f43f5e) 70%, transparent);
  background: color-mix(in srgb, var(--oc, #f43f5e) 10%, transparent);
}

/* ── Tarjeta principal: borde degradado azul→rojo (la marca) + relleno con
   caída de luz — profundidad real, no vidrio plano ── */
.auth-main-card {
  border: 1.5px solid transparent !important;
  padding-top: 24px !important;
  background:
    linear-gradient(168deg, rgba(20, 28, 52, 0.94) 0%, rgba(9, 11, 22, 0.96) 55%, rgba(14, 9, 18, 0.96) 100%) padding-box,
    linear-gradient(168deg, rgba(61, 123, 255, 0.85), rgba(61, 123, 255, 0.18) 38%, rgba(220, 38, 38, 0.2) 68%, rgba(220, 38, 38, 0.7) 100%) border-box !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85),
              0 0 30px rgba(37, 99, 235, 0.22),
              0 10px 50px -18px rgba(220, 38, 38, 0.28),
              inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   REDISEÑO · BLOQUE 3 — TABS CORE (emojis → iconos SVG en el chrome)
   ══════════════════════════════════════════════════════════════════════════ */

/* Icono de línea en los tabs de Profile (antes emojis 💖⚡🛡️⚙️). Hereda el
   color del tab — apagado en reposo, del hue del tab al estar activo. */
.pt-ic {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; vertical-align: -2.5px; margin-right: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHATS ESTILO INSTAGRAM + REPORT SHEET (pills)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Lista de chats: sin reloj fijo, punto de no-leído, tiempo relativo ── */
.citem .cright {
  display: flex; align-items: center; justify-content: flex-end;
  min-width: 16px; flex-shrink: 0; align-self: center;
}
.citem .cdot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--uni-accent, var(--p));
  box-shadow: 0 0 10px -1px var(--uni-accent, var(--p));
}
.citem .cago {
  color: var(--fg3); font-weight: 500;
}
/* No-leído: nombre y línea en blanco fuerte (jerarquía como Instagram) */
.citem:has(.cpre-unrd) .cnm { font-weight: 800; color: #fff; }
.citem .cpre-unrd { color: #fff !important; font-weight: 700; }
.citem .cpre-unrd .cago { color: rgba(255,255,255,0.75); }

/* ── Report sheet: bottom-sheet con pills (estilo verde de la referencia) ── */
.rep-sheet {
  padding: 6px 20px calc(22px + env(safe-area-inset-bottom)) !important;
}
.rep-title {
  font-family: var(--font-display);
  font-size: 20px; line-height: 1.5; font-weight: 400;
  color: #fff; margin: 6px 0 4px;
}
.rep-sub {
  font-size: var(--fs-base); color: var(--fg2); margin-bottom: 18px;
}
.rep-pills { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.rep-pill {
  width: 100%; padding: 15px 18px; border: none; cursor: pointer;
  border-radius: var(--rad-pill);
  font-family: var(--font); font-size: var(--fs-md); font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2fbd8f, #1f9a72);
  box-shadow: 0 8px 22px -10px rgba(31,154,114,0.7), inset 0 1px 0 rgba(255,255,255,0.28);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.rep-pill:active {
  transform: scale(0.97);
  box-shadow: 0 4px 14px -8px rgba(31,154,114,0.7), inset 0 1px 0 rgba(255,255,255,0.28);
}
.rep-help {
  font-size: var(--fs-sm); color: var(--fg3); text-align: center;
  margin-bottom: 14px; line-height: 1.5;
}
.rep-cancel {
  width: 100%; padding: 14px; cursor: pointer;
  border-radius: var(--rad-pill);
  border: 1px solid var(--gbdl); background: rgba(255,255,255,0.05);
  color: #fff; font-family: var(--font); font-size: var(--fs-md); font-weight: 700;
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease);
}
.rep-cancel:active { transform: scale(0.97); background: rgba(255,255,255,0.09); }

/* ── Chat previews: mismo tamaño que el nombre; bold blanco si no visto,
   gris legible una vez leído (estilo Instagram) ── */
.citem .cpre {
  font-size: var(--fs-base) !important;   /* = nombre */
  color: rgba(255,255,255,0.55) !important; /* gris legible (visto) */
  font-weight: 500;
}
.citem .cpre .cago { font-size: var(--fs-sm); color: var(--fg3) !important; font-weight: 500; }
/* No leído: mensaje en blanco y bold, nombre también más fuerte */
.citem .cpre-unrd { color: #fff !important; font-weight: 700 !important; }
.citem .cpre-unrd .cago { color: rgba(255,255,255,0.7) !important; }
.citem:has(.cpre-unrd) .cnm { font-weight: 800; color: #fff; }

/* Create Hangout: paso 8 bloqueado hasta terminar los 7 anteriores */
.ehcard.eh-locked .ehsec { opacity: 0.4; }
.ehcard.eh-locked .ehsec .ehtitle::after {
  content: "";
  display: inline-block; width: 13px; height: 13px; margin-left: 8px; vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") center/contain no-repeat;
}

/* Badges de notificaciones y chats: solo un PUNTO (sin número) */
#notif-badge, #nbadge-chats {
  font-size: 0 !important;
  min-width: 11px !important; width: 11px !important; height: 11px !important;
  padding: 0 !important; border-radius: 50% !important;
  border-width: 1.5px !important;
}
/* Punto en el header de Notifications (en vez del número) */
.notif-hdr-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--uni-accent, var(--p)); vertical-align: middle; margin-left: 6px;
  box-shadow: 0 0 8px -1px var(--uni-accent, var(--p));
}