@layer base {
  * {
    box-sizing: border-box;
  }
  html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
  }
  body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    letter-spacing: -0.011em;
    color: var(--foreground);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    overflow-x: hidden;
  }
  ::selection {
    background: var(--selection-bg);
    color: var(--selection-fg);
  }
  ::-moz-selection {
    background: var(--selection-bg);
    color: var(--selection-fg);
  }
  a {
    transition: color 0.15s ease, opacity 0.15s ease;
  }
  p {
    letter-spacing: -0.011em;
  }
  input,
  select,
  textarea {
    font: inherit;
    letter-spacing: -0.011em;
    color: var(--foreground);
    background: var(--input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.15s ease;
  }
  input:not(.auth-field-input):focus,
  select:not(.auth-field-input):focus,
  textarea:not(.auth-field-input):focus {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.1);
  }
  label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.006em;
    color: var(--foreground);
    margin-bottom: 0.25rem;
  }

  h1 {
    font-family: var(--font-display);
    letter-spacing: -0.025em;
    color: var(--primary);
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
  }
  h2, h3 {
    font-family: var(--font-sans);
    letter-spacing: -0.02em;
    color: var(--foreground);
  }
  h2 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
  }
  h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
  }
  .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
}

.font-display {
  color: var(--primary);
}

.site-logo {
  color: var(--primary);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.site-logo-img {
  display: block;
  height: 1.375rem;
  width: auto;
  max-width: 7rem;
  object-fit: contain;
}
html.dark .site-logo {
  color: #e8e8e8;
}
html.dark .site-logo-img {
  filter: brightness(0) invert(0.95);
}
html:not(.dark) .site-logo-img {
  filter: brightness(0) invert(0.08);
}
/* Auth brand panel is always near-black — keep the light wordmark. */
.auth-split-logo {
  filter: brightness(0) invert(0.95);
}

.bg-foreground\/\[0\.02\] { background-color: color-mix(in srgb, var(--foreground) 2%, transparent); }
.bg-foreground\/\[0\.03\] { background-color: color-mix(in srgb, var(--foreground) 3%, transparent); }
.bg-foreground\/\[0\.04\] { background-color: color-mix(in srgb, var(--foreground) 4%, transparent); }
.bg-foreground\/\[0\.05\] { background-color: color-mix(in srgb, var(--foreground) 5%, transparent); }
.bg-foreground\/\[0\.06\] { background-color: color-mix(in srgb, var(--foreground) 6%, transparent); }
.bg-foreground\/\[0\.08\] { background-color: color-mix(in srgb, var(--foreground) 8%, transparent); }
.bg-foreground\/\[0\.12\] { background-color: color-mix(in srgb, var(--foreground) 12%, transparent); }
.hover\:bg-foreground\/\[0\.03\]:hover { background-color: color-mix(in srgb, var(--foreground) 3%, transparent); }
.hover\:bg-foreground\/\[0\.04\]:hover { background-color: color-mix(in srgb, var(--foreground) 4%, transparent); }
.hover\:bg-foreground\/\[0\.05\]:hover { background-color: color-mix(in srgb, var(--foreground) 5%, transparent); }
.hover\:bg-foreground\/\[0\.06\]:hover { background-color: color-mix(in srgb, var(--foreground) 6%, transparent); }
.hover\:bg-foreground\/\[0\.08\]:hover { background-color: color-mix(in srgb, var(--foreground) 8%, transparent); }
.hover\:bg-foreground\/\[0\.12\]:hover { background-color: color-mix(in srgb, var(--foreground) 12%, transparent); }
.focus\:border-ring:focus { border-color: var(--ring); }
.focus\:ring-ring\/20:focus { --tw-ring-color: color-mix(in srgb, var(--ring) 20%, transparent); }
.site-footer__app-store-img--light {
  display: block;
}
.site-footer__app-store-img--dark {
  display: none;
}
html.dark .site-footer__app-store-img--light {
  display: none;
}
html.dark .site-footer__app-store-img--dark {
  display: block;
}
.site-logo-text {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: inherit;
}
.site-logo-text--sm {
  font-size: 1.0625rem;
  font-weight: 400;
}
.review-session-logo-img {
  display: block;
  height: 1.5rem;
  width: auto;
  max-width: 6rem;
  object-fit: contain;
  /* Review / call / conversation record chrome is always force-dark —
     keep the light wordmark even if Appearance is Light. */
  filter: brightness(0) invert(0.95);
}

.section-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.auth-card .role-btn {
  flex: 1 1 0;
  min-height: 2.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.25;
  cursor: pointer;
  border: 1px solid #0a0a0a;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.auth-card .role-btn:focus {
  outline: none;
}
.auth-card .role-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.auth-card .role-btn.is-role-active {
  background: #ffffff;
  color: #0a0a0a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.auth-card .role-btn.is-role-inactive {
  background: #0a0a0a;
  color: #fafafa;
  box-shadow: none;
}
.auth-card .role-btn.is-role-inactive:hover {
  background: #262626;
  color: #ffffff;
}
html.dark .auth-card .role-btn.is-role-active {
  background: #fafafa;
  color: #0a0a0a;
}
html.dark .auth-card .role-btn.is-role-inactive {
  background: #18181b;
  color: #e4e4e7;
  border-color: #27272a;
}
html.dark .auth-card .role-btn.is-role-inactive:hover {
  background: #27272a;
  color: #fafafa;
}


.auth-card select {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  line-height: 1.25;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}
.auth-card select::-ms-expand {
  display: none;
}

.landing-page .landing-fade-up {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.landing-page .landing-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}


.live-event-player-frame {
  background: #0a0a0c;
  container-type: size;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.live-event-player-frame,
.live-event-player-frame *,
.live-event-stream-chrome,
.live-event-stream-chrome * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.live-event-player-frame img,
.live-event-player-frame video {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Audience player shell — fullscreen root (frame + live ask dock). */
.live-event-player-shell {
  position: relative;
  isolation: isolate;
}
.live-event-stream-chrome {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.28s ease;
}
.live-event-player-shell.is-chrome-idle .live-event-stream-chrome {
  opacity: 0;
}
.live-event-player-shell.is-chrome-idle .live-event-stream-chrome .live-event-fs-btn {
  pointer-events: none;
}
.live-event-stream-chrome.hidden,
.live-event-stream-chrome[hidden] {
  display: none !important;
}
.live-event-fs-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, opacity 0.28s ease;
}
.live-event-fs-btn:hover {
  background: rgba(0, 0, 0, 0.62);
  border-color: rgba(255, 255, 255, 0.28);
}
.live-event-fs-btn:focus {
  outline: none;
}
.live-event-fs-btn:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.live-event-fs-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}
.live-event-fs-btn.hidden,
.live-event-fs-btn[hidden] {
  display: none !important;
}
.live-event-detail {
  overflow: hidden;
}
.live-event-ask:empty {
  display: none !important;
}

/* Ask sits under the 16:9 frame so the stage is not cropped.
   Block layout (not flex) so aspect-ratio cannot eat the bar’s height. */
.live-event-player-shell--ask {
  display: block;
}
.live-event-player-shell--ask .live-event-player-frame {
  display: block;
  width: 100%;
  overflow: hidden;
}
.live-event-player-shell:not(.live-event-player-shell--ask) .live-event-ask {
  display: none !important;
}
.live-event-player-shell--ask .live-event-ask:not(:empty) {
  display: block !important;
  position: relative;
  z-index: 6;
  min-height: 4.25rem;
  pointer-events: auto;
  background: var(--dashboard-panel);
}
.live-event-player-shell--ask .live-event-question-compose:not(.hidden) {
  display: block !important;
  pointer-events: auto;
  --dm-text: var(--foreground);
  --dm-muted: var(--muted-foreground);
  --dm-border: var(--border);
  --dm-panel: var(--dashboard-panel);
  --dm-surface: var(--background);
  --dm-mine: var(--primary);
  --dm-mine-hover: color-mix(in srgb, var(--primary) 88%, #000);
  margin: 0;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--border);
  padding: 0.75rem 0.85rem 0.875rem;
  background: var(--dashboard-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.live-event-player-shell--ask .live-event-question-compose-inner {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 1.35rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.live-event-player-shell--ask .live-event-question-compose-inner .live-event-question-compose-input {
  color: var(--foreground);
}
.live-event-player-shell--ask .live-event-question-compose-inner .live-event-question-compose-input::placeholder {
  color: var(--muted-foreground);
}
.live-event-player-shell--ask .live-event-question-compose-row {
  padding: 0;
}
.live-event-player-shell--ask .dm-compose-inner {
  background: var(--background);
  border-color: var(--border);
  box-shadow: none;
}
.live-event-player-shell--ask .live-event-question-compose .dm-compose-send {
  color: var(--primary);
}
.live-event-player-shell--ask .dm-compose-send:hover {
  color: color-mix(in srgb, var(--primary) 88%, #000);
}
.live-event-player-shell--ask .live-event-question-compose-avatar {
  box-shadow: none;
}

@media (max-width: 639px) {
  .live-event-player-shell--ask:not(:fullscreen):not(.is-fullscreen) .live-event-question-compose {
    padding: 0.75rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Fullscreen — container holds duo feeds + ask dock. */
.live-event-player-shell:fullscreen,
.live-event-player-shell:-webkit-full-screen,
.live-event-player-shell.is-fullscreen {
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  background: #000;
  display: flex;
  flex-direction: column;
  border-radius: 0 !important;
}
.live-event-player-shell.is-exiting-fullscreen {
  border-radius: 0 !important;
}
.live-event-detail:has(.is-fullscreen) {
  border-radius: 0 !important;
}
.dashboard .live-event-detail.rounded-2xl {
  transition: box-shadow 0.2s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .live-event-detail.is-fs-restoring {
    overflow: hidden;
    border-radius: 0 !important;
    transition: border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  .live-event-detail.is-fs-restoring.is-fs-rounded {
    border-radius: var(--radius-2xl, 1rem) !important;
  }
}
.live-event-player-shell:fullscreen .live-event-player-frame,
.live-event-player-shell:-webkit-full-screen .live-event-player-frame,
.live-event-player-shell.is-fullscreen .live-event-player-frame {
  flex: 1 1 auto;
  aspect-ratio: auto !important; /* override Tailwind aspect-video */
  width: 100%;
  height: auto;
  max-height: none;
  min-height: 0;
  border-radius: 0;
}
.live-event-player-shell:fullscreen .live-event-player-view,
.live-event-player-shell:-webkit-full-screen .live-event-player-view,
.live-event-player-shell.is-fullscreen .live-event-player-view {
  inset: 0;
}
.live-event-player-shell:fullscreen .live-event-ask,
.live-event-player-shell:-webkit-full-screen .live-event-ask,
.live-event-player-shell.is-fullscreen .live-event-ask {
  position: relative;
  flex-shrink: 0;
}
.live-event-player-shell:fullscreen .live-event-stream-chrome,
.live-event-player-shell:-webkit-full-screen .live-event-stream-chrome,
.live-event-player-shell.is-fullscreen .live-event-stream-chrome {
  top: max(0.75rem, env(safe-area-inset-top, 0px));
  right: max(0.75rem, env(safe-area-inset-right, 0px));
}
.live-event-player-shell:fullscreen .live-event-question-compose,
.live-event-player-shell:-webkit-full-screen .live-event-question-compose,
.live-event-player-shell.is-fullscreen .live-event-question-compose {
  padding-bottom: max(0.875rem, env(safe-area-inset-bottom, 0px));
}
.site .live-event-player-shell > .flash-toast,
.live-event-player-shell > .flash-toast {
  position: absolute;
  top: max(1.1rem, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-0.25rem);
  z-index: 80;
  max-width: min(26rem, calc(100% - 2rem));
}
.site .live-event-player-shell > .flash-toast.is-visible,
.live-event-player-shell > .flash-toast.is-visible {
  transform: translateX(-50%) translateY(0);
}
.live-event-player-poster {
  overflow: hidden;
  background: #08080a;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.live-event-player-poster .live-event-duo-thumb--player {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.live-event-player-poster .live-event-duo-thumb--player .live-event-duo-thumb-face {
  padding: 3px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #60a5fa 45%, transparent),
    color-mix(in srgb, #a78bfa 45%, transparent)
  );
  box-shadow: none;
  user-select: none;
  -webkit-user-select: none;
}
.live-event-player-poster .live-event-duo-thumb--player .live-event-duo-thumb-img {
  filter: brightness(0.96) saturate(1.06);
  border: none;
  box-shadow: none;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.live-event-player-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.1);
}
.live-event-player-frame:has([data-player-view="premiere"]:not([hidden])) .live-event-player-scrim {
  opacity: 1;
  background:
    radial-gradient(ellipse 88% 92% at 50% 50%, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.4) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.44) 100%);
}
.live-event-player-frame:has([data-player-view="premiere"]:not([hidden])) .live-event-player-poster .live-event-duo-thumb-face--a {
  animation: live-player-face-ring-a 11s ease-in-out infinite;
}
.live-event-player-frame:has([data-player-view="premiere"]:not([hidden])) .live-event-player-poster .live-event-duo-thumb-face--b {
  animation: live-player-face-ring-b 11s ease-in-out infinite;
}
@keyframes live-player-face-ring-a {
  0%, 42% {
    filter: drop-shadow(0 0 0 transparent);
  }
  21% {
    filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.2));
  }
  50%, 100% {
    filter: none;
  }
}
@keyframes live-player-face-ring-b {
  0%, 42% {
    filter: none;
  }
  69% {
    filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.2));
  }
  50%, 88%, 100% {
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-event-player-frame:has([data-player-view="premiere"]:not([hidden])) .live-event-player-poster .live-event-duo-thumb-face--a,
  .live-event-player-frame:has([data-player-view="premiere"]:not([hidden])) .live-event-player-poster .live-event-duo-thumb-face--b {
    animation: none;
  }
}
.live-event-player-scrim {
  z-index: 1;
  transition: opacity 0.4s ease;
  background:
    radial-gradient(ellipse 85% 90% at 50% 50%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.82) 100%);
}
.live-event-player-view {
  z-index: 2;
}
.live-event-player-frame:has([data-player-view="live"]:not([hidden])) .live-event-player-poster,
.live-event-player-frame:has([data-player-view="live"]:not([hidden])) .live-event-player-scrim {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.live-event-player-frame:has(#live-event-daily-mount:not(.hidden)) .live-event-player-poster,
.live-event-player-frame:has(#live-event-daily-mount:not(.hidden)) .live-event-player-scrim {
  opacity: 0;
  visibility: hidden;
}
.live-event-player-view[hidden] {
  display: none !important;
}
.live-event-player-view--premiere-countdown,
.live-event-player-view--waiting,
.live-event-player-frame [data-player-view="ended"],
.live-event-player-frame [data-player-view="cancelled"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.live-event-player-frame [data-watch-waiting],
.live-event-player-frame [data-watch-camoff] {
  display: none !important;
}
.live-event-player-frame [data-watch-waiting].is-visible,
.live-event-player-frame [data-watch-camoff].is-visible {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.live-event-player-frame .live-event-watch-grid:not(.live-event-watch-grid--screen-share) [data-watch-waiting] .call-precall-avatar,
.live-event-player-frame .live-event-watch-grid:not(.live-event-watch-grid--screen-share) [data-watch-camoff] .call-precall-avatar {
  width: clamp(5rem, 20cqh, 13.5rem);
  height: clamp(5rem, 20cqh, 13.5rem);
}
.live-event-player-frame .live-event-watch-grid:not(.live-event-watch-grid--screen-share) [data-watch-waiting] .call-precall-avatar-fallback,
.live-event-player-frame .live-event-watch-grid:not(.live-event-watch-grid--screen-share) [data-watch-camoff] .call-precall-avatar-fallback {
  font-size: clamp(1.5rem, 6cqh, 4rem);
}
.live-event-player-view--premiere {
  z-index: 0;
}
.live-event-player-frame--premiere-stage .live-event-player-poster,
.live-event-player-frame--premiere-stage .live-event-player-scrim {
  opacity: 0;
  visibility: hidden;
}
.live-event-player-view--premiere-countdown,
.live-event-player-view--waiting {
  z-index: 2;
  overflow: hidden;
  background: #020203;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: default;
}
.live-event-premiere-content,
.live-event-premiere-content * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.live-event-premiere-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #020203;
}
.live-event-premiere-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 88% 78% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.28) 100%);
}
.live-event-premiere-gradient {
  position: absolute;
  inset: -35%;
  background: linear-gradient(
    125deg,
    #030304 0%,
    #0c0c0e 18%,
    #161618 38%,
    #0a0a0c 58%,
    #121214 78%,
    #030304 100%
  );
  background-size: 280% 280%;
  animation: live-event-premiere-gradient 11s ease-in-out infinite;
}
.live-event-premiere-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}
.live-event-premiere-content > p {
  width: min(100%, 40rem);
  max-width: 40rem;
  text-align: center;
}
.live-event-premiere-countdown {
  width: auto;
  max-width: none;
}
.live-event-premiere-eyebrow {
  font-size: clamp(0.8125rem, 2.6cqh, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.62);
}
.live-event-premiere-countdown {
  font-size: clamp(3.25rem, 18cqh, 12rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 0 32px rgba(255, 255, 255, 0.18);
}
.live-event-premiere-waiting {
  font-size: clamp(1.75rem, 7cqh, 4.5rem);
  letter-spacing: -0.025em;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.12);
}
.live-event-player-frame .live-event-premiere-content {
  gap: clamp(0.5rem, 1.6cqh, 1.25rem);
}
.live-event-player-frame [data-watch-waiting] p,
.live-event-player-frame [data-watch-camoff] p {
  font-size: clamp(0.875rem, 2.6cqh, 1.5rem);
}
.live-event-player-frame .live-event-watch-connecting-inner {
  max-width: min(36rem, 92%);
  gap: clamp(0.5rem, 1.5cqh, 1rem);
}
.live-event-player-frame .live-event-watch-connecting-title {
  font-size: clamp(1rem, 3.4cqh, 2rem);
}
.live-event-player-frame .live-event-watch-connecting-body {
  font-size: clamp(0.875rem, 2.4cqh, 1.35rem);
}
.live-event-player-frame .live-event-player-status-title {
  font-size: clamp(1.125rem, 4cqh, 2.5rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
}
.live-event-player-frame .live-event-player-status-copy {
  font-size: clamp(0.875rem, 2.4cqh, 1.35rem);
  line-height: 1.5;
  max-width: min(36rem, 92%);
}
.live-event-player-frame .live-event-player-eyebrow {
  font-size: clamp(0.6875rem, 2cqh, 1rem);
}
@keyframes live-event-premiere-gradient {
  0%, 100% {
    background-position: 0% 42%;
    transform: scale(1) rotate(0deg);
  }
  33% {
    background-position: 100% 58%;
    transform: scale(1.04) rotate(0.5deg);
  }
  66% {
    background-position: 48% 100%;
    transform: scale(1.02) rotate(-0.35deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-event-premiere-gradient {
    animation: none;
  }
}
.live-event-detail.dashboard-surface:hover,
.live-event-detail.dashboard-surface:focus-within {
  transform: none;
  box-shadow: var(--card-inset-shadow), var(--card-shadow);
}
.live-event-detail--live {
  box-shadow: var(--card-inset-shadow), var(--card-shadow), 0 0 0 1px color-mix(in srgb, #f87171 22%, transparent);
}
.live-event-detail-meta {
  background: var(--surface-1);
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.live-event-detail-schedule {
  margin: 0;
}
.live-event-detail-schedule__when {
  font-size: 0.9375rem;
  line-height: 1.35;
}
.live-event-detail-schedule-day {
  font-weight: 600;
  color: var(--foreground);
  letter-spacing: -0.015em;
  font-size: 0.9375rem;
}
.live-event-detail-schedule-time {
  color: var(--muted-foreground);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.live-event-detail-schedule-time::before {
  content: '·';
  margin-right: 0.375rem;
  color: color-mix(in srgb, var(--muted-foreground) 65%, transparent);
}
.live-event-detail-schedule__meta {
  padding-left: 0.125rem;
}
.live-event-detail-schedule__meta a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 0.25rem;
}
.live-event-host-questions-item:first-child {
  padding-top: 0;
}
.live-event-detail .live-event-question-compose {
  --dm-text: var(--foreground);
  --dm-muted: var(--muted-foreground);
  --dm-border: var(--border);
  --dm-panel: var(--dashboard-panel);
  --dm-surface: var(--background);
  --dm-mine: var(--primary);
  --dm-mine-hover: color-mix(in srgb, var(--primary) 88%, #000);
  margin: 0;
  border-radius: 0;
  /* Single hairline under the player — avoid stacking with .dm-compose border-top. */
  border-top: 1px solid var(--border);
  border-bottom: 0;
  background: var(--dashboard-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.live-event-detail .live-event-question-compose.dm-compose {
  border-top: 1px solid var(--border);
  box-shadow: none;
}
.live-event-question-compose.hidden {
  display: none;
}
#live-event-ask:empty {
  display: none;
}
.live-event-question-compose-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}
.live-event-question-compose-inner {
  flex: 1;
  min-width: 0;
  cursor: text;
}
.live-event-question-compose-avatar {
  width: 2rem;
  height: 2rem;
  margin-bottom: 0;
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--muted);
}
.live-event-question-compose-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.live-event-question-compose-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--avatar-placeholder-foreground);
  background: var(--avatar-placeholder-gradient);
}
.live-event-detail-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.25rem;
}
.live-event-detail-actions .btn {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
[data-player-question-cta].hidden {
  display: none !important;
}
.live-event-watch-stage-inner {
  background: transparent;
}
.landing-hero-image {
  opacity: 1;
  box-shadow: none;
}
.hero-image-crossfade {
  position: relative;
}
.hero-image-crossfade .hero-image-light {
  opacity: 0;
  transition: opacity 0.6s ease;
}
html:not(.dark) .hero-image-crossfade .hero-image-dark {
  opacity: 0;
  transition: opacity 0.6s ease;
}
html:not(.dark) .hero-image-crossfade .hero-image-light {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-image-crossfade .hero-image-light,
  html:not(.dark) .hero-image-crossfade .hero-image-dark,
  html:not(.dark) .hero-image-crossfade .hero-image-light {
    transition: none;
  }
}

.layout {
  overflow-x: hidden;
}

html.dashboard-nav-sticky-fix,
html.dashboard-nav-sticky-fix body.site {
  overflow-x: visible !important;
}
html.dashboard-nav-sticky-fix body.site > .layout {
  overflow-x: visible !important;
}
.main {
  position: relative;
  z-index: 1;
  min-width: 0;
}

*:focus {
  outline: none;
}
a:focus-visible,
button:focus-visible {
  box-shadow: 0 0 0 2px var(--ring-offset, var(--background)), 0 0 0 4px rgba(var(--accent-rgb), 0.2);
  transition: box-shadow 0.2s ease;
}

@keyframes btn-glow-pulse {
  0%, 100% { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 0 rgba(var(--accent-rgb), 0.25); }
  50% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 24px 3px rgba(var(--accent-rgb), 0.18); }
}

.btn {
  transition: box-shadow 0.2s ease, background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.btn:active {
  opacity: 0.85;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  animation: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn:disabled:focus,
.btn:disabled:focus-visible,
.btn[disabled]:focus,
.btn[disabled]:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}
.btn.btn-primary {
  animation: none;
}
.btn.btn-secondary {
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  box-shadow: var(--btn-shadow);
}
html.dark .btn.btn-secondary {
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
}
.btn.btn-secondary:hover,
.btn.btn-ghost:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.site .layout .main,
.site .layout .site-footer {
  opacity: 1;
  transition: opacity 0.18s ease;
}
.site .layout.page-exiting .main,
.site .layout.page-exiting .site-footer {
  opacity: 0;
}

.layout .main .rounded-2xl.bg-card {
  transition: box-shadow 0.2s ease;
}
.layout .main .rounded-2xl.bg-card:hover {
  transform: none;
  box-shadow: var(--card-shadow);
}


.mentors-card-body {

  padding-top: 0.5rem;
}
.mentors-card-inner:active .mentors-card-poster {
  transform: scale(0.98);
  transition-duration: 0.1s;
}

.layout .main .rounded-2xl.bg-card:has(form),
.dashboard .rounded-2xl.bg-card:has(form) {
  box-shadow: var(--card-shadow);
}
.layout .main .rounded-2xl.bg-card:has(form):hover,
.dashboard .rounded-2xl.bg-card:has(form):hover {
  transform: none;
  box-shadow: var(--card-shadow);
}

.layout .main .rounded-2xl.bg-card:hover {
  box-shadow: var(--card-shadow);
}

.mentor-card-fav-btn--favourites-inline.is-saved {
  color: var(--primary);
  opacity: 0.95;
}
.mentor-card-fav-btn--favourites-inline.is-saved:hover {
  opacity: 1;
}

.live-call-pill--display-only {
  cursor: default;
  pointer-events: none;
}

/* Match review-tier price pills (text-xs); don't inherit .btn font-size. */
.live-call-pill-price {
  font-size: 0.75rem;
  line-height: 1.25;
  font-weight: 500;
}

.mentor-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  cursor: help;
}
.mentor-badge svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: block;
}

.mentor-badge--icon-only {
  padding: 0.5rem;
  gap: 0;
  border-radius: 9999px;
}

.mentor-profile-avatar-wrap {
  display: inline-flex;
}

.mentor-profile-page .mentor-profile-avatar {
  width: 8rem;
  height: 8rem;
  max-width: 8rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  box-sizing: border-box;
  object-fit: cover;
}
.mentor-profile-page .mentor-profile-avatar.avatar-placeholder {
  min-width: 8rem;
  min-height: 8rem;
}
@media (min-width: 640px) {
  .mentor-profile-page .mentor-profile-avatar {
    width: 9rem;
    height: 9rem;
    max-width: 9rem;
  }
  .mentor-profile-page .mentor-profile-avatar.avatar-placeholder {
    min-width: 9rem;
    min-height: 9rem;
  }
}
.mentor-profile-avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  /* Sit mostly on the avatar (was 12% outward — felt clipped off the photo). */
  transform: translate(0%, 0%);
  line-height: 0;
}
.mentor-profile-avatar-badge .mentor-profile-review-badge {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  outline: 2px solid var(--background);
}


.mentor-profile-review-badge.mentor-badge--icon-only {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 9999px;
  justify-content: center;
  transition: transform 0.2s ease;
}
.mentor-profile-review-badge.mentor-badge--icon-only svg {
  width: 14px;
  height: 14px;
}
@media (hover: hover) and (pointer: fine) {
  .mentor-profile-review-badge.mentor-badge--icon-only:hover {
    transform: scale(1.15);
  }
}

.mentor-badge--recent {
  /* Matches iOS recently-reviewed bolt (purpleStart → purpleEnd). */
  background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
}

.mentor-badge--featured {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.mentor-badge--top {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

.mentor-badge--new {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.creator-fav-profile-btn {
  vertical-align: middle;
  transform: none;
}
.creator-fav-profile-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  line-height: 0;
}
.creator-fav-profile-btn__icon svg {
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

@keyframes creator-favourite-cell-leave {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}
.js-creator-favourite-cell.is-favourite-removing {
  pointer-events: none;
  animation: creator-favourite-cell-leave 0.32s ease forwards;
}

@keyframes creator-favourites-empty-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#creator-favourites-empty-state.creator-favourites-empty-state--enter {
  animation: creator-favourites-empty-enter 0.35s ease both;
}

.dashboard .rounded-2xl.bg-card {
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.dashboard .rounded-2xl.bg-card:not(:has(form)):hover {
  box-shadow: var(--card-shadow-hover);
}

a:not(.btn) {
  transition: color 0.2s ease, opacity 0.2s ease;
}
a:not(.btn):hover {
  opacity: 0.88;
}

.site-header a:not(.btn) {
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}
.site-header a:not(.btn):hover {
  opacity: 0.9;
}
.site-header a:not(.btn):active {
  transform: scale(0.96);
}

.layout .main section img.rounded-2xl {
  transition: transform 0.4s ease, box-shadow 0.3s ease;
}
.layout .main section a:hover img.rounded-2xl,
.layout .main section img.rounded-2xl:hover {
  transform: scale(1.01);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.section-eyebrow {
  transition: letter-spacing 0.2s ease, opacity 0.2s ease;
}

.policy-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--foreground);
}

.policy-body p,
.policy-body li,
.policy-body span,
.policy-body div,
.policy-body blockquote,
.policy-body td,
.policy-body th,
.policy-body strong,
.policy-body em,
.policy-body b,
.policy-body i {
  color: var(--foreground) !important;
}
@media (min-width: 640px) {
  .policy-body {
    font-size: 1.0625rem;
  }
}
.policy-body p {
  margin-bottom: 1rem;
}
.policy-body p:last-child {
  margin-bottom: 0;
}

.policy-page-article .policy-body h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--muted-foreground) !important;
}
.policy-page-article .policy-body h1:first-child {
  margin-top: 0;
}
.policy-page-article .policy-body h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--muted-foreground) !important;
}
.policy-page-article .policy-body h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--muted-foreground) !important;
}
.policy-body ul,
.policy-body ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  line-height: 1.7;
}
.policy-body ul {
  list-style-type: disc;
}
.policy-body ol {
  list-style-type: decimal;
}
.policy-body li {
  margin-bottom: 0.35em;
}
.policy-body li:last-child {
  margin-bottom: 0;
}
.policy-body a {
  color: var(--primary) !important;
  text-decoration: underline;
}
.policy-body a:hover {
  text-decoration: none;
}
.policy-body a *,
.policy-body a strong,
.policy-body a span {
  color: inherit !important;
}

.about-section-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}
@media (min-width: 640px) {
  .about-section-body {
    font-size: 1rem;
    line-height: 1.7;
  }
}
.about-section-body p {
  margin-bottom: 0.875rem;
}
.about-section-body p:last-child {
  margin-bottom: 0;
}
.about-page .about-section-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.about-section-body h2 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--primary);
}
.about-section-body h2:first-child {
  margin-top: 0;
}
.about-section-body h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--foreground);
}
.about-section-body h3:first-child {
  margin-top: 0;
}
.about-section-body a {
  color: var(--primary);
  text-decoration: underline;
}
.about-section-body strong,
.about-section-body b {
  color: var(--foreground);
  font-weight: 600;
}
.about-section-body ul,
.about-section-body ol {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  line-height: 1.7;
}
.about-section-body ul {
  list-style-type: disc;
}
.about-section-body ol {
  list-style-type: decimal;
}
.about-section-body li {
  margin-bottom: 0.35em;
}
.about-section-body li:last-child {
  margin-bottom: 0;
}

.homepage-concept-body p {
  margin: 0 0 1rem;
}
.homepage-concept-body p:last-child {
  margin-bottom: 0;
}
.homepage-concept-body h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.homepage-concept-body h2:first-child {
  margin-top: 0;
}
.homepage-concept-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1rem 0 0.4rem;
  line-height: 1.35;
  color: var(--foreground);
}
.homepage-concept-body h3:first-child {
  margin-top: 0;
}
.homepage-concept-body ul,
.homepage-concept-body ol {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
  line-height: 1.65;
}
.homepage-concept-body ul {
  list-style-type: disc;
  list-style-position: outside;
}
.homepage-concept-body ol {
  list-style-type: decimal;
  list-style-position: outside;
}
.homepage-concept-body li {
  display: list-item;
  margin-bottom: 0.35em;
}
.homepage-concept-body li:last-child {
  margin-bottom: 0;
}
.landing-hero-sub a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.landing-hero-sub a:hover {
  color: var(--foreground);
}

.homepage-concept-body a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mentor-profile-body {
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
@media (min-width: 640px) {
  .mentor-profile-body {
    font-size: 1.0625rem;
  }
}

.admin-rich-editor-body--guide {
  min-height: 22rem;
  max-height: min(70vh, 36rem);
  overflow-y: auto;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--foreground);
}
.admin-rich-editor-wrap--guide {
  border-color: var(--border);
  background: var(--background);
}
.admin-rich-editor-wrap--guide .admin-rich-editor-toolbar {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--background) 88%, var(--muted) 12%);
}
.admin-rich-editor-body--guide:empty::before {
  content: attr(data-placeholder);
  color: var(--muted-foreground);
  pointer-events: none;
}
.admin-rich-editor-body--guide h2 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin: 1.75rem 0 0.5rem;
  line-height: 1.35;
}
.admin-rich-editor-body--guide h2:first-child {
  margin-top: 0;
}
.admin-rich-editor-body--guide h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin: 1.25rem 0 0.35rem;
  line-height: 1.4;
}
.admin-rich-editor-body--guide h3:first-child {
  margin-top: 0;
}
.admin-rich-editor-body--guide p {
  margin: 0 0 0.875rem;
}
.admin-rich-editor-body--guide ul,
.admin-rich-editor-body--guide ol {
  margin: 0 0 0.875rem;
  padding-left: 1.25rem;
}
.admin-rich-editor-body--guide a {
  color: var(--primary);
}

