/* =============================================================================
   Fruiti authenticated web app — premium design system
   Desktop adaptation of the mobile Discover experience
   ============================================================================= */

@import url("content-guard.css?v=2");

/* ——— Light theme tokens ——— */
:root,
html[data-appearance="light"] {
  /* Core palette */
  --bg: #eef2f8;
  --shell: #f1f4f9;
  --panel: #f7f9fc;
  --panel-elevated: #ffffff;
  --surface: #ffffff;

  --ink: #14213a;
  --ink-soft: rgba(20, 33, 58, 0.72);
  --muted: #7c879b;

  /* Sidebar — matte navy rail */
  --sidebar-top: #131c2d;
  --sidebar-bottom: #0e1623;
  --sidebar-ink: #e9eef5;
  --sidebar-muted: rgba(183, 195, 213, 0.6);
  --sidebar-line: rgba(146, 166, 194, 0.12);
  --sidebar-elevated: rgba(255, 255, 255, 0.04);
  --sidebar-glass: rgba(30, 40, 58, 0.7);
  --sidebar-glow: rgba(98, 130, 176, 0.2);

  /* Lines & accents */
  --line: rgba(20, 33, 58, 0.08);
  --line-strong: rgba(20, 33, 58, 0.13);
  --fruiti-blue: #3478f6;
  --fruiti-blue-deep: #1a3d8f;
  --fruiti-blue-soft: rgba(52, 120, 246, 0.12);
  /* DesignSystem.appPurple — Discover chrome / brand purple */
  --fruiti-purple: #9776ca;
  --fruiti-purple-deep: #7f5fb0;
  --fruiti-purple-soft: rgba(151, 118, 202, 0.18);
  --focus: #5b94f8;
  --nav-active-bg: rgba(90, 130, 184, 0.12);
  --nav-active-border: rgba(122, 152, 194, 0.28);
  --nav-active-accent: #9bb8d8;
  --nav-active-glow: 0 1px 2px rgba(6, 12, 22, 0.3);
  --nav-icon-bg: rgba(255, 255, 255, 0.03);
  --nav-icon-border: rgba(158, 178, 208, 0.08);
  --nav-icon-active-bg: rgba(110, 140, 180, 0.18);
  --nav-icon-active-border: rgba(150, 176, 210, 0.22);

  /* Status & vibe */
  --online: #22c55e;
  --recent: #f59e0b;
  --offline: #9ca3af;
  --vibe-friends: #3478f6;
  --vibe-dates: #8b6cf0;
  --vibe-fun: #ef5350;
  --vibe-none: #94a3b8;
  --danger: #dc2626;

  /* Layout — fluid fill (content uses available workspace width) */
  --frame-pad: 0px;
  --cc-w: 300px;
  --discover-max: 100%;
  --workspace-pad-y: clamp(28px, 4vh, 48px);
  --workspace-pad-x: clamp(24px, 4vw, 56px);
  --stage-gap-header: 28px;
  --stage-gap-vibe: 20px;
  --stage-gap-stories: 12px;

  /* Canonical page header typography — every workspace page title + subtext
     must use these so headings/subtext are identical size/colour/origin. */
  --page-title-size: clamp(1.75rem, 2.2vw, 2.15rem);
  --page-title-weight: 750;
  --page-title-tracking: -0.045em;
  --page-title-leading: 1;
  --page-title-color: var(--ink);
  --page-sub-size: 0.9rem;
  --page-sub-leading: 1.3;
  --page-sub-tracking: 0.01em;
  --page-sub-gap: 0.18rem;

  /* Radius — flush to viewport (no floating letterboxed card) */
  --radius-shell: 0px;
  --radius-workspace: 24px;
  --radius-control: 22px;
  --radius-card: 20px;
  --radius-nav: 13px;

  /* Shadows */
  --shadow-sm: 0 3px 10px rgba(22, 38, 68, 0.05);
  --shadow-md: 0 12px 30px rgba(22, 38, 68, 0.08);
  --shadow: var(--shadow-md);
  --shadow-soft: var(--shadow-sm);
  --cc-edge-shadow: 8px 0 24px -8px rgba(11, 23, 43, 0.35);
  --story-cutout: #ffffff;

  /* Sidebar brand icon */
  --brand-icon-size: 78px;
  --brand-icon-wrapper-size: 102px;
  --brand-icon-radius: 22%;
  --brand-icon-pad: 0px;
  --brand-icon-glow: radial-gradient(
    circle,
    rgba(122, 150, 190, 0.16) 0%,
    rgba(122, 150, 190, 0.06) 38%,
    transparent 72%
  );
  --brand-icon-glow-opacity: 0.3;
  --brand-icon-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
  --brand-icon-img-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);

  /* Typography & motion */
  --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Inter Tight", Inter, system-ui, -apple-system, sans-serif;
  --motion: 200ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-lift: 160ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ——— Dark theme tokens ——— */
html[data-appearance="dark"] {
  --bg: #070b12;
  --shell: #090e17;
  --panel: #121d30;
  --panel-elevated: #18253a;
  --surface: #1a2941;

  --ink: #eef2f8;
  --ink-soft: rgba(238, 242, 248, 0.72);
  --muted: rgba(238, 242, 248, 0.48);

  --sidebar-top: #0c1320;
  --sidebar-bottom: #080d17;
  --sidebar-ink: #e9eef5;
  --sidebar-muted: rgba(172, 186, 206, 0.58);
  --sidebar-line: rgba(140, 160, 190, 0.1);
  --sidebar-elevated: rgba(255, 255, 255, 0.035);
  --sidebar-glass: rgba(24, 32, 48, 0.74);
  --sidebar-glow: rgba(96, 126, 170, 0.2);

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.14);
  --fruiti-blue: #3478f6;
  --fruiti-blue-deep: #a8c8ff;
  --fruiti-blue-soft: rgba(52, 120, 246, 0.18);
  --fruiti-purple: #9776ca;
  --fruiti-purple-deep: #d4c0f0;
  --fruiti-purple-soft: rgba(151, 118, 202, 0.24);
  --focus: #5b94f8;
  --nav-active-bg: rgba(84, 122, 174, 0.14);
  --nav-active-border: rgba(116, 146, 188, 0.3);
  --nav-active-accent: #93b0d0;
  --nav-active-glow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --nav-icon-bg: rgba(255, 255, 255, 0.025);
  --nav-icon-border: rgba(150, 170, 200, 0.07);
  --nav-icon-active-bg: rgba(100, 132, 172, 0.2);
  --nav-icon-active-border: rgba(140, 168, 200, 0.24);

  /* Layout tokens mirrored so theme switches never drop sizing vars. */
  --frame-pad: 0px;
  --cc-w: 300px;
  --discover-max: 100%;
  --workspace-pad-y: clamp(28px, 4vh, 48px);
  --workspace-pad-x: clamp(24px, 4vw, 56px);
  --stage-gap-header: 28px;
  --stage-gap-vibe: 20px;
  --stage-gap-stories: 12px;
  --page-title-size: clamp(1.75rem, 2.2vw, 2.15rem);
  --page-title-weight: 750;
  --page-title-tracking: -0.045em;
  --page-title-leading: 1;
  --page-title-color: var(--ink);
  --page-sub-size: 0.9rem;
  --page-sub-leading: 1.3;
  --page-sub-tracking: 0.01em;
  --page-sub-gap: 0.18rem;
  --radius-shell: 0px;
  --radius-workspace: 24px;
  --radius-control: 22px;
  --radius-card: 20px;
  --radius-nav: 13px;
  --shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.42);
  --shadow: var(--shadow-md);
  --shadow-soft: var(--shadow-sm);
  --cc-edge-shadow: 10px 0 32px -6px rgba(0, 0, 0, 0.65);
  --story-cutout: #18253a;

  /* Sidebar brand icon */
  --brand-icon-size: 78px;
  --brand-icon-wrapper-size: 102px;
  --brand-icon-radius: 22%;
  --brand-icon-pad: 0px;
  --brand-icon-glow: radial-gradient(
    circle,
    rgba(116, 144, 184, 0.18) 0%,
    rgba(116, 144, 184, 0.07) 38%,
    transparent 72%
  );
  --brand-icon-glow-opacity: 0.32;
  --brand-icon-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  --brand-icon-img-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);

  --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Inter Tight", Inter, system-ui, -apple-system, sans-serif;
  --motion: 200ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-lift: 160ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ——— Reset & base ——— */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

html {
  /* Prevent content width jump when a vertical scrollbar appears/disappears. */
  scrollbar-gutter: stable;
}

html.theme-switching,
html.theme-switching * {
  transition: none !important;
}

body.page-app {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 400;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  box-shadow: var(--shadow-md);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ——— App frame & shell ——— */
.app-frame {
  height: 100%;
  padding: var(--frame-pad);
  padding-bottom: max(var(--frame-pad), env(safe-area-inset-bottom));
}

.app-shell {
  display: grid;
  grid-template-columns: var(--cc-w) minmax(0, 1fr);
  height: 100%;
  border-radius: var(--radius-shell);
  /* Do NOT use overflow:hidden here — it clips the sidebar logo under border-radius
     (especially with filtered images in WebKit). Round children instead. */
  overflow: visible;
  background: var(--shell);
  border: 0;
  box-shadow: none;
}

/* ——— Control centre (glass navy sidebar) ——— */
.control-centre {
  position: relative;
  z-index: 2;
  width: var(--cc-w);
  min-width: var(--cc-w);
  max-width: var(--cc-w);
  color: var(--sidebar-ink);
  background: linear-gradient(180deg, var(--sidebar-top) 0%, var(--sidebar-bottom) 100%);
  border-right: 1px solid var(--sidebar-line);
  box-shadow: var(--cc-edge-shadow);
  border-radius: var(--radius-shell) 0 0 var(--radius-shell);
  overflow: visible;
}

html[data-appearance="light"] .control-centre,
html[data-appearance="dark"] .control-centre {
  background: linear-gradient(180deg, var(--sidebar-top) 0%, var(--sidebar-bottom) 100%);
}

.control-centre__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 43px 30px 17px;
  gap: 11px;
  overflow: visible;
  min-height: 0;
}

.cc-brand {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: fit-content;
  height: fit-content;
  margin: 0 auto 6px;
  padding: 0;
  gap: 8px;
  text-decoration: none;
  line-height: 0;
  overflow: visible;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Diffuse ambient glow — decorative only */
.cc-brand::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -18%;
  width: 150%;
  height: 120%;
  border-radius: 48%;
  background: var(--brand-icon-glow);
  filter: blur(22px);
  opacity: var(--brand-icon-glow-opacity);
  pointer-events: none;
  transform: translateZ(0);
}

/* Animation host only — no visible plate behind the icon */
.cc-brand__frame {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transform-origin: 50% 78%;
  transform: rotate(0deg);
  will-change: transform;
  animation: cc-brand-rock 2.6s ease-in-out infinite alternate;
}

.cc-brand__logo {
  display: block;
  width: 60px;
  height: 60px;
  max-width: 60px;
  max-height: 60px;
  margin: 0;
  object-fit: contain;
  object-position: center;
  box-sizing: content-box;
  border: 3px solid rgba(158, 176, 202, 0.58);
  border-radius: var(--brand-icon-radius);
  box-shadow: var(--brand-icon-img-shadow);
  /* Never filter the asset — WebKit clips filtered imgs in rounded shells. */
  filter: none;
  -webkit-filter: none;
  transition:
    box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cc-brand__wordmark {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  line-height: 1;
  text-indent: 0.5em;
  text-transform: uppercase;
  /* Subtle rainbow-of-whites — near-white stops with faint hue shifts. */
  background-image: linear-gradient(
    100deg,
    #f4f7fc 0%,
    #f6f5fb 22%,
    #faf5fb 45%,
    #fbf5f7 68%,
    #fbf7f3 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.cc-brand:hover .cc-brand__logo,
.cc-brand:focus-visible .cc-brand__logo {
  border-color: rgba(196, 210, 230, 0.78);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.36);
}

.cc-brand:hover::before,
.cc-brand:focus-visible::before {
  opacity: calc(var(--brand-icon-glow-opacity) + 0.1);
}

.cc-brand:focus-visible .cc-brand__logo {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@keyframes cc-brand-rock {
  0% { transform: rotate(-1.6deg); }
  100% { transform: rotate(1.6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-brand__frame {
    animation: none;
    transform: none;
  }

  .cc-brand:hover .cc-brand__logo,
  .cc-brand:focus-visible .cc-brand__logo {
    transition-duration: 80ms;
  }
}

/* Profile card — glass row with status + chevron */
.cc-profile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  width: 100%;
  flex: 0 0 auto;
  min-height: 64px;
  padding: 11px 14px;
  border-radius: 18px;
  border: 1px solid var(--sidebar-line);
  background: var(--sidebar-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  box-shadow: none;
  transition:
    border-color var(--motion),
    background var(--motion),
    box-shadow var(--motion);
}

.cc-profile:hover,
.cc-profile:focus-visible {
  border-color: rgba(126, 152, 190, 0.4);
  background: rgba(46, 60, 84, 0.72);
  outline: none;
  box-shadow: none;
}

.cc-profile__avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: visible;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.cc-profile__avatar img,
.cc-profile__avatar-fallback {
  border-radius: 50%;
}

.cc-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cc-profile__avatar-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  background: #4a6289;
}

.cc-profile__status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--online);
  border: 2px solid #141d2c;
  box-shadow: none;
  z-index: 2;
}

.cc-profile__copy {
  min-width: 0;
}

.cc-profile__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.83rem;
  letter-spacing: -0.02em;
  color: var(--sidebar-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-profile__action {
  display: block;
  font-size: 0.65rem;
  color: var(--sidebar-muted);
  margin-top: 0.12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-profile__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(170, 196, 230, 0.55);
  flex-shrink: 0;
}

.cc-profile__chevron svg {
  width: 14px;
  height: 14px;
}

/* Navigation — compact primary rows (Discover / Notifications) */
.cc-nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 4px 0;
}

/* Settings docked under Fruiti+ rail (not in primary Discover/Notifications stack) */
.cc-nav--dock {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  padding: 2px 0 0;
  margin-top: 2px;
}

.cc-nav__item {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  margin: 0;
  min-height: 44px;
  max-height: 56px;
  padding: 0 10px 0 8px;
  border-radius: 12px;
  color: rgba(186, 200, 220, 0.72);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.012em;
  line-height: 1.2;
  border: 1px solid transparent;
  transition:
    color var(--motion),
    background var(--motion),
    border-color var(--motion),
    box-shadow var(--motion);
}

button.cc-nav__item {
  width: 100%;
  margin: 0;
  background: transparent;
  /* font-family only — the `font` shorthand would reset the .cc-nav__item font-size. */
  font-family: var(--font-display);
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.cc-nav__label {
  min-width: 0;
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-nav__item:hover,
.cc-nav__item:focus-visible {
  color: rgba(236, 242, 250, 0.96);
  background: rgba(255, 255, 255, 0.035);
  outline: none;
  box-shadow: none;
}

.cc-nav__item:hover .cc-nav__icon,
.cc-nav__item:focus-visible .cc-nav__icon {
  color: rgba(228, 236, 248, 0.94);
  border-color: rgba(168, 188, 216, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

.cc-nav__item.is-active {
  color: rgba(244, 248, 252, 0.98);
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  font-weight: 600;
  letter-spacing: 0.008em;
  padding-right: 22px;
  box-shadow: var(--nav-active-glow);
}

.cc-nav__count {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(92, 128, 178, 0.28);
  color: #dbe4f2;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  box-shadow: none;
  justify-self: end;
}

.cc-nav__active-dot {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
}

.cc-nav__item.is-active .cc-nav__active-dot {
  opacity: 1;
  background: var(--nav-active-accent);
  box-shadow: none;
}

.cc-nav__item.is-active .cc-nav__count {
  margin-right: 12px;
}

/* Nav icons — whisper wells; glyph carries the weight, not the plate */
.cc-nav__icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  color: rgba(198, 212, 232, 0.78);
  border: 1px solid var(--nav-icon-border);
  border-radius: 10px;
  background: var(--nav-icon-bg);
  box-shadow: none;
  transition:
    color var(--motion),
    background var(--motion),
    border-color var(--motion);
}
.cc-nav__icon svg {
  width: 17px;
  height: 17px;
  display: block;
  stroke-width: 1.5;
}
.cc-nav__item.is-active .cc-nav__icon {
  color: #e8eef8;
  border-color: var(--nav-icon-active-border);
  background: var(--nav-icon-active-bg);
  box-shadow: none;
}

/* Fruiti+ upsell — status chip bleeds into rainbow border card */
.cc-plus-stack {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  padding-top: 10px;
}

.cc-plus-status {
  position: absolute;
  top: -2px;
  left: 14px;
  z-index: 1;
  max-width: calc(100% - 24px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 4px;
  border: 1px solid rgba(192, 198, 208, 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, #2a3038 0%, #1a1e26 100%);
  box-shadow:
    0 2px 5px rgba(4, 7, 12, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #d8dde6;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  user-select: none;
}

.cc-plus-status::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c5ccd6;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  content: "";
  flex: 0 0 auto;
}

.cc-plus-stack.is-subscribed .cc-plus-status {
  border-color: rgba(96, 165, 250, 0.72);
  color: #e8f0ff;
}

.cc-plus-stack.is-subscribed .cc-plus-status::before {
  background: #60a5fa;
}

.cc-plus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(14, 16, 22, 0.92), rgba(10, 12, 18, 0.94)) padding-box,
    linear-gradient(
      110deg,
      #b6a6e6 0%,
      #7eb4f2 18%,
      #6ecfbf 36%,
      #e4c872 54%,
      #eca898 72%,
      #d4a4da 88%,
      #b6a6e6 100%
    ) border-box;
  background-size: 100% 100%, 280% 100%;
  background-position: 0 0, 0% 50%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  transition: box-shadow var(--motion), transform var(--motion);
  animation: cc-plus-rainbow 9s linear infinite;
}
@keyframes cc-plus-rainbow {
  to { background-position: 0 0, 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-plus { animation: none; }
}
.cc-plus:hover,
.cc-plus:focus-visible {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
  outline: none;
  transform: translateY(-1px);
}
.cc-plus__icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: #c9b8f0;
  flex-shrink: 0;
}
.cc-plus__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cc-plus__copy {
  min-width: 0;
}
.cc-plus__title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  background-image: linear-gradient(
    100deg,
    #c9b8f0 0%,
    #8fc0f6 18%,
    #7ad6c8 36%,
    #eed287 54%,
    #f0b4a6 72%,
    #dfb4e4 88%,
    #c9b8f0 100%
  );
  background-size: 240% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: cc-plus-offer-shift 7.5s ease-in-out infinite;
}

/* Subscribed expiry countdown — large gradient figure + soft unit */
.cc-plus__title.is-countdown {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.28rem 0.4rem;
  background-image: none;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: inherit;
  -webkit-text-fill-color: inherit;
  font-weight: 650;
  letter-spacing: 0;
  animation: none;
  line-height: 1;
}

.cc-plus__count-num {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 1;
  background-image: linear-gradient(
    105deg,
    #9ec5ff 0%,
    #7ad6c8 28%,
    #eed287 55%,
    #c9b8f0 78%,
    #9ec5ff 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(126, 180, 242, 0.28));
  animation: cc-plus-count-shimmer 6.5s ease-in-out infinite;
}

.cc-plus__count-unit {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: rgba(198, 214, 240, 0.72);
  -webkit-text-fill-color: rgba(198, 214, 240, 0.72);
  line-height: 1.1;
}

@keyframes cc-plus-count-shimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-plus__count-num {
    animation: none;
  }
}

.cc-plus.is-subscribed {
  min-height: 54px;
  padding-top: 11px;
  padding-bottom: 11px;
}
@keyframes cc-plus-offer-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-plus__title { animation: none; }
}
.cc-plus__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(10, 12, 18, 0.95), rgba(8, 10, 16, 0.98)) padding-box,
    linear-gradient(
      110deg,
      #b6a6e6 0%,
      #7eb4f2 18%,
      #6ecfbf 36%,
      #e4c872 54%,
      #eca898 72%,
      #d4a4da 88%,
      #b6a6e6 100%
    ) border-box;
  color: #f4f0ff;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.cc-plus.is-subscribed .cc-plus__cta {
  color: #e9ddff;
}

/* In-app sun/moon appearance toggle */
.cc-theme {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 1px;
}
.cc-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3.6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(140, 162, 192, 0.14);
  box-shadow: none;
}
.cc-theme-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(240, 244, 250, 0.45);
  cursor: pointer;
  transition: background var(--motion), color var(--motion), box-shadow var(--motion);
}
.cc-theme-toggle__btn svg {
  width: 15.6px;
  height: 15.6px;
  display: block;
}
.cc-theme-toggle__btn.is-selected {
  background: rgba(88, 122, 172, 0.85);
  color: #f2f6fb;
  box-shadow: none;
}
.cc-theme-toggle__btn:focus-visible {
  outline: 2px solid rgba(91, 148, 248, 0.55);
  outline-offset: 2px;
}

/* Footer */
.cc-footer {
  flex: 0 0 auto;
  padding-top: 10px;
  border-top: 1px solid var(--sidebar-line);
  text-align: center;
}
.cc-footer__nav {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 0.65rem;
}
.cc-footer__nav a {
  position: relative;
  color: var(--sidebar-muted);
  text-decoration: none;
  transition: color var(--motion);
}
.cc-footer__nav a + a::before {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: rgba(130, 156, 194, 0.6);
  box-shadow: none;
}
.cc-footer__nav a:hover,
.cc-footer__nav a:focus-visible {
  color: #c3d2e6;
  outline: none;
}
.cc-footer__copy {
  margin: 6px 0 0;
  font-size: 0.6rem;
  color: rgba(240, 244, 250, 0.42);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

/* Mobile drawer controls */
.cc-menu-btn {
  display: none;
  position: fixed;
  top: calc(var(--frame-pad) + 10px);
  left: calc(var(--frame-pad) + 10px);
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-nav);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.cc-menu-btn span,
.cc-menu-btn span::before,
.cc-menu-btn span::after {
  display: block;
  width: 16px;
  height: 2px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 2px;
  position: relative;
}

.cc-menu-btn span::before,
.cc-menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
}

.cc-menu-btn span::before { top: -5px; }
.cc-menu-btn span::after { top: 5px; }

.cc-backdrop {
  display: none;
}

/* ——— Workspace (soft off-white / desaturated navy plane) ——— */
.app-workspace {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: var(--workspace-pad-y) var(--workspace-pad-x);
  border-radius: 0;
  isolation: isolate;
  background-color: #f6f5f2;
  background-image: url("/assets/app/workspace-texture-light.png");
  background-repeat: repeat;
  background-size: 320px 320px;
  background-position: 0 0;
}

/* Soft atmospheric wash over the paper grain — keeps texture readable */
.app-workspace::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(90% 55% at 12% -8%, rgba(54, 126, 255, 0.09), transparent 55%),
    radial-gradient(70% 45% at 92% 8%, rgba(52, 120, 246, 0.06), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 30%);
  opacity: 1;
}

.app-workspace > * {
  position: relative;
  z-index: 1;
}

/* Me profile fills the whole right-hand workspace — no inset paper card. */
.app-workspace.is-me-flush {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-workspace.is-me-flush::after {
  opacity: 0.55;
}

.app-workspace.is-me-flush > .page-me {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

html[data-appearance="light"] .app-workspace {
  background-color: #f6f5f2;
  background-image: url("/assets/app/workspace-texture-light.png");
}

html[data-appearance="light"] .app-workspace::after {
  background:
    radial-gradient(85% 50% at 8% -6%, rgba(54, 126, 255, 0.07), transparent 52%),
    radial-gradient(65% 40% at 96% 4%, rgba(52, 120, 246, 0.05), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 28%);
}

html[data-appearance="dark"] .app-workspace {
  background-color: #101620;
  background-image: url("/assets/app/workspace-texture-dark.png");
  background-repeat: repeat;
  background-size: 320px 320px;
}

html[data-appearance="dark"] .app-workspace::after {
  background:
    radial-gradient(90% 55% at 12% -8%, rgba(54, 126, 255, 0.12), transparent 55%),
    radial-gradient(70% 45% at 92% 8%, rgba(52, 120, 246, 0.08), transparent 50%),
    radial-gradient(60% 40% at 50% 100%, rgba(16, 168, 240, 0.04), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 28%);
}

.app-workspace.is-enter {
  animation: workspace-in var(--motion) both;
}

@keyframes workspace-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Boot loader */
.app-boot {
  display: grid;
  place-items: center;
  gap: 0.85rem;
  min-height: 50vh;
  color: var(--ink-soft);
}

.app-boot__pulse {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(52, 120, 246, 0.22);
  border-top-color: var(--fruiti-blue);
  animation: spin 0.85s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Page typography */
.page-header {
  margin-bottom: var(--stage-gap-header);
}

.page-header__copy {
  max-width: var(--discover-max);
}

.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  letter-spacing: var(--page-title-tracking);
  line-height: var(--page-title-leading);
  color: var(--page-title-color);
  background: none;
  -webkit-text-fill-color: unset;
  text-shadow: none;
}

.page-sub {
  margin: var(--page-sub-gap) 0 0;
  color: var(--muted);
  font-size: var(--page-sub-size);
  line-height: var(--page-sub-leading);
  max-width: 42rem;
  letter-spacing: var(--page-sub-tracking);
}

/* Buttons */
.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition:
    background var(--motion),
    border-color var(--motion),
    transform var(--motion-lift),
    box-shadow var(--motion);
}

.app-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.app-btn--primary {
  background: linear-gradient(165deg, #4d8fff 0%, var(--fruiti-blue) 48%, #2866d8 100%);
  color: #fff;
  box-shadow:
    0 8px 18px rgba(52, 120, 246, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.app-btn--primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 12px 24px rgba(52, 120, 246, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.app-btn--outline {
  background: transparent;
  border-color: var(--line-strong);
}

.app-btn--outline:hover {
  background: var(--fruiti-blue-soft);
  border-color: rgba(52, 120, 246, 0.28);
}

.app-btn--ghost {
  background: var(--fruiti-blue-soft);
  border-color: var(--line);
  color: var(--fruiti-blue-deep);
}

html[data-appearance="dark"] .app-btn--ghost {
  color: var(--ink);
}

.app-btn--danger {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
  color: var(--danger);
}

.app-icon-btn {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--motion);
}

.app-icon-btn:hover,
.app-icon-btn:focus-visible {
  background: var(--fruiti-blue-soft);
  outline: none;
}

/* ——— Discovery stage ——— */
.discover-stage {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Flush page title — same origin as Favourites / Travel / Updates / Settings. */
.discover-page-header {
  margin-bottom: var(--stage-gap-header);
  padding: 0;
}

/* Discover toolbar — elevated card matching approved mock */
.discover-header {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-bottom: 0;
  padding: 1rem 1.2rem;
  border-radius: 22px;
  overflow: visible;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 249, 253, 0.88) 100%);
  border: 1px solid rgba(20, 33, 58, 0.1);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html[data-appearance="dark"] .discover-header {
  --story-cutout: #161a22;
  background: linear-gradient(165deg, #1a1e28 0%, #12151c 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Discover title + purple→blue gradient sparkle */
.discover-title {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.12rem;
}

.discover-title__spark {
  display: inline-flex;
  margin-top: 0.04em;
  filter: drop-shadow(0 2px 8px rgba(123, 86, 255, 0.4));
}

.discover-title__spark svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

/* Vertical divider + blue bead */
.discover-header__divider {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  margin: 0.35rem 0;
  position: relative;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.16) 22%,
    rgba(255, 255, 255, 0.16) 78%,
    transparent
  );
}

html[data-appearance="light"] .discover-header__divider {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(20, 33, 58, 0.12) 22%,
    rgba(20, 33, 58, 0.12) 78%,
    transparent
  );
}

.discover-header__divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--fruiti-blue);
  box-shadow: 0 0 8px rgba(52, 120, 246, 0.75);
}

.discover-vibe {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin: 0;
  max-width: 100%;
}

.discover-stories {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

/* Tools row — favourites chip left, Filter/Favourites/Travel right */
.discover-tools-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 var(--stage-gap-header);
  padding: 0.55rem 0.15rem 0.25rem;
  min-height: 2.55rem;
}

.discover-fav-banner-host {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.discover-fav-banner-host:empty {
  display: none;
}

.discover-tools {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  margin-left: auto;
  gap: 0;
  padding: 0;
  border-top: 0;
  background: transparent;
  box-shadow: none;
}

html[data-appearance="light"] .discover-tools {
  border-top-color: transparent;
}

.discover-tools__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding: 0.3rem 0.85rem;
  border: 0;
  background: transparent;
  color: rgba(200, 208, 222, 0.88);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  cursor: pointer;
  border-radius: 0;
  transition: color var(--motion), background var(--motion);
}

html[data-appearance="light"] .discover-tools__btn {
  color: #1f2a3d;
  font-weight: 650;
}

.discover-tools__btn + .discover-tools__btn {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-appearance="light"] .discover-tools__btn + .discover-tools__btn {
  border-left-color: rgba(20, 33, 58, 0.14);
}

.discover-tools__btn:hover {
  color: #fff;
  background: transparent;
}

html[data-appearance="light"] .discover-tools__btn:hover {
  color: #152033;
  background: transparent;
}

.discover-tools__btn:focus-visible {
  outline: 2px solid #7858f8;
  outline-offset: 2px;
}

.discover-tools__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: transparent;
}

