/* Orbit — full design system. Re-skins all 12 screens to the prototype.
   Responsive: framed phone mock on desktop, true full-screen + safe-area on real phones. */
:root {
  /* accent (recolorable "pulse") */
  --accent: #ff6a3d;
  --accent2: #ff3d77;
  --brand: #ff6a3d;          /* alias kept for any legacy refs */
  --accent2b: #ff9357;
  --brand-deep: #d24f1f;
  --brand-tint: #fff0ea;
  --on: #ffffff;
  /* surfaces */
  --ink: #141019;
  --deepink: #141019;
  --text: #1a1722;
  --paper: #fbf7f2;
  --card: #ffffff;
  --bg: #e7e3dd;
  --muted: #8a8378;
  --muted2: #9a948a;
  --line: #efe9e2;
  /* semantic */
  --ok: #1fb877;
  --teal: #1fb877;
  --dating: #ff4d8d;
  --pink: #ff4d8d;
  --orange: #ff5d6c;
  --shadow: 0 24px 50px -34px rgba(20, 18, 28, .5);
  --radius: 20px;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Hanken Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* safe-area shortcuts */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text);
  min-height: 100dvh;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================= DEVICE */
/* Mobile-first: the app IS the screen. */
.phone {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#app {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

/* Desktop / tablet: render the framed phone mock on a dotted backdrop. */
@media (min-width: 480px) {
  body {
    background: var(--bg);
    background-image: radial-gradient(circle at 1px 1px, rgba(20, 18, 28, .06) 1px, transparent 0);
    background-size: 22px 22px;
    display: flex; align-items: center; justify-content: center; padding: 20px;
  }
  .phone {
    width: 400px; height: min(862px, 94dvh);
    border-radius: 46px;
    box-shadow: 0 60px 110px -45px rgba(20, 18, 28, .65), 0 0 0 11px #0a0a0c, 0 0 0 13px #2c2c30;
  }
  #app { border-radius: 46px; }
}

/* ============================================================= SCREENS */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--paper);
  animation: screenIn .42s cubic-bezier(.2,.7,.2,1) both;
}
.screen.dark { background: radial-gradient(circle at 50% 36%, #241b30, var(--ink)); }
.scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar { width: 0; height: 0; }
/* default content padding; top clears the iOS status bar via safe-area */
.pad { padding: calc(var(--sat) + 22px) 22px calc(var(--sab) + 28px); }
.pad.tabbed { padding-bottom: calc(var(--sab) + 96px); }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
/* Opacity-only entrance: a transform on .screen (ancestor of inputs) breaks native horizontal
   caret-scroll in text inputs (typed text gets clipped), so we never transform this element. */
@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }

/* foot: pinned action area with paper fade */
.foot {
  flex: none; padding: 14px 22px calc(var(--sab) + 26px);
  background: linear-gradient(transparent, var(--paper) 26%);
  display: flex; flex-direction: column; gap: 10px;
}

/* ============================================================= TYPE */
h1, .display {
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; line-height: 1.08; letter-spacing: -.02em; color: var(--text);
}
h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.sub { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.eyebrow { color: var(--muted2); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.center-note { text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* brand */
.brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -.02em; color: var(--text); }
.wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: 24px; color: var(--text); }
.wordmark .dot { color: var(--accent); }
.logo { position: relative; border-radius: 20px; background: var(--ink); display: grid; place-items: center; flex: none; }
.logo i { position: absolute; border-radius: 50%; border: 1.5px solid var(--accent); }

/* ============================================================= BUTTONS */
.btn {
  appearance: none; border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 16px;
  border-radius: 16px; padding: 16px 18px; width: 100%;
  background: var(--accent); color: var(--on);
  box-shadow: 0 16px 34px -16px var(--accent);
  transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: scale(.985); }
.btn:hover { filter: brightness(1.02); }
.btn.dark { background: var(--ink); color: #fff; box-shadow: none; }
.btn.outline { background: #fff; color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.btn.dating { background: var(--dating); box-shadow: 0 14px 30px -14px var(--dating); }
.btn.ghost { background: transparent; color: var(--muted); font-weight: 600; box-shadow: none; }
.btn.small { width: auto; padding: 11px 15px; font-size: 14px; border-radius: 13px; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.linkish { color: var(--accent); font-weight: 700; cursor: pointer; background: none; border: none; font: inherit; font-size: 13px; }
.err { color: var(--orange); font-size: 13px; font-weight: 600; margin-top: 10px; min-height: 16px; }

/* ============================================================= FORM */
.field { margin-top: 16px; }
.label { font-weight: 700; font-size: 14px; margin-bottom: 9px; display: flex; justify-content: space-between; align-items: center; }
.label .hint { color: var(--muted); font-weight: 600; font-size: 12.5px; }
input[type=text], input[type=number], input[type=tel], input[type=password], input[type=email] {
  width: 100%; padding: 14px 15px; border: 1px solid var(--line); border-radius: 15px;
  font: inherit; font-size: 16px; background: #fff; color: var(--text);
}
input::placeholder { color: #b3aca2; }
input[type=range] { width: 100%; accent-color: var(--accent); height: 6px; }
.row2 { display: flex; gap: 10px; }
.row2 > * { flex: 1; }

/* segmented control */
.seg { display: flex; background: #f1ece4; border-radius: 15px; padding: 4px; gap: 4px; }
.seg button {
  flex: 1; border: none; background: transparent; padding: 11px; border-radius: 11px;
  font: inherit; font-weight: 600; font-size: 13.5px; color: var(--muted2); cursor: pointer; transition: all .15s;
}
.seg button.on { background: #fff; color: var(--text); font-weight: 700; box-shadow: 0 4px 12px -7px rgba(20,18,28,.5); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid var(--line); background: #fff; color: #6b655c;
  padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all .14s; user-select: none;
}
.chip.on { border-color: var(--accent); background: var(--brand-tint); color: var(--accent); }
.chip.mini { padding: 6px 11px; font-size: 11.5px; font-weight: 700; cursor: default; }
.chip.match { background: var(--brand-tint); border-color: transparent; color: var(--accent); }

/* ============================================================= CARDS / TILES */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 17px; padding: 15px 16px; }
.tile { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 17px; padding: 13px 15px; }
.tile.accent { background: var(--brand-tint); border-color: #ffd9cb; }
.tile .t-main { flex: 1; min-width: 0; }
.tile .t-title { font-weight: 700; font-size: 14px; }
.tile .t-sub { font-size: 12.5px; color: var(--muted2); }
.tile .ico { flex: none; color: var(--accent); display: grid; place-items: center; }

/* ============================================================= APP / NAV BARS */
.appbar {
  position: absolute; top: calc(var(--sat) + 8px); left: 0; right: 0; z-index: 15;
  display: flex; align-items: center; justify-content: space-between; padding: 6px 18px;
}
.iconbtn { width: 40px; height: 40px; border-radius: 13px; background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; cursor: pointer; color: #5a554d; }
.navbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; }
.navback { font-size: 14px; color: var(--muted2); font-weight: 600; cursor: pointer; background: none; border: none; }
.avatar-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(20,18,28,.4); background-size: cover; background-position: center; }

/* ============================================================= AVATARS */
.av { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-family: var(--font-display); flex: none; background-size: cover; background-position: center; }
.av.sm { width: 40px; height: 40px; font-size: 15px; border-radius: 50%; }
.av.md { width: 56px; height: 56px; font-size: 20px; border-radius: 16px; }
.av.lg { width: 96px; height: 96px; font-size: 34px; }

/* ============================================================= HOME */
.intent-row { display: flex; gap: 10px; }
.intent { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 15px;
  border-radius: 18px; cursor: pointer; border: 1.5px solid var(--line); background: #fff; color: var(--muted2);
  font-weight: 700; font-size: 15px; transition: all .16s; }
.intent .e { font-size: 20px; }
.intent.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.intent.dating.on { border-color: var(--dating); background: var(--dating); }

.radarwrap { position: relative; display: flex; flex-direction: column; align-items: center; margin: 8px 0 22px; }
/* idle "alive" glow — lives on the wrapper (not .radarbtn) so its breathing transform never
   fights the button's own :active press-scale or the tap ripple, which both live on .radarbtn. */
.radarwrap::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 172px; height: 172px; z-index: 0;
  transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 55%, transparent), transparent 72%);
  animation: btnBreathe 3.6s ease-in-out infinite;
}
@keyframes btnBreathe {
  0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: .45; }
  50% { transform: translate(-50%,-50%) scale(1.1); opacity: .8; }
}
.radarbtn {
  position: relative; z-index: 1; width: 172px; height: 172px; border-radius: 50%; border: none; cursor: pointer;
  background: radial-gradient(circle at 50% 38%, var(--accent2), var(--accent));
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 26px 50px -18px var(--accent); transition: transform .12s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
}
.radarbtn:active { transform: scale(.955); }
.radarbtn .rb-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.radarbtn .rb-sub { font-size: 12px; opacity: .9; font-weight: 600; }
.radarbtn .ring { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid var(--accent); opacity: .55; animation: ringExpandHome 2.4s ease-out infinite; }
.radarbtn .ring:nth-child(2) { animation-delay: .8s; }
.radarbtn .ring:nth-child(3) { animation-delay: 1.6s; }
/* Home button's own ring keyframe (kept separate from .radar-big .xr's ringExpand on the searching
   screen) so its max scale can respond to --radius-t without touching that other screen. */
@keyframes ringExpandHome {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.22); }
  12% { opacity: .55; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(calc(1 + var(--radius-t, .5) * .35)); }
}
/* searching/loading state (e.g. while a real search request is in flight) — visually distinct
   from the slow idle breathing/ring pulse: faster, brighter rings + quicker glow. */