.auth-main { opacity: 1; padding-top: 0; }
@media (min-width: 640px) { .auth-main { padding-top: 0; } }
body.auth-page .site-footer { display: none; }
@media (min-width: 768px) {
  .auth-header { display: none; }
  .auth-main { padding-top: 0; }
}

.auth-split {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .auth-split { flex-direction: row; height: 100%; }
}

.auth-split-ambient {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  /* Brand panel stays deep in both themes — matches dark mode + iOS auth canvas
     (avoids the washed grey mix next to a light form). */
  background: #0f0f0f;
}
html.dark .auth-split-ambient {
  background: #0f0f0f;
}
@media (min-width: 768px) {
  .auth-split-ambient {
    display: block;
    width: 50%;
    flex: 0 0 50%;
    height: 100%;
    min-height: 100vh;
    align-self: stretch;
  }
}

.auth-split-ambient-inner {
  position: absolute;
  inset: 0;
  background: inherit;
  overflow: hidden;
}
.maintenance-hero-ambient {
  position: absolute;
  inset: -10%;
  overflow: hidden;
  background: transparent;
}
.call-stage-bg {
  background: #050508;
}

.call-stage-bg.call-join-scroll {
  padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}
.call-join-page {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.call-precall-people {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
}
.call-precall-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.call-inner {
  transition: max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.call-inner:has([data-call-state="incall"]:not([hidden])) {
  /* Video + control chrome must fit the viewport. On a wide screen a
     full-bleed 16:9 stage is taller than the window and pushes the
     mic/cam/leave bar off the bottom. Cap width from remaining height.
     Below 900px chat stacks under the stage, so chrome includes it. */
  --call-incall-chrome: 21rem;
  --call-chat-col: 19rem;
  --call-incall-gap: 0.75rem;
  max-width: min(96rem, 96vw, calc((100dvh - var(--call-incall-chrome)) * 3 / 4));
  flex-shrink: 1;
  min-height: 0;
  width: 100%;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px) {
  .call-inner:has([data-call-state="incall"]:not([hidden])) {
    max-width: min(96rem, 96vw, calc((100dvh - var(--call-incall-chrome)) * 16 / 9));
  }
}
@media (min-width: 900px) {
  .call-inner:has([data-call-state="incall"]:not([hidden])) {
    --call-incall-chrome: 9rem;
    max-width: min(
      96rem,
      96vw,
      calc((100dvh - var(--call-incall-chrome)) * 16 / 9 + var(--call-incall-gap) + var(--call-chat-col))
    );
  }
}

.call-room:has([data-call-state="incall"]:not([hidden])),
[data-call-state="incall"]:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

[data-call-state="incall"]:not([hidden]) .call-incall-main {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
  min-height: 0;
  width: 100%;
}
@media (min-width: 900px) {
  [data-call-state="incall"]:not([hidden]) .call-incall-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--call-chat-col);
    grid-template-rows: min-content;
    gap: var(--call-incall-gap);
    align-items: stretch;
  }
}

[data-call-state="incall"]:not([hidden]) .call-stage {
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
}

.call-stage-aspect {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
  max-height: calc(100dvh - var(--call-incall-chrome, 9rem));
}
@media (min-width: 640px) {
  .call-stage-aspect { aspect-ratio: 16 / 9; }
}

[data-call-state] {
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.call-state-leaving {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.call-state-entering {
  opacity: 0;
  transform: translateY(6px);
}

[data-call-state="incall"]:not([hidden]) .call-stage {
  animation: callStageIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-call-state="incall"]:not([hidden]) .call-self-pip {
  animation: callPipIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
[data-call-state="incall"]:not([hidden]) .call-controls {
  animation: callControlsIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
  flex-shrink: 0;
}
@keyframes callStageIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes callPipIn {
  from { opacity: 0; transform: translate(20%, 20%) scale(0.7); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes callControlsIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.call-precall-avatar.call-precall-avatar--xl {
  width: 8rem;
  height: 8rem;
}

.call-precall-avatar.call-precall-avatar--pulse {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
              inset 0 0 0 2px rgba(255, 255, 255, 0.18),
              0 0 0 0 rgba(37, 99, 235, 0.55);
  animation: callAvatarPulse 2.4s ease-in-out infinite;
}
@keyframes callAvatarPulse {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
                inset 0 0 0 2px rgba(255, 255, 255, 0.18),
                0 0 0 0 rgba(37, 99, 235, 0.55);
  }
  50% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
                inset 0 0 0 2px rgba(255, 255, 255, 0.18),
                0 0 0 18px rgba(37, 99, 235, 0);
  }
}
.call-precall-avatar.call-precall-avatar--xl .call-precall-avatar-fallback {
  font-size: 2.25rem;
}
@media (min-width: 1024px) {
  .call-precall-avatar.call-precall-avatar--xl { width: 10rem; height: 10rem; }
  .call-precall-avatar.call-precall-avatar--xl .call-precall-avatar-fallback { font-size: 3rem; }
}

.call-self-pip {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}
@media (min-width: 640px) {
  .call-self-pip { width: 7rem; height: 7rem; bottom: 1.25rem; right: 1.25rem; }
}
@media (min-width: 1024px) {
  .call-self-pip { width: 9rem; height: 9rem; bottom: 1.5rem; right: 1.5rem; }
}
@media (min-width: 1440px) {
  .call-self-pip { width: 11rem; height: 11rem; bottom: 1.75rem; right: 1.75rem; }
}
.call-self-pip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.call-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.call-ctrl:hover { background: rgba(255, 255, 255, 0.14); }
.call-ctrl:active { transform: scale(0.95); }
.call-ctrl:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.65);
  outline-offset: 2px;
}

.call-ctrl[aria-pressed="true"] {
  background: var(--destructive);
  color: var(--destructive-foreground);
}
.call-ctrl[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(-45deg);
  pointer-events: none;
}
.call-ctrl {
  position: relative;
}

.call-cam-off {
  display: none !important;
}
.call-cam-off.is-visible {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.call-ctrl[data-call-toggle-screen][aria-pressed="true"],
.call-ctrl[data-le-toggle-screen][aria-pressed="true"] {
  background: #2563eb;
  color: #fff;
}
.call-ctrl[data-le-toggle-screen]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.call-ctrl--leave {
  background: var(--destructive);
  color: var(--destructive-foreground);
}
.call-ctrl--leave:hover { background: var(--destructive); opacity: 0.9; }

.call-local-share {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: #000;
  text-align: center;
  padding: 1.5rem;
  pointer-events: none;
}
.call-local-share.is-visible {
  display: flex;
}
.call-local-share-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.call-chat {
  --dm-mine: #6d28d9;
  --dm-mine-end: #5b21b6;
  --dm-mine-hover: #5b21b6;
  --dm-mine-gradient: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
  --dm-theirs: var(--muted);
  --dm-theirs-text: var(--foreground);
  --dm-border: var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-height: 13rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 32px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
@media (min-width: 900px) {
  .call-chat {
    /* Don't let chat content size the grid row — the 16:9 stage
       owns the height. height:0 + min-height:100% stretches the
       column to match the webcam without growing past it. */
    height: 0;
    min-height: 100%;
    max-height: 100%;
    flex-shrink: 1;
    align-self: stretch;
    border-radius: 1.5rem;
  }
}
.call-chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.75rem 0.7rem 0.45rem;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.call-chat-notice {
  flex-shrink: 0;
  margin: 0;
  padding: 0.55rem 0.75rem 0.45rem;
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.42);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.call-chat-empty {
  margin: auto 0;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.38);
}
.call-chat .dm-bubble-wrap:first-of-type {
  margin-top: 0;
}
.call-chat .dm-bubble {
  cursor: default;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}
.call-chat .dm-bubble p {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}
.call-chat .dm-bubble-wrap--mine {
  overflow: visible;
}
@media (max-width: 767px), (pointer: coarse) {
  .call-chat a.dm-bubble-link {
    pointer-events: none;
    cursor: inherit;
  }
  .call-chat .dm-bubble-wrap--mine .dm-bubble-delete {
    opacity: 1;
  }
}
.call-chat-compose {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.call-chat-compose input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.25rem;
  border: 0;
  border-radius: 9999px;
  padding: 0 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
  font: inherit;
  font-size: 0.8125rem;
  outline: none;
}
.call-chat-compose input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.call-chat-compose input:focus {
  background: rgba(255, 255, 255, 0.12);
}
.call-chat .dm-compose-send {
  margin-bottom: 0;
}

.call-precall-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.call-precall-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.call-precall-avatar .call-precall-avatar-fallback {
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
}
.call-precall-title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  text-align: center;
  margin: 0;
  font-size: clamp(1.75rem, 4vw + 1rem, 2.75rem);
}


.call-ended-wrap .call-precall-people {
  gap: 0.65rem;
}
.call-ended-wrap .call-precall-avatar {
  width: 3rem;
  height: 3rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.call-ended-wrap .call-precall-avatar .call-precall-avatar-fallback {
  font-size: 1rem;
}

.auth-split-ambient .auth-split-logo-link {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.auth-split-logo-link:hover { opacity: 0.9; }
.auth-split-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(16rem, 58%);
  max-height: min(16rem, 42vh);
  object-fit: contain;
}

.auth-split-form {
  overflow-y: auto;
  background: var(--background);
}
@media (min-width: 768px) {
  .auth-split-form {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }
}
.auth-split-form-body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: auto;
  box-sizing: border-box;
  padding: 0 1rem;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .auth-split-form-body {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 768px) {
  .auth-split-form-body {
    align-items: center;
    min-height: 100%;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    gap: 1.75rem;
  }
}


.auth-card {
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
  margin-block: 0;
}
@media (min-width: 768px) {
  .auth-card {
    margin-block: auto;
  }
}
.auth-card--wide {
  max-width: 30rem;
}
.auth-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.auth-card-title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.5rem, 3.5vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--primary);
}
.auth-card-lead {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}
.auth-field-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--foreground);
}
.auth-field--float {
  position: relative;
  gap: 0;
}
.auth-field--select {
  gap: 0;
}
.auth-field-float-label {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--muted-foreground);
  pointer-events: none;
  transition: top 0.15s ease, transform 0.15s ease, font-size 0.15s ease;
}

.auth-field--float .auth-field-input:not(.auth-field-select) {
  box-sizing: border-box;
  height: 3rem;
  min-height: 3rem;
  padding: 1.375rem 0.75rem 0.5rem;
  line-height: 1.25;
}
.auth-field--float .auth-field-input:not(.auth-field-select)::placeholder {
  color: transparent;
}
.auth-field--float .auth-field-input:not(.auth-field-select):focus ~ .auth-field-float-label,
.auth-field--float .auth-field-input:not(.auth-field-select):not(:placeholder-shown) ~ .auth-field-float-label,
.auth-field--float .auth-field-input:not(.auth-field-select):-webkit-autofill ~ .auth-field-float-label,
.auth-field--float .auth-field-textarea:focus ~ .auth-field-float-label,
.auth-field--float .auth-field-textarea:not(:placeholder-shown) ~ .auth-field-float-label {
  top: 0.5rem;
  transform: translateY(0);
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
}
.auth-field--float-textarea .auth-field-float-label {
  top: 0.75rem;
  transform: translateY(0);
}
.auth-field--float-textarea .auth-field-textarea + .auth-field-float-label {
  z-index: 1;
}
.profile-form .auth-field--float-textarea {
  position: relative;
}
.auth-field--float-textarea .auth-field-textarea {
  padding-top: 2.125rem;
  line-height: 1.4;
}
.auth-field--float-textarea .auth-field-textarea:focus ~ .auth-field-float-label,
.auth-field--float-textarea .auth-field-textarea:not(:placeholder-shown) ~ .auth-field-float-label {
  top: 0.5rem;
}
.auth-field--float .auth-field-textarea {
  min-height: 8.75rem;
  resize: vertical;
}
.auth-field--float .auth-field-textarea:focus,
.auth-field--float .auth-field-textarea:not(:placeholder-shown) {
  min-height: 8.75rem;
}
.profile-form .auth-field--float .auth-field-float-label + .text-xs,
.profile-form .auth-field--float .auth-field-float-label + span.text-\[0\.8125rem\] {
  display: block;
}
.auth-field--select:not(.auth-field--float) .auth-field-select {
  min-height: 3rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.auth-field--float.auth-field--select .auth-field-float-label,
.auth-field--float:has(.auth-field-select) .auth-field-float-label {
  top: 0.5rem;
  transform: translateY(0);
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
}
.auth-field--float.auth-field--select .auth-field-select,
.auth-field--float:has(.auth-field-select) .auth-field-select {
  box-sizing: border-box;
  min-height: 3rem;
  height: 3rem;
  padding: 1.375rem 2.25rem 0.5625rem 0.75rem;
  line-height: 1.2;
}
.auth-field-input {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--input);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--foreground);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-field-input::placeholder {
  color: var(--muted-foreground);
}
.auth-field-input:hover {
  border-color: color-mix(in srgb, var(--border) 70%, var(--foreground));
}
.auth-field-input:focus,
.auth-field-input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--border) 55%, var(--foreground) 45%);
  box-shadow: none;
}
.auth-field-input:-webkit-autofill,
.auth-field-input:-webkit-autofill:hover,
.auth-field-input:-webkit-autofill:focus,
.auth-field-input:-webkit-autofill:active,
.auth-field-textarea:-webkit-autofill,
.auth-field-textarea:-webkit-autofill:hover,
.auth-field-textarea:-webkit-autofill:focus,
.auth-field-textarea:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--input) inset !important;
  box-shadow: 0 0 0 1000px var(--input) inset !important;
  -webkit-text-fill-color: var(--foreground) !important;
  caret-color: var(--foreground);
  transition: background-color 99999s ease-out 0s;
}
.auth-field-textarea {
  min-height: 8.75rem;
  resize: vertical;
}
.auth-field-select {
  appearance: none;
  padding-right: 2.25rem;
  color: var(--foreground);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}
.auth-field-select:required:invalid {
  color: var(--muted-foreground);
}
.auth-field-select option {
  color: var(--foreground);
}
.auth-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 480px) {
  .auth-field-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.auth-role-toggle {
  display: flex;
  gap: 0.5rem;
}
.auth-submit,
.auth-oauth-btn {
  width: 100%;
  min-height: 2.5rem;
  border-radius: 0.5rem;
  justify-content: center;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--muted-foreground);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-oauth {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.auth-card-foot {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.auth-card-foot--single {
  gap: 0;
}
.auth-card-foot-muted {
  color: var(--muted-foreground);
}
.auth-link {
  color: var(--foreground);
  text-decoration: none;
  transition: color 0.15s ease;
}
.auth-link:hover {
  color: var(--primary);
}
.auth-form-error {
  margin: 0;
  font-size: 0.875rem;
  color: var(--destructive);
}

@media (max-width: 767px) {

  body.auth-page {
    min-height: auto;
  }

  body.auth-page .layout {
    min-height: 0;
    height: auto;
    display: block;
  }

  body.auth-page .auth-main {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    min-height: 100dvh;
    box-sizing: border-box;
    padding-top: 3.75rem !important;
    padding-bottom: 1.5rem;
  }
  body.auth-page .auth-split {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  body.auth-page .auth-split-form {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: visible;
  }
  body.auth-page .auth-split-form-body {
    flex: 0 0 auto;
    width: 100%;
  }
  body.auth-page .auth-card,
  body.auth-page .auth-card--wide {
    max-width: none;
    width: 100%;
    margin-block: 0;
  }
  body.auth-page-signup .auth-main {
    justify-content: flex-start;
    padding-bottom: 2.5rem;
  }
  body.auth-page-signup .auth-split-form-body {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 640px) and (max-width: 767px) {
  body.auth-page .auth-main { padding-top: 4rem !important; }
  body.auth-page-signup .auth-split-form-body {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 768px) {
  body.auth-page { height: 100vh; max-height: 100vh; overflow: hidden; }
  body.auth-page .layout {
    height: 100%;
    min-height: 0;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.auth-page .auth-main {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.auth-page .auth-split {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
  }
  body.auth-page .auth-split-form {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.auth-page .auth-split-form-body {
    flex: 0 0 auto;
    min-height: 100%;
  }
}

.avatar-placeholder {
  background: var(--avatar-placeholder-gradient);
  color: var(--avatar-placeholder-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  padding-top: 0.08em;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.avatar-placeholder *,
.avatar-placeholder::before,
.avatar-placeholder::after {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.dashboard .rounded-full img {
  transition: transform 0.35s ease;
}
.dashboard a:hover .rounded-full img,
.dashboard li:hover .rounded-full img {
  transform: scale(1.03);
}

.site-header {
  background: var(--background);
  isolation: isolate;
  box-shadow: none;
  /* Opacity/transform for scroll hide — not background. Theme flips use
     View Transitions (theme.js) so the bar doesn’t lag behind the page. */
  transition: opacity 0.25s cubic-bezier(0.2, 0, 0, 1), transform 0.25s cubic-bezier(0.2, 0, 0, 1), visibility 0.25s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* Appearance Dark ↔ Light — soft whole-page crossfade (theme.js startViewTransition). */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.42s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: 0.01ms;
    }
  }
}

.site-header.is-scrolled-away {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
}

html.has-overlay-dialog .site-header {
  isolation: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.layout.is-scrolled .site-header {
  background: color-mix(in oklch, var(--background) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 4px 20px -12px rgba(15, 18, 24, 0.08);
}
html.dark .layout.is-scrolled .site-header {
  box-shadow: 0 4px 20px -12px rgba(0, 0, 0, 0.45);
}

body.site-landing .site-header {
  background: transparent;
  box-shadow: none;
}
body.site-landing .layout.is-scrolled .site-header {
  background: color-mix(in oklch, var(--background) 84%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 6px 24px -14px rgba(15, 18, 24, 0.08);
}
html.dark body.site-landing .layout.is-scrolled .site-header {
  box-shadow: 0 6px 24px -14px rgba(0, 0, 0, 0.5);
}

.site-footer {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.02);
}
html.dark .site-footer {
  background: rgba(255, 255, 255, 0.02);
}

.dashboard-nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.dashboard-nav-link svg {
  flex-shrink: 0;
}
/* Inactive nav inherits muted classes from markup; don't force primary on every link. */
.dashboard-sidebar a.dashboard-nav-link,
.dashboard-sidebar-rail a.dashboard-nav-link {
  transition: color 0.15s ease, background 0.15s ease;
}
.dashboard-sidebar a.dashboard-nav-link:not(.dashboard-nav-active),
.dashboard-sidebar-rail a.dashboard-nav-link:not(.dashboard-nav-active) {
  color: var(--muted-foreground);
  font-weight: 500;
}
.dashboard-sidebar a.dashboard-nav-link:not(.dashboard-nav-active):hover,
.dashboard-sidebar-rail a.dashboard-nav-link:not(.dashboard-nav-active):hover {
  color: var(--foreground);
  background: rgba(0, 0, 0, 0.035);
}
html.dark .dashboard-sidebar a.dashboard-nav-link:not(.dashboard-nav-active):hover,
html.dark .dashboard-sidebar-rail a.dashboard-nav-link:not(.dashboard-nav-active):hover {
  background: rgba(255, 255, 255, 0.05);
}
.dashboard-nav-active {
  background: transparent !important;
  color: var(--foreground) !important;
  font-weight: 600;
}
.dashboard-nav-active:hover {
  background: rgba(0, 0, 0, 0.035) !important;
}
html.dark .dashboard-nav-active:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Dashboard stack rhythm — tighter than the old space-y-4/5 mix.
   Heading gap tracks iOS home (10pt under greeting → first card). */
body.dashboard-page {
  --dashboard-stack-gap: 0.875rem;
  --dashboard-heading-gap: 0.625rem;
}
@media (min-width: 640px) {
  body.dashboard-page {
    --dashboard-stack-gap: 1rem;
    --dashboard-heading-gap: 0.75rem;
  }
}
.dashboard.dashboard-mentor,
.dashboard.dashboard-creator {
  display: flex;
  flex-direction: column;
  gap: var(--dashboard-stack-gap);
}
.dm-page-heading-row {
  margin-bottom: var(--dashboard-heading-gap) !important;
}

/* Messages: never show a dashboard page H1. */
body.dashboard-messages-page .dm-page-heading-row {
  display: none !important;
}


@media (max-width: 767px) {
  body.dashboard-page {
    --dashboard-phone-gutter: 1.25rem;
    --folio-page-gutter: 1.25rem;
    --dashboard-phone-top: 1rem;
    --dashboard-phone-header-clear: calc(4rem + env(safe-area-inset-top, 0px));
  }

  body.dashboard-page .layout > .main {
    padding-left: var(--dashboard-phone-gutter) !important;
    padding-right: var(--dashboard-phone-gutter) !important;
    padding-bottom: 2rem !important;
  }

  body.dashboard-page:not(.dashboard-messages-page):not(.dashboard-portfolio-empty) .layout > .main {
    padding-top: calc(var(--dashboard-phone-header-clear) + var(--dashboard-phone-top)) !important;
  }

  body.dashboard-page .layout > .main > .max-w-5xl {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  body.dashboard-page .layout > .main > .max-w-5xl > div > .flex-1 {
    padding-top: 0 !important;
  }

  body.dashboard-page .dm-page-heading-row {
    margin-bottom: 1.625rem;
  }

  body.dashboard-page .dm-page-heading-row h1 {
    font-size: 2.25rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
  }


  html:has(body.dashboard-messages-page) {
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.dashboard-messages-page {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0 !important;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.dashboard-messages-page .layout {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body.dashboard-messages-page .layout > .main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-width: none !important;
    padding-top: var(--dashboard-phone-header-clear) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  body.dashboard-messages-page .dashboard-messages-layout-outer,
  body.dashboard-messages-page .dashboard-messages-layout-row {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 0 !important;
  }

  body.dashboard-messages-page .dashboard-messages-layout-row > .flex-1,
  body.dashboard-messages-page .dashboard-messages-root,
  body.dashboard-messages-page .dm-panels,
  body.dashboard-messages-page .dm-messages-shell,
  body.dashboard-messages-page .dm-panels-stage {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
  }

  body.dashboard-messages-page .dashboard-messages-layout-row > .flex-1 {
    display: flex;
    flex-direction: column;
  }

  body.dashboard-messages-page:not(.dm-thread-open) .dm-inbox-view {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  body.dashboard-messages-page:not(.dm-thread-open) .dm-inbox-nav {
    padding: 0.5rem var(--dashboard-phone-gutter) 0.65rem;
  }

  body.dashboard-messages-page:not(.dm-thread-open) .dm-inbox-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.15rem 0 0;
  }

  body.dashboard-messages-page:not(.dm-thread-open) .dm-inbox-section-head {
    display: none !important;
  }

  body.dashboard-messages-page .dm-messages-shell.dashboard-surface {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
  }

  body.dashboard-messages-page:not(.dm-thread-open) #dm-inbox-list {
    gap: 0;
  }

  body.dashboard-messages-page:not(.dm-thread-open) .dm-inbox-item.dashboard-surface,
  body.dashboard-messages-page:not(.dm-thread-open) .dm-inbox-item {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
  }

  body.dashboard-messages-page:not(.dm-thread-open) .dm-inbox-item + .dm-inbox-item,
  body.dashboard-messages-page:not(.dm-thread-open) #dm-inbox-list.dashboard-list-flat > li + li {
    border-top: 0 !important;
  }

  body.dashboard-messages-page:not(.dm-thread-open) #dm-inbox-list.dashboard-list-flat > .dm-inbox-item + .dm-inbox-item::before {
    left: calc(var(--dashboard-phone-gutter) + 3.5rem + 0.75rem);
    right: var(--dashboard-phone-gutter);
  }

  body.dashboard-messages-page:not(.dm-thread-open) .dm-inbox-item {
    padding: 0.7rem var(--dashboard-phone-gutter);
  }

  body.dashboard-messages-page:not(.dm-thread-open) .dm-inbox-item-copy {
    gap: 0.2rem;
  }

  body.dashboard-messages-page:not(.dm-thread-open) .dm-inbox-item-link {
    border-radius: 0;
  }


  body.dashboard-messages-page.dm-thread-open .dashboard-messages-layout-row {
    align-items: stretch !important;
  }

  body.dashboard-messages-page.dm-thread-open .dashboard-messages-layout-row > .flex-1 {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    align-self: stretch;
  }

  body.dashboard-messages-page.dm-thread-open .dashboard-messages-root,
  body.dashboard-messages-page.dm-thread-open .dm-panels,
  body.dashboard-messages-page.dm-thread-open .dm-messages-shell {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
  }

  body.dashboard-messages-page.dm-thread-open .dm-panels-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.dashboard-messages-page.dm-thread-open .dm-panels.dm-panels--thread .dm-thread-view {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }


  body.dashboard-messages-page.dm-thread-open .dm-thread-scroll {
    padding-top: 0.5rem;
  }

  body.dashboard-messages-page.dm-thread-open .dm-messages {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  body.dashboard-messages-page.dm-thread-open .dm-thread-nav {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  body.dashboard-messages-page.dm-thread-open .dm-compose {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  body.dashboard-messages-page.dm-thread-open .dashboard-messages-layout-outer {
    padding-top: 0 !important;
  }
}

.mentor-profile-page {
  min-width: 0;
}
.creator-profile-showcase-frame {
  background: var(--muted);
}
.creator-profile-showcase-img {
  vertical-align: top;
}

.creator-portfolio {
  --cp-fg: var(--foreground);
  --cp-muted: var(--muted-foreground);
  --cp-border: var(--border);
  --cp-tile-bg: var(--muted);
  width: 100%;
  margin: 0;
  padding: 0;
}
.creator-profile-page,
.creator-profile-page .mentor-profile-page-wrapper,
.creator-profile-page .creator-profile-sections {
  overflow-x: visible;
}
.creator-profile-page .creator-portfolio {
  transition:
    width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    margin-left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    margin-right 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}
.creator-profile-page .creator-portfolio.is-layout-instant {
  transition: none;
}
.creator-profile-page .creator-portfolio.is-layout-fading {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 639px) {
  .creator-profile-page .creator-portfolio[data-layout="grid"],
  .creator-profile-page .creator-portfolio[data-layout="full"] {
    /* Escape nested main + wrapper gutters (both px-4) */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}
@media (min-width: 640px) {
  .creator-profile-page .creator-portfolio {
    --cp-wide: min(56rem, calc(100vw - 3rem));
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .creator-profile-page .creator-portfolio[data-layout="grid"] {
    width: var(--cp-wide);
    margin-left: calc((100% - var(--cp-wide)) / 2);
    margin-right: calc((100% - var(--cp-wide)) / 2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .creator-profile-page .creator-portfolio {
    transition: none;
  }
}
.creator-profile-page .creator-portfolio-toggle {
  margin-top: 0;
}
.creator-profile-page a.mentor-profile-hero__website:hover {
  text-decoration: underline;
  opacity: 1;
}
.creator-portfolio-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: min(11rem, 100%);
  max-width: 100%;
  margin: 0 auto 0.75rem;
  padding: 0.375rem 0 0.5rem;
  border-bottom: 0;
}
.creator-portfolio-toggle__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-width: 0;
  padding: 0.375rem 0.75rem;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--cp-fg) 45%, transparent);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.creator-portfolio-toggle__btn.is-active {
  color: var(--cp-fg);
  transform: scale(1.06);
}
.creator-portfolio-toggle__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cp-fg) 45%, transparent);
  outline-offset: 2px;
  border-radius: 0.5rem;
}
@media (min-width: 640px) {
  .creator-portfolio-toggle__btn:focus,
  .creator-portfolio-toggle__btn:focus-visible {
    outline: none;
    box-shadow: none;
  }
}
.creator-portfolio-toggle__icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}
.creator-portfolio-toggle__indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 2px;
  pointer-events: none;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.creator-portfolio-toggle__indicator::after {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  margin: 0 auto;
  border-radius: 9999px;
  background: var(--cp-fg);
}
.creator-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.creator-portfolio-tile {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 640px) {
  .creator-portfolio-tile {
    aspect-ratio: 4 / 5;
  }
}
.creator-portfolio-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .creator-portfolio-tile:hover .creator-portfolio-tile__img {
    transform: scale(1.045);
  }
  .creator-portfolio-tile:hover .creator-portfolio-tile__media--text {
    opacity: 0.88;
  }
}
.creator-portfolio-tile:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cp-fg) 55%, transparent);
  outline-offset: -2px;
  z-index: 1;
}
.creator-portfolio-tile__media {
  position: absolute;
  inset: 0;
  background: var(--cp-tile-bg);
}
.creator-portfolio-tile__media--video {
  background: #111;
}
.creator-portfolio-tile__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
}
.creator-portfolio-tile__play svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.1rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.creator-portfolio-tile__media--text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  box-sizing: border-box;
}
.creator-portfolio-tile__text {
  font-family: var(--font-display, Times New Roman MT Std, Georgia, serif);
  font-weight: 300;
  font-size: clamp(0.7rem, 2.4vw, 0.95rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--cp-fg);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.creator-portfolio-tile__text--body {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 400;
  font-size: clamp(0.65rem, 2vw, 0.8125rem);
  line-height: 1.35;
  letter-spacing: -0.011em;
  -webkit-line-clamp: 5;
  opacity: 0.88;
}
.creator-portfolio-tile__text--empty {
  font-size: 1.25rem;
  opacity: 0.35;
  -webkit-line-clamp: 1;
}
@media (min-width: 640px) {
  .creator-portfolio-tile__media--text {
    padding: 0.85rem 0.9rem;
  }
  .creator-portfolio-tile__text:not(.creator-portfolio-tile__text--body):not(.creator-portfolio-tile__text--empty) {
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
    -webkit-line-clamp: 5;
  }
  .creator-portfolio-tile__text--body {
    font-size: clamp(0.8rem, 1.05vw, 0.95rem);
    -webkit-line-clamp: 6;
  }
}
.creator-portfolio-full {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.creator-portfolio-full__item {
  scroll-margin-top: 0;
}
.creator-portfolio-full__item:last-child {
  margin-bottom: 0;
}
/* Bare media needs gallery air; captions already separate posts. */
.creator-portfolio-full__item--flush {
  margin-bottom: 1.25rem;
}
.creator-portfolio-full__item--captioned {
  margin-bottom: 0.375rem;
}
.creator-portfolio-full__item--text {
  margin-bottom: 1rem;
}
.creator-portfolio-full__caption {
  margin: 0.625rem 1rem 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.011em;
  line-height: 1.4;
  color: var(--muted-foreground);
}
.creator-portfolio-full__text {
  padding: 1.375rem 1rem 1rem;
  border: 0;
  background: transparent;
}
.creator-portfolio-full__text-title {
  margin: 0;
  font-family: var(--font-display, Times New Roman MT Std, Georgia, serif);
  font-weight: 300;
  font-size: 1.375rem;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--foreground);
}
.creator-portfolio-full__text-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  letter-spacing: -0.011em;
  color: var(--muted-foreground);
}
.creator-portfolio-full__text-body.has-title {
  margin-top: 0.625rem;
}
@media (min-width: 640px) {
  .creator-portfolio-full__item--flush {
    margin-bottom: 1.75rem;
  }
  .creator-portfolio-full__item--captioned {
    margin-bottom: 0.5rem;
  }
  .creator-portfolio-full__item--text {
    margin-bottom: 1.25rem;
  }
  .creator-portfolio-full__caption {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
  .creator-portfolio-full__text {
    padding: 1.75rem 0 1.25rem;
  }
  .creator-portfolio-full__text-title {
    font-size: 1.75rem;
  }
  .creator-portfolio-full__text-body {
    font-size: 1rem;
  }
}
.creator-portfolio[data-layout="grid"] .creator-portfolio-full {
  display: none;
}
.creator-portfolio[data-layout="full"] .creator-portfolio-grid {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .creator-portfolio-toggle__btn,
  .creator-portfolio-toggle__indicator {
    transition: none;
  }
}
.mentor-profile-page-wrapper {
  position: relative;
  min-width: 0;
}

@keyframes mentor-profile-hero-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mentor-profile-hero {
  padding-top: 0.5rem;
  padding-bottom: 1.75rem;
  animation: mentor-profile-hero-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (min-width: 640px) {
  .mentor-profile-hero {
    padding-top: 0.75rem;
    padding-bottom: 2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mentor-profile-hero {
    animation: none;
  }
}
.mentor-profile-hero__stack {
  gap: 1rem;
}
.mentor-profile-hero__meta {
  gap: 1rem;
}
.mentor-profile-hero__identity {
  gap: 0.35rem;
}
.mentor-profile-hero__identity h1 {
  line-height: 1.12;
}
.mentor-profile-hero__role {
  line-height: 1.3;
}
.mentor-profile-hero__links {
  margin-top: 0.05rem;
}
.mentor-profile-hero__website {
  color: var(--muted-foreground);
}
.mentor-profile-hero__website:hover {
  color: var(--foreground);
  text-decoration: underline;
}
.mentor-profile-page-wrapper a.mentor-profile-hero__website[target="_blank"] {
  color: var(--muted-foreground);
}
.mentor-profile-page-wrapper a.mentor-profile-hero__website[target="_blank"]:hover {
  color: var(--foreground);
}
.mentor-profile-notable {
  gap: 1.25rem;
}
.mentor-profile-sections {
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
}
@media (min-width: 640px) {
  .mentor-profile-sections {
    gap: 1.75rem;
  }
}
.mentor-profile-page .mentor-profile-section .section-eyebrow {
  margin-bottom: 0.625rem;
}
.mentor-profile-expertise-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  padding: 0.4375rem 0.8125rem;
}
.mentor-profile-similar {
  margin-top: 2.25rem;
}
@media (min-width: 640px) {
  .mentor-profile-similar {
    margin-top: 2.5rem;
  }
}
/* Keep exploring — taller portrait cards (iOS MentorPosterCard), not tiny squares. */
.mentor-profile-similar-row .dashboard-home-card-row__item {
  flex-basis: 9.25rem;
  width: 9.25rem;
}
@media (min-width: 768px) {
  .mentor-profile-similar-row .dashboard-home-card-row__item {
    flex-basis: auto;
    width: auto;
  }
}
.mentor-profile-avatar.avatar-placeholder {
  padding-top: 0.12em;
}

.mentor-profile-tier-card {
  background: var(--card);
  color: var(--card-foreground);
}


.mentor-profile-page .mentor-profile-tiers-list.dashboard-surface {
  box-shadow: var(--card-inset-shadow), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mentor-profile-page .mentor-profile-tiers-list.dashboard-surface:hover {
  transform: none;
  box-shadow: var(--card-inset-shadow), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mentor-profile-tiers-list > .mentor-profile-tier-row + .mentor-profile-tier-row {

  border-top: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
}


.mentor-profile-page .mentor-profile-tier-card.dashboard-surface,
.mentor-profile-page .dashboard-surface.mentor-profile-quiet-card {
  box-shadow: var(--card-inset-shadow), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mentor-profile-page .mentor-profile-tier-card.dashboard-surface:hover,
.mentor-profile-page .dashboard-surface.mentor-profile-quiet-card:hover {
  transform: none;
  box-shadow: var(--card-inset-shadow), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mentor-profile-empty-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.25rem;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .mentor-profile-empty-card {
    padding: 1.35rem 1.5rem;
  }
}
.mentor-profile-empty-card__title,
.mentor-profile-empty-card__body,
.mentor-profile-empty-card__detail {
  margin: 0;
  line-height: 1.45;
}
.mentor-profile-empty-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
.mentor-profile-empty-card__body,
.mentor-profile-empty-card__detail {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.mentor-profile-empty-card__detail--on-list {
  color: var(--primary);
  font-weight: 500;
}
.mentor-profile-empty-card__action {
  margin: 0.5rem 0 0;
  width: 100%;
}
.mentor-profile-empty-card__action .btn {
  width: 100%;
}
@media (min-width: 640px) {
  .mentor-profile-empty-card__action .btn {
    width: auto;
    min-width: 12.5rem;
  }
}


.mentor-profile-status-card {
  margin-top: 0;
}
.mentor-profile-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}
.mentor-profile-status-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.mentor-profile-status-action {
  margin: 1rem 0 0;
}


.mentor-profile-tier-card .text-white,
.mentor-profile-tier-card .text-white\/90,
.mentor-profile-tier-card .text-white\/80 {
  color: var(--card-foreground);
}
.mentor-profile-tier-card .text-white\/90 { opacity: 0.9; }
.mentor-profile-tier-card .text-white\/80 { opacity: 0.8; }
.mentor-profile-tier-card .bg-white\/25 {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: var(--card-foreground);
}
.mentor-profile-tier-card .border-white {
  border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
}
.mentor-profile-tier-card a.hover\:text-primary:hover,
.mentor-profile-tier-card a:hover.text-primary {
  color: var(--primary);
}


@keyframes mentor-note-glow {
  0% {
    box-shadow: var(--card-inset-shadow), var(--card-shadow);
    transform: translateY(0);
  }
  40% {
    box-shadow:
      var(--card-inset-shadow),
      var(--card-shadow-hover),
      0 0 0 4px rgba(var(--accent-rgb), 0.10),
      0 0 24px 10px rgba(var(--accent-rgb), 0.16);
    transform: translateY(-1px);
  }
  100% {
    box-shadow: var(--card-inset-shadow), var(--card-shadow);
    transform: translateY(0);
  }
}

.mentor-profile-page-wrapper a[target="_blank"] {
  color: var(--foreground);
  opacity: 0.92;
}
.mentor-profile-page-wrapper a[target="_blank"]:hover {
  opacity: 1;
  color: var(--foreground);
}

.profile-form-actions-sticky[hidden],
#profile-form-sticky-bar[hidden],
#settings-form-sticky-bar[hidden],
#sessions-form-sticky-bar[hidden] {
  display: none !important;
}

.profile-form-actions-sticky {
  background: color-mix(in oklch, var(--card) 98%, transparent) !important;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .profile-form-actions-sticky {
    -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
    backdrop-filter: blur(14px) saturate(1.1) !important;
  }
}
@media (max-width: 640px) {
  .profile-form-actions-sticky {
    padding-top: 1.125rem !important;
    padding-bottom: 1.125rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

.site .flash-toast,
.site .layout .flash-toast,
body.site > .flash-toast {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(-0.25rem);
  z-index: 10060;
  max-width: min(26rem, calc(100vw - 2rem));
  padding: 0.8125rem 1.25rem;
  border-radius: var(--radius-2xl);
  background: var(--popover);
  color: var(--popover-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 8px 28px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
  pointer-events: none;
}
.site .flash-toast.is-visible,
.site .layout .flash-toast.is-visible,
body.site > .flash-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 10px 36px rgba(0, 0, 0, 0.1),
    0 4px 14px rgba(0, 0, 0, 0.06);
}
html.dark .site .flash-toast,
html.dark .site .layout .flash-toast,
html.dark body.site > .flash-toast {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 28px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.3);
}
html.dark .site .flash-toast.is-visible,
html.dark .site .layout .flash-toast.is-visible,
html.dark body.site > .flash-toast.is-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 36px rgba(0, 0, 0, 0.5),
    0 4px 14px rgba(0, 0, 0, 0.35);
}
.site .flash-toast.flash-toast--error,
.site .layout .flash-toast.flash-toast--error,
body.site > .flash-toast.flash-toast--error {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.08) inset,
    0 8px 32px rgba(239, 68, 68, 0.25),
    0 2px 8px oklch(0 0 0 / 0.2);
}
.site .flash-toast.flash-toast--error.is-visible,
.site .layout .flash-toast.flash-toast--error.is-visible,
body.site > .flash-toast.flash-toast--error.is-visible {
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.1) inset,
    0 12px 40px rgba(239, 68, 68, 0.3),
    0 4px 14px oklch(0 0 0 / 0.2);
}
.site .flash-toast.is-dismissed,
.site .layout .flash-toast.is-dismissed,
body.site > .flash-toast.is-dismissed {
  opacity: 0;
  transform: translateX(-50%) translateY(-0.25rem);
}

@media (max-width: 640px) {
  .site .flash-toast,
  .site .layout .flash-toast,
  body.site > .flash-toast {
    top: 1rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    max-width: none;
    transform: translateY(-0.25rem);
    padding: 0.875rem 1rem;
    min-height: 2.75rem;
    font-size: 0.9375rem;
  display: flex;
    align-items: center;
    justify-content: center;
  }
  .site .flash-toast.is-visible,
  .site .layout .flash-toast.is-visible,
  body.site > .flash-toast.is-visible {
    transform: translateY(0);
  }
  .site .flash-toast.is-dismissed,
  .site .layout .flash-toast.is-dismissed,
  body.site > .flash-toast.is-dismissed {
    transform: translateY(-0.25rem);
  }
  .site .flash-toast span,
  .site .layout .flash-toast span,
  body.site > .flash-toast span {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

.admin-body .flash-toast {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(-0.25rem);
  z-index: 200;
  max-width: min(26rem, calc(100vw - 2rem));
  padding: 0.8125rem 1.25rem;
  border-radius: var(--radius-2xl);
  background: var(--popover);
  color: var(--popover-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 8px 28px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
  pointer-events: none;
}
.admin-body .flash-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 10px 36px rgba(0, 0, 0, 0.1),
    0 4px 14px rgba(0, 0, 0, 0.06);
}
html.dark .admin-body .flash-toast {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 28px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.3);
}
html.dark .admin-body .flash-toast.is-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 36px rgba(0, 0, 0, 0.5),
    0 4px 14px rgba(0, 0, 0, 0.35);
}
.admin-body .flash-toast.flash-toast--error {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.08) inset,
    0 8px 32px rgba(239, 68, 68, 0.25),
    0 2px 8px oklch(0 0 0 / 0.2);
}
.admin-body .flash-toast.flash-toast--error.is-visible {
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.1) inset,
    0 12px 40px rgba(239, 68, 68, 0.3),
    0 4px 14px oklch(0 0 0 / 0.2);
}
.admin-body .flash-toast.is-dismissed {
  opacity: 0;
  transform: translateX(-50%) translateY(-0.25rem);
}
@media (max-width: 1023px) {
  .admin-body .admin-overlay {
    opacity: 0;
    pointer-events: none;
  }
  .admin-body.admin-sidebar-open .admin-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  .admin-body.admin-sidebar-open .admin-sidebar {
    transform: translateX(0);
  }
}

.admin-main.profile-form-has-dirty {
  padding-bottom: 5rem;
}

.admin-rich-editor-wrap {
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius-xl);
  background: rgb(255 255 255 / 0.03);
  overflow: hidden;
}
.admin-rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 0;
  background: rgb(255 255 255 / 0.04);
}
.admin-rich-editor-btn {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--foreground);
}
.admin-rich-editor-btn:hover {
  background: var(--muted);
}
.admin-rich-editor-btn.is-active {
  background: var(--primary);
  color: var(--primary-foreground);
}
.admin-rich-editor-btn--muted {
  color: var(--muted-foreground);
}
.admin-rich-editor-toolbar-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: rgb(255 255 255 / 0.12);
}
.admin-rich-editor-body {
  min-height: 140px;
  padding: 14px 16px 18px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--foreground);
  outline: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.admin-rich-editor-body > *:first-child {
  margin-top: 0 !important;
}
.admin-rich-editor-body p {
  margin: 0 0 0.9em;
}
.admin-rich-editor-body p:last-child {
  margin-bottom: 0;
}
.admin-rich-editor-body h2 {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 1.35rem 0 0.55rem;
  color: var(--foreground);
  letter-spacing: -0.02em;
}
.admin-rich-editor-body h2:first-child {
  margin-top: 0;
}
.admin-rich-editor-body h3 {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.1rem 0 0.45rem;
  color: var(--foreground);
}
.admin-rich-editor-body h3:first-child {
  margin-top: 0;
}
.admin-rich-editor-body ul,
.admin-rich-editor-body ol {
  margin: 0 0 0.9em;
  padding-left: 1.5rem;
  line-height: 1.65;
}
.admin-rich-editor-body ul {
  list-style-type: disc;
  list-style-position: outside;
}
.admin-rich-editor-body ol {
  list-style-type: decimal;
  list-style-position: outside;
}
.admin-rich-editor-body li {
  display: list-item;
  margin-bottom: 0.35em;
}
.admin-rich-editor-body li:last-child {
  margin-bottom: 0;
}
.admin-rich-editor-body li > ul,
.admin-rich-editor-body li > ol {
  margin-top: 0.35em;
  margin-bottom: 0.35em;
}
.admin-rich-editor-body a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.admin-rich-editor-body a:hover {
  text-decoration: none;
}
.admin-rich-editor-body strong,
.admin-rich-editor-body b {
  font-weight: 600;
}
.admin-rich-editor-body em,
.admin-rich-editor-body i {
  font-style: italic;
}

.admin-rich-editor-wrap--compact .admin-rich-editor-body {
  min-height: 88px;
  font-size: 0.9375rem;
}
.admin-rich-editor-wrap--compact .admin-rich-editor-body h2 {
  font-size: 1.1rem;
}
.admin-rich-editor-wrap--compact .admin-rich-editor-body h3 {
  font-size: 1rem;
}


.admin-rich-editor-wrap--policy {
  border-color: var(--border);
  background: var(--background);
}
.admin-rich-editor-wrap--policy .admin-rich-editor-toolbar {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--background) 88%, var(--muted) 12%);
}
.admin-rich-editor-body--policy {
  min-height: 20rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--foreground);
}
.admin-rich-editor-body--policy:empty::before {
  content: attr(data-placeholder);
  color: var(--muted-foreground);
  pointer-events: none;
}
.admin-rich-editor-body--policy h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--muted-foreground);
  letter-spacing: normal;
}
.admin-rich-editor-body--policy h2:first-child {
  margin-top: 0;
}
.admin-rich-editor-body--policy h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--muted-foreground);
}
.admin-rich-editor-body--policy h3:first-child {
  margin-top: 0;
}
.admin-rich-editor-body--policy p {
  margin-bottom: 1rem;
}
.admin-rich-editor-body--policy ul,
.admin-rich-editor-body--policy ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.admin-rich-editor-body--policy a {
  color: var(--primary);
}