html[data-appearance="light"] .discover-tools__icon {
  border-width: 2px;
  border-color: rgba(20, 33, 58, 0.34);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.06);
}

.discover-tools__icon svg {
  width: 0.9rem;
  height: 0.9rem;
  display: block;
}

.discover-tools__btn--filter .discover-tools__icon {
  color: rgba(230, 234, 242, 0.95);
}

html[data-appearance="light"] .discover-tools__btn--filter .discover-tools__icon {
  color: #1f2a3d;
  border-color: #4a5a73;
}

.discover-tools__btn--favourites .discover-tools__icon {
  color: #f0d04a;
  border-color: rgba(240, 208, 74, 0.85);
}

html[data-appearance="light"] .discover-tools__btn--favourites .discover-tools__icon {
  color: #a66d00;
  border-color: #c48a00;
  background: rgba(196, 138, 0, 0.1);
}

.discover-tools__btn--travel .discover-tools__icon {
  color: #4ec8e8;
  border-color: rgba(78, 200, 232, 0.85);
}

html[data-appearance="light"] .discover-tools__btn--travel .discover-tools__icon {
  color: #0f5fa8;
  border-color: #1a78c8;
  background: rgba(26, 120, 200, 0.1);
}

.discover-tools__label {
  line-height: 1;
}

.discover-tools__btn.is-active {
  color: #fff;
}

html[data-appearance="light"] .discover-tools__btn.is-active {
  color: #152033;
}

.discover-tools__btn--favourites.is-active .discover-tools__icon {
  color: #f0d04a;
  border-color: rgba(240, 208, 74, 0.95);
  box-shadow: 0 0 10px rgba(240, 208, 74, 0.35);
}

html[data-appearance="light"] .discover-tools__btn--favourites.is-active .discover-tools__icon {
  color: #b57900;
  border-color: rgba(181, 121, 0, 0.9);
  box-shadow: 0 0 0 2px rgba(196, 138, 0, 0.18);
}

.discover-tools__btn--travel.is-active .discover-tools__icon {
  color: #4ec8e8;
  border-color: rgba(78, 200, 232, 0.95);
  box-shadow: 0 0 10px rgba(78, 200, 232, 0.35);
}

html[data-appearance="light"] .discover-tools__btn--travel.is-active .discover-tools__icon {
  color: #1566ad;
  border-color: rgba(21, 102, 173, 0.9);
  box-shadow: 0 0 0 2px rgba(26, 120, 200, 0.16);
}

.discover-fav-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 208, 74, 0.45);
  background: rgba(240, 208, 74, 0.1);
  color: #f5e6a8;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

html[data-appearance="light"] .discover-fav-banner {
  border-color: rgba(181, 121, 0, 0.4);
  background: rgba(196, 138, 0, 0.12);
  color: #8a5a00;
}

.discover-fav-banner__x {
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.85;
}

/* Travel sheet — pixel lock to approved Where to? mock (image-2). Final overrides also appended at EOF. */
.travel-sheet {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.travel-sheet__panel {
  --wt-fill: #2c2c2e;
  --wt-row: rgba(255, 255, 255, 0.08);
  --wt-row-border: rgba(255, 255, 255, 0.1);
  --wt-accent: #3478f6;
  --wt-accent-soft: rgba(52, 120, 246, 0.22);
  --wt-heat: #f0c14a;
  --wt-text: #ffffff;
  --wt-muted: rgba(255, 255, 255, 0.58);
  --wt-placeholder: #8e8e93;
  width: min(360px, 86vw);
  max-height: min(520px, 82vh);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 0;
  background: var(--wt-fill);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

html[data-appearance="light"] .travel-sheet__panel {
  --wt-fill: #ffffff;
  --wt-row: #ffffff;
  --wt-row-border: #e5e5ea;
  --wt-accent: #3478f6;
  --wt-accent-soft: rgba(52, 120, 246, 0.12);
  --wt-heat: #d4a017;
  --wt-text: #1c1c1e;
  --wt-muted: #8e8e93;
  --wt-placeholder: #8e8e93;
  background: #fff;
  border: 0.5px solid #e5e5ea;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.travel-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.05rem 1.05rem 0.45rem;
}

.travel-sheet__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--wt-text);
}

.travel-sheet__sub {
  margin: 0.22rem 0 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--wt-muted);
}

.travel-sheet__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.travel-sheet__clear {
  border: 0;
  background: transparent;
  color: var(--wt-muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.25rem 0.2rem;
}

.travel-sheet__close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--wt-text);
  cursor: pointer;
}

html[data-appearance="light"] .travel-sheet__close {
  background: #e5e5ea;
}

.travel-sheet__close svg {
  width: 0.78rem;
  height: 0.78rem;
  display: block;
}

.travel-sheet__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.4rem 1.05rem 1.2rem;
  -webkit-overflow-scrolling: touch;
}

.travel-sheet__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.travel-sheet .travel-actions__leading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.travel-sheet .travel-actions__icon {
  color: inherit;
}

.travel-sheet .travel-actions__chevron {
  display: grid;
  place-items: center;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--wt-muted);
  flex: 0 0 auto;
}

.travel-sheet .travel-actions__chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Shared elevated glass panel language for Discover controls */
.app-state {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vibe-select {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: max-content;
  max-width: 100%;
}

.vibe-callout {
  margin: 0;
  padding-left: 0.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.005em;
  color: rgba(88, 104, 130, 0.9);
  white-space: nowrap;
}

html[data-appearance="dark"] .vibe-callout {
  color: rgba(232, 236, 246, 0.88);
}

/* Horizontal icon+label pills — content-sized so labels never clip */
.vibe-select__track {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
  flex-wrap: nowrap;
}

.vibe-select__opt {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  min-height: 2.2rem;
  padding: 0.4rem 0.78rem;
  border: 1px solid rgba(20, 33, 58, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--motion-lift),
    border-color var(--motion),
    background var(--motion),
    box-shadow var(--motion),
    color var(--motion);
}

html[data-appearance="dark"] .vibe-select__opt {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(236, 240, 248, 0.88);
}

.vibe-select__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: inherit;
}

.vibe-select__icon svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}

.vibe-select__label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

/* Idle: icon + label share vibe colour (mock) */
.vibe-select__opt--friends {
  color: #6b9dff;
  border-color: rgba(107, 157, 255, 0.22);
}
.vibe-select__opt--dates {
  color: #a89cf0;
  border-color: rgba(168, 156, 240, 0.2);
}
.vibe-select__opt--fun {
  color: #ef8a6a;
  border-color: rgba(239, 138, 106, 0.22);
}

.vibe-select__opt:hover:not(.is-selected) {
  transform: translateY(-1px);
}

.vibe-select__opt:focus-visible {
  outline: 2px solid #7858f8;
  outline-offset: 2px;
}

.vibe-select__opt.is-selected {
  transform: none;
  background: transparent;
}

.vibe-select__opt.is-selected.vibe-select__opt--friends {
  color: #9ec2ff;
  border-color: #3478f6;
  box-shadow: 0 0 10px rgba(52, 120, 246, 0.28);
}

.vibe-select__opt.is-selected.vibe-select__opt--dates {
  color: #d8d0ff;
  border-color: #7858f8;
  box-shadow: 0 0 12px rgba(120, 88, 248, 0.35);
}

.vibe-select__opt.is-selected.vibe-select__opt--fun {
  color: #ffb4a0;
  border-color: #ef5350;
  box-shadow: 0 0 10px rgba(239, 83, 80, 0.28);
}

html[data-appearance="light"] .vibe-select__opt--friends { color: #2563eb; }
html[data-appearance="light"] .vibe-select__opt--dates { color: #7c3aed; }
html[data-appearance="light"] .vibe-select__opt--fun { color: #dc2626; }
html[data-appearance="light"] .vibe-select__opt.is-selected.vibe-select__opt--friends {
  color: #1e3a8a;
  border-color: #3478f6;
}
html[data-appearance="light"] .vibe-select__opt.is-selected.vibe-select__opt--dates {
  color: #5b21b6;
  border-color: #7858f8;
}
html[data-appearance="light"] .vibe-select__opt.is-selected.vibe-select__opt--fun {
  color: #991b1b;
  border-color: #ef5350;
}

@media (prefers-reduced-motion: reduce) {
  .vibe-select__opt {
    transition-duration: 80ms;
  }
}

@media (max-width: 920px) {
  .discover-header {
    flex-wrap: wrap;
  }
  .discover-stories {
    flex: 1 1 100%;
  }
  .discover-header__divider {
    display: none;
  }
  .discover-vibe {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .vibe-select {
    width: 100%;
  }
  .vibe-select__track {
    width: 100%;
  }
  .vibe-select__opt {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }
}

/* Stories rail — lives inside the Discover header panel */
.story-shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
}

.story-rail {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  align-items: flex-start;
  /* overflow-x:auto forces overflow-y:auto, so the rail clips at its padding
     edge — leave room for the self "+" badge overhang and its shadow. */
  padding: 0.25rem 0.35rem 0.55rem;
  flex: 1 1 0;
  min-width: 0;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.story-rail::-webkit-scrollbar {
  height: 0;
}

.story-item {
  flex: 0 0 auto;
  width: 3.7rem;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  scroll-snap-align: start;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.story-item__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.45rem;
  height: 3.45rem;
  border-radius: 50%;
  padding: 2.5px;
  /* Peer unviewed — blue ring + soft glow */
  background: linear-gradient(145deg, #5b9bff 0%, #3478f6 55%, #2a62d4 100%);
  box-shadow: 0 0 7px rgba(52, 120, 246, 0.42);
  transition: transform var(--motion-lift);
}

.story-item:hover .story-item__ring {
  transform: translateY(-1px) scale(1.02);
}

.story-item:focus-visible {
  outline: none;
}

.story-item:focus-visible .story-item__ring {
  box-shadow: 0 0 0 3px var(--focus);
}

/* Peer viewed — gray ring */
.story-item__ring--viewed {
  background: #c7cede;
  box-shadow: none;
}

html[data-appearance="dark"] .story-item__ring--viewed {
  background: #3d4d66;
}

/* Self — vibrant rainbow ring (mock: empty + posted share the same chrome) */
.story-item__ring--self-empty,
.story-item__ring--self-active {
  padding: 2.5px;
  background: linear-gradient(
    145deg,
    #c9a0ff 0%,
    #6eb0ff 18%,
    #5fe0c8 36%,
    #f0d060 54%,
    #ff9a7a 72%,
    #f0a0e0 88%,
    #c9a0ff 100%
  );
  box-shadow: 0 0 10px rgba(160, 120, 255, 0.35);
}

.story-item__ring--self-active {
  padding: 3px;
  box-shadow: 0 3px 12px rgba(123, 86, 255, 0.32);
}

.story-item__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #d8dde6;
  border: 2.5px solid var(--story-cutout);
  display: block;
}

html[data-appearance="dark"] .story-item__img {
  background: #1f2d44;
}

/* Legacy initials fallback — unused; keep inert if present */
.story-item__fallback {
  display: none;
}

.story-item__name,
.story-item__presence {
  display: none;
}

.story-item__add {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--fruiti-blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--story-cutout);
  box-shadow: 0 2px 8px rgba(52, 120, 246, 0.55);
}

.story-item__presence {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  border: 2.5px solid var(--story-cutout);
  background: var(--offline);
}

.story-item__presence--active { background: var(--online); }
.story-item__presence--recent { background: var(--recent); }

.story-item__name {
  max-width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-shell__next {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-lift), box-shadow var(--motion);
}

.story-shell__next[hidden] {
  display: none;
}

.story-shell__next svg {
  width: 1.05rem;
  height: 1.05rem;
}

.story-shell__next:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Profile grid — 5 cards per row on desktop web */
.disc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
}

.disc-card {
  /* iOS DiscoveryHomeLayout.gridCardCornerRadius = 12 */
  border-radius: 12px;
  overflow: hidden;
  background: #d8dde6;
  border: 1.5px solid rgba(20, 33, 58, 0.12);
  cursor: pointer;
  transition:
    transform var(--motion-lift),
    box-shadow var(--motion),
    border-color var(--motion);
  box-shadow: var(--shadow-sm);
}

/* iOS intent borders: friends/dates/fun thicker accent; none = thin card border */
.disc-card--vibe-friends {
  border-width: 2.5px;
  border-color: var(--vibe-friends);
}
.disc-card--vibe-dates {
  border-width: 2.5px;
  border-color: var(--vibe-dates);
}
.disc-card--vibe-fun {
  border-width: 2.5px;
  border-color: var(--vibe-fun);
}
.disc-card--vibe-none {
  border-width: 1.5px;
  border-color: rgba(20, 33, 58, 0.12);
}

html[data-appearance="dark"] .disc-card {
  background: #1c2433;
  /* Do NOT set border-color here — it outranks .disc-card--vibe-* and
     washes friends/dates/fun accents to a near-invisible white. */
}

html[data-appearance="dark"] .disc-card--vibe-none {
  border-color: rgba(255, 255, 255, 0.14);
}

/* Re-assert vibe accents under dark (same specificity as the old wash-out rule). */
html[data-appearance="dark"] .disc-card--vibe-friends {
  border-color: var(--vibe-friends);
}
html[data-appearance="dark"] .disc-card--vibe-dates {
  border-color: var(--vibe-dates);
}
html[data-appearance="dark"] .disc-card--vibe-fun {
  border-color: var(--vibe-fun);
}

.disc-card:hover,
.disc-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  outline: none;
}

.disc-card__media {
  position: relative;
  /* iOS tile ~ width × 1.34 → ~3:4 */
  aspect-ratio: 3 / 4;
  background: #d8dde6;
  overflow: hidden;
}

html[data-appearance="dark"] .disc-card__media {
  background: #1c2433;
}

.disc-card__default,
.disc-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.disc-card__default {
  z-index: 0;
}

.disc-card__img {
  z-index: 1;
}

.disc-card__placeholder {
  /* legacy; prefer .disc-card__default raster */
  display: none;
}

/* iOS PhotoVerifiedBadgeView — glass dark base + teal tint + white checkmark.seal.fill */
.disc-card__verified {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  margin: 0;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      rgba(51, 115, 97, 0.35),
      rgba(71, 133, 112, 0.2)
    ),
    rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
}

.disc-card__verified svg {
  display: block;
  /* Keep the 20px glass circle; enlarge the seal so it fills more of it. */
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  transform: none;
  pointer-events: none;
}

.disc-card__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: 1.55rem;
  /* Equal vertical padding so name + status sit on the band mid-line. */
  padding: 0.28rem 0.62rem;
  box-sizing: border-box;
  /* iOS: ultraThinMaterial band + dark scrim */
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%),
    rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  color: rgba(255, 255, 255, 0.94);
}

html[data-appearance="dark"] .disc-card__meta {
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.28) 100%),
    rgba(20, 28, 40, 0.35);
}

.disc-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.81rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.disc-card__status {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #8e8e93;
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.2);
}

.disc-card__status--active {
  background: rgb(52, 199, 89);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.2), 0 0 6px rgba(52, 199, 89, 0.55);
}

.disc-card__status--recent { background: rgb(255, 149, 0); }

.disc-card--skeleton {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: rgba(20, 33, 58, 0.06);
  border-color: transparent;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

html[data-appearance="dark"] .disc-card--skeleton {
  background: rgba(255, 255, 255, 0.05);
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Empty & error states — soft panel, no dashed border */
.app-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.55rem 1.9rem;
  border-radius: calc(var(--radius-control) + 2px);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.78) 0%, rgba(247, 249, 252, 0.9) 100%);
  border: 1px solid rgba(20, 33, 58, 0.08);
  box-shadow:
    0 18px 40px rgba(22, 38, 68, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  max-width: 28rem;
  margin: 2.25rem auto;
}

html[data-appearance="dark"] .app-state:not(.app-state--error) {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(54, 126, 255, 0.1), transparent 55%),
    linear-gradient(165deg, rgba(32, 48, 74, 0.95) 0%, rgba(18, 30, 50, 0.92) 100%);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.app-state__mark {
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 50%;
  margin-bottom: 1.05rem;
  font-size: 1.35rem;
  background: var(--fruiti-blue-soft);
  color: var(--fruiti-blue);
  box-shadow: 0 0 0 6px rgba(52, 120, 246, 0.06);
}

.app-state__title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.app-state__body {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 22rem;
}

/* Full-area centering shell for error notices (iOS BadGateway502PopupView parity). */
.app-state-host {
  display: grid;
  place-items: center;
  width: 100%;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: min(100%, 70vh);
  padding: 1.75rem 1.75rem;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.28);
}

.page-edit-profile .edit-profile-host:has(> .app-state-host),
.page-me:has(.app-state-host),
.page:has(> .app-state-host) {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
}

.app-state.app-state--error,
.app-state.app-state--error.fruiti-awkward {
  margin: 0;
  width: min(100%, 300px);
  max-width: 300px;
  padding: 0 24px 28px;
  border-radius: 24px;
  background: #f7f7f7;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-appearance="dark"] .app-state.app-state--error,
html[data-appearance="dark"] .app-state.app-state--error.fruiti-awkward {
  background: #f7f7f7;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

.app-state--error .app-state__mark {
  display: none;
}

.fruiti-awkward__art {
  display: block;
  width: 100%;
  max-width: 392px;
  max-height: 280px;
  margin: 24px 0 0;
  object-fit: contain;
}

.fruiti-awkward__title,
.app-state--error .app-state__title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: rgb(38, 38, 38);
}

html[data-appearance="light"] .app-state--error .app-state__title,
html[data-appearance="dark"] .app-state--error .app-state__title {
  color: rgb(38, 38, 38);
}

.fruiti-awkward__body,
.app-state--error .app-state__body {
  margin: 16px 0 0;
  color: rgb(89, 89, 89);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  max-width: none;
}

html[data-appearance="light"] .app-state--error .app-state__body,
html[data-appearance="dark"] .app-state--error .app-state__body {
  color: rgb(89, 89, 89);
}

.app-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.app-state > .app-btn {
  margin-top: 1.25rem;
}

.app-state--error > .app-state__retry,
.app-state--error > .fruiti-awkward__retry,
.app-state--error > .app-btn--primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin-top: 20px;
  padding: 0 1rem;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fruiti-blue) 90%, transparent);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  filter: none;
  transform: none;
}

.app-state--error > .app-state__retry:hover,
.app-state--error > .fruiti-awkward__retry:hover,
.app-state--error > .app-btn--primary:hover {
  transform: none;
  filter: brightness(1.04);
  box-shadow: none;
}

/* Skeletons */
.list-skeleton,
.story-rail--skeleton .story-rail__skel {
  border-radius: var(--radius-control);
  background: rgba(20, 33, 58, 0.05);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

html[data-appearance="dark"] .list-skeleton,
html[data-appearance="dark"] .story-rail--skeleton .story-rail__skel {
  background: rgba(255, 255, 255, 0.05);
}

.list-skeleton {
  min-height: 12rem;
}

.story-rail--skeleton {
  display: flex;
  gap: 0.7rem;
  padding: 0.25rem 0.35rem 0.55rem;
  min-height: 0;
  align-items: center;
}

.story-rail__skel {
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Person lists */
.person-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: var(--discover-max);
}

.person-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0.8rem;
  align-items: center;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--motion),
    transform var(--motion-lift),
    box-shadow var(--motion);
}

html[data-appearance="dark"] .person-row {
  background: var(--panel-elevated);
}

.person-row:hover,
.person-row:focus-visible {
  border-color: rgba(52, 120, 246, 0.32);
  outline: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.person-row__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: #e2e8f4;
}

html[data-appearance="dark"] .person-row__avatar {
  background: #1f2d44;
}

.person-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-row__name {
  display: block;
  font-weight: 650;
  font-size: 0.92rem;
}

.person-row__meta {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.14rem;
}

/* ── Updates hub (open header + recessed icon tabs) ── */
.page-updates {
  display: flex;
  flex-direction: column;
  min-height: calc(
    100dvh - (2 * var(--frame-pad)) - (2 * var(--workspace-pad-y))
  );
}

.updates-stage {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 0;
}

.updates-header {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.85rem 1rem;
  margin-bottom: 1.15rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.updates-header__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.updates-header__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  letter-spacing: var(--page-title-tracking);
  line-height: var(--page-title-leading);
  color: var(--page-title-color);
  background: none;
  -webkit-text-fill-color: unset;
  text-shadow: none;
}

.updates-header__sub {
  margin: var(--page-sub-gap) 0 0;
  font-size: var(--page-sub-size);
  line-height: var(--page-sub-leading);
  letter-spacing: var(--page-sub-tracking);
  color: rgba(20, 33, 58, 0.55);
}

html[data-appearance="dark"] .updates-header__sub {
  color: rgba(214, 224, 240, 0.68);
}

.updates-tabs-host {
  flex: 0 1 auto;
  margin: 0;
  margin-left: auto;
  max-width: none;
}

.updates-tabs {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0.28rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(232, 238, 246, 0.92) 0%, rgba(222, 230, 242, 0.88) 100%);
  border: 1px solid rgba(20, 33, 58, 0.06);
  box-shadow:
    inset 0 1px 2px rgba(22, 38, 68, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7);
}

html[data-appearance="dark"] .updates-tabs {
  background:
    linear-gradient(180deg, rgba(10, 16, 28, 0.72) 0%, rgba(16, 24, 40, 0.55) 100%);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.updates-tabs__sep {
  width: 1px;
  align-self: center;
  height: 1.15rem;
  background: rgba(20, 33, 58, 0.12);
  flex: 0 0 auto;
}

html[data-appearance="dark"] .updates-tabs__sep {
  background: rgba(255, 255, 255, 0.12);
}

.updates-tabs__cell {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  min-height: 2.35rem;
  padding: 0.38rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: rgba(20, 33, 58, 0.48);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--motion),
    background var(--motion),
    border-color var(--motion),
    box-shadow var(--motion),
    transform var(--motion-lift);
}

html[data-appearance="dark"] .updates-tabs__cell {
  color: rgba(214, 224, 240, 0.52);
}

.updates-tabs__cell:hover,
.updates-tabs__cell:focus-visible {
  color: var(--ink);
  outline: none;
}

html[data-appearance="dark"] .updates-tabs__cell:hover,
html[data-appearance="dark"] .updates-tabs__cell:focus-visible {
  color: rgba(243, 246, 251, 0.92);
}