.radarbtn.loading .ring { animation-duration: .85s; opacity: .85; }
.radarwrap.loading::before { animation-duration: 1s; }
/* tap ripple (spawned by JS on pointerdown, self-removes after the animation) */
.radarbtn .ripple {
  position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: rgba(255,255,255,.5); pointer-events: none;
  animation: rippleOut .5s ease-out forwards;
}
@keyframes rippleOut { to { transform: scale(9); opacity: 0; } }

/* entrance: home screen content rises/fades in on mount (fresh render — plays on sign-up entry
   AND every time home is revisited from another tab, since it's a fresh DOM node each time). */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.rise-in { animation: riseIn .5s cubic-bezier(.2,.7,.2,1) both; }

/* ============================================================= SEARCHING (dark radar) */
.live-pill { margin-top: calc(var(--sat) + 70px); display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 7px 14px; border-radius: 99px;
  color: #fff; font-size: 12.5px; font-weight: 700; align-self: center; }
.live-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: blink 1.1s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.radar-big { position: relative; width: 300px; height: 300px; margin: 26px auto 0; align-self: center; }
.radar-big .xr { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; border-radius: 50%; border: 1.5px solid var(--accent); animation: ringExpand 2.8s ease-out infinite; }
.radar-big .xr:nth-child(2) { animation-delay: .9s; }
.radar-big .xr:nth-child(3) { animation-delay: 1.8s; }
.radar-big .grid { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); transform: translate(-50%,-50%); }
.radar-big .g1 { width: 210px; height: 210px; }
.radar-big .g2 { width: 120px; height: 120px; }
.radar-big .sweepwrap { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.radar-big .sweep { position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 0deg, color-mix(in oklab, var(--accent) 45%, transparent) 55deg, transparent 95deg); animation: sweepRot 2.6s linear infinite; }
@keyframes sweepRot { to { transform: rotate(360deg); } }
.radar-big .blip { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); animation: blipPop .5s ease both, floaty 3.2s ease-in-out infinite 1s; }
@keyframes blipPop { 0% { opacity: 0; transform: scale(0); } 45% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.radar-big .you { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px;
  border-radius: 50%; background: linear-gradient(135deg,#ffb27a,#ff5e8a); border: 2.5px solid #fff; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 15px; animation: youPulse 2s ease-in-out infinite; }
@keyframes youPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.4); } 50% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } }
.bigcount { font-family: var(--font-display); font-weight: 800; font-size: 54px; color: #fff; line-height: 1; letter-spacing: -.02em; }

/* ============================================================= GROUP */
.matched-tag { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ok); margin-bottom: 4px; }
.matched-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.member { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 13px; display: flex; gap: 13px; align-items: center; }
.member .m-info { flex: 1; min-width: 0; }
.member .m-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; }
.member .m-sub { color: var(--muted2); font-size: 12.5px; margin: 2px 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member .m-actions { display: flex; gap: 12px; }
.member .m-match { text-align: center; flex: none; }
.member .m-match b { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--accent); line-height: 1; display: block; }
.member .m-match span { font-size: 10px; color: var(--muted2); font-weight: 600; }
.tiny-link { background: none; border: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted2); cursor: pointer; }
.tiny-link:active { color: var(--orange); }
.vbadge { color: #fff; background: var(--ok); width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9px; }

/* school badge (university + grad year + Clearbit logo) */
.school { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #5a554d; }
.school-logo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #f1ece4; flex: none; }
.m-school { margin: 1px 0 3px; }
.school.light { color: rgba(255, 255, 255, .95); }
.school.light .school-logo { background: rgba(255, 255, 255, .25); }
.ci-school { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* friend / connection relation badge */
.rel-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.rel-badge.friend { background: #e3f0ff; color: #2b6cb0; }
.rel-badge.conn { background: #efe9ff; color: #6b4bd6; }
.card-info .rel-badge { background: rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(6px); }

/* connection-preference badge */
.pref-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.pref-badge.new { background: #e3f6ee; color: #0f6e56; }
.pref-badge.known { background: #f1ece4; color: #8a8378; }
.card-info .pref-badge.new { background: rgba(31,184,119,.32); color: #fff; }
.card-info .pref-badge.known { background: rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(6px); }

/* friends list rows */
.friend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; margin-bottom: 8px; }
.friend-row .fr-info { min-width: 0; }
.friend-row .fr-name { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.friend-row .fr-sub { margin-top: 3px; }
.friend-row .fr-acts { display: flex; gap: 7px; flex: none; }
.friend-row .btn.small { width: auto; }

/* toggle switch */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.toggle-row .t-main { min-width: 0; }
.toggle-row .t-title { font-weight: 700; font-size: 14px; }
.toggle-row .t-sub { font-size: 12px; color: var(--muted2); line-height: 1.4; }
.switch { flex: none; width: 46px; height: 28px; border-radius: 99px; border: none; background: #d8d1c6; position: relative; cursor: pointer; transition: background .16s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(20,18,28,.3); transition: transform .16s; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(18px); }

/* ============================================================= IDEAS / PLANS */
.ai-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: #fff; padding: 8px 13px; border-radius: 99px; font-size: 12.5px; font-weight: 600; }
.plan-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px; cursor: pointer; box-shadow: 0 14px 30px -24px rgba(20,18,28,.5); transition: transform .08s, border-color .12s; }
.plan-card:active { transform: scale(.99); }
.plan-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 9px; }
.plan-emoji { width: 50px; height: 50px; border-radius: 15px; background: var(--brand-tint); display: grid; place-items: center; font-size: 24px; }
.plan-price { font-size: 13px; font-weight: 700; color: #5a554d; }
.plan-price span { color: var(--muted2); font-weight: 600; }
.plan-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; margin-bottom: 3px; }
.plan-venue { color: var(--muted); font-size: 13.5px; margin-bottom: 10px; }
.plan-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.pill { font-size: 11.5px; font-weight: 600; color: #6b655c; background: #f3efe9; padding: 5px 10px; border-radius: 99px; }
.pill.type { background: var(--ink); color: #fff; }
.plan-why { display: flex; gap: 7px; align-items: center; border-top: 1px dashed #e7e1d9; padding-top: 10px; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* plan detail */
.plan-hero { height: 220px; background: linear-gradient(135deg, var(--accent2), var(--accent)); position: relative; display: flex; align-items: flex-end; padding: 20px; }
.plan-hero .hero-back { position: absolute; top: calc(var(--sat) + 14px); left: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.25); backdrop-filter: blur(6px); display: grid; place-items: center; color: #fff; cursor: pointer; font-size: 18px; }
.plan-hero .hero-emoji { position: absolute; top: calc(var(--sat) + 16px); right: 18px; font-size: 52px; }
.plan-hero .hero-type { font-size: 12.5px; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.plan-hero .hero-title { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.08; letter-spacing: -.01em; color: #fff; margin-top: 3px; }
.facts { display: flex; gap: 9px; margin-bottom: 14px; }
.fact { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; text-align: center; }
.fact .k { font-size: 11px; color: var(--muted2); font-weight: 700; }
.fact .v { font-weight: 700; font-size: 13.5px; margin-top: 2px; }
.why-card { display: flex; align-items: flex-start; gap: 10px; background: var(--brand-tint); border: 1px solid #ffd9cb; border-radius: 16px; padding: 14px; }
.why-card .wt { font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }
.why-card .wb { font-size: 13px; color: #5a554d; line-height: 1.5; }

/* ============================================================= SWIPE */
.deck { flex: 1; position: relative; margin: 6px 20px 0; min-height: 380px; }
.card-behind { position: absolute; inset: 0; transform: scale(.94) translateY(16px); border-radius: 26px; opacity: .5; }
.card-front { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(20,18,28,.6); cursor: grab; touch-action: none; background-size: cover; background-position: center; }
.card-front .stamp { position: absolute; top: 18px; font-family: var(--font-display); font-weight: 800; font-size: 26px; padding: 4px 12px; border-radius: 10px; border: 3px solid; background: rgba(255,255,255,.9); opacity: 0; }
.card-front .stamp.meet { left: 18px; color: var(--ok); border-color: var(--ok); transform: rotate(-14deg); }
.card-front .stamp.pass { right: 18px; color: var(--orange); border-color: var(--orange); transform: rotate(14deg); }
.card-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px; background: linear-gradient(transparent, rgba(15,10,20,.86)); color: #fff; }
.card-info .ci-name { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.card-info .ci-name b { font-family: var(--font-display); font-weight: 800; font-size: 27px; }
.card-info .ci-match { margin-left: auto; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); padding: 5px 11px; border-radius: 99px; font-weight: 800; font-size: 14px; }
.card-info .ci-bio { font-size: 14.5px; opacity: .92; margin-bottom: 11px; line-height: 1.4; }
.card-info .ci-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card-info .ci-tags span { font-size: 12px; font-weight: 600; background: rgba(255,255,255,.2); backdrop-filter: blur(6px); padding: 5px 11px; border-radius: 99px; }
.swipe-controls { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 18px 20px calc(var(--sab) + 30px); }
.ctl { border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; transition: transform .1s; }
.ctl:active { transform: scale(.92); }
.ctl.no { width: 62px; height: 62px; background: #fff; border: 1px solid var(--line); color: var(--orange); font-size: 26px; box-shadow: 0 10px 24px -12px rgba(20,18,28,.4); }
.ctl.flag { width: 48px; height: 48px; background: #fff; border: 1px solid var(--line); color: var(--muted2); font-size: 18px; }
.ctl.yes { width: 62px; height: 62px; background: var(--ok); color: #fff; font-size: 26px; box-shadow: 0 12px 26px -10px var(--ok); }

/* ============================================================= CHAT */
.chat-head { display: flex; align-items: center; gap: 11px; padding: calc(var(--sat) + 12px) 18px 12px; background: #fff; border-bottom: 1px solid var(--line); flex: none; }
.chat-head .c-emoji { width: 40px; height: 40px; border-radius: 13px; background: var(--brand-tint); display: grid; place-items: center; font-size: 21px; }
.chat-head .c-title { font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .c-sub { font-size: 12px; color: var(--muted2); }
/* per-conversation safety panel — a short list of other members with Block/Report actions */
.chat-members-panel { background: #fff; border-bottom: 1px solid var(--line); padding: 10px 16px; display: flex; flex-direction: column; gap: 9px; flex: none; animation: fadeIn .15s both; }
.cm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cm-name { font-weight: 700; font-size: 13.5px; }
.cm-acts { display: flex; gap: 12px; flex: none; }
.chatlog { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 9px; padding: 16px 16px 8px; scrollbar-width: none; }
.chatlog::-webkit-scrollbar { width: 0; }
.msg-row { display: flex; align-items: flex-end; gap: 4px; }
.msg-row.me { justify-content: flex-end; }
.who { font-size: 11px; color: var(--muted2); font-weight: 600; margin: 0 0 2px 6px; }
.bubble { max-width: 80%; padding: 10px 14px; font-size: 14.5px; line-height: 1.4; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 18px 18px 18px 5px; }
.msg-row.me .bubble { background: var(--accent); color: #fff; border: none; border-radius: 18px 18px 5px 18px; }
/* per-message report — small and muted so it never competes with the conversation itself */
.msg-report { background: none; border: none; cursor: pointer; font-size: 12px; padding: 4px; color: var(--muted2); opacity: .5; flex: none; }
.msg-report:hover, .msg-report:active { opacity: 1; color: var(--orange); }
.attend-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; margin-top: 6px; }
.attend-card .at-row { display: flex; gap: 9px; margin-top: 9px; }
.attend-card .at-row > div { flex: 1; text-align: center; font-weight: 700; font-size: 13.5px; padding: 10px; border-radius: 11px; cursor: pointer; }
.attend-card .yes { background: #e3f6ee; color: var(--ok); }
.attend-card .no { background: #f3efe9; color: var(--muted); }
.chat-foot { padding: 10px 14px calc(var(--sab) + 14px); background: #fff; border-top: 1px solid var(--line); flex: none; }
.ice-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-tint); color: var(--accent); font-weight: 700; font-size: 12.5px; padding: 7px 12px; border-radius: 99px; cursor: pointer; margin-bottom: 10px; }
.chat-input-bar { display: flex; gap: 9px; align-items: center; }
.chat-input-bar input { flex: 1; background: #f3efe9; border: none; border-radius: 99px; padding: 13px 16px; font-size: 14.5px; }
.send-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; font-size: 18px; border: none; }

/* chats list */
.chat-item { display: flex; gap: 13px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 17px; padding: 13px 14px; cursor: pointer; }
.chat-item .emoji { width: 50px; height: 50px; border-radius: 15px; background: var(--brand-tint); display: grid; place-items: center; font-size: 23px; flex: none; }
.chat-item .ci-body { flex: 1; min-width: 0; }
.chat-item .ci-t { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.chat-item .ci-l { font-size: 13px; color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item .ci-n { font-size: 11.5px; color: #b3ada3; font-weight: 600; flex: none; }

/* ============================================================= NO MATCH */
.nm-rings { position: relative; width: 130px; height: 130px; display: grid; place-items: center; margin-bottom: 26px; }
.nm-rings .r { position: absolute; border-radius: 50%; border: 1.5px dashed #d8d1c6; }
.nm-rings .r1 { width: 130px; height: 130px; }
.nm-rings .r2 { width: 84px; height: 84px; border-color: #e2dcd2; }
.nm-rings .moon { width: 46px; height: 46px; border-radius: 50%; background: #f1ece4; display: grid; place-items: center; font-size: 24px; }

/* ============================================================= TAB BAR */
.tabbar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 20;
  height: calc(64px + var(--sab)); padding-bottom: var(--sab);
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(251,247,242,.93); backdrop-filter: blur(16px); border-top: 1px solid #eee7df;
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; color: #bdb6ab; font-weight: 700; font-size: 10.5px; background: none; border: none; }
.tab.on { color: var(--accent); }

/* ============================================================= GATE SHEET */
.sheet-backdrop { position: absolute; inset: 0; background: rgba(20,16,25,.55); backdrop-filter: blur(4px); display: flex; align-items: flex-end; z-index: 50; animation: fadeIn .25s both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.sheet { background: var(--paper); width: 100%; border-radius: 28px 28px 0 0; padding: 26px 24px calc(var(--sab) + 32px); animation: sheetUp .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sheetUp { from { transform: translateY(30px); } to { transform: none; } }
.sheet-handle { width: 44px; height: 5px; border-radius: 99px; background: #e2dcd2; margin: 0 auto 18px; }
.danger-link { color: var(--orange); font-weight: 700; font-size: 13.5px; background: none; border: none; cursor: pointer; }

/* feedback stars */
.stars { display: flex; justify-content: center; gap: 8px; margin-bottom: 6px; }
.star { background: none; border: none; cursor: pointer; font-size: 38px; line-height: 1; color: #e2dcd2; transition: color .12s, transform .1s; padding: 2px 4px; }
.star.on { color: #ffb020; }
.star:active { transform: scale(.9); }

/* ============================================================= MISC */
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.photo { position: relative; aspect-ratio: 1; border-radius: 15px; background-size: cover; background-position: center; background-color: var(--brand-tint); border: 1px solid var(--line); }
.photo.add { display: grid; place-items: center; font-size: 26px; color: #c4bdb1; cursor: pointer; background: var(--paper); border: 1.5px dashed #d8d1c6; }
.photo-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.field-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; }
.field-card .fk { font-size: 11px; color: var(--muted2); font-weight: 600; margin-bottom: 2px; }
.banner { font-size: 12.5px; padding: 9px 13px; border-radius: 12px; display: flex; gap: 8px; align-items: center; }
.banner.ok { background: #e7f6ef; color: #0f6e56; }
.banner.warn { background: #fff5ec; color: #92500c; border: 1px solid #ffe2c9; }
.secure { display: flex; align-items: center; gap: 7px; justify-content: center; margin-top: 16px; color: #a39d92; font-size: 12px; }
.spin { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.codeboxes { display: flex; gap: 8px; justify-content: center; }
.codebox { width: 44px; height: 52px; border-radius: 13px; border: 1.5px solid var(--line); background: #fff; display: grid; place-items: center; font: 800 22px var(--font-display); color: var(--text); }
.codebox.on { border-color: var(--accent); }

/* toast */
.toast { position: absolute; bottom: calc(var(--sab) + 96px); left: 50%; transform: translate(-50%, 14px); background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; padding: 12px 18px; border-radius: 14px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 86%; text-align: center; z-index: 60; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================= DISCOVER (redesign of "Find a plan") */
.disc-screen { color: #fff; }
.disc-field { flex: 1; position: relative; overflow: hidden; }
.disc-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(125% 90% at 50% 28%, #3d2350 0%, #241733 44%, #150e1f 100%); }
.disc-aurora .ab1, .disc-aurora .ab2, .disc-aurora .ab3 { position: absolute; border-radius: 50%; filter: blur(14px); animation: dvAuroraBreathe 5.5s ease-in-out infinite; }
.disc-aurora .ab1 { top: 24%; left: 52%; width: 540px; height: 540px; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(255,106,61,.52), transparent 62%); }
.disc-aurora .ab2 { top: 68%; left: 22%; width: 360px; height: 360px; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(255,61,119,.42), transparent 62%); animation-duration: 6.5s; animation-delay: 1s; }
.disc-aurora .ab3 { top: 56%; left: 88%; width: 300px; height: 300px; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(150,90,255,.4), transparent 64%); animation-duration: 7s; animation-delay: .5s; }
.disc-aurora .vign { position: absolute; inset: 0; background: radial-gradient(135% 105% at 50% 42%, transparent 56%, rgba(10,6,15,.5) 100%); }
.disc-aurora.cp .ab1 { top: 6%; left: 50%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,106,61,.4), transparent 62%); }
@keyframes dvAuroraBreathe { 0%, 100% { opacity: .82; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.07); } }

.disc-head { position: absolute; top: calc(var(--sat) + 8px); left: 22px; right: 22px; z-index: 16; }
.disc-toprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.disc-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); padding: 5px 11px; border-radius: 99px; border: 1px solid rgba(255,255,255,.14); white-space: nowrap; }
.disc-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; animation: blink 1.2s infinite; }
.disc-seg { width: auto; padding: 3px; background: rgba(255,255,255,.1); }
.disc-seg button { color: rgba(255,255,255,.6); padding: 6px 12px; font-size: 11.5px; }
.disc-seg button.on { background: #fff; color: #141019; }
.disc-h1 { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -.02em; margin-top: 12px; color: #fff; }
.disc-crowd { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.disc-crowd-avs { display: flex; align-items: center; }
.disc-crowd-avs span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #17121e; display: grid; place-items: center; margin-left: -9px; }
.disc-crowd-avs span:first-child { margin-left: 0; }
.disc-crowd-avs.sm span { width: 22px; height: 22px; border: 2px solid #1e1626; }
.disc-crowd-more { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.14); border: 2px solid #17121e; margin-left: -9px; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; color: #fff; }
.disc-crowd-txt { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.66); }

.disc-pin { position: absolute; transform: translate(-50%,-50%); z-index: 11; cursor: pointer; transition: opacity .4s; }
.disc-pin-float { animation: dvFloatB 3.6s ease-in-out infinite; }
@keyframes dvFloatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.disc-pin-bubble { position: relative; border-radius: 50%; background: rgba(255,255,255,.13); backdrop-filter: blur(9px); border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center; box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); }
.disc-pin-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2.5px solid var(--accent); opacity: 0; transition: opacity .2s; }
.disc-pin.on .disc-pin-ring { opacity: 1; }
.disc-pin-badge { position: absolute; top: -4px; right: -4px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; border: 2px solid #17121e; padding: 0 3px; }

/* Center pulse — self-contained (not reusing the people-mode home button) so the sonar rings
   expand well past the button rim, matching the design's dvSonar (scale .34 -> ~1.5, fade out). */
.disc-pulse-stage { position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; display: grid; place-items: center; z-index: 12; }
.disc-glow { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,106,61,.6), transparent 70%); animation: dvGlow 3.8s ease-in-out infinite; pointer-events: none; }
.disc-ping { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; transform: translate(-50%,-50%) scale(.34); animation: dvSonar 3.4s ease-out infinite; pointer-events: none; }
.disc-ping:nth-of-type(2) { animation-delay: 1.13s; }
.disc-ping:nth-of-type(3) { animation-delay: 2.26s; }
@keyframes dvSonar { 0% { opacity: .72; transform: translate(-50%,-50%) scale(.34); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(calc(1.2 + var(--radius-t,.5) * .6)); } }
@keyframes dvGlow { 0%, 100% { opacity: .4; } 50% { opacity: .78; } }
.disc-pulse-btn { position: relative; z-index: 2; width: 150px; height: 150px; border-radius: 50%; border: none; cursor: pointer; background: radial-gradient(circle at 50% 38%, var(--accent2), var(--accent)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 26px 54px -16px var(--accent); animation: dvBtnBreathe 3.8s ease-in-out infinite; }
.disc-pulse-btn:active { animation: none; transform: scale(.955); }
@keyframes dvBtnBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.disc-pulse-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; margin-top: 4px; text-align: center; line-height: 1.05; }
.disc-pulse-sub { font-size: 10px; opacity: .9; font-weight: 600; margin-top: 3px; }
.disc-pulse-btn.loading .disc-pulse-sub { opacity: 1; }

.disc-empty { position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); z-index: 19; width: 262px; }
.disc-empty-card { background: rgba(31,21,41,.86); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.16); border-radius: 22px; padding: 20px 18px; text-align: center; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); animation: fadeIn .3s both; }
.disc-empty-ico { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; margin: 0 auto 12px; }
.disc-empty-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; }
.disc-empty-sub { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 5px; line-height: 1.5; }
.disc-empty-acts { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.disc-empty-acts .btn { box-shadow: 0 14px 30px -16px var(--accent); }
.disc-empty-acts .btn.outline.dark { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.18); }

/* bottom offset clears the tab bar, which is position:absolute (overlaid, not in flex flow) and
   would otherwise sit on top of (and intercept taps on) this card/cluster's lower portion */
.disc-card, .disc-cluster { position: absolute; left: 16px; right: 16px; bottom: calc(64px + var(--sab) + 14px); z-index: 16; animation: fadeIn .25s both; }
.disc-card { background: rgba(30,22,38,.82); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.16); border-radius: 22px; padding: 15px 16px 16px; box-shadow: 0 -20px 50px -26px rgba(0,0,0,.7); }
.disc-card-head { display: flex; gap: 13px; align-items: flex-start; }
.disc-card-emoji { width: 52px; height: 52px; flex: none; border-radius: 15px; background: rgba(255,106,61,.18); display: grid; place-items: center; font-size: 26px; }
.disc-card-why { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.7); background: rgba(255,255,255,.05); border-radius: 12px; padding: 9px 11px; margin-top: 12px; }
.disc-card-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #fff; }
.disc-card-sub { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 2px; }
.disc-card-close { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: grid; place-items: center; }
.disc-card-close:active { transform: scale(.92); }
.disc-card-going { display: flex; align-items: center; gap: 10px; margin: 13px 0 12px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.72); }
.disc-card-going b { color: var(--accent2b); font-weight: 800; }
.disc-save { width: 50px; flex: none; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: grid; place-items: center; }
.disc-save:active { transform: scale(.96); }
.disc-save.on { color: var(--accent2); border-color: var(--accent2); background: rgba(255,61,119,.14); }
.disc-save.on svg { fill: var(--accent2); }

.disc-cluster { display: flex; flex-direction: column; gap: 10px; }
.disc-panel { background: rgba(255,255,255,.09); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 13px 15px; }
/* chips scroll horizontally within the panel; the right-edge mask fades the overflow so extra
   categories read as "more to scroll", never as chips clipped mid-word by the panel border */
.disc-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, #000 88%, transparent 100%); }
.disc-chips::-webkit-scrollbar { height: 0; }
.disc-chip { flex: none; white-space: nowrap; padding: 7px 13px; border-radius: 99px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); font-family: var(--font-body); font-weight: 700; font-size: 12.5px; cursor: pointer; transition: all .18s; }
.disc-chip.on { border-color: #fff; background: #fff; color: #141019; }
.disc-radius-row { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 3px 10px; }
.disc-radius-row span:first-child { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: rgba(255,255,255,.5); }
.disc-radius-val { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--accent2b); }
.disc-feedbar { background: rgba(255,255,255,.10); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.disc-feedbar > div:first-child { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13.5px; color: #fff; }
.disc-feedbar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; animation: blink 1.2s infinite; }
.disc-feed-swipe { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.55); }

/* dark/glow radius slider used on the Discover screen (native input, styled to match the design's
   custom track). --fill (0–100%, set from the value in JS) fills ONLY up to the knob; the rest of
   the track stays empty. Firefox uses ::-moz-range-progress which fills natively. */
input.range-dark { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 99px; background: transparent; outline: none; margin: 0; }
input.range-dark::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--accent2), var(--accent)) 0 / var(--fill, 50%) 100% no-repeat, rgba(255,255,255,.14); }
input.range-dark::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px -3px rgba(0,0,0,.6), 0 0 0 5px rgba(255,106,61,.28); cursor: pointer; }
input.range-dark::-moz-range-track { height: 10px; border-radius: 99px; background: rgba(255,255,255,.14); }
input.range-dark::-moz-range-progress { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
input.range-dark::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 4px 14px -3px rgba(0,0,0,.6), 0 0 0 5px rgba(255,106,61,.28); cursor: pointer; }

/* dark tab bar (discover + create screens) */
.tabbar.dark { background: rgba(20,16,25,.92); border-top: 1px solid rgba(255,255,255,.08); }
.tabbar.dark .tab { color: rgba(255,255,255,.4); }
.tabbar.dark .tab.on { color: var(--accent); }
.create-tab { width: 52px; height: 52px; margin-top: -12px; border-radius: 50%; border: none; background: radial-gradient(circle at 50% 38%, var(--accent2), var(--accent)); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 14px 30px -12px var(--accent); }
.create-tab:active { transform: scale(.94); }

/* ============================================================= CREATE-A-PLAN */
.cp-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--sat) + 10px) 20px 0; flex: none; }
.cp-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: grid; place-items: center; }
.cp-x:active { transform: scale(.94); }
.cp-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; }
.cp-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 9px; }
.cp-input-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 15px; }
.cp-input-row input { flex: 1; background: none; border: none; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 17px; outline: none; }
.cp-input-row input::placeholder { color: rgba(255,255,255,.35); font-weight: 600; font-size: 14.5px; }
.cp-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.cp-when { display: flex; gap: 7px; }
.cp-when-btn { flex: 1; padding: 12px 0; border-radius: 13px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); font-family: var(--font-body); font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .18s; }
.cp-when-btn.on { border-color: #fff; background: #fff; color: #141019; }
.disc-tile { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 15px; padding: 13px 14px; }
.disc-tile-ico { width: 36px; height: 36px; border-radius: 11px; background: rgba(255,106,61,.16); display: grid; place-items: center; color: var(--accent); }
.disc-tile-title { font-weight: 700; font-size: 13.5px; color: #fff; }
.disc-tile-sub { font-size: 11.5px; color: rgba(255,255,255,.55); }
.cp-size-val { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--accent2b); }
.cp-stepper { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.cp-step { width: 44px; height: 44px; flex: none; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; font-size: 23px; cursor: pointer; line-height: 1; }
.cp-step:active { transform: scale(.94); }
.cp-dots { flex: 1; display: flex; gap: 5px; }
.cp-dot { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.14); }
.cp-dot.on { background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.cp-postbar { flex: none; padding: 12px 20px calc(12px + var(--sab)); background: rgba(20,16,25,.92); backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,.08); position: relative; z-index: 3; }
.cp-postbar .btn { display: flex; align-items: center; justify-content: center; gap: 9px; }
.cp-postbar .btn[disabled] { opacity: .45; }
.cp-post-dot { display: inline-flex; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.3); animation: blink 1.4s infinite; }

/* ============================================================= AURORA SECONDARY SCREENS (10a/10b/11a/11b) */
.disc-list-field { display: flex; flex-direction: column; }
.disc-aurora.list { background: radial-gradient(125% 80% at 50% 8%, #331f42 0%, #1e1428 44%, #130e1a 100%); }
.disc-aurora.list .ab1 { top: 4%; left: 30%; width: 340px; height: 340px; background: radial-gradient(circle, rgba(255,106,61,.3), transparent 62%); }
.disc-aurora.list .ab2 { top: 16%; left: 88%; width: 260px; height: 260px; background: radial-gradient(circle, rgba(255,61,119,.24), transparent 62%); }
.disc-aurora.list .ab3 { top: 12%; left: 14%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(150,90,255,.22), transparent 62%); }
.disc-scroll { position: absolute; inset: 0; overflow-y: auto; z-index: 6; scrollbar-width: none; }
.disc-scroll::-webkit-scrollbar { width: 0; }
.disc-sticky-head { position: sticky; top: 0; z-index: 20; padding: calc(var(--sat) + 12px) 20px 13px; background: rgba(19,14,25,.66); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.disc-sticky-head.col { display: block; }
.disc-back { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; color: rgba(255,255,255,.6); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; }
.disc-head-btn { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: #fff; cursor: pointer; display: grid; place-items: center; }
.disc-head-btn:active { transform: scale(.94); }
.disc-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 4px 2px 11px; }
.disc-list-body { padding: 16px 16px 0; }
.disc-empty-inline { text-align: center; padding: 60px 20px; }
.disc-empty-inline .disc-empty-ico { margin: 0 auto 14px; color: rgba(255,255,255,.6); }
.disc-empty-inline .disc-empty-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #fff; }
.disc-empty-inline .disc-empty-sub { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 6px; }

/* --- Chats list (11a) --- */
.ch-rows { display: flex; flex-direction: column; gap: 9px; }
.ch-row { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 12px 14px; cursor: pointer; transition: background .15s; }
.ch-row:active { background: rgba(255,255,255,.1); }
.ch-emoji { width: 46px; height: 46px; flex: none; border-radius: 14px; background: rgba(255,106,61,.16); display: grid; place-items: center; font-size: 22px; position: relative; }
.ch-online { position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ok); border: 2px solid #17121e; }
.ch-body { flex: 1; min-width: 0; }
.ch-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ch-name { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #fff; }
.ch-time { font-size: 11px; color: rgba(255,255,255,.4); flex: none; }
.ch-bottom { margin-top: 3px; }
.ch-last { font-size: 12.5px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ch-foot-note { text-align: center; font-size: 11.5px; color: rgba(255,255,255,.32); margin-top: 22px; line-height: 1.5; }

/* --- Plans for tonight (10b) --- */
.pp-subrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pp-curated { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 99px; padding: 6px 13px; font-size: 12px; font-weight: 700; color: #fff; }
.pp-curated::before { content: ""; width: 12px; height: 12px; background: var(--accent2b); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pp-forgroup { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.5); }
.pp-cards { display: flex; flex-direction: column; gap: 14px; }
.pp-card { background: rgba(255,255,255,.07); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 15px 16px 16px; box-shadow: 0 24px 50px -34px rgba(0,0,0,.7); cursor: pointer; }
.pp-card:active { transform: scale(.995); }
.pp-head { display: flex; align-items: flex-start; gap: 12px; }
.pp-emoji { width: 48px; height: 48px; flex: none; border-radius: 14px; background: rgba(255,106,61,.16); display: grid; place-items: center; font-size: 24px; }
.pp-main { flex: 1; min-width: 0; }
.pp-title { font-family: var(--font-display); font-weight: 800; font-size: 16.5px; color: #fff; line-height: 1.2; }
.pp-meta { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 3px; }
.pp-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.pp-price { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: var(--accent2b); white-space: nowrap; }
.pp-match { font-size: 10.5px; font-weight: 800; color: #3fd28b; background: rgba(63,210,139,.14); border: 1px solid rgba(63,210,139,.3); border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pp-tag { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); border-radius: 99px; padding: 4px 10px; }
.pp-why { display: flex; align-items: flex-start; gap: 8px; margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.09); font-size: 12.5px; font-style: italic; color: rgba(255,255,255,.62); line-height: 1.5; }
.pp-why-star { color: var(--accent2b); font-style: normal; flex: none; }
.pp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }
.pp-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pp-avs { display: flex; }
.pp-av { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #1a1422; margin-left: -8px; }
.pp-av:first-child { margin-left: 0; }
.pp-who-lbl { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.6); white-space: nowrap; }
.pp-actions { display: flex; gap: 8px; flex: none; }
.pp-save { width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: grid; place-items: center; }
.pp-save:active { transform: scale(.94); }
.pp-save.on { color: var(--accent2); border-color: var(--accent2); background: rgba(255,61,119,.14); }
.pp-save.on svg { fill: var(--accent2); }
.pp-start { border: none; border-radius: 12px; padding: 0 18px; background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; box-shadow: 0 14px 28px -16px var(--accent); }
.pp-start:active { transform: scale(.97); }
.pp-recurate { position: absolute; left: 16px; right: 16px; bottom: calc(66px + var(--sab) + 12px); z-index: 20; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 14px; background: rgba(30,22,38,.86); backdrop-filter: blur(16px); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 -14px 40px -28px rgba(0,0,0,.8); }
.pp-recurate:active { transform: scale(.99); }
.pp-recurate-ic.spin { animation: rot .8s linear infinite; }

/* --- Group thread (11b) --- */
.tb-head { flex: none; z-index: 20; padding: calc(var(--sat) + 8px) 14px 12px; background: rgba(19,14,25,.82); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 11px; }
.tb-head-btn { width: 34px; height: 34px; flex: none; border-radius: 50%; border: none; background: rgba(255,255,255,.07); color: #fff; cursor: pointer; display: grid; place-items: center; }
.tb-head-btn:active { transform: scale(.94); }
.tb-head-emoji { width: 38px; height: 38px; flex: none; border-radius: 12px; background: rgba(255,106,61,.16); display: grid; place-items: center; font-size: 20px; }
.tb-head-main { flex: 1; min-width: 0; }
.tb-head-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-head-sub { font-size: 11.5px; color: rgba(255,255,255,.55); }
.tb-members { flex: none; z-index: 19; background: rgba(19,14,25,.9); border-bottom: 1px solid rgba(255,255,255,.08); padding: 10px 16px; display: flex; flex-direction: column; gap: 9px; animation: fadeIn .15s both; }
.tb-members .cm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tb-members .cm-name { font-weight: 700; font-size: 13.5px; color: #fff; }
.tb-members .cm-acts { display: flex; gap: 12px; flex: none; }
.cm-link { background: none; border: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); cursor: pointer; }
.cm-link:active, .cm-link:hover { color: var(--orange); }
.cm-link.muted { color: rgba(255,255,255,.35); cursor: default; }
.tb-members-empty { font-size: 12.5px; color: rgba(255,255,255,.45); padding: 4px 0; }
.tb-field { flex: 1; position: relative; overflow: hidden; }
.disc-aurora.thread { background: radial-gradient(120% 70% at 50% 0%, #281a36 0%, #191122 50%, #130e1a 100%); }
.disc-aurora.thread .ab1 { top: 8%; left: 50%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,106,61,.2), transparent 64%); }
.tb-log { position: absolute; inset: 0; overflow-y: auto; z-index: 6; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 11px; scrollbar-width: none; }
.tb-log::-webkit-scrollbar { width: 0; }
.tb-pinned { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.tb-pinned-ico { width: 40px; height: 40px; flex: none; border-radius: 11px; background: rgba(255,106,61,.16); display: grid; place-items: center; color: var(--accent); }
.tb-pinned-main { flex: 1; }
.tb-pinned-title { font-weight: 700; font-size: 13.5px; color: #fff; }
.tb-pinned-sub { font-size: 11.5px; color: rgba(255,255,255,.55); }
.tb-going { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--ok); flex: none; }
.tb-going .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.tb-system { align-self: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 99px; padding: 5px 13px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); text-align: center; }
.tb-row { display: flex; gap: 8px; align-items: flex-end; max-width: 84%; }
.tb-row.me { align-self: flex-end; max-width: 82%; }
.tb-av { width: 26px; height: 26px; flex: none; border-radius: 50%; }
.tb-in { min-width: 0; }
.tb-name { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.5); margin: 0 0 3px 4px; }
.tb-bubble { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.08); border-radius: 16px 16px 16px 5px; padding: 9px 13px; font-size: 13.5px; color: #fff; line-height: 1.4; word-break: break-word; }
.tb-bubble.mine { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; border-radius: 16px 16px 5px 16px; box-shadow: 0 12px 26px -16px var(--accent); }
.tb-row .msg-report { background: none; border: none; cursor: pointer; font-size: 12px; padding: 3px; color: rgba(255,255,255,.4); opacity: .55; flex: none; align-self: center; }
.tb-row .msg-report:hover, .tb-row .msg-report:active { opacity: 1; color: var(--orange); }
.tb-attend { align-self: stretch; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 13px 14px; margin-top: 4px; }
.tb-attend-q { font-weight: 700; font-size: 13px; color: #fff; }
.tb-attend-row { display: flex; gap: 9px; margin-top: 10px; }
.tb-attend-yes, .tb-attend-no { flex: 1; border: none; border-radius: 11px; padding: 10px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.tb-attend-yes { background: rgba(31,184,119,.2); color: #4fe0a0; }
.tb-attend-no { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
.tb-composer { flex: none; z-index: 20; background: rgba(20,16,25,.92); backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,.08); padding: 10px 12px calc(10px + var(--sab)); }
.tb-quicks { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 9px; scrollbar-width: none; }
.tb-quicks::-webkit-scrollbar { height: 0; }
.tb-quick { flex: none; padding: 7px 13px; border-radius: 99px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: #fff; font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.tb-quick:active { transform: scale(.96); }
.tb-quick.ice { color: var(--accent2b); }
.tb-input-row { display: flex; align-items: center; gap: 9px; }
.tb-input-row input { flex: 1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 99px; padding: 12px 16px; font: inherit; font-size: 13.5px; color: #fff; }
.tb-input-row input::placeholder { color: rgba(255,255,255,.42); }
.tb-send { width: 44px; height: 44px; flex: none; border-radius: 50%; border: none; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 12px 26px -14px var(--accent); }
.tb-send:active { transform: scale(.92); }

/* --- Profile editor (10a) --- */
.p10-head { display: block; padding-bottom: 12px; }
.p10-head-row { display: flex; align-items: center; justify-content: space-between; }
.p10-head-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; }
.p10-strength { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.p10-strength-track { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.p10-strength-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent2), var(--accent)); box-shadow: 0 0 10px -1px var(--accent); transition: width .45s cubic-bezier(.3,.7,.2,1); }
.p10-strength-lbl { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: #fff; white-space: nowrap; }
.p10-body { padding: 18px 18px 40px; }
.p10-sec-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.p10-sec-lbl span { color: rgba(255,255,255,.32); font-weight: 700; text-transform: none; letter-spacing: 0; }
.p10-photos { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-top: 11px; }
.p10-photo { aspect-ratio: 1; border-radius: 16px; position: relative; background-size: cover; background-position: center; }
.p10-photo.add { border: 1.5px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.04); color: rgba(255,255,255,.5); display: grid; place-items: center; cursor: pointer; }
.p10-photo.add:active { transform: scale(.95); }
.p10-photo.filled { box-shadow: 0 12px 26px -14px rgba(255,61,119,.6); }
.p10-photo-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.p10-row2 { display: grid; grid-template-columns: 1fr 118px; gap: 10px; margin-top: 16px; }
.p10-input { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 15px; padding: 11px 14px; }
.p10-fk { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.p10-input input { width: 100%; background: none; border: none; outline: none; color: #fff; font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-top: 3px; padding: 0; }
.p10-input input::placeholder { color: rgba(255,255,255,.35); font-weight: 500; }
.p10-h { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; margin: 24px 2px 11px; display: flex; align-items: baseline; justify-content: space-between; }
.p10-opt { font-size: 12px; color: rgba(255,255,255,.4); font-family: var(--font-body); font-weight: 500; }
.p10-count { font-size: 12px; font-weight: 700; color: var(--accent2b); font-family: var(--font-body); }
.p10-note { font-size: 11.5px; color: rgba(255,255,255,.36); margin-top: 9px; line-height: 1.5; }
.p10-divider { height: 1px; background: rgba(255,255,255,.1); margin: 24px 0; }
.p10-frgroup { margin-top: 14px; }
.p10-friends-btn { width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 15px; padding: 14px; color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.p10-friends-btn:active { transform: scale(.99); }
.p10-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.p10-toggle-t { font-weight: 700; font-size: 14px; color: #fff; }
.p10-toggle-s { font-size: 11.5px; color: rgba(255,255,255,.45); margin-top: 2px; line-height: 1.4; }
.p10-save { width: 100%; margin-top: 22px; border: none; border-radius: 16px; padding: 17px; background: var(--accent); color: #fff; font: inherit; font-weight: 800; font-size: 15.5px; cursor: pointer; box-shadow: 0 18px 40px -16px var(--accent); }
.p10-save:active { transform: scale(.985); }
.p10-save[disabled] { opacity: .6; }
.p10-legal { display: flex; justify-content: center; gap: 16px; margin-top: 18px; }
.p10-legal a { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.5); text-decoration: underline; }
.p10-delete { text-align: center; margin-top: 12px; }
.p10-delete button { background: none; border: none; font: inherit; font-size: 13px; font-weight: 700; color: #ff6a6a; cursor: pointer; }
/* dark-scope overrides so reused light components render correctly on aurora */
.p10 .seg { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.p10 .seg button { color: rgba(255,255,255,.7); }
.p10 .seg button.on { background: #fff; color: #141019; box-shadow: none; }
.p10 .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.p10 .chip { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.82); }
.p10 .chip.on { border-color: var(--accent); background: rgba(255,106,61,.15); color: var(--accent2b); box-shadow: 0 0 14px -4px var(--accent); }
.p10 .chip-group > div:first-child { color: rgba(255,255,255,.4) !important; }
.p10 .switch { background: rgba(255,255,255,.18); }
.p10 .switch.on { background: var(--accent); }
.p10 input[type=text], .p10 input[type=tel] { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); color: #fff; }
.p10 input::placeholder { color: rgba(255,255,255,.35); }
.p10 .btn.small.outline { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.p10 .center-note { color: rgba(255,255,255,.36); }
.p10 .tile { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); margin-top: 16px; }
.p10 .tile.accent { background: rgba(255,106,61,.12); border-color: rgba(255,106,61,.28); }
.p10 .tile .t-title { color: #fff; }
.p10 .tile .t-sub { color: rgba(255,255,255,.45); }
.p10 .tile .ico { color: var(--accent); }
.p10 .friend-row { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.11); }
.p10 .friend-row .fr-name { color: #fff; }
.p10 .linkish { color: var(--accent2b); }

/* --- Auth / login + sign-up (aurora reskin) --- */
.disc-aurora.auth { background: radial-gradient(125% 90% at 50% 24%, #3a2350 0%, #221631 46%, #140e1e 100%); }
.disc-aurora.auth .ab1 { top: 16%; left: 50%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(255,106,61,.4), transparent 62%); }
.disc-aurora.auth .ab2 { top: 62%; left: 20%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(255,61,119,.32), transparent 62%); }
.disc-aurora.auth .ab3 { top: 58%; left: 88%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(150,90,255,.3), transparent 64%); }
.disc-aurora.auth .vign { position: absolute; inset: 0; background: radial-gradient(135% 105% at 50% 42%, transparent 54%, rgba(10,6,15,.55) 100%); }
.auth-body { padding: calc(var(--sat) + 64px) 24px calc(var(--sab) + 32px); max-width: 460px; margin: 0 auto; }
.disc-scroll.auth .brand-name { color: #fff; }
.disc-scroll.auth .sub { color: rgba(255,255,255,.6); }
.disc-scroll.auth .logo { box-shadow: 0 18px 44px -20px rgba(255,106,61,.7); }
.auth .seg { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.auth .seg button { color: rgba(255,255,255,.7); }
.auth .seg button.on { background: #fff; color: #141019; box-shadow: none; }
.auth input[type=text], .auth input[type=tel], .auth input[type=number], .auth input[type=password], .auth input[type=email] {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; }
.auth input::placeholder { color: rgba(255,255,255,.4); }
.auth input:disabled { background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); }
.auth .label { color: #fff; }
.auth .label .hint { color: rgba(255,255,255,.5); }
.auth .field { margin-top: 15px; }
.auth .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.auth .chip { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.82); }
.auth .chip.on { border-color: var(--accent); background: rgba(255,106,61,.15); color: var(--accent2b); box-shadow: 0 0 14px -4px var(--accent); }
.auth .chip-group > div:first-child { color: rgba(255,255,255,.4) !important; }
.auth .btn.ghost { color: rgba(255,255,255,.6); }
.auth .btn.small.outline { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.auth .center-note { color: rgba(255,255,255,.5); }
.auth .center-note a, .auth .sub a { color: var(--accent2b); }
.auth .secure { color: rgba(255,255,255,.45); }
.auth .err { color: #ff8a8a; }
.auth .codebox { background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.14); color: #fff; }
.auth .codebox.on { border-color: var(--accent); }

/* ---- Host-a-plan additions: add-category, pick-time, price, attendee cap ---- */
.cp-hint { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: rgba(255,255,255,.4); }
.cp-add-cat { border-style: dashed !important; color: var(--accent2b) !important; }
.cp-pick-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 12px 14px; }
.cp-pick-ico { color: var(--accent2b); display: grid; place-items: center; }
.cp-datetime { flex: 1; background: none; border: none; color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 14.5px; outline: none; color-scheme: dark; }
.cp-price-row { display: flex; align-items: center; gap: 10px; }
.cp-seg-btn { flex: none; padding: 12px 20px; border-radius: 13px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); font-family: var(--font-body); font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .18s; }
.cp-seg-btn.on { border-color: #fff; background: #fff; color: #141019; }
.cp-price-input { flex: 1; display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 13px; padding: 0 14px; }
.cp-price-input span { color: rgba(255,255,255,.6); font-weight: 800; font-family: var(--font-display); }
.cp-price-input input { flex: 1; width: 100%; background: none; border: none; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 17px; outline: none; padding: 12px 0; }
.cp-cap-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cp-check { width: 30px; height: 30px; flex: none; border-radius: 9px; border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #141019; font-size: 16px; font-weight: 900; cursor: pointer; display: grid; place-items: center; transition: all .18s; }
.cp-check.on { border-color: var(--accent); background: var(--accent); }

/* ---- Feed (friends' activity) ---- */
.feed-addfriend { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; margin-bottom: 8px; border-radius: 16px; border: 1px dashed rgba(255,255,255,.24); background: rgba(255,255,255,.05); color: var(--accent2b); font-family: var(--font-body); font-weight: 800; font-size: 14px; cursor: pointer; }
.feed-addfriend:active { transform: scale(.98); }
.feed-item { display: flex; gap: 12px; padding: 14px; margin-bottom: 10px; border-radius: 18px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); }
.feed-item.mine { border-color: rgba(255,106,61,.34); background: rgba(255,106,61,.08); }
.feed-av { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 17px; text-transform: uppercase; }
.feed-body { flex: 1; min-width: 0; }
.feed-line { font-size: 12.5px; color: rgba(255,255,255,.6); font-weight: 600; }
.feed-line b { color: #fff; font-weight: 800; }
.feed-plan { font-family: var(--font-display); font-weight: 800; font-size: 15.5px; color: #fff; margin: 2px 0 3px; }
.feed-meta { font-size: 12px; color: rgba(255,255,255,.5); font-weight: 600; }
.feed-acts { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.feed-join { padding: 8px 18px; border-radius: 11px; border: none; background: var(--accent); color: #fff; font-family: var(--font-body); font-weight: 800; font-size: 13px; cursor: pointer; }
.feed-join:active { transform: scale(.96); }
.feed-icon { width: 38px; height: 34px; flex: none; border-radius: 11px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); cursor: pointer; display: grid; place-items: center; }
.feed-icon.wide { width: auto; padding: 0 14px; font-family: var(--font-body); font-weight: 700; font-size: 13px; }
.feed-icon:active { transform: scale(.95); }
.feed-foot-note { margin: 18px 4px 4px; font-size: 12px; color: rgba(255,255,255,.42); text-align: center; line-height: 1.5; }

/* ---- Home 12a: centered live pill + swipe-up Plans sheet + Ask Orbit search ---- */
.disc-livecenter { position: absolute; top: 29%; left: 50%; transform: translateX(-50%); z-index: 15; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); padding: 5px 11px; border-radius: 99px; border: 1px solid rgba(255,255,255,.14); white-space: nowrap; }
.disc-livecenter .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; animation: blink 1.2s infinite; }

.disc-scrim { position: absolute; inset: 0; z-index: 24; background: rgba(6,4,10,.5); opacity: 0; pointer-events: none; transition: opacity .35s; }
.disc-scrim.open { opacity: 1; pointer-events: auto; }
.disc-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 88%; z-index: 25; background: rgba(24,17,32,.97); backdrop-filter: blur(22px); border-top: 1px solid rgba(255,255,255,.12); border-radius: 26px 26px 0 0; box-shadow: 0 -30px 70px -30px rgba(0,0,0,.8); transform: translateY(100%); transition: transform .46s cubic-bezier(.2,.7,.2,1); display: flex; flex-direction: column; }
.disc-sheet.open { transform: translateY(0); }
.disc-sheet-grab { flex: none; padding: 10px 0 4px; display: grid; place-items: center; cursor: pointer; }
.disc-sheet-grab span { width: 38px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.28); }
.disc-sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 12px; }
.disc-sheet-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #fff; }
.disc-sheet-sub { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; }
.disc-sheet-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: grid; place-items: center; }
.disc-sheet-close:active { transform: scale(.92); }
.disc-sheet-body { flex: 1; overflow-y: auto; padding: 2px 16px 20px; }

.ob-thinking { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0; gap: 12px; font-size: 13px; color: rgba(255,255,255,.6); }
.ob-spin { animation: dvSpin 1s linear infinite; }
@keyframes dvSpin { to { transform: rotate(360deg); } }
.ob-ai { display: none; }
.ob-ai-head { display: flex; align-items: center; gap: 7px; margin: 2px 2px 12px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.72); }
.ob-ai-star { color: var(--accent2b); font-weight: 900; }
.ob-back { width: 100%; margin-top: 14px; border: none; border-radius: 12px; padding: 11px; background: transparent; color: rgba(255,255,255,.5); font-family: var(--font-body); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.ob-empty { text-align: center; padding: 40px 0; font-size: 13px; color: rgba(255,255,255,.5); }
.ob-default { display: flex; flex-direction: column; gap: 12px; }

.ob-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 14px 15px; }
.ob-head { display: flex; align-items: flex-start; gap: 12px; }
.ob-emoji { width: 46px; height: 46px; flex: none; border-radius: 14px; background: rgba(255,106,61,.16); display: grid; place-items: center; font-size: 23px; }
.ob-main { flex: 1; min-width: 0; }
.ob-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; line-height: 1.2; }
.ob-meta { font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 3px; }
.ob-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ob-price { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--accent2b); white-space: nowrap; }
.ob-fit { font-size: 10.5px; font-weight: 800; color: #3fd28b; background: rgba(63,210,139,.14); border: 1px solid rgba(63,210,139,.3); border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.ob-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ob-tag { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); border-radius: 99px; padding: 4px 10px; }
.ob-why { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.09); font-size: 12px; font-style: italic; color: rgba(255,255,255,.62); line-height: 1.5; }
.ob-why-star { color: var(--accent2b); font-style: normal; flex: none; }
.ob-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; gap: 10px; }
.ob-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ob-avs { display: flex; }
.ob-av { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #1a1422; margin-left: -8px; }
.ob-av:first-child { margin-left: 0; }
.ob-who-lbl { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.6); }
.ob-acts { display: flex; gap: 8px; flex: none; }
.ob-save { width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: grid; place-items: center; }
.ob-save:active { transform: scale(.94); }
.ob-save.on { color: var(--accent2b); border-color: var(--accent); background: rgba(255,106,61,.16); }
.ob-save.on svg { fill: var(--accent2b); }
.ob-start { border: none; border-radius: 12px; padding: 0 18px; height: 40px; background: var(--accent); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 13.5px; cursor: pointer; box-shadow: 0 14px 28px -16px var(--accent); }
.ob-start:active { transform: scale(.97); }

.ob-ai-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.11); border-radius: 16px; padding: 13px 14px; margin-bottom: 10px; }
.ob-ai-row { display: flex; gap: 12px; align-items: flex-start; }
.ob-ai-emoji { width: 44px; height: 44px; flex: none; border-radius: 13px; background: rgba(255,106,61,.16); display: grid; place-items: center; font-size: 22px; }
.ob-ai-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #fff; }
.ob-ai-meta { font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 2px; }
.ob-ai-why { font-size: 11.5px; font-style: italic; color: var(--accent2b); margin-top: 6px; }
.ob-findppl { width: 100%; margin-top: 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 10px; background: rgba(255,255,255,.07); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 13px; cursor: pointer; }
.ob-findppl:active { transform: scale(.98); }

.disc-orbit { flex: none; padding: 11px 14px calc(12px + var(--sab)); border-top: 1px solid rgba(255,255,255,.1); }
.disc-orbit-inner { background: linear-gradient(120deg, rgba(255,106,61,.16), rgba(150,90,255,.14)); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 12px 13px; }
.disc-orbit-row { display: flex; align-items: center; gap: 10px; }
.disc-orbit-star { color: var(--accent2b); font-weight: 900; font-size: 16px; flex: none; }
.disc-orbit-input { flex: 1; min-width: 0; background: none; border: none; color: #fff; font-family: var(--font-body); font-size: 14px; outline: none; }
.disc-orbit-input::placeholder { color: rgba(255,255,255,.42); }
.disc-orbit-send { width: 34px; height: 34px; flex: none; border-radius: 10px; border: none; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 22px -12px var(--accent); }
.disc-orbit-send:active { transform: scale(.92); }
.disc-orbit-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.disc-prompt { padding: 7px 13px; border-radius: 99px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.disc-prompt:active { transform: scale(.96); }