.admin-form-input {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.tag-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.profile-form .profile-tag-field-wrap {
  gap: 0.625rem;
}
.profile-form .profile-tag-add-row .auth-field--float {
  min-width: 0;
}
.profile-form .profile-tag-add-btn {
  align-self: stretch;
  min-height: 3rem;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tag-input {
  width: 100%;
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  box-sizing: border-box;
}

@media (max-width: 639px) {
  .profile-tag-field-wrap.tag-input-wrap {
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
  }
  .profile-tag-field-wrap .tag-list {
    width: 100%;
  }
  .profile-tag-field-wrap .tag-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
  }
}

.expertise-accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
}
.expertise-accordion-item summary {
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 500;
  color: var(--foreground);
  list-style: none;
}
.expertise-accordion-item summary::-webkit-details-marker {
  display: none;
}
.expertise-accordion-content {
  padding: 0 14px 14px;
}
.expertise-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.expertise-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--foreground);
}
.expertise-chip-label {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

#admin-homepage-mentor-search-results[aria-hidden="true"] {
  display: none;
}
.admin-homepage-mentor-result {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--foreground);
}
.admin-homepage-mentor-result:hover {
  background: var(--muted);
}
.admin-homepage-mentor-result--empty {
  color: var(--muted-foreground);
  cursor: default;
}

.admin-body tr.admin-row-hidden {
  display: none;
}

.admin-body .admin-sidebar {
  border-right-color: rgb(255 255 255 / 0.06);
}
.admin-body .admin-sidebar > div.border-b,
.admin-body .admin-sidebar > div.border-t {
  border-color: rgb(255 255 255 / 0.06);
}
.admin-body .admin-topbar {
  border-bottom-color: rgb(255 255 255 / 0.06);
}
.admin-body .admin-menu-btn {
  background: rgb(255 255 255 / 0.06);
  border-radius: var(--radius-lg);
}

/* Match dashboard sidebar: hairline active indicator, no grey pill. */
.admin-body .admin-nav-link.admin-nav-active {
  background: transparent;
  color: var(--foreground);
  font-weight: 600;
}
.admin-body .admin-nav-link.admin-nav-active:hover {
  background: rgba(255, 255, 255, 0.05);
}
.admin-body .admin-nav-link.admin-nav-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--sidebar-active-indicator, var(--foreground));
  opacity: 1;
}

/* Product-style pill primary actions across admin. */
.admin-body .btn.btn-primary {
  border-radius: 9999px !important;
}

/* Page title rhythm — matches dashboard / payouts headers. */
.admin-body .admin-page-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.admin-body .admin-page-title {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 2.5vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--foreground);
}
.admin-body .admin-page-eyebrow + .admin-page-title {
  margin-top: 0.25rem;
}
.admin-body .admin-page-title:first-child,
.admin-body div > .admin-page-title:first-child {
  margin-top: 0;
}
@media (min-width: 768px) {
  .admin-body .admin-page-title {
    font-size: 2.25rem;
  }
}
.admin-body .admin-page-lead {
  margin: 0.5rem 0 0;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.admin-panel {
  border-radius: 1.25rem;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.25rem;
  background: var(--card);
  box-shadow: var(--card-shadow);
  border: none;
}

.admin-settings-stack > * + * {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.06);
}

.admin-settings-stack h3 {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
  text-transform: uppercase;
}

.admin-settings-page .border-border,
.admin-settings-page select.border-border,
.admin-settings-page textarea.border-border {
  border-color: rgb(255 255 255 / 0.09);
  background: rgb(255 255 255 / 0.035);
}

.admin-disclosure {
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.03);
  border: 1px solid rgb(255 255 255 / 0.06);
  margin-bottom: 0.65rem;
  overflow: hidden;
}
.admin-disclosure summary {
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  list-style: none;
  user-select: none;
}
.admin-disclosure summary::-webkit-details-marker {
  display: none;
}
.admin-disclosure[open] summary {
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
.admin-disclosure .admin-disclosure-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-cron-hint {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  margin: 0;
}
.admin-cron-hint code {
  font-size: 0.75rem;
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  background: rgb(255 255 255 / 0.06);
  color: var(--foreground);
}

.admin-table-wrap {
  border-radius: 1.25rem;
  background: var(--card);
  box-shadow: var(--card-shadow);

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.admin-table-soft {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.admin-table-soft thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  padding: 0.75rem 1rem;
  background: rgb(255 255 255 / 0.04);
}
.admin-table-soft tbody td {
  padding: 0.85rem 1rem;
  vertical-align: top;
}
.admin-table-soft tbody tr + tr td {
  border-top: 1px solid rgb(255 255 255 / 0.06);
}

.admin-tabs .admin-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 1rem;
}
.admin-tabs .admin-tab {
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.admin-tabs .admin-tab:hover {
  color: var(--foreground);
  background: var(--muted);
}
.admin-tabs .admin-tab.is-active {
  color: var(--primary-foreground);
  background: var(--primary);
}
.admin-tabs--settings .admin-tab-list {
  margin-bottom: 1.5rem;
  padding: 5px;
  gap: 3px;
  background: rgb(255 255 255 / 0.04);
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.06);
}
.admin-tabs--settings .admin-tab {
  border-radius: 999px;
  padding: 0.45rem 1rem;
}
.admin-tabs--settings .admin-tab:hover {
  background: rgb(255 255 255 / 0.08);
}
.admin-tabs--settings .admin-tab.is-active {
  box-shadow: 0 1px 12px rgb(0 0 0 / 0.2);
}
.admin-tabs .admin-tab-panel {
  display: none;
}
.admin-tabs .admin-tab-panel.is-active {
  display: block;
}

.admin-expertise-details summary::-webkit-details-marker {
  display: none;
}

.alert {
  border-radius: var(--radius-2xl);
  padding: 0.875rem 1rem;
  box-shadow: var(--alert-shadow);
}
@media (min-width: 640px) {
  .alert {
    padding: 1rem 1.25rem;
  }
}
.alert--info {
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  background: rgba(var(--accent-rgb), 0.05);
  color: var(--foreground);
}
.alert--soft {
  border-color: var(--alert-soft-border);
  background: var(--alert-soft-bg);
  color: var(--foreground);
}

/* Admin account warning — soft amber surface, not the legacy .alert--soft strip. */
.dashboard-admin-warning {
  border-color: color-mix(in srgb, #d97706 32%, var(--glass-border));
  background: color-mix(in srgb, #d97706 8%, var(--surface-1));
}
html.dark .dashboard-admin-warning {
  border-color: color-mix(in srgb, #f59e0b 28%, var(--glass-border));
  background: color-mix(in srgb, #f59e0b 10%, var(--surface-1));
}
.dashboard-admin-warning__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: color-mix(in srgb, #d97706 14%, transparent);
  color: #b45309;
  margin-top: 0.05rem;
}
html.dark .dashboard-admin-warning__icon {
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #fbbf24;
}
.dashboard-admin-warning__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.dashboard-admin-warning__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
}
.dashboard-admin-warning__body {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.dashboard-admin-warning__body a {
  color: var(--foreground);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dashboard-admin-warning__body a:hover {
  text-decoration: none;
}

.alert--error {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: var(--destructive);
  color: var(--destructive-foreground);
}
.alert--error a {
  color: inherit;
  text-decoration: underline;
}
.alert--error a:hover {
  opacity: 0.95;
}
.btn.btn-primary {
  background: var(--btn-primary-gradient);
  border: none;
  color: var(--primary-foreground);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
  background: var(--btn-primary-gradient-hover);
  filter: none;
  animation: none;
  box-shadow: var(--btn-shadow-hover), 0 0 16px 2px rgba(var(--accent-rgb), 0.12);
}
html.dark .btn.btn-primary:hover,
html.dark .btn.btn-primary:focus-visible {
  box-shadow: var(--btn-shadow-hover), 0 0 24px 4px rgba(255, 255, 255, 0.12);
}

.shadow-card-soft {
  box-shadow: var(--card-shadow);
}
.shadow-card {
  box-shadow: var(--card-shadow);
}
.shadow-card-hover {
  box-shadow: var(--card-shadow-hover);
}

.dashboard {
  position: relative;
}

.dashboard .bg-card {
  background: var(--dashboard-panel);
}
.dashboard .profile-section {
  background: var(--dashboard-panel);
}
.dashboard .profile-form-actions-sticky.dashboard-save-bar-sticky,
.dashboard .settings-delete-modal-box {
  background: var(--dashboard-panel);
}

.shadow-modal,
.settings-delete-modal-box,
.review-decline-dialog-box,
.dm-confirm-box,
.profile-photo-crop-modal-box,
.unsaved-modal-box,
.request-upload-overlay-inner {
  box-shadow: var(--modal-shadow);
}

.dashboard-edit .profile-form-link-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 88%, var(--muted) 12%);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dashboard-edit .profile-form-link-row:hover {
  background: color-mix(in srgb, var(--background) 78%, var(--muted) 22%);
  border-color: color-mix(in srgb, var(--border) 70%, var(--foreground) 30%);
}

.profile-photo-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.profile-photo-trigger-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.profile-photo-trigger-wrap .mentor-profile-avatar-badge {
  transform: translate(5%, 5%);
}
.profile-photo-trigger {
  position: relative;
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 9999px;
  transition: transform 0.15s ease;
}
.profile-photo-trigger-wrap:hover .profile-photo-trigger {
  transform: scale(1.02);
}
.profile-photo-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  border-radius: 9999px;
}
.profile-photo-preview {
  width: 7rem;
  height: 7rem;
  flex-shrink: 0;
  border-radius: 9999px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
@media (min-width: 640px) {
  .profile-photo-preview {
    width: 8rem;
    height: 8rem;
  }
}
.profile-photo-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}
.profile-photo-trigger-wrap:hover .profile-photo-preview {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}
.profile-photo-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
}
@media (min-width: 640px) {
  .profile-photo-preview-placeholder {
    font-size: 1.875rem;
  }
}
.profile-photo-trigger-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #fff;
  color: #111;
  outline: 2px solid var(--background);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  line-height: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .profile-photo-trigger-wrap:hover .profile-photo-trigger-badge,
  .profile-photo-trigger-wrap .mentor-profile-avatar-badge:hover .profile-photo-trigger-badge {
    transform: scale(1.15);
  }
}
.profile-photo-trigger-badge:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}
.profile-photo-trigger-badge svg {
  width: 14px;
  height: 14px;
}
.profile-photo-row-hint {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--muted-foreground);
}

.dashboard-edit .profile-form-link-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
}

.settings-delete-confirm-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.settings-delete-confirm-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: 0.875rem;
  border: 2px solid var(--border);
  background: color-mix(in srgb, var(--background) 90%, var(--muted) 10%);
  color: var(--foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.settings-delete-confirm-input::placeholder {
  color: color-mix(in srgb, var(--muted-foreground) 72%, transparent);
  letter-spacing: 0.14em;
  font-weight: 500;
}
.settings-delete-confirm-input:hover {
  border-color: color-mix(in srgb, var(--border) 55%, var(--foreground) 45%);
}
.settings-delete-confirm-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--destructive) 55%, var(--border));
  background: var(--background);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--destructive) 14%, transparent);
}
.settings-delete-confirm-input.is-ready {
  border-color: var(--destructive);
  background: color-mix(in srgb, var(--background) 94%, var(--destructive) 6%);
}

.dashboard-edit .profile-form-link-row-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  line-height: 1.3;
}
.dashboard-edit .profile-form-link-row-hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--muted-foreground);
}
.dashboard-edit .profile-form-link-row-chevron {
  margin-left: auto;
  color: var(--muted-foreground);
  opacity: 0.7;
}
.dashboard .profile-photo-crop-modal-box,
.dashboard .profile-photo-options-modal .bg-card {
  background: var(--dashboard-canvas);
}
.dashboard .dashboard-warning.bg-card {
  background: var(--dashboard-panel);
}

.dashboard-warning[data-warning-key]:not(.dashboard-warning--ready) {
  display: none !important;
}

.dashboard-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inner-highlight), var(--card-shadow);
  transition: box-shadow 0.2s ease;
}
.dashboard-glass:hover {
  transform: none;
  box-shadow: var(--glass-inner-highlight), var(--card-shadow);
}

.dashboard-surface {
  background: var(--surface-1);
  box-shadow: var(--card-inset-shadow), var(--card-shadow);
  border: 1px solid var(--glass-border);
  transition: box-shadow 0.2s ease;
}
.dashboard-surface:hover {
  transform: none;
  box-shadow: var(--card-inset-shadow), var(--card-shadow);
}


.dashboard-list-flat {
  gap: 0 !important;
}
.dashboard-list-flat > li.dashboard-surface,
.dashboard-list-flat > .dashboard-surface {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: none !important;
}
.dashboard-list-flat > li.dashboard-surface:hover,
.dashboard-list-flat > .dashboard-surface:hover {
  transform: none !important;
  box-shadow: none !important;
}
.dashboard-list-flat > li + li,
.dashboard-list-flat > .dashboard-surface + .dashboard-surface {
  border-top: 1px solid var(--border) !important;
}
/* When filters hide earlier rows, clear the divider on the first visible row. */
.dashboard-list-flat > li.dashboard-list-flat-row--first-visible {
  border-top: 0 !important;
}