.updates-tabs__cell.is-selected {
  color: var(--fruiti-blue-deep);
  font-weight: 650;
  background: #ffffff;
  border-color: rgba(52, 120, 246, 0.14);
  box-shadow:
    0 6px 14px rgba(52, 120, 246, 0.16),
    0 1px 0 rgba(255, 255, 255, 1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

html[data-appearance="dark"] .updates-tabs__cell.is-selected {
  color: #d7e6ff;
  background:
    linear-gradient(165deg, rgba(62, 110, 210, 0.32) 0%, rgba(36, 58, 110, 0.4) 100%);
  border-color: rgba(158, 198, 255, 0.28);
  box-shadow:
    0 6px 16px rgba(20, 50, 120, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.updates-tabs__icon {
  display: inline-flex;
  width: 0.95rem;
  height: 0.95rem;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
}

.updates-tabs__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.updates-tabs__cell.is-selected .updates-tabs__icon {
  color: var(--fruiti-blue-deep);
}

html[data-appearance="dark"] .updates-tabs__cell.is-selected .updates-tabs__icon {
  color: #d7e6ff;
}

.updates-tabs__label {
  line-height: 1;
}

.updates-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05rem;
  min-height: 1.05rem;
  padding: 0.08rem 0.3rem;
  border-radius: 999px;
  background: rgba(52, 120, 246, 0.14);
  color: var(--fruiti-blue-deep);
  font-size: 0.62rem;
  font-weight: 750;
  line-height: 1;
  border: 1px solid rgba(52, 120, 246, 0.18);
}

html[data-appearance="dark"] .updates-tabs__badge {
  background: rgba(52, 120, 246, 0.28);
  color: #e8f0ff;
  border-color: rgba(158, 198, 255, 0.22);
}

.updates-tabs__cell.is-selected .updates-tabs__badge {
  background: var(--fruiti-blue);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(52, 120, 246, 0.28);
}

@media (max-width: 900px) {
  .updates-header {
    flex-wrap: wrap;
    gap: 0.85rem;
    padding: 0;
  }

  .updates-tabs-host {
    width: 100%;
    margin-left: 0;
  }

  .updates-tabs {
    display: flex;
    width: 100%;
  }

  .updates-tabs__cell {
    flex: 1 1 0;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  .updates-tabs__sep {
    display: none;
  }
}

@media (max-width: 560px) {
  .updates-tabs__cell {
    font-size: 0.76rem;
    gap: 0.28rem;
  }
}

.updates-panel {
  position: relative;
  flex: 1 1 auto;
  min-height: 16rem;
}

.updates-section {
  margin: 0.35rem 0 0.45rem;
  font-size: 0.8125rem;
  font-weight: 650;
  color: rgba(20, 33, 58, 0.48);
  letter-spacing: -0.01em;
}

html[data-appearance="dark"] .updates-section {
  color: rgba(214, 224, 240, 0.55);
}

.updates-likes__stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.updates-like {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.75rem 0.875rem;
  border-radius: 14px;
  border: 0.5px solid rgba(20, 33, 58, 0.08);
  background: #fff;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(22, 38, 68, 0.06);
  transition:
    transform var(--motion-lift),
    box-shadow var(--motion),
    border-color var(--motion);
}

html[data-appearance="dark"] .updates-like {
  background: #1c1f26;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.updates-like:hover,
.updates-like:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(52, 120, 246, 0.28);
  box-shadow: 0 6px 14px rgba(22, 38, 68, 0.1);
}

html[data-appearance="dark"] .updates-like:hover,
html[data-appearance="dark"] .updates-like:focus-visible {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.updates-like__copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.updates-like__name {
  font-size: 0.94rem;
  font-weight: 550;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.updates-like__time {
  font-size: 0.75rem;
  color: var(--muted);
}

.updates-like__heart {
  display: inline-flex;
  width: 0.9rem;
  height: 0.9rem;
  color: rgba(20, 33, 58, 0.22);
}

html[data-appearance="dark"] .updates-like__heart {
  color: rgba(214, 224, 240, 0.28);
}

.updates-like__heart.is-new {
  color: var(--fruiti-blue);
}

/* Dark: base heart rule is more specific than .is-new alone — keep new likes Fruiti blue */
html[data-appearance="dark"] .updates-like__heart.is-new {
  color: #5b94f8;
  filter: drop-shadow(0 0 6px rgba(91, 148, 248, 0.45));
}

.updates-like__heart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.updates-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: #e5e5ea;
  flex-shrink: 0;
}

html[data-appearance="dark"] .updates-avatar {
  background: rgba(255, 255, 255, 0.08);
}

.updates-avatar--sm {
  width: 34px;
  height: 34px;
}

.updates-avatar--md {
  width: 40px;
  height: 40px;
}

.updates-avatar--mini {
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
}

html[data-appearance="dark"] .updates-avatar--mini {
  border-color: #1c1f26;
}

.updates-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.updates-avatar__fallback {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.updates-msg-list,
.updates-group-list {
  display: flex;
  flex-direction: column;
}

.updates-msg,
.updates-group {
  display: grid;
  grid-template-columns: 40px 1fr 44px;
  gap: 0.75rem;
  align-items: flex-start;
  width: 100%;
  padding: 0.75rem 0.7rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}

.updates-group {
  cursor: pointer;
}

.updates-msg__main {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.updates-msg__name,
.updates-group__name {
  font-size: 0.94rem;
  font-weight: 550;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.updates-msg--unread .updates-msg__name,
.updates-group--unread .updates-group__name {
  font-weight: 650;
}

.updates-msg__preview,
.updates-group__preview {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.updates-msg--unread .updates-msg__preview,
.updates-group--unread .updates-group__preview {
  font-weight: 550;
}

.updates-msg__meta,
.updates-group__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 40px;
}

.updates-msg__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fruiti-blue);
}

.updates-msg__dot--empty {
  background: transparent;
}

.updates-msg__time {
  font-size: 0.6875rem;
  color: var(--muted);
  white-space: nowrap;
}

.updates-divider {
  height: 1px;
  margin-left: calc(40px + 0.75rem + 0.7rem);
  background: rgba(20, 33, 58, 0.1);
}

html[data-appearance="dark"] .updates-divider {
  background: rgba(255, 255, 255, 0.12);
}

.updates-group__avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.updates-group__stack {
  position: relative;
  width: 34px;
  height: 28px;
}

.updates-group__stack .updates-avatar--mini:first-child {
  position: absolute;
  left: 0;
  top: 2px;
  background: #c7d2e5;
}

.updates-group__stack .updates-avatar--mini:last-child {
  position: absolute;
  right: 0;
  top: 6px;
  background: #9eb0cc;
}

.updates-group__copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.updates-create-group {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 14px;
  border: 0.5px solid rgba(20, 33, 58, 0.08);
  background: #fff;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(22, 38, 68, 0.06);
}

html[data-appearance="dark"] .updates-create-group {
  background: #1c1f26;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.updates-create-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(52, 120, 246, 0.12);
  color: var(--fruiti-blue);
  font-size: 1.1rem;
  font-weight: 650;
}

.updates-create-group__label {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--ink);
}

.updates-create-group__chevron {
  color: var(--muted);
  font-size: 1.1rem;
}

.updates-plus-teaser {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  text-decoration: none;
  background: rgba(52, 120, 246, 0.1);
  border: 1px solid rgba(52, 120, 246, 0.18);
  color: inherit;
}

.updates-plus-teaser__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fruiti-blue);
}

.updates-plus-teaser__sub {
  font-size: 0.75rem;
  color: var(--muted);
}

.updates-empty {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 2rem 1.25rem;
  text-align: center;
  pointer-events: none;
}

.updates-empty > * {
  pointer-events: auto;
}

.updates-empty__icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  color: rgba(20, 33, 58, 0.28);
  margin-bottom: 0.2rem;
}

html[data-appearance="dark"] .updates-empty__icon {
  color: rgba(214, 224, 240, 0.35);
}

.updates-empty__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.updates-empty__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 650;
  color: var(--ink);
}

.updates-empty__body {
  margin: 0;
  max-width: 18rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

/* ── Travel / Where to? (iOS GlobeView parity, compact web) ── */
.page-travel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.travel-stage {
  width: 100%;
  max-width: var(--discover-max);
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.travel-header {
  margin-bottom: 0.35rem;
  padding: 0;
}

/* Everything below the header lives in a centred column. */
.travel-body {
  position: relative;
  width: min(100%, 28.5rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: 1.75rem 0 2.5rem;
  isolation: isolate;
}

.travel-body::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(120%, 34rem);
  height: 22rem;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(52, 120, 246, 0.16), transparent 72%),
    radial-gradient(closest-side at 70% 60%, rgba(52, 120, 246, 0.1), transparent 68%);
  filter: blur(8px);
  opacity: 0.9;
}

html[data-appearance="dark"] .travel-body::before {
  background:
    radial-gradient(closest-side, rgba(52, 120, 246, 0.22), transparent 72%),
    radial-gradient(closest-side at 70% 60%, rgba(110, 168, 255, 0.12), transparent 68%);
  opacity: 1;
}

.travel-header__title {
  color: var(--page-title-color);
  background: none;
  -webkit-text-fill-color: unset;
  text-shadow: none;
}

.travel-current {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.95rem;
  padding: 0.9rem 1rem 0.9rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(52, 120, 246, 0.2);
  background:
    linear-gradient(135deg, rgba(236, 243, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 58%, rgba(244, 247, 252, 0.96) 100%);
  box-shadow:
    0 10px 28px rgba(36, 74, 150, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
}

.travel-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6ea8ff 0%, var(--fruiti-blue) 55%, #1a3d8f 100%);
  box-shadow: 0 0 12px rgba(52, 120, 246, 0.45);
}

html[data-appearance="dark"] .travel-current {
  background:
    linear-gradient(145deg, rgba(48, 78, 140, 0.42) 0%, rgba(18, 28, 46, 0.94) 55%, rgba(14, 20, 34, 0.96) 100%);
  border-color: rgba(158, 198, 255, 0.2);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.travel-current__eyebrow {
  margin: 0 0 0.18rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--fruiti-blue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[data-appearance="dark"] .travel-current__eyebrow {
  color: #9ec6ff;
}

.travel-current__name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.travel-current__clear {
  flex-shrink: 0;
  min-height: 2.05rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(52, 120, 246, 0.22);
  background: rgba(255, 255, 255, 0.78);
  color: var(--fruiti-blue-deep);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
  transition:
    background var(--motion),
    border-color var(--motion),
    transform var(--motion-lift);
}

.travel-current__clear:hover,
.travel-current__clear:focus-visible {
  outline: none;
  background: #fff;
  border-color: rgba(52, 120, 246, 0.4);
  transform: translateY(-1px);
}

html[data-appearance="dark"] .travel-current__clear {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(158, 198, 255, 0.22);
  color: #d7e6ff;
}

html[data-appearance="dark"] .travel-current__clear:hover,
html[data-appearance="dark"] .travel-current__clear:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

.travel-card {
  position: relative;
  padding: 1.35rem 1.25rem 1.2rem;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.98), transparent 58%),
    radial-gradient(90% 70% at 100% 0%, rgba(52, 120, 246, 0.08), transparent 45%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 247, 252, 0.9) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 48px rgba(28, 52, 98, 0.12),
    0 4px 14px rgba(28, 52, 98, 0.06);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  overflow: hidden;
}

.travel-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 4%,
    rgba(255, 255, 255, 0.95) 30%,
    rgba(158, 198, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.95) 70%,
    transparent 96%
  );
  pointer-events: none;
}

.travel-card::after {
  content: "";
  position: absolute;
  right: -18%;
  top: -28%;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 120, 246, 0.12), transparent 68%);
  pointer-events: none;
}

html[data-appearance="dark"] .travel-card {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.08), transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(52, 120, 246, 0.16), transparent 48%),
    linear-gradient(165deg, rgba(30, 42, 66, 0.88) 0%, rgba(12, 18, 30, 0.94) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 22px 56px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(52, 120, 246, 0.08);
}

html[data-appearance="dark"] .travel-card::before {
  background: linear-gradient(
    90deg,
    transparent 4%,
    rgba(255, 255, 255, 0.18) 30%,
    rgba(110, 168, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.18) 70%,
    transparent 96%
  );
}

html[data-appearance="dark"] .travel-card::after {
  background: radial-gradient(circle, rgba(110, 168, 255, 0.18), transparent 68%);
}

.travel-card__head {
  position: relative;
  z-index: 1;
  margin-bottom: 1.15rem;
  text-align: center;
}

.travel-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.4vw, 1.85rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--ink);
}

html[data-appearance="dark"] .travel-card__title {
  color: #f5f8fd;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.travel-card__sub {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.travel-card__sub::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 2px;
  margin: 0.75rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--fruiti-blue), transparent);
  opacity: 0.7;
}

.travel-field {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.05rem;
  padding: 0.55rem 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(20, 33, 58, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 253, 0.94) 100%);
  box-shadow:
    inset 0 1px 2px rgba(22, 38, 68, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.85);
  transition:
    border-color var(--motion),
    box-shadow var(--motion),
    background var(--motion);
}

.travel-field:focus-within {
  border-color: rgba(52, 120, 246, 0.45);
  box-shadow:
    0 0 0 4px rgba(52, 120, 246, 0.14),
    inset 0 1px 2px rgba(22, 38, 68, 0.03);
}

html[data-appearance="dark"] .travel-field {
  background:
    linear-gradient(180deg, rgba(18, 26, 42, 0.92) 0%, rgba(10, 14, 24, 0.88) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-appearance="dark"] .travel-field:focus-within {
  border-color: rgba(110, 168, 255, 0.5);
  box-shadow:
    0 0 0 4px rgba(52, 120, 246, 0.18),
    inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.travel-field__icon {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--fruiti-blue);
  opacity: 0.72;
  flex-shrink: 0;
}

html[data-appearance="dark"] .travel-field__icon {
  color: #9ec6ff;
  opacity: 0.85;
}

.travel-field__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.travel-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  outline: none;
}

.travel-field__input::placeholder {
  color: var(--muted);
  font-weight: 450;
}

.travel-suggest {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.65rem;
}

.travel-suggest__item {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.7rem;
  align-items: center;
  width: 100%;
  padding: 0.72rem 0.8rem;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(20, 33, 58, 0.035);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    background var(--motion),
    border-color var(--motion),
    transform var(--motion-lift);
}

html[data-appearance="dark"] .travel-suggest__item {
  background: rgba(255, 255, 255, 0.035);
}

.travel-suggest__item:hover,
.travel-suggest__item:focus-visible {
  outline: none;
  border-color: rgba(52, 120, 246, 0.28);
  background: rgba(52, 120, 246, 0.09);
  transform: translateY(-1px);
}

.travel-suggest__icon {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--fruiti-blue);
}

.travel-suggest__icon svg {
  width: 100%;
  height: 100%;
}

.travel-suggest__copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.travel-suggest__title {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--ink);
}

.travel-suggest__sub {
  font-size: 0.74rem;
  color: var(--muted);
}

.travel-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}

.travel-actions__search,
.travel-actions__map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  width: 100%;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    opacity var(--motion),
    transform var(--motion-lift),
    box-shadow var(--motion),
    border-color var(--motion),
    background var(--motion),
    color var(--motion),
    filter var(--motion);
}

.travel-actions__search {
  border: 1px solid rgba(36, 96, 220, 0.35);
  background:
    linear-gradient(180deg, #6ea8ff 0%, var(--fruiti-blue) 48%, #2f6fe0 100%);
  color: #fff;
  box-shadow:
    0 12px 28px rgba(52, 120, 246, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 0 rgba(20, 50, 120, 0.18);
}

.travel-actions__search:hover:not(:disabled):not(.is-disabled),
.travel-actions__search:focus-visible:not(:disabled):not(.is-disabled) {
  outline: none;
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 16px 34px rgba(52, 120, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.travel-actions__search.is-disabled,
.travel-actions__search:disabled {
  cursor: default;
  transform: none;
  filter: none;
  box-shadow: none;
  text-shadow: none;
  border-color: rgba(20, 33, 58, 0.08);
  background: rgba(20, 33, 58, 0.05);
  color: rgba(20, 33, 58, 0.38);
}

html[data-appearance="dark"] .travel-actions__search.is-disabled,
html[data-appearance="dark"] .travel-actions__search:disabled {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(214, 224, 240, 0.38);
}

.travel-actions__map {
  border: 1px solid rgba(52, 120, 246, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 255, 0.92) 100%);
  color: var(--fruiti-blue-deep);
  box-shadow:
    0 6px 16px rgba(36, 74, 150, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-appearance="dark"] .travel-actions__map {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-color: rgba(158, 198, 255, 0.24);
  color: #cfe0ff;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.travel-actions__map:hover,
.travel-actions__map:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(52, 120, 246, 0.42);
  box-shadow:
    0 10px 22px rgba(52, 120, 246, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

html[data-appearance="dark"] .travel-actions__map:hover,
html[data-appearance="dark"] .travel-actions__map:focus-visible {
  border-color: rgba(158, 198, 255, 0.4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.travel-actions__icon {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
}

.travel-actions__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.travel-error {
  position: relative;
  z-index: 1;
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: var(--danger);
  text-align: center;
}

.travel-history {
  margin-top: 1.1rem;
}

.travel-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
  padding: 0 0.15rem;
}

.travel-history__title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.travel-history__clear {
  border: 0;
  background: transparent;
  color: var(--fruiti-blue);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
}

.travel-history__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.travel-history__chip {
  min-height: 2.05rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(20, 33, 58, 0.08);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 550;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(22, 38, 68, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    border-color var(--motion),
    transform var(--motion-lift),
    background var(--motion);
}

.travel-history__chip:hover,
.travel-history__chip:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(52, 120, 246, 0.3);
  background: #fff;
}

html[data-appearance="dark"] .travel-history__chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

html[data-appearance="dark"] .travel-history__chip:hover,
html[data-appearance="dark"] .travel-history__chip:focus-visible {
  background: rgba(255, 255, 255, 0.09);
}

.travel-hotspots {
  margin-top: 1.05rem;
}

.travel-hotspots__toggle {
  display: grid;
  grid-template-columns: 1.25rem 1fr auto;
  gap: 0.7rem;
  align-items: center;
  width: 100%;
  min-height: 3.15rem;
  padding: 0.8rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(52, 120, 246, 0.08), transparent 50%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, rgba(244, 247, 252, 0.88) 100%);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 28px rgba(28, 52, 98, 0.08);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  transition:
    transform var(--motion-lift),
    border-color var(--motion),
    box-shadow var(--motion);
}

.travel-hotspots__toggle:hover,
.travel-hotspots__toggle:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(52, 120, 246, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 14px 32px rgba(36, 74, 150, 0.12);
}

html[data-appearance="dark"] .travel-hotspots__toggle {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(52, 120, 246, 0.16), transparent 52%),
    linear-gradient(165deg, rgba(30, 42, 66, 0.9) 0%, rgba(14, 20, 34, 0.94) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 14px 34px rgba(0, 0, 0, 0.32);
}

.travel-hotspots__toggle-icon {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--fruiti-blue);
  filter: drop-shadow(0 0 8px rgba(52, 120, 246, 0.35));
}

.travel-hotspots__toggle-icon svg {
  width: 100%;
  height: 100%;
}

.travel-hotspots__toggle-label {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.travel-hotspots__chevron {
  display: inline-flex;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--fruiti-blue);
  transition: transform var(--motion);
}

.travel-hotspots__toggle.is-open .travel-hotspots__chevron {
  transform: rotate(180deg);
}

.travel-hotspots__chevron svg {
  width: 100%;
  height: 100%;
}

.travel-hotspots__body {
  margin-top: 0.7rem;
  padding: 0.2rem 0.1rem 0.35rem;
}

.travel-hotspots__intro {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.travel-hotspots__loading,
.travel-hotspots__empty-title {
  margin: 0;
  padding: 1.1rem 0.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.travel-hotspots__stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.travel-hotspot {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(20, 33, 58, 0.08);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 248, 252, 0.92) 100%);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow:
    0 8px 22px rgba(22, 38, 68, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    border-color var(--motion),
    transform var(--motion-lift),
    box-shadow var(--motion);
}

html[data-appearance="dark"] .travel-hotspot {
  background:
    linear-gradient(165deg, rgba(28, 40, 62, 0.94) 0%, rgba(14, 20, 34, 0.96) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.travel-hotspot:hover,
.travel-hotspot:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(52, 120, 246, 0.32);
  box-shadow:
    0 14px 30px rgba(36, 74, 150, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.travel-hotspot__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.travel-hotspot__name {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.travel-hotspot__pulse {
  flex-shrink: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(52, 120, 246, 0.12);
  color: var(--fruiti-blue-deep);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

html[data-appearance="dark"] .travel-hotspot__pulse {
  color: #d7e6ff;
  background: rgba(52, 120, 246, 0.24);
}

.travel-hotspot__line {
  font-size: 0.75rem;
  color: var(--muted);
}

.travel-hotspot__previews {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.travel-hotspot__avatar {
  aspect-ratio: 1;
  border-radius: 11px;
  overflow: hidden;
  background: rgba(20, 33, 58, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.travel-hotspot__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Map picker overlay */
.travel-map-picker {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  /* Centre the dialog inside the workspace, excluding the desktop control centre. */
  padding: 1rem 1rem 1rem calc(var(--frame-pad) + var(--cc-w));
  background: rgba(7, 11, 18, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.travel-map-picker__panel {
  width: min(546px, 100%) !important;
  max-height: min(94vh, 832px) !important;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

html[data-appearance="dark"] .travel-map-picker__panel {
  background: #151b28;
}

.travel-map-picker__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem;
}

.travel-map-picker__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 750;
  color: var(--ink);
}

.travel-map-picker__sub {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.travel-map-picker__close {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 0;
  background: rgba(20, 33, 58, 0.08);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

html[data-appearance="dark"] .travel-map-picker__close {
  background: rgba(255, 255, 255, 0.08);
  color: #f3f6fb;
}

.travel-map-picker__canvas-wrap {
  position: relative;
  height: min(60vh, 416px) !important;
  margin: 0 1rem;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(20, 33, 58, 0.1);
  background: #dfe6f2;
}

html[data-appearance="dark"] .travel-map-picker__canvas-wrap {
  border-color: rgba(255, 255, 255, 0.1);
  background: #0d1422;
}

.travel-map-picker__canvas {
  width: 100%;
  height: 100%;
}

.travel-map-picker__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -22px 0 0 -9px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #ef4444;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  z-index: 2;
}

.travel-map-picker__pin::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}

.travel-map-picker__status {
  margin: 0.7rem 1rem 0;
  min-height: 1.2rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.travel-map-picker__foot {
  padding: 0.85rem 1rem 1.05rem;
}

.travel-map-picker__use {
  width: 100%;
  min-height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  cursor: pointer;
}

.travel-map-picker__use:disabled {
  opacity: 0.45;
  cursor: default;
}

html[data-appearance="dark"] .travel-map-picker__use {
  background: var(--fruiti-blue);
}

@media (max-width: 720px) {
  .travel-stage {
    width: 100%;
  }

  .travel-card {
    padding: 1rem 0.9rem;
  }
}

/* Filters sheet — right drawer, compact desktop chrome */
.filters-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  justify-items: end;
  align-items: stretch;
  padding: 0;
  background: rgba(7, 11, 18, 0.34);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.filters-sheet__panel {
  width: min(340px, 92vw);
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  border-left: 1px solid rgba(20, 33, 58, 0.08);
  background: #f2f2f7;
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

html[data-appearance="dark"] .filters-sheet__panel {
  background: #12151c;
  border-left-color: rgba(255, 255, 255, 0.08);
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.45);
}

.filters-sheet__scroll {
  flex: 1;
  overflow: auto;
  padding: 0.85rem 0.8rem 1.1rem;
  -webkit-overflow-scrolling: touch;
}

.filters-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.filters-sheet__head-left {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.filters-sheet__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  color: #111;
}

html[data-appearance="dark"] .filters-sheet__title {
  color: #f5f7fb;
}

.filters-sheet__clear {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border: 0;
  background: transparent;
  color: var(--fruiti-blue);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  padding: 0.15rem 0.1rem;
}

html[data-appearance="dark"] .filters-sheet__clear {
  color: #6ea8ff;
}

.filters-sheet__clear-icon,
.filters-sheet__reset span:first-child,
.filters-sheet__close svg,
.filters-sheet__row-icon svg,
.filters-sheet__row-chevron svg {
  width: 0.88rem;
  height: 0.88rem;
  display: block;
}

.filters-sheet__clear-icon {
  width: 0.78rem;
  height: 0.78rem;
}

.filters-sheet__close {
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 50%;
  background: #e5e5ea;
  color: #3a3a3c;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

html[data-appearance="dark"] .filters-sheet__close {
  background: #1c1f26;
  color: #fff;
}

.filters-sheet__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 10px;
  background: rgba(120, 120, 128, 0.12);
  margin-bottom: 0.4rem;
}

html[data-appearance="dark"] .filters-sheet__tabs {
  background: rgba(255, 255, 255, 0.06);
}

.filters-sheet__tab {
  border: 0;
  border-radius: 8px;
  min-height: 2rem;
  background: transparent;
  color: rgba(60, 60, 67, 0.72);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.filters-sheet__tab.is-selected {
  background: var(--fruiti-blue);
  color: #fff;
  font-weight: 650;
}

html[data-appearance="dark"] .filters-sheet__tab {
  color: rgba(156, 163, 175, 0.55);
}

html[data-appearance="dark"] .filters-sheet__tab.is-selected {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.filters-sheet__subtitle {
  margin: 0 0 0.6rem;
  color: #8e8e93;
  font-size: 0.72rem;
}

html[data-appearance="dark"] .filters-sheet__subtitle {
  color: #9ca3af;
}

.filters-sheet__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.filters-sheet__card {
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

html[data-appearance="dark"] .filters-sheet__card {
  background: #1c1f26;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.filters-sheet__row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.7rem 0.7rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.filters-sheet__row-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--fruiti-blue-soft);
  color: var(--fruiti-blue);
}

html[data-appearance="dark"] .filters-sheet__row-icon {
  background: rgba(110, 168, 255, 0.14);
  color: #6ea8ff;
}

.filters-sheet__row-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.filters-sheet__row-title {
  font-size: 0.88rem;
  font-weight: 650;
  color: #111;
}

html[data-appearance="dark"] .filters-sheet__row-title {
  color: #f5f7fb;
}

.filters-sheet__row-sub {
  font-size: 0.7rem;
  color: #8e8e93;
}

html[data-appearance="dark"] .filters-sheet__row-sub {
  color: #9ca3af;
}

.filters-sheet__row-chevron {
  color: #c7c7cc;
  transition: transform 180ms ease;
}

.filters-sheet__row-chevron.is-open {
  transform: rotate(180deg);
}

html[data-appearance="dark"] .filters-sheet__row-chevron {
  color: rgba(156, 163, 175, 0.75);
}

.filters-sheet__expanded {
  margin: 0 0.45rem 0.55rem;
  padding: 0.4rem 0.5rem 0.55rem;
  border-radius: 10px;
  background: rgba(120, 120, 128, 0.08);
}

html[data-appearance="dark"] .filters-sheet__expanded {
  background: rgba(0, 0, 0, 0.22);
}

.filters-sheet__expanded-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.35rem;
}

.filters-sheet__reset {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 0;
  background: transparent;
  color: var(--fruiti-blue);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  cursor: pointer;
}

html[data-appearance="dark"] .filters-sheet__reset {
  color: #6ea8ff;
}

.filters-sheet__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.filters-sheet__chip {
  border: 0.5px solid rgba(60, 60, 67, 0.18);
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.08);
  color: #3a3a3c;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.32rem 0.58rem;
  cursor: pointer;
}

.filters-sheet__chip.is-selected {
  background: var(--fruiti-blue-soft);
  border-color: rgba(52, 120, 246, 0.45);
  color: var(--fruiti-blue-deep);
}

html[data-appearance="dark"] .filters-sheet__chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #9ca3af;
}

html[data-appearance="dark"] .filters-sheet__chip.is-selected {
  background: rgba(110, 168, 255, 0.14);
  border-color: rgba(110, 168, 255, 0.45);
  color: #f5f7fb;
}

.filters-sheet__range {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.filters-sheet__range-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.filters-sheet__range-meta {
  display: flex;
  justify-content: space-between;
  color: #8e8e93;
  font-size: 0.7rem;
}

html[data-appearance="dark"] .filters-sheet__range-meta {
  color: #9ca3af;
}

.filters-sheet__slider {
  width: 100%;
  accent-color: var(--fruiti-blue);
}

html[data-appearance="dark"] .filters-sheet__slider {
  accent-color: #6ea8ff;
}

@media (max-width: 720px) {
  .filters-sheet {
    padding: 0;
    justify-items: stretch;
  }

  .filters-sheet__panel {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border-left: 0;
  }
}

/* Profile detail card */
.profile-card {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  max-width: var(--discover-max);
}

html[data-appearance="dark"] .profile-card {
  background: var(--panel-elevated);
}

.profile-card__media {
  min-height: 320px;
  background: #1e293b;
}

.profile-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-card__body {
  padding: 1.35rem 1.4rem;
}

.profile-card__bio {
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0.75rem 0 0;
}

/* Vibe & settings panels */
.vibe-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: var(--discover-max);
}

.vibe-panel__current {
  margin: 0;
  font-size: 0.95rem;
}

.vibe-panel__note {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 36rem;
}

.vibe-chip {
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 0.42rem 0.85rem;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
}

html[data-appearance="dark"] .vibe-chip {
  background: var(--panel);
}

/* ── Settings (iOS Settings tab parity, grouped web lists) ── */
.settings-stage {
  width: 100%;
  max-width: none;
  margin: 0;
}

.settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding: 0;
}

.settings-header__title {
  color: var(--page-title-color);
  background: none;
  -webkit-text-fill-color: unset;
  text-shadow: none;
}

/* Sections */
.settings-section {
  margin-bottom: 1.5rem;
}

.settings-section__title {
  margin: 0 0 0.5rem;
  padding: 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.settings-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(20, 33, 58, 0.08);
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(22, 38, 68, 0.06);
}

html[data-appearance="dark"] .settings-card {
  background: #1c1f26;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

/* Rows */
.settings-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 0;
  border-top: 1px solid rgba(20, 33, 58, 0.07);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--motion);
}

.settings-card > .settings-row:first-child {
  border-top: 0;
}

html[data-appearance="dark"] .settings-row {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.settings-row--static {
  cursor: default;
}

.settings-row:not(.settings-row--static):hover,
.settings-row:not(.settings-row--static):focus-visible {
  outline: none;
  background: rgba(52, 120, 246, 0.06);
}

html[data-appearance="dark"] .settings-row:not(.settings-row--static):hover,
html[data-appearance="dark"] .settings-row:not(.settings-row--static):focus-visible {
  background: rgba(255, 255, 255, 0.05);
}

.settings-row__icon {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  color: var(--fruiti-blue);
}

html[data-appearance="dark"] .settings-row__icon {
  color: #f2f4f8;
}

.settings-row__icon svg,
.settings-row__chevron svg,
.settings-back__icon svg,
.settings-banner__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.settings-row__copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.settings-row__title {
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.settings-row__sub {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

.settings-row__value {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.settings-row__chevron {
  display: inline-flex;
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  color: rgba(20, 33, 58, 0.28);
}

html[data-appearance="dark"] .settings-row__chevron {
  color: rgba(214, 224, 240, 0.42);
}

/* Switch */
.settings-switch {
  position: relative;
  flex-shrink: 0;
  width: 2.85rem;
  height: 1.65rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 33, 58, 0.18);
  cursor: pointer;
  transition: background var(--motion);
}

html[data-appearance="dark"] .settings-switch {
  background: rgba(255, 255, 255, 0.18);
}

.settings-switch.is-on {
  background: var(--fruiti-blue);
}

.settings-switch__knob {
  position: absolute;
  top: 0.16rem;
  left: 0.16rem;
  width: 1.33rem;
  height: 1.33rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: transform var(--motion);
}

.settings-switch.is-on .settings-switch__knob {
  transform: translateX(1.2rem);
}

/* Re-verify banner */
.settings-banner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin-bottom: 1.3rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(151, 118, 202, 0.3);
  background: rgba(151, 118, 202, 0.12);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-banner__icon {
  display: inline-flex;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  color: #9776ca;
}

.settings-banner__text {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

/* Account actions */
.settings-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: stretch;
  margin: 2rem 0 1rem;
}

.settings-action {
  min-height: 2.85rem;
  width: 100%;
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--motion), border-color var(--motion), opacity var(--motion);
}

.settings-action:disabled {
  opacity: 0.5;
  cursor: default;
}

.settings-action--primary {
  border-color: rgba(36, 96, 220, 0.35);
  background: linear-gradient(180deg, #6ea8ff 0%, var(--fruiti-blue) 48%, #2f6fe0 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(52, 120, 246, 0.26);
}

.settings-action--outline {
  border-color: rgba(52, 120, 246, 0.35);
  background: transparent;
  color: var(--fruiti-blue);
}

html[data-appearance="dark"] .settings-action--outline {
  border-color: rgba(110, 168, 255, 0.4);
  color: #9ec6ff;
}

.settings-action--danger {
  border-color: rgba(255, 59, 48, 0.4);
  background: transparent;
  color: #ff3b30;
}

.settings-action--subtle {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  min-height: 2.2rem;
}

/* Detail views */
.settings-detail__head {
  margin-bottom: 0.75rem;
}

.settings-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem 0.3rem 0.35rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fruiti-blue);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
}

html[data-appearance="dark"] .settings-back {
  color: #9ec6ff;
}

.settings-back:hover,
.settings-back:focus-visible {
  outline: none;
  background: rgba(52, 120, 246, 0.1);
}

.settings-back__icon {
  display: inline-flex;
  width: 0.9rem;
  height: 0.9rem;
}

.settings-detail__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  letter-spacing: var(--page-title-tracking);
  line-height: var(--page-title-leading);
  color: var(--page-title-color);
  background: none;
  -webkit-text-fill-color: unset;
  text-shadow: none;
}

.settings-detail__sub {
  margin: var(--page-sub-gap) 0 1.4rem;
  max-width: 34rem;
  font-size: var(--page-sub-size);
  line-height: var(--page-sub-leading);
  letter-spacing: var(--page-sub-tracking);
  color: var(--muted);
}

.settings-note {
  padding: 0.95rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(20, 33, 58, 0.08);
  background: rgba(52, 120, 246, 0.06);
}

html[data-appearance="dark"] .settings-note {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.settings-note__body {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

html[data-appearance="dark"] .settings-note__body {
  color: rgba(214, 224, 240, 0.85);
}

.settings-loading {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Forms */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.settings-field__label {
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.settings-field__input {
  width: 100%;
  min-height: 2.7rem;
  padding: 0.55rem 0.8rem;
  border-radius: 11px;
  border: 1px solid rgba(20, 33, 58, 0.14);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  outline: none;
}

.settings-field__input--area {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.45;
}

.settings-field__input:focus {
  border-color: rgba(52, 120, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(52, 120, 246, 0.14);
}

html[data-appearance="dark"] .settings-field__input {
  background: rgba(10, 14, 24, 0.5);
  border-color: rgba(255, 255, 255, 0.12);
}

.settings-form__msg {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.settings-form__msg.is-ok {
  color: #16a34a;
}

.settings-form__msg.is-error {
  color: var(--danger);
}

.acct-required {
  color: #ff3b30;
  font-weight: 800;
}

.acct-form .settings-field__label,
.acct-password-panel .settings-field__label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
}

.acct-field-error {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 59, 48, 0.95);
}

.settings-field__input.is-invalid {
  border-color: rgba(255, 59, 48, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.12);
}

.acct-password-toggle.is-open .settings-row__chevron {
  transform: rotate(90deg);
}

.acct-password-panel {
  border-top: 1px solid rgba(20, 33, 58, 0.07);
}

.acct-password-panel.is-collapsed {
  display: none !important;
}

html[data-appearance="dark"] .acct-password-panel {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.acct-password-actions {
  display: flex;
  gap: 0.55rem;
  justify-content: flex-end;
}

.acct-password-actions .settings-action {
  width: auto;
  min-width: 5.5rem;
  min-height: 2.4rem;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-size: 0.86rem;
}

.acct-password-actions .settings-action--subtle {
  border: 1px solid rgba(20, 33, 58, 0.12);
  background: rgba(20, 33, 58, 0.04);
  color: var(--ink-soft);
}

html[data-appearance="dark"] .acct-password-actions .settings-action--subtle {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

/* ── Notification preferences (web-native, not iOS Settings port) ── */
.notif-prefs {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 40rem;
  padding-bottom: 2rem;
}

.notif-prefs__heading {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: none;
}

.notif-prefs__blurb {
  margin: 0 0 0.75rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted);
}

.notif-prefs__list {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(20, 33, 58, 0.1);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

html[data-appearance="dark"] .notif-prefs__list {
  background: #1c1f26;
  border-color: rgba(255, 255, 255, 0.1);
}

.notif-pref {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 1.05rem;
  border-top: 1px solid rgba(20, 33, 58, 0.07);
  cursor: pointer;
}

.notif-prefs__list > .notif-pref:first-child {
  border-top: 0;
}

html[data-appearance="dark"] .notif-pref {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.notif-pref:hover,
.notif-pref:focus-within {
  background: rgba(52, 120, 246, 0.04);
}

html[data-appearance="dark"] .notif-pref:hover,
html[data-appearance="dark"] .notif-pref:focus-within {
  background: rgba(255, 255, 255, 0.04);
}

.notif-pref__copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.notif-pref__title {
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink);
}

.notif-pref__sub {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

.notif-pref__check {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--fruiti-blue);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── The Naughty List (web parity with BlockedUsersView) ─────────────────── */
.naughty-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 14px;
  background: rgba(20, 33, 58, 0.06);
  max-width: 40rem;
  margin-bottom: 1.5rem;
}

html[data-appearance="dark"] .naughty-tabs {
  background: rgba(255, 255, 255, 0.06);
}

.naughty-tab {
  appearance: none;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--motion), color var(--motion), box-shadow var(--motion);
}

.naughty-tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

html[data-appearance="dark"] .naughty-tab.is-active {
  background: #2a2f3a;
  color: #f2f4f8;
}

.naughty-panel {
  max-width: 40rem;
}

.naughty-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  min-height: 68px;
  border-top: 1px solid rgba(20, 33, 58, 0.07);
}

.settings-card > .naughty-row:first-child {
  border-top: 0;
}

html[data-appearance="dark"] .naughty-row {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.naughty-row__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #e2e8f4;
  color: #8291ad;
}

html[data-appearance="dark"] .naughty-row__avatar {
  background: #1f2d44;
  color: #6b7a97;
}

.naughty-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.naughty-row__avatar-fallback {
  display: inline-flex;
  width: 24px;
  height: 24px;
}

.naughty-row__avatar-fallback svg {
  width: 100%;
  height: 100%;
}

.naughty-row__name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.95rem;
  color: var(--ink);
}

.naughty-row__name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.naughty-row__verified {
  display: inline-flex;
  color: var(--fruiti-blue);
  flex-shrink: 0;
}

.naughty-row__time {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.naughty-row__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  border: 0;
  background: rgba(20, 33, 58, 0.06);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--motion), color var(--motion);
}

.naughty-row__btn:hover,
.naughty-row__btn:focus-visible {
  outline: none;
  background: rgba(20, 33, 58, 0.1);
  color: var(--ink);
}

html[data-appearance="dark"] .naughty-row__btn {
  background: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] .naughty-row__btn:hover,
html[data-appearance="dark"] .naughty-row__btn:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #f2f4f8;
}

.naughty-row__btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.naughty-row__btn-icon {
  display: inline-flex;
  width: 0.95rem;
  height: 0.95rem;
}

.naughty-row__btn-icon svg {
  width: 100%;
  height: 100%;
}

.naughty-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem;
}

.naughty-empty__icon {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(20, 33, 58, 0.06);
  color: var(--muted);
  margin-bottom: 0.25rem;
}

html[data-appearance="dark"] .naughty-empty__icon {
  background: rgba(255, 255, 255, 0.06);
}

.naughty-empty__icon svg {
  width: 44px;
  height: 44px;
}

.naughty-empty__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

.naughty-empty__body {
  margin: 0;
  max-width: 26rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Legal documents (Terms / Privacy / Community Guidelines) ───────────── */
.legal-doc__tools {
  display: flex;
  justify-content: flex-end;
  max-width: 44rem;
  margin-bottom: 0.25rem;
}

.legal-doc__website {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--fruiti-blue);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
}

html[data-appearance="dark"] .legal-doc__website {
  background: #1c1f26;
}

.legal-doc__website:disabled {
  opacity: 0.7;
  cursor: default;
}

.legal-doc__website-spinner {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  border: 2px solid rgba(52, 120, 246, 0.25);
  border-top-color: var(--fruiti-blue);
  animation: contact-spin 0.8s linear infinite;
  vertical-align: middle;
}

.legal-doc__content {
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 2.5rem;
}

.legal-doc__sections {
  display: flex;
  flex-direction: column;
}

.legal-doc__section {
  padding: 0.85rem 0;
}

.legal-doc__section-title {
  margin: 0 0 0.55rem;
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--ink);
}

.legal-doc__section-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.legal-doc__section-body p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft, var(--muted));
  white-space: pre-wrap;
}

.legal-doc__divider {
  border: 0;
  border-top: 1px solid rgba(20, 33, 58, 0.08);
  margin: 0.25rem 0;
}

html[data-appearance="dark"] .legal-doc__divider {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.legal-doc__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.5rem;
}

.legal-doc__meta-line {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.legal-doc__meta-line--version {
  font-size: 0.75rem;
}

/* ── Contact Us (iOS ContactUsView) ──────────────────────────────────────── */
.contact-card {
  max-width: 40rem;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid rgba(20, 33, 58, 0.07);
}

.contact-card > .contact-field:first-child {
  border-top: 0;
}

html[data-appearance="dark"] .contact-field {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.contact-field__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}

.contact-field__icon {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  color: var(--muted);
}

.contact-field__icon svg {
  width: 100%;
  height: 100%;
}

.contact-field__required {
  color: #e25555;
}

.contact-field__input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(20, 33, 58, 0.12);
  background: rgba(20, 33, 58, 0.03);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
}

html[data-appearance="dark"] .contact-field__input {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.contact-field__input:focus-visible {
  outline: none;
  border-color: var(--fruiti-blue);
}

.contact-field__area {
  min-height: 120px;
  resize: vertical;
  line-height: 1.45;
}

.contact-field__input.is-invalid {
  border-color: rgba(226, 85, 85, 0.6);
}

.contact-field__error {
  margin: 0;
  font-size: 0.75rem;
  color: #e25555;
}

.contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  max-width: 40rem;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

html[data-appearance="dark"] .contact-submit {
  background: #1c1f26;
}

.contact-submit.is-disabled {
  background: rgba(20, 33, 58, 0.05);
  box-shadow: none;
  color: var(--muted);
  cursor: default;
}

html[data-appearance="dark"] .contact-submit.is-disabled {
  background: rgba(255, 255, 255, 0.05);
}

.contact-submit__icon {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
}

.contact-submit__icon svg {
  width: 100%;
  height: 100%;
}

.contact-submit__spinner {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid rgba(20, 33, 58, 0.2);
  border-top-color: var(--fruiti-blue);
  animation: contact-spin 0.8s linear infinite;
}

html[data-appearance="dark"] .contact-submit__spinner {
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: var(--fruiti-blue);
}

@keyframes contact-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .contact-submit__spinner {
    animation-duration: 2.4s;
  }
}

/* ── Resources & Keeping You Safe (iOS ResourcesKeepingYouSafeView) ──────── */
.safety-hub,
.safety-guide {
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 2.5rem;
}

.safety-icon {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  color: var(--fruiti-blue);
}

.safety-icon svg {
  width: 100%;
  height: 100%;
}

.safety-hero {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.25rem;
}

.safety-hero__care {
  width: 1.85rem;
  height: 1.85rem;
  color: var(--fruiti-blue);
  animation: safety-care-pulse 1.8s ease-in-out infinite alternate;
}

@keyframes safety-care-pulse {
  from { transform: scale(0.96); }
  to { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .safety-hero__care {
    animation: none;
  }
}

.safety-hero__intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}

.safety-hero__reassure {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--muted);
}

.safety-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.safety-chip {
  display: inline-flex;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(20, 33, 58, 0.06);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 550;
}

html[data-appearance="dark"] .safety-chip {
  background: rgba(255, 255, 255, 0.08);
}

.safety-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.safety-section__title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.safety-section__intro {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

.safety-help-list,
.safety-ext-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.safety-help-card,
.safety-ext-card,
.safety-standards-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.95rem 1rem;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--motion), transform var(--motion);
}

html[data-appearance="dark"] .safety-help-card,
html[data-appearance="dark"] .safety-ext-card,
html[data-appearance="dark"] .safety-standards-card {
  background: #1c1f26;
}

.safety-help-card:hover,
.safety-ext-card:hover,
.safety-standards-card:hover,
.safety-help-card:focus-visible,
.safety-ext-card:focus-visible,
.safety-standards-card:focus-visible {
  outline: none;
  background: rgba(52, 120, 246, 0.05);
}

.safety-help-card__icon,
.safety-ext-card__icon,
.safety-standards-card__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--fruiti-blue);
}

.safety-help-card__copy,
.safety-ext-card__copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.safety-help-card__title,
.safety-ext-card__title,
.safety-standards-card__title {
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ink);
}

.safety-help-card__sub,
.safety-ext-card__sub {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

.safety-help-card__chevron,
.safety-ext-card__chevron,
.safety-standards-card__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--muted);
}

.safety-ext-card {
  grid-template-columns: auto 1fr auto auto;
}

.safety-ext-card__region {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
}

.safety-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 720px) {
  .safety-featured-grid {
    grid-template-columns: 1fr;
  }
}

.safety-featured-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 1rem;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 9.5rem;
}

html[data-appearance="dark"] .safety-featured-card {
  background: #1c1f26;
}

.safety-featured-card:hover,
.safety-featured-card:focus-visible {
  outline: none;
  background: rgba(52, 120, 246, 0.05);
}

.safety-featured-card__icon {
  width: 1.55rem;
  height: 1.55rem;
  color: var(--fruiti-blue);
}

.safety-featured-card__title {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.3;
}

.safety-featured-card__summary {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
  flex: 1;
}

.safety-featured-card__cta {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--fruiti-blue);
}

.safety-group-card {
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

html[data-appearance="dark"] .safety-group-card {
  background: #1c1f26;
}

.safety-group-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 0;
  border-top: 1px solid rgba(20, 33, 58, 0.07);
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.safety-group-card > .safety-group-row:first-child {
  border-top: 0;
}

html[data-appearance="dark"] .safety-group-row {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.safety-group-row:hover,
.safety-group-row:focus-visible {
  outline: none;
  background: rgba(52, 120, 246, 0.05);
}

.safety-group-row__icon {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--fruiti-blue);
}

.safety-group-row__copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.safety-group-row__title {
  font-size: 0.92rem;
  color: var(--ink);
}

.safety-group-row__sub {
  font-size: 0.76rem;
  color: var(--muted);
}

.safety-group-row__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--muted);
}

.safety-standards-card {
  grid-template-columns: auto 1fr auto;
}

/* Guide detail blocks */
.safety-guide__hero {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.safety-guide__subtitle {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}

.safety-guide__intro {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
}

.safety-guide__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.safety-guide__tag {
  color: var(--fruiti-blue);
  font-weight: 600;
}

.safety-block {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.safety-block__heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
}

.safety-block__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft, var(--muted));
}

.safety-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.safety-bullets li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft, var(--muted));
}

.safety-bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--fruiti-blue);
}

.safety-checklist,
.safety-callout,
.safety-dodont,
.safety-action-card {
  padding: 0.95rem 1rem;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

html[data-appearance="dark"] .safety-checklist,
html[data-appearance="dark"] .safety-callout,
html[data-appearance="dark"] .safety-dodont,
html[data-appearance="dark"] .safety-action-card {
  background: #1c1f26;
}

.safety-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.safety-checklist__row {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink-soft, var(--muted));
}

.safety-checklist__icon {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.1rem;
  color: var(--fruiti-blue);
}

.safety-callout {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  border-left: 3px solid var(--fruiti-blue);
}

.safety-callout--warning,
.safety-callout--crisis {
  border-left-color: #e25555;
}

.safety-callout--tip {
  border-left-color: #6ea8ff;
}

.safety-callout__icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--fruiti-blue);
}

.safety-callout__text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 550;
  line-height: 1.45;
  color: var(--ink);
}

.safety-dodont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 640px) {
  .safety-dodont {
    grid-template-columns: 1fr;
  }
}

.safety-dodont__label {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.safety-dodont__label--do {
  color: var(--fruiti-blue);
}

.safety-dodont__label--dont {
  color: #e25555;
}

.safety-dodont__item {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-soft, var(--muted));
}

.safety-action-card__title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ink);
}

.safety-action-card__body {
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

.safety-action-card__steps {
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-soft, var(--muted));
}

.safety-footer-cta {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 12px;
  background: var(--fruiti-blue);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
  text-align: center;
}

.safety-footer-cta:hover,
.safety-footer-cta:focus-visible {
  outline: none;
  filter: brightness(1.05);
}

.settings-inline-btn {
  flex-shrink: 0;
  min-height: 2rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(52, 120, 246, 0.3);
  background: transparent;
  color: var(--fruiti-blue);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}

html[data-appearance="dark"] .settings-inline-btn {
  border-color: rgba(110, 168, 255, 0.4);
  color: #9ec6ff;
}