.creator-share-thumb {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  overflow: hidden;
}
@media (min-width: 640px) {
  .creator-share-thumb {
    width: 3rem;
    height: 3rem;
  }
}
.creator-share-thumb-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.creator-share-thumb-img.is-loaded {
  opacity: 1;
}
.creator-share-thumb:not(:has(.creator-share-thumb-img.is-loaded))::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    transparent 0%,
    color-mix(in srgb, var(--foreground) 6%, transparent) 45%,
    transparent 90%
  );
  transform: translateX(-100%);
  animation: creator-share-thumb-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes creator-share-thumb-shimmer {
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .creator-share-thumb-img {
    transition: none;
  }
  .creator-share-thumb:not(:has(.creator-share-thumb-img.is-loaded))::after {
    animation: none;
    opacity: 0.35;
    transform: none;
  }
}
.session-tier-card.dashboard-surface:hover {
  transform: none;
}
.showcase-grid--editor {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  touch-action: pan-y;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.showcase-grid--editor .sc-card {
  touch-action: pan-y;
  -webkit-user-drag: none;
  user-drag: none;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  background: linear-gradient(145deg, #17171a 0%, #0a0a0c 100%);
  isolation: isolate;
}
.showcase-grid--editor .sc-thumb-img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.sc-slots-pill {
  font-size: 0.8125rem;
  padding: 0.3rem 0.65rem;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  box-shadow: none;
}
.sc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: auto;
}
.sc-modal-overlay.is-open {
  display: flex;
}
.sc-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: auto;
  cursor: default;
}
.sc-modal-panel,
.sc-edit-modal-box {
  position: relative;
  z-index: 1;
  background: var(--dashboard-panel);
  pointer-events: auto;
}
body.sc-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}
html:has(body.sc-modal-open) {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Creator profile portfolio lightbox — reuses .sc-modal-overlay / .sc-modal-backdrop */
.cp-lightbox.sc-modal-overlay {
  padding: 1rem;
  z-index: 10060;
  --cp-fg: var(--foreground);
  --cp-muted: var(--muted-foreground);
  --cp-border: var(--glass-border, var(--border));
  --cp-tile-bg: var(--muted);
  --cp-surface: var(--card, var(--dashboard-panel));
  --cp-profile-bg: var(--cp-surface);
  --cp-media-bg: color-mix(in srgb, #0a0a0a 92%, var(--cp-surface));
  --cp-hairline: color-mix(in srgb, var(--cp-border) 70%, transparent);
}
.cp-lightbox-panel {
  display: flex;
  flex-direction: column;
  width: min(96vw, 68rem);
  max-height: min(90vh, 42rem);
  background: var(--cp-surface);
  color: var(--cp-fg);
  border: 0;
  /* Softer than --modal-shadow — large photo panels don't need a heavy cast */
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.08),
    0 2px 10px rgba(0, 0, 0, 0.04);
  position: relative;
}
html.dark .cp-lightbox-panel {
  box-shadow: var(--modal-shadow);
}
.cp-lightbox-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15.5rem, 19.5rem);
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  max-height: inherit;
}
.cp-lightbox-media-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  background: var(--cp-media-bg);
  touch-action: pan-y;
}
.cp-lightbox-media {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cp-lightbox-frame {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: min(90vh, 42rem);
  width: auto;
  height: auto;
  background: var(--cp-tile-bg);
  overflow: hidden;
}
.cp-lightbox-frame[data-ar] {
  width: min(100%, calc(min(90vh, 42rem) * (var(--cp-ar-w, 1) / var(--cp-ar-h, 1))));
  aspect-ratio: var(--cp-ar-w, 1) / var(--cp-ar-h, 1);
  height: auto;
}
.cp-lightbox-frame__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.cp-lightbox-frame.is-loaded .cp-lightbox-frame__img,
.cp-lightbox-frame__img.is-loaded {
  opacity: 1;
}
.cp-lightbox-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}
.cp-lightbox-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}
.cp-lightbox-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cp-lightbox-media--video {
  background: #0a0a0a;
  /* Give video room before/after play — matches a roomy 16:9 in the media column */
  min-height: min(56vh, 32rem);
}
.cp-lightbox-media--playing {
  background: #000;
}
.cp-lightbox-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}
.cp-lightbox-video-poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0a0a0a;
}
.cp-lightbox-media--text {
  background: var(--cp-tile-bg);
  padding: 2.25rem 1.75rem;
}
.cp-lightbox-text-piece {
  max-width: 26rem;
  margin: 0 auto;
  text-align: center;
}
.cp-lightbox-text-piece__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--cp-fg);
}
.cp-lightbox-text-piece__body {
  margin: 0.85rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--cp-muted);
  white-space: pre-wrap;
}
.cp-lightbox-text-piece__body.has-title {
  margin-top: 1rem;
}
.cp-lightbox-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cp-lightbox-video-play span {
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.cp-lightbox-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--cp-hairline);
  background: var(--cp-surface);
}
.cp-lightbox-creator {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.25rem 1rem;
  border-bottom: 1px solid var(--cp-hairline);
  flex-shrink: 0;
  padding-right: 2.75rem;
}
.cp-lightbox-avatar {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-tile-bg);
  color: var(--cp-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--cp-hairline);
}
.cp-lightbox-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cp-lightbox-creator-name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--cp-fg);
  line-height: 1.25;
}
.cp-lightbox-creator-role {
  margin-top: 0.12rem;
  font-size: 0.75rem;
  color: var(--cp-muted);
  line-height: 1.3;
}
.cp-lightbox-caption {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.15rem 1.25rem 1.35rem;
  overscroll-behavior: contain;
}
.cp-lightbox-caption:empty {
  padding: 0;
}
.cp-lightbox-caption__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.011em;
  line-height: 1.4;
  color: var(--cp-fg);
}
.cp-lightbox-caption__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--cp-muted);
  white-space: pre-wrap;
}
.cp-lightbox-caption__body.has-title {
  margin-top: 0.55rem;
}
.cp-lightbox-close {
  position: absolute;
  top: 0.7rem;
  right: 0.85rem;
  z-index: 3;
  border: 0;
  background: transparent;
  color: var(--cp-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  transition: color 0.15s ease, opacity 0.15s ease;
  opacity: 0.85;
}
.cp-lightbox-close:hover {
  color: var(--cp-fg);
  opacity: 1;
}
.cp-lightbox-close:focus,
.cp-lightbox-close:focus-visible,
.cp-lightbox-nav:focus,
.cp-lightbox-nav:focus-visible {
  outline: none;
  box-shadow: none;
}
.cp-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  margin: 0;
  border-radius: 9999px;
  border: 0;
  background: rgba(0, 0, 0, 0.34);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
  transition: background 0.15s ease, transform 0.12s ease, opacity 0.15s ease;
  opacity: 0.92;
}
.cp-lightbox-nav svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}
/* Chevron glyphs sit open-side heavy — nudge toward true optical center */
.cp-lightbox-nav--prev svg {
  transform: translateX(0.5px);
}
.cp-lightbox-nav--next svg {
  transform: translateX(-0.5px);
}
.cp-lightbox-nav:hover {
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
}
.cp-lightbox-nav:active {
  transform: translateY(-50%) scale(0.96);
}
.cp-lightbox-nav--prev {
  left: 0.85rem;
}
.cp-lightbox-nav--next {
  right: 0.85rem;
}
.cp-lightbox-nav[hidden] {
  display: none;
}
@media (max-width: 767px) {
  .cp-lightbox.sc-modal-overlay {
    padding: 0;
    align-items: stretch;
  }
  .cp-lightbox-panel {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0 !important;
    border: 0;
    box-shadow: none;
    background: var(--cp-profile-bg);
  }
  .cp-lightbox-layout {
    grid-template-columns: 1fr;
    /* Media fills; meta sheet sizes to content instead of claiming half the screen */
    grid-template-rows: minmax(0, 1fr) auto;
    max-height: none;
    height: 100%;
  }
  .cp-lightbox-media-wrap,
  .cp-lightbox-media,
  .cp-lightbox-media--text,
  .cp-lightbox-media--video {
    min-height: 0;
    height: 100%;
    background: var(--cp-profile-bg);
  }
  .cp-lightbox-frame {
    max-height: 100%;
  }
  .cp-lightbox-frame[data-ar] {
    width: min(100%, calc(100% * (var(--cp-ar-w, 1) / var(--cp-ar-h, 1))));
    max-height: 100%;
  }
  .cp-lightbox-side {
    border-left: 0;
    border-top: 1px solid var(--cp-hairline);
    max-height: min(34dvh, 12.5rem);
    background: var(--cp-profile-bg);
  }
  .cp-lightbox-creator {
    padding: 0.85rem 1rem 0.75rem;
    padding-right: 2.75rem;
  }
  .cp-lightbox-caption {
    padding: 0.85rem 1rem calc(0.95rem + env(safe-area-inset-bottom, 0px));
  }
  .cp-lightbox-caption:empty {
    padding: 0;
  }
  .cp-lightbox-close {
    top: max(0.7rem, env(safe-area-inset-top, 0px));
    right: max(0.75rem, env(safe-area-inset-right, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .cp-lightbox-frame__img,
  .cp-lightbox-close,
  .cp-lightbox-nav {
    transition: none;
  }
}

.sc-edit-modal-box {
  max-width: min(100%, 22rem);
  max-height: min(92vh, 40rem);
}
.sc-edit-modal-layout {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 0;
  min-height: 0;
}
.sc-edit-modal-layout:has(.sc-edit-preview-wrap:not(.hidden)) {
  grid-template-areas:
    "preview head"
    "fields fields"
    "actions actions";
}
.sc-edit-modal-layout:not(:has(.sc-edit-preview-wrap:not(.hidden))) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "fields"
    "actions";
}
.sc-edit-modal-main {
  display: contents;
}
.sc-edit-preview-wrap {
  grid-area: preview;
  width: 5.75rem;
  border-radius: 0.625rem;
  overflow: hidden;
  background: var(--muted);
}
.sc-edit-modal-head {
  grid-area: head;
  align-self: center;
  min-width: 0;
}
.sc-edit-modal-fields {
  grid-area: fields;
  padding-bottom: 1rem;
}
.sc-edit-modal-actions {
  grid-area: actions;
  padding-bottom: 1.25rem;
  margin: 0 -1.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.sc-edit-preview {
  position: relative;
  width: 5.75rem;
  height: 5.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sc-edit-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.sc-text-editorial {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--foreground);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-align: center;
  word-break: break-word;
  text-wrap: balance;
  width: 100%;
}
.sc-thumb--text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  background: color-mix(in srgb, var(--background) 92%, var(--muted) 8%);
}
.sc-text-editorial--tile {
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  -webkit-line-clamp: 4;
}
.sc-text-editorial--panel,
.sc-edit-preview-text {
  font-size: clamp(1.65rem, 5.5vw, 2.25rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  -webkit-line-clamp: 4;
}
.sc-edit-preview--text {
  padding: 0.75rem;
  background: color-mix(in srgb, var(--background) 92%, var(--muted) 8%);
  align-items: center;
  justify-content: center;
}
.sc-edit-preview-mobile-label {
  display: none;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted-foreground);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 639px) {
  .sc-edit-preview--text .sc-edit-preview-text {
    display: none;
  }
  .sc-edit-preview-mobile-label {
    display: block;
  }
}
.sc-edit-preview--fallback {
  background: color-mix(in srgb, var(--muted) 80%, var(--background) 20%);
}
.sc-edit-preview-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: color-mix(in srgb, var(--muted-foreground) 55%, transparent);
}
.sc-edit-preview-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.sc-edit-preview-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  color: #fff;
  width: 1.75rem;
  height: 1.75rem;
}
.sc-edit-preview-play-btn svg {
  width: 0.625rem;
  height: 0.625rem;
}
@media (min-width: 640px) {
  .sc-edit-modal-box {
    max-width: min(100%, 36rem);
  }
  .sc-edit-modal-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    min-height: 13rem;
    grid-template-areas: none;
    grid-template-columns: none;
  }
  .sc-edit-modal-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }
  .sc-edit-preview-wrap {
    flex: 0 0 14.5rem;
    width: 14.5rem;
    grid-area: auto;
    border-radius: 0;
    border-right: 1px solid var(--border);
  }
  .sc-edit-modal-head {
    grid-area: auto;
    align-self: auto;
    padding: 1.25rem 1.25rem 0;
  }
  .sc-edit-modal-fields {
    grid-area: auto;
    flex: 1;
    padding: 1rem 1.25rem;
  }
  .sc-edit-modal-actions {
    grid-area: auto;
    margin: 0;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
  }
  .sc-edit-preview {
    width: 100%;
    height: 100%;
    min-height: 14.5rem;
  }
  .sc-edit-preview--text {
    padding: 1.5rem 1rem;
  }
  .sc-text-editorial--panel,
  .sc-edit-preview-text {
    font-size: clamp(2.5rem, 3.2vw, 3.5rem);
    line-height: 0.96;
    letter-spacing: -0.045em;
    -webkit-line-clamp: 6;
  }
  .sc-edit-preview-icon {
    width: 2rem;
    height: 2rem;
  }
  .sc-edit-preview-play-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
  .sc-edit-preview-play-btn svg {
    width: 0.875rem;
    height: 0.875rem;
  }
}
@media (min-width: 768px) {
  .showcase-grid--editor {
    gap: 1rem;
    padding: 0;
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.showcase-grid .sc-card {
  aspect-ratio: 1;
  will-change: transform;
}
.showcase-grid--editor .sc-card {
  box-shadow: none;
}
.showcase-grid.showcase-grid--reordering .sc-card:not(.sc-card--dragging) {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.showcase-grid .sc-card.sc-card--dragging {
  opacity: 0.3;
  transform: scale(0.97);
  box-shadow: none;
  outline: 2px dashed color-mix(in srgb, var(--primary) 35%, var(--border) 65%);
  outline-offset: -2px;
  z-index: 1;
  cursor: grabbing;
}
.sc-card-ghost {
  position: fixed;
  z-index: 10040;
  opacity: 0.96;
  pointer-events: none;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  will-change: transform, left, top;
}
.sc-thumb {
  position: relative;
  background: var(--muted);
}
.sc-thumb-shimmer {
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.sc-thumb-img {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.sc-thumb.is-loaded .sc-thumb-img {
  opacity: 1;
  transform: scale(1);
}
.sc-thumb.is-loaded .sc-thumb-shimmer {
  opacity: 0;
}
.showcase-grid--editor .sc-card:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.showcase-grid--editor .sc-card-chrome {
  justify-content: flex-start;
}
.showcase-grid--editor .sc-card-actions {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.showcase-grid--editor .sc-card:hover .sc-card-actions,
.showcase-grid--editor .sc-card:focus-within .sc-card-actions {
  opacity: 1;
}
@media (hover: none) {
  .showcase-grid--editor .sc-card-actions {
    opacity: 1;
  }
}
.sc-card-chrome {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.sc-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 0.375rem;
  pointer-events: auto;
}
.sc-tile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}
.sc-tile-btn svg {
  width: 0.5625rem;
  height: 0.5625rem;
}
.sc-tile-btn:hover {
  background: rgba(0, 0, 0, 0.92);
}
.sc-tile-btn:active {
  transform: scale(0.94);
}
.sc-card-caption {
  margin: 0;
  padding: 1.25rem 0.5rem 0.375rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
  .sc-thumb-img,
  .sc-thumb-shimmer {
    transition: none;
  }
  .sc-thumb-img {
    opacity: 1;
    transform: none;
  }
  .showcase-grid.showcase-grid--reordering .sc-card {
    transition: none !important;
  }
  .showcase-grid .sc-card.sc-card--dragging {
    transform: none;
  }
}
.showcase-editor-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.25rem;
  margin: 0;
  padding: 0.5rem 1rem 1.25rem;
  background: transparent;
  pointer-events: none;
}
.showcase-editor-footer::before {
  display: none;
}
.showcase-editor-fab {
  position: sticky;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.25rem 0 0.5rem;
  padding: 0;
  pointer-events: none;
}
.showcase-add-btn {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #fff;
  color: #111;
  outline: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  line-height: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.showcase-add-btn--full,
.showcase-add-btn[aria-disabled="true"] {
  background: var(--muted);
  color: var(--muted-foreground);
  outline-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
}
.showcase-add-btn:hover:not([aria-disabled="true"]) {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.showcase-add-btn:active:not([aria-disabled="true"]) {
  transform: translateY(0);
}


.dm-panels {
  --dm-text: var(--foreground);
  --dm-muted: var(--muted-foreground);
  --dm-border: var(--border);
  --dm-panel: var(--dashboard-panel);
  /* Match iOS sent bubbles: questionPurple → purpleEnd */
  --dm-mine: #6d28d9;
  --dm-mine-end: #5b21b6;
  --dm-mine-gradient: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
  --dm-mine-hover: #5b21b6;
  --dm-theirs: var(--muted);
  --dm-theirs-text: var(--foreground);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.dm-messages-shell {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  transform: none !important;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.dm-messages-shell.dashboard-surface:hover {
  transform: none !important;
}
.dm-messages-chrome {
  flex-shrink: 0;
  min-width: 0;
}
.dm-panels:not(.dm-panels--thread) .dm-chrome-thread {
  display: none;
}
.dm-panels.dm-panels--thread .dm-chrome-inbox {
  display: none;
}
.dm-panels-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.dm-thread-curtain {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--background) 96%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 1;
  pointer-events: auto;
}
.dm-thread-curtain.hidden {
  display: none;
  pointer-events: none;
}
.dm-thread-curtain-inner {
  text-align: center;
}
.dm-inbox-view,
.dm-thread-view {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  justify-self: stretch;
}
.dm-panels:not(.dm-panels--thread) .dm-inbox-view {
  position: relative;
  visibility: visible;
  pointer-events: auto;
}
.dm-panels:not(.dm-panels--thread) .dm-thread-view {
  display: none;
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.dm-panels.dm-panels--thread .dm-inbox-view {
  display: none;
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.dm-panels.dm-panels--thread .dm-thread-view {
  display: flex;
  position: relative;
  visibility: visible;
  pointer-events: auto;
}

/*
 * Messages paints so fast after the perf work that it can feel like a hard
 * click compared with other dashboard pages. Soft-land the main column
 * (sidebar stays put, same as Reviews → Profile) so the open feels settled.
 */
@media (prefers-reduced-motion: no-preference) {
  @keyframes dm-page-enter {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes dm-inbox-row-enter {
    from {
      opacity: 0;
      transform: translateY(5px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  body.dashboard-messages-page .dashboard-messages-layout-row > .flex-1 {
    animation: dm-page-enter 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  body.dashboard-messages-page:not(.dm-thread-open) #dm-inbox-list > .dm-inbox-item {
    animation: dm-inbox-row-enter 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  body.dashboard-messages-page:not(.dm-thread-open) #dm-inbox-list > .dm-inbox-item:nth-child(1) { animation-delay: 0.05s; }
  body.dashboard-messages-page:not(.dm-thread-open) #dm-inbox-list > .dm-inbox-item:nth-child(2) { animation-delay: 0.07s; }
  body.dashboard-messages-page:not(.dm-thread-open) #dm-inbox-list > .dm-inbox-item:nth-child(3) { animation-delay: 0.09s; }
  body.dashboard-messages-page:not(.dm-thread-open) #dm-inbox-list > .dm-inbox-item:nth-child(4) { animation-delay: 0.11s; }
  body.dashboard-messages-page:not(.dm-thread-open) #dm-inbox-list > .dm-inbox-item:nth-child(5) { animation-delay: 0.13s; }
  body.dashboard-messages-page:not(.dm-thread-open) #dm-inbox-list > .dm-inbox-item:nth-child(6) { animation-delay: 0.15s; }
  body.dashboard-messages-page:not(.dm-thread-open) #dm-inbox-list > .dm-inbox-item:nth-child(7) { animation-delay: 0.17s; }
  body.dashboard-messages-page:not(.dm-thread-open) #dm-inbox-list > .dm-inbox-item:nth-child(8) { animation-delay: 0.19s; }
  body.dashboard-messages-page:not(.dm-thread-open) #dm-inbox-list > .dm-inbox-item:nth-child(n + 9) { animation-delay: 0.21s; }
}

body.dashboard-messages-page .site-footer,
body.dashboard-portfolio-empty .site-footer {
  display: none;
}


@media (max-width: 767px) {
  html:has(body.dashboard-portfolio-empty) {
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body.dashboard-portfolio-empty {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0 !important;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body.dashboard-portfolio-empty .layout {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  body.dashboard-portfolio-empty .layout > .main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-width: none !important;
    padding-top: var(--dashboard-phone-header-clear) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }
  body.dashboard-portfolio-empty .dashboard-messages-layout-outer,
  body.dashboard-portfolio-empty .dashboard-messages-layout-row {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 0 !important;
  }
  body.dashboard-portfolio-empty .dashboard-messages-layout-row > .flex-1 {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    padding-top: 0 !important;
  }
  body.dashboard-portfolio-empty .dashboard-portfolio-root,
  body.dashboard-portfolio-empty .portfolio-shell {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  body.dashboard-portfolio-empty .portfolio-shell.dashboard-surface {
    border: 0;
    box-shadow: none;
    border-radius: 0 !important;
    background: transparent;
  }
}

@media (min-width: 768px) {
  html:has(body.dashboard-portfolio-empty) {
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body.dashboard-portfolio-empty {
    --portfolio-content-height: calc(100dvh - 7rem - 30px - env(safe-area-inset-top, 0px));
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0 !important;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body.dashboard-portfolio-empty .layout > .main {
    width: 100%;
    max-width: 64rem !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
  }
  body.dashboard-portfolio-empty .dashboard-messages-layout-row {
    align-items: flex-start !important;
  }
  body.dashboard-portfolio-empty .dashboard-messages-layout-row > aside,
  body.dashboard-portfolio-empty .dashboard-messages-layout-row .dashboard-sidebar-rail {
    align-self: flex-start !important;
    flex-shrink: 0;
  }
  body.dashboard-portfolio-empty .dashboard-messages-layout-row > .flex-1 {
    display: flex;
    flex-direction: column;
    height: var(--portfolio-content-height);
    max-height: var(--portfolio-content-height);
    min-height: 0;
  }
  body.dashboard-portfolio-empty .dashboard-portfolio-root,
  body.dashboard-portfolio-empty .portfolio-shell {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

body.dashboard-portfolio-empty .layout > .main {
  animation: none;
}


body.dashboard-portfolio-page:not(.dashboard-portfolio-empty) .dashboard-portfolio-root {
  flex: none;
  height: auto;
  min-height: 0;
}
body.dashboard-portfolio-page:not(.dashboard-portfolio-empty) .showcase-grid--editor {
  padding-bottom: 0;
}

@media (min-width: 768px) {
  html:has(body.dashboard-messages-page) {
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body.dashboard-messages-page {
    --dm-thread-content-height: calc(100dvh - 7rem - 30px - env(safe-area-inset-top, 0px));
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0 !important;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body.dashboard-messages-page .layout > .main {
    width: 100%;
    max-width: 64rem !important; /* match max-w-5xl used by other dashboard pages */
    padding-bottom: 0 !important;
    box-sizing: border-box;
  }
  body.dashboard-messages-page .dashboard-messages-layout-row {
    align-items: flex-start !important;
  }
  body.dashboard-messages-page .dashboard-messages-layout-row > aside,
  body.dashboard-messages-page .dashboard-messages-layout-row .dashboard-sidebar-rail {
    align-self: flex-start !important;
    flex-shrink: 0;
  }
  body.dashboard-messages-page .dashboard-messages-layout-row > .flex-1 {
    display: flex;
    flex-direction: column;
    height: var(--dm-thread-content-height);
    max-height: var(--dm-thread-content-height);
    min-height: 0;
  }
  body.dashboard-messages-page .dashboard-messages-root {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  body.dashboard-messages-page .dm-panels {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
  body.dashboard-messages-page .dm-messages-shell {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
  body.dashboard-messages-page:not(.dm-thread-open) .dm-inbox-view {
    height: 100%;
    min-height: 0;
  }
  body.dashboard-messages-page .dm-panels-stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }


  .dm-messages {
    padding: 0.35rem 1.5rem 1.15rem;
  }
  .dm-bubble-wrap--mine:not(.dm-bubble-wrap--offer) {
    max-width: min(82%, 36rem);
    padding-left: 3.5rem;
  }
  .dm-bubble-wrap--theirs:not(.dm-bubble-wrap--offer) {
    max-width: min(82%, 36rem);
  }
  .dm-msg-avatar-slot {
    width: 1.875rem;
    height: 1.875rem;
  }
  .dm-time-divider {
    margin: 1.125rem 0 1.25rem;
  }
  .dm-session-event-wrap {
    margin-top: 1rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
  .dm-session-event-card {
    padding: 1.125rem 1.25rem;
  }
}

body.dashboard-messages-page .dashboard-messages-root,
body.dashboard-messages-page .dm-panels,
body.dashboard-messages-page .dm-messages-shell,
body.dashboard-messages-page .dm-panels-stage,
body.dashboard-messages-page .dm-inbox-view,
body.dashboard-messages-page .dm-thread-view {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

#dm-confirm-modal,
#call-confirm-modal {
  display: none;
  align-items: center;
  justify-content: center;
}
#dm-confirm-modal.is-open,
#call-confirm-modal.is-open {
  display: flex;
}
#dm-confirm-modal.dm-confirm-modal--alert .dm-confirm-box > div {
  justify-content: stretch;
}
#dm-confirm-modal.dm-confirm-modal--alert #dm-confirm-yes {
  width: 100%;
}


html:has(body.dashboard-messages-page.dm-thread-open) {
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body.dashboard-messages-page.dm-thread-open {
  --dm-thread-content-height: calc(100dvh - 6rem - 30px - env(safe-area-inset-top, 0px));
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0 !important;
  overflow: hidden;
  overscroll-behavior: none;
}
@media (min-width: 640px) {
  body.dashboard-messages-page.dm-thread-open {
    --dm-thread-content-height: calc(100dvh - 7rem - 30px - env(safe-area-inset-top, 0px));
  }
}
@media (min-width: 768px) {
  body.dashboard-messages-page.dm-thread-open .layout > .main {
    width: 100%;
    max-width: 64rem !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
  }
  body.dashboard-messages-page.dm-thread-open .dashboard-messages-layout-row {
    align-items: flex-start !important;
  }
  body.dashboard-messages-page.dm-thread-open .dashboard-messages-layout-row > aside,
  body.dashboard-messages-page.dm-thread-open .dashboard-messages-layout-row .dashboard-sidebar-rail {
    align-self: flex-start !important;
    flex-shrink: 0;
  }
  body.dashboard-messages-page.dm-thread-open .dashboard-messages-layout-row > .flex-1 {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: var(--dm-thread-content-height);
    max-height: var(--dm-thread-content-height);
    min-height: 0;
    min-width: 0;
  }
  body.dashboard-messages-page.dm-thread-open .dashboard-messages-root {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.dashboard-messages-page.dm-thread-open .dm-panels {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  body.dashboard-messages-page.dm-thread-open .dm-messages-shell {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
  }
  body.dashboard-messages-page.dm-thread-open .dm-panels-stage {
    flex: 1 1 auto;
    min-height: 0;
  }
  body.dashboard-messages-page.dm-thread-open .dm-panels.dm-panels--thread .dm-thread-view {
    min-height: 0;
    min-width: 0;
    height: 100%;
    width: 100%;
    max-width: 100%;
  }
  body.dashboard-messages-page.dm-thread-open .dm-messages-shell,
  body.dashboard-messages-page.dm-thread-open .dm-thread-card {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 767px) {
  body.dashboard-messages-page.dm-thread-open .dm-messages-shell .dm-thread-scroll {
    flex: 1 1 auto;
    min-height: 0;
  }
}

.dm-nav-unread-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--destructive, #dc2626);
  flex-shrink: 0;
}

/*
 * Sidebar: count pills hug the trailing edge and are wider than the 8px dots,
 * so dots looked off-axis. Nudge dots left so their centre lines up with a
 * typical single-digit pill centre. CSS-only — no wrapper markup.
 */
.dashboard-sidebar-rail a.dashboard-nav-link > .dm-nav-unread-dot.ml-auto,
.dashboard-sidebar a.dashboard-nav-link > .dm-nav-unread-dot.ml-auto,
.dashboard-sidebar-rail a.dashboard-nav-link > .w-2.h-2.rounded-full.ml-auto,
.dashboard-sidebar a.dashboard-nav-link > .w-2.h-2.rounded-full.ml-auto {
  margin-right: 0.55rem;
}
.dashboard-sidebar-rail a.dashboard-nav-link > .dashboard-pill.ml-auto,
.dashboard-sidebar a.dashboard-nav-link > .dashboard-pill.ml-auto {
  min-width: 1.5rem;
  justify-content: center;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  box-sizing: border-box;
}

.dm-inbox-shell,
.dm-messages-shell {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  transform: none !important;
  position: relative;
  isolation: isolate;
}
.dm-inbox-shell.dashboard-surface:hover,
.dm-messages-shell.dashboard-surface:hover {
  transform: none !important;
}
.dm-inbox-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  padding: 0.65rem 0.85rem 0.7rem;
  border-bottom: 0;
  flex-shrink: 0;
  min-width: 0;
  position: relative;
  z-index: 5;
  background: color-mix(in srgb, var(--background) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dm-inbox-nav-search {
  flex: 1 1 auto;
  min-width: 0;
}
.dm-inbox-compose-btn {
  color: var(--foreground);
  background: color-mix(in srgb, var(--muted) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.dm-inbox-compose-btn:hover {
  background: var(--muted);
  border-color: var(--border);
}
.dm-inbox-compose-btn:active {
  transform: scale(0.96);
}
.dm-inbox-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.15rem 0 0.75rem;
  overflow-y: auto;
}
.dm-inbox-empty.dm-thread-empty-state {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 2rem 1rem;
  border-bottom: 0;
  background: transparent;
}
.dm-inbox-empty.hidden {
  display: none;
}
.dm-inbox-empty-inner {
  width: 100%;
}
/* Inbox empty reuses thread-empty copy class — drop its top padding so it
   doesn't stack with the title margin and leave a big gap above "Say hello". */
.dm-inbox-empty .dm-thread-empty-copy {
  padding-top: 0;
}

.dm-inbox-unread-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background: var(--destructive, #dc2626);
  flex-shrink: 0;
}
.dm-inbox-item.hidden {
  display: none;
}
.dm-inbox-section-head {
  display: none !important;
}
body.dashboard-messages-page:not(.dm-thread-open) .dm-panels {
  gap: 0;
}
body.dashboard-messages-page:not(.dm-thread-open) .dm-inbox-view {
  padding-top: 0;
}
.dm-app--thread .dm-inbox-section-head {
  display: none !important;
}
.dm-inbox-preview {
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--muted-foreground);
}
.dm-inbox-preview--unread {
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
}
.dm-inbox-preview--typing {
  font-style: italic;
  color: var(--dm-muted, var(--muted-foreground));
}
.dm-inbox-avatar {
  width: 3.5rem;
  height: 3.5rem;
}
.dm-inbox-item-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground);
}
.dm-inbox-item-time {
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--muted-foreground);
}
.dm-inbox-role-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 0.15rem 0.4rem;
  border-radius: 9999px;
  color: var(--muted-foreground);
  background: var(--muted);
}
.dm-inbox-item-copy {
  gap: 0.2rem;
}
.site-mentor-search--inbox {
  position: relative;
  z-index: 20;
}
.site-mentor-search-input {
  -webkit-appearance: none;
  appearance: none;
}
.site-mentor-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
}
/* Native WebKit clear is a blue-grey blob in light mode — restyle to muted X. */
.site-mentor-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  margin-left: 4px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 10px 10px;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 10px 10px;
  background-color: var(--muted-foreground);
}
.site-mentor-search-input::-webkit-search-cancel-button:hover {
  background-color: var(--foreground);
}
.site-mentor-search--inbox .site-mentor-search-input {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
.site-mentor-search--inbox .site-mentor-search-input:focus,
.site-mentor-search--inbox .site-mentor-search-input:focus-visible {
  outline: none !important;
  border-color: color-mix(in srgb, var(--ring) 55%, var(--border)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent) !important;
}
.site-mentor-search--inbox .site-mentor-search-result[type="button"] {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.dm-thread-card {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  transform: none !important;
  position: relative;
  isolation: isolate;
}
.dm-thread-card.dashboard-surface:hover {
  transform: none !important;
}

@media (max-width: 640px) {
}

.dm-inbox-item {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  gap: 0.75rem;
  padding: 0.7rem 1.25rem;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  position: relative;
}
.dm-inbox-item .dm-inbox-item-link {
  border-radius: 0;
}
body.dashboard-messages-page #dm-inbox-list.dashboard-list-flat {
  gap: 0;
}
body.dashboard-messages-page #dm-inbox-list.dashboard-list-flat > .dm-inbox-item {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
body.dashboard-messages-page #dm-inbox-list.dashboard-list-flat > .dm-inbox-item.dashboard-surface,
body.dashboard-messages-page #dm-inbox-list.dashboard-list-flat > .dm-inbox-item {
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  transform: none;
}
body.dashboard-messages-page #dm-inbox-list.dashboard-list-flat > .dm-inbox-item:hover {
  transform: none;
  background: color-mix(in srgb, var(--foreground) 3.5%, transparent);
}
/* Kill flat-list full-bleed border (!important) — use indented ::before only */
body.dashboard-messages-page #dm-inbox-list.dashboard-list-flat > .dm-inbox-item + .dm-inbox-item,
body.dashboard-messages-page #dm-inbox-list.dashboard-list-flat > li + li {
  border-top: 0 !important;
}
body.dashboard-messages-page #dm-inbox-list.dashboard-list-flat > .dm-inbox-item + .dm-inbox-item::before {
  content: "";
  position: absolute;
  left: calc(1.25rem + 3.5rem + 0.75rem);
  right: 1.25rem;
  top: 0;
  height: 1px;
  background: color-mix(in srgb, var(--border) 90%, transparent);
  pointer-events: none;
}
.dm-inbox-item.hidden {
  display: none;
}
.dm-msg-avatar,
.dm-header-avatar {
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--muted);
}
.dm-msg-avatar {
  width: 1.75rem;
  height: 1.75rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dm-border) 70%, transparent);
}
.dm-header-avatar {
  width: 2.75rem;
  height: 2.75rem;
}
.dm-msg-avatar-fallback,
.dm-header-avatar.dm-msg-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--avatar-placeholder-foreground);
  background: var(--avatar-placeholder-gradient);
}
.dm-header-avatar.dm-msg-avatar-fallback {
  font-size: 1rem;
}

.dm-thread-view--booting-compact .dm-thread-empty-state {
  display: none;
  pointer-events: none;
}
.dm-thread-scroll--loading.dm-thread-scroll--convo .dm-thread-empty-state,
.dm-thread-scroll--convo.dm-thread-scroll--skeleton .dm-thread-empty-state {
  display: none;
  pointer-events: none;
}

.dm-thread-nav {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.4rem 0.5rem;
  border-bottom: 0;
  flex-shrink: 0;
  min-width: 0;
  min-height: 2.75rem;
  background: color-mix(in srgb, var(--background) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 5;
}
.dm-thread-back,
.dm-thread-delete-btn {
  color: var(--dm-text);
  padding: 0.25rem;
  display: inline-flex;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.dm-thread-back {
  grid-column: 1;
  justify-self: start;
  align-items: center;
  margin-left: -0.1rem;
}
.dm-thread-identity {
  grid-column: 2;
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(3px);
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.22s ease;
}
.dm-thread-identity.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.dm-thread-identity-link,
.dm-thread-identity-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}
.dm-thread-identity-link--compact,
.dm-thread-identity-inner--compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}
.dm-thread-identity-link:hover .dm-thread-identity-name {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.dm-thread-identity-avatar-wrap {
  flex-shrink: 0;
  line-height: 0;
}
.dm-thread-identity-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  object-fit: cover;
  display: block;
  background: var(--muted);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.dm-thread-identity-avatar.dm-msg-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--avatar-placeholder-foreground);
  background: var(--avatar-placeholder-gradient);
}
.dm-thread-identity-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  text-align: left;
}
.dm-thread-identity-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .dm-thread-identity {
    transform: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
  }
}
.dm-thread-identity-role {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.dm-thread-delete-btn {
  margin-right: -0.1rem;
  color: var(--dm-muted);
}
.dm-thread-nav-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
}
.dm-thread-menu-wrap {
  position: relative;
  z-index: 6;
}
.dm-thread-menu-btn {
  color: var(--dm-muted);
  padding: 0.25rem;
  display: inline-flex;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  margin-right: -0.1rem;
}
.dm-thread-menu-btn:hover,
.dm-thread-menu-btn[aria-expanded="true"] {
  color: var(--dm-text);
}
.dm-thread-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 80;
  min-width: 11.5rem;
  padding: 0.35rem;
  border-radius: 0.75rem;
  border: 1px solid var(--dm-border);
  background: var(--dm-panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.dm-thread-menu-item {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--dm-text);
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  cursor: pointer;
}
.dm-thread-menu-item:hover,
.dm-thread-menu-item:focus-visible {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  outline: none;
}
.dm-thread-menu-item--danger {
  color: var(--destructive, #dc2626);
}
.dm-thread-menu-item--danger:hover,
.dm-thread-menu-item--danger:focus-visible {
  background: rgba(220, 38, 38, 0.12);
}
.dm-compose-unavailable {
  margin: 0;
  padding: 0.85rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--dm-muted);
  text-align: center;
}
.dm-compose--disabled .dm-compose-inner {
  display: none;
}
.dm-thread-delete-btn:hover {
  color: var(--destructive, #dc2626);
}
.dm-bubble {
  position: relative;
}
.dm-bubble-delete {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 9999px;
  background: var(--dm-mine);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.dm-bubble-wrap--mine:hover .dm-bubble-delete,
.dm-bubble-delete:focus,
.dm-bubble-delete:focus-visible {
  opacity: 1;
}
.dm-bubble-delete:focus,
.dm-bubble-delete:focus-visible,
.dm-thread-delete-btn:focus,
.dm-thread-delete-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
.dm-thread-card .dm-thread-scroll,
.dm-messages-shell .dm-thread-scroll {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: color-mix(in srgb, var(--background) 72%, transparent);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dm-thread-card .dm-thread-scroll::-webkit-scrollbar,
.dm-messages-shell .dm-thread-scroll::-webkit-scrollbar {
  display: none;
}
.dm-thread-empty-state {
  flex-shrink: 0;
}
.dm-thread-scroll--empty .dm-thread-empty-state {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  min-height: 0;
  padding: 2rem 1.25rem 1.5rem;
  border-bottom: 0;
  background: transparent;
  box-sizing: border-box;
}
.dm-thread-scroll--empty .dm-thread-hero {
  border-bottom: 0;
  padding: 0;
  width: 100%;
}
.dm-thread-scroll--empty-exit .dm-thread-empty-state {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding: 1.5rem 1.25rem 1rem;
  border-bottom: 0;
  background: transparent;
  box-sizing: border-box;
}
.dm-thread-scroll--empty-exit .dm-thread-hero {
  display: block;
  width: 100%;
  padding: 0;
  border-bottom: 0;
}
.dm-thread-scroll--convo:not(.dm-thread-scroll--empty-exit) .dm-thread-empty-state {
  display: none;
  pointer-events: none;
}
.dm-thread-scroll--no-motion .dm-messages,
.dm-thread-scroll--no-motion .dm-thread-empty-state,
.dm-thread-scroll--no-motion .dm-thread-hero,
.dm-thread-scroll--no-motion .dm-thread-empty-copy,
.dm-thread-scroll--no-motion .dm-thread-skeleton,
.dm-thread-scroll--no-motion .dm-profile-mini,
.dm-thread-scroll--no-motion .dm-hero-avatar,
.dm-thread-scroll--no-motion .dm-hero-name {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}
.dm-thread-scroll--loading .dm-thread-skeleton {
  flex: 0 0 auto;
}
.dm-thread-scroll--pre-anchor .dm-messages,
.dm-thread-scroll--loading:not(.dm-thread-scroll--skeleton) .dm-messages {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .dm-thread-scroll--pre-anchor .dm-messages,
  .dm-thread-scroll--loading:not(.dm-thread-scroll--skeleton) .dm-messages {
    transform: none;
  }
}
.dm-thread-scroll--pre-anchor.dm-thread-scroll--convo .dm-thread-empty-state {
  display: none;
  pointer-events: none;
}
.dm-thread-scroll--pre-anchor.dm-thread-scroll--convo:not(.dm-thread-scroll--skeleton) {
  opacity: 0;
}
.dm-thread-scroll--anchored {
  opacity: 1;
}
.dm-thread-scroll--loading.dm-thread-scroll--skeleton .dm-messages {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.dm-thread-skeleton {
  flex: 0 0 auto;
  padding: 0.85rem 0.65rem 0.75rem;
  min-width: 0;
}
.dm-thread-skeleton.hidden {
  display: none;
}
.dm-thread-skeleton-bubble .dm-bubble {
  opacity: 0.72;
}
@media (prefers-reduced-motion: no-preference) {
  .dm-thread-skeleton {
    transition: opacity 0.22s ease;
  }
  .dm-thread-scroll--skeleton-exit .dm-thread-skeleton {
    opacity: 0;
    pointer-events: none;
  }
  .dm-thread-skeleton-bubble .dm-bubble {
    animation: dm-thread-skeleton-pulse 1.4s ease-in-out infinite;
  }
  @keyframes dm-thread-messages-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
@keyframes dm-thread-skeleton-pulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 0.92; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-thread-skeleton-bubble .dm-bubble {
    animation: none;
  }
}
.dm-thread-scroll--anchored:not(.dm-thread-scroll--opening) .dm-messages,
.dm-thread-scroll:not(.dm-thread-scroll--pre-anchor):not(.dm-thread-scroll--loading):not(.dm-thread-scroll--opening) .dm-messages {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .dm-thread-scroll--anchored:not(.dm-thread-scroll--opening) .dm-messages,
  .dm-thread-scroll:not(.dm-thread-scroll--pre-anchor):not(.dm-thread-scroll--loading):not(.dm-thread-scroll--opening) .dm-messages {
    transform: none;
  }
  .dm-thread-scroll--opening .dm-messages {
    opacity: 0;
    transform: none;
    animation: dm-thread-messages-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    pointer-events: auto;
  }
}
.dm-thread-empty-copy {
  max-width: 22rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--dm-muted);
  margin: 0;
  padding: 0.75rem 1.25rem 0;
  width: 100%;
  box-sizing: border-box;
}
.dm-thread-scroll--empty-exit .dm-thread-empty-copy {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  pointer-events: none;
}
.dm-thread-empty-copy p + p {
  margin-top: 0.625rem;
}
.dm-thread-empty-link {
  color: var(--foreground);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.dm-thread-empty-link:hover {
  text-decoration: none;
}
.dm-thread-scroll--empty .dm-messages {
  flex: 0 0 auto;
  padding: 0;
}
.dm-thread-scroll--convo .dm-messages,
.dm-thread-scroll--empty-exit .dm-messages {
  flex: 0 0 auto;
  padding: 0.85rem 0.65rem 0.75rem;
}
.dm-messages {
  padding: 0 1rem 0.75rem;
  min-width: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .dm-thread-empty-state,
  .dm-thread-hero,
  .dm-profile-mini,
  .dm-hero-avatar-wrap,
  .dm-hero-avatar,
  .dm-hero-name,
  .dm-thread-empty-copy,
  .dm-messages {
    transition:
      padding 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      margin 0.32s ease,
      opacity 0.28s ease,
      max-height 0.32s ease,
      min-height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      flex 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      gap 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      font-size 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .dm-hero-avatar {
    transition:
      width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      font-size 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .dm-hero-role,
  .dm-hero-profile-btn {
    transition: opacity 0.2s ease;
  }
  .dm-thread-scroll--empty-exit .dm-thread-empty-copy {
    opacity: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
  }
  @keyframes dm-bubble-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .dm-bubble-wrap--appear {
    animation: dm-bubble-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dm-thread-scroll--empty-exit .dm-thread-empty-copy {
    opacity: 0;
  }
}
#dm-messages-list {
  min-width: 0;
}

.dm-thread-card .dm-thread-hero,
.dm-messages-shell .dm-thread-hero {
  border-bottom: 0;
}
.dm-thread-hero {
  display: block;
  padding: 0;
  min-width: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .dm-thread-hero {
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  }
}
.dm-thread-scroll--no-motion .dm-thread-hero {
  transition: none !important;
}

.dm-profile-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}
.dm-profile-mini-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  max-width: 20rem;
  width: 100%;
}
.dm-hero-avatar-wrap {
  margin-bottom: 0;
  flex-shrink: 0;
}
.dm-hero-avatar-link {
  display: inline-block;
  line-height: 0;
  border-radius: 9999px;
  cursor: pointer;
}
.dm-hero-avatar-link:hover .dm-hero-avatar,
.dm-hero-avatar-link:focus-visible .dm-hero-avatar {
  opacity: 0.92;
}
.dm-hero-avatar-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 3px;
}
.dm-hero-avatar.mentor-profile-avatar {
  width: 7rem;
  height: 7rem;
  border-radius: 9999px;
  object-fit: cover;
  display: block;
  background: var(--muted);
  box-shadow: 0 0 0 2px var(--border), 0 10px 28px rgba(0, 0, 0, 0.16);
}
@media (min-width: 640px) {
  .dm-hero-avatar.mentor-profile-avatar {
    width: 8rem;
    height: 8rem;
  }
}
.dm-hero-avatar.dm-msg-avatar-fallback.mentor-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--avatar-placeholder-foreground);
  background: var(--avatar-placeholder-gradient);
}
@media (min-width: 640px) {
  .dm-hero-avatar.dm-msg-avatar-fallback.mentor-profile-avatar {
    font-size: 2rem;
  }
}
.dm-hero-name {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.15;
  max-width: 100%;
}
.dm-hero-role {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--muted-foreground);
  max-width: 100%;
}
.dm-hero-role-account {
  font-weight: 500;
  color: var(--muted-foreground);
  opacity: 0.85;
}
.dm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.dm-hero-profile-btn {
  margin-top: 0;
  flex-shrink: 0;
}
.dm-time-divider {
  text-align: center;
  font-size: 0.6875rem;
  color: var(--dm-muted);
  margin: 0.75rem 0 1rem;
}

.dm-msg-avatar-slot {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dm-read-receipt {
  text-align: right;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--dm-muted);
  margin: 0.15rem 0 0.5rem;
  padding-right: 0.25rem;
  max-width: 100%;
  margin-left: auto;
}
.dm-read-receipt.hidden {
  display: none;
}

#dm-typing-indicator.hidden {
  display: none;
}
.dm-typing-bubble {
  min-width: 3rem;
  padding: 0.75rem 0.95rem;
}
.dm-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  height: 0.5rem;
}
.dm-typing-dots span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 9999px;
  background: var(--dm-muted);
  opacity: 0.45;
  animation: dm-typing-dot 1.2s ease-in-out infinite;
}
.dm-typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.dm-typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dm-typing-dot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  30% {
    transform: translateY(-0.2rem);
    opacity: 0.9;
  }
}

.dm-bubble-wrap {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-top: 0.875rem;
  margin-bottom: 0;
  max-width: 100%;
  min-width: 0;
}
.dm-bubble-wrap--continued:not(.dm-bubble-wrap--offer) {
  margin-top: 0.25rem;
}
#dm-messages-list > .dm-bubble-wrap:first-child,
#dm-messages-list > .dm-session-event-wrap:first-child,
.dm-time-divider + .dm-bubble-wrap,
.dm-time-divider + .dm-session-event-wrap {
  margin-top: 0;
}
.dm-session-event-wrap {
  margin-top: 0.875rem;
}
.dm-bubble-wrap--mine {
  margin-left: auto;
  flex-direction: row;
  justify-content: flex-end;
  max-width: min(92%, 100%);
}
.dm-bubble-wrap--theirs {
  margin-right: auto;
  max-width: min(92%, 100%);
}
.dm-bubble {
  border-radius: 1.125rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  word-break: break-word;
  max-width: 100%;
  min-width: 0;
  position: relative;
  /* Double-click to love — avoid I-beam / drag-select fighting the gesture. */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.dm-bubble p {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.dm-bubble-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
  cursor: pointer;
  user-select: text;
  -webkit-user-select: text;
}
.dm-bubble-link:hover {
  opacity: 0.82;
}
.dm-bubble--mine {
  background: var(--dm-mine-gradient);
  color: #ffffff;
  border-bottom-right-radius: 0.3rem;
}
.dm-bubble--pending {
  opacity: 0.82;
}
.dm-offer-card--pending {
  opacity: 0.82;
}
.dm-bubble--theirs {
  background: var(--dm-theirs);
  color: var(--dm-theirs-text);
  border-bottom-left-radius: 0.3rem;
  border: 1px solid var(--dm-border);
}
.dm-bubble-heart-badge {
  display: none;
  position: absolute;
  bottom: -0.45rem;
  width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--dm-panel) 92%, transparent);
  border: 1px solid var(--dm-border);
  color: #f43f5e;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 2;
}
.dm-bubble-wrap--mine .dm-bubble-heart-badge {
  left: -0.15rem;
}
.dm-bubble-wrap--theirs .dm-bubble-heart-badge {
  right: -0.15rem;
}
.dm-bubble--hearted .dm-bubble-heart-badge {
  display: inline-flex;
}
.dm-bubble--hearted-me .dm-bubble-heart-badge {
  color: #f43f5e;
}
.dm-bubble-heart-burst {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  color: #f43f5e;
}
.dm-bubble-heart-burst svg {
  width: 2.75rem;
  height: 2.75rem;
  filter: drop-shadow(0 4px 10px rgba(244, 63, 94, 0.35));
  animation: dm-heart-burst 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dm-heart-burst {
  0% { opacity: 0; transform: scale(0.35); }
  45% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .dm-bubble-heart-burst svg {
    animation: none;
    opacity: 0.9;
  }
}

.dm-compose {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  padding: 0.75rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--dm-border);
  background: color-mix(in srgb, var(--dm-panel) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -10px 28px -18px rgba(0, 0, 0, 0.22);
}
@media (min-width: 768px) {
  body.dashboard-messages-page .dm-compose {
    padding: 0.75rem 0.85rem;
  }
}
.dm-compose-inner {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  background: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: 1.35rem;
  padding: 0.4rem 0.45rem 0.4rem 1rem;
  transition: border-color 0.15s ease;
}
.dm-compose-inner:focus-within {
  border-color: color-mix(in srgb, var(--dm-mine) 28%, var(--dm-border));
  box-shadow: none;
}
.dm-compose-input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--dm-text);
  font-size: 0.9375rem;
  resize: none;
  min-height: 1.5rem;
  max-height: 5.5rem;
  line-height: 1.45;
  padding: 0.25rem 0;
  outline: none;
  box-shadow: none;
}
.dm-compose-input:focus,
.dm-compose-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.dm-compose-input::placeholder {
  color: var(--dm-muted);
}
.dm-compose-send {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.05rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--dm-mine);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.dm-compose-send:focus,
.dm-compose-send:focus-visible {
  outline: none;
  box-shadow: none;
}
.dm-compose-send:hover {
  color: var(--dm-mine-hover);
}
.dm-compose-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.live-event-question-compose .dm-compose-inner {
  align-items: center;
}
.live-event-question-compose .dm-compose-inner .dm-compose-send {
  margin-bottom: 0;
}
.live-event-question-compose-inner .live-event-question-compose-input {
  min-height: 1.5rem;
  max-height: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  padding-top: 0;
  padding-bottom: 0;
  resize: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-event-question-compose-inner .live-event-question-compose-input::placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-compose-offer-btn {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.05rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--dm-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.dm-compose-offer-btn:hover,
.dm-compose-offer-btn[aria-expanded="true"] {
  color: var(--dm-mine);
}
.dm-compose-inner:has(.dm-compose-offer-btn) {
  padding-left: 0.55rem;
}
.dm-offer-picker {
  margin-top: 0.55rem;
  border: 1px solid var(--dm-border);
  border-radius: 1rem;
  background: var(--dm-panel);
  padding: 0.65rem 0.7rem 0.7rem;
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.35);
}
.dm-offer-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.dm-offer-picker-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}
.dm-offer-picker-close {
  border: 0;
  background: transparent;
  color: var(--dm-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
}
.dm-offer-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: min(14rem, 38vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.dm-offer-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  border: 1px solid var(--dm-border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--background) 55%, var(--dm-panel));
  padding: 0.55rem 0.65rem;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.dm-offer-picker-item:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--dm-border));
  background: color-mix(in srgb, var(--primary) 6%, var(--dm-panel));
}
.dm-offer-picker-item--disabled,
.dm-offer-picker-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.dm-offer-picker-item-main {
  min-width: 0;
  flex: 1;
}
.dm-offer-picker-item-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}
.dm-offer-picker-item-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--dm-muted);
  margin-top: 0.1rem;
}
.dm-offer-picker-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex-shrink: 0;
}
.dm-offer-picker-item-kind {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fafafa;
  background: #1a1a1a;
  border-radius: 9999px;
  padding: 0.18rem 0.5rem;
}
.dm-offer-picker-item-kind.dm-offer-card-kind--question {
  background: var(--primary);
  color: var(--primary-foreground, #fafafa);
}
.dm-offer-picker-item-kind.dm-offer-card-kind--live-call {
  background: #059669;
  color: #fafafa;
}
.dm-offer-picker-item-price {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
}
.dm-offer-picker-item-unavail {
  font-size: 0.625rem;
  color: var(--dm-muted);
  max-width: 7rem;
  text-align: right;
}
.dm-offer-picker-empty {
  font-size: 0.8125rem;
  color: var(--dm-muted);
  text-align: center;
  padding: 0.5rem 0.25rem;
}
.dm-bubble-wrap--offer {
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 1.125rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem 0.35rem;
  box-sizing: border-box;
}
.dm-bubble-wrap--offer .dm-msg-avatar-slot {
  display: none;
}
.dm-bubble-wrap--offer.dm-bubble-wrap--mine,
.dm-bubble-wrap--offer.dm-bubble-wrap--theirs {
  flex-direction: row;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}
.dm-bubble-wrap--offer .dm-offer-card {
  width: 100%;
  max-width: min(21rem, 86%);
}
.dm-bubble-wrap--mine.dm-bubble-wrap--offer {
  margin-left: auto;
  margin-right: auto;
}
.dm-offer-card {
  width: 100%;
  min-width: 0;
  position: relative;
}
.dm-offer-card--mine .dm-bubble-delete {
  z-index: 3;
  background: color-mix(in srgb, var(--surface-1) 88%, var(--foreground) 12%);
  color: var(--foreground);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.dm-offer-card--mine:hover .dm-bubble-delete,
.dm-bubble-wrap--offer.dm-bubble-wrap--mine:hover .dm-bubble-delete {
  opacity: 1;
}
.dm-offer-card-inner {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 1.125rem;
  background: var(--surface-1);
  box-shadow:
    var(--card-inset-shadow),
    var(--card-shadow),
    0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent),
    0 0 22px -8px color-mix(in srgb, var(--primary) 24%, transparent),
    0 0 30px -12px color-mix(in srgb, #2563eb 18%, transparent);
  animation: dm-offer-card-glow 5s ease-in-out infinite;
}
@keyframes dm-offer-card-glow {
  0%, 100% {
    box-shadow:
      var(--card-inset-shadow),
      var(--card-shadow),
      0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent),
      0 0 20px -10px color-mix(in srgb, var(--primary) 20%, transparent),
      0 0 28px -14px color-mix(in srgb, #2563eb 14%, transparent);
  }
  50% {
    box-shadow:
      var(--card-inset-shadow),
      var(--card-shadow),
      0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent),
      0 0 28px -6px color-mix(in srgb, var(--primary) 30%, transparent),
      0 0 36px -10px color-mix(in srgb, #2563eb 22%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dm-offer-card-inner {
    animation: none;
  }
}
.dm-offer-card-body {
  position: relative;
  z-index: 1;
  padding: 1rem 1.15rem 1.05rem;
}
.dm-offer-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}
.dm-offer-card-kind {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fafafa;
  background: #1a1a1a;
  border-radius: 9999px;
  padding: 0.2rem 0.55rem;
}
.dm-offer-card-kind--question {
  background: var(--primary);
  color: var(--primary-foreground, #fafafa);
}
.dm-offer-card-kind--live-call {
  background: #059669;
  color: #fafafa;
}
.dm-offer-card-kind--custom {
  /* legacy no-op; prefer --question / --live-call */
}
.dm-offer-card-price {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--foreground);
}
.dm-offer-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.35;
}
.dm-offer-card-subtitle {
  font-size: 0.8125rem;
  color: var(--dm-muted);
  margin-top: 0.2rem !important;
  line-height: 1.4;
}
.dm-offer-card-footnote {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--dm-muted);
  margin-top: 0.65rem !important;
}
.dm-offer-card-footnote--muted {
  color: color-mix(in srgb, var(--dm-muted) 90%, var(--destructive));
}
.dm-offer-card-cta {
  margin-top: 0.75rem;
  display: inline-flex;
}
.dm-offer-card--unavailable .dm-offer-card-inner {
  opacity: 0.82;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes dm-offer-entrance-card {
    0% {
      opacity: 0;
      transform: scale(0.76) translateY(20px);
    }
    45% {
      opacity: 1;
      transform: scale(1.06) translateY(-5px);
    }
    70% {
      transform: scale(0.98) translateY(2px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  @keyframes dm-offer-entrance-glow-burst {
    0% {
      box-shadow:
        var(--card-inset-shadow),
        var(--card-shadow),
        0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent),
        0 0 0 0 color-mix(in srgb, #2563eb 0%, transparent);
    }
    40% {
      box-shadow:
        var(--card-inset-shadow),
        var(--card-shadow),
        0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent),
        0 0 48px -2px color-mix(in srgb, var(--primary) 58%, transparent),
        0 0 64px -4px color-mix(in srgb, #2563eb 42%, transparent);
    }
    100% {
      box-shadow:
        var(--card-inset-shadow),
        var(--card-shadow),
        0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent),
        0 0 22px -8px color-mix(in srgb, var(--primary) 24%, transparent),
        0 0 30px -12px color-mix(in srgb, #2563eb 18%, transparent);
    }
  }
  @keyframes dm-offer-entrance-shine {
    0% {
      opacity: 0;
      transform: translateX(-140%) skewX(-18deg);
    }
    40% {
      opacity: 0.9;
    }
    100% {
      opacity: 0;
      transform: translateX(140%) skewX(-18deg);
    }
  }
  .dm-bubble-wrap--offer-entrance .dm-offer-card {
    animation: dm-offer-entrance-card 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .dm-bubble-wrap--offer-entrance .dm-offer-card-inner {
    animation:
      dm-offer-entrance-glow-burst 0.95s cubic-bezier(0.22, 1, 0.36, 1) both,
      dm-offer-card-glow 5s ease-in-out 0.95s infinite;
  }
  .dm-bubble-wrap--offer-entrance .dm-offer-card-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 36%,
      color-mix(in srgb, #fff 52%, transparent) 50%,
      transparent 64%
    );
    opacity: 0;
    animation: dm-offer-entrance-shine 0.8s ease-out 0.18s both;
  }
}
.dm-thread-back:focus,
.dm-thread-back:focus-visible {
  outline: none;
  box-shadow: none;
}
.dm-thread-menu-btn:focus,
.dm-thread-menu-btn:focus-visible,
.dm-thread-delete-btn:focus,
.dm-thread-delete-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

.dashboard-nav-active {
  position: relative;
}
.dashboard-nav-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--sidebar-active-indicator);
  opacity: 1;
  transition: height 0.2s ease;
}

@keyframes stat-count-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.dashboard-stat-number {
  display: inline-block;
  animation: stat-count-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  font-variant-numeric: tabular-nums;
}

.dashboard-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.006em;
}