.settings-inline-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Dialog — centred in the workspace, matching the map picker */
.settings-dialog {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 1rem 1rem 1rem calc(var(--frame-pad) + var(--cc-w));
  background: rgba(7, 11, 18, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.settings-dialog__panel {
  width: min(30rem, 100%);
  max-height: min(90vh, 44rem);
  overflow: auto;
  padding: 1.35rem 1.35rem 1.15rem;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
}

html[data-appearance="dark"] .settings-dialog__panel {
  background: #151b28;
}

.settings-dialog__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.settings-dialog__body {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

.settings-dialog__panel .settings-form {
  padding: 0 0 0.5rem;
}

.settings-dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.settings-dialog__btn {
  min-height: 2.5rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
}

.settings-dialog__btn--ghost {
  border-color: rgba(20, 33, 58, 0.12);
  background: transparent;
  color: var(--ink-soft);
}

html[data-appearance="dark"] .settings-dialog__btn--ghost {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(214, 224, 240, 0.85);
}

.settings-dialog__btn--primary {
  background: var(--fruiti-blue);
  color: #fff;
}

.settings-dialog__btn--danger {
  background: #ff3b30;
  color: #fff;
}

.settings-dialog__btn:disabled {
  opacity: 0.55;
  cursor: default;
}

@media (max-width: 900px) {
  .settings-dialog {
    padding: 1rem;
  }

  .settings-header {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ── Smart Verify flow (iOS SmartVerifyFlowView parity) ── */
.sv-flow {
  position: fixed;
  inset: 0;
  z-index: 97;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 1rem 1rem 1rem calc(var(--frame-pad) + var(--cc-w));
  background: rgba(7, 11, 18, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.sv-flow__panel {
  width: min(28rem, 100%);
  max-height: min(94vh, 52rem);
  overflow: auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.35);
  color: #1c1c1e;
}

html[data-appearance="dark"] .sv-flow__panel {
  background: #0e121a;
  color: #f2f4f8;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sv-screen {
  padding: 1.6rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  min-height: 22rem;
}

.sv-screen--camera {
  padding: 0;
  min-height: min(78vh, 40rem);
  background: #05070c;
  color: #fff;
}

.sv-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.sv-sub {
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #8e8e93;
}

html[data-appearance="dark"] .sv-sub {
  color: rgba(242, 244, 248, 0.55);
}

.sv-intro__hero {
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}

.sv-intro__mark {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  background: rgba(52, 120, 246, 0.12);
  color: var(--fruiti-blue);
}

.sv-intro__mark svg {
  width: 1.7rem;
  height: 1.7rem;
}

.sv-benefits {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sv-benefits__item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.86rem;
  line-height: 1.4;
  color: #3a3a3c;
}

html[data-appearance="dark"] .sv-benefits__item {
  color: rgba(242, 244, 248, 0.78);
}

.sv-benefits__item strong {
  color: inherit;
  font-weight: 700;
}

.sv-benefits__check {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(52, 120, 246, 0.14);
  color: var(--fruiti-blue);
  font-size: 0.72rem;
  font-weight: 800;
}

.sv-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: auto;
}

.sv-btn {
  min-height: 2.85rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border-radius: 14px;
  border: 0;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.sv-btn--primary {
  background: linear-gradient(180deg, #6ea8ff 0%, var(--fruiti-blue) 52%, #2f6fe0 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(52, 120, 246, 0.28);
}

.sv-btn--ghost {
  background: transparent;
  color: var(--fruiti-blue);
}

html[data-appearance="dark"] .sv-btn--ghost {
  color: #9ec6ff;
}

.sv-permission__icon {
  width: 3.2rem;
  height: 3.2rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(52, 120, 246, 0.12);
  color: var(--fruiti-blue);
}

.sv-permission__icon svg {
  width: 1.55rem;
  height: 1.55rem;
}

.sv-screen--processing {
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

.sv-status-card {
  width: min(18rem, 100%);
  padding: 1.4rem 1.2rem;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  text-align: center;
}

html[data-appearance="light"] .sv-screen--processing {
  background: rgba(20, 33, 58, 0.06);
}

html[data-appearance="light"] .sv-status-card {
  background: #1c1f26;
}

.sv-status-card__title {
  margin: 0.85rem 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.sv-status-card__msg {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
}

.sv-spinner {
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.2);
  border-top-color: #6ea8ff;
  animation: sv-spin 0.8s linear infinite;
}

@keyframes sv-spin {
  to {
    transform: rotate(360deg);
  }
}

.sv-result__mark {
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 800;
}

.sv-result__mark.is-ok {
  background: rgba(52, 168, 120, 0.16);
  color: #34a878;
}

.sv-result__mark.is-review {
  background: rgba(52, 120, 246, 0.16);
  color: var(--fruiti-blue);
}

.sv-result__mark.is-error {
  background: rgba(255, 59, 48, 0.14);
  color: #ff3b30;
}

.sv-camera__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem 0.5rem;
}

.sv-camera__step {
  margin: 0;
  flex: 1;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
}

.sv-camera__close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.sv-camera__stage {
  position: relative;
  margin: 0.4rem 1rem;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  aspect-ratio: 3 / 4;
  max-height: 52vh;
}

.sv-camera__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.sv-camera__oval {
  position: absolute;
  inset: 10% 14%;
  border: 2.5px solid rgba(110, 168, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

.sv-camera__banner {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  max-width: 88%;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  backdrop-filter: blur(6px);
}

.sv-camera__progress {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 3.2rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.sv-camera__progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--fruiti-blue);
  transition: width 80ms linear;
}

.sv-camera__foot {
  display: grid;
  place-items: center;
  padding: 1rem 1rem 1.35rem;
}

.sv-camera__capture {
  min-width: 8.5rem;
  min-height: 3rem;
  padding: 0.65rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.55);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 750;
  cursor: default;
}

.sv-camera__capture.is-ready {
  background: rgba(110, 168, 255, 0.95);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(52, 120, 246, 0.35);
}

.sv-camera__capture:disabled {
  opacity: 1;
}

@media (max-width: 900px) {
  .sv-flow {
    padding: 0.75rem;
  }

  .sv-flow__panel {
    width: min(100%, 28rem);
    max-height: 96vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-spinner {
    animation: none;
  }
}

/* ── Choose Your Plan (iOS SubscriptionView parity) ── */
.cyp-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  letter-spacing: var(--page-title-tracking);
  line-height: var(--page-title-leading);
  color: var(--page-title-color);
  background: none;
  -webkit-text-fill-color: unset;
  text-shadow: none;
}

.cyp-sub {
  margin: var(--page-sub-gap) 0 1.4rem;
  max-width: 36rem;
  font-size: var(--page-sub-size);
  line-height: var(--page-sub-leading);
  letter-spacing: var(--page-sub-tracking);
  color: var(--muted);
}

.cyp-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 2.5rem;
}

.cyp-card {
  position: relative;
  padding: 1.25rem;
  border-radius: 16px;
  border: 1px solid rgba(20, 33, 58, 0.1);
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(22, 38, 68, 0.06);
}

html[data-appearance="dark"] .cyp-card {
  background: #1c1f26;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

.cyp-card.is-current {
  border-color: rgba(52, 120, 246, 0.45);
}

.cyp-card--accent {
  border: 2px solid rgba(52, 120, 246, 0.55);
  box-shadow:
    0 0 0 1px rgba(110, 168, 255, 0.25),
    0 10px 28px rgba(52, 120, 246, 0.14);
}

html[data-appearance="dark"] .cyp-card--accent {
  border-color: rgba(110, 168, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(110, 168, 255, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.35);
}

.cyp-card__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cyp-card__title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.cyp-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cyp-card__check {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--fruiti-blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.cyp-card__badge {
  margin-left: auto;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--fruiti-blue);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.cyp-card__price {
  margin: 0.45rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.cyp-card__amount {
  font-size: 1.55rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.cyp-card__period {
  font-size: 0.88rem;
  color: var(--muted);
}

.cyp-card__status {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--fruiti-blue);
}

.cyp-features {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.cyp-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--ink);
}

.cyp-feature__check {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(52, 120, 246, 0.14);
  color: var(--fruiti-blue);
  font-size: 0.65rem;
  font-weight: 800;
}

.cyp-feature__paren {
  color: var(--muted);
  font-weight: 500;
}

.cyp-upgrade {
  margin-top: 1.1rem;
  width: 100%;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(52, 120, 246, 0.35);
  background: rgba(52, 120, 246, 0.12);
  color: var(--fruiti-blue);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 750;
  cursor: pointer;
  transition: opacity var(--motion), background var(--motion);
}

.cyp-upgrade:hover:not(:disabled),
.cyp-upgrade:focus-visible:not(:disabled) {
  outline: none;
  background: rgba(52, 120, 246, 0.18);
}

.cyp-upgrade:disabled,
.cyp-upgrade.is-busy {
  opacity: 0.6;
  cursor: default;
}

.cyp-upgrade__chev {
  font-size: 1.2rem;
  line-height: 1;
}

.cyp-upgrade--manage {
  margin-top: 0.65rem;
  background: transparent;
  color: var(--fruiti-blue);
  border: 1px solid rgba(11, 124, 255, 0.35);
}

.cyp-upgrade--manage:hover:not(:disabled),
.cyp-upgrade--manage:focus-visible:not(:disabled) {
  background: rgba(11, 124, 255, 0.08);
}

/* Stripe Embedded Checkout popup (Fruiti+ Upgrade) */
.fruiti-stripe-checkout {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 10, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fruiti-stripe-checkout__panel {
  width: min(32rem, 100%);
  max-height: min(92vh, 52rem);
  overflow: auto;
  border-radius: 18px;
  background: var(--panel-elevated, #141a28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
  padding: 1rem 1rem 1.25rem;
}

.fruiti-stripe-checkout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.fruiti-stripe-checkout__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.fruiti-stripe-checkout__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  border-radius: 8px;
}

.fruiti-stripe-checkout__close:hover,
.fruiti-stripe-checkout__close:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}

.fruiti-stripe-checkout__status {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.fruiti-stripe-checkout__status.is-error {
  color: #f87171;
}

.fruiti-stripe-checkout__mount {
  min-height: 18rem;
}

.cyp-card__footer {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  background: rgba(52, 120, 246, 0.08);
  border: 1px solid rgba(52, 120, 246, 0.15);
}

.cyp-card__shield {
  flex-shrink: 0;
  font-size: 0.95rem;
  line-height: 1.3;
}

.cyp-card__footer-text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

html[data-appearance="dark"] .cyp-card__footer-text {
  color: rgba(214, 224, 240, 0.82);
}

.cyp-celebrate {
  position: fixed;
  inset: 0;
  z-index: 98;
  display: grid;
  place-items: center;
  padding: 1rem 1rem 1rem calc(var(--frame-pad) + var(--cc-w));
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

.cyp-celebrate__card {
  width: min(22rem, 100%);
  padding: 1.5rem 1.35rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
  text-align: center;
}

html[data-appearance="dark"] .cyp-celebrate__card {
  background: rgba(28, 31, 38, 0.94);
}

.cyp-celebrate__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
}

@media (max-width: 900px) {
  .cyp-celebrate {
    padding: 1rem;
  }
}

/* Toast */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(92vw, 420px);
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-nav);
  background: var(--ink);
  border: 1px solid var(--line-strong);
  color: #fff;
  box-shadow: var(--shadow-md);
  font-size: 0.88rem;
  line-height: 1.4;
}

html[data-appearance="dark"] .app-toast {
  background: var(--surface);
  color: var(--ink);
}

.app-mobile-nav {
  display: none;
}

/* ——— Reduced motion ——— */
@media (prefers-reduced-motion: reduce) {
  .app-workspace.is-enter,
  .app-boot__pulse,
  .disc-card--skeleton,
  .list-skeleton,
  .story-rail--skeleton .story-rail__skel {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ——— Responsive breakpoints ——— */

/* Tighten workspace padding on mid/small desktops — content still fills width */
@media (max-width: 1440px) {
  :root,
  html[data-appearance="light"],
  html[data-appearance="dark"] {
    --workspace-pad-x: clamp(20px, 3.2vw, 44px);
    --workspace-pad-y: clamp(24px, 3.5vh, 42px);
  }
}

@media (max-width: 1280px) {
  :root,
  html[data-appearance="light"],
  html[data-appearance="dark"] {
    --workspace-pad-x: clamp(18px, 3vw, 36px);
  }
}

/* 1100 — 2-col grid, hide vibe callout */
@media (max-width: 1100px) {
  :root,
  html[data-appearance="light"],
  html[data-appearance="dark"] {
    --workspace-pad-x: 32px;
    --workspace-pad-y: 36px;
    --brand-icon-size: 72px;
    --brand-icon-wrapper-size: 90px;
    --brand-icon-pad: 0px;
    --brand-icon-radius: 22%;
  }

  .control-centre__inner {
    padding-top: 43px;
  }

  .discover-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1.15rem;
  }

  .discover-header__divider {
    display: none;
  }

  .discover-vibe {
    width: 100%;
    min-width: 0;
    flex: none;
  }

  .discover-stories,
  .story-shell {
    width: 100%;
    flex: none;
  }

  .vibe-select__opt {
    flex: 1 1 0;
    width: auto;
  }

  .disc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .profile-card {
    grid-template-columns: 1fr;
  }
}

/* 900 — mobile drawer & bottom nav */
@media (max-width: 900px) {
  .travel-map-picker {
    /* The control centre becomes an overlay drawer at this breakpoint. */
    padding: 1rem;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  :root,
  html[data-appearance="light"],
  html[data-appearance="dark"] {
    --brand-icon-size: 68px;
    --brand-icon-wrapper-size: 86px;
    --brand-icon-pad: 0px;
    --brand-icon-radius: 22%;
  }

  .control-centre__inner {
    padding-top: 43px;
  }

  .cc-brand__frame {
    animation: none;
    transform: none;
  }

  .cc-menu-btn {
    display: grid;
    place-items: center;
  }

  .control-centre {
    position: fixed;
    z-index: 70;
    inset: var(--frame-pad) auto var(--frame-pad) var(--frame-pad);
    width: min(300px, calc(100vw - 2 * var(--frame-pad)));
    min-width: 0;
    max-width: min(300px, calc(100vw - 2 * var(--frame-pad)));
    border-radius: calc(var(--radius-shell) - 4px);
    border: 1px solid var(--sidebar-line);
    transform: translateX(calc(-100% - 24px));
    transition: transform var(--motion);
  }

  body.cc-drawer-open .control-centre {
    transform: none;
  }

  body.cc-drawer-open .cc-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
  }

  .app-workspace {
    padding: 3.6rem 1rem 5.4rem;
  }

  .app-workspace.is-me-flush {
    padding: 3.6rem 0 5.4rem;
    overflow: auto;
  }

  .app-mobile-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: var(--frame-pad);
    right: var(--frame-pad);
    bottom: max(var(--frame-pad), env(safe-area-inset-bottom));
    z-index: 50;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }

  html[data-appearance="dark"] .app-mobile-nav {
    background: var(--panel-elevated);
  }

  .app-mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    min-height: 3.5rem;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    transition: color var(--motion);
  }

  .app-mobile-nav a.is-active {
    color: var(--fruiti-blue);
  }
}

/* 720 — denser 3-col mobile grid */
@media (max-width: 720px) {
  :root {
    --stage-gap-header: 22px;
    --stage-gap-vibe: 16px;
    --stage-gap-stories: 10px;
  }

  .disc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .vibe-select__label {
    font-size: 0.72rem;
  }

  .vibe-select__track {
    gap: 0.3rem;
  }

  .vibe-select__opt {
    min-height: 3.05rem;
    padding: 0.42rem 0.3rem;
    border-radius: 13px;
    gap: 0.24rem;
  }

  .vibe-select__icon svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .page-title {
    font-size: 1.75rem;
  }
}

/* 420 — 2-col grid on smallest screens */
@media (max-width: 420px) {
  .disc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .app-workspace {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Mid desktop — 4 cards when the stage narrows (above the 980 stacked layout) */
@media (max-width: 1180px) and (min-width: 981px) {
  .disc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
  }
}

/* 1600+ — keep 5-up so cards breathe on wide workspaces */
@media (min-width: 1600px) {
  .disc-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

/* ── My Profile (Me workspace) + Edit Profile ─────────────────────────────── */
/* Full-bleed photo-first stage inside .app-workspace.is-me-flush (no floating card). */
.page-me {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.me-stage {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.55fr);
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-appearance="dark"] .me-stage {
  border: 0;
  box-shadow: none;
}

.me-stage__photo {
  position: relative;
  min-width: 0;
  height: 100%;
  background:
    radial-gradient(circle at 28% 18%, rgba(91, 142, 245, 0.28), transparent 52%),
    linear-gradient(165deg, #152238 0%, #0b1220 100%);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(20, 33, 58, 0.08);
}

.me-stage__photo.is-empty {
  overflow: hidden;
  isolation: isolate;
  background: #c9d2e0;
}

.me-stage__photo.is-empty::before,
.me-stage__photo.is-empty::after {
  content: none;
  display: none;
}

html[data-appearance="dark"] .me-stage__photo {
  border-right-color: rgba(255, 255, 255, 0.06);
}

html[data-appearance="dark"] .me-stage__photo.is-empty {
  background: #1a2436;
}

/* Animated frosted wash — real color blobs, not gray-on-gray */
.me-empty-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(160deg, #d7deea 0%, #c2cbda 45%, #b7c3d6 100%);
}

html[data-appearance="dark"] .me-empty-wash {
  background:
    linear-gradient(160deg, #243044 0%, #1a2436 48%, #141c2b 100%);
}

.me-empty-wash__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(54px);
  opacity: 0.9;
  will-change: transform;
}

.me-empty-wash__blob--a {
  width: 78%;
  height: 62%;
  top: -18%;
  left: -22%;
  background: radial-gradient(circle, #8eb6f8 0%, rgba(142, 182, 248, 0.15) 70%, transparent 100%);
  animation: me-empty-blob-a 11s ease-in-out infinite alternate;
}

.me-empty-wash__blob--b {
  width: 70%;
  height: 58%;
  right: -24%;
  bottom: -16%;
  background: radial-gradient(circle, #b7a6ef 0%, rgba(183, 166, 239, 0.18) 68%, transparent 100%);
  animation: me-empty-blob-b 14s ease-in-out infinite alternate;
}

.me-empty-wash__blob--c {
  width: 58%;
  height: 48%;
  left: 28%;
  top: 38%;
  background: radial-gradient(circle, #9fd6d0 0%, rgba(159, 214, 208, 0.16) 65%, transparent 100%);
  animation: me-empty-blob-c 12.5s ease-in-out infinite alternate;
}

.me-empty-wash__blob--d {
  width: 52%;
  height: 44%;
  left: 8%;
  bottom: -10%;
  background: radial-gradient(circle, #f0c9b4 0%, rgba(240, 201, 180, 0.14) 66%, transparent 100%);
  animation: me-empty-blob-d 16s ease-in-out infinite alternate;
}

html[data-appearance="dark"] .me-empty-wash__blob--a {
  background: radial-gradient(circle, #4f7ecf 0%, rgba(79, 126, 207, 0.22) 70%, transparent 100%);
}

html[data-appearance="dark"] .me-empty-wash__blob--b {
  background: radial-gradient(circle, #7a68b8 0%, rgba(122, 104, 184, 0.24) 68%, transparent 100%);
}

html[data-appearance="dark"] .me-empty-wash__blob--c {
  background: radial-gradient(circle, #3f9a92 0%, rgba(63, 154, 146, 0.2) 65%, transparent 100%);
}

html[data-appearance="dark"] .me-empty-wash__blob--d {
  background: radial-gradient(circle, #b88468 0%, rgba(184, 132, 104, 0.18) 66%, transparent 100%);
}

@keyframes me-empty-blob-a {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(18%, 14%, 0) scale(1.18); }
}

@keyframes me-empty-blob-b {
  0% { transform: translate3d(0, 0, 0) scale(1.05); }
  100% { transform: translate3d(-16%, -12%, 0) scale(1.22); }
}

@keyframes me-empty-blob-c {
  0% { transform: translate3d(-8%, 6%, 0) scale(0.95); }
  100% { transform: translate3d(12%, -10%, 0) scale(1.2); }
}

@keyframes me-empty-blob-d {
  0% { transform: translate3d(6%, -4%, 0) scale(1); }
  100% { transform: translate3d(-10%, 12%, 0) scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .me-empty-wash__blob {
    animation: none !important;
    will-change: auto;
  }
}

.me-stage__panel {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-appearance="dark"] .me-stage__panel {
  background: transparent;
}

.me-stage__chrome {
  padding: 1.35rem 1.75rem 0.95rem;
}

.me-gallery {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.me-gallery__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  overflow: hidden;
  background: transparent;
}

.me-gallery__hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.me-gallery__empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.5rem;
  text-align: center;
  background: transparent;
}

.me-gallery__empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: rgba(20, 33, 58, 0.78);
}

html[data-appearance="dark"] .me-gallery__empty-title {
  color: rgba(241, 245, 249, 0.9);
}

.me-gallery__empty-sub {
  margin: 0 0 0.55rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(20, 33, 58, 0.52);
  max-width: 14rem;
}

html[data-appearance="dark"] .me-gallery__empty-sub {
  color: rgba(214, 224, 240, 0.68);
}

.me-gallery__empty-cta {
  width: 3rem;
  height: 3rem;
  box-shadow: 0 10px 24px rgba(52, 120, 246, 0.28);
}

.me-gallery__empty-cta .me-action-icon {
  width: 1.3rem;
  height: 1.3rem;
}

.me-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 0;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.me-gallery__nav--prev { left: 0.55rem; }
.me-gallery__nav--next { right: 0.55rem; }

.me-gallery__strip {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.55rem 0.75rem;
  background: rgba(2, 6, 23, 0.35);
}

.me-gallery__thumb {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 9px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: #1e293b;
  cursor: pointer;
}

.me-gallery__thumb.is-active {
  border-color: #93c5fd;
}

.me-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.me-identity {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.me-identity__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.me-identity__copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.me-identity__name-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.me-identity__incognito {
  display: contents;
}

.me-presence-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.22rem 0.58rem 0.22rem 0.44rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 70%, var(--line));
  color: var(--muted);
}

.me-presence-pill__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.me-presence-pill--active {
  color: #15803d;
  background: color-mix(in srgb, #22c55e 14%, var(--bg));
}

.me-presence-pill--recent {
  color: #a16207;
  background: color-mix(in srgb, #eab308 14%, var(--bg));
}

.me-presence-pill--hunting {
  color: var(--fruiti-blue);
  background: color-mix(in srgb, var(--fruiti-blue) 12%, var(--bg));
}

.me-presence-pill--offline {
  color: var(--muted);
}

.me-identity__verified {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fruiti-blue);
  border: 1px solid color-mix(in srgb, var(--fruiti-blue) 40%, transparent);
  background: color-mix(in srgb, var(--fruiti-blue) 10%, transparent);
  border-radius: 999px;
  padding: 0.16rem 0.48rem;
}

.me-identity__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
  letter-spacing: -0.045em;
  line-height: 1.02;
  font-weight: 750;
  color: var(--ink, var(--text));
}

.me-identity__name-empty {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--muted);
  line-height: 1.1;
}

.me-identity__status,
.me-identity__bio {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.4;
  max-width: 36rem;
}

.me-identity__status-empty {
  margin: 0;
  color: rgba(20, 33, 58, 0.5);
  font-size: 0.84rem;
  font-weight: 600;
}

.me-identity__status-empty::before {
  content: "“";
  margin-right: 0.18rem;
  color: var(--fruiti-blue);
  font-family: Georgia, serif;
  font-size: 1.05rem;
}

html[data-appearance="dark"] .me-identity__status-empty {
  color: rgba(214, 224, 240, 0.62);
}

.me-identity__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.me-fact {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
}

.me-chips {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.26rem;
  margin: 0;
  padding: 0.28rem;
  border: 1px solid rgba(20, 33, 58, 0.08);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(240, 243, 248, 0.54));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 22px rgba(22, 38, 68, 0.06);
}

html[data-appearance="dark"] .me-chips {
  border-color: rgba(255, 255, 255, 0.09);
  background: linear-gradient(145deg, rgba(46, 57, 76, 0.8), rgba(21, 29, 43, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 9px 24px rgba(0, 0, 0, 0.18);
}

.me-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.me-chip:hover,
.me-chip:focus-visible {
  border-color: color-mix(in srgb, var(--fruiti-blue) 45%, var(--line));
  transform: translateY(-1px);
}

.me-chip--primary {
  background: var(--fruiti-blue);
  border-color: var(--fruiti-blue);
  color: #fff;
  box-shadow: 0 8px 18px rgba(52, 120, 246, 0.28);
}

.me-chip--primary:hover,
.me-chip--primary:focus-visible {
  filter: brightness(1.04);
}

.me-chip--danger {
  color: #b91c1c;
  border-color: color-mix(in srgb, #b91c1c 35%, var(--line));
}

.me-chip--muted {
  opacity: 0.7;
}

.me-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.me-icon-btn {
  appearance: none;
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(20, 33, 58, 0.1);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 244, 248, 0.92) 100%);
  color: rgba(20, 33, 58, 0.72);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 3px 10px rgba(22, 38, 68, 0.07);
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.me-icon-btn:hover,
.me-icon-btn:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--fruiti-blue) 45%, var(--line));
  color: var(--fruiti-blue);
  box-shadow: 0 7px 16px rgba(22, 38, 68, 0.1);
}

.me-icon-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--fruiti-blue) 72%, white);
  outline-offset: 2px;
}

.me-icon-btn--primary {
  color: var(--fruiti-blue);
  border-color: color-mix(in srgb, var(--fruiti-blue) 28%, rgba(20, 33, 58, 0.1));
  background:
    linear-gradient(145deg, #ffffff 0%, #eef3fb 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 15px rgba(52, 120, 246, 0.12);
}

.me-icon-btn--muted {
  color: var(--muted);
  opacity: 0.72;
}

.me-action-icon {
  width: 1.28rem;
  height: 1.28rem;
  display: inline-grid;
  place-items: center;
}

.me-action-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-appearance="dark"] .me-icon-btn {
  color: rgba(222, 230, 242, 0.8);
  border-color: rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(145deg, rgba(49, 61, 82, 0.96) 0%, rgba(25, 34, 50, 0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 5px 14px rgba(0, 0, 0, 0.22);
}

html[data-appearance="dark"] .me-icon-btn:hover,
html[data-appearance="dark"] .me-icon-btn:focus-visible,
html[data-appearance="dark"] .me-icon-btn--primary {
  color: #a9c5ff;
  border-color: rgba(154, 188, 255, 0.28);
  background:
    linear-gradient(145deg, rgba(55, 68, 91, 0.98) 0%, rgba(27, 37, 54, 0.98) 100%);
}

.me-toolbar {
  display: flex;
  padding: 0.25rem 1.75rem 0.95rem;
}

.me-tabs {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.me-tabs__seg {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem;
  padding: 0.3rem;
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(238, 241, 247, 0.92), rgba(225, 230, 239, 0.72));
  border: 1px solid rgba(20, 33, 58, 0.09);
  box-shadow:
    inset 0 1px 3px rgba(15, 23, 42, 0.06),
    0 8px 22px rgba(22, 38, 68, 0.05);
}

.me-tabs__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 0.52rem 1.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 0;
  width: 100%;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.me-tabs__btn.is-active {
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(247, 248, 251, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 12px rgba(22, 38, 68, 0.08);
}

html[data-appearance="dark"] .me-tabs__seg {
  background:
    linear-gradient(145deg, rgba(25, 34, 49, 0.92), rgba(12, 19, 31, 0.88));
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.28),
    0 10px 26px rgba(0, 0, 0, 0.16);
}

html[data-appearance="dark"] .me-tabs__btn.is-active {
  color: #f3f6fb;
  background:
    linear-gradient(145deg, rgba(57, 72, 98, 0.98), rgba(31, 43, 64, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 5px 14px rgba(0, 0, 0, 0.22);
}

.me-incognito {
  color: var(--muted);
}

.me-incognito.is-on {
  color: var(--fruiti-blue);
  border-color: color-mix(in srgb, var(--fruiti-blue) 32%, var(--line));
  background:
    linear-gradient(145deg, #ffffff 0%, color-mix(in srgb, var(--fruiti-blue) 9%, #eef1f6) 100%);
}

html[data-appearance="dark"] .me-incognito.is-on {
  color: #a9c5ff;
  border-color: rgba(154, 188, 255, 0.3);
  background:
    linear-gradient(145deg, rgba(60, 74, 99, 0.98), rgba(30, 41, 60, 0.98));
}

.me-body {
  flex: 1 1 auto;
  padding: 0 1.75rem 1.5rem;
  min-height: 0;
  overflow: auto;
  border-top: 1px solid rgba(20, 33, 58, 0.07);
}

html[data-appearance="dark"] .me-body {
  border-top-color: rgba(255, 255, 255, 0.07);
}

.me-glow-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0.25rem;
  min-width: 0;
}

.me-glow-divider {
  height: 1px;
  margin: 0 0.15rem;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(20, 33, 58, 0.12) 7%,
      rgba(20, 33, 58, 0.12) 93%,
      transparent
    );
}

html[data-appearance="dark"] .me-glow-divider {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.12) 7%,
      rgba(255, 255, 255, 0.12) 93%,
      transparent
    );
}

.me-who {
  min-width: 0;
  padding: 1rem 0.15rem;
}

.me-who--gate {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto auto;
  align-items: center;
  gap: 0.85rem;
}

.me-who__teaser {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  padding-left: 0.7rem;
  filter: blur(0.8px);
  opacity: 0.62;
  pointer-events: none;
}

.me-who__ghost {
  width: 2.35rem;
  height: 2.35rem;
  margin-left: -0.7rem;
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(185, 194, 208, 0.68), rgba(126, 140, 162, 0.38));
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.1);
}

.me-who__summary {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.me-who__hint {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--muted);
  white-space: nowrap;
}

.me-who__cta {
  margin: 0;
  white-space: nowrap;
  padding: 0.42rem 0.78rem;
  color: rgba(20, 33, 58, 0.65);
  border-color: rgba(20, 33, 58, 0.1);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(240, 243, 248, 0.48));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 650;
}

.me-who__cta:hover,
.me-who__cta:focus-visible {
  color: var(--fruiti-blue);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(237, 242, 250, 0.64));
  box-shadow: 0 4px 12px rgba(22, 38, 68, 0.06);
}

.me-who__fail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.35rem 0 0;
}

.me-who__fail .me-quiet-empty {
  margin: 0;
}

.me-who__retry {
  margin: 0;
}

html[data-appearance="dark"] .me-who__cta {
  color: rgba(214, 224, 240, 0.76);
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-appearance="dark"] .me-who__cta:hover,
html[data-appearance="dark"] .me-who__cta:focus-visible {
  color: #a9c5ff;
  border-color: rgba(154, 188, 255, 0.2);
  background:
    linear-gradient(145deg, rgba(91, 111, 145, 0.18), rgba(255, 255, 255, 0.035));
}

.me-meet-vibes {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(20, 33, 58, 0.07);
  background: rgba(255, 255, 255, 0.36);
}

html[data-appearance="dark"] .me-meet-vibes {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.me-receipts {
  padding-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.me-receipts__social {
  margin: 0 0 0.85rem;
  justify-content: flex-start;
}

.me-receipts__bio-block {
  margin: 0 0 1rem;
}

.me-receipts__bio-block .peer-receipt__caption {
  margin-bottom: 0.4rem;
}

.me-quiet-empty {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.me-receipts__bio {
  margin: 0;
  line-height: 1.45;
  color: var(--ink);
  font-size: 0.9375rem;
}

/* Legacy Me receipt grid — kept only if referenced; primary chrome is .peer-receipt* */
.me-receipts__section {
  margin: 1rem 0 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.me-receipts__section:first-child {
  margin-top: 0;
}

.me-receipts__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.me-receipts__link {
  color: var(--fruiti-blue);
  font-weight: 650;
  text-decoration: none;
}

.me-receipts__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
}

.me-receipts__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.me-receipts__label {
  color: var(--muted);
}

.me-receipts__value {
  font-weight: 600;
  text-align: right;
}

.me-who__title,
.me-meet-vibes__title,
.me-tiles__heading {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.me-who__row,
.me-who__head,
.me-tiles__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
  margin-bottom: 0.95rem;
}

.me-tiles {
  padding: 1.25rem 0.15rem 0;
}

.me-temporal {
  display: inline-flex;
  gap: 0.12rem;
  padding: 0.14rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 70%, var(--line));
  border: 1px solid var(--line);
}

.me-temporal__btn {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
  color: var(--muted);
}

.me-temporal__btn.is-active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.me-tiles__list--aura {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.me-insight-row,
.me-insight-card {
  position: relative;
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  min-height: 7.4rem;
  padding: 0.95rem 1rem;
  border-radius: 22px;
  border: 1px solid rgba(20, 33, 58, 0.08);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(244, 247, 252, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

html[data-appearance="dark"] .me-insight-card {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.me-insight-card::before {
  content: "";
  position: absolute;
  inset: -20% auto auto -10%;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--me-insight-glow, rgba(52, 120, 246, 0.22)), transparent 70%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  animation: me-insight-glow 5.5s ease-in-out infinite;
}

.me-insight-card--heat { --me-insight-glow: rgba(255, 122, 89, 0.28); --me-insight-accent: #ff7a59; }
.me-insight-card--density { --me-insight-glow: rgba(91, 140, 255, 0.28); --me-insight-accent: #5b8cff; }
.me-insight-card--crowd { --me-insight-glow: rgba(168, 120, 255, 0.26); --me-insight-accent: #a878ff; }
.me-insight-card--hunt { --me-insight-glow: rgba(56, 189, 154, 0.26); --me-insight-accent: #38bd9a; }
.me-insight-card--funnel { --me-insight-glow: rgba(64, 176, 255, 0.26); --me-insight-accent: #40b0ff; }
.me-insight-card--miss { --me-insight-glow: rgba(255, 148, 92, 0.24); --me-insight-accent: #ff945c; }
.me-insight-card--momentum { --me-insight-glow: rgba(88, 214, 141, 0.26); --me-insight-accent: #58d68d; }
.me-insight-card--window { --me-insight-glow: rgba(255, 196, 86, 0.24); --me-insight-accent: #ffc456; }
.me-insight-card--initiative { --me-insight-glow: rgba(99, 162, 255, 0.26); --me-insight-accent: #63a2ff; }

.me-insight-row--muted {
  --me-insight-glow: rgba(148, 163, 184, 0.18);
  --me-insight-accent: #94a3b8;
}

.me-insight-card__aura {
  position: relative;
  z-index: 1;
  width: 4.2rem;
  height: 4.2rem;
  display: grid;
  place-items: center;
}

.me-insight-card__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--me-insight-accent) 45%, transparent);
  opacity: 0.55;
}

.me-insight-card__ring--outer {
  inset: 0;
  animation: me-insight-ring 4.8s ease-in-out infinite;
}

.me-insight-card__ring--mid {
  inset: 0.55rem;
  opacity: 0.7;
  animation: me-insight-ring 4.8s ease-in-out infinite reverse;
}

.me-insight-card__core {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--me-insight-accent));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--me-insight-accent) 18%, transparent),
    0 0 18px color-mix(in srgb, var(--me-insight-accent) 45%, transparent);
  animation: me-insight-core 2.8s ease-in-out infinite;
}

.me-insight-card__body {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.me-insight-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.me-insight-row__title {
  font-weight: 750;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}

.me-insight-row__chip {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--me-insight-accent) 88%, #fff);
  background: color-mix(in srgb, var(--me-insight-accent) 16%, transparent);
  border-radius: 999px;
  padding: 0.16rem 0.45rem;
}

.me-insight-row__chip--quiet {
  color: var(--muted);
  background: color-mix(in srgb, var(--line) 55%, transparent);
}

.me-insight-card__wave {
  display: flex;
  align-items: flex-end;
  gap: 0.28rem;
  height: 2.1rem;
}

.me-insight-card__bar {
  flex: 1 1 0;
  display: block;
  min-height: 18%;
  height: calc(28% + (var(--i) * 9%));
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--me-insight-accent) 82%, #fff),
    color-mix(in srgb, var(--me-insight-accent) 28%, transparent)
  );
  opacity: 0.78;
  transform-origin: bottom center;
  animation: me-insight-bar 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s);
}

.me-insight-row--muted .me-insight-card__bar {
  opacity: 0.42;
  animation-duration: 3.4s;
  background: linear-gradient(180deg, rgba(163, 174, 190, 0.7), rgba(163, 174, 190, 0.16));
}

.me-insight-row__meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.me-insight-card.is-live .me-insight-row__meta {
  color: color-mix(in srgb, var(--text) 82%, var(--me-insight-accent));
}

@keyframes me-insight-glow {
  0%,
  100% { opacity: 0.45; transform: scale(0.96); }
  50% { opacity: 0.85; transform: scale(1.05); }
}

@keyframes me-insight-ring {
  0%,
  100% { transform: scale(0.96); opacity: 0.35; }
  50% { transform: scale(1.04); opacity: 0.7; }
}

@keyframes me-insight-core {
  0%,
  100% { transform: scale(0.92); }
  50% { transform: scale(1.08); }
}

@keyframes me-insight-bar {
  0%,
  100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .me-insight-card::before,
  .me-insight-card__ring,
  .me-insight-card__core,
  .me-insight-card__bar {
    animation: none;
  }
}

.me-meet-vibes__copy {
  margin: 0.35rem 0 0;
  color: var(--text);
  font-size: 0.92rem;
}

.me-meet-vibes__sub,
.me-meet-vibes__footer {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.me-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(2, 6, 23, 0.82);
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.me-lightbox img {
  max-width: min(920px, 100%);
  max-height: min(86vh, 100%);
  border-radius: 14px;
  object-fit: contain;
}

.me-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  background: #fff;
  color: #0f172a;
  font-weight: 700;
  cursor: pointer;
}

.me-plan-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background-color: #f6f5f2;
  background-image: url("/assets/app/workspace-texture-light.png");
  background-repeat: repeat;
  background-size: 320px 320px;
  overflow: auto;
  padding: var(--workspace-pad-y) var(--workspace-pad-x);
  box-sizing: border-box;
}

/* Beat `.app-workspace > * { position: relative }` so the overlay covers the panel. */
.app-workspace > .me-plan-overlay {
  position: absolute;
  z-index: 6;
}

html[data-appearance="dark"] .me-plan-overlay {
  background-color: #101620;
  background-image: url("/assets/app/workspace-texture-dark.png");
}

.me-plan-overlay > .settings-detail {
  width: 100%;
  max-width: min(46rem, 100%);
  margin: 0;
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .me-stage {
    grid-template-columns: 1fr;
    min-height: 0;
    height: auto;
  }

  .me-stage__photo {
    height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(20, 33, 58, 0.08);
  }

  .me-gallery__stage {
    min-height: 280px;
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
  }

}

@media (max-width: 720px) {
  .me-receipts__rows {
    grid-template-columns: 1fr;
  }

  .me-stage__chrome,
  .me-toolbar {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .me-body {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .me-identity__header {
    flex-direction: column;
  }

  .me-chips {
    align-self: flex-start;
  }

  .me-tabs {
    gap: 0.55rem;
  }

  .me-presence-pill {
    font-size: 0.72rem;
  }

  .me-who--gate {
    grid-template-columns: 1fr auto;
  }

  .me-who__teaser {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .me-who__cta {
    grid-column: 2;
    grid-row: 1;
  }

  .me-tiles__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .me-tiles__list--aura {
    grid-template-columns: 1fr;
  }
}

/* Me + Edit Profile flush fill */
.page-edit-profile {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.edit-profile-host {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/**
 * Edit Profile accent — Fruiti purple primary (never system blue).
 * Declared on the page root so the board and Photos / Vault subviews share one accent.
 */
.page-edit-profile {
  --edit-accent: #9776ca;
  --edit-accent-soft: rgba(151, 118, 202, 0.16);
  --edit-accent-line: rgba(151, 118, 202, 0.45);
  --edit-accent-gradient: linear-gradient(100deg, #b08ee0 0%, #9776ca 48%, #7f5fb0 100%);
  --edit-accent-shadow: 0 8px 18px rgba(151, 118, 202, 0.3);
  --edit-icon: #b9a0dc;
  --edit-control-h: 34px;
  --edit-eye: 20px;
  --edit-photo-col: 340px;
  --edit-label: #2a3750;
  --edit-hint: #5b677c;
  --edit-line: rgba(20, 33, 58, 0.12);
  --edit-surface: #ffffff;
  --edit-rail-bg: #f4f6fa;
  --edit-input-bg: #ffffff;
  --edit-input-border: rgba(20, 33, 58, 0.14);
  --edit-placeholder: #6b778c;
}

html[data-appearance="dark"] .page-edit-profile {
  --edit-accent: #b08ee0;
  --edit-accent-soft: rgba(151, 118, 202, 0.2);
  --edit-accent-line: rgba(176, 142, 224, 0.55);
  --edit-accent-gradient: linear-gradient(100deg, #c4a6ec 0%, #9776ca 48%, #8664b8 100%);
  --edit-accent-shadow: 0 10px 22px rgba(100, 70, 160, 0.45);
  --edit-icon: #d0bdf0;
  --edit-label: #d7e0ef;
  --edit-hint: #9aabc2;
  --edit-line: rgba(255, 255, 255, 0.08);
  --edit-surface: rgba(12, 18, 30, 0.55);
  --edit-rail-bg: rgba(10, 16, 28, 0.72);
  --edit-input-bg: rgba(6, 11, 20, 0.55);
  --edit-input-border: rgba(255, 255, 255, 0.1);
  --edit-placeholder: #8fa0b8;
}

/* ——— Edit Profile board (Photos | Profile Info) ——— */
.edit-board {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* No extra inset — workspace pad already places the title at the shared origin. */
  padding: 0 0 18px;
  box-sizing: border-box;
}

.edit-board__top {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.edit-board__top-copy {
  min-width: 0;
  text-align: center;
}

.edit-board__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  letter-spacing: var(--page-title-tracking);
  line-height: var(--page-title-leading);
  color: var(--page-title-color);
  background: none;
  -webkit-text-fill-color: unset;
  text-shadow: none;
}

.edit-board__sub {
  margin: var(--page-sub-gap) 0 0;
  color: var(--edit-hint);
  font-size: var(--page-sub-size);
  line-height: var(--page-sub-leading);
  letter-spacing: var(--page-sub-tracking);
}

.edit-board__back.settings-back,
html[data-appearance="dark"] .edit-board__back.settings-back,
html[data-appearance="light"] .edit-board__back.settings-back,
.edit-profile-save {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
  height: 40px;
  padding: 0 1.1rem;
  border: 1px solid var(--edit-input-border);
  border-radius: 999px;
  background: transparent;
  color: var(--edit-hint);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition:
    color var(--motion),
    background var(--motion),
    border-color var(--motion);
}

.edit-profile-save.is-dirty:not(:disabled) {
  color: #fff;
  border-color: transparent;
  background: #9776ca;
}

.edit-profile-save.is-dirty:not(:disabled):hover,
.edit-profile-save.is-dirty:not(:disabled):focus-visible {
  background: #8664b8;
  color: #fff;
  border-color: transparent;
}

.edit-board__back.settings-back:hover,
.edit-board__back.settings-back:focus-visible,
html[data-appearance="dark"] .edit-board__back.settings-back:hover,
html[data-appearance="dark"] .edit-board__back.settings-back:focus-visible,
html[data-appearance="light"] .edit-board__back.settings-back:hover,
html[data-appearance="light"] .edit-board__back.settings-back:focus-visible,
.edit-profile-save:hover:not(:disabled),
.edit-profile-save:focus-visible:not(:disabled) {
  outline: none;
  color: var(--edit-label);
  border-color: var(--edit-accent-line);
  background: var(--edit-accent-soft);
}

.edit-board__back .settings-back__icon {
  width: 0.85rem;
  height: 0.85rem;
  display: inline-flex;
}

.edit-profile-save:disabled {
  opacity: 0.45;
  cursor: default;
}

.edit-board__body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, var(--edit-photo-col)) minmax(0, 1fr);
  gap: 28px;
  overflow: auto;
}

.edit-board__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Photos stay in view while the longer info column scrolls. */
.edit-board__col--photos {
  align-self: start;
  position: sticky;
  top: 0;
}

.edit-section {
  margin: 0;
}

.edit-section + .edit-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--edit-line);
}

.edit-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink, var(--text));
}

.edit-section__lede {
  margin: 4px 0 14px;
  color: var(--edit-hint);
  font-size: 0.8rem;
  line-height: 1.35;
}

/* Photos mosaic + albums */
.edit-photos__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

/* mosaic rules live after .edit-shots so display:grid wins */

.edit-shot__add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
  cursor: pointer;
  color: var(--muted);
}

.edit-shot__add-label {
  font-size: 0.72rem;
  font-weight: 650;
}

.edit-albums {
  margin-top: 1.15rem;
}

.edit-albums__title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.edit-albums__strip {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.edit-album-card {
  flex: 0 0 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.edit-album-card__thumb {
  display: block;
  width: 5.5rem;
  height: 7rem;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

html[data-appearance="dark"] .edit-album-card__thumb {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.08);
}

.edit-album-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.edit-album-card__name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.edit-album-card__count {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
}

.edit-album-card--new .edit-album-card__thumb,
.edit-album-card__plus {
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--muted);
}

.edit-album-card--new .edit-album-card__thumb {
  width: 5.5rem;
  height: 7rem;
  border-style: dashed;
}

.edit-identity {
  margin: 0 0 1.25rem;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--edit-line);
}

.edit-identity__title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.edit-identity__name {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 750;
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: 1.1;
}

.edit-identity__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.edit-interest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.edit-interest-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 600;
}

html[data-appearance="dark"] .edit-interest-chip {
  background: rgba(255, 255, 255, 0.06);
}

/* Photos grid (legacy row layout kept for vault subviews) */
.edit-shots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Premium Edit Profile mosaic — must follow .edit-shots so grid overrides flex. */
.edit-shots.edit-shots--mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) minmax(0, 0.85fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.92fr);
  grid-template-areas:
    "main main s1"
    "main main s2"
    "b1   b2   b3";
  gap: 0.55rem;
  aspect-ratio: 1 / 1.02;
  max-height: min(460px, 52vh);
  width: 100%;
}

.edit-shots.edit-shots--mosaic .edit-shot:nth-child(1) { grid-area: main; }
.edit-shots.edit-shots--mosaic .edit-shot:nth-child(2) { grid-area: s1; }
.edit-shots.edit-shots--mosaic .edit-shot:nth-child(3) { grid-area: s2; }
.edit-shots.edit-shots--mosaic .edit-shot:nth-child(4) { grid-area: b1; }
.edit-shots.edit-shots--mosaic .edit-shot:nth-child(5) { grid-area: b2; }
.edit-shots.edit-shots--mosaic .edit-shot:nth-child(6) { grid-area: b3; }

.edit-shots.edit-shots--mosaic .edit-shot {
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
  border-radius: 14px;
  border-color: rgba(148, 163, 184, 0.14);
}

.edit-shots.edit-shots--mosaic .edit-shot--main {
  aspect-ratio: auto;
  border-radius: 16px;
}

.edit-shots.edit-shots--mosaic .edit-shot__index {
  display: none;
}

.edit-shots.edit-shots--mosaic .edit-shot__add-label {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
}

.edit-board__col--info {
  padding: 1.15rem 1.2rem 1.35rem;
  border-radius: 20px;
  border: 1px solid var(--edit-line);
  background: var(--edit-panel-bg, rgba(255, 255, 255, 0.86));
  box-shadow: none;
  overflow: auto;
  scrollbar-width: thin;
  min-height: 0;
}

html[data-appearance="dark"] .edit-board__col--info {
  background: rgba(18, 24, 38, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
}

.edit-album-card {
  flex: 0 0 6.1rem;
}

.edit-album-card__thumb {
  width: 6.1rem;
  height: 7.6rem;
  border-radius: 16px;
}

.edit-album-card--new .edit-album-card__thumb {
  width: 6.1rem;
  height: 7.6rem;
}

.edit-shots__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.edit-shot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--edit-line);
  background: var(--edit-rail-bg);
}

.edit-shot--main {
  aspect-ratio: 5 / 4;
  border-radius: 12px;
}

.edit-shot.is-empty {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--edit-line) 80%, var(--edit-accent) 20%);
  background:
    linear-gradient(180deg, var(--edit-accent-soft), transparent 70%),
    var(--edit-rail-bg);
}

.edit-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.edit-shot__index {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(6, 10, 20, 0.62);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.edit-shot__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(6, 10, 20, 0.62);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  backdrop-filter: blur(6px);
}

.edit-shot__actions {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: linear-gradient(transparent, rgba(6, 10, 20, 0.78));
  opacity: 0;
  transition: opacity var(--motion);
}

.edit-shot:hover .edit-shot__actions,
.edit-shot:focus-within .edit-shot__actions {
  opacity: 1;
}

.edit-shot__action {
  border: 0;
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

.edit-shot__action--danger {
  background: rgba(220, 38, 38, 0.55);
}

.edit-shot__add {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  cursor: pointer;
  color: var(--edit-hint);
}

.edit-shot__plus {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink, var(--text));
}

html[data-appearance="light"] .edit-shot__plus {
  background: rgba(20, 33, 58, 0.08);
}

.edit-shot__plus svg {
  width: 16px;
  height: 16px;
  display: block;
}

.edit-shot__add-label {
  font-size: 0.78rem;
  font-weight: 700;
}

.edit-tip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--edit-line);
  background: var(--edit-rail-bg);
}