.dashboard-pill--pending {
  background: var(--primary);
  color: var(--primary-foreground, #ffffff);
}
html.dark .dashboard-pill--pending {
  background: var(--primary);
  color: var(--primary-foreground, #ffffff);
}
.dashboard-pill--success {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}
html.dark .dashboard-pill--success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}
.dashboard-pill--urgent {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
html.dark .dashboard-pill--urgent {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
.dashboard-pill--info {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--primary);
}

.dashboard-pill--awaiting {
  background: var(--muted);
  color: var(--muted-foreground);
  box-shadow: inset 0 0 0 1px var(--border);
}
html.dark .dashboard-pill--awaiting {
  background: color-mix(in oklch, var(--muted) 85%, transparent);
  color: var(--muted-foreground);
  box-shadow: inset 0 0 0 1px var(--border);
}
.dashboard-pill--dot::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.deadline-pill-variant {
  display: inline-flex;
  align-items: center;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  transform-origin: left center;
  transition:
    opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
    max-width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    margin 240ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.deadline-pill-variant--hidden {
  opacity: 0;
  max-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transform: scale(0.92);
  pointer-events: none;
}

.dashboard-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
}
@media (min-width: 640px) {
  .dashboard-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}
.dashboard-bento > * {
  min-width: 0;
  min-height: 0;
}
.dashboard-bento-wide {
  grid-column: span 1;
}
@media (min-width: 640px) {
  .dashboard-bento-wide {
    grid-column: span 2;
  }
}

@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.dashboard-skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius);
}

.dashboard .btn.btn-primary {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background 0.15s ease;
}
.dashboard .btn.btn-primary:hover {
  transform: scale(1.03);
}
.dashboard .btn.btn-primary:active {
  transform: scale(0.98);
}

.dashboard .rounded-2xl:not(:has(form)):not(.dashboard-pending-item) {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.dashboard-stat-glow {
  position: relative;
  overflow: hidden;
}
.dashboard-stat-glow::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, var(--stat-glow) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dashboard-stat-glow:hover::after {
  opacity: 1;
}

.dashboard-bento .dashboard-stat-glow::after {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse 90% 80% at 100% 0%, var(--stat-glow) 0%, transparent 72%);
}

.dashboard .dashboard-pending-item--standard {
  background: linear-gradient(165deg, #3f3f46 0%, #2d2d32 45%, #1c1c1f 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #fafafa;
  box-shadow: var(--card-inset-shadow), var(--card-shadow);
}
.dashboard .dashboard-pending-item--standard .avatar-placeholder {
  color: #fafafa !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
.dashboard .dashboard-pending-item--urgent {
  background: linear-gradient(to bottom right, #ef4444, #dc2626) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard .dashboard-pending-item:not(.dashboard-pending-item--standard):not(.dashboard-pending-item--urgent) {
  background: var(--btn-primary-gradient);
}

.request-new-page .auth-field--float-textarea .auth-field-textarea,
.conversation-new-page .auth-field--float-textarea .auth-field-textarea {
  min-height: 5.5rem;
}
.request-new-page .auth-field--float-textarea .auth-field-textarea:focus,
.request-new-page .auth-field--float-textarea .auth-field-textarea:not(:placeholder-shown),
.conversation-new-page .auth-field--float-textarea .auth-field-textarea:focus,
.conversation-new-page .auth-field--float-textarea .auth-field-textarea:not(:placeholder-shown) {
  min-height: 5.5rem;
}
/* Book call: single short field — keep closer to the old min-h-[4rem], not the taller review/question boxes. */
.book-call-page .auth-field--float-textarea .auth-field-textarea,
.book-call-page .auth-field--float-textarea .auth-field-textarea:focus,
.book-call-page .auth-field--float-textarea .auth-field-textarea:not(:placeholder-shown) {
  min-height: 4.5rem;
}

@media (max-width: 640px) {
  .request-new-page > header,
  .book-call-page > header,
  .conversation-new-page > header {
    padding: 0 0.25rem;
  }
  .request-new-page .request-file-wrap {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .request-new-page .request-file-btn {
    width: 100%;
    justify-content: center;
  }
}

.bookcal-dow,
.bookcal-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
}
.bookcal-month {
  row-gap: 0.25rem;
}
.bookcal-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .bookcal-slot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bookcal-day.bookcal-day--today,
.bookcal-day.bookcal-day--today:hover {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}

.bookcal-day.bookcal-day--selected:not(.bookcal-day--today),
.bookcal-day.bookcal-day--selected:not(.bookcal-day--today):hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.bookcal-day--unavailable {
  color: color-mix(in oklch, var(--muted-foreground), transparent 60%);
  cursor: default;
}

.bookcal-slot {
  background-color: var(--muted);
  color: var(--foreground);
}
.bookcal-slot:hover {
  background-color: color-mix(in oklch, var(--muted), var(--foreground) 6%);
}
.bookcal-slot--selected,
.bookcal-slot--selected:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}
.bookcal-slot--readonly,
.bookcal-slot--readonly:hover {
  background-color: var(--muted);
  cursor: default;
}

.bookcal-day-empty {
  display: inline-block;
  height: 2.5rem;
}

.nav-dropdown-menu {
  animation: nav-dropdown-in 0.22s ease-out;
}
@keyframes nav-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.nav-dropdown.is-open .nav-dropdown-menu {
  display: block;
}
@media (hover: hover) {
  .nav-dropdown:hover .nav-dropdown-menu {
    display: block;
  }
}
.nav-dropdown:hover .nav-dropdown-trigger-icon,
.nav-dropdown.is-open .nav-dropdown-trigger-icon {
  transform: rotate(180deg);
}
@media (hover: hover) {
  .nav-dropdown:hover .nav-dropdown-trigger-icon {
    transform: rotate(180deg);
  }
}

.settings-delete-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.profile-photo-crop-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-photo-crop-container,
.profile-photo-crop-container .cropper-bg,
.profile-photo-crop-container .cropper-wrap-box,
.profile-photo-crop-container .cropper-drag-box {
  background: #1a1a1a !important;
  background-image: none !important;
}
.profile-photo-crop-container .cropper-view-box {
  outline: none;
}

.session-tier-toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}
.session-tier-toggle-switch .session-tier-visible-cb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.session-tier-slider {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--border);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.session-tier-card.is-visible .session-tier-slider {
  background: oklch(1 0 0 / 0.35);
}
.session-tier-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: var(--primary-foreground);
  box-shadow: 0 2px 6px oklch(0 0 0 / 0.15);
  transition: transform 0.2s ease;
}
.session-tier-visible-cb:checked + .session-tier-slider {
  background: oklch(1 0 0 / 0.95);
}
.session-tier-card:not(.is-visible) .session-tier-visible-cb:checked + .session-tier-slider {
  background: var(--primary);
}
.session-tier-visible-cb:checked + .session-tier-slider::before {
  transform: translateX(24px);
}
.session-tier-visible-cb:focus-visible + .session-tier-slider {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}
.session-tier-card.is-visible .session-tier-visible-cb:focus-visible + .session-tier-slider {
  box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px oklch(1 0 0 / 0.35);
}

.day-pill[data-on="0"] {
  background-color: oklch(0.45 0.01 270 / 0.12);
  color: var(--muted-foreground);
  border-color: var(--border);
}
.day-pill[data-on="0"]:hover {
  background-color: oklch(0.45 0.01 270 / 0.22);
}
.day-pill[data-on="1"] {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.day-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.live-avail-time-row {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 40%, transparent);
}
.live-avail-per-day-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 22rem;
}
.sessions-avail-grid .live-avail-per-day-list {
  max-width: none;
  width: 100%;
}
.live-avail-time-row--day {
  display: flex;
  width: 100%;
}
.live-avail-time-day {
  width: 2.25rem;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}
.live-avail-time-sep {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  user-select: none;
}
.live-avail-time-input {
  width: 6rem;
  padding: 0.375rem 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--background);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent);
  color-scheme: light dark;
}
.live-avail-time-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--primary), 0 0 0 2px color-mix(in srgb, var(--ring) 45%, transparent);
}
@media (min-width: 640px) {
  .live-avail-time-input {
    width: 7rem;
  }
}

.sessions-unavailable-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  vertical-align: middle;
}
.sessions-unavailable-switch-cb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.sessions-unavailable-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--muted);
  border: 1px solid var(--border);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  pointer-events: none;
}
.sessions-unavailable-switch-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 50%;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--background);
  box-shadow: 0 1px 4px oklch(0 0 0 / 0.18);
  transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.sessions-unavailable-switch-cb:checked + .sessions-unavailable-switch-slider {
  background: var(--primary);
  border-color: color-mix(in oklch, var(--primary), black 12%);
}
.sessions-unavailable-switch-cb:checked + .sessions-unavailable-switch-slider::before {
  background: var(--primary-foreground);
  transform: translateX(16px);
}
.sessions-unavailable-switch-cb:focus-visible + .sessions-unavailable-switch-slider {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.sessions-break-card:has(.sessions-unavailable-switch-cb:checked) .sessions-break-copy--open {
  display: none;
}
.sessions-break-card:not(:has(.sessions-unavailable-switch-cb:checked)) .sessions-break-copy--away {
  display: none;
}

.session-tier-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}
.session-tier-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-tier-card:not(.is-visible) .session-tier-body {
  display: none;
}

.session-tier-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.session-tier-body > * {
  margin: 0;
}
/* Description box is taller than the title field — pull the settings
   row up so the optical gap matches title → description. */
.sessions-form .session-tier-body > .auth-field--float-textarea + .session-tier-settings-grid {
  margin-top: -0.25rem;
}

.sessions-panel > * + * {
  margin-top: 1.75rem;
}

/* Calendar sync — Live calls tab */
.sessions-cal-sync {
  position: relative;
}
.sessions-cal-sync__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 1.25rem 1.35rem;
}
@media (min-width: 640px) {
  .sessions-cal-sync__inner {
    gap: 1.35rem;
    padding: 1.5rem 1.5rem 1.6rem;
  }
}
.sessions-cal-sync__header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}
.sessions-cal-sync__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
}
.sessions-cal-sync--error .sessions-cal-sync__icon {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.18);
}
html.dark .sessions-cal-sync--error .sessions-cal-sync__icon {
  color: #f87171;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.22);
}
.sessions-cal-sync__intro {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.1rem;
}
.sessions-cal-sync__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
}
.sessions-cal-sync__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground);
}
.sessions-cal-sync__lede {
  margin: 0.35rem 0 0;
  max-width: 36rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.sessions-cal-sync__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
}
@media (min-width: 640px) {
  .sessions-cal-sync__form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 0.875rem;
    align-items: center;
  }
  .sessions-cal-sync__field {
    grid-column: 1;
  }
  .sessions-cal-sync__actions {
    grid-column: 2;
    padding-top: 0;
  }
}
.sessions-cal-sync__input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}
.sessions-cal-sync__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.sessions-cal-sync__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--muted) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.sessions-cal-sync__status-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.35;
}
.sessions-cal-sync__status-meta {
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}
.sessions-cal-sync__error {
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #dc2626;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.16);
}
html.dark .sessions-cal-sync__error {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.22);
}
.sessions-cal-sync__help {
  margin: 0;
  padding-top: 0.15rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.sessions-cal-sync__help-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.85rem 0 0.15rem;
  list-style: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: color 0.15s ease;
}
.sessions-cal-sync__help-summary::-webkit-details-marker {
  display: none;
}
.sessions-cal-sync__help-summary:hover {
  color: var(--foreground);
}
.sessions-cal-sync__help-chevron {
  display: inline-flex;
  transition: transform 0.18s ease;
}
.sessions-cal-sync__help[open] .sessions-cal-sync__help-chevron {
  transform: rotate(180deg);
}
.sessions-cal-sync__providers {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.sessions-cal-sync__providers li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.65rem 0.85rem;
  align-items: baseline;
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--muted) 45%, transparent);
}
@media (max-width: 519px) {
  .sessions-cal-sync__providers li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}
.sessions-cal-sync__provider-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
}
.sessions-cal-sync__provider-steps {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}
.sessions-cal-sync__provider-steps code {
  font-size: 0.75rem;
  padding: 0.05rem 0.3rem;
  border-radius: 0.3rem;
  background: color-mix(in srgb, var(--muted) 70%, transparent);
  color: var(--foreground);
}
.sessions-cal-sync__help-note {
  margin-top: 0;
  padding-top: 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

.sessions-section-intro {
  margin: 0;
  padding: 0 0.125rem;
}
.sessions-section-intro h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
}
.sessions-section-intro p {
  margin: 0;
  max-width: 40rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.sessions-avail-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.sessions-avail-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}
.sessions-avail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 768px) {
  .sessions-avail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem 2rem;
  }
  /* Shared + per-day are mutually exclusive; whichever is visible
     sits in column 2 beside Days. */
  .sessions-avail-grid > [data-live-avail-shared],
  .sessions-avail-grid > [data-live-avail-per-day] {
    grid-column: 2;
    grid-row: 1;
  }
}

.session-tier-settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 640px) {
  .session-tier-settings-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.session-tier-settings-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.session-field-hint {
  display: block;
  margin-top: 0.375rem;
  min-height: 1.125rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--muted-foreground);
}


.session-tier-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}
.sessions-form .session-tier-settings-grid .auth-field--float .auth-field-input:not(.auth-field-select) {
  box-sizing: border-box;
  height: 3rem;
}
.sessions-form .session-tier-settings-grid .auth-field--float .auth-field-select {
  box-sizing: border-box;
  height: 3rem;
  min-height: 3rem;
}
.sessions-form .auth-field-input:disabled {
  opacity: 0.7;
  background: var(--muted);
  cursor: not-allowed;
}
.session-price-lock {
  position: relative;
}
.session-price-lock .price-lock-cta {
  box-sizing: border-box;
  height: 3rem;
  padding: 1.375rem 0.75rem 0.5rem;
}
.session-price-lock > .auth-field-float-label {
  top: 0.625rem;
  transform: none;
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
  z-index: 1;
}
.sessions-form .auth-field--float-textarea .auth-field-textarea {
  min-height: 4.25rem;
}
.sessions-form .auth-field--float-textarea .auth-field-textarea:focus,
.sessions-form .auth-field--float-textarea .auth-field-textarea:not(:placeholder-shown) {
  min-height: 4.25rem;
}
.sessions-form .sessions-form-live-desc .auth-field-textarea {
  min-height: 4.5rem;
  height: 4.5rem;
  box-sizing: border-box;
  resize: vertical;
}
.sessions-form .sessions-form-live-desc .auth-field-textarea:focus,
.sessions-form .sessions-form-live-desc .auth-field-textarea:not(:placeholder-shown) {
  min-height: 4.5rem;
}
.sessions-live-product-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 640px) {
  .sessions-live-product-fields {
    /* Description flexes; price stays intentionally compact (not half, not full). */
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 11rem);
    gap: 1rem 1.25rem;
  }
  .sessions-live-product-fields .sessions-form-live-desc {
    min-width: 0;
  }
  .sessions-live-product-fields .sessions-live-product-price {
    width: 100%;
  }
  /* Match price control height to the Description field beside it. */
  .sessions-live-product-fields .sessions-live-product-price > .auth-field--float .auth-field-input:not(.auth-field-select),
  .sessions-live-product-fields .sessions-live-product-price .price-lock-cta {
    height: 4.5rem;
    min-height: 4.5rem;
    box-sizing: border-box;
  }
}

#settings-delete-account,
.settings-delete-modal-box {
  color: var(--destructive-foreground);
}
#settings-delete-account a,
.settings-delete-modal-box a {
  color: inherit;
}

.dashboard-save-bar-sticky {
  display: flex;
}

.dashboard-edit .profile-field-label,
.dashboard-edit .profile-section label > span:first-child,
.dashboard-edit label .block.text-sm {
  color: var(--foreground);
  letter-spacing: 0.01em;
}

html:has(body.review-session),
html:has(body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard)) {
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}
body.review-session,
body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) {
  overflow: hidden;
  min-height: 0 !important;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

.layout.layout--viewport-lock {
  min-height: 0;
  max-height: 100vh;
  max-height: 100dvh;
}
body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) .layout .main {
  min-height: 0;
  flex: 1 1 0%;
  overflow: hidden;
}
body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) #review-submit-page {
  flex: 1 1 0%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

html:has(body.review-submit--dashboard),
html:has(body.review-submit-dashboard),
body.review-submit--dashboard,
body.review-submit-dashboard {
  height: auto !important;
  max-height: none !important;
  overflow: auto !important;
  overscroll-behavior: auto !important;
  position: static !important;
  touch-action: auto !important;
}
body.review-submit--dashboard .layout,
body.review-submit--dashboard .layout .main,
body.review-submit-dashboard .layout,
body.review-submit-dashboard .layout .main {
  min-height: 0;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
body.review-submit--dashboard #review-submit-page,
body.review-submit-dashboard #review-submit-page {
  min-height: 0;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  touch-action: auto !important;
}
body.review-submit--dashboard.review-session,
body.review-submit-dashboard.review-session {
  overflow: auto !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
  touch-action: auto !important;
}
body.review-submit--dashboard.review-session .layout,
body.review-submit--dashboard.review-session .layout .main,
body.review-submit-dashboard.review-session .layout,
body.review-submit-dashboard.review-session .layout .main {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
body.review-session:not(.review-ready) .layout .main {
  opacity: 0;
}
body.review-session.review-ready .layout .main {
  animation: reviewContentIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

body.book-call-loading:not(.book-call-ready) .layout .main {
  opacity: 0;
  pointer-events: none;
}
body.book-call-loading.book-call-ready .layout .main {
  animation: reviewContentIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

html:has(body.review-session),
html:has(body.review-session) body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html:has(body.review-session)::-webkit-scrollbar,
body.review-session::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
body.review-session .layout,
body.review-session .layout .main {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.review-session .layout::-webkit-scrollbar,
body.review-session .layout .main::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

html:has(body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard)),
body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard),
body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) .layout,
body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) .layout .main {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html:has(body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard))::-webkit-scrollbar,
body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard)::-webkit-scrollbar,
body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) .layout::-webkit-scrollbar,
body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) .layout .main::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
@keyframes reviewContentIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.review-exit-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--background);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease-out;
}
.review-exit-transition.is-visible {
  opacity: 1;
  pointer-events: auto;
}
body.review-session .review-session-page.review-session-exiting .review-session-main {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

@media (min-width: 769px) {
  body.review-session .review-session-panel {
    box-shadow: var(--card-shadow, 0 1px 2px rgba(0, 0, 0, 0.04));
  }
  body.review-session .review-session-list-item {
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
}
body.review-session .review-session-list-item.is-selected {
  background: var(--muted);
  border-color: transparent;
  color: var(--foreground);
}

body.review-session .review-session-list-item:focus,
body.review-session .review-session-list-item:focus-visible {
  box-shadow: none;
  outline: none;
}
body.review-session .review-session-main.review-session-main--deadline-passed .review-session-header,
body.review-session .review-session-main.review-session-main--deadline-passed .review-session-layout {
  opacity: 0.5;
  pointer-events: none;
}
body.review-session .review-session-page.review-session-page--fading-out .review-session-main {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
body.review-session .review-panel-bar.review-panel-bar--link-only .review-panel-external {
  display: none;
}
body.review-session .review-session-share-area.review-session-share-area--hidden {
  display: none !important;
}
body.review-session .review-session-screen-video.review-session-screen-video--active {
  opacity: 1;
}
body.review-session .review-session-btn--record.is-recording {
  background: var(--destructive);
  color: var(--destructive-foreground);
  opacity: 1;
  animation: review-record-pulse 1.5s ease-in-out infinite;
}
@keyframes review-record-pulse {
  0%, 100% { box-shadow: 0 0 12px 2px rgba(239, 68, 68, 0.35); }
  50% { box-shadow: 0 0 20px 6px rgba(239, 68, 68, 0.55), 0 0 32px 8px rgba(239, 68, 68, 0.25); }
}
body.review-session .review-saving-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
body.review-session #review-saving-overlay {
  background: rgba(6, 6, 8, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.review-session .review-decline-dialog-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.review-session .review-decline-dialog-box {
  box-shadow: var(--modal-shadow);
}
body.review-session .review-decline-dialog[hidden],
#review-start-over-dialog[hidden] {
  display: none !important;
}

body.review-session #review-webcam-wrap,
body.review-session #review-webcam-wrap video {
  pointer-events: none !important;
}
body.review-session #review-webcam-wrap[aria-hidden="true"] {
  display: none !important;
}

body.review-session #review-webcam-wrap.review-webcam-wrap--user-positioned:not([aria-hidden="true"]) {
  left: var(--pip-left, 0px) !important;
  top: var(--pip-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}
@media (max-width: 768px), ((max-width: 1024px) and (hover: none) and (pointer: coarse)), ((max-height: 500px) and (max-width: 940px) and (pointer: coarse)) {
  body.review-session #review-webcam-wrap:not([aria-hidden="true"]) {
    pointer-events: auto !important;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  body.review-session #review-webcam-wrap:not([aria-hidden="true"]) video {
    pointer-events: auto !important;
  }
}

body.review-session #review-session-page.review-sidebar-locked .review-session-sidebar {
  pointer-events: none;
  opacity: 0.48;
  filter: grayscale(0.25);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
body.review-session #review-session-page.review-preview-active .review-session-btn--record:disabled,
body.review-session #review-session-page.review-sidebar-locked .review-session-btn--record:disabled:not(.is-recording) {
  opacity: 0.5;
  filter: grayscale(1) brightness(0.92);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

body.review-session #review-session-page.review-preview-active .review-session-controls,
body.review-session #review-session-page.review-sidebar-locked .review-session-controls,
body.review-session #review-session-page.review-preview-active #review-session-mobile-bar,
body.review-session #review-session-page.review-sidebar-locked #review-session-mobile-bar {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.review-session #review-preview-overlay[hidden] {
  display: none !important;
}
body.review-session #review-preview-overlay:not([hidden]) {
  display: flex !important;
}
body.review-session #review-countdown[hidden] {
  display: none !important;
}
body.review-session #review-countdown:not([hidden]) {
  display: flex !important;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
body.review-session #review-countdown.is-visible {
  opacity: 1 !important;
}
body.review-session .review-session-countdown-number {
  text-shadow: 0 0 24px rgba(255,255,255,0.25), 0 0 48px rgba(255,255,255,0.15);
}

body.review-session #review-portfolio-viewer {
  min-height: 280px;
}
body.review-session .review-panel-content {
  min-height: 260px;
}
body.review-session #review-viewer-img,
body.review-session .review-slide-img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body.review-session .review-portfolio-swiper .review-slide-sheet.review-panel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
body.review-session .review-portfolio-swiper .review-slide-sheet > .review-panel-message,
body.review-session .review-portfolio-swiper .review-slide-sheet > .review-panel-link-card {
  position: relative;
  inset: auto;
  flex: 0 1 auto;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.review-session .review-portfolio-swiper .review-slide-sheet > .review-slide-img {
  position: relative;
  inset: auto;
  flex: 0 1 auto;
  align-self: center;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
body.review-session .review-portfolio-swiper .review-slide-sheet > .review-slide-iframe {
  position: relative;
  inset: auto;
  flex: 1 1 0;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  height: 100%;
  border: 0;
  box-sizing: border-box;
}

body.review-session .review-portfolio-swiper .review-slide-sheet > .review-panel-embed {
  position: relative;
  inset: auto;
  flex: 1 1 0;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
}
body.review-session .review-portfolio-swiper .review-slide-sheet .review-embed-frame {
  position: relative;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
}
body.review-session .review-portfolio-swiper .review-slide-sheet .review-embed-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
body.review-session .review-embed-frame--instagram {
  background: transparent;
}
body.review-session .review-links-alert.is-blocking {
  background-color: rgba(127, 29, 29, 0.85);
  border-color: rgba(248, 113, 113, 0.7);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25), 0 8px 24px -10px rgba(127, 29, 29, 0.6);
  animation: review-links-alert-pulse 1.4s ease-out 1;
  color: #fecaca;
}
body.review-session .review-links-alert.is-blocking .text-foreground,
body.review-session .review-links-alert.is-blocking .text-muted-foreground {
  color: #fecaca !important;
}
body.review-session .review-links-alert.is-blocking strong {
  color: #fff !important;
}
@keyframes review-links-alert-pulse {
  0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.55), 0 8px 24px -10px rgba(127, 29, 29, 0.6); }
  60% { box-shadow: 0 0 0 8px rgba(248, 113, 113, 0), 0 8px 24px -10px rgba(127, 29, 29, 0.6); }
  100% { box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25), 0 8px 24px -10px rgba(127, 29, 29, 0.6); }
}
body.review-session .review-embed-frame--instagram .instagram-media,
body.review-session .review-embed-frame--instagram iframe.instagram-media {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

body.review-session .review-session-preview-overlay.review-preview-overlay--fade-out {
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 769px) {
  body.review-session #review-viewer-link-phone-note {
    display: none !important;
  }
  body.review-session #review-phone-record-notice {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
body.review-session #review-phone-record-notice[hidden] {
  display: none !important;
}
body.review-session #review-phone-record-notice:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 100dvh;
  min-height: 100svh;
  min-height: -webkit-fill-available;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}
body.review-session .review-phone-record-notice-scroll {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.review-session .review-phone-record-notice-box {
  margin: auto 0;
  flex-shrink: 0;
}

body.review-session.review-narrow-desktop #review-session-mobile-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

body.review-session .review-session-narrow-block {
  display: none;
}
body.review-session.review-narrow-desktop .review-session-narrow-block {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
body.review-session.review-narrow-desktop .review-session-main {
  display: none !important;
}
body.review-session .review-mobile-gallery-ui,
body.review-session .review-mobile-swipe-strip {
  display: none;
}

@media (max-width: 768px), ((max-width: 1024px) and (hover: none) and (pointer: coarse)), ((max-height: 500px) and (max-width: 940px) and (pointer: coarse)) {
  html:has(body.review-session) {
    height: 100dvh !important;
    max-height: 100dvh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
  }

  body.review-session {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
  }
  body.review-session #review-session-panel,
  body.review-session #review-mobile-swipe-strip {
    touch-action: pan-x !important;
  }

  body.review-session #review-portfolio-viewer {
    touch-action: auto !important;
  }
  body.review-session .review-portfolio-swiper {
    touch-action: pan-x !important;
  }
  body.review-session #review-viewer-message,
  body.review-session #review-portfolio-viewer .review-panel-message,
  body.review-session #review-viewer-fallback,
  body.review-session #review-portfolio-viewer .review-panel-link-card,
  body.review-session #review-portfolio-viewer .review-panel-embed,
  body.review-session .review-session-sidebar,
  body.review-session #review-portfolio-list,
  body.review-session .review-phone-record-notice-scroll {
    touch-action: pan-y !important;
  }
  body.review-session button,
  body.review-session .review-mobile-edge,
  body.review-session .review-mobile-record,
  body.review-session .review-mobile-decline,
  body.review-session a[href],
  body.review-session .review-session-btn {
    touch-action: manipulation !important;
  }
  body.review-session:not(.review-narrow-desktop) .review-session-narrow-block {
    display: none !important;
  }
  body.review-session .layout {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }
  body.review-session .layout .main {
    min-height: 0 !important;
    flex: 1 1 0% !important;
    max-height: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }
  html:has(body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard)) {
    height: 100dvh !important;
    max-height: 100dvh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
  }

  body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
  }
  body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) #review-submit-page button,
  body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) #review-submit-page a[href],
  body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) #review-submit-page .btn {
    touch-action: manipulation !important;
  }
  body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) #review-submit-progress {
    touch-action: pan-x !important;
  }
  body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) .layout {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }
  body.review-submit:not(.review-submit--dashboard):not(.review-submit-dashboard) .layout .main {
    min-height: 0 !important;
    flex: 1 1 0% !important;
    max-height: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }
  body.review-session .review-session-page {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100dvh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  body.review-session .review-session-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
  }
  body.review-session .review-session-header {
    display: none !important;
  }
  body.review-session .review-session-layout {
    grid-template-columns: 1fr;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  body.review-session .review-session-sidebar {
    display: none !important;
  }
  body.review-session .review-session-panel {

    --review-mobile-dock-reserve: calc(5.85rem + env(safe-area-inset-bottom, 0px));
    flex: 1 1 0% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
    padding-bottom: var(--review-mobile-dock-reserve) !important;
    box-sizing: border-box !important;
  }
  body.review-session #review-portfolio-viewer {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    touch-action: auto;
    overscroll-behavior: none;
  }
  body.review-session .review-panel-content {
    min-height: 0 !important;
    overflow: hidden !important;

    transition: opacity 0.22s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  body.review-session .review-panel-content.review-slide-swiping {
    will-change: transform;
  }

  body.review-session #review-portfolio-viewer #review-viewer-img,
  body.review-session #review-portfolio-viewer #review-viewer-iframe {
    box-sizing: border-box !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  body.review-session .review-panel-content.review-slide-flash,
  body.review-session .review-slide-sheet.review-slide-flash {
    animation: reviewSlideFlash 0.35s ease;
  }

  body.review-session .review-portfolio-swiper {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  body.review-session .review-portfolio-swiper .swiper-wrapper {
    height: 100%;
  }
  body.review-session .review-portfolio-swiper .swiper-slide {
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  body.review-session .review-portfolio-swiper .review-slide-sheet.review-panel-content {
    transition: none;

    padding: max(0.35rem, env(safe-area-inset-top, 0px)) max(0.5rem, env(safe-area-inset-right, 0px)) 0.35rem max(0.5rem, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
  }
  @keyframes reviewSlideFlash {
    0% { opacity: 0.72; }
    100% { opacity: 1; }
  }

  body.review-session .review-mobile-gallery-ui {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    bottom: var(--review-mobile-dock-reserve, calc(5.85rem + env(safe-area-inset-bottom, 0px)));
    z-index: 18;
    pointer-events: none;
  }
  body.review-session .review-mobile-dashboard-link {
    position: absolute;
    top: max(0.5rem, env(safe-area-inset-top, 0px));
    left: max(0.5rem, env(safe-area-inset-left, 0px));
    z-index: 23;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    padding: 0.35rem 0.6rem;
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  body.review-session .review-mobile-dashboard-link:active {
    opacity: 0.7;
  }
  body.review-session .review-mobile-slide-badge {
    position: absolute;
    top: max(0.5rem, env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 22;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    max-width: min(calc(100vw - 1.5rem), 22rem);
    padding: 0.35rem 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.38);
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.02em;
  }
  body.review-session .review-mobile-edge {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 21;
    width: 3.25rem;
    height: 3.25rem;
    min-width: 3.25rem;
    min-height: 3.25rem;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(12, 12, 16, 0.88);
    color: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }
  body.review-session .review-mobile-edge--prev {
    left: max(0.55rem, env(safe-area-inset-left, 0px));
  }
  body.review-session .review-mobile-edge--next {
    right: max(0.55rem, env(safe-area-inset-right, 0px));
    left: auto;
  }
  body.review-session .review-mobile-edge-svg {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
    margin: 0;
    color: #fff;
  }
  body.review-session .review-mobile-edge:active {
    transform: translateY(-50%) scale(0.94);
    background: rgba(8, 8, 12, 0.95);
  }
  body.review-session .review-mobile-edge:focus {
    outline: none;
  }
  body.review-session .review-mobile-edge:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.45);
    outline-offset: 3px;
  }
  body.review-session .review-slide-sheet .review-panel-message {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  body.review-session .review-mobile-swipe-strip {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(42%, 11rem);
    min-height: 6rem;
    z-index: 19;
    pointer-events: none;
    touch-action: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
    -webkit-tap-highlight-color: transparent;
  }
  body.review-session .review-session-mobile-bar {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 50000 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    border: none !important;
    background: rgba(22, 22, 28, 0.82) !important;
    backdrop-filter: saturate(1.2) blur(24px);
    -webkit-backdrop-filter: saturate(1.2) blur(24px);
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.2), 0 -16px 48px rgba(0, 0, 0, 0.35);
  }
  body.review-session .review-mobile-dock {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem 0.7rem;
    padding-bottom: max(0.7rem, env(safe-area-inset-bottom, 0px));
    min-height: calc(3.35rem + env(safe-area-inset-bottom, 0px));
    position: relative;
  }
  body.review-session .review-mobile-dock-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    flex: none !important;
  }
  body.review-session .review-mobile-record {
    flex: 1 1 auto;
    max-width: 52%;
    min-height: 3.125rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.95rem;
    font-weight: 650;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--destructive-foreground) !important;
    -webkit-text-fill-color: var(--destructive-foreground);
    background: var(--destructive) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }
  body.review-session .review-mobile-record:disabled {
    opacity: 0.65;
  }
  body.review-session .review-mobile-record.is-recording {
    background: var(--destructive) !important;
    animation: review-mobile-record-pulse 1.4s ease-in-out infinite;
  }
  @keyframes review-mobile-record-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
  }
  body.review-session .review-mobile-decline {
    flex: 0 0 auto;
    min-width: 5.5rem;
    min-height: 3.125rem;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    border-radius: 0.95rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-tap-highlight-color: transparent;
  }
  body.review-session .review-mobile-decline:active {
    opacity: 0.65;
  }

  body.review-session #review-viewer-message,
  body.review-session #review-portfolio-viewer .review-panel-message {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    text-align: center;
  }
  body.review-session #review-viewer-message .review-panel-message-inner,
  body.review-session #review-portfolio-viewer .review-panel-message .review-panel-message-inner {
    margin-top: auto;
    margin-bottom: auto;
    flex-shrink: 0;
    text-align: center;
  }
  body.review-session #review-viewer-fallback,
  body.review-session #review-portfolio-viewer .review-panel-link-card,
  body.review-session #review-portfolio-viewer .review-panel-embed {
    overscroll-behavior: contain;
  }
  body.review-session .review-phone-record-notice-scroll {
    overscroll-behavior: contain;
  }

  body.review-session #review-webcam-wrap:not([aria-hidden="true"]) {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: calc(5.85rem + env(safe-area-inset-bottom, 0px) + 1.15rem) !important;
    width: 6.75rem !important;
    height: 5.0625rem !important;
    z-index: 50010 !important;
    pointer-events: auto !important;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  body.review-session #review-webcam-wrap:not([aria-hidden="true"]) video {
    pointer-events: auto !important;
  }
}

body.review-session.review-session--force-phone-ui {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  min-height: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  touch-action: none !important;
}
body.review-session.review-session--force-phone-ui #review-session-panel,
body.review-session.review-session--force-phone-ui #review-mobile-swipe-strip {
  touch-action: pan-x !important;
}
body.review-session.review-session--force-phone-ui #review-portfolio-viewer {
  touch-action: auto !important;
}
body.review-session.review-session--force-phone-ui .review-portfolio-swiper {
  touch-action: pan-x !important;
}
body.review-session.review-session--force-phone-ui #review-viewer-message,
body.review-session.review-session--force-phone-ui #review-portfolio-viewer .review-panel-message,
body.review-session.review-session--force-phone-ui #review-viewer-fallback,
body.review-session.review-session--force-phone-ui #review-portfolio-viewer .review-panel-link-card,
body.review-session.review-session--force-phone-ui #review-portfolio-viewer .review-panel-embed,
body.review-session.review-session--force-phone-ui .review-session-sidebar,
body.review-session.review-session--force-phone-ui #review-portfolio-list,
body.review-session.review-session--force-phone-ui .review-phone-record-notice-scroll {
  touch-action: pan-y !important;
}
body.review-session.review-session--force-phone-ui button,
body.review-session.review-session--force-phone-ui .review-mobile-edge,
body.review-session.review-session--force-phone-ui .review-mobile-record,
body.review-session.review-session--force-phone-ui .review-mobile-decline,
body.review-session.review-session--force-phone-ui a[href],
body.review-session.review-session--force-phone-ui .review-session-btn {
  touch-action: manipulation !important;
}
html:has(body.review-session.review-session--force-phone-ui) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}
body.review-session.review-session--force-phone-ui .layout {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}
body.review-session.review-session--force-phone-ui .review-session-header {
  display: none !important;
}
body.review-session.review-session--force-phone-ui .review-session-sidebar {
  display: none !important;
}
body.review-session.review-session--force-phone-ui .review-session-page {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100dvh !important;
  max-height: 100vh !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}
body.review-session.review-session--force-phone-ui .review-session-main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  gap: 0 !important;
}
body.review-session.review-session--force-phone-ui .review-session-layout {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body.review-session.review-session--force-phone-ui .review-session-panel {
  --review-mobile-dock-reserve: calc(5.85rem + env(safe-area-inset-bottom, 0px));
  flex: 1 1 0% !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  position: relative !important;
  padding-bottom: var(--review-mobile-dock-reserve) !important;
}
body.review-session.review-session--force-phone-ui .review-mobile-gallery-ui,
body.review-session.review-session--force-phone-ui .review-mobile-swipe-strip {
  display: block !important;
}
body.review-session.review-session--force-phone-ui .review-mobile-gallery-ui {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--review-mobile-dock-reserve, calc(5.85rem + env(safe-area-inset-bottom, 0px))) !important;
  z-index: 18 !important;
  pointer-events: none !important;
}
body.review-session.review-session--force-phone-ui .review-mobile-edge {
  pointer-events: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3.25rem !important;
  height: 3.25rem !important;
  min-width: 3.25rem !important;
  min-height: 3.25rem !important;
  border-radius: 50% !important;
  background: rgba(12, 12, 16, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.review-session.review-session--force-phone-ui .review-mobile-edge--prev {
  left: max(0.55rem, env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
}
body.review-session.review-session--force-phone-ui .review-mobile-edge--next {
  right: max(0.55rem, env(safe-area-inset-right, 0px)) !important;
  left: auto !important;
}
body.review-session.review-session--force-phone-ui .review-mobile-edge:active {
  transform: translateY(-50%) scale(0.94) !important;
}
body.review-session.review-session--force-phone-ui .review-slide-sheet .review-panel-message {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}
body.review-session.review-session--force-phone-ui .review-mobile-swipe-strip {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: min(42%, 11rem) !important;
  min-height: 6rem !important;
  z-index: 19 !important;
  pointer-events: none !important;
}
body.review-session.review-session--force-phone-ui .review-session-mobile-bar {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 50000 !important;
  border-radius: 1.25rem 1.25rem 0 0 !important;
  background: rgba(22, 22, 28, 0.82) !important;
  backdrop-filter: saturate(1.2) blur(24px);
  -webkit-backdrop-filter: saturate(1.2) blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.2), 0 -16px 48px rgba(0, 0, 0, 0.35);
}
body.review-session.review-session--force-phone-ui .review-mobile-dock {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
}
body.review-session.review-session--force-phone-ui #review-portfolio-viewer {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  touch-action: pan-x !important;
  overscroll-behavior: none;
}
body.review-session.review-session--force-phone-ui .review-panel-content {
  overflow: hidden !important;
  transition: opacity 0.22s ease !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
body.review-session.review-session--force-phone-ui .review-portfolio-swiper .review-slide-sheet.review-panel-content {
  transition: none !important;
  padding: max(0.35rem, env(safe-area-inset-top, 0px)) max(0.5rem, env(safe-area-inset-right, 0px)) 0.35rem max(0.5rem, env(safe-area-inset-left, 0px)) !important;
  box-sizing: border-box !important;
}
body.review-session.review-session--force-phone-ui .review-panel-content.review-slide-swiping {
  will-change: transform;
}
body.review-session.review-session--force-phone-ui #review-portfolio-viewer #review-viewer-img,
body.review-session.review-session--force-phone-ui #review-portfolio-viewer #review-viewer-iframe {
  box-sizing: border-box !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
body.review-session.review-session--force-phone-ui #review-webcam-wrap:not([aria-hidden="true"]) {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: calc(5.85rem + env(safe-area-inset-bottom, 0px) + 1.15rem) !important;
  width: 6.75rem !important;
  height: 5.0625rem !important;
  z-index: 50010 !important;
  pointer-events: auto !important;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
body.review-session.review-session--force-phone-ui #review-webcam-wrap:not([aria-hidden="true"]) video {
  pointer-events: auto !important;
}
body.review-session .review-session-mobile-bar {
  display: none;
}

.review-launch-transition {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.review-launch-transition.is-visible {
  opacity: 1;
}
.review-launch-transition-inner {
  text-align: center;
}
.review-launch-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(113, 113, 122, 0.15);
  border-top-color: var(--primary);
  animation: reviewLaunchSpin 0.7s linear infinite;
  margin: 0 auto 0.75rem;
}
.review-launch-transition-text {
  font-size: 1rem;
  color: var(--foreground);
  margin: 0;
}
@keyframes reviewLaunchSpin {
  to { transform: rotate(360deg); }
}

.creator-watch-letterbox {
  background: var(--card);
}

#creator-watch-controls.creator-watch-controls {
  background: var(--card);
  color: var(--foreground);
  border-top: 1px solid var(--border);
  overflow: visible;
}
#creator-watch-controls .creator-watch-time {
  color: var(--muted-foreground);
}
#creator-watch-controls .creator-watch-ctrl-btn {
  color: var(--foreground);
}
#creator-watch-controls .creator-watch-ctrl-btn:hover {
  background: color-mix(in srgb, var(--muted) 70%, transparent);
}
#creator-watch-controls .creator-watch-ctrl-btn:focus,
#creator-watch-controls .creator-watch-ctrl-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
#creator-watch-controls .creator-watch-ctrl-btn--muted {
  color: var(--muted-foreground);
}
#creator-watch-controls .creator-watch-ctrl-btn[aria-pressed="true"] {
  color: var(--foreground);
  background: color-mix(in srgb, var(--muted) 55%, transparent);
}
#creator-watch-controls .creator-watch-volume {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#creator-watch-controls .creator-watch-volume-panel {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.25rem);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 6.25rem;
  padding: 0.7rem 0;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--foreground) 12%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.35rem);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}
/* Keep hover when moving from mute → panel */
#creator-watch-controls .creator-watch-volume-panel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.55rem;
}
/* Hover-only — focus-within kept the panel stuck open after click */
#creator-watch-controls .creator-watch-volume:hover .creator-watch-volume-panel,
#creator-watch-controls .creator-watch-volume.is-open .creator-watch-volume-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
#creator-watch-controls .creator-watch-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 0.875rem;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  accent-color: var(--primary);
}
#creator-watch-controls .creator-watch-volume-slider:focus,
#creator-watch-controls .creator-watch-volume-slider:focus-visible {
  outline: none;
  box-shadow: none;
}
#creator-watch-controls .creator-watch-volume-slider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  width: 0.25rem;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    to top,
    var(--primary) 0%,
    var(--primary) var(--volume, 100%),
    color-mix(in srgb, var(--muted-foreground) 28%, transparent) var(--volume, 100%),
    color-mix(in srgb, var(--muted-foreground) 28%, transparent) 100%
  );
}
#creator-watch-controls .creator-watch-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: -0.25rem;
  border-radius: 999px;
  border: none;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--card), 0 1px 3px color-mix(in srgb, var(--foreground) 18%, transparent);
  cursor: pointer;
}
#creator-watch-controls .creator-watch-volume-slider::-moz-range-track {
  width: 0.25rem;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted-foreground) 28%, transparent);
}
#creator-watch-controls .creator-watch-volume-slider::-moz-range-progress {
  width: 0.25rem;
  border: none;
  border-radius: 999px;
  background: var(--primary);
}
#creator-watch-controls .creator-watch-volume-slider::-moz-range-thumb {
  width: 0.75rem;
  height: 0.75rem;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--card), 0 1px 3px color-mix(in srgb, var(--foreground) 18%, transparent);
  cursor: pointer;
}
@media (hover: none) {
  #creator-watch-controls .creator-watch-volume-panel {
    display: none;
  }
}
#creator-watch-controls .creator-watch-progress::-webkit-slider-runnable-track {
  background: transparent;
}
#creator-watch-controls .creator-watch-progress::-webkit-slider-thumb {
  position: relative;
  z-index: 3;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--card), 0 1px 3px color-mix(in srgb, var(--foreground) 18%, transparent);
}
#creator-watch-controls .creator-watch-progress::-moz-range-track {
  background: transparent;
}
#creator-watch-controls .creator-watch-progress::-moz-range-progress {
  background: transparent;
}
#creator-watch-controls .creator-watch-progress::-moz-range-thumb {
  position: relative;
  z-index: 3;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--card), 0 1px 3px color-mix(in srgb, var(--foreground) 18%, transparent);
}

#creator-watch-player-card:fullscreen .creator-watch-video-wrap,
#creator-watch-player-card:-webkit-full-screen .creator-watch-video-wrap {
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  aspect-ratio: auto !important;
}
#review-submit-player-card:fullscreen .review-submit-video-wrap,
#review-submit-player-card:-webkit-full-screen .review-submit-video-wrap {
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  aspect-ratio: auto !important;
}

#review-submit-player-card .creator-watch-play-btn.is-hidden,
#creator-watch-player-card .creator-watch-play-btn.is-hidden {
  display: none;
}