.edit-tip__icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--edit-accent);
}

.edit-tip__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.edit-tip__copy {
  margin: 0;
  color: var(--edit-hint);
  font-size: 0.75rem;
  line-height: 1.35;
}

.edit-vault-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid var(--edit-line);
  border-radius: 10px;
  background: transparent;
  color: var(--edit-accent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color var(--motion);
}

.edit-vault-link:hover,
.edit-vault-link:focus-visible {
  outline: none;
  border-color: var(--edit-accent-line);
}

.edit-vault-link__go {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: inline-flex;
  color: var(--edit-hint);
}

.edit-vault-link__go svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Fields — one shared rhythm for Profile Info, Traits and Links */
.edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px 14px;
}

.edit-field {
  display: grid;
  grid-template-rows: var(--edit-eye) var(--edit-control-h) auto;
  align-content: start;
  gap: 5px;
  margin: 0;
  min-width: 0;
}

.edit-field--wide {
  grid-column: 1 / -1;
}

.edit-field__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.edit-field__label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: var(--edit-eye);
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--edit-label);
  line-height: 1.15;
}

.edit-field__label-icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  display: inline-flex;
  color: var(--edit-accent);
}

.edit-field__label-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.edit-field__label-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-field__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-height: 14px;
}

.edit-field__foot--count-only {
  justify-content: flex-end;
}

.edit-field__count {
  flex: 0 0 auto;
  color: var(--edit-hint);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.edit-field__count.is-max {
  color: var(--edit-accent);
}

.edit-field__hint,
.edit-field__hint--flush {
  color: var(--edit-hint);
  font-size: 0.7rem;
  line-height: 1.3;
}

.edit-field__hint--flush {
  margin: 0 0 12px;
}

.edit-field__input,
.edit-field__textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--edit-input-border);
  border-radius: 8px;
  background: var(--edit-input-bg);
  color: var(--ink, var(--text));
  font: inherit;
  font-size: 0.88rem;
  transition: border-color var(--motion);
}

.edit-field__input::placeholder,
.edit-field__textarea::placeholder {
  color: var(--edit-placeholder);
  opacity: 1;
}

.edit-field__input {
  height: var(--edit-control-h);
  padding: 0 11px;
  line-height: calc(var(--edit-control-h) - 2px);
}

select.edit-field__input {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--edit-hint) 50%),
    linear-gradient(135deg, var(--edit-hint) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 2px),
    calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 26px;
}

.edit-field__input:focus,
.edit-field__textarea:focus {
  outline: none;
  border-color: var(--edit-accent);
  box-shadow: none;
}

.edit-field__textarea {
  height: auto;
  min-height: 96px;
  padding: 9px 11px;
  line-height: 1.45;
  resize: vertical;
}

.edit-field:has(.edit-field__textarea) {
  grid-template-rows: auto auto auto;
}

/* Trait sub-groups (Details / Preferences / Health) */
.edit-group + .edit-group {
  margin-top: 14px;
}

.edit-group__title {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--edit-hint);
  line-height: 1.2;
}

.edit-visibility {
  flex: 0 0 auto;
  margin-left: auto;
  width: var(--edit-eye);
  height: var(--edit-eye);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--edit-line);
  border-radius: 999px;
  background: var(--edit-rail-bg);
  color: var(--edit-hint);
  cursor: pointer;
  padding: 0;
  transition: background var(--motion), color var(--motion), border-color var(--motion);
}

.edit-visibility.is-on {
  background: color-mix(in srgb, var(--edit-accent) 14%, #fff);
  border-color: var(--edit-accent-line);
  color: var(--edit-accent);
}

html[data-appearance="dark"] .edit-visibility.is-on {
  background: var(--edit-accent-soft);
}

.edit-visibility svg {
  display: block;
  width: 13px;
  height: 13px;
}


/* Mockup-style detail rows (icon | label | value | chevron) */
.edit-detail-list {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.edit-detail {
  display: grid;
  grid-template-columns: 1.35rem minmax(5.5rem, auto) minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 0.35rem;
  min-height: 2.85rem;
  padding: 0.55rem 0.1rem;
  border-bottom: 1px solid var(--edit-line);
}

.edit-detail:last-child {
  border-bottom: 0;
}

.edit-detail--stack {
  grid-template-columns: 1.35rem minmax(0, 1fr) auto auto;
  grid-template-areas:
    "icon label vis chev"
    "icon body body body";
}

.edit-detail--stack .edit-detail__icon { grid-area: icon; align-self: start; margin-top: 0.15rem; }
.edit-detail--stack .edit-detail__label { grid-area: label; }
.edit-detail--stack .edit-detail__vis { grid-area: vis; }
.edit-detail--stack .edit-detail__chevron { grid-area: chev; }
.edit-detail--stack .edit-detail__body { grid-area: body; }

.edit-detail__icon {
  width: 1.35rem;
  height: 1.35rem;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
}

.edit-detail__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.edit-detail__label {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 550;
  letter-spacing: -0.01em;
}

.edit-detail__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}

.edit-detail--stack .edit-detail__body {
  align-items: stretch;
}

.edit-detail__control,
.edit-detail .edit-field__input,
.edit-detail .edit-field__textarea,
.edit-detail select.edit-field__input {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: right;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.15rem 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
}

.edit-detail--stack .edit-detail__control,
.edit-detail--stack .edit-field__input,
.edit-detail--stack .edit-field__textarea {
  text-align: left;
  font-weight: 500;
  line-height: 1.45;
}

.edit-detail__control:focus,
.edit-detail .edit-field__input:focus,
.edit-detail .edit-field__textarea:focus,
.edit-detail select.edit-field__input:focus {
  outline: none;
  color: var(--ink);
}

.edit-detail__value {
  text-align: right;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.edit-detail__chevron {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--muted);
  opacity: 0.7;
  display: inline-grid;
  place-items: center;
}

.edit-detail__chevron svg {
  width: 0.85rem;
  height: 0.85rem;
}

.edit-detail__vis {
  display: inline-flex;
}

.edit-detail .edit-field__counter,
.edit-detail .edit-field__hint {
  font-size: 0.68rem;
  color: var(--muted);
}

.edit-detail .edit-field__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
}

.edit-detail .edit-field__pair .edit-field__input {
  text-align: left;
  padding: 0.4rem 0.55rem !important;
  border: 1px solid var(--edit-line) !important;
  border-radius: 10px !important;
  background: var(--edit-rail-bg) !important;
}

/* Subviews (vault / album) */
.edit-profile-stage {
  max-width: var(--discover-max);
  margin: 0;
  padding: 0 0 24px;
  width: 100%;
  box-sizing: border-box;
}

.edit-profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  min-height: 48px;
}

.edit-profile-header__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.edit-profile-header__title {
  margin: 0;
}

.edit-profile-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.edit-section-card {
  border: 1.5px solid var(--edit-input-border, rgba(20, 33, 58, 0.18));
  border-radius: 16px;
  background: var(--edit-surface, #fff);
  overflow: hidden;
}

.edit-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.edit-photos-grid__cell {
  border: 1px solid var(--edit-line, rgba(20, 33, 58, 0.14));
  border-radius: 14px;
  overflow: hidden;
  background: #1e293b;
}

.edit-photos-grid__cell img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.edit-photos-grid__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: var(--edit-rail-bg, #f4f6fa);
}

.edit-photos-add {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

@media (max-width: 1180px) {
  .page-edit-profile {
    --edit-photo-col: 280px;
  }

  .edit-board__body {
    gap: 20px;
  }
}

@media (max-width: 980px) {
  .edit-board__body {
    grid-template-columns: 1fr;
  }

  .edit-board__col--photos {
    position: static;
    max-width: 330px;
  }
}

@media (max-width: 640px) {
  .edit-grid,
  .edit-field__pair {
    grid-template-columns: 1fr;
  }

  .edit-board {
    padding: 0 0 12px;
  }
}

@media (max-width: 900px) {
  .me-layout {
    grid-template-columns: 1fr;
  }
}


/* ===== Other-user profile (peer) — premium Photos + details ===== */
.page-peer {
  --peer-pad: 1.25rem;
  --peer-gap: 0.85rem;
  --peer-radius: 20px;
  --peer-line: rgba(20, 33, 58, 0.1);
  --peer-line-soft: rgba(20, 33, 58, 0.08);
  --peer-surface: rgba(255, 255, 255, 0.86);
  --peer-inset: rgba(148, 163, 184, 0.1);
  --peer-accent: var(--fruiti-blue);
  --peer-label-w: 6.85rem;
  --peer-row-h: 2.35rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 1.25rem 1.35rem 1.35rem;
  box-sizing: border-box;
}

html[data-appearance="dark"] .page-peer {
  --peer-line: rgba(255, 255, 255, 0.075);
  --peer-line-soft: rgba(255, 255, 255, 0.055);
  --peer-surface: #151d2c;
  --peer-inset: rgba(0, 0, 0, 0.28);
}

/* Light skin only: stronger surfaces/lines so peer chrome stays readable on the pale workspace */
html[data-appearance="light"] .page-peer {
  --peer-line: rgba(20, 33, 58, 0.16);
  --peer-line-soft: rgba(20, 33, 58, 0.11);
  --peer-surface: #ffffff;
}

html[data-appearance="light"] .peer-page-head__sub {
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}

html[data-appearance="light"] .peer-stage__photo,
html[data-appearance="light"] .peer-stage__photos,
html[data-appearance="light"] .peer-stage__panel {
  border-color: rgba(20, 33, 58, 0.14);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
}

.peer-page-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
}

.peer-page-head__copy {
  min-width: 0;
}

.peer-page-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2vw, 2.05rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.peer-page-head__sub {
  margin: 0.28rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.peer-page-head__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin-top: 0.2rem;
  padding: 0.38rem 0.72rem 0.38rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(210, 218, 232, 0.78);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    color var(--motion),
    background var(--motion),
    border-color var(--motion);
}

html[data-appearance="light"] .peer-page-head__back {
  border-color: rgba(20, 33, 58, 0.1);
  background: rgba(255, 255, 255, 0.65);
  color: rgba(60, 74, 96, 0.82);
}

.peer-page-head__back:hover,
.peer-page-head__back:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  outline: none;
}

html[data-appearance="light"] .peer-page-head__back:hover,
html[data-appearance="light"] .peer-page-head__back:focus-visible {
  color: var(--ink);
  background: rgba(20, 33, 58, 0.05);
  border-color: rgba(20, 33, 58, 0.16);
}

.peer-page-head__back-icon {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
}

.peer-page-head__back-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.peer-page-head__back-label {
  line-height: 1;
}

.peer-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.peer-stage {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.25fr);
  gap: var(--peer-gap);
  align-items: stretch;
  grid-auto-rows: 1fr;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

html[data-appearance="dark"] .peer-stage {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.peer-stage__photo,
.peer-stage__photos,
.peer-stage__panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  /* Stretch with the grid row (taller column wins) — avoid height:100% percentage traps. */
  align-self: stretch;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--peer-pad);
  border-radius: var(--peer-radius);
  border: 1px solid var(--peer-line);
  background: var(--peer-surface);
  box-shadow: none;
  overflow: auto;
  scrollbar-width: thin;
}

.peer-stage__photo.is-empty,
html[data-appearance="dark"] .peer-stage__photo.is-empty {
  background: var(--peer-surface);
}

.peer-photos {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  flex: 1 1 auto;
}

.peer-photos__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
  min-height: 2.35rem;
}

.peer-photos__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.2;
}

.peer-photos__count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.peer-photos {
  --peer-tile-gap: 0.5rem;
}

.peer-photos__hero {
  width: 100%;
  margin: 0 0 var(--peer-tile-gap);
  flex: 0 0 auto;
}

.peer-photos__hero .peer-photos__cell {
  width: 100%;
  aspect-ratio: 1;
  max-height: min(420px, 48vh);
}

.peer-photos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--peer-tile-gap);
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: unset;
  max-height: none;
}

.peer-photos__cell {
  position: relative;
  border: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--peer-inset);
  cursor: pointer;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: auto;
}

.peer-photos__cell--tile {
  aspect-ratio: 1;
}

.peer-photos__cell img,
.peer-photos__fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}

.peer-photos__cell--main img {
  object-position: center 40%;
}

.peer-photos__cell.is-empty {
  cursor: default;
}

.peer-photos__cell.is-empty .peer-photos__fallback {
  opacity: 0.5;
  object-fit: contain;
  padding: 18%;
  box-sizing: border-box;
}

.peer-photos__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  backdrop-filter: blur(8px);
}

.peer-vault-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  margin-top: auto;
  flex: 0 0 auto;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--peer-line);
  background: var(--peer-inset);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.peer-vault-card:hover {
  border-color: color-mix(in srgb, var(--fruiti-blue) 45%, transparent);
}

.peer-vault-card__icon {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--fruiti-blue-soft);
  color: var(--peer-accent);
  flex: 0 0 auto;
}

.peer-vault-card__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.peer-vault-card__copy {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
  flex: 1 1 auto;
}

.peer-vault-card__title {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.peer-vault-card__sub {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

.peer-vault-card__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--muted);
  flex: 0 0 auto;
  opacity: 0.85;
}


.peer-vault-card__chevron svg {
  width: 1rem;
  height: 1rem;
}

/* Reference-matched peer chrome: chips + detail rows + albums */
.peer-interest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.peer-interest-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 600;
}

html[data-appearance="dark"] .peer-interest-chip {
  background: rgba(255, 255, 255, 0.06);
}

.peer-detail-list,
.peer-detail,
.peer-detail__icon,
.peer-detail__label,
.peer-detail__body,
.peer-detail__value,
.peer-detail__chevron {
  /* legacy mockup detail list — replaced by .peer-receipt* */
  display: none;
}

.peer-body-pane {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  transition:
    opacity 0.32s ease,
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.32s ease;
}

.peer-body-pane.is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.peer-body-pane.is-out {
  opacity: 0;
  transform: translateY(-6px);
  filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  .peer-body-pane,
  .peer-body-pane.is-in,
  .peer-body-pane.is-out {
    transition: opacity 0.15s ease;
    transform: none;
    filter: none;
  }
}

.peer-receipt {
  margin: 0 0 1.15rem;
}

.peer-receipt:last-child {
  margin-bottom: 0.35rem;
}

.peer-receipt__caption {
  margin: 0 0 0.45rem;
  padding: 0 0.05rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peer-receipt__list {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 3.5%, transparent);
  padding: 0.2rem 0.7rem 0.35rem;
}

html[data-appearance="dark"] .peer-receipt__list {
  background: rgba(255, 255, 255, 0.035);
}

html[data-appearance="light"] .peer-receipt__caption {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

html[data-appearance="light"] .peer-receipt__list {
  background: rgba(15, 23, 42, 0.045);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

html[data-appearance="light"] .peer-receipt__icon {
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}

html[data-appearance="light"] .peer-receipt__label {
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

html[data-appearance="light"] .peer-receipt__value {
  color: color-mix(in srgb, var(--ink) 96%, transparent);
}

html[data-appearance="light"] .peer-receipt__rule {
  background: rgba(15, 23, 42, 0.1);
}

.peer-receipt__row {
  display: grid;
  grid-template-columns: 1.1rem minmax(5.5rem, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: 0.55rem;
  min-height: 2.15rem;
  padding: 0.28rem 0;
}

.peer-receipt__icon {
  width: 1.1rem;
  height: 1.1rem;
  display: inline-grid;
  place-items: center;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}

.peer-receipt__icon svg {
  width: 0.92rem;
  height: 0.92rem;
}

.peer-receipt__label {
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font-size: 0.8rem;
  font-weight: 500;
}

.peer-receipt__value {
  min-width: 0;
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  font-size: 0.82rem;
  font-weight: 520;
  line-height: 1.35;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peer-receipt__rule {
  height: 1px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  margin: 0;
}

.peer-albums {
  margin-top: 1rem;
  flex: 0 0 auto;
}

.peer-albums__title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}

.peer-albums__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--peer-tile-gap, 0.5rem);
  overflow: visible;
  padding-bottom: 0;
}

.peer-album-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--peer-inset);
  color: #fff;
  cursor: pointer;
}

.peer-album-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: var(--peer-inset);
  border: 0;
}

.peer-album-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.28);
  transform-origin: center;
}

/* iOS ProfilePhotoCarouselView vault preview: ~90% blur when locked; light when unlocked */
.peer-album-card.is-locked .peer-album-card__thumb img {
  filter: blur(28px);
}

.peer-album-card.is-unlocked .peer-album-card__thumb img {
  filter: blur(6px);
}

.peer-album-card__veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 18, 0.28);
  color: rgba(255, 255, 255, 0.92);
  pointer-events: none;
}

.peer-album-card__veil svg {
  width: 1.55rem;
  height: 1.55rem;
}

.peer-album-card__thumb--vault {
  display: grid;
  place-items: center;
  color: var(--peer-accent);
}

.peer-album-card__lock {
  width: 1.4rem;
  height: 1.4rem;
  display: inline-grid;
  place-items: center;
}

.peer-album-card__lock svg {
  width: 1.25rem;
  height: 1.25rem;
}

.peer-album-card__name,
.peer-album-card__count {
  display: none;
}


.peer-panel__body {
  margin-top: 0.35rem;
  flex: 1 1 auto;
  min-height: 0;
}

.peer-panel__body .peer-social {
  /* social lives in panel chrome under the quote card */
  display: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



/* Same as Discover `.disc-card__verified` — iOS PhotoVerifiedBadgeView, inline beside name */
.peer-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 0;
  padding: 0;
  margin: 0;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      rgba(51, 115, 97, 0.35),
      rgba(71, 133, 112, 0.2)
    ),
    rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
  filter: none;
}

.peer-verified svg {
  display: block;
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  pointer-events: none;
}

.peer-presence {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(248, 250, 252, 0.9);
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}

.peer-presence::before {
  content: "";
  width: 0.41rem;
  height: 0.41rem;
  border-radius: 999px;
  background: #94a3b8;
  flex: 0 0 auto;
  box-shadow: none;
}

.peer-presence--active {
  color: rgba(248, 250, 252, 0.9);
}