.creator-watch-video-wrap {
  position: relative;
  isolation: isolate;
  min-height: 0;
  container-type: size;
  background: #08080a;
}

.creator-watch-video-cell {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-width: 0;
  min-height: 0;
}

.creator-watch-video-cell video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mentor avatar still — live-event style circle over a dark field. */
.creator-watch-still {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  background: #08080a;
}
.creator-watch-still-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(84cqh, 54cqw);
  height: min(84cqh, 54cqw);
  max-width: 20rem;
  max-height: 20rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--muted);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--border) 70%, transparent),
    0 12px 40px rgba(0, 0, 0, 0.45);
  font-size: clamp(1.5rem, 9cqh, 3rem);
  font-weight: 600;
  color: var(--muted-foreground);
}
.creator-watch-still-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
@media (min-width: 768px) {
  .creator-watch-still-avatar {
    width: min(80cqh, 48cqw);
    height: min(80cqh, 48cqw);
  }
}
.creator-watch-video-wrap:has(#creator-watch-play-stack[hidden]) .creator-watch-still {
  display: none;
}
.review-submit-video-wrap {
  container-type: size;
  background: #08080a;
  isolation: isolate;
}
.review-submit-video-wrap .creator-watch-still {
  z-index: 1;
}
.review-submit-video-wrap > .creator-watch-play-btn {
  z-index: 3;
}
.review-submit-video-wrap:has(#review-submit-play-btn.is-hidden) .creator-watch-still {
  display: none;
}

/* Native captions overlay on the custom player. */
.creator-watch-video-cell video::cue {
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 1rem;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
@media (max-width: 639px) {
  .creator-watch-video-cell video::cue {
    font-size: 0.875rem;
  }
}

.creator-watch-video-wrap.creator-watch-big-play-visible #creator-watch-video {
  pointer-events: none;
}

.creator-watch-play-stack {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translateZ(0);
}

.creator-watch-play-stack .creator-watch-play-btn {
  touch-action: manipulation;
  pointer-events: auto;
}

#creator-watch-play-stack[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

@media (pointer: coarse) and (hover: none) {
  #creator-watch-fullscreen,
  #review-submit-fullscreen {
    display: none !important;
  }
}

.review-submit-video-wrap > .creator-watch-play-btn {
  z-index: 20;
  transform: translateZ(1px);
  touch-action: manipulation;
  pointer-events: auto;
  cursor: pointer;
}

video:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  object-fit: contain;
  background: #000;
}
.review-submit-progress::-webkit-slider-runnable-track,
.creator-watch-progress::-webkit-slider-runnable-track {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--primary) 0%, var(--primary) var(--progress, 0%), rgba(255,255,255,0.2) var(--progress, 0%), rgba(255,255,255,0.2) 100%);
}
.review-submit-progress::-webkit-slider-thumb,
.creator-watch-progress::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary-foreground);
  cursor: pointer;
  margin-top: -5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.review-submit-progress::-moz-range-track,
.creator-watch-progress::-moz-range-track {
  height: 100%;
  border-radius: 9999px;
  background: rgba(255,255,255,0.2);
}
.review-submit-progress::-moz-range-thumb,
.creator-watch-progress::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary-foreground);
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.review-submit-progress::-moz-range-progress,
.creator-watch-progress::-moz-range-progress {
  height: 100%;
  border-radius: 9999px;
  background: var(--primary);
}

.mentors-filter-select {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.625rem 2.25rem 0.625rem 0.75rem;
  line-height: 1.25;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1rem 1rem;
}
.mentors-filter-select::-ms-expand {
  display: none;
}

.mentors-chip-strip {
  align-items: center;
}
.mentors-chip-strip--scroll {
  min-width: 0;
}
@media (max-width: 767px) {

  .mentors-chip-strip.mentors-chip-strip--scroll {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: visible;
  }
}
.mentors-chip-strip-scroll {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-padding-inline: var(--folio-page-gutter);
  padding: 0.125rem 0 0.625rem;
}
.mentors-chip-strip-scroll::-webkit-scrollbar {
  display: none;
}
.mentors-chip-strip-scroll::before,
.mentors-chip-strip-scroll::after {
  content: "";
  flex: 0 0 var(--folio-page-gutter);
  width: var(--folio-page-gutter);
  pointer-events: none;
}
.mentors-chip-strip-scroll .mentors-chip {
  flex-shrink: 0;
}
.mentors-chip--skill {
  color: var(--primary);
  background: var(--card);
}
.mentors-chip--skill:hover {
  background: color-mix(in srgb, var(--card) 88%, var(--muted));
}
.mentors-chip--skill.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground, #fff);
}
.mentors-chip--free.is-active {
  background: color-mix(in srgb, var(--primary) 88%, #000);
  border-color: transparent;
  color: var(--primary-foreground, #fff);
}
.mentors-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.95rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--muted) 70%, transparent);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.mentors-chip:hover {
  background: color-mix(in srgb, var(--muted) 88%, transparent);
}
.mentors-chip:active {
  transform: translateY(1px);
}
.mentors-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.mentors-chip--free {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground, #fff);
}
.mentors-chip--free:hover {
  background: color-mix(in srgb, var(--primary) 88%, #000);
  border-color: transparent;
}
.mentors-chip--muted {
  background: transparent;
}

.mentors-discovery {
  position: relative;
  margin-bottom: 2.5rem;
}
.mentors-rail {
  margin-bottom: 2.25rem;
}
.mentors-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
}
.mentors-rail-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin: 0;
}
.mentors-rail-seeall {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted-foreground);
  text-decoration: none;
}
.mentors-rail-seeall:hover {
  color: var(--foreground);
}
.mentors-rail-scroll-wrap {
  position: relative;

  margin: 0.75rem 0 0;
}
.mentors-rail-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.15rem 0 0.5rem;
}
.mentors-rail-scroll::-webkit-scrollbar { display: none; }
.mentors-rail-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 84px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.mentors-rail-fade--right {
  right: 0;
  background: linear-gradient(to left, var(--background) 0%, color-mix(in srgb, var(--background) 0%, transparent) 100%);
}
.mentors-rail-fade--left {
  left: 0;
  background: linear-gradient(to right, var(--background) 0%, color-mix(in srgb, var(--background) 0%, transparent) 100%);
}
.mentors-rail-scroll-wrap.has-right-fade .mentors-rail-fade--right {
  opacity: 1;
}
.mentors-rail-scroll-wrap.has-left-fade .mentors-rail-fade--left {
  opacity: 1;
}
.mentors-rail-row {
  display: flex;
  gap: 0.875rem;
  padding: 0;
}
.mentors-poster-card {
  width: 208px;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}
.mentors-poster-poster {
  position: relative;
  width: 100%;
  height: 312px;
  border-radius: 0.75rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--muted) 70%, transparent);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}
.mentors-poster-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mentors-poster-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,0.75) 100%);
}
.mentors-poster-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.22rem 0.5rem;
  border-radius: 9999px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mentors-poster-meta {
  padding-top: 0.6rem;
}
.mentors-poster-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mentors-poster-role {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mentors-poster-bio {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--muted-foreground) 92%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mentors-skel-block {
  background: linear-gradient(90deg, var(--muted) 25%, color-mix(in oklch, var(--muted) 80%, white) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

html.mentors-availability-reveal-pending .mentors-grid .mentors-card .mentors-card-inner {
  opacity: 0 !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html.mentors-availability-reveal-pending .mentors-grid .mentors-card .mentors-card-inner {
    opacity: 1 !important;
  }
}

.mentors-grid {
  isolation: isolate;
}

.mentors-grid .mentors-card {
  --mentors-enter-delay: 0ms;
}
.mentors-grid .mentors-card .mentors-card-inner {
  opacity: 1;

  transition:
    opacity 0.45s cubic-bezier(0.33, 1, 0.32, 1) var(--mentors-enter-delay, 0ms),
    transform 0.25s ease,
    box-shadow 0.3s ease !important;
}
.mentors-grid .mentors-card--filtered-out .mentors-card-inner {
  opacity: 0;
}
.mentors-grid .mentors-card--reveal-from-nav .mentors-card-inner {
  transition: none !important;
}
.mentors-grid .mentors-card--filtered-out {
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .mentors-grid .mentors-card .mentors-card-inner {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

.mentor-card-badge {
  bottom: 0.75rem;
  right: 0.75rem;
  /* Default = recently reviewed — same purple gradient as iOS. */
  background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
  color: white;
  cursor: help;
  transition: transform 0.2s ease;
}
.mentor-card-badge--featured {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}
.mentor-card-badge--top {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}
.mentor-card-badge--new {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
.mentor-card-badge:hover {
  transform: scale(1.15);
}

.mentors-card-poster {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent);
  background: linear-gradient(90deg, var(--muted) 25%, color-mix(in oklch, var(--muted) 80%, white) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  transition: transform 0.25s ease;
}
/* Portrait posters — iOS MentorPosterCard (width × 1.5). */
.mentors-card-poster--tall {
  aspect-ratio: 2 / 3;
}
.mentors-card--tall .mentors-card-name {
  font-size: 0.9375rem;
  line-height: 1.25;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mentors-card--tall .mentors-card-role {
  font-size: 0.8125rem;
}

@keyframes fav-heart-bounce {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(0.9); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.fav-heart-bounce {
  animation: fav-heart-bounce 0.4s ease;
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.layout > .main {
  animation: page-fade-in 0.3s ease-out;
}
body.dashboard-messages-page .layout > .main {
  animation: none;
}
body.review-session .layout > .main,
body.review-submit-dashboard .layout > .main {
  animation: none;
}

.creator-watch-star {
  transition: transform 0.15s ease;
}
.creator-watch-star:not(.pointer-events-none):hover {
  transform: scale(1.2);
}
.creator-watch-star:not(.pointer-events-none):active {
  transform: scale(0.95);
}


.review-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 768px) {
  .review-library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .review-library-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.review-library-section > h2 {
  margin-bottom: 0.75rem;
}
.review-library-section + .review-library-section {
  margin-top: 0;
}
.review-library-tile-link {
  display: block;
  color: inherit;
}
.review-library-tile-link--status {
  cursor: default;
  pointer-events: none;
}
.review-library-tile--status .review-library-poster-img {
  opacity: 0.9;
}
.review-library-poster {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(145deg, #17171a 0%, #0a0a0c 100%);
  isolation: isolate;
}
.review-library-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.review-library-poster--watched .review-library-poster-img {
  opacity: 0.72;
}
.group\/tile:hover .review-library-poster-img {
  transform: scale(1.03);
}
.review-library-poster-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--avatar-placeholder-foreground);
  background: var(--avatar-placeholder-gradient);
}
.review-library-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.review-library-thankyou {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}
.review-library-new-dot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.review-library-notes-dot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}
/* iOS kind chip on mixed Review / Answer rails */
.review-library-kind-badge {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 1;
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  pointer-events: none;
  white-space: nowrap;
}
.review-library-meta {
  margin-top: 0.5rem;
  min-height: 2.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.review-library-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-library-name--watched {

  opacity: 0.78;
}
.review-library-role {
  display: block;
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


:root {
  --folio-page-gutter: 1rem;
}
@media (min-width: 640px) {
  :root {
    --folio-page-gutter: 1.5rem;
  }
}
@media (max-width: 767px) {
  body.dashboard-page {
    --folio-page-gutter: var(--dashboard-phone-gutter, 1.25rem);
  }
}


.dashboard-home-card-row {
  --card-row-gutter: var(--folio-page-gutter);
}
@media (max-width: 767px) {
  .dashboard-home-card-row {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}
@media (min-width: 768px) {
  .dashboard-home-card-row {
    width: auto;
    max-width: none;
    margin-inline: 0;
  }
}
.dashboard-home-card-row__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--card-row-gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.25rem 0 0.5rem;
}
.dashboard-home-card-row__track::-webkit-scrollbar {
  display: none;
}
.dashboard-home-card-row__track::before,
.dashboard-home-card-row__track::after {
  content: "";
  flex: 0 0 var(--card-row-gutter);
  width: var(--card-row-gutter);
  pointer-events: none;
}
@media (min-width: 768px) {
  .dashboard-home-card-row__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    overflow: visible;
    scroll-snap-type: none;
    scroll-padding-inline: 0;
    padding: 0;
  }
  .dashboard-home-card-row__track::before,
  .dashboard-home-card-row__track::after {
    content: none;
    display: none;
  }
}
.dashboard-home-card-row__item {

  flex: 0 0 8.75rem;
  width: 8.75rem;
  scroll-snap-align: start;
  min-width: 0;
}
@media (min-width: 768px) {
  .dashboard-home-card-row__item {
    flex: none;
    width: auto;
  }
}

/* Keep a single-row horizontal scroll on desktop (e.g. favourites updates)
   instead of wrapping into a 4-column × 2-row grid. ~4 cards visible. */
@media (min-width: 768px) {
  .dashboard-home-card-row--rail .dashboard-home-card-row__track {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    padding: 0.25rem 0 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dashboard-home-card-row--rail .dashboard-home-card-row__track::-webkit-scrollbar {
    display: none;
  }
  .dashboard-home-card-row--rail .dashboard-home-card-row__track::before,
  .dashboard-home-card-row--rail .dashboard-home-card-row__track::after {
    content: none;
    display: none;
  }
  .dashboard-home-card-row--rail .dashboard-home-card-row__item {
    flex: 0 0 calc((100% - 3rem) / 4);
    width: calc((100% - 3rem) / 4);
    max-width: calc((100% - 3rem) / 4);
  }
}

/* Favourites page people grid */
.favourites-people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {
  .favourites-people-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .favourites-people-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


.creator-watch-player-card {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--card-shadow);
}
.creator-watch-player-card .creator-watch-card-bleed {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.creator-watch-layout {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  min-width: 0;
}

.creator-watch-stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.creator-watch-stage-media {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.creator-watch-stage-below {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  --watch-stage-pad-x: 1.1rem;
}
.creator-watch-player-comment {
  border-top: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
  padding: 0.85rem var(--watch-stage-pad-x, 1.1rem) 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: transparent;
}
.creator-watch-player-comment .watch-thankyou-comment {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
.creator-watch-player-comment .watch-thankyou-composer.dm-compose {
  padding: 0;
}
.creator-watch-player-comment .watch-thankyou-comment-read {
  padding: 0;
}
.creator-watch-player-comment .live-event-question-compose-row {
  gap: 0.85rem;
}
.creator-watch-player-comment .live-event-question-compose-avatar {
  width: 2.75rem;
  height: 2.75rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.creator-watch-player-comment .live-event-question-compose-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.creator-watch-player-comment .live-event-question-compose-avatar-fallback {
  width: 100%;
  height: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
}
.creator-watch-player-comment .watch-thankyou-composer-avatar {
  width: 2.75rem;
  height: 2.75rem;
}
/* Long note expand/collapse (used inside watch-context cards). */
.watch-note-prose {
  white-space: normal;
}
.watch-note-prose .watch-note-paragraph {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.watch-note-prose .watch-note-paragraph + .watch-note-paragraph {
  margin-top: 0.55rem;
}
.watch-note-list {
  margin: 0.15rem 0 0;
  padding: 0 0 0 1.1rem;
  list-style: disc;
}
.watch-note-list--plain {
  list-style: none;
  padding-left: 0;
}
.watch-note-list--plain li {
  position: relative;
  padding-left: 0.85rem;
}
.watch-note-list--plain li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 999px;
  background: var(--muted-foreground);
  opacity: 0.55;
  transform: translateY(-50%);
}
.watch-note-list li {
  margin: 0;
  padding: 0.15rem 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--foreground);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.watch-note-list li + li {
  margin-top: 0.1rem;
}
.watch-note-card-clamp .watch-note-list {
  margin-top: 0;
}
.watch-note-prose .watch-note-list + .watch-note-paragraph,
.watch-note-prose .watch-note-paragraph + .watch-note-list {
  margin-top: 0.65rem;
}
.watch-note-card-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  min-width: 0;
}
.watch-note-card-clamp .watch-note-paragraph {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--foreground);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.watch-note-card-clamp .watch-note-paragraph + .watch-note-paragraph {
  margin-top: 0.55rem;
}
.watch-note-card-expand {
  min-width: 0;
}
.watch-note-card-expand > summary {
  list-style: none;
  cursor: pointer;
}
.watch-note-card-expand > summary::-webkit-details-marker {
  display: none;
}
.watch-note-card-more,
.watch-note-card-less {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}
.watch-note-card-less {
  display: none;
}
.watch-note-card-expand[open] {
  display: flex;
  flex-direction: column;
}
.watch-note-card-expand[open] > summary {
  order: 2;
}
.watch-note-card-expand[open] > .watch-context-block-body,
.watch-note-card-expand[open] > .watch-note-prose {
  order: 1;
}
.watch-note-card-expand[open] > summary .watch-note-card-clamp,
.watch-note-card-expand[open] > summary .watch-note-card-more {
  display: none;
}
.watch-note-card-expand[open] > summary .watch-note-card-less {
  display: inline-block;
  margin-top: 0.45rem;
  margin-bottom: 0;
}
.watch-note-card-expand.is-fully-visible > summary {
  cursor: default;
  pointer-events: none;
}
.watch-note-card-expand.is-fully-visible > summary .watch-note-card-more,
.watch-note-card-expand.is-fully-visible > summary .watch-note-card-less {
  display: none;
}
.watch-note-card-expand.is-fully-visible:not([open]) > summary .watch-note-card-clamp {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
.watch-note-card-expand.is-fully-visible[open] > summary {
  display: none;
}
.creator-watch-meta-line {
  display: none;
}
.creator-watch-identity {
  padding: 0.95rem var(--watch-stage-pad-x, 1.1rem) 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
  background: transparent;
}
.creator-watch-identity.creator-watch-extras-panel {
  border-top: 0;
}
.creator-watch-identity .creator-watch-meta-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}
.creator-watch-identity .creator-watch-meta-link {
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 auto;
  min-width: 0;
}
.creator-watch-identity .creator-watch-meta-avatar {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
.creator-watch-identity .creator-watch-meta-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.creator-watch-identity .creator-watch-meta-text {
  padding-top: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}
.creator-watch-identity .creator-watch-meta-name {
  font-size: 1rem;
}
.creator-watch-identity .creator-watch-meta-sub {
  font-size: 0.8125rem;
}
.creator-watch-identity a.creator-watch-meta-link:hover .creator-watch-meta-name {
  text-decoration: underline;
}
.creator-watch-identity-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.05rem;
  height: 2rem;
}
.creator-watch-identity-rating {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  height: 2rem;
}
.creator-watch-identity-rating .creator-watch-feedback-rating-stars {
  display: flex;
  align-items: center;
  height: 2rem;
  gap: 0;
}
.creator-watch-identity-rating .creator-watch-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 2rem;
  padding: 0;
}
.creator-watch-identity-rating .creator-watch-star svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.creator-watch-identity .creator-watch-report-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  color: var(--muted-foreground);
}
.creator-watch-identity .creator-watch-report-btn:hover,
.creator-watch-identity .creator-watch-report-btn[aria-expanded="true"] {
  color: var(--foreground);
}
.creator-watch-identity .creator-watch-report-btn svg {
  display: block;
}
@media (max-width: 479px) {
  .creator-watch-identity-rating .creator-watch-star {
    width: 1.55rem;
    height: 2rem;
    padding: 0;
  }
}
.creator-watch-meta {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.creator-watch-extras {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
}
.creator-watch-extras-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
  box-shadow: var(--card-inset-shadow, none);
  overflow: hidden;
}
.creator-watch-extras-label {
  margin: 0;
  padding: 0.85rem 1.15rem 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  line-height: 1.2;
}
.creator-watch-feedback {
  padding: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.creator-watch-feedback-rating {
  text-align: center;
  margin: 0;
  padding: 0.15rem 1rem 0.35rem;
}
.creator-watch-feedback-rating-head {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 0 0.2rem;
}
.creator-watch-feedback-rating-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.3;
}
.creator-watch-feedback-rating-prompt {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  line-height: 1.35;
}
.creator-watch-feedback-rating-stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}
.creator-watch-feedback .watch-thankyou-comment {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
.creator-watch-feedback .watch-thankyou-composer.dm-compose {
  padding: 0.65rem 1.15rem 0;
}
.creator-watch-feedback .watch-thankyou-comment-read {
  padding: 0.65rem 1.15rem 0.15rem;
}
.creator-watch-feedback .watch-thankyou-comment + .creator-watch-feedback-rating,
.creator-watch-feedback-rating + .watch-thankyou-comment {
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  padding-top: 0.85rem;
  margin-top: 0.15rem;
}
.creator-watch-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
}
.creator-watch-detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.creator-watch-detail-chip:hover {
  background: var(--muted);
}
.creator-watch-detail-chip:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.creator-watch-detail-chip--unread .creator-watch-detail-chip-label::after {
  content: '';
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  background: #ef4444;
  vertical-align: middle;
  transform: translateY(-1px);
}
.creator-watch-lightbox-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: -0.25rem -0.25rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.creator-watch-lightbox-close:hover {
  background: var(--muted);
  color: var(--foreground);
}
.creator-watch-lightbox-close:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.watch-lightbox-panel {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: min(80vh, 36rem);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-modal, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
  padding: 1.25rem;
}
@media (min-width: 640px) {
  .watch-lightbox-panel {
    padding: 1.5rem;
  }
}
.watch-lightbox-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}
.watch-lightbox-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.watch-thankyou-comment {
  min-width: 0;
}
.watch-thankyou-comment--unread .watch-thankyou-comment-read-name::after {
  content: '';
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: #ef4444;
  vertical-align: middle;
  transform: translateY(-1px);
}
.watch-thankyou-composer.dm-compose {
  margin: 0;
  padding: 0.875rem 1rem;
  border-top: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  --dm-text: var(--foreground);
  --dm-muted: var(--muted-foreground);
  --dm-border: var(--border);
  --dm-panel: var(--card);
  --dm-surface: var(--background);
  --dm-mine: var(--primary);
  --dm-mine-hover: color-mix(in srgb, var(--primary) 88%, #000);
}
/* Keep thank-you flush with identity padding inside the player card. */
.creator-watch-player-comment .watch-thankyou-composer.dm-compose,
.creator-watch-player-comment .watch-thankyou-comment-read {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.watch-thankyou-compose-inner {
  flex: 1;
  min-width: 0;
  align-items: flex-end;
}
.watch-thankyou-composer .watch-thankyou-composer-input {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0.25rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--dm-text);
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  min-height: 1.5rem;
  max-height: 5.5rem;
  overflow-y: auto;
}
.watch-thankyou-composer .watch-thankyou-composer-input::placeholder {
  color: var(--dm-muted);
}
.watch-thankyou-composer .watch-thankyou-composer-input:focus {
  border-bottom-color: transparent;
}
.watch-thankyou-composer-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}
.watch-thankyou-composer-avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.watch-thankyou-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  line-height: 0;
}
/* Same corner as mentor-profile badges, nudged out so it sits on the rim of a small avatar. */
.watch-thankyou-avatar-wrap .mentor-profile-avatar-badge {
  transform: translate(28%, 28%);
}
.watch-thankyou-heart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--background);
  color: var(--destructive);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--foreground) 16%, transparent);
  outline: 2px solid var(--card);
}
.watch-thankyou-heart-badge svg {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
}
.watch-thankyou-comment-read.is-entering {
  animation: watch-thankyou-enter 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.watch-thankyou-comment-read.is-entering .watch-thankyou-heart-badge {
  animation: watch-thankyou-heart-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
@keyframes watch-thankyou-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes watch-thankyou-heart-pop {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }
  55% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .watch-thankyou-comment-read.is-entering,
  .watch-thankyou-comment-read.is-entering .watch-thankyou-heart-badge {
    animation: none;
  }
}
.watch-thankyou-composer-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.watch-thankyou-composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  min-height: 2.25rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.15rem);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.watch-thankyou-composer.is-active .watch-thankyou-composer-actions,
.watch-thankyou-composer:focus-within .watch-thankyou-composer-actions {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.watch-thankyou-composer-count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.watch-thankyou-comment-read {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem 1.125rem;
}
.watch-thankyou-comment-read-body {
  min-width: 0;
  flex: 1;
}
.watch-thankyou-comment-read-name {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
}
.watch-thankyou-comment-read-text {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--foreground);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.watch-thankyou-comment-read-text br {
  content: '';
  display: block;
  margin-top: 0.35em;
}

.creator-watch-meta-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  width: 100%;
}
.creator-watch-meta-link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
.creator-watch-meta-avatar {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.creator-watch-meta-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.125rem;
}
.creator-watch-meta-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0;
  line-height: 1.35;
}
.creator-watch-meta-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
  line-height: 1.35;
}
.creator-watch-meta-sub {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin: 0;
  line-height: 1.4;
}
.creator-watch-meta-chevron {
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  color: color-mix(in srgb, var(--muted-foreground) 45%, transparent);
}


.creator-watch-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .creator-watch-page {
    gap: 1.25rem;
  }
}
.creator-watch-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.15rem;
  padding: 0;
  box-sizing: border-box;
}
.creator-watch-footer-note {
  margin: 0;
  max-width: 36rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  text-align: center;
}
.creator-watch-footer-note strong {
  color: var(--foreground);
  font-weight: 500;
}
.creator-watch-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}
.creator-watch-footer-actions .btn {
  width: auto !important;
  flex: 0 0 auto;
  min-width: 0;
}


.watch-context-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.watch-context-card {
  min-width: 0;
}
.watch-context-block-title {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
}
.watch-context-note-text > .watch-context-block-title {
  margin: 0 0 0.2rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  line-height: 1.35;
}
.watch-context-note-text > .watch-context-note-name {
  margin-bottom: 0.35rem;
}
.watch-context-note-text > .watch-context-block-title + .watch-context-block-body,
.watch-context-note-text > .watch-context-block-title + .watch-note-card-expand,
.watch-context-note-text > .watch-context-note-name + .watch-context-block-body,
.watch-context-note-text > .watch-context-note-name + .watch-note-card-expand {
  margin-top: 0.15rem;
}
.watch-context-block--unread .watch-context-block-title::after {
  content: '';
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: #ef4444;
  vertical-align: middle;
  transform: translateY(-1px);
}
.watch-context-block-content {
  min-width: 0;
}
.watch-context-block-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--foreground);
  white-space: pre-wrap;
}
.watch-context-block-lead {
  margin: 0 0 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.watch-context-form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
  min-width: 0;
}
.watch-context-note-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
a.watch-avatar-link {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 9999px;
}
a.watch-avatar-link:hover {
  opacity: 0.85;
}
a.watch-avatar-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.watch-context-note-avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.watch-context-note-text {
  min-width: 0;
  flex: 1;
}
.watch-context-note-name {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
}
.watch-context-file {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.875rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 28%, transparent);
}
.watch-context-file--spaced {
  margin-top: 0.875rem;
}
@media (min-width: 640px) {
  .watch-context-file {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.watch-context-file-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.watch-context-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--muted-foreground);
  flex-shrink: 0;
}
.watch-context-file-name {
  margin: 0;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.watch-context-block-head--transcript {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.watch-context-block-head--transcript .watch-context-block-title {
  margin: 0;
}
.watch-context-block-hint {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.watch-context-card--transcript .watch-transcript-header {
  margin-bottom: 0.625rem;
}

/* Transcript starts collapsed — video first, open on demand. */
.watch-transcript-accordion {
  margin: 0;
}
.watch-transcript-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease;
}
@media (min-width: 640px) {
  .watch-transcript-summary {
    padding: 1.5rem 1.5rem;
  }
}
.watch-transcript-summary::-webkit-details-marker {
  display: none;
}
.watch-transcript-summary:hover {
  background: color-mix(in srgb, var(--muted) 35%, transparent);
}
.watch-transcript-summary-text {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}
.watch-transcript-summary-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
}
.watch-transcript-accordion-chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--muted-foreground);
  transition: transform 0.15s ease;
}
.watch-transcript-accordion[open] .watch-transcript-accordion-chevron {
  transform: rotate(180deg);
}
.watch-transcript-accordion-panel {
  padding: 0.375rem 1.25rem 1.25rem;
}
@media (min-width: 640px) {
  .watch-transcript-accordion-panel {
    padding: 0.5rem 1.5rem 1.5rem;
  }
}
.watch-transcript-accordion[open] .watch-transcript-summary {
  padding-bottom: 0.75rem;
}

.creator-watch-meta-link:hover .creator-watch-meta-name {
  text-decoration: underline;
}


.watch-detail-group {
  display: flex;
  flex-direction: column;
  border-top: 0;
  padding-bottom: 0.25rem;
}
.watch-detail-group .watch-detail-accordion {
  border-radius: 0;
  background: transparent;
}
.watch-detail-group .watch-detail-accordion + .watch-detail-accordion {
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.watch-detail-accordion summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.15rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease;
}
.watch-detail-group .watch-detail-accordion summary:hover {
  background: color-mix(in srgb, var(--muted) 28%, transparent);
}
.watch-detail-accordion summary::-webkit-details-marker {
  display: none;
}
.watch-detail-accordion-avatar {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: 0.1rem;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background: var(--muted);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.watch-detail-accordion-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.watch-detail-accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--muted);
  color: var(--muted-foreground);
}
.watch-detail-accordion-heading {
  min-width: 0;
  flex: 1;
}
.watch-detail-accordion-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin: 0;
  line-height: 1.35;
}
.watch-detail-accordion-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}
.watch-detail-accordion-kind {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.watch-detail-accordion-preview {
  display: block;
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.watch-detail-accordion[open] .watch-detail-accordion-preview {
  display: none;
}
.watch-detail-accordion-chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.35rem;
  color: var(--muted-foreground);
  transition: transform 0.2s ease;
}
.watch-detail-accordion[open] .watch-detail-accordion-chevron {
  transform: rotate(180deg);
}
.watch-detail-accordion-content {
  padding: 0 1.15rem 1.05rem 4.15rem;
}
.watch-detail-group .watch-detail-accordion-content {
  padding-top: 0;
  border-top: none;
}
.watch-detail-accordion-body {
  margin: 0;
  padding-top: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--foreground);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.watch-detail-accordion--unread .watch-detail-accordion-title::after {
  content: '';
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: #ef4444;
  vertical-align: middle;
  transform: translateY(-1px);
}

@media (min-width: 640px) {
  .creator-watch-card-bleed {
    border-radius: 0;
  }
}

@media (max-width: 639px) {
  .creator-watch-player-card .creator-watch-card-bleed {
    width: auto;
    position: static;
    left: auto;
    transform: none;
    border-radius: 0 !important;
  }
  .creator-watch-meta {
    padding: 1rem 1.125rem;
  }
  .watch-transcript-wrap:not(.watch-context-card--transcript) {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 !important;
  }
  .watch-transcript-wrap:not(.watch-context-card--transcript) .dashboard-surface {
    border-radius: 0 !important;
  }
}

.watch-transcript-pending {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-pending {
  padding: 1.25rem 1.5rem;
}
.watch-transcript-pending-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--foreground);
}
.watch-transcript-pending-copy {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.watch-transcript-search-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.watch-transcript-search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  pointer-events: none;
  color: var(--muted-foreground);
}
.watch-transcript-empty-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--muted-foreground);
  opacity: 0.6;
}
.watch-transcript-cue {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  border: 0;
  text-align: left;
  padding: 0.5rem 0.625rem;
  cursor: pointer;
  background: transparent;
}
.watch-transcript-text {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}


.watch-context-card--transcript.watch-transcript-wrap .watch-transcript-header {
  border-bottom: 0;
  background: transparent;
  padding: 0;
}
.watch-context-card--transcript .watch-transcript-search {
  width: 100%;
  min-height: 2.375rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--background);
  padding: 0.5rem 0.875rem 0.5rem 2.375rem;
  font-size: 0.875rem;
  color: var(--foreground);
}
.watch-context-card--transcript .watch-transcript-search:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ring) 65%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 18%, transparent);
  background: var(--background);
}
.watch-context-card--transcript .watch-transcript-list {
  scrollbar-color: color-mix(in srgb, var(--muted-foreground) 35%, transparent) transparent;
  background: color-mix(in srgb, var(--muted) 32%, transparent);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  max-height: 240px;
  padding: 0.25rem 0;
  list-style: none;
  margin: 0;
  overflow-y: auto;
}
.watch-context-card--transcript .watch-transcript-cue:not(.is-active):hover {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
}
.watch-context-card--transcript .watch-transcript-cue.is-active {
  background: color-mix(in srgb, var(--primary) 10%, var(--muted));
}
.watch-context-card--transcript .watch-transcript-cue.is-active .watch-transcript-time {
  background: color-mix(in srgb, var(--foreground) 20%, var(--muted));
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--foreground) 24%, transparent);
}
.watch-context-card--transcript .watch-transcript-cue.is-active .watch-transcript-text {
  color: var(--foreground);
}
.watch-context-card--transcript .watch-transcript-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 12%, var(--muted));
  border: 1px solid color-mix(in srgb, var(--foreground) 16%, transparent);
  font-size: 0.6875rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
  transition: background-color 0.35s ease, color 0.3s ease, border-color 0.3s ease;
  letter-spacing: 0.01em;
}
.watch-context-card--transcript .watch-transcript-empty-wrap {
  min-height: 120px;
  padding: 1rem;
}
.watch-context-card--transcript .watch-transcript-empty-wrap p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  scroll-behavior: smooth;
  padding: 0.625rem 0;
  background: rgba(0, 0, 0, 0.45);
  max-height: min(36vh, 280px);
  overflow-y: auto;
}
.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-list::-webkit-scrollbar { width: 8px; }
.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-list::-webkit-scrollbar-track { background: transparent; }
.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}
.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}
.watch-transcript-wrap .watch-transcript-item {
  padding: 0 0.625rem;
}
.watch-transcript-wrap .watch-transcript-cue {
  position: relative;
  border-radius: 0.75rem;
  transition: background-color 0.35s ease, color 0.3s ease, transform 0.25s ease;
}
.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-cue:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.035);
}
.watch-transcript-wrap .watch-transcript-cue:focus-visible {
  outline: none;
}
.watch-transcript-wrap .watch-transcript-item.is-hidden { display: none; }
.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-cue.is-active {
  background: rgba(255, 255, 255, 0.06);
}
.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-cue.is-active .watch-transcript-time {
  background: rgba(255, 255, 255, 0.1);
  color: var(--foreground);
  border-color: rgba(255, 255, 255, 0.1);
}
.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-cue.is-active .watch-transcript-text {
  color: var(--foreground);
}
.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.6875rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
  transition: background-color 0.35s ease, color 0.3s ease, border-color 0.3s ease;
  letter-spacing: 0.01em;
}
.watch-transcript-wrap .watch-transcript-text {
  transition: color 0.3s ease;
}
.watch-transcript-wrap .watch-transcript-cue mark {
  background: color-mix(in oklab, var(--primary) 22%, transparent);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}
.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.45);
}
.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-search {
  padding-left: 2.375rem;
  padding-right: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.3);
}
.watch-transcript-wrap:not(.watch-context-card--transcript) .watch-transcript-search:focus {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: none;
}
.watch-transcript-wrap .watch-transcript-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  width: 18px;
  margin-left: 6px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 10px 10px;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 10px 10px;
  background-color: var(--muted-foreground);
}
.watch-transcript-wrap .watch-transcript-search::-webkit-search-cancel-button:hover {
  background-color: var(--foreground);
}
.watch-transcript-wrap .watch-transcript-empty-wrap {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.watch-transcript-wrap.is-empty .watch-transcript-list { display: none; }
.watch-transcript-wrap.is-empty .watch-transcript-empty-wrap { display: flex; }
.watch-transcript-wrap .watch-transcript-empty-wrap .watch-transcript-empty-icon {
  margin-right: 0.625rem;
}
.watch-transcript-wrap .watch-transcript-pulse {
  position: relative;
  display: inline-flex;
  width: 10px;
  height: 10px;
}
.watch-transcript-wrap .watch-transcript-pulse > span:first-child {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 60%, transparent);
  opacity: 0.75;
  animation: watch-transcript-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.watch-transcript-wrap .watch-transcript-pulse > span:last-child {
  position: relative;
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--primary);
}
@keyframes watch-transcript-ping {
  75%, 100% { transform: scale(2.2); opacity: 0; }
}

.creator-watch-progress-wrap {
  display: flex;
  align-items: center;
  min-height: 1rem;
}
/* Track behind chapter marks; thumb stays above via the range input layer. */
.creator-watch-progress-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 0;
  height: 0.25rem;
  transform: translateY(-50%);
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--primary) 0%,
    var(--primary) var(--progress, 0%),
    color-mix(in srgb, var(--muted-foreground) 28%, transparent) var(--progress, 0%),
    color-mix(in srgb, var(--muted-foreground) 28%, transparent) 100%
  );
}
.creator-watch-progress-wrap .creator-watch-progress {
  position: relative;
  z-index: 3;
  background: transparent;
}
/* Kill global input:focus ring on the seek bar (click focus looks like an outline). */
.creator-watch-progress:focus,
.creator-watch-progress:focus-visible,
.review-submit-progress:focus,
.review-submit-progress:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}
.creator-watch-scrub-preview {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.55rem);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.28));
}
.creator-watch-scrub-preview[hidden] {
  display: none !important;
}
.creator-watch-scrub-preview-frame {
  overflow: hidden;
  border-radius: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: #0a0a0a;
  line-height: 0;
}
.creator-watch-scrub-preview-img {
  display: block;
  width: 160px;
  height: 90px;
  object-fit: contain;
  background: #111;
}
.creator-watch-scrub-preview-time {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.12rem 0.4rem;
  line-height: 1.2;
}
.creator-watch-scrub-preview-chapter {
  max-width: 11.5rem;
  margin: 0;
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.creator-watch-scrub-preview-chapter[hidden] {
  display: none !important;
}
.creator-watch-scrub-preview--text {
  gap: 0.2rem;
}
.creator-watch-scrub-preview--text .creator-watch-scrub-preview-chapter {
  max-width: 14rem;
  order: -1;
}
@media (hover: none), (pointer: coarse) {
  .creator-watch-scrub-preview {
    display: none !important;
  }
}
.creator-watch-chapter-marks {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  pointer-events: none;
  z-index: 2;
}
.creator-watch-chapter-mark {
  position: absolute;
  top: 0;
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  margin-left: -3px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.25);
}
#creator-watch-controls .creator-watch-chapter-mark {
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--foreground) 82%, transparent);
  box-shadow:
    0 0 0 1.5px var(--card),
    0 0 0 2.5px color-mix(in srgb, var(--foreground) 18%, transparent);
}

.faq-details .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-details[open] .faq-answer {
  grid-template-rows: 1fr;
}
.faq-details.faq-closing .faq-answer {
  grid-template-rows: 0fr;
}
.faq-details .faq-answer > div {
  overflow: hidden;
}
.faq-icon-vertical {
  transform-origin: center;
  transition: transform 0.3s ease;
}
.faq-details[open]:not(.faq-closing) .faq-icon-vertical {
  transform: scaleY(0);
}

.landing-page--social .landing-social-path {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.landing-page--social .landing-social-path:hover {
  transform: translateY(-1px);
}

.landing-page--social .landing-social-path--alt {
  background: color-mix(in srgb, var(--muted) 72%, transparent);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-inset-shadow), var(--card-shadow);
}

.landing-page--social .landing-social-path--alt:hover {
  background: color-mix(in srgb, var(--muted) 88%, transparent);
}

.landing-page--social .landing-social-feature-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .landing-page--social .landing-social-feature-grid {
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .landing-page--social .landing-social-feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.landing-page--social .landing-social-feature {
  min-height: 100%;
}


.live-event-duo-thumb {
  position: relative;
  flex-shrink: 0;
  width: 6.125rem;
  height: 3.75rem;
}
.live-event-duo-thumb--player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.live-event-duo-thumb--player .live-event-duo-thumb-faces {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
}
.live-event-duo-thumb--player .live-event-duo-thumb-face {
  padding: 3px;
  box-shadow: none;
  width: auto;
  height: auto;
}
.live-event-duo-thumb--player .live-event-duo-thumb-face--b {
  margin-left: clamp(-3.75rem, -26%, -7.25rem);
}
.live-event-duo-thumb--player .live-event-duo-thumb-img {
  width: min(76cqh, 46cqw);
  height: min(76cqh, 46cqw);
  border: none;
  box-shadow: none;
}
@media (min-width: 768px) {
  .live-event-duo-thumb--player .live-event-duo-thumb-img {
    width: min(70cqh, 40cqw);
    height: min(70cqh, 40cqw);
  }
  .live-event-duo-thumb--player .live-event-duo-thumb-face--b {
    margin-left: clamp(-3rem, -22%, -6rem);
  }
}
.live-event-duo-thumb-faces {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  box-sizing: border-box;
}
.live-event-duo-thumb-face {
  display: block;
  flex-shrink: 0;
  width: 2.875rem;
  height: 2.875rem;
  padding: 2px;
  border-radius: 9999px;
  background: linear-gradient(135deg, color-mix(in srgb, #60a5fa 60%, transparent), color-mix(in srgb, #a78bfa 60%, transparent));
  box-shadow: none;
  box-sizing: border-box;
  line-height: 0;
  overflow: hidden;
}
.live-event-duo-thumb-face--a {
  position: relative;
  z-index: 1;
}
.live-event-duo-thumb-face--b {
  margin-left: -1.1rem;
  z-index: 2;
}
.live-event-duo-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  object-fit: cover;
  background: var(--muted);
  border: none;
  box-shadow: none;
  vertical-align: top;
}
.live-event-duo-thumb-img--placeholder {
  background: color-mix(in srgb, var(--muted) 82%, transparent);
  border: none;
}

.dashboard-live-event-card {
  position: relative;
  isolation: isolate;
}
.dashboard-live-event-card__body {
  min-width: 0;
  gap: 1rem; /* match live-call rows (gap-4) */
}
.dashboard-live-event-card__body--hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2.25rem 1.5rem 1.75rem;
  gap: 0;
}
@media (min-width: 640px) {
  .dashboard-live-event-card__body--hero {
    padding: 2.5rem 2rem 1.75rem;
  }
}
.dashboard-live-event-card__visual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Same leading footprint as request / live-call card avatars (slightly larger for featured event). */
  width: auto;
  min-width: 3.25rem;
  min-height: 3.25rem;
}
.dashboard-live-event-card__visual--hero {
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin-bottom: 1.25rem;
}
.dashboard-live-event-card__copy {
  width: 100%;
  min-width: 0;
}
.dashboard-live-event-card__cta {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  width: 100%;
}
.dashboard-live-event-card--live {
  box-shadow:
    var(--card-inset-shadow),
    var(--card-shadow),
    0 0 0 1px color-mix(in srgb, #f87171 22%, transparent);
}
.dashboard-live-event-card--live:hover {
  box-shadow:
    var(--card-inset-shadow),
    var(--card-shadow-hover),
    0 0 0 1px color-mix(in srgb, #f87171 22%, transparent);
}
.dashboard-live-event-card__status-note--delayed,
.live-event-status-note--delayed {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--foreground);
}
.dashboard-live-event-card__status-note--delayed::before,
.live-event-status-note--delayed::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.45em;
  border-radius: 9999px;
  background: #f87171;
}
.live-event-duo-thumb--dashboard {
  width: auto;
  height: 3.25rem;
  margin: 0;
}
.live-event-duo-thumb--dashboard .live-event-duo-thumb-faces {
  justify-content: flex-start;
  align-items: center;
  width: auto;
  height: 3.25rem;
  padding: 0;
}
.live-event-duo-thumb--dashboard .live-event-duo-thumb-face {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  /* Match card avatars: ring-1 ring-border/50 */
  background: transparent;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 50%, transparent);
}
.live-event-duo-thumb--dashboard .live-event-duo-thumb-face--a {
  position: relative;
  z-index: 1;
}
.live-event-duo-thumb--dashboard .live-event-duo-thumb-face--b {
  margin-left: -0.75rem;
  z-index: 2;
  /* Stack ring so the overlap reads cleanly against the card surface. */
  box-shadow:
    0 0 0 2px var(--surface-1, var(--card, var(--background))),
    0 0 0 3px color-mix(in srgb, var(--border) 50%, transparent);
}
.live-event-duo-thumb--dashboard .live-event-duo-thumb-img {
  box-shadow: none;
}
.live-event-duo-thumb--dashboard-hero {
  height: 4.5rem;
}
.live-event-duo-thumb--dashboard-hero .live-event-duo-thumb-faces {
  justify-content: center;
  height: 4.5rem;
}
.live-event-duo-thumb--dashboard-hero .live-event-duo-thumb-face {
  width: 4.5rem;
  height: 4.5rem;
}
.live-event-duo-thumb--dashboard-hero .live-event-duo-thumb-face--b {
  margin-left: -1rem;
}
.dashboard-live-event-card:hover .live-event-duo-thumb--dashboard .live-event-duo-thumb-face,
.group\/pi:hover .live-event-duo-thumb--dashboard .live-event-duo-thumb-face {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
}
.dashboard-live-event-card:hover .live-event-duo-thumb--dashboard .live-event-duo-thumb-face--b,
.group\/pi:hover .live-event-duo-thumb--dashboard .live-event-duo-thumb-face--b {
  box-shadow:
    0 0 0 2px var(--surface-1, var(--card, var(--background))),
    0 0 0 3px color-mix(in srgb, var(--border) 70%, transparent);
}
.live-event-duo-thumb--dashboard.live-event-duo-thumb--solo .live-event-duo-thumb-faces {
  justify-content: flex-start;
}
.live-event-duo-thumb--dashboard-hero.live-event-duo-thumb--solo .live-event-duo-thumb-faces {
  justify-content: center;
}


.dashboard-share-card {
  position: relative;
  isolation: isolate;
}
.dashboard-share-card__url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.dashboard-share-card__url-host {
  color: var(--muted-foreground);
}
.dashboard-share-card__row {
  min-width: 0;
}
.mentor-dashboard-share-actions > .mentor-dashboard-copy-profile-url,
.mentor-dashboard-share-actions > .mentor-share-native-btn {
  flex: 1 1 0;
  min-width: 0;
}

.call-inner:has([data-le-room-state="incall"]:not([hidden])) {
  max-width: min(42rem, 96vw);
}

#live-event-room {
  width: 100%;
  min-width: 0;
}

.le-event-incall:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 1 auto;
  min-height: 0;
  gap: 0.625rem;
  width: 100%;
  min-width: 0;
}

.le-event-room-page:has([data-le-room-state="incall"]:not([hidden])) {
  overflow-x: hidden;
  overflow-y: auto;
  justify-content: center;
}

.le-event-room-inner:has([data-le-room-state="incall"]:not([hidden])) {
  max-width: min(80rem, 98vw);
  flex: 0 1 auto;
  min-height: 0;
  max-height: 100%;
  height: auto;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: max(0.625rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(1.125rem, calc(0.875rem + env(safe-area-inset-bottom, 0px)));
}

.le-event-room-inner:has([data-le-room-state="incall"]:not([hidden])) #live-event-room {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

[data-le-room-state="incall"]:not([hidden]) .call-stage {
  animation: callStageIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-le-room-state="incall"]:not([hidden]) .le-event-questions-stage {
  animation: callControlsIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
[data-le-room-state="incall"]:not([hidden]) .call-controls {
  animation: callControlsIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
  flex-shrink: 0;
}

.le-event-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(72dvh, 44rem);
  overflow: hidden;
  flex-shrink: 0;
}

.le-event-precall-stack {
  width: 100%;
  max-width: min(28rem, 100%);
  margin-inline: auto;
}

[data-le-room-state] {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.le-event-state-leaving {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.le-event-state-entering {
  opacity: 0;
  transform: translateY(6px);
}

.le-event-precall-preview {
  width: 100%;
}

.le-event-room-inner [data-le-room-state="precall"] .call-preview {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.le-event-incall:not([hidden]) .le-event-incall-main {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}

.le-event-incall:not([hidden]) .le-event-stage {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  aspect-ratio: 3 / 4;
  max-height: min(62dvh, 30rem);
  height: auto;
}

.le-event-incall:not([hidden]) .le-event-questions-stage {
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
}

@media (min-width: 640px) {
  .le-event-incall:not([hidden]) .le-event-incall-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
  }

  .le-event-incall:not([hidden]) .le-event-incall-main:has(.le-event-questions-stage:not(.hidden)) {
    grid-template-columns: minmax(0, 1fr) minmax(13.5rem, 18rem);
  }

  .le-event-incall:not([hidden]) .le-event-stage {
    max-height: min(62dvh, 34rem);
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .le-event-incall:not([hidden]) .le-event-questions-stage:not(.hidden) {
    max-height: none;
    height: auto;
    min-height: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .le-event-incall:not([hidden]) .le-event-questions-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 1024px) {
  .le-event-incall:not([hidden]) .le-event-incall-main:has(.le-event-questions-stage:not(.hidden)) {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem);
  }
}

.le-event-incall:not([hidden]) .le-event-controls {
  flex-shrink: 0;
  margin-top: 0.875rem;
}

.le-event-screen-video {
  z-index: 2;
  transition: opacity 0.26s ease-in-out;
}

.live-event-player-view[data-player-view="live"] .le-event-stage {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  overflow: hidden;
}

/* Audience live stage must keep filling the frame in screen-share (host room uses relative 16:9). */
.live-event-player-view[data-player-view="live"] .le-event-stage.le-event-stage--screen-share {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  display: block;
}

.le-event-stage--screen-share,
.live-event-player-view[data-player-view="live"].live-event-player-view--screen-share {
  display: block;
}

.live-event-player-view[data-player-view="live"].live-event-player-view--screen-share #live-event-daily-mount {
  position: absolute;
  inset: auto 0 0 0;
  height: auto;
  width: 100%;
  background: transparent;
  pointer-events: none;
}

.le-event-stage--screen-share .le-event-screen-video:not(.hidden),
.live-event-player-view[data-player-view="live"].live-event-player-view--screen-share .le-event-screen-video:not(.hidden) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

.le-event-stage--screen-share .le-event-duo-grid,
.live-event-watch-grid--screen-share {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0;
  width: 100%;
  max-width: none;
  flex: none;
  min-height: 0;
  padding: 0 clamp(14px, 4.5vw, 24px) clamp(12px, 3.5vh, 24px);
  background: transparent;
  pointer-events: none;
  z-index: 3;
  grid-template-columns: unset;
  grid-template-rows: unset;
  transition: opacity 0.26s ease-in-out;
}


.le-event-stage--screen-share .le-event-duo-grid--solo,
.live-event-watch-grid--screen-share.live-event-watch-grid--solo {
  justify-content: space-between;
}

.le-event-stage--screen-share .le-event-duo-slot,
.le-event-stage--screen-share .le-event-watch-slot,
.live-event-watch-grid--screen-share .le-event-watch-slot {
  position: relative;
  flex: 0 0 auto;
  width: clamp(68px, 20vw, 88px);
  height: clamp(68px, 20vw, 88px);
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.45);
  background: #000;
  pointer-events: auto;
}

.live-event-player-frame .le-event-stage--screen-share .le-event-watch-slot,
.live-event-player-frame .live-event-watch-grid--screen-share .le-event-watch-slot {
  width: clamp(4.25rem, 17cqh, 11.5rem);
  height: clamp(4.25rem, 17cqh, 11.5rem);
}
.live-event-player-frame .le-event-stage--screen-share .le-event-duo-grid,
.live-event-player-frame .live-event-watch-grid--screen-share {
  padding: 0 clamp(0.75rem, 3.2cqw, 2rem) clamp(0.7rem, 3.2cqh, 1.75rem);
}

.le-event-stage--screen-share .le-event-duo-slot--collapsed,
.le-event-stage--screen-share .le-event-watch-slot--collapsed,
.live-event-watch-grid--screen-share .le-event-watch-slot--collapsed {
  display: flex !important;
  opacity: 1;
}

.le-event-stage--screen-share .le-event-duo-slot .le-event-name-chip,
.le-event-stage--screen-share .le-event-watch-slot .le-event-name-chip,
.le-event-stage--screen-share .le-event-duo-slot .absolute.bottom-0,
.le-event-stage--screen-share .le-event-watch-slot .absolute.bottom-0,
.live-event-watch-grid--screen-share .le-event-watch-slot .le-event-name-chip,
.live-event-watch-grid--screen-share .le-event-watch-slot .absolute.bottom-0 {
  display: none;
}

.le-event-stage--screen-share .le-event-duo-slot video,
.le-event-stage--screen-share .le-event-watch-slot video,
.live-event-watch-grid--screen-share .le-event-watch-slot video {
  object-fit: cover;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.le-event-stage--screen-share [data-le-slot-waiting],
.le-event-stage--screen-share [data-le-slot-camoff],
.le-event-stage--screen-share [data-watch-waiting],
.le-event-stage--screen-share [data-watch-camoff],
.live-event-watch-grid--screen-share [data-watch-waiting],
.live-event-watch-grid--screen-share [data-watch-camoff] {
  gap: 0 !important;
  padding: 0 !important;
  z-index: 2;
}

.live-event-watch-grid--screen-share [data-watch-camoff].is-visible,
.le-event-stage--screen-share [data-le-slot-camoff].is-visible,
.le-event-stage--screen-share [data-watch-camoff].is-visible {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.le-event-stage--screen-share [data-le-slot-waiting] p,
.le-event-stage--screen-share [data-le-slot-camoff] p,
.le-event-stage--screen-share [data-watch-waiting] p,
.le-event-stage--screen-share [data-watch-camoff] p,
.live-event-watch-grid--screen-share [data-watch-waiting] p,
.live-event-watch-grid--screen-share [data-watch-camoff] p {
  display: none;
}

.le-event-stage--screen-share .call-precall-avatar,
.live-event-watch-grid--screen-share .call-precall-avatar {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  border-radius: 50%;
  box-shadow: none;
}

.le-event-stage--screen-share .call-precall-avatar .call-precall-avatar-fallback,
.live-event-watch-grid--screen-share .call-precall-avatar .call-precall-avatar-fallback {
  font-size: clamp(1.25rem, 5vw, 1.75rem);
}
.live-event-player-frame .live-event-watch-grid--screen-share .call-precall-avatar-fallback {
  font-size: clamp(1.25rem, 5.5cqh, 2.75rem);
}

.le-event-duo-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
  transition: width 0.26s ease-in-out, grid-template-columns 0.26s ease-in-out;
}
.le-event-duo-grid--solo,
.live-event-watch-grid--solo {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}
.le-event-duo-slot--collapsed,
.le-event-watch-slot--collapsed {
  display: none !important;
}
.le-event-duo-grid--solo .le-event-duo-slot--solo,
.live-event-watch-grid--solo .le-event-watch-slot--solo {
  border: none !important;
}
@media (max-width: 639px) {
  .le-event-room-page:has([data-le-room-state="incall"]:not([hidden])) {
    padding-bottom: max(1.25rem, calc(1rem + env(safe-area-inset-bottom, 0px)));
  }

  .le-event-room-page:has([data-le-room-state="incall"]:not([hidden])) .le-event-room-inner {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-bottom: max(1.5rem, calc(1.25rem + env(safe-area-inset-bottom, 0px)));
  }

  .le-event-incall:not([hidden]) .le-event-controls {
    padding-bottom: 0.625rem;
  }

  .le-event-stage {
    aspect-ratio: 3 / 4;
    max-height: min(62dvh, 30rem);
  }

  .le-event-duo-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
.le-event-duo-slot {
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.le-event-duo-slot:last-child {
  border-right: 0;
}
@media (max-width: 639px) {
  .le-event-duo-slot {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .le-event-duo-slot:last-child {
    border-bottom: 0;
  }
}
.le-event-duo-slot video[data-le-slot-video],
.live-event-watch-grid video[data-watch-slot],
video.live-event-room-video--local {
  transform: scaleX(-1);
}
.le-event-watch-slot {
  position: relative;
  min-height: 12rem;
}
.le-event-watch-slot video[data-watch-slot] {
  min-height: 100%;
}
.le-event-questions-stage {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 32px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.le-event-questions-stage.hidden {
  display: none !important;
}
.le-event-questions-stage.is-new-question {
  animation: leEventQuestionFlash 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes leEventQuestionFlash {
  0% {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 10px 36px rgba(0, 0, 0, 0.28),
      0 0 0 0 rgba(167, 139, 250, 0);
  }
  30% {
    border-color: rgba(167, 139, 250, 0.72);
    background: rgba(109, 40, 217, 0.14);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 10px 36px rgba(0, 0, 0, 0.28),
      0 0 0 3px rgba(167, 139, 250, 0.45),
      0 0 28px rgba(109, 40, 217, 0.32);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 10px 36px rgba(0, 0, 0, 0.28),
      0 0 0 0 rgba(167, 139, 250, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .le-event-questions-stage.is-new-question {
    animation: none;
    border-color: rgba(167, 139, 250, 0.65);
    background: rgba(109, 40, 217, 0.1);
  }
}
.le-event-questions-head {
  display: none;
}
.le-event-questions-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.25;
}
.le-event-questions-head-main {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-width: 0;
}
.le-event-questions-icon {
  flex-shrink: 0;
  margin-top: 0.0625rem;
  color: rgba(255, 255, 255, 0.72);
}
.le-event-questions-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.625rem;
  min-width: 0;
}
.le-event-questions-kbd-hint {
  display: none;
  margin: 0;
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
}

.le-event-name-chip {
  position: absolute;
  left: 0.625rem;
  bottom: 0.625rem;
  z-index: 4;
  max-width: calc(100% - 1.25rem);
  pointer-events: none;
}
.le-event-name-chip span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 9999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  background: #000;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.live-event-player-shell:fullscreen .le-event-name-chip,
.live-event-player-shell:-webkit-full-screen .le-event-name-chip,
.live-event-player-shell.is-fullscreen .le-event-name-chip {
  left: 0.9rem;
  bottom: 0.9rem;
  max-width: calc(100% - 1.8rem);
}
.live-event-player-shell:fullscreen .le-event-name-chip span,
.live-event-player-shell:-webkit-full-screen .le-event-name-chip span,
.live-event-player-shell.is-fullscreen .le-event-name-chip span {
  font-size: 1rem;
  padding: 0.45rem 0.95rem;
}

.le-event-overlay-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.006em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.72);
  color: rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 10px rgba(0, 0, 0, 0.28);
}
.le-event-overlay-pill--label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.le-event-overlay-pill--urgent {
  background: var(--destructive, #dc2626);
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 2px 10px rgba(0, 0, 0, 0.28);
}
@keyframes le-event-overlay-pill-final-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.14),
      0 2px 10px rgba(0, 0, 0, 0.28),
      0 0 0 0 rgba(220, 38, 38, 0.45);
  }
  50% {
    transform: scale(1.06);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.22),
      0 4px 16px rgba(0, 0, 0, 0.32),
      0 0 22px 4px rgba(220, 38, 38, 0.55);
  }
}
.le-event-overlay-pill--final {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  animation: le-event-overlay-pill-final-pulse 1s ease-in-out infinite;
}
.le-event-overlay-pill--clock {
  min-width: 3.25rem;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .le-event-overlay-pill--final {
    animation: none;
  }
}
.le-event-backstage-hint {
  margin: 0;
  padding: 0 0.125rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.52);
}
.le-event-incall-hint-slot {
  flex-shrink: 0;
  min-height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.125rem;
}
.le-event-incall-hint-slot.is-empty {
  visibility: hidden;
}
.le-event-backstage-hint.hidden {
  display: none;
}
.le-event-primary-action-slot {
  display: grid;
  grid-template-areas: 'action';
  place-items: center stretch;
  min-width: 10.5rem;
  min-height: 2.75rem;
  flex-shrink: 0;
}
.le-event-primary-action-slot > button {
  grid-area: action;
  width: 100%;
  white-space: nowrap;
}
.le-event-primary-action-slot > button.le-event-action--hidden {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
.le-event-questions-stage .dashboard-pill--info {
  background: rgba(var(--accent-rgb), 0.22);
  color: #fff;
}
.le-event-ended {
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
}
.le-event-ended .call-precall-people {
  margin-bottom: 0.25rem;
}
.le-event-questions-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0.625rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
}
.le-event-question-current {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.le-event-q-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.le-event-q-nav-row {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.5rem 0.75rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.le-event-q-step {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.le-event-q-step:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
.le-event-q-step:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.le-event-q-position {
  margin: 0 0 0.3125rem;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.45);
  text-align: left;
  line-height: 1.2;
  white-space: nowrap;
}
.le-event-q-position.hidden {
  display: none;
}
.le-event-q-count-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}
.le-event-q-count-row.hidden {
  display: none !important;
}
.le-event-q-position--head {
  display: none;
  margin-top: 0.125rem;
}
.le-event-q-position--inline {
  margin-bottom: 0.5rem;
}
.le-event-q-count-row--inline {
  margin-bottom: 0.5rem;
}
.le-event-q-count-row--inline .le-event-q-position--inline {
  margin-bottom: 0;
}
.le-event-new-question-pill {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 9999px;
  padding: 0.1875rem 0.5rem;
  background: rgba(167, 139, 250, 0.22);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 16px rgba(167, 139, 250, 0.32);
}
.le-event-questions-stage.is-new-question .le-event-new-question-pill {
  display: inline-flex;
  animation: leEventNewQuestionPill 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.le-event-questions-stage.is-new-question .le-event-q-position:not(.hidden) {
  animation: leEventQuestionCountPulse 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes leEventNewQuestionPill {
  0% { opacity: 0; transform: translateY(3px) scale(0.94); }
  22% { opacity: 1; transform: translateY(0) scale(1); }
  72% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-2px) scale(0.98); }
}
@keyframes leEventQuestionCountPulse {
  0%, 100% { color: rgba(255, 255, 255, 0.45); }
  25%, 70% { color: rgba(255, 255, 255, 0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .le-event-questions-stage.is-new-question .le-event-new-question-pill,
  .le-event-questions-stage.is-new-question .le-event-q-position:not(.hidden) {
    animation: none;
  }
}
@media (min-width: 640px) {
  .le-event-questions-head {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
    padding: 0.875rem 0.875rem 0.625rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .le-event-incall:not([hidden]) .le-event-questions-stage {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .le-event-q-position--head:not(.hidden) {
    display: block;
  }

  .le-event-q-position--inline {
    display: none !important;
  }

  .le-event-q-count-row--inline {
    display: none !important;
  }

  .le-event-questions-kbd-hint {
    display: block;
  }
}
.le-event-q-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
}
.le-event-q-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  flex-shrink: 0;
}
.le-event-q-avatar {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.18);
}
.le-event-q-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.le-event-q-avatar-fallback {
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1;
}
.le-event-q-identity {
  flex: 1 1 auto;
  min-width: 0;
}
.le-event-q-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  min-width: 0;
}
.le-event-q-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.25;
}
.le-event-q-role {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.58);
}
.le-event-q-text {
  margin: 0;
  padding-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.9);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  white-space: pre-wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 640px) {
  .le-event-q-text {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 1024px) {
  .le-event-questions-body {
    padding: 0.875rem 1rem 1rem;
  }

  .le-event-q-text {
    font-size: 0.9375rem;
    line-height: 1.625;
    padding-top: 0.5rem;
  }
}
.le-event-questions-stage .le-event-q-step:disabled {
  pointer-events: none;
}
.le-event-controls {
  flex-wrap: nowrap;
  row-gap: 0.625rem;
  justify-content: center;
  margin-top: 0;
  align-items: center;
}
@media (max-width: 420px) {
  .le-event-controls {
    flex-wrap: wrap;
  }
}
.live-event-go-live-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem;
  border: 0;
  border-radius: 9999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.live-event-go-live-btn:hover:not(:disabled) {
  background: #b91c1c;
  box-shadow: 0 6px 22px rgba(220, 38, 38, 0.55);
  transform: translateY(-1px);
}
.live-event-go-live-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
@keyframes le-event-go-live-urgent-pulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.45), 0 0 0 0 rgba(220, 38, 38, 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 8px 28px rgba(220, 38, 38, 0.62), 0 0 32px 8px rgba(220, 38, 38, 0.48);
    transform: scale(1.03);
  }
}
.live-event-go-live-btn--urgent-pulse {
  animation: le-event-go-live-urgent-pulse 1s ease-in-out infinite;
}
.live-event-go-live-btn--urgent-pulse:hover:not(:disabled) {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .live-event-go-live-btn--urgent-pulse {
    animation: none;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.55);
  }
}
.live-event-end-stream-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem;
  border: 0;
  border-radius: 9999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.live-event-end-stream-btn:hover {
  background: #b91c1c;
  box-shadow: 0 6px 22px rgba(220, 38, 38, 0.55);
  transform: translateY(-1px);
}
.live-event-end-stream-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.live-event-player-frame .live-event-watch-grid video[data-watch-slot],
.live-event-player-frame .le-event-watch-slot video[data-watch-slot] {
  min-height: 100%;
  display: block !important;
  transform: scaleX(-1);
}
.live-event-watch-connecting {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 20;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.live-event-watch-connecting-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.live-event-watch-connecting-title {
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0;
}
.live-event-watch-connecting.is-dismissed {
  opacity: 0;
  visibility: hidden;
}
.live-event-watch-connecting[hidden] {
  display: none !important;
}
.live-event-watch-connecting--error {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}
.live-event-watch-connecting--error .live-event-watch-connecting-live {
  display: none;
  background: rgba(220, 38, 38, 0.2);
  color: rgb(254, 202, 202);
}
.live-event-watch-connecting--error .live-event-watch-connecting-live span[aria-hidden="true"] {
  background: rgb(248, 113, 113);
  animation: none;
}