.peer-presence--active::before {
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.75);
}
.peer-presence--hunting { color: #f472b6; }
.peer-presence--hunting::before { background: #f472b6; box-shadow: 0 0 8px rgba(244, 114, 182, 0.55); }
.peer-presence--recent { color: #60a5fa; }
.peer-presence--recent::before { background: #60a5fa; }
.peer-presence--offline { color: #94a3b8; }
.peer-presence--offline::before { background: #94a3b8; box-shadow: none; }

.peer-panel__sub-sep {
  display: inline-block;
  width: 1px;
  height: 0.77rem;
  background: rgba(148, 163, 184, 0.38);
  flex: 0 0 auto;
  margin: 0 0.08rem;
}

/* Active | reach on ONE row — translucent pulsing blue pill */
.peer-reach {
  --peer-reach-accent: #a78bfa;
  display: inline-flex;
  align-items: center;
  gap: 0.31rem;
  margin-top: 0;
  padding: 0.17rem 0.55rem 0.17rem 0.41rem;
  border-radius: 999px;
  background: rgba(56, 129, 255, 0.12);
  color: rgba(191, 219, 254, 0.92);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  border: 1px solid rgba(96, 165, 250, 0.55);
  box-shadow:
    0 0 0 0 rgba(96, 165, 250, 0.35),
    inset 0 0 12px rgba(96, 165, 250, 0.08);
  flex: 0 0 auto;
  white-space: nowrap;
  animation: peer-reach-pulse 2.4s ease-in-out infinite;
}

@keyframes peer-reach-pulse {
  0%,
  100% {
    border-color: rgba(96, 165, 250, 0.42);
    box-shadow:
      0 0 8px rgba(96, 165, 250, 0.18),
      inset 0 0 10px rgba(96, 165, 250, 0.06);
    background: rgba(56, 129, 255, 0.1);
  }
  50% {
    border-color: rgba(147, 197, 253, 0.75);
    box-shadow:
      0 0 14px rgba(96, 165, 250, 0.4),
      inset 0 0 14px rgba(96, 165, 250, 0.14);
    background: rgba(56, 129, 255, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .peer-reach {
    animation: none;
    box-shadow:
      0 0 10px rgba(96, 165, 250, 0.22),
      inset 0 0 12px rgba(96, 165, 250, 0.08);
  }
}

html[data-appearance="light"] .peer-reach {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow:
    0 0 10px rgba(37, 99, 235, 0.16),
    inset 0 0 10px rgba(37, 99, 235, 0.06);
  animation: none;
}

html[data-appearance="light"] .peer-reach__icon {
  color: #2563eb;
}

html[data-appearance="light"] .peer-reach__text {
  color: #1e40af;
}

html[data-appearance="light"] .peer-panel__sub-sep {
  background: rgba(15, 23, 42, 0.22);
}

html[data-appearance="light"] .peer-presence {
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

.peer-reach__icon {
  width: 0.77rem;
  height: 0.77rem;
  display: inline-grid;
  place-items: center;
  color: #93c5fd;
}

.peer-reach__icon svg {
  width: 0.7rem;
  height: 0.7rem;
}

.peer-reach__text {
  white-space: nowrap;
  color: rgba(191, 219, 254, 0.92);
}

.peer-presence-location {
  display: none;
}

/* Quote status card — slim, subtle copy, blue marks */
.peer-vibe-status {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0.85rem 0 0;
  padding: 0.48rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
}

html[data-appearance="light"] .peer-vibe-status {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.16);
}

html[data-appearance="light"] .peer-vibe-status__mark {
  color: #2563eb;
  filter: none;
}

html[data-appearance="light"] .peer-vibe-status__text {
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.peer-vibe-status.is-in {
  opacity: 1;
  transform: translateY(0);
}

.peer-vibe-status__mark {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  display: inline-grid;
  place-items: center;
  color: #60a5fa;
  filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.35));
}

.peer-vibe-status__mark svg {
  width: 1.05rem;
  height: 1.05rem;
}

.peer-vibe-status__text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.78rem;
  font-weight: 450;
  line-height: 1.3;
}

.peer-vibe-status__edit {
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  display: inline-grid;
  place-items: center;
  color: rgba(148, 163, 184, 0.55);
}

.peer-vibe-status__edit svg {
  width: 0.85rem;
  height: 0.85rem;
}


.peer-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  min-height: 1.75rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.peer-panel__head.is-in {
  opacity: 1;
  transform: translateY(0);
}

.peer-panel__identity {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0.05rem;
  overflow: visible;
}

.peer-panel__title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.peer-panel__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 1.9vw, 1.95rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  color: #fff;
  line-height: 1.02;
}

html[data-appearance="light"] .peer-panel__name {
  color: color-mix(in srgb, var(--ink) 94%, transparent);
}

.peer-panel__sub {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.42rem;
  margin-top: 0.42rem;
  align-items: center;
  white-space: nowrap;
  max-width: 100%;
}

.peer-panel__tools {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  flex: 0 1 auto;
  flex-shrink: 1;
  padding-top: 0.05rem;
  min-width: 0;
}

.peer-more {
  display: none;
}

.peer-banner {
  margin: 0.95rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: var(--fruiti-blue-soft);
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.4;
}

.peer-actions-host {
  margin: 0;
  flex: 0 0 auto;
}

.peer-tool-rail {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.53rem;
}

.peer-tool-btn {
  --peer-tool-accent: #e2e8f0;
  width: auto;
  height: auto;
  min-width: 2.42rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--peer-tool-accent);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.34rem;
  cursor: pointer;
  padding: 0;
  transition:
    color 0.22s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.peer-tool-btn__icon {
  width: 2.08rem;
  height: 2.08rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid color-mix(in srgb, var(--peer-tool-accent) 55%, transparent);
  box-shadow:
    inset 0 -5px 10px color-mix(in srgb, var(--peer-tool-accent) 18%, transparent),
    0 0 8px color-mix(in srgb, var(--peer-tool-accent) 22%, transparent);
  color: inherit;
  transition: box-shadow 0.28s ease, border-color 0.22s ease;
}

html[data-appearance="light"] .peer-tool-btn__icon {
  background: #fff;
  border-color: color-mix(in srgb, var(--peer-tool-accent) 72%, #64748b);
  box-shadow:
    inset 0 -4px 8px color-mix(in srgb, var(--peer-tool-accent) 16%, transparent),
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 1px 3px rgba(15, 23, 42, 0.08);
}

.peer-tool-btn__icon svg {
  width: 0.89rem;
  height: 0.89rem;
}

.peer-tool-btn__label {
  position: relative;
  font-size: 0.425rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, 0.62);
  line-height: 1.15;
  padding-bottom: 0.24rem;
  border-bottom: 0;
}

.peer-tool-btn__label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0.81rem;
  height: 1.5px;
  border-radius: 999px;
  background: var(--peer-tool-accent);
  box-shadow: none;
}

html[data-appearance="light"] .peer-tool-btn__label {
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

html[data-appearance="light"] .peer-tool-btn--more .peer-tool-btn__label {
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}

html[data-appearance="light"] .peer-tool-btn--more .peer-tool-btn__icon {
  border-color: rgba(15, 23, 42, 0.28);
  color: #475569;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

html[data-appearance="light"] .peer-verified {
  background:
    linear-gradient(
      135deg,
      rgba(51, 115, 97, 0.55),
      rgba(71, 133, 112, 0.4)
    ),
    rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.2);
  color: #fff;
}

html[data-appearance="light"] .peer-social__btn {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html[data-appearance="light"] .peer-social__btn--x {
  color: #0f172a;
}

html[data-appearance="light"] .peer-social__btn--web {
  color: #0284c7;
}

html[data-appearance="light"] .peer-social__btn--ig {
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
}

html[data-appearance="light"] .peer-tabs {
  background: rgba(15, 23, 42, 0.06);
}

html[data-appearance="light"] .peer-tabs__btn {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.peer-tool-btn__label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0.81rem;
  height: 1.5px;
  border-radius: 999px;
  background: var(--peer-tool-accent);
  box-shadow: none;
}

.peer-tool-btn:hover {
  transform: translateY(-1px);
}

.peer-tool-btn:hover .peer-tool-btn__icon {
  box-shadow:
    inset 0 -6px 14px color-mix(in srgb, var(--peer-tool-accent) 24%, transparent),
    0 0 14px color-mix(in srgb, var(--peer-tool-accent) 32%, transparent);
}

.peer-tool-btn:active {
  transform: scale(0.97);
}

.peer-tool-btn--favourite {
  --peer-tool-accent: #a855f7;
}

.peer-tool-btn--favourite.is-active {
  --peer-tool-accent: #c084fc;
}

.peer-tool-btn--message {
  --peer-tool-accent: #22d3ee;
}

.peer-tool-btn--like {
  --peer-tool-accent: #f472b6;
}

.peer-tool-btn--like.is-active {
  --peer-tool-accent: #fb7185;
}

.peer-tool-btn--vault {
  --peer-tool-accent: #eab308;
}

.peer-tool-btn--vault.is-active {
  --peer-tool-accent: #facc15;
}

.peer-tool-btn--more {
  --peer-tool-accent: #cbd5e1;
}

.peer-tool-btn--more .peer-tool-btn__label {
  color: rgba(203, 213, 225, 0.62);
}

.peer-tool-btn--more .peer-tool-btn__label::after {
  display: none;
}

.peer-tool-btn--more .peer-tool-btn__icon {
  border-color: rgba(203, 213, 225, 0.35);
  box-shadow:
    inset 0 -4px 10px rgba(203, 213, 225, 0.08),
    0 0 8px rgba(203, 213, 225, 0.1);
}

/* legacy class kept so older CSS/tests don't hard-crash */
.peer-actions { display: none; }
.peer-action { display: none; }
.peer-action__icon { display: none; }
.peer-action__label {
  display: none;
}

.peer-tabs {
  display: inline-flex;
  gap: 0.12rem;
  margin: 0.85rem 0 0;
  padding: 0.14rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  align-self: flex-start;
  flex: 0 0 auto;
  position: relative;
}

.peer-tabs__btn {
  border: 0;
  border-radius: 999px;
  padding: 0.36rem 0.85rem;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font-weight: 550;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.peer-tabs__btn.is-active {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

html[data-appearance="light"] .peer-tabs__btn.is-active {
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}

.peer-panel__body {
  margin-top: 0.7rem;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 1.25rem;
}

.peer-body-pane {
  padding-bottom: 0.5rem;
}

.peer-social {
  display: flex;
  gap: 0.55rem;
  margin: 0.85rem 0 0;
  flex: 0 0 auto;
}

.peer-social__btn {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: none;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.peer-social__btn--ig {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.peer-social__btn--x {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.peer-social__btn--web {
  color: #67e8f9;
  background: rgba(255, 255, 255, 0.06);
}

.peer-social__btn:hover {
  transform: translateY(-1px);
}

.peer-social__btn.is-dim {
  opacity: 0.28;
  pointer-events: none;
  box-shadow: none;
}

.peer-social__btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

.peer-kv {
  margin: 0 0 0.95rem;
}

.peer-kv:last-child {
  margin-bottom: 0;
}

.peer-kv__title {
  margin: 0 0 0.28rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.peer-kv__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.75rem;
  align-items: start;
}

.peer-kv__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.peer-kv__row {
  display: grid;
  grid-template-columns: var(--peer-label-w, 6.85rem) minmax(0, 1fr);
  column-gap: 0.65rem;
  align-items: baseline;
  min-height: var(--peer-row-h, 2.35rem);
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--peer-line-soft, rgba(148, 163, 184, 0.14));
  font-size: 0.875rem;
  box-sizing: border-box;
}

.peer-kv__col .peer-kv__row:last-child {
  border-bottom-color: transparent;
}

.peer-kv__label {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.peer-kv__value {
  font-weight: 650;
  text-align: right;
  color: var(--ink);
  letter-spacing: -0.015em;
  justify-self: end;
  min-width: 0;
  overflow-wrap: anywhere;
}

.peer-about {
  margin: 0 0 0.95rem;
}

.peer-about__body {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--peer-line, rgba(148, 163, 184, 0.18));
  background: var(--peer-inset, rgba(148, 163, 184, 0.08));
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.peer-panel__location {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.48rem;
  color: var(--peer-accent, var(--fruiti-blue));
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.peer-panel__pin {
  width: 0.95rem;
  height: 0.95rem;
  display: grid;
  place-items: center;
  color: var(--peer-accent, var(--fruiti-blue));
  flex: 0 0 auto;
}

.peer-panel__pin svg {
  width: 0.95rem;
  height: 0.95rem;
}

.peer-panel__place {
  letter-spacing: -0.01em;
}

.peer-quiet {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.peer-pulse {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.peer-body-pane--insights {
  width: 100%;
}

.peer-pulse--stage {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 1.15rem 1.2rem 1.2rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.022) 48%,
      rgba(52, 120, 246, 0.04) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 36px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

html[data-appearance="light"] .peer-pulse--stage {
  border-color: rgba(20, 33, 58, 0.08);
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(247, 249, 252, 0.9) 55%,
      rgba(52, 120, 246, 0.05) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 28px rgba(20, 33, 58, 0.07);
}

.peer-pulse__title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--ink) 94%, transparent);
}

.peer-pulse__sub {
  margin: 0.3rem 0 0;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
  font-size: 0.8rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 34rem;
}

.peer-pulse__mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 1.15rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  background: color-mix(in srgb, var(--ink) 2.5%, transparent);
}

html[data-appearance="dark"] .peer-pulse__mosaic {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
}

.peer-pulse-signal {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 1.05rem 1rem 1.1rem;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  background: transparent;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  animation: peer-pulse-signal-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.peer-pulse-signal:last-child {
  border-right: 0;
}

html[data-appearance="dark"] .peer-pulse-signal {
  border-right-color: rgba(255, 255, 255, 0.07);
}

.peer-pulse-signal__wash {
  position: absolute;
  z-index: 0;
  inset: -35% -20% auto auto;
  width: 9.5rem;
  height: 9.5rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--fruiti-blue) 22%, transparent),
    transparent 70%
  );
  opacity: 0.55;
  pointer-events: none;
  animation: peer-pulse-wash 8.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.6s);
}

.peer-pulse-signal__label,
.peer-pulse-signal__answer,
.peer-pulse-signal__whisper {
  position: relative;
  z-index: 1;
}

.peer-pulse-signal__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 44%, transparent);
}

.peer-pulse-signal__answer {
  margin: 0.55rem 0 0;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: color-mix(in srgb, var(--ink) 94%, transparent);
  transition: color 0.2s ease, opacity 0.2s ease;
}

.peer-pulse-signal:hover .peer-pulse-signal__answer,
.peer-pulse-signal:focus-within .peer-pulse-signal__answer {
  color: color-mix(in srgb, var(--fruiti-blue) 55%, var(--ink));
}

html[data-appearance="dark"] .peer-pulse-signal:hover .peer-pulse-signal__answer,
html[data-appearance="dark"] .peer-pulse-signal:focus-within .peer-pulse-signal__answer {
  color: #c5d8ff;
}

.peer-pulse-signal__whisper {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  font-weight: 450;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}

@keyframes peer-pulse-signal-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes peer-pulse-wash {
  0%,
  100% {
    opacity: 0.4;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate3d(-6%, 8%, 0) scale(1.08);
  }
}

@media (max-width: 720px) {
  .peer-pulse__mosaic {
    grid-template-columns: 1fr;
  }

  .peer-pulse-signal {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  }

  .peer-pulse-signal:last-child {
    border-bottom: 0;
  }

  html[data-appearance="dark"] .peer-pulse-signal {
    border-bottom-color: rgba(255, 255, 255, 0.07);
  }
}

@media (prefers-reduced-motion: reduce) {
  .peer-pulse-signal,
  .peer-pulse-signal__wash {
    animation: none !important;
  }

  .peer-pulse-signal {
    opacity: 1;
    transform: none;
  }
}

.peer-pulse-starter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin: 1rem 0 0;
  padding: 0.78rem 0.95rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--fruiti-blue) 22%, transparent);
  background: color-mix(in srgb, var(--fruiti-blue) 8%, transparent);
  color: color-mix(in srgb, var(--fruiti-blue) 92%, #fff);
  font: inherit;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.peer-pulse-starter:hover,
.peer-pulse-starter:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--fruiti-blue) 42%, transparent);
  background: color-mix(in srgb, var(--fruiti-blue) 14%, transparent);
  transform: translateY(-1px);
}

html[data-appearance="dark"] .peer-pulse-starter {
  color: #b7d0ff;
  border-color: rgba(91, 140, 255, 0.28);
  background: rgba(91, 140, 255, 0.1);
}

html[data-appearance="dark"] .peer-pulse-starter:hover,
html[data-appearance="dark"] .peer-pulse-starter:focus-visible {
  border-color: rgba(91, 140, 255, 0.45);
  background: rgba(91, 140, 255, 0.16);
}

.peer-pulse-starter__label {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.peer-pulse-starter__chev {
  flex: 0 0 auto;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
  opacity: 0.55;
}

.peer-btn {
  border: 0;
  border-radius: 12px;
  padding: 0.7rem 1rem;
  font-weight: 650;
  cursor: pointer;
}

.peer-btn--primary {
  background: var(--fruiti-blue);
  color: #fff;
}

.peer-menu {
  position: fixed;
  z-index: 80;
  min-width: 180px;
  padding: 0.35rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.peer-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
}

.peer-menu__item:hover {
  background: var(--fruiti-blue-soft);
  color: var(--fruiti-blue);
}

.peer-menu__item.is-danger {
  color: #dc2626;
}

.peer-menu__item.is-danger:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.peer-report__select,
.peer-report__ta {
  width: 100%;
  margin-top: 0;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  padding: 0.72rem 0.85rem;
  background: color-mix(in srgb, var(--ink) 3.5%, transparent);
  color: var(--ink);
  font: inherit;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.peer-report__select:focus,
.peer-report__ta:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--fruiti-blue) 55%, transparent);
  box-shadow: 0 0 0 3px var(--fruiti-blue-soft);
  background: color-mix(in srgb, var(--fruiti-blue) 4%, transparent);
}

.peer-report__counter {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}

.peer-report__counter.is-ready {
  color: var(--fruiti-blue);
}

.peer-report__block {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.15rem;
  padding: 0.8rem 0.85rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.peer-report__block:hover {
  border-color: color-mix(in srgb, var(--fruiti-blue) 35%, transparent);
  background: var(--fruiti-blue-soft);
}

.peer-report__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.1rem 0 0;
  flex: 0 0 auto;
  border-radius: 6px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.peer-report__checkbox:checked {
  border-color: var(--fruiti-blue);
  background: var(--fruiti-blue);
  box-shadow: 0 0 0 3px var(--fruiti-blue-soft);
}

.peer-report__checkbox:checked::after {
  content: "";
  width: 0.28rem;
  height: 0.52rem;
  border: solid #fff;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg) translate(-0.5px, -0.5px);
}

.peer-report__block-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.peer-report__block-copy strong {
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.peer-report__block-hint {
  font-size: 0.76rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* Premium report modal shell (peer More → Report only) */
.settings-dialog--report {
  background: rgba(5, 8, 14, 0.58);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
}

.settings-dialog--report .settings-dialog__panel {
  width: min(26.5rem, 100%);
  padding: 1.35rem 1.35rem 1.2rem;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--fruiti-blue) 22%, transparent);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--fruiti-blue) 8%, transparent) 0%,
      transparent 42%
    ),
    var(--surface);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 28px 64px rgba(0, 0, 0, 0.42),
    0 0 40px color-mix(in srgb, var(--fruiti-blue) 12%, transparent);
}

html[data-appearance="dark"] .settings-dialog--report .settings-dialog__panel {
  background:
    linear-gradient(
      165deg,
      rgba(52, 120, 246, 0.12) 0%,
      transparent 46%
    ),
    #121826;
}

.settings-dialog--report .settings-dialog__title {
  margin: 0;
  font-size: 1.28rem;
}

.settings-dialog--report .settings-dialog__foot {
  margin-top: 1.15rem;
  padding-top: 0.95rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  gap: 0.55rem;
}

.settings-dialog--report .settings-dialog__btn--primary {
  background: linear-gradient(165deg, #4d8fff 0%, var(--fruiti-blue) 52%, #2866d8 100%);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--fruiti-blue) 35%, transparent);
}

.settings-dialog--report .settings-dialog__btn--ghost {
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
}

.peer-report {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.peer-report__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 0.95rem;
}

.peer-report__emblem {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 15px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--fruiti-blue);
  background: var(--fruiti-blue-soft);
  border: 1px solid color-mix(in srgb, var(--fruiti-blue) 28%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--fruiti-blue) 18%, transparent);
}

.peer-report__titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.peer-report__eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fruiti-blue);
}

.peer-report__lede {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.peer-report__field {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.peer-report__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}

.peer-report__select-wrap {
  position: relative;
}

.peer-report__select-wrap::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.7px solid color-mix(in srgb, var(--ink) 45%, transparent);
  border-bottom: 1.7px solid color-mix(in srgb, var(--ink) 45%, transparent);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.peer-report__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  cursor: pointer;
}

.peer-report__ta {
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.45;
}

.peer-report__meta {
  display: flex;
  justify-content: flex-end;
}

.peer-vault-picker__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  font-size: 0.92rem;
}

.peer-unavailable {
  max-width: 28rem;
  margin: 3rem auto;
  text-align: center;
  padding: 2rem 1.25rem;
}

.peer-unavailable__icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.peer-unavailable__title {
  margin: 0 0 1.1rem;
  font-size: 1.25rem;
  font-weight: 700;
}

@media (max-width: 980px) {
  .page-peer {
    padding: 0.85rem 0.85rem 1.1rem;
    height: auto;
    overflow: auto;
  }

  .peer-stage {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .peer-stage__photo,
  .peer-stage__photos,
  .peer-stage__panel {
    height: auto;
    padding: 1.15rem 1.1rem 1.3rem;
  }

  .peer-photos__hero .peer-photos__cell {
    max-height: min(380px, 58vw);
  }

  .peer-photos__grid,
  .peer-albums__strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .peer-kv__grid {
    grid-template-columns: 1fr;
  }

  .page-peer {
    --peer-label-w: 6.5rem;
  }
}

@media (max-width: 520px) {
  .peer-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .peer-photos__hero .peer-photos__cell {
    max-height: 300px;
  }

  .peer-photos__grid,
  .peer-albums__strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =============================================================================
   DM thread — web (MessageDetailView / DMThreadChrome parity)
   Full-bleed in right workspace when /app/messages?c= or ?to= is open.
   ============================================================================= */

.app-workspace.is-me-flush > .page-dm {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.page-dm {
  --dm-out: rgb(74, 111, 165);
  --dm-in: rgba(255, 255, 255, 0.22);
  --dm-ink: #f5f5f7;
  --dm-ink-soft: rgba(245, 245, 247, 0.72);
  --dm-meta: rgba(245, 245, 247, 0.55);
  --dm-header-bg: rgba(10, 12, 18, 0.55);
  --dm-composer-bar: rgba(255, 255, 255, 0.22);
  --dm-composer-field: rgba(255, 255, 255, 0.06);
  --dm-send: var(--dm-out);
  --dm-send-muted: rgba(255, 255, 255, 0.35);
  --dm-day-bg: rgba(255, 255, 255, 0.14);
  --dm-day-ink: rgba(245, 245, 247, 0.7);
  --dm-menu-bg: #2c2c2e;
  --dm-menu-stroke: rgba(255, 255, 255, 0.14);
  --dm-presence-active: #34c759;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  color: var(--dm-ink);
  isolation: isolate;
}

html[data-appearance="light"] .page-dm {
  --dm-out: var(--fruiti-blue);
  --dm-in: rgb(229, 229, 234);
  --dm-ink: #1c1c1e;
  --dm-ink-soft: rgba(28, 28, 30, 0.72);
  --dm-meta: rgba(28, 28, 30, 0.5);
  --dm-header-bg: rgba(242, 242, 247, 0.92);
  --dm-composer-bar: #ffffff;
  --dm-composer-field: rgb(242, 242, 247);
  --dm-send: var(--fruiti-blue);
  --dm-send-muted: rgb(199, 199, 204);
  --dm-day-bg: rgb(229, 229, 234);
  --dm-day-ink: rgb(142, 142, 147);
  --dm-menu-bg: #ffffff;
  --dm-menu-stroke: rgb(209, 209, 214);
}

.dm-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 60% at 20% -10%, rgba(74, 111, 165, 0.28), transparent 55%),
    radial-gradient(70% 50% at 90% 100%, rgba(52, 120, 246, 0.12), transparent 50%),
    linear-gradient(180deg, #0b0e14 0%, #121826 48%, #0a0c12 100%);
}

html[data-appearance="light"] .dm-canvas {
  background:
    radial-gradient(85% 55% at 12% -8%, rgba(52, 120, 246, 0.1), transparent 52%),
    linear-gradient(180deg, #f2f2f7 0%, #ffffff 42%, #eef1f7 100%);
}

.dm-canvas__photo {
  position: absolute;
  /* Overscan so blur edges don’t show hard crop (iOS peerBackdropFillOverscan 1.12). */
  inset: -6%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.12);
  /* iOS peerBackdropBlurRadius ≈ 30.8 — push softer on web so faces don’t compete with bubbles. */
  filter: blur(44px) saturate(0.85) brightness(0.62);
  transition: opacity 0.45s ease;
  will-change: filter, transform;
}

.page-dm.has-peer-photo .dm-canvas__photo {
  opacity: 1;
}

.dm-canvas__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}

html[data-appearance="light"] .dm-canvas__scrim {
  background: rgba(255, 255, 255, 0.42);
}

.page-dm.has-peer-photo .dm-canvas__scrim {
  background: rgba(0, 0, 0, 0.72);
}

html[data-appearance="light"] .page-dm.has-peer-photo .dm-canvas__scrim {
  background: rgba(255, 255, 255, 0.68);
}

@media (prefers-reduced-motion: reduce) {
  .dm-canvas__photo {
    transition: none;
  }
}

.dm-canvas__fade--top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 7.5rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.52), transparent);
}

.dm-canvas__fade--foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.52), transparent);
}

html[data-appearance="light"] .dm-canvas__fade--top,
html[data-appearance="light"] .dm-canvas__fade--foot {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
}

html[data-appearance="light"] .dm-canvas__fade--foot {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.7), transparent);
}

.dm-chrome {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.dm-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem 0.75rem;
  background: var(--dm-header-bg);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

html[data-appearance="light"] .dm-header {
  border-bottom-color: rgba(28, 28, 30, 0.08);
}

.dm-header__back,
.dm-header__more {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--dm-ink);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

html[data-appearance="light"] .dm-header__back,
html[data-appearance="light"] .dm-header__more {
  background: rgba(28, 28, 30, 0.05);
}

.dm-header__back:hover,
.dm-header__more:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

html[data-appearance="light"] .dm-header__back:hover,
html[data-appearance="light"] .dm-header__more:hover {
  background: rgba(28, 28, 30, 0.08);
}

.dm-header__peer {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  padding: 0.15rem 0.35rem 0.15rem 0.1rem;
  border-radius: 0.85rem;
}

.dm-header__peer:hover {
  background: rgba(255, 255, 255, 0.06);
}

html[data-appearance="light"] .dm-header__peer:hover {
  background: rgba(28, 28, 30, 0.04);
}

.dm-header__avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}

.dm-header__avatar {
  display: block;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.18);
}

.dm-header__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.dm-header__dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--dm-presence-active);
  box-shadow: 0 0 0 2px rgba(10, 12, 18, 0.9), 0 0 8px rgba(52, 199, 89, 0.55);
}

.dm-header__dot--hunting {
  background: #f472b6;
  box-shadow: 0 0 0 2px rgba(10, 12, 18, 0.9), 0 0 8px rgba(244, 114, 182, 0.55);
}

.dm-header__meta {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.dm-header__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-header__presence {
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--dm-ink-soft);
}

.dm-header__presence--active {
  color: var(--dm-presence-active);
}

.dm-header__presence--hunting {
  color: #f472b6;
}

.dm-header__spacer {
  flex: 1 1 auto;
}

.dm-header__menu {
  position: absolute;
  top: calc(100% - 0.35rem);
  right: 0.75rem;
  z-index: 5;
  min-width: 11.5rem;
  padding: 0.35rem;
  border-radius: 0.85rem;
  background: var(--dm-menu-bg);
  border: 1px solid var(--dm-menu-stroke);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dm-header__menu[hidden] {
  display: none !important;
}

.dm-header__menu button {
  border: 0;
  background: transparent;
  color: var(--dm-ink);
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.dm-header__menu button:hover {
  background: color-mix(in srgb, var(--fruiti-blue) 16%, transparent);
  color: var(--fruiti-blue-deep, var(--fruiti-blue));
}

.dm-stream {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.1rem 0.5rem;
  scroll-behavior: smooth;
}

.dm-stream__inner {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 42rem;
  width: 100%;
  margin: 0 auto;
  min-height: 100%;
  justify-content: flex-end;
}

.dm-day {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0 0.5rem;
}

.dm-day span {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dm-day-ink);
  background: var(--dm-day-bg);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}

.dm-empty {
  display: grid;
  place-items: center;
  min-height: 12rem;
  color: var(--dm-ink-soft);
  text-align: center;
  padding: 2rem 1rem;
}

.dm-empty p {
  margin: 0;
  max-width: 18rem;
  line-height: 1.45;
  font-size: 0.92rem;
}

.dm-bubble {
  display: flex;
  width: fit-content;
  max-width: min(82%, 26rem);
  min-width: 0;
  animation: dm-bubble-in 0.28s ease both;
}

@keyframes dm-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-bubble {
    animation: none;
  }
  .page-dm.has-peer-photo .dm-canvas__photo {
    transition: none;
  }
}

.dm-bubble--in {
  align-self: flex-start;
}

.dm-bubble--out {
  align-self: flex-end;
}

.dm-bubble.is-stack {
  margin-top: 0.12rem;
}

.dm-bubble__surface {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-width: 3.25rem;
  padding: 0.7rem 0.9rem 0.55rem;
  border-radius: 1.15rem;
  background: rgba(58, 58, 60, 0.94);
  color: var(--dm-ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  overflow: visible;
}

html[data-appearance="light"] .dm-bubble__surface {
  background: rgb(229, 229, 234);
  color: var(--dm-ink);
  box-shadow: 0 1px 4px rgba(28, 28, 30, 0.08);
}

/* Must beat light `.dm-bubble__surface` — otherwise out bubbles stay gray + white text. */
html[data-appearance="light"] .dm-bubble--out .dm-bubble__surface {
  background: var(--dm-out);
  color: #ffffff;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--dm-out) 28%, transparent);
}

.dm-bubble--out .dm-bubble__surface {
  background: var(--dm-out);
  color: #fff;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--dm-out) 28%, transparent);
}

.dm-bubble--in.is-tail .dm-bubble__surface {
  border-bottom-left-radius: 0.4rem;
}

.dm-bubble--out.is-tail .dm-bubble__surface {
  border-bottom-right-radius: 0.4rem;
}

.dm-bubble--in.is-continue .dm-bubble__surface,
.dm-bubble--in.is-stack:not(.is-tail) .dm-bubble__surface {
  border-bottom-left-radius: 0.5rem;
}

.dm-bubble--out.is-continue .dm-bubble__surface,
.dm-bubble--out.is-stack:not(.is-tail) .dm-bubble__surface {
  border-bottom-right-radius: 0.5rem;
}

.dm-bubble__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.38;
  letter-spacing: -0.01em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dm-bubble__meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(245, 245, 247, 0.55);
  white-space: nowrap;
}

html[data-appearance="light"] .dm-bubble__meta {
  color: rgba(28, 28, 30, 0.45);
}

html[data-appearance="light"] .dm-bubble--out .dm-bubble__meta {
  color: rgba(255, 255, 255, 0.82);
}

.dm-bubble--out .dm-bubble__meta {
  color: rgba(255, 255, 255, 0.78);
  text-shadow: none;
}

.dm-bubble__receipt {
  color: inherit;
  font-weight: 650;
}

.dm-typing {
  padding: 0 1rem 0.35rem;
  max-width: 44rem;
  margin: 0 auto;
  width: 100%;
}

.dm-typing__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.55rem 0.75rem;
  border-radius: 1rem;
  background: var(--dm-in);
}

.dm-typing__pill i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  display: block;
  animation: dm-typing-dot 1.05s ease-in-out infinite;
}

html[data-appearance="light"] .dm-typing__pill i {
  background: rgba(28, 28, 30, 0.45);
}

.dm-typing__pill i:nth-child(2) {
  animation-delay: 0.15s;
}
.dm-typing__pill i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes dm-typing-dot {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.dm-composer {
  flex: 0 0 auto;
  padding: 0.45rem 0.85rem 0.85rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18) 35%);
}

html[data-appearance="light"] .dm-composer {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.55) 40%);
}

.dm-composer.is-locked {
  opacity: 0.72;
  pointer-events: none;
}

.dm-tray {
  max-width: 42rem;
  margin: 0 auto 0.55rem;
  padding-left: 0;
}

.dm-tray[hidden] {
  display: none !important;
}

.dm-tray__card {
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background: rgba(28, 28, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--dm-ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

html[data-appearance="light"] .dm-tray__card {
  background: #fff;
  border-color: rgba(28, 28, 30, 0.1);
}

.dm-tray__card strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.25rem;
}

.dm-tray__card p {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--dm-ink-soft);
}

.dm-tray__card--notice p {
  margin-bottom: 0;
}

.dm-tray__phrases {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0.35rem 0 0.45rem;
  scrollbar-width: thin;
}

.dm-tray__phrases.is-delete-ready {
  padding-top: 1.35rem;
}

.dm-phrase {
  position: relative;
  flex: 0 0 auto;
  max-width: 16rem;
  border: 0;
  border-radius: 1rem;
  padding: 0.55rem 0.85rem;
  background: var(--dm-out);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--dm-out) 35%, transparent);
  overflow: visible;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.dm-phrase__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  pointer-events: none;
}

.dm-phrase.is-deleting {
  z-index: 2;
}

.dm-phrase__x {
  position: absolute;
  top: -0.85rem;
  right: -0.4rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: #ef4444;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  z-index: 3;
}

.dm-tray__hint {
  margin: 0.15rem 0 0;
  font-size: 0.68rem;
  color: var(--dm-meta);
}

.dm-tray__empty {
  font-size: 0.82rem;
  color: var(--dm-ink-soft);
  padding: 0.4rem 0.2rem;
}

.dm-tray__action {
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  background: rgba(255, 255, 255, 0.12);
  color: var(--dm-ink);
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
}

html[data-appearance="light"] .dm-tray__action {
  background: rgba(28, 28, 30, 0.06);
}

.dm-tray__action--primary {
  background: var(--dm-out);
  color: #fff;
}

.dm-tray__photos {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  padding: 0.25rem 0;
  align-items: center;
}

.dm-photo-add,
.dm-photo-tile,
.dm-photo-vault {
  flex: 0 0 auto;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 0.85rem;
  position: relative;
  overflow: hidden;
}

.dm-photo-add {
  border-width: 1px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--dm-out) 55%, transparent);
  background: rgba(255, 255, 255, 0.08);
  color: var(--dm-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  font-size: 0.68rem;
  font-weight: 650;
  cursor: pointer;
}

.dm-photo-add--delete {
  border-style: solid;
  border-color: color-mix(in srgb, #ff6b6b 70%, transparent);
  color: #ff8a8a;
}

.dm-photo-add__icon {
  font-size: 1.15rem;
  line-height: 1;
}

.dm-photo-vault {
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: rgba(20, 22, 28, 0.92);
  color: #fff;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
}

.dm-photo-vault__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px) saturate(1.05);
  transform: scale(1.18);
  pointer-events: none;
}

.dm-photo-vault__veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.55);
  pointer-events: none;
}

.dm-photo-vault__icon,
.dm-photo-vault__label {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  pointer-events: none;
}

.dm-photo-vault__icon {
  margin-top: 0;
  color: #fff;
  line-height: 0;
}

.dm-photo-vault__label {
  margin-top: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.dm-photo-vault.is-selected {
  border-color: var(--dm-out);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--dm-out) 85%, transparent),
    0 0 0 4px rgba(0, 0, 0, 0.35);
}

.dm-photo-tile {
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  padding: 0;
  cursor: pointer;
  opacity: 0.72;
  transition:
    opacity 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.dm-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.dm-photo-tile.is-uploading {
  opacity: 0.45;
  cursor: wait;
}

.dm-photo-tile.is-selected {
  opacity: 1;
  border-color: var(--dm-out);
  box-shadow:
    0 0 0 2.5px var(--dm-out),
    0 0 0 4px rgba(0, 0, 0, 0.4);
}

.dm-photo-check {
  position: absolute;
  top: 0.28rem;
  left: 0.28rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--dm-out);
  border: 1.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.dm-photo-check::after {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.18rem;
  width: 0.28rem;
  height: 0.5rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dm-vault-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.dm-vault-menu__item {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
}

.dm-vault-menu__item.is-selected {
  border-color: var(--dm-out);
  background: color-mix(in srgb, var(--dm-out) 28%, transparent);
}

.dm-composer__stack {
  position: relative;
  max-width: 42rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.dm-dock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0.5rem;
  border-radius: 1.15rem;
  background: linear-gradient(180deg, rgba(48, 52, 64, 0.98) 0%, rgba(32, 35, 44, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  animation: dm-dock-in 0.26s ease both;
}

html[data-appearance="light"] .dm-dock {
  background: linear-gradient(180deg, #ffffff 0%, #f4f5f8 100%);
  border-color: rgba(28, 28, 30, 0.14);
  box-shadow: 0 10px 28px rgba(28, 28, 30, 0.12);
}

.dm-dock[hidden] {
  display: none !important;
}

@keyframes dm-dock-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.dm-dock__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  min-height: 3.7rem;
  padding: 0.5rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f7;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

html[data-appearance="light"] .dm-dock__btn {
  background: rgba(28, 28, 30, 0.04);
  border-color: rgba(28, 28, 30, 0.06);
  color: #1c1c1e;
}

.dm-dock__btn:hover {
  background: color-mix(in srgb, var(--dm-out) 28%, transparent);
  border-color: color-mix(in srgb, var(--dm-out) 55%, transparent);
  transform: translateY(-1px);
}

.dm-dock__btn.is-selected {
  background: color-mix(in srgb, var(--dm-out) 34%, transparent);
  border-color: color-mix(in srgb, var(--dm-out) 80%, white);
  color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dm-out) 45%, transparent);
}

html[data-appearance="light"] .dm-dock__btn.is-selected {
  color: var(--dm-out);
  background: color-mix(in srgb, var(--dm-out) 14%, white);
}

.dm-dock__icon {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dm-out) 88%, white);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--dm-out) 40%, transparent);
}

.dm-dock__btn.is-selected .dm-dock__icon {
  background: #fff;
  color: var(--dm-out);
}

html[data-appearance="light"] .dm-dock__btn.is-selected .dm-dock__icon {
  background: var(--dm-out);
  color: #fff;
}

.dm-dock__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.dm-composer__bar {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  padding: 0.4rem 0.45rem;
  border-radius: 999px;
  background: rgba(28, 28, 30, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-appearance="light"] .dm-composer__bar {
  background: #ffffff;
  border-color: rgba(28, 28, 30, 0.1);
  box-shadow: 0 8px 24px rgba(28, 28, 30, 0.08);
}

.dm-composer__plus {
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.15s ease;
}

html[data-appearance="light"] .dm-composer__plus {
  background: rgba(28, 28, 30, 0.08);
  color: var(--dm-ink);
}

.dm-composer__plus.is-open {
  background: var(--dm-out);
  color: #fff;
  transform: rotate(45deg);
}

.dm-composer__field-wrap {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--dm-composer-field);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
}

.dm-composer__field {
  display: block;
  width: 100%;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--dm-ink);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.35;
  max-height: 7.5rem;
  overflow-y: auto;
}

.dm-composer__field::placeholder {
  color: var(--dm-ink-soft);
}

.dm-composer__send {
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--dm-send-muted);
  color: #fff;
  cursor: not-allowed;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.dm-composer__send.is-ready {
  background: linear-gradient(165deg, color-mix(in srgb, var(--dm-send) 90%, white), var(--dm-send));
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--dm-send) 40%, transparent);
}

.dm-composer__send.is-ready:hover {
  transform: translateY(-1px) scale(1.03);
}

.dm-composer__hint {
  max-width: 42rem;
  margin: 0.4rem auto 0;
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  color: var(--dm-meta);
}

.dm-bubble__photos {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}

.dm-bubble__photo {
  display: block;
  width: min(100%, 14rem);
  max-height: 12rem;
  object-fit: cover;
  border-radius: 0.75rem;
}

.dm-bubble__vault {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 9.5rem;
  padding: 0.35rem 0.15rem 0.45rem;
}

.dm-bubble__vault-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  background: color-mix(in srgb, #fff 22%, transparent);
  margin-bottom: 0.15rem;
  position: relative;
}

.dm-bubble__vault-icon::before {
  content: "";
  position: absolute;
  inset: 0.35rem;
  border: 2px solid currentColor;
  border-radius: 0.2rem;
  opacity: 0.9;
}

.dm-bubble__vault strong {
  font-size: 0.88rem;
  font-weight: 700;
}

.dm-bubble__vault em {
  font-style: normal;
  font-size: 0.72rem;
  opacity: 0.78;
}

.dm-bubble__loc {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 11rem;
  padding: 0.15rem 0 0.25rem;
}

.dm-bubble__loc-pin {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.22);
  position: relative;
}

.dm-bubble__loc-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.dm-bubble__loc-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.dm-bubble__loc-copy strong {
  font-size: 0.88rem;
  font-weight: 700;
}

.dm-bubble__loc-copy em {
  font-style: normal;
  font-size: 0.72rem;
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-loc {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.dm-loc__map {
  position: relative;
  display: block;
  width: 100%;
  height: 152px;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #1c1c1e;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dm-loc__map.is-selected {
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}

html[data-appearance="light"] .dm-loc__map.is-selected {
  border-color: rgba(28, 28, 30, 0.55);
}

.dm-loc__map-host,
.dm-loc__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dm-loc__fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(74, 111, 165, 0.35), transparent 70%),
    linear-gradient(160deg, #243044 0%, #1a2030 45%, #12161f 100%);
}

.dm-loc__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  margin-top: -26px;
  border-radius: 50% 50% 50% 0;
  background: #ef4444;
  transform: rotate(-45deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 2;
  pointer-events: none;
}

.dm-loc__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.dm-loc__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0 0.15rem;
}

.dm-loc__label {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--dm-ink);
}

.dm-loc__status {
  margin: 0;
  font-size: 0.72rem;
  color: var(--dm-ink-soft);
}

@media (max-width: 720px) {
  .dm-bubble {
    max-width: 90%;
  }
  .dm-header {
    padding-inline: 0.65rem;
  }
  .dm-stream {
    padding-inline: 0.75rem;
  }
  .dm-dock {
    gap: 0.3rem;
    padding: 0.35rem;
  }
  .dm-dock__btn {
    min-height: 3.25rem;
    padding: 0.35rem 0.2rem;
  }
  .dm-dock__label {
    font-size: 0.62rem;
  }
  .dm-loc__map {
    height: 140px;
  }
}

/* =============================================================================
   Where to? sheet — EOF lock (beats page-level .travel-* rules below line ~3900)
   Must match approved Discover mock image-2: flat #2c2c2e card, blue field focus,
   visible Search row, Pick on Map + chevron, gold sun heat row (no purple).
   ============================================================================= */
html body .travel-sheet .travel-field,
html[data-appearance="dark"] body .travel-sheet .travel-field,
html[data-appearance="light"] body .travel-sheet .travel-field {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  min-height: 2.9rem !important;
  padding: 0.6rem 0.95rem !important;
  border-radius: 14px !important;
  border: 0.8px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

html[data-appearance="light"] body .travel-sheet .travel-field {
  border-color: #e5e5ea !important;
  background: #fff !important;
}

html body .travel-sheet .travel-field:focus-within,
html[data-appearance="dark"] body .travel-sheet .travel-field:focus-within,
html[data-appearance="light"] body .travel-sheet .travel-field:focus-within {
  border-color: #3478f6 !important;
  box-shadow: 0 0 0 2px rgba(52, 120, 246, 0.32) !important;
}

html body .travel-sheet .travel-field__icon {
  color: #8e8e93 !important;
  opacity: 1 !important;
  filter: none !important;
}

html body .travel-sheet .travel-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  margin-top: 0.1rem !important;
}

html body .travel-sheet .travel-actions__search,
html body .travel-sheet .travel-actions__map,
html[data-appearance="dark"] body .travel-sheet .travel-actions__search,
html[data-appearance="dark"] body .travel-sheet .travel-actions__map,
html[data-appearance="light"] body .travel-sheet .travel-actions__search,
html[data-appearance="light"] body .travel-sheet .travel-actions__map {
  width: 100% !important;
  min-height: 2.75rem !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Search — always readable flat row (mock); soft blue when enabled */
html body .travel-sheet .travel-actions__search,
html[data-appearance="dark"] body .travel-sheet .travel-actions__search {
  justify-content: center !important;
  gap: 0.45rem !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

html body .travel-sheet .travel-actions__search:not(:disabled):not(.is-disabled),
html[data-appearance="dark"] body .travel-sheet .travel-actions__search:not(:disabled):not(.is-disabled) {
  background: rgba(52, 120, 246, 0.22) !important;
  color: #9ec6ff !important;
}

html body .travel-sheet .travel-actions__search.is-disabled,
html body .travel-sheet .travel-actions__search:disabled,
html[data-appearance="dark"] body .travel-sheet .travel-actions__search.is-disabled,
html[data-appearance="dark"] body .travel-sheet .travel-actions__search:disabled {
  opacity: 1 !important;
  cursor: default !important;
  pointer-events: none !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
}

html[data-appearance="light"] body .travel-sheet .travel-actions__search,
html[data-appearance="light"] body .travel-sheet .travel-actions__search.is-disabled,
html[data-appearance="light"] body .travel-sheet .travel-actions__search:disabled {
  background: rgba(52, 120, 246, 0.1) !important;
  color: #3478f6 !important;
  opacity: 0.55 !important;
}

html[data-appearance="light"] body .travel-sheet .travel-actions__search:not(:disabled):not(.is-disabled) {
  opacity: 1 !important;
  background: rgba(52, 120, 246, 0.12) !important;
  color: #3478f6 !important;
}

html body .travel-sheet .travel-actions__map,
html[data-appearance="dark"] body .travel-sheet .travel-actions__map {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.65rem !important;
  padding: 0.55rem 0.95rem !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

html[data-appearance="light"] body .travel-sheet .travel-actions__map {
  border: 0.8px solid #e5e5ea !important;
  background: #fff !important;
  color: #1c1c1e !important;
}

html body .travel-sheet .travel-hotspots {
  margin-top: 0.75rem !important;
}

html body .travel-sheet .travel-hotspots__toggle,
html[data-appearance="dark"] body .travel-sheet .travel-hotspots__toggle,
html[data-appearance="light"] body .travel-sheet .travel-hotspots__toggle {
  display: grid !important;
  grid-template-columns: 1.15rem 1fr auto !important;
  gap: 0.65rem !important;
  align-items: center !important;
  min-height: 2.75rem !important;
  padding: 0.65rem 0.95rem !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff !important;
  transform: none !important;
}

html[data-appearance="light"] body .travel-sheet .travel-hotspots__toggle {
  border: 0.8px solid #e5e5ea !important;
  background: #fff !important;
  color: #1c1c1e !important;
}

html body .travel-sheet .travel-hotspots__toggle-icon,
html body .travel-sheet .travel-hotspots__toggle-icon--sun,
html[data-appearance="dark"] body .travel-sheet .travel-hotspots__toggle-icon,
html[data-appearance="dark"] body .travel-sheet .travel-hotspots__toggle-icon--sun {
  color: #f0c14a !important;
  filter: none !important;
}

html[data-appearance="light"] body .travel-sheet .travel-hotspots__toggle-icon,
html[data-appearance="light"] body .travel-sheet .travel-hotspots__toggle-icon--sun {
  color: #d4a017 !important;
}

html body .travel-sheet .travel-hotspots__toggle-label {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: inherit !important;
}

html body .travel-sheet .travel-hotspots__chevron {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-appearance="light"] body .travel-sheet .travel-hotspots__chevron {
  color: #8e8e93 !important;
}

html body .travel-sheet .travel-history-host:empty,
html body .travel-sheet .travel-current-host:empty {
  display: none !important;
}


/* —— Create Group sheet (iOS CreateGroupChatView parity; web widths) —— */
.cg-sheet {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: stretch;
  background: #f2f2f7;
}

html[data-appearance="dark"] .cg-sheet {
  background: #0b0d12;
}

.cg-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.cg-sheet__close {
  position: absolute;
  top: 0.55rem;
  left: 0.75rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #e5e5ea;
  color: #1c1c1e;
  cursor: pointer;
  padding: 0;
}

html[data-appearance="dark"] .cg-sheet__close {
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f7;
}

.cg-sheet__close:disabled {
  opacity: 0.45;
  cursor: default;
}

.cg-sheet__close svg {
  width: 0.82rem;
  height: 0.82rem;
}

.cg-sheet__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.cg-sheet__inner {
  width: min(32rem, 100%);
  margin: 0 auto;
  padding: 3.25rem 1.25rem 2.5rem;
  box-sizing: border-box;
}

.cg-hero {
  text-align: center;
  margin-bottom: 1.75rem;
}

.cg-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}

.cg-hero__sub {
  margin: 0.75rem auto 0;
  max-width: 26rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
}

.cg-field {
  margin-bottom: 1.25rem;
}

.cg-label {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.cg-input-wrap {
  border-radius: 12px;
  background: #fff;
  border: 0.5px solid #e5e5ea;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html[data-appearance="dark"] .cg-input-wrap {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.cg-input-wrap.is-focused {
  border-width: 1.5px;
  border-color: var(--fruiti-blue);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fruiti-blue) 25%, transparent);
}

html[data-appearance="dark"] .cg-input-wrap.is-focused {
  border-color: #fff;
  box-shadow: none;
}

.cg-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  padding: 0.875rem 0.875rem;
  outline: none;
}

.cg-input::placeholder {
  color: var(--muted);
}

.cg-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.cg-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem 0 1rem;
  margin-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cg-pills::-webkit-scrollbar {
  display: none;
}

.cg-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: #fff;
  border: 0.5px solid #e5e5ea;
}

html[data-appearance="dark"] .cg-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.cg-pill__name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.cg-avatar {
  display: block;
  object-fit: cover;
  border-radius: 50%;
  background: rgba(142, 142, 147, 0.22);
}

.cg-avatar--pill {
  width: 24px;
  height: 24px;
}

.cg-avatar--row {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.cg-members {
  margin-bottom: 1rem;
}

.cg-members__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.cg-members__head .cg-label {
  margin: 0;
}

.cg-retry {
  border: 0;
  background: transparent;
  color: var(--fruiti-blue);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.15rem 0.1rem;
}

html[data-appearance="dark"] .cg-retry {
  color: #fff;
}

.cg-members__loading,
.cg-members__error,
.cg-members__empty {
  margin: 0;
  padding: 2rem 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}

.cg-members__error,
.cg-form-error {
  color: #ff3b30;
}

.cg-form-error {
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
}

.cg-members__list {
  display: flex;
  flex-direction: column;
}

.cg-member {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}

.cg-member:hover {
  background: rgba(52, 120, 246, 0.06);
}

html[data-appearance="dark"] .cg-member:hover {
  background: rgba(255, 255, 255, 0.04);
}

.cg-member__name {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}

.cg-member__check {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.cg-member__check-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(60, 60, 67, 0.28);
  box-sizing: border-box;
}

html[data-appearance="dark"] .cg-member__check-ring {
  border-color: rgba(255, 255, 255, 0.35);
}

.cg-member__check-fill {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fruiti-blue);
  position: relative;
}

html[data-appearance="dark"] .cg-member__check-fill {
  background: #fff;
}

.cg-member__check-fill::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 4.5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

html[data-appearance="dark"] .cg-member__check-fill::after {
  border-color: #0b0d12;
}

.cg-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
}

.cg-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 1rem 1.15rem;
  border: 0;
  border-radius: 16px;
  background: var(--fruiti-blue);
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
}

html[data-appearance="dark"] .cg-submit:not(.is-disabled) {
  background: #fff;
  color: #000;
}

.cg-submit.is-disabled,
.cg-submit:disabled {
  cursor: default;
  opacity: 0.45;
}

html[data-appearance="dark"] .cg-submit.is-disabled,
html[data-appearance="dark"] .cg-submit:disabled {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(235, 235, 245, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cg-submit__arrow {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
}

.cg-submit__arrow svg {
  width: 100%;
  height: 100%;
}

.cg-cancel {
  border: 0;
  background: transparent;
  color: var(--fruiti-blue);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
}

html[data-appearance="dark"] .cg-cancel {
  color: #fff;
}

.cg-cancel:disabled {
  opacity: 0.45;
  cursor: default;
}

.cg-spinner {
  display: inline-block;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid rgba(52, 120, 246, 0.22);
  border-top-color: var(--fruiti-blue);
  animation: cg-spin 0.7s linear infinite;
}

.cg-spinner--btn {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

html[data-appearance="dark"] .cg-spinner--btn {
  border-color: rgba(0, 0, 0, 0.2);
  border-top-color: #000;
}

html[data-appearance="dark"] .cg-submit.is-disabled .cg-spinner--btn,
html[data-appearance="dark"] .cg-submit:disabled .cg-spinner--btn {
  border-color: rgba(255, 255, 255, 0.18);
  border-top-color: rgba(235, 235, 245, 0.55);
}

@keyframes cg-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (min-width: 720px) {
  .cg-sheet {
    place-items: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .cg-sheet__panel {
    width: min(34rem, 92vw);
    max-height: min(860px, 92vh);
    border-radius: 22px;
    overflow: hidden;
    background: #f2f2f7;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  }

  html[data-appearance="dark"] .cg-sheet__panel {
    background: #0b0d12;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
  }

  .cg-sheet__inner {
    padding-top: 3rem;
  }
}


/* —— Group chat thread (DM chrome + iOS MessageDetailView group parity) —— */
.page-dm--group .dm-header__peer {
  cursor: default;
}
.page-dm--group .dm-header__peer:hover {
  background: transparent;
}

.dm-roster {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.35rem 1rem 0.65rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dm-roster[hidden] {
  display: none !important;
}
.dm-roster::-webkit-scrollbar {
  display: none;
}
.dm-roster__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f7;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}
html[data-appearance="light"] .dm-roster__chip {
  background: rgba(60, 60, 67, 0.08);
  border-color: rgba(60, 60, 67, 0.12);
  color: #1c1c1e;
}
.dm-roster__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(142, 142, 147, 0.25);
}
.dm-roster__name {
  white-space: nowrap;
}

.dm-bubble--group {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
}
.dm-bubble__sender-av {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 0.15rem;
}
.dm-bubble__sender-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dm-bubble__sender-av--spacer {
  visibility: hidden;
}

.dm-system {
  display: flex;
  justify-content: center;
  padding: 0.55rem 1rem;
}
.dm-system span {
  font-size: 0.75rem;
  color: rgba(235, 235, 245, 0.55);
  text-align: center;
}
html[data-appearance="light"] .dm-system span {
  color: rgba(60, 60, 67, 0.55);
}

.dm-header__menu button.is-destructive {
  color: #ff453a;
}

.dm-photos-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.dm-photos-overlay__panel {
  width: min(32rem, 94vw);
  max-height: min(80vh, 720px);
  overflow: auto;
  border-radius: 18px;
  background: #1c1f26;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
html[data-appearance="light"] .dm-photos-overlay__panel {
  background: #fff;
}
.dm-photos-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  color: #f5f5f7;
}
html[data-appearance="light"] .dm-photos-overlay__head {
  color: #1c1c1e;
  border-bottom-color: rgba(60, 60, 67, 0.12);
}
.dm-photos-overlay__close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.dm-photos-overlay__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.5rem;
  padding: 0.85rem;
}
.dm-photos-overlay__grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(142, 142, 147, 0.2);
}

/* Story viewer overlay (web — shared stories feed / view contract) */
body.is-story-viewer-open {
  overflow: hidden;
}
.story-viewer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.story-viewer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.story-viewer__card {
  position: relative;
  width: min(420px, 100%);
  max-height: min(860px, 92vh);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #0e1016;
  color: #f5f6fa;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.story-viewer__progress {
  display: flex;
  gap: 4px;
  padding: 10px 12px 0;
}
.story-viewer__bar {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.story-viewer__bar.is-done {
  background: rgba(255, 255, 255, 0.85);
}
.story-viewer__bar.is-active {
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
}
.story-viewer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
}
.story-viewer__who {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.story-viewer__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #1c2230;
}
.story-viewer__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-viewer__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.story-viewer__close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.story-viewer__stage {
  position: relative;
  flex: 1;
  min-height: 420px;
  background: #11151f;
}
.story-viewer__media {
  width: 100%;
  height: 100%;
  min-height: 420px;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  background: #0a0c12;
}
.story-viewer__hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.story-viewer__hit--prev { left: 0; }
.story-viewer__hit--next { right: 0; }
.story-viewer__caption {
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  font-size: 0.92rem;
  line-height: 1.35;
  color: rgba(245, 246, 250, 0.88);
}

/* Story composer overlay */
body.is-story-composer-open {
  overflow: hidden;
}
.story-composer {
  position: fixed;
  inset: 0;
  z-index: 1210;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.story-composer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.story-composer__card {
  position: relative;
  width: min(420px, 100%);
  max-height: min(860px, 94vh);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 18px;
  padding: 1rem 1.1rem 1.1rem;
  background: #12151e;
  color: #f5f6fa;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.story-composer.is-dragover .story-composer__card {
  outline: 2px solid var(--fruiti-blue, #3478f6);
}
.story-composer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.story-composer__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.story-composer__sub {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: rgba(245, 246, 250, 0.62);
}
.story-composer__close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
}
.story-composer__preview {
  min-height: 240px;
  border-radius: 14px;
  background: #0a0c12;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.story-composer__empty {
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  color: rgba(245, 246, 250, 0.55);
  font-size: 0.92rem;
}
.story-composer__media {
  width: 100%;
  max-height: 48vh;
  object-fit: contain;
  display: block;
}
.story-composer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.story-composer__caption-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(245, 246, 250, 0.72);
}
.story-composer__optional {
  font-weight: 500;
  opacity: 0.7;
}
.story-composer__caption {
  width: 100%;
  resize: vertical;
  min-height: 3rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  padding: 0.65rem 0.75rem;
  font: inherit;
}
.story-composer__caption:focus {
  outline: 2px solid var(--fruiti-blue, #3478f6);
  outline-offset: 1px;
}
.story-composer__status {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.85rem;
  color: rgba(245, 246, 250, 0.7);
}
.story-composer__error {
  margin: 0;
  font-size: 0.88rem;
  color: #fca5a5;
}
.story-composer__foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.25rem;
}
.story-composer__btn {
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.story-composer__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.story-composer__btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #f5f6fa;
}
.story-composer__btn--primary {
  background: var(--fruiti-blue, #3478f6);
  color: #fff;
}
.story-composer__btn--primary.is-ready {
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35);
}
html[data-appearance="light"] .story-composer__card {
  background: #f7f8fb;
  color: #14213a;
}
html[data-appearance="light"] .story-composer__sub,
html[data-appearance="light"] .story-composer__empty,
html[data-appearance="light"] .story-composer__status {
  color: rgba(20, 33, 58, 0.58);
}
html[data-appearance="light"] .story-composer__close {
  color: #14213a;
}
html[data-appearance="light"] .story-composer__preview {
  background: #e8edf5;
}
html[data-appearance="light"] .story-composer__caption {
  background: #fff;
  border-color: rgba(20, 33, 58, 0.12);
  color: #14213a;
}
html[data-appearance="light"] .story-composer__btn--ghost {
  background: rgba(20, 33, 58, 0.06);
  color: #14213a;
}
html[data-appearance="light"] .story-composer__error {
  color: #b91c1c;
}