:root {
  --primary: #dc6e0a;
  --primary-light: #f5a623;
  --primary-dark: #b35600;
  --bg: #f2f2f7;
  --bg-card: #fff;
  --bg-input: #e5e5ea;
  --text: #000;
  --text-secondary: #3c3c43;
  --text-muted: #8e8e93;
  --border: #d1d1d6;
  --success: #34c759;
  --error: #ff3b30;
  --sent: #3478f6;
  --shadow: 0 1px 3px #0000001a;
  --shadow-lg: 0 4px 12px #0000001a;
  --radius: .75rem;
  --radius-sm: .5rem;
  --radius-lg: 1.5rem;
  --radius-pill: 100px;
  --border-image: 2px solid var(--border);
  --transition: .2s ease;
  --text-caption: .75rem;
  --text-small: .875rem;
  --text-body: 1rem;
  --text-lead: 1.125rem;
  --text-subhead: 1.25rem;
  --text-heading: 1.5rem;
  --text-display: 2rem;
  --text-hero: 2.5rem;
  --text-display-mobile: 1.75rem;
  --text-heading-mobile: 1.5rem;
  --text-subhead-mobile: 1.125rem;
  --icon-sm: 1.125rem;
  --icon-md: 1.25rem;
  --icon-lg: 2.5rem;
  --icon-xl: 3rem;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --spacing-xs: .375rem;
  --spacing-lg: 1.5rem;
  --max-width: 914px;
  --z-overlay: 1;
  --z-sticky: 10;
  --z-modal: 100;
  --z-toast: 1000;
  --size-button-sm: 2rem;
  --size-button-md: 2.5rem;
  --size-button-xl: 3.5rem;
  --bar-height: 2.5rem;
  --header-height: 67px;
  --control-size: 1.4rem;
  --system-blue: #007aff;
  --system-gray: #8e8e93;
  --system-gray2: #aeaeb2;
  --system-gray3: #c7c7cc;
  --system-gray4: #d1d1d6;
  --system-gray5: #e5e5ea;
  --system-gray6: #f2f2f7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --bg-card: #1c1c1e;
    --bg-input: #2c2c2e;
    --text: #fff;
    --text-secondary: #ebebf5;
    --text-muted: #8e8e93;
    --border: #38383a;
    --success: #30d158;
    --error: #ff453a;
    --sent: #3478f6;
    --shadow: 0 1px 3px #0000004d;
    --shadow-lg: 0 4px 12px #0000004d;
    --system-blue: #0a84ff;
    --system-gray: #8e8e93;
    --system-gray2: #636366;
    --system-gray3: #48484a;
    --system-gray4: #3a3a3c;
    --system-gray5: #2c2c2e;
    --system-gray6: #1c1c1e;
  }
}

[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-card: #1c1c1e;
  --bg-input: #2c2c2e;
  --text: #fff;
  --text-secondary: #ebebf5;
  --text-muted: #8e8e93;
  --border: #38383a;
  --success: #30d158;
  --error: #ff453a;
  --sent: #3478f6;
  --shadow: 0 1px 3px #0000004d;
  --shadow-lg: 0 4px 12px #0000004d;
  --system-blue: #0a84ff;
  --system-gray: #8e8e93;
  --system-gray2: #636366;
  --system-gray3: #48484a;
  --system-gray4: #3a3a3c;
  --system-gray5: #2c2c2e;
  --system-gray6: #1c1c1e;
}

[data-theme="light"] {
  --bg: #f2f2f7;
  --bg-card: #fff;
  --bg-input: #e5e5ea;
  --text: #000;
  --text-secondary: #3c3c43;
  --text-muted: #8e8e93;
  --border: #d1d1d6;
  --success: #34c759;
  --error: #ff3b30;
  --sent: #3478f6;
  --shadow: 0 1px 3px #0000001a;
  --shadow-lg: 0 4px 12px #0000001a;
  --system-blue: #007aff;
  --system-gray: #8e8e93;
  --system-gray2: #aeaeb2;
  --system-gray3: #c7c7cc;
  --system-gray4: #d1d1d6;
  --system-gray5: #e5e5ea;
  --system-gray6: #f2f2f7;
}

*, :before, :after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg);
  height: 100dvh;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, sans-serif;
  line-height: 1.5;
  overflow: hidden;
}

#app {
  height: 100dvh;
  max-width: var(--max-width);
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--border);
  flex-direction: column;
  margin: 0 auto;
  display: flex;
  overflow: hidden;
}

h1, h2, h3, h4 {
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}

h1 {
  font-size: var(--text-display);
}

h2 {
  font-size: var(--text-heading);
}

h3 {
  font-size: var(--text-subhead);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
  display: flex;
}

.flex-center {
  justify-content: center;
  align-items: center;
  display: flex;
}

.flex-between {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.gap-1 {
  gap: .25rem;
}

.gap-2 {
  gap: .5rem;
}

.gap-3 {
  gap: .75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.5rem;
}

.mt-1 {
  margin-top: .25rem;
}

.mt-2 {
  margin-top: .5rem;
}

.mt-3 {
  margin-top: .75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-1 {
  margin-bottom: .25rem;
}

.mb-2 {
  margin-bottom: .5rem;
}

.mb-3 {
  margin-bottom: .75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.text-center {
  text-align: center;
}

.text-secondary {
  color: var(--text-secondary);
}

.text-muted {
  color: var(--text-muted);
}

.text-error {
  color: var(--error);
}

.text-success {
  color: var(--success);
}

.text-sm {
  font-size: var(--text-small);
}

.text-xs {
  font-size: var(--text-caption);
}

.font-semibold {
  font-weight: 600;
}

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

.min-w-0 {
  min-width: 0;
}

.icon-w {
  text-align: center;
  width: 1.25rem;
}

.aspect-square {
  aspect-ratio: 1;
}

.w-full {
  width: 100%;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.inset-0 {
  inset: 0;
}

.overflow-hidden {
  overflow: hidden;
}

.object-cover {
  object-fit: cover;
}

.cursor-pointer {
  cursor: pointer;
}

.transition-bg {
  transition: background var(--transition);
}

.transition-all {
  transition: all var(--transition);
}

.rounded-full {
  border-radius: 50%;
}

.rounded {
  border-radius: var(--radius);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-pill {
  border-radius: var(--radius-pill);
}

.overlay-gradient-bottom {
  background: linear-gradient(to top, #000000b3 0%, #0000 100%);
}

.btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  padding: .5rem 1rem;
  text-decoration: none;
  display: inline-flex;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-light);
}

.btn-primary:disabled {
  background: var(--text-muted);
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--border);
}

.btn-outline {
  color: var(--text);
  border: 1px solid var(--border);
  background: none;
}

.btn-outline:hover {
  background: var(--bg-input);
  border-color: var(--text-secondary);
}

.btn-text {
  color: var(--primary);
  font-weight: var(--weight-medium);
  cursor: pointer;
  background: none;
  border: none;
  padding: .4rem .75rem;
}

.btn-text:hover {
  opacity: .8;
}

.btn-icon {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  padding: 0;
}

.btn-sm {
  padding: var(--spacing-xs) .75rem;
  font-size: var(--text-small);
}

.btn-large {
  padding: .75rem var(--spacing-lg);
  font-size: var(--text-lead);
}

.btn-pill {
  border-radius: var(--radius-pill);
}

.btn-back {
  width: var(--size-button-md);
  height: var(--size-button-md);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--text-lead);
  cursor: pointer;
  transition: all var(--transition);
  background: #00000080;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.btn-back:hover {
  background: #000000b3;
}

.btn-link {
  font-size: var(--text-small);
  color: var(--primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  background: none;
  border: none;
  align-items: center;
  gap: .25rem;
  padding: .25rem .5rem;
  display: inline-flex;
}

.btn-link:hover {
  color: var(--primary-light);
  background: var(--bg-input);
}

.btn-round {
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.btn-round:hover {
  transform: scale(1.1);
}

.btn-round:active {
  transform: scale(.95);
}

.btn-round:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-size: var(--text-body);
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
  outline: none;
  padding: .5rem .625rem;
}

.input:focus {
  border-color: var(--primary);
}

.input::placeholder {
  color: var(--text-muted);
}

.input-pill {
  border-radius: var(--radius-pill);
  padding: 1rem 1.25rem;
}

input[type="date"].input {
  appearance: none;
  min-width: 0;
}

.input-group {
  flex-direction: column;
  gap: .25rem;
  display: flex;
}

.input-group + .input-group {
  margin-top: .9375rem;
}

.input-group > .group-label {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
}

.input-group.answered > .group-label:after, .input-group.answered > .label-with-indicator > .group-label:after, .input-group.answered > .label-with-counter > .group-label:after {
  content: "";
  color: var(--text-muted);
  opacity: .6;
  margin-left: .375rem;
  font-family: "Font Awesome 6 Free";
  font-size: .7em;
  font-weight: 900;
}

.field-hint {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: .25rem;
}

.handle-link-row {
  margin-top: var(--spacing-xs);
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .5rem;
  display: flex;
}

.handle-link-preview {
  font-size: var(--text-small);
  color: var(--text-muted);
  word-break: break-all;
  text-align: center;
  width: 100%;
}

.handle-copy-label {
  font-size: var(--text-small);
  color: var(--primary);
}

.code-input {
  text-align: center;
  letter-spacing: .5rem;
  font-family: monospace;
  font-size: 1.625rem;
}

.input-with-indicator {
  align-items: center;
  display: flex;
  position: relative;
}

.input-with-indicator .input {
  flex: 1;
  transition: border-color .3s, box-shadow .3s;
}

.input-with-indicator.save-success .input {
  border-color: var(--success);
  box-shadow: 0 0 0 .125rem #4caf5033;
}

.input-with-indicator.save-error .input {
  border-color: var(--error);
  box-shadow: 0 0 0 .125rem #f4433633;
}

.save-indicator {
  background: var(--success);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  border-radius: 1rem;
  padding: .25rem .5rem;
  transition: opacity .15s, transform .15s;
  position: absolute;
  top: 50%;
  right: .75rem;
  transform: translateY(-50%)scale(0);
}

.save-indicator.visible {
  opacity: 1;
  animation: .18s cubic-bezier(.12, .9, .2, 1.7) forwards indicatorSlam;
}

.save-indicator.error {
  background: var(--error);
  color: #fff;
}

.input-with-indicator:has(textarea) .save-indicator {
  top: .75rem;
  transform: none;
}

@keyframes indicatorSlam {
  0% {
    opacity: 0;
    transform: translateY(-50%)scale(0);
  }

  40% {
    transform: translateY(-50%)scale(1.35);
  }

  65% {
    transform: translateY(-50%)scale(.9);
  }

  100% {
    opacity: 1;
    transform: translateY(-50%)scale(1);
  }
}

.preference-header {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.preference-header .save-indicator, .toggle-with-indicator .save-indicator {
  position: static;
  transform: none;
}

.toggle-with-indicator, .label-with-indicator {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.label-with-indicator > .group-label {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
}

.label-with-indicator .save-indicator {
  position: static;
  transform: scale(0);
}

.label-with-indicator .save-indicator.visible {
  animation: .25s cubic-bezier(.175, .885, .32, 1.5) forwards indicatorSlamStatic;
}

@keyframes indicatorSlamStatic {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    transform: scale(1.15);
  }

  70% {
    transform: scale(.95);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.age-display {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin-top: .25rem;
}

.age-display-inline {
  font-size: var(--text-small);
  color: var(--text-muted);
  white-space: nowrap;
  align-self: center;
}

.age-display-error {
  color: var(--error);
}

.input-row {
  align-items: flex-start;
  gap: 1rem;
  display: flex;
}

.height-input-container {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.height-metric-col {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.height-metric-col .input-with-indicator {
  flex: 1;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.height-metric-col .input {
  width: 6rem;
}

.height-imperial-col {
  align-items: center;
  gap: .25rem;
  display: flex;
}

.height-feet-input, .height-inches-input {
  text-align: center;
  width: 3.5rem;
}

.height-unit-label {
  color: var(--text-muted);
  font-size: var(--text-small);
}

.avatar {
  background: var(--bg-input);
  border-radius: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

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

.avatar i {
  color: var(--text-muted);
}

.avatar-sm {
  width: 2.75rem;
  height: 2.75rem;
}

.avatar-sm i {
  font-size: var(--icon-sm);
}

.avatar-md {
  width: 4.125rem;
  height: 4.125rem;
}

.avatar-md i {
  font-size: var(--icon-md);
}

.avatar-lg {
  width: 6.25rem;
  height: 6.25rem;
}

.avatar-lg i {
  font-size: var(--icon-lg);
}

.avatar-xl {
  width: 9.375rem;
  height: 9.375rem;
}

.avatar-xl i {
  font-size: var(--icon-xl);
}

.avatar-upload {
  background: var(--bg-input);
  cursor: pointer;
  width: 6.25rem;
  height: 6.25rem;
  transition: background var(--transition);
  border-radius: 0;
  justify-content: center;
  align-items: center;
  margin: 0 auto .75rem;
  display: flex;
}

.avatar-upload:hover {
  background: var(--border);
}

.avatar-upload i {
  font-size: var(--icon-lg);
  color: var(--text-muted);
}

.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.card-bordered {
  border: 1px solid var(--border);
}

.card-flat {
  box-shadow: none;
}

.card-no-pad {
  padding: 0;
}

.card-sm {
  padding: .75rem;
}

.card-lg {
  padding: 1.5rem;
}

.badge {
  background: var(--primary);
  color: #fff;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  padding: .125rem .5rem;
}

.toggle {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  justify-content: space-between;
  align-items: center;
  padding: .75rem;
  display: flex;
}

.toggle-switch {
  width: 3.25rem;
  height: 1.75rem;
  position: relative;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  cursor: pointer;
  background: var(--bg-input);
  transition: var(--transition);
  border-radius: 1.75rem;
  position: absolute;
  inset: 0;
}

.toggle-slider:before {
  content: "";
  width: 1.375rem;
  height: 1.375rem;
  transition: var(--transition);
  background: #fff;
  border-radius: 50%;
  position: absolute;
  bottom: .1875rem;
  left: .1875rem;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--primary);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(1.5rem);
}

.checkbox-group {
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  display: grid;
}

.checkbox-group.single-column, .radio-group.single-column {
  grid-template-columns: 1fr;
}

.checkbox-item {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.checkbox-item input[type="checkbox"] {
  width: var(--control-size);
  height: var(--control-size);
  accent-color: var(--primary);
  flex-shrink: 0;
}

.pnta-checkbox {
  font-style: italic;
  font-weight: var(--weight-normal);
  color: var(--text-secondary);
  cursor: pointer;
  align-items: center;
  gap: .5rem;
  width: 100%;
  margin-top: .25rem;
  display: flex;
}

.checkbox-group > .pnta-checkbox {
  grid-column: 1 / -1;
}

.pnta-checkbox input[type="checkbox"] {
  width: var(--control-size);
  height: var(--control-size);
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.pnta-checkbox:hover {
  color: var(--text);
}

input:disabled, textarea:disabled {
  background-color: var(--bg-input);
  color: var(--text-muted);
  cursor: not-allowed;
}

.radio-group {
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  display: grid;
}

.radio-item {
  cursor: pointer;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.radio-item input[type="radio"] {
  display: none;
}

.radio-circle {
  width: var(--control-size);
  height: var(--control-size);
  border: 2px solid var(--border);
  transition: border-color var(--transition);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.radio-circle:after {
  content: "";
  width: calc(var(--control-size) / 2);
  height: calc(var(--control-size) / 2);
  background: var(--primary);
  transition: transform var(--transition);
  border-radius: 50%;
  transform: scale(0);
}

.radio-item input[type="radio"]:checked + .radio-circle {
  border-color: var(--primary);
}

.radio-item input[type="radio"]:checked + .radio-circle:after {
  transform: scale(1);
}

.radio-item:hover .radio-circle {
  border-color: var(--text-secondary);
}

.units-radio-group {
  gap: 1.5rem;
  display: flex;
}

.form-section {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  margin-bottom: .75rem;
  overflow: hidden;
}

.form-section-header {
  cursor: pointer;
  transition: background var(--transition);
  -webkit-user-select: none;
  user-select: none;
  justify-content: space-between;
  align-items: center;
  padding: .875rem 1rem;
  display: flex;
}

.form-section-header:hover {
  background: var(--bg-input);
}

.form-section-header h3 {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  align-items: center;
  gap: .5rem;
  margin: 0;
  display: flex;
}

.form-section-header h3 > i {
  width: 1.25rem;
  color: var(--primary);
}

.form-section-header h3 .save-indicator {
  position: static;
  transform: scale(0);
}

.form-section-header h3 .save-indicator.visible {
  animation: .25s cubic-bezier(.175, .885, .32, 1.5) forwards indicatorSlamStatic;
}

.section-progress {
  font-size: var(--text-caption);
  color: var(--error);
  font-weight: var(--weight-normal);
  margin-left: auto;
  margin-right: .5rem;
}

.section-progress.complete {
  color: var(--success);
}

.section-toggle {
  color: var(--text-muted);
  transition: transform var(--transition);
}

.form-section-header.collapsed .section-toggle {
  transform: rotate(-90deg);
}

.form-section-content {
  padding: 0 1rem 1rem;
  display: block;
}

.form-section-content.collapsed {
  display: none;
}

.body-row {
  align-items: flex-start;
  gap: 1rem;
  display: flex;
}

.body-row > .input-group {
  flex: 1;
  min-width: 0;
}

.body-row > .input-group + .input-group {
  margin-top: 0;
}

.input-hint {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: .25rem;
}

.label-hint {
  font-size: var(--text-caption);
  font-weight: var(--weight-normal);
  color: var(--text-muted);
  margin-left: .25rem;
}

.field-note {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: .35rem;
  line-height: 1.4;
  display: block;
}

.label-with-counter {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.label-with-counter > label {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
}

.char-counter {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.dropdown {
  font-size: var(--text-body);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  padding: .5rem .75rem;
}

.dropdown:focus {
  border-color: var(--primary);
  outline: none;
}

.empty-state {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem .75rem;
  display: flex;
}

.empty-state i {
  font-size: var(--icon-lg);
  color: var(--text-muted);
  margin-bottom: .75rem;
}

.empty-state h3 {
  text-wrap: balance;
  margin-bottom: .375rem;
}

.empty-state p {
  color: var(--text-secondary);
  text-wrap: balance;
}

.spinner {
  width: var(--size-button-md);
  height: var(--size-button-md);
  border: .1875rem solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: .8s linear infinite spin;
}

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

.loading {
  justify-content: center;
  align-items: center;
  padding: 2rem;
  display: flex;
}

.toast {
  background: var(--primary);
  color: #fff;
  width: 80%;
  max-width: 28rem;
  font-size: var(--text-lead);
  font-weight: var(--weight-semibold);
  text-align: center;
  text-wrap: balance;
  border-radius: var(--radius-sm);
  z-index: var(--z-toast);
  opacity: 0;
  border: 3px solid #fff;
  padding: .75rem 1.25rem;
  animation: .18s cubic-bezier(.12, .9, .2, 1.7) forwards toastSlam;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)scale(0);
  box-shadow: 0 0 24px #0009;
}

.toast.fade-out {
  animation: .15s forwards toastDismiss;
}

@keyframes toastSlam {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%)scale(0);
  }

  40% {
    transform: translate(-50%, -50%)scale(1.08);
  }

  65% {
    transform: translate(-50%, -50%)scale(.95);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%)scale(1);
  }
}

@keyframes toastDismiss {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%)scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%)scale(.9);
  }
}

.modal-overlay {
  z-index: var(--z-toast);
  background: #0006;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  display: flex;
  position: fixed;
  inset: 0;
}

.modal-content {
  background: var(--bg-card);
  border-radius: var(--radius);
  width: 100%;
  max-width: 20rem;
  padding: 1.5rem;
  animation: .2s modalSlideIn;
  box-shadow: 0 10px 40px #00000026;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-content h3 {
  font-size: var(--text-lead);
  text-align: center;
  margin: 0 0 .5rem;
}

.modal-buttons {
  gap: .75rem;
  margin-top: 1rem;
  display: flex;
}

.modal-buttons .btn {
  flex: 1;
}

.rating-slider {
  appearance: none;
  background: linear-gradient(to right, var(--error), var(--bg-input), var(--success));
  border-radius: .25rem;
  outline: none;
  width: 100%;
  height: .5rem;
}

.rating-slider::-webkit-slider-thumb {
  appearance: none;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: var(--shadow);
  background: #fff;
  border-radius: 50%;
}

.empty-children-message {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-small);
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 1rem;
}

.child-entry {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  margin-bottom: .75rem;
  overflow: hidden;
}

.child-entry-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  display: flex;
}

.child-number {
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.child-summary {
  font-size: var(--text-small);
  color: var(--text-muted);
  flex: 1;
}

.btn-remove-child {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.btn-remove-child:hover {
  color: var(--error);
  background: #ff00001a;
}

.child-entry-fields {
  flex-direction: column;
  gap: .75rem;
  padding: .75rem;
  display: flex;
}

.child-field {
  flex-direction: column;
  gap: .25rem;
  display: flex;
}

.child-field > .group-label {
  font-size: var(--text-small);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

.child-field-slider {
  margin-top: .25rem;
}

.child-field-slider .input {
  width: 100%;
  margin-bottom: .25rem;
}

.lives-with-value {
  font-weight: var(--weight-semibold);
  color: var(--primary);
}

.slider-ticks {
  color: var(--text-muted);
  justify-content: space-between;
  padding: 0 .125rem;
  font-size: .625rem;
  display: flex;
}

#add-child-btn {
  width: 100%;
  margin-top: .5rem;
}

.intent-entry-card {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  margin-bottom: .75rem;
  position: relative;
  overflow: hidden;
}

.intent-entry-card > .btn-remove-intent-entry {
  z-index: 1;
  position: absolute;
  top: .5rem;
  right: .5rem;
}

.intent-entry-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  display: flex;
}

.intent-entry-number {
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  color: var(--text-secondary);
  flex: 1;
}

.btn-remove-intent-entry {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--text-caption);
  background: none;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.btn-remove-intent-entry:hover {
  color: var(--danger);
  background: var(--bg-hover);
}

.intent-entry-fields {
  flex-direction: column;
  gap: .75rem;
  padding: .75rem;
  display: flex;
}

.intent-entry-field {
  flex-direction: column;
  gap: .25rem;
  display: flex;
}

.intent-entry-field > .group-label {
  font-size: var(--text-small);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

.empty-intent-entries {
  color: var(--text-muted);
  font-size: var(--text-small);
  padding: .5rem 0;
}

#add-intent-entry-btn, #add-profile-intent-entry-btn {
  width: 100%;
}

.seg {
  background: var(--bg-input);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  gap: 2px;
  padding: 2px;
  display: inline-flex;
}

.seg-btn {
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
  background: none;
  border: none;
  padding: .3rem .75rem;
}

.seg-btn.active {
  background: var(--primary);
  color: #fff;
  cursor: default;
}

.seg-btn:not(.active):hover {
  background: var(--border);
}

.seg-full {
  width: 100%;
  display: flex;
}

.seg-full > .seg-btn {
  flex: 1;
  min-width: 0;
}

.seg-rows {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  flex-shrink: 0;
  gap: .375rem;
  width: 100%;
  padding: .375rem .5rem;
  display: flex;
}

.seg-row {
  background: var(--bg-input);
  border-radius: var(--radius-pill);
  gap: 2px;
  padding: 2px;
  display: flex;
}

.seg-row > .seg-btn {
  flex: 1;
  min-width: 0;
}

.seg-row > .seg-btn > i {
  font-size: var(--text-caption);
}

.seg-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  align-items: center;
  padding: .5rem;
  display: flex;
}

.seg-panel {
  display: none;
}

.seg-panel.active {
  display: block;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: .75rem;
}

.page {
  flex: 1;
  padding-bottom: 4rem;
  overflow: hidden auto;
}

.navbar {
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  height: 65px;
  max-width: var(--max-width);
  z-index: var(--z-sticky);
  align-items: stretch;
  margin: 0 auto;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.nav-item, .nav-item:visited {
  color: var(--text-muted);
  font-size: var(--text-caption);
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: .125rem;
  padding: .375rem 0;
  text-decoration: none;
  display: flex;
  position: relative;
}

.nav-item i {
  font-size: var(--icon-md);
}

.nav-item.active, .nav-item.active:visited, .nav-item.active:hover, .nav-item.active:active {
  color: #fff;
  background: var(--primary);
}

@media (hover: hover) {
  .nav-item:not(.active):hover {
    color: var(--text);
  }
}

.nav-badge {
  background: var(--primary);
  color: #fff;
  text-align: center;
  width: auto;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  line-height: 18px;
  font-weight: var(--weight-semibold);
  border-radius: 9px;
  padding: 0 4px;
  position: absolute;
  top: -4px;
  right: calc(50% - 25px);
}

.nav-item.active .nav-badge {
  outline: 2px solid #fff;
}

.list-item {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  display: flex;
}

.list-item:hover {
  background: var(--bg-input);
}

.list-item:active {
  background: var(--border);
}

.list-item.unread {
  background: #dc6e0a14;
}

.list-item-main {
  flex: 1;
  min-width: 0;
}

.list-item-top {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.list-item-bottom {
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: .125rem;
  display: flex;
}

.list-item-name {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.list-item.unread .list-item-name {
  color: var(--primary);
}

.list-item-preview {
  font-size: var(--text-small);
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.list-item.unread .list-item-preview {
  color: var(--text);
}

.list-item-time {
  font-size: var(--text-small);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.list-item-chevron {
  color: var(--text-muted);
  font-size: var(--text-small);
  flex-shrink: 0;
}

.view-frame {
  flex-direction: column;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.view-scroll {
  flex: 1;
  overflow-y: auto;
}

.page-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  display: flex;
}

.back-btn {
  color: var(--text);
  font-size: var(--icon-md);
  cursor: pointer;
  padding: var(--spacing-xs);
  background: none;
  border: none;
}

.page-title {
  font-weight: var(--weight-semibold);
  flex: 1;
}

@media (width >= 48rem) {
  .container, .navbar {
    max-width: var(--max-width);
  }
}

.login-container {
  height: 100%;
  min-height: 100%;
  padding: var(--spacing-lg);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow-y: auto;
}

.login-logo {
  width: 10rem;
  height: auto;
  margin-bottom: .5rem;
}

.login-title {
  font-size: var(--text-display);
  margin-bottom: .375rem;
}

.login-subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  text-wrap: balance;
}

.login-form {
  width: 100%;
  max-width: 22.5rem;
}

.apple-signin-divider {
  max-width: 400px;
  color: var(--text-muted);
  font-size: var(--text-small);
  align-items: center;
  gap: 1rem;
  margin: 1.5rem auto 0;
  display: flex;
}

.apple-signin-divider:before, .apple-signin-divider:after {
  content: "";
  background: var(--border);
  flex: 1;
  height: 1px;
}

.apple-signin-btn {
  color: #fff;
  border-radius: var(--radius);
  width: 100%;
  max-width: 400px;
  font-size: var(--text-body);
  cursor: pointer;
  transition: background var(--transition);
  background: #000;
  border: none;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin: .75rem auto 0;
  padding: .75rem 1.5rem;
  font-family: inherit;
  font-weight: 500;
  display: flex;
}

.apple-signin-btn:hover {
  background: #333;
}

.apple-signin-btn:disabled {
  cursor: not-allowed;
  background: #666;
}

.apple-signin-btn svg {
  flex-shrink: 0;
}

.onboarding-progress {
  background: var(--border);
  flex-shrink: 0;
  height: 4px;
}

.onboarding-progress-fill {
  background: var(--primary);
  width: 0;
  height: 100%;
  transition: width .3s;
}

.onboarding-step-label {
  font-size: var(--text-small);
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--spacing-sm);
}

.onboarding-step {
  max-width: 28rem;
  padding: var(--spacing-lg);
  margin: 0 auto;
}

.onboarding-step-title {
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  text-align: center;
  text-wrap: balance;
  margin-bottom: 1.5rem;
}

.onboarding-actions {
  gap: var(--spacing-lg);
  justify-content: center;
  margin-top: 1.5rem;
  display: flex;
}

.onboarding-gps-spinner {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  padding: 2rem 0;
  display: flex;
}

.onboarding-gps-success {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--success);
  font-weight: var(--weight-medium);
  padding: 1.5rem 0;
  display: flex;
}

.onboarding-gps-success i {
  font-size: var(--text-subhead);
}

.onboarding-skip {
  font-size: var(--text-body);
  text-align: center;
  margin-top: 1rem;
}

.onboarding-skip a {
  color: var(--text-secondary);
  text-decoration: none;
}

.onboarding-skip a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.required {
  color: var(--error);
}

.filters-page {
  height: 100dvh;
}

.filters-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  height: var(--header-height);
  flex-shrink: 0;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  display: flex;
}

.filters-header h1 {
  font-size: var(--text-subhead);
  font-weight: var(--weight-semibold);
  flex: 1;
  margin: 0;
}

.filters-page .seg-panel {
  padding: 1rem 1rem 5rem;
}

.browse-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  height: var(--header-height);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: .5rem;
  display: flex;
}

.browse-pill {
  min-width: 5.5rem;
  padding: var(--spacing-xs) 1rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-small);
  cursor: pointer;
  transition: all var(--transition);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .125rem;
  display: flex;
}

.browse-pill:hover {
  border-color: var(--text-secondary);
  color: var(--text);
}

.browse-pill i {
  font-size: var(--text-caption);
}

.browse-pill-main {
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.browse-pill-label {
  font-size: var(--text-caption);
  color: var(--text-muted);
  line-height: 1;
}

.browse-grid {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: min-content;
  align-content: start;
  gap: 2px;
  padding: 0;
  display: grid;
}

.browse-grid-compact .browse-card-info {
  display: none;
}

.browse-grid-compact .browse-card-name {
  font-size: .65rem;
}

.browse-grid-compact .browse-card-details {
  font-size: .55rem;
}

.browse-grid-compact .browse-card-overlay {
  padding: 1rem .25rem .125rem;
}

.browse-grid > .empty-state, .browse-grid > .loading {
  grid-column: 1 / -1;
}

.browse-card {
  background: var(--bg-card);
  cursor: pointer;
  flex-direction: column;
  justify-self: center;
  width: 100%;
  max-width: 512px;
  display: flex;
  overflow: hidden;
}

.browse-card:active {
  opacity: .8;
}

.browse-card-photo {
  background: var(--bg-input);
  flex-shrink: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.browse-card-photo:before {
  content: "";
  padding-top: 100%;
  display: block;
}

.browse-card-photo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.browse-card-placeholder {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.browse-card-placeholder i {
  color: var(--text-muted);
  font-size: 2rem;
}

.browse-card-overlay {
  color: #fff;
  z-index: var(--z-overlay);
  background: linear-gradient(to top, #000000b3 0%, #0000 100%);
  padding: 1.5rem .375rem .25rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.browse-card-name {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  text-shadow: 0 1px 3px #00000080;
  line-height: 1.1;
}

.browse-card-details {
  font-size: var(--text-small);
  font-weight: var(--weight-normal);
  opacity: .9;
  text-shadow: 0 1px 3px #00000080;
  white-space: nowrap;
  align-items: center;
  margin-top: .0625rem;
  display: flex;
  overflow: hidden;
}

.browse-card-details > span:first-child {
  text-overflow: clip;
  min-width: 0;
  overflow: hidden;
}

.browse-card-details > .ai-badge {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: .25rem;
}

.ai-badge {
  opacity: .85;
  vertical-align: middle;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  display: inline-block;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Ccircle cx='12' cy='1' r='1.25'/%3E%3Cline x1='12' y1='2.25' x2='12' y2='3.5' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3Crect x='4' y='3.5' width='16' height='9' rx='2' fill='none' stroke='%23000' stroke-width='2.25'/%3E%3Ccircle cx='9' cy='8' r='1.75'/%3E%3Ccircle cx='15' cy='8' r='1.75'/%3E%3Cline x1='4' y1='8' x2='1.5' y2='8' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3Ccircle cx='1' cy='8' r='1.25'/%3E%3Cline x1='20' y1='8' x2='22.5' y2='8' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3Ccircle cx='23' cy='8' r='1.25'/%3E%3Cpath d='M3 25L3 21Q3 17 7 17L17 17Q21 17 21 21L21 25' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3Ccircle cx='8.5' cy='21' r='1.35'/%3E%3Ccircle cx='12' cy='21' r='1.35'/%3E%3Ccircle cx='15.5' cy='21' r='1.35'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
}

.browse-card-info {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  padding: 0 .5rem .75rem .375rem;
}

.browse-load-more-sentinel {
  grid-column: 1 / -1;
  height: 1px;
}

.discovery-wrapper {
  flex-direction: column;
  height: 100%;
  margin-bottom: -5rem;
  padding-bottom: 5rem;
  display: flex;
  overflow: hidden;
}

.discovery-scroll {
  flex: 1;
  padding: .75rem;
  overflow-y: auto;
}

.discovery-controls {
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-direction: column;
  flex-shrink: 0;
  gap: .5rem;
  width: 100%;
  max-width: 25rem;
  margin: 0 auto;
  padding: .75rem;
  display: flex;
}

.profile-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
}

.profile-photo {
  aspect-ratio: 1;
  background: var(--bg-input);
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  overflow: hidden;
}

.profile-photo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.profile-photo i {
  color: var(--text-muted);
  font-size: 4rem;
}

.profile-info {
  padding: 1rem;
}

.profile-name {
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
}

.profile-age {
  font-weight: var(--weight-normal);
  color: var(--text-secondary);
}

.profile-location, .profile-gender {
  color: var(--text-secondary);
  margin-top: .125rem;
}

.profile-bio {
  color: var(--text-secondary);
  margin-top: .625rem;
}

.profile-details {
  flex-direction: column;
  gap: .5rem;
  margin-top: 1rem;
  display: flex;
}

.profile-detail {
  font-size: var(--text-body);
  color: var(--text-secondary);
  align-items: center;
  gap: .75rem;
  display: flex;
}

.profile-detail i {
  text-align: center;
  width: 1.25rem;
  color: var(--text-muted);
  font-size: var(--text-body);
}

.profile-detail span {
  flex: 1;
}

.profile-card-container {
  flex-direction: column;
  gap: .75rem;
  max-width: 500px;
  margin: 0 auto;
  display: flex;
}

.profile-photo-block {
  aspect-ratio: 1;
  background: var(--bg-input);
  border-radius: 0;
  width: 100%;
  max-width: 500px;
  overflow: hidden;
}

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

.profile-info-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1rem;
}

.profile-view-wrapper {
  flex-direction: column;
  height: 100dvh;
  display: flex;
  overflow: hidden;
}

.profile-view-scroll {
  flex: 1;
  padding: .75rem;
  overflow-y: auto;
}

.profile-view-actions {
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  justify-content: center;
  gap: 2rem;
  display: flex;
}

.btn-action {
  width: var(--size-button-xl);
  height: var(--size-button-xl);
  font-size: 1.25rem;
}

.btn-hide {
  background: var(--bg-input);
  color: var(--system-gray);
  border: 2px solid var(--system-gray3);
}

.btn-hide:hover {
  background: var(--system-gray3);
  color: #fff;
}

.btn-favorite {
  background: var(--bg-card);
  color: var(--success);
  border: 2px solid var(--success);
}

.btn-favorite:hover {
  background: var(--success);
  color: #fff;
}

.profile-match-status {
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  display: flex;
}

.profile-match-status .match-date {
  color: var(--text-muted);
  font-size: var(--text-small);
}

.profile-match-status .btn-go-to-chat {
  font-size: var(--text-small);
  padding: .5rem 1rem;
}

.match-modal {
  text-align: center;
}

.match-modal h3 {
  font-size: var(--text-heading);
  margin-bottom: .5rem;
}

.match-modal p {
  color: var(--text-secondary);
  text-wrap: balance;
  margin-bottom: 1rem;
}

.match-celebration {
  background: linear-gradient(135deg, var(--primary), var(--success));
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1rem;
  animation: .6s matchPulse;
  display: flex;
}

.match-celebration i {
  color: #fff;
  font-size: 2rem;
}

@keyframes matchPulse {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.rating-controls {
  flex-direction: column;
  gap: .625rem;
  max-width: 25rem;
  margin: .75rem auto 0;
  padding: .75rem;
  display: flex;
}

.rating-value {
  text-align: center;
  font-size: 1.875rem;
  font-weight: var(--weight-semibold);
}

.rating-buttons {
  justify-content: center;
  gap: .75rem;
  display: flex;
}

.friend-item {
  gap: .5rem;
  padding: .25rem .75rem;
}

.friend-item.is-typing {
  background: #dc6e0a0d;
}

.avatar.friend-avatar {
  border-radius: 0;
}

.friend-main {
  flex: 1;
  min-width: 0;
}

.friend-top-row {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.friend-name {
  min-width: 0;
  font-weight: 600;
}

.friend-item.unread .friend-name {
  color: var(--primary);
}

.header-icon-btn {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-caption);
  opacity: .6;
  background: none;
  border: none;
  flex-shrink: 0;
  padding: .25rem;
  text-decoration: none;
  transition: opacity .15s, color .15s;
}

.header-icon-btn:hover {
  opacity: 1;
  color: var(--primary);
}

.chat-title .header-icon-btn {
  font-size: var(--text-small);
}

.friend-info {
  font-size: var(--text-small);
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.friend-meta {
  flex-shrink: 0;
  align-items: center;
  gap: .375rem;
  margin-left: auto;
  display: flex;
}

.friend-dot {
  font-size: var(--text-small);
  color: var(--text-muted);
}

.friend-bottom-row {
  align-items: center;
  gap: .5rem;
  margin-top: .25rem;
  display: flex;
}

.friend-preview {
  font-size: var(--text-small);
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
}

.friend-item.unread .friend-preview {
  color: var(--text);
}

.typing-preview {
  color: var(--text);
  font-style: italic;
}

.typing-dots:after {
  content: "";
  animation: 1.2s step-end infinite typing-dots;
}

@keyframes typing-dots {
  0% {
    content: "";
  }

  25% {
    content: ".";
  }

  50% {
    content: "..";
  }

  75% {
    content: "...";
  }
}

.friend-time {
  font-size: var(--text-small);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.friend-chevron {
  color: var(--text-muted);
  font-size: var(--text-small);
  flex-shrink: 0;
}

.unread-badge {
  background: var(--primary);
  color: #fff;
  font-size: var(--text-small);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  padding: .125rem .5rem;
  font-weight: 600;
}

.chat-container {
  height: 100dvh;
}

.chat-container.has-nav {
  height: calc(100dvh - 65px);
}

.chat-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  height: var(--header-height);
  flex-shrink: 0;
  align-items: center;
  gap: .75rem;
  padding: 0 .75rem;
  display: flex;
}

.chat-breadcrumb {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  align-items: center;
  gap: .25rem;
  padding: .5rem .75rem;
  display: flex;
  overflow: hidden;
}

.chat-crumb-sep {
  color: var(--text-muted);
  font-size: var(--text-small);
  -webkit-user-select: none;
  user-select: none;
  flex-shrink: 0;
}

.chat-crumb-leaf {
  font-size: var(--text-small);
  color: var(--primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
}

.chat-header--close-right {
  justify-content: space-between;
}

.chat-header--close-right .chat-title {
  flex: initial;
}

.chat-back {
  color: var(--text);
  font-size: var(--text-subhead);
  cursor: pointer;
  padding: var(--spacing-xs);
  background: none;
  border: none;
}

.chat-title {
  font-weight: var(--weight-semibold);
  flex: 1;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.avatar.chat-avatar {
  border-radius: 0;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.chat-avatar-overlay {
  color: #fff;
  background: linear-gradient(to top, #000000b3 0%, #0000 100%);
  padding: .75rem .1875rem .125rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.chat-avatar-name {
  font-size: var(--text-caption);
  text-shadow: 0 1px 3px #00000080;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 600;
  line-height: 1.1;
  display: -webkit-box;
  overflow: hidden;
}

.chat-avatar-arrow {
  text-shadow: 0 1px 3px #00000080;
  line-height: 1;
  position: absolute;
  top: 0;
  right: .125rem;
}

.chat-avatar-arrow i {
  color: #fff;
  font-size: .625rem;
}

.chat-profile-link {
  min-width: 0;
  color: inherit;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  display: flex;
}

.chat-messages {
  gap: var(--spacing-xs);
  flex-direction: column;
  padding: .75rem;
  display: flex;
}

.message {
  border-radius: var(--radius-sm);
  max-width: 80%;
  padding: .5rem .75rem;
}

.message-sent {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: .25rem;
  align-self: flex-end;
}

.message-received {
  background: var(--bg-card);
  border-bottom-left-radius: .25rem;
  align-self: flex-start;
}

.message-matchmaker {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  text-align: left;
  text-wrap: balance;
  max-width: 60%;
  color: var(--text-secondary);
  font-size: var(--text-small);
  align-self: center;
}

.matchmaker-label {
  font-size: var(--text-caption);
  color: var(--primary);
  margin-bottom: .25rem;
  font-weight: 600;
}

.message-time {
  font-size: var(--text-caption);
  opacity: .7;
  margin-top: .25rem;
}

.message-rejected {
  position: relative;
}

.rejected-pill {
  z-index: 1;
  font-size: var(--text-caption);
  color: #fff;
  border-radius: var(--radius-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  background: #d22;
  padding: .2rem .6rem;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.message-rejected .message-image-thumb {
  filter: blur(.35rem);
  pointer-events: none;
}

.message-approval {
  border: 1px solid var(--border);
  background: var(--bg-input);
  max-width: 100%;
}

.approval-card {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.approval-header {
  font-size: var(--text-small);
  color: var(--text-primary);
  font-weight: 600;
}

.approval-caption {
  font-size: var(--text-small);
  color: var(--text-secondary);
  font-style: italic;
}

.approval-text-preview {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.approval-moderation-pass {
  font-size: var(--text-small);
  color: var(--success);
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.approval-moderation-flagged {
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.moderation-pill {
  font-size: var(--text-caption);
  border-radius: var(--radius-full);
  padding: .125rem .5rem;
  font-weight: 600;
  display: inline-block;
}

.moderation-low {
  color: #b45309;
  background: #eab30826;
}

.moderation-medium {
  color: #c2410c;
  background: #f9731626;
}

.moderation-high {
  color: #dc2626;
  background: #ef444426;
}

.approval-actions {
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  display: flex;
}

.approval-actions .btn {
  flex: 1;
}

.msg-qa-quote {
  font-size: var(--text-small);
  color: var(--text-secondary);
  border-left: 2px solid;
  margin-bottom: .375rem;
  padding-left: .5rem;
  font-style: italic;
}

.msg-qa-quote-label {
  font-style: normal;
  font-weight: 600;
}

.message-sent .msg-qa-quote {
  color: #fffc;
  border-left-color: #ffffff80;
}

.msg-qa-quote-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.typing-indicator {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  align-self: flex-start;
  padding: .5rem .75rem;
  font-style: italic;
}

.ai-thinking {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  width: fit-content;
  color: var(--text-muted);
  align-self: flex-start;
  padding: .5rem .75rem;
}

.thinking-dots:after {
  content: "...";
  text-align: left;
  width: 1.5em;
  animation: 1.4s steps(4, end) infinite thinking-dots;
  display: inline-block;
}

@keyframes thinking-dots {
  0% {
    content: "";
  }

  25% {
    content: ".";
  }

  50% {
    content: "..";
  }

  75%, 100% {
    content: "...";
  }
}

.chat-input-container {
  gap: var(--spacing-xs);
  padding: .75rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
}

.chat-input {
  flex: 1;
}

.chat-send {
  width: var(--size-button-md);
  height: var(--size-button-md);
}

.chat-photo-btn {
  width: var(--size-button-md);
  height: var(--size-button-md);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.message-images {
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.message-image-thumb {
  object-fit: cover;
  cursor: pointer;
  border-radius: 0;
  width: 5rem;
  height: 5rem;
}

.chat-image-picker {
  background: var(--bg);
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.chat-image-picker-body {
  flex-direction: column;
  flex: 1;
  gap: .75rem;
  min-height: 0;
  padding: .75rem;
  display: flex;
  overflow-y: auto;
}

.chat-image-picker-grid {
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.chat-image-picker-tile {
  cursor: pointer;
  border-radius: 0;
  width: 5rem;
  height: 5rem;
  position: relative;
  overflow: hidden;
}

.chat-image-picker-tile img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.chat-image-picker-check {
  color: #fff;
  background: #00000080;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: .6rem;
  display: none;
  position: absolute;
  top: .2rem;
  right: .2rem;
}

.chat-image-picker-tile.selected .chat-image-picker-check {
  background: var(--error);
  display: flex;
}

.chat-image-picker-loading {
  justify-content: center;
  width: 100%;
  padding: 2rem;
  display: flex;
}

.chat-image-picker-uploading {
  text-align: center;
  width: 100%;
  color: var(--text-secondary);
  font-size: var(--text-small);
  flex-direction: column;
  gap: .5rem;
  padding: .75rem 1rem;
  display: flex;
}

.upload-progress-track {
  background: var(--border);
  border-radius: 1rem;
  width: 100%;
  height: .375rem;
  overflow: hidden;
}

.upload-progress-fill {
  background: var(--primary);
  border-radius: 1rem;
  height: 100%;
  transition: width .3s;
}

.ai-uploading {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  width: 10rem;
  color: var(--text-muted);
  flex-direction: column;
  align-self: flex-start;
  gap: .25rem;
  padding: .5rem .75rem;
  display: flex;
}

.ai-uploading-label {
  font-size: var(--text-caption);
}

.ai-upload-indeterminate {
  width: 30%;
  transition: none;
  animation: 1.5s ease-in-out infinite indeterminate-slide;
}

@keyframes indeterminate-slide {
  0% {
    margin-left: 0;
  }

  50% {
    margin-left: 70%;
  }

  100% {
    margin-left: 0;
  }
}

.messages-container {
  padding: 0;
}

.messages-header {
  font-size: var(--text-heading);
  border-bottom: 1px solid var(--border);
  padding: 1rem;
  font-weight: 600;
}

.message-item {
  padding: .875rem 1rem;
}

.message-item-content {
  flex: 1;
  min-width: 0;
}

.message-item-header {
  align-items: baseline;
  gap: .5rem;
  display: flex;
}

.message-item-name {
  flex-shrink: 0;
  font-weight: 600;
}

.message-item.unread .message-item-name {
  color: var(--primary);
}

.message-item-preview {
  font-size: var(--text-body);
  color: var(--text-secondary);
  margin-top: .125rem;
}

.message-item.unread .message-item-preview {
  color: var(--text);
}

.message-item-chevron {
  color: var(--text-muted);
  font-size: var(--text-small);
}

.page:has(.profile-edit-container) {
  overflow: hidden;
}

.profile-edit-container .seg-panel {
  padding: 1rem 1rem 5rem;
}

.profile-edit-container .seg-panel#tab-view {
  padding: 0;
}

.profile-edit-form {
  flex-direction: column;
  gap: .875rem;
  max-width: 31.25rem;
  margin: 0 auto;
  display: flex;
}

.profile-edit-form > .input-group + .input-group {
  margin-top: 0;
}

.primary-photo-container {
  margin-bottom: 1rem;
}

.primary-photo {
  cursor: pointer;
  background: var(--bg-input);
  border-radius: 0;
  width: 9.375rem;
  height: 9.375rem;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.primary-photo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.primary-photo-overlay {
  opacity: 0;
  transition: opacity var(--transition);
  background: #0006;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.primary-photo:hover .primary-photo-overlay {
  opacity: 1;
}

.primary-photo-overlay i {
  color: #fff;
  font-size: 2rem;
}

.primary-photo-placeholder {
  border: .125rem dashed var(--border);
  cursor: pointer;
  width: 9.375rem;
  height: 9.375rem;
  color: var(--text-muted);
  transition: all var(--transition);
  border-radius: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin: 0 auto;
  display: flex;
}

.primary-photo-placeholder:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.primary-photo-placeholder i {
  font-size: var(--text-display);
}

.primary-photo-placeholder span {
  font-size: var(--text-body);
}

.photos-section {
  margin-bottom: 1rem;
}

.photos-section > label {
  margin-bottom: .75rem;
  font-weight: 500;
  display: block;
}

.photo-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  display: grid;
}

.photo-grid-loading {
  grid-column: 1 / -1;
  justify-content: center;
  padding: 2rem;
  display: flex;
}

.photo-item {
  cursor: pointer;
  background: var(--bg-input);
  position: relative;
  overflow: hidden;
}

.photo-item:before {
  content: "";
  padding-top: 100%;
  display: block;
}

.photo-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.photo-pending-placeholder {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--text-tertiary);
  font-size: var(--font-sm);
  flex-direction: column;
  display: flex;
  position: absolute;
  inset: 0;
}

.about-photo-pending {
  background: var(--bg-input);
  justify-content: center;
  align-items: center;
  display: flex;
}

.photo-item-actions {
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.photo-item:hover .photo-item-actions {
  opacity: 1;
}

.photo-item-actions .photo-action-btn {
  pointer-events: auto;
  position: absolute;
}

.photo-up-btn {
  top: .375rem;
  left: .375rem;
}

.photo-first-btn {
  top: .375rem;
  left: 2.75rem;
}

.photo-last-btn {
  top: .375rem;
  right: 2.75rem;
}

.photo-down-btn {
  top: .375rem;
  right: .375rem;
}

.photo-delete-btn {
  bottom: .375rem;
  right: .375rem;
}

.photo-action-btn {
  color: #fff;
  width: var(--size-button-sm);
  height: var(--size-button-sm);
  font-size: var(--text-small);
  background: #00000080;
}

.photo-action-btn:hover {
  background: #000000b3;
  transform: none;
}

.photo-action-btn:active {
  transform: none;
}

.photo-delete-btn:hover {
  background: var(--error);
}

.photo-avatar-btn:hover {
  background: var(--primary);
}

.photo-up-btn:hover, .photo-down-btn:hover {
  background: var(--text-secondary);
}

.photo-primary-badge, .photo-number-badge {
  bottom: var(--spacing-xs);
  left: var(--spacing-xs);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  z-index: var(--z-overlay);
  background: #0009;
  padding: .125rem .5rem;
  font-weight: 600;
  position: absolute;
}

.photo-add-btn {
  border: .125rem dashed var(--border);
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-small);
  transition: all var(--transition);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  display: flex;
  position: relative;
}

.photo-add-btn:before {
  content: "";
  padding-top: 100%;
  display: block;
}

.photo-add-btn > * {
  position: absolute;
}

.photo-add-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.photo-add-btn i {
  font-size: var(--icon-md);
}

.photo-add-btn.uploading {
  pointer-events: none;
  opacity: .7;
}

.photo-upload-btn {
  border: .125rem dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-small);
  text-align: center;
  transition: all var(--transition);
  background: var(--bg-input);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: 1.5rem 1rem;
  display: flex;
}

.photo-upload-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #dc6e0a0d;
}

.photo-upload-btn.drag-over {
  border-color: var(--primary);
  color: var(--primary);
  background: #dc6e0a1a;
  border-style: solid;
}

.photo-upload-btn i {
  font-size: 1.5rem;
}

.photo-upload-btn span {
  line-height: 1.4;
}

.photo-upload-btn.uploading {
  pointer-events: none;
  opacity: .7;
}

.photo-grid-vertical .photo-upload-btn {
  width: 100%;
  max-width: 300px;
}

.photo-grid-vertical {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.photo-grid-vertical .photo-item-wrapper, .photo-grid-vertical .photo-add-btn {
  width: 100%;
  max-width: 300px;
}

.photos-section-vertical {
  max-width: 400px;
  margin: 0 auto;
}

.about-photos-strip {
  flex-wrap: nowrap;
  gap: .375rem;
  display: flex;
  overflow: hidden;
}

.about-photo-tile {
  background: var(--bg-input);
  flex-shrink: 0;
  width: 4.125rem;
  height: 4.125rem;
  overflow: hidden;
}

.about-photo-tile img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.about-photo-upload {
  border: .125rem dashed var(--border);
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-subhead);
  transition: all var(--transition);
  justify-content: center;
  align-items: center;
  display: flex;
}

.about-photo-upload:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #dc6e0a0d;
}

.about-photo-upload.drag-over {
  border-color: var(--primary);
  color: var(--primary);
  background: #dc6e0a1a;
  border-style: solid;
}

.about-photo-existing {
  cursor: pointer;
}

.preferences-container {
  padding: .75rem .75rem 5rem;
}

.preference-section {
  margin-bottom: 1rem;
}

.preference-row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: .25rem;
  display: flex;
}

.preference-row .group-label {
  font-size: var(--text-body);
  color: var(--text-secondary);
  font-weight: 700;
}

.preference-row .range-values {
  font-size: var(--text-body);
  color: var(--text);
  align-items: center;
  gap: .25rem;
  display: flex;
}

.preference-row .save-indicator {
  margin-left: .25rem;
  position: static;
  transform: none;
}

.filter-label-with-any {
  font-size: var(--text-body);
  color: var(--text-secondary);
  cursor: pointer;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  display: flex;
}

.filter-label-with-any input[type="checkbox"] {
  width: var(--control-size);
  height: var(--control-size);
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.filter-label-with-any .save-indicator {
  margin-left: .5rem;
  position: static;
  transform: scale(0);
}

.filter-label-with-any .save-indicator.visible {
  animation: .25s cubic-bezier(.175, .885, .32, 1.5) forwards indicatorSlamStatic;
}

.filter-value {
  font-size: var(--text-body);
  color: var(--text);
}

input[type="range"]:disabled {
  opacity: .4;
  cursor: not-allowed;
}

#kids-secondary-filters > .input-group:first-child, #kids-secondary-filters + .input-group {
  margin-top: .9375rem;
}

.pub-wrapper {
  background: var(--bg);
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  position: relative;
  overflow: hidden auto;
}

.pub-wrapper--inline {
  height: auto;
  min-height: auto;
  overflow: visible;
}

.pub-loading {
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

.pub-close-btn {
  z-index: var(--z-modal);
  position: fixed;
  top: .75rem;
  right: .75rem;
}

.pub-close-btn:hover {
  transform: scale(1.1);
}

.pub-close-btn--left {
  left: .75rem;
  right: auto;
}

.pub-wrapper.flipping {
  will-change: transform;
  z-index: 1;
  position: relative;
  overflow: hidden;
}

.pub-flip-reveal {
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.pub-flip-reveal--pass, .pub-flip-reveal--interested {
  background: var(--bg);
}

.pub-flip-reveal-grid {
  flex-direction: column;
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: 5px;
  display: flex;
  overflow: hidden;
}

.pub-flip-reveal-grid span {
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: .15;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  line-height: 1;
  transition: opacity .15s, transform .15s;
  display: flex;
}

.pub-flip-reveal--pass .pub-flip-reveal-grid span {
  color: var(--system-gray);
}

.pub-flip-reveal--interested .pub-flip-reveal-grid span {
  color: var(--success);
}

.pub-flip-reveal--confirmed .pub-flip-reveal-grid span {
  opacity: .6;
  animation: .3s cubic-bezier(.175, .885, .32, 1.275) revealPop;
}

@keyframes revealPop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(.82);
  }

  100% {
    transform: scale(1);
  }
}

.pub-nav-btn {
  z-index: var(--z-modal);
  width: var(--size-button-md);
  height: var(--size-button-md);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition);
  background: #00000080;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  display: flex;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

.pub-nav-btn:hover {
  background: #000000b3;
  transform: translateY(-50%)scale(1.1);
}

.pub-nav-prev {
  left: .5rem;
}

.pub-nav-next {
  right: .5rem;
}

.pub-wrapper:hover .pub-nav-btn {
  opacity: 1;
}

.pub-nav-btn:focus {
  opacity: 1;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (hover: none) {
  .pub-nav-btn {
    display: none;
  }
}

.pub-hero {
  background: var(--bg-input);
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding-top: min(100%, 500px);
  position: relative;
  overflow: hidden;
}

.pub-hero-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pub-hero-placeholder {
  background: linear-gradient(135deg, var(--bg-input), var(--bg-card));
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.pub-hero-placeholder i {
  color: var(--text-muted);
  font-size: 6rem;
}

.pub-hero-overlay {
  color: #fff;
  background: linear-gradient(to top, #000000d9 0%, #00000080 60%, #0000 100%);
  padding: 2rem .75rem .5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.pub-hero-name {
  font-size: var(--text-display);
  text-shadow: 0 2px 8px #00000080;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  display: flex;
}

.pub-hero-details {
  font-size: var(--text-body);
  opacity: .9;
  justify-content: space-between;
  align-items: center;
  margin-top: .125rem;
  display: flex;
}

.pub-content {
  flex: 1;
  padding: 1rem;
}

.pub-headline {
  font-size: var(--text-lead);
  color: var(--primary);
  margin-bottom: .75rem;
  font-weight: 500;
  line-height: 1.4;
}

.pub-disclosure-badges {
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
  display: flex;
}

.pub-disclosure-badge {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) .75rem;
  font-size: var(--text-small);
  color: var(--primary);
  background: linear-gradient(135deg, #dc6e0a26, #b450a026);
  border: 1px solid #dc6e0a4d;
  border-radius: 1rem;
  font-weight: 500;
  display: inline-flex;
}

.pub-disclosure-badge i {
  font-size: var(--text-caption);
}

.pub-bio {
  font-size: var(--text-body);
  color: var(--text);
  white-space: pre-wrap;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.pub-section {
  background: var(--bg-card);
  border-radius: var(--radius);
  margin-bottom: .875rem;
  overflow: hidden;
}

.pub-section-header {
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--text);
  align-items: center;
  gap: .625rem;
  padding: .875rem 1rem;
  display: flex;
}

.pub-section-header i {
  color: var(--primary);
  text-align: center;
  width: 1.25rem;
}

.pub-section-content {
  padding: .875rem 1rem;
}

.pub-info-grid {
  flex-direction: column;
  gap: .625rem;
  display: flex;
}

.pub-info-row {
  font-size: var(--text-body);
  align-items: center;
  gap: .75rem;
  display: flex;
}

.pub-info-row i {
  text-align: center;
  width: 1.25rem;
  color: var(--text-muted);
  font-size: var(--text-small);
}

.pub-info-label {
  color: var(--text-secondary);
  min-width: 6.5rem;
  font-weight: 600;
}

.pub-info-value {
  color: var(--text);
  text-wrap: balance;
  flex: 1;
  font-weight: 500;
}

.pub-chips {
  flex-wrap: wrap;
  gap: .5rem;
  display: flex;
}

.pub-chip {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  color: var(--text);
  transition: all var(--transition);
  padding: .5rem .875rem;
}

.pub-interest-grid {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.pub-interest-card {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  flex-direction: row;
  align-items: center;
  gap: .625rem;
  padding: .625rem .875rem;
  display: flex;
}

.pub-interest-card:hover {
  background: var(--border);
}

.pub-interest-card i {
  font-size: var(--icon-md);
  color: var(--primary);
}

.pub-interest-card span {
  font-size: var(--text-small);
  color: var(--text);
  word-break: break-word;
  line-height: 1.2;
}

.pub-kids-group {
  flex-direction: column;
  gap: .25rem;
  display: flex;
}

.pub-children-list {
  flex-direction: column;
  gap: .125rem;
  padding-left: 2rem;
  display: flex;
}

.pub-child-row {
  font-size: var(--text-small);
  color: var(--text-secondary);
  align-items: center;
  gap: .5rem;
  display: flex;
}

.pub-child-row i {
  text-align: center;
  width: 1rem;
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.pub-lifestyle-meters {
  flex-direction: column;
  gap: .75rem;
  display: flex;
}

.pub-lifestyle-meter {
  align-items: center;
  gap: .75rem;
  display: flex;
}

.pub-meter-label {
  min-width: 5rem;
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.pub-meter-track {
  background: var(--bg-input);
  border-radius: .25rem;
  flex: 1;
  height: .5rem;
  overflow: hidden;
}

.pub-meter-fill {
  background: var(--primary);
  border-radius: .25rem;
  height: 100%;
  transition: width .3s;
}

.pub-meter-value {
  text-align: right;
  min-width: 5.5rem;
  font-size: var(--text-small);
  color: var(--text);
  font-weight: 500;
}

.pub-lifestyle-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: .625rem;
  display: grid;
}

.pub-lifestyle-item {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  justify-content: space-between;
  align-items: center;
  padding: .5rem .75rem;
  display: flex;
}

.pub-lifestyle-label {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.pub-lifestyle-value {
  font-size: var(--text-small);
  border-radius: var(--radius-sm);
  padding: .125rem .5rem;
  font-weight: 500;
}

.pub-lifestyle-never {
  color: var(--success);
  background: #10b9811a;
}

.pub-lifestyle-low {
  color: var(--text);
  background: #ffffff0d;
}

.pub-lifestyle-medium {
  color: var(--warning, #f59e0b);
  background: #f59e0b1a;
}

.pub-lifestyle-high {
  color: var(--primary);
  background: #dc6e0a1a;
}

.pub-photos-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  display: grid;
}

.pub-photo-item {
  aspect-ratio: 1;
  background: var(--bg-input);
  border-radius: 0;
  overflow: hidden;
}

.pub-photo-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.pub-photo-block {
  border-radius: 0;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 1rem;
  overflow: hidden;
}

.pub-photo-block img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

.pub-photo-caption {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  text-align: center;
  padding: var(--spacing-xs) 0;
  font-style: italic;
}

.pub-end-text {
  text-align: center;
  padding: var(--spacing-lg) 0;
  color: var(--text-muted);
  font-size: var(--text-small);
  text-wrap: balance;
}

.pub-inline-actions {
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1rem 0;
  display: flex;
}

.pub-action-buttons {
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  display: flex;
}

.pub-action-group {
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  display: flex;
}

.pub-action-label {
  font-size: var(--text-caption);
  color: var(--text-muted);
  text-align: center;
}

.pub-action-btn {
  width: var(--size-button-xl);
  height: var(--size-button-xl);
  font-size: var(--text-subhead);
}

.pub-action-hide {
  background: var(--bg-card);
  color: var(--system-gray);
  border: 2px solid var(--system-gray3);
}

.pub-action-hide:hover {
  background: var(--system-gray3);
  color: #fff;
}

.pub-action-favorite {
  background: var(--bg-card);
  color: var(--success);
  border: 2px solid var(--success);
}

.pub-action-favorite:hover {
  background: var(--success);
  color: #fff;
}

.pub-action-sent {
  background: var(--system-gray3);
  color: #fff;
  border: 2px solid var(--system-gray3);
  cursor: default;
}

.pub-action-matched {
  background: var(--success);
  color: #fff;
  border: 2px solid var(--success);
  opacity: .7;
  cursor: default;
}

.pub-action-chat {
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--primary);
}

.pub-action-chat:hover {
  background: var(--primary-light);
  border-color: var(--primary-light);
}

.pub-status-badge {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: #fff;
  border-radius: var(--radius-pill);
  vertical-align: middle;
  align-items: center;
  gap: .25rem;
  padding: .125rem .5rem;
  display: inline-flex;
}

.pub-status-sent, .pub-status-interested {
  background: var(--sent);
}

.pub-status-matched {
  background: var(--success);
}

.pub-match-date {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.pub-safety-row {
  justify-content: center;
  padding: 1rem 0 2rem;
  display: flex;
}

.pub-safety-btn-inline {
  width: var(--size-button-md);
  height: var(--size-button-md);
  color: #fff;
  font-size: var(--text-body);
  cursor: pointer;
  transition: all var(--transition);
  background: #00000080;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.pub-safety-btn-inline:hover {
  background: #000000b3;
  transform: scale(1.1);
}

.pub-preview-separator {
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-card) 50%, var(--bg) 100%);
  height: 2rem;
  margin-bottom: .875rem;
  position: relative;
}

.pub-preview-separator:after {
  content: "";
  background: var(--border);
  height: 1px;
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  transform: translateY(-50%);
}

.pub-preview-section {
  margin-bottom: 2rem;
}

.pub-preview-explainer {
  font-size: var(--text-small);
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 1.5rem;
}

.pub-preview-stack {
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  display: flex;
}

.pub-preview-item {
  text-align: center;
  width: 100%;
  max-width: 400px;
}

.pub-preview-label {
  font-size: var(--text-body);
  color: var(--text);
  margin-bottom: .75rem;
  font-weight: 600;
}

.pub-preview-card {
  display: inline-block;
}

.pub-preview-card-large {
  width: 350px;
  max-width: 100%;
}

.pub-preview-card-medium {
  width: 250px;
  max-width: 100%;
}

.pub-preview-card-small {
  width: 150px;
  max-width: 100%;
}

.pub-preview-card .browse-card {
  cursor: default;
  pointer-events: none;
}

.pub-preview-card .browse-card:active {
  opacity: 1;
}

@media (width <= 600px) {
  .pub-preview-card-large {
    width: 280px;
  }

  .pub-preview-card-medium {
    width: 200px;
  }

  .pub-preview-card-small {
    width: 120px;
  }
}

.image-viewer-overlay {
  z-index: 1000;
  background: #000000f2;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.image-viewer-img {
  object-fit: contain;
  touch-action: none;
  max-width: 100%;
  max-height: 100%;
}

.image-viewer-close {
  z-index: 1001;
  width: var(--size-button-md);
  height: var(--size-button-md);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--text-lead);
  cursor: pointer;
  transition: all var(--transition);
  background: #00000080;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  top: .75rem;
  right: .75rem;
}

.image-viewer-close:hover {
  background: #000000b3;
  transform: scale(1.1);
}

.image-viewer-prev, .image-viewer-next {
  z-index: 1001;
  width: var(--size-button-md);
  height: var(--size-button-md);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--text-lead);
  cursor: pointer;
  transition: all var(--transition);
  background: #00000080;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

.image-viewer-prev {
  left: .75rem;
}

.image-viewer-next {
  right: .75rem;
}

.image-viewer-prev:hover, .image-viewer-next:hover {
  background: #000000b3;
  transform: translateY(-50%)scale(1.1);
}

.image-viewer-counter {
  z-index: 1001;
  color: #fffc;
  font-size: var(--text-small);
  border-radius: var(--radius-full);
  background: #00000080;
  padding: .25rem .75rem;
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.action-sheet-overlay {
  z-index: var(--z-toast);
  background: #0006;
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: fixed;
  inset: 0;
}

.action-sheet {
  background: var(--bg-card);
  padding: .5rem;
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
  border-radius: 1rem 1rem 0 0;
  width: 100%;
  animation: .25s sheetSlideUp;
}

@keyframes sheetSlideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.action-sheet-header {
  font-size: var(--text-small);
  color: var(--text-muted);
  text-align: center;
  padding: .75rem 1rem .5rem;
  font-weight: 600;
}

.action-sheet-item {
  border-radius: var(--radius-sm);
  width: 100%;
  font-size: var(--text-body);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition);
  background: none;
  border: none;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  display: flex;
}

.action-sheet-item:hover {
  background: var(--bg-input);
}

.action-sheet-item i {
  text-align: center;
  width: 1.25rem;
}

.action-sheet-danger {
  color: var(--error);
}

.action-sheet-cancel {
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  border-radius: 0;
  justify-content: center;
  margin-top: .25rem;
}

.action-sheet-disabled {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

.action-sheet-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding: 0 1rem .5rem 3rem;
  display: block;
}

@media (width >= 30rem) {
  .action-sheet-overlay {
    align-items: center;
    padding: 1rem;
  }

  .action-sheet {
    border-radius: var(--radius);
    max-width: 20rem;
    animation: .2s modalSlideIn;
  }

  .pub-content {
    max-width: 32rem;
    margin: 0 auto;
    padding: 1.25rem;
  }

  .pub-hero-name {
    font-size: var(--text-display);
  }

  .pub-interest-grid, .pub-lifestyle-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .pub-photos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width >= 48rem) {
  .pub-content {
    max-width: 40rem;
  }
}

#app.legal-page-container {
  max-width: none;
  height: auto;
  box-shadow: none;
  overflow: visible;
}

.legal-page {
  background: var(--bg);
  flex-direction: column;
  min-height: 100dvh;
  display: flex;
}

.legal-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  padding: 1rem 1.5rem;
}

.legal-logo {
  color: var(--text);
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  display: flex;
}

.legal-logo img {
  width: auto;
  height: 32px;
}

.legal-logo-text {
  font-size: var(--text-lead);
  font-weight: 700;
}

.legal-content {
  flex: 1;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.legal-content h2 {
  font-size: var(--text-heading);
  color: var(--text);
  margin-bottom: .5rem;
  font-weight: 700;
}

.legal-content h3 {
  font-size: var(--text-lead);
  color: var(--text);
  margin-top: 2rem;
  margin-bottom: .75rem;
  font-weight: 600;
}

.legal-content p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.legal-content ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.legal-content li {
  color: var(--text-secondary);
  margin-bottom: .5rem;
  line-height: 1.6;
}

.legal-content a {
  color: var(--primary);
  text-decoration: none;
}

.legal-content a:hover {
  text-decoration: underline;
}

.legal-content a.btn-primary {
  color: #fff;
}

.legal-content a.btn:hover {
  text-decoration: none;
}

.legal-effective {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.legal-footer {
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  padding: 1.5rem;
}

.legal-footer a {
  color: var(--text-secondary);
  font-size: var(--text-small);
  text-decoration: none;
}

.legal-footer a:hover {
  color: var(--primary);
}

.legal-divider {
  color: var(--text-muted);
  margin: 0 .75rem;
}

.contact-content {
  text-align: center;
}

.contact-content h2 {
  margin-bottom: 1rem;
}

.contact-content > p {
  max-width: 500px;
  margin: 0 auto 2rem;
}

.contact-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  text-align: left;
  border: 1px solid var(--border);
  margin-bottom: 1rem;
  padding: 1.5rem;
}

.contact-card h3 {
  align-items: center;
  gap: .5rem;
  margin-top: 0;
  margin-bottom: .5rem;
  display: flex;
}

.contact-card h3 i {
  color: var(--primary);
}

.contact-card p {
  margin-bottom: .5rem;
}

.contact-card ul {
  margin-bottom: 0;
}

.contact-email {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  transition: background var(--transition);
  padding: .75rem 1.5rem;
  font-weight: 600;
  display: inline-block;
}

.contact-email:hover {
  background: var(--primary-dark);
  text-decoration: none;
}

.settings-actions {
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  max-width: 16rem;
  margin: 0 auto;
  display: flex;
}

.settings-actions .btn {
  width: 100%;
}

.settings-legal-links {
  text-align: center;
  font-size: var(--text-small);
  flex-direction: column;
  gap: .25rem;
  display: flex;
}

.settings-legal-links a {
  color: var(--text-secondary);
  text-decoration: none;
}

.settings-legal-links a:hover {
  color: var(--primary);
}

.settings-legal-divider {
  color: var(--text-muted);
  margin: 0 .5rem;
}

.notif-category-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--border);
  display: flex;
}

.notif-category-row:last-of-type {
  border-bottom: none;
}

.notif-category-info {
  flex: 1;
  min-width: 0;
}

.notif-category-info .checkbox-item {
  font-weight: 500;
}

.notif-category-info .field-hint {
  margin-top: .125rem;
  padding-left: 1.5rem;
}

.notif-cooldown-select {
  width: 5.5rem;
  font-size: var(--text-small);
  padding: var(--spacing-1) var(--spacing-2);
  flex-shrink: 0;
  margin-top: .125rem;
}

.notif-cooldown-select:disabled {
  opacity: .4;
}

.notif-section-divider {
  background: var(--border);
  height: 1px;
  margin: var(--spacing-3) 0;
}

.notif-quiet-hours {
  align-items: center;
  gap: var(--spacing-2);
  display: flex;
}

.notif-quiet-hours input {
  width: 7rem;
}

.notif-quiet-hours span {
  color: var(--text-secondary);
  font-size: var(--text-small);
}

.notif-save-indicator {
  text-align: right;
  margin-top: var(--spacing-2);
  display: block;
}

.btn-danger-outline {
  color: var(--error);
  border: 1px solid var(--error);
  background: none;
}

.btn-danger-outline:hover {
  background: #ef44441a;
}

.btn-danger-outline:disabled {
  color: var(--text-muted);
  border-color: var(--text-muted);
  cursor: not-allowed;
  background: none;
}

.btn-danger {
  background: var(--error);
  color: #fff;
  border: none;
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-danger:disabled {
  background: var(--text-muted);
  cursor: not-allowed;
}

.modal {
  z-index: 1000;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.modal-backdrop {
  background: #000000b3;
  position: absolute;
  inset: 0;
}

.modal-content {
  background: var(--bg-card);
  border-radius: var(--radius);
  width: 90%;
  max-width: 400px;
  max-height: 90vh;
  padding: 1.5rem;
  position: relative;
  overflow-y: auto;
}

.modal-content h3 {
  font-size: var(--text-subhead);
  color: var(--text);
  margin-bottom: 1rem;
  font-weight: 600;
}

.modal-content p {
  color: var(--text-secondary);
  margin-bottom: .75rem;
  line-height: 1.5;
}

.modal-warning {
  color: var(--error);
  font-weight: 500;
}

.modal-list {
  color: var(--text-secondary);
  margin: .75rem 0;
  padding-left: 1.25rem;
}

.modal-list li {
  margin-bottom: .25rem;
}

.modal-content .input {
  width: 100%;
  margin: .5rem 0 1rem;
}

.modal-actions {
  justify-content: flex-end;
  gap: .75rem;
  display: flex;
}

.modal-actions .btn {
  min-width: 100px;
}

.crop-editor-overlay {
  z-index: 1000;
  background: #000000f2;
  flex-direction: column;
  display: flex;
  position: fixed;
  inset: 0;
}

.crop-editor-toolbar {
  padding: .75rem 1rem;
  padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
  z-index: 1;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.crop-editor-title {
  color: #fff;
  font-weight: 600;
  font-size: var(--text-body);
}

.crop-editor-viewport {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.crop-editor-frame {
  pointer-events: none;
  z-index: 2;
  border: 2px solid #fffc;
  position: absolute;
  box-shadow: 0 0 0 9999px #00000080;
}

.crop-editor-image {
  transform-origin: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 1;
  position: absolute;
}

.photo-crop-btn {
  bottom: .375rem;
  left: 50%;
  transform: translateX(-50%);
}

.photo-crop-btn:hover {
  background: var(--primary);
}

.qs-description {
  color: var(--text-secondary);
  font-size: var(--text-body);
  text-wrap: balance;
  padding: .75rem 1rem 0;
  line-height: 1.4;
}

.qs-progress {
  font-size: var(--text-small);
  color: var(--text-muted);
  text-wrap: balance;
  padding: .5rem 1rem;
  font-weight: 600;
}

.pw-category-label {
  font-size: var(--text-small);
  color: var(--text-muted);
  padding: 0 1rem .25rem;
}

.qs-questions {
  flex-direction: column;
  gap: .75rem;
  padding: 0 .75rem 1rem;
  display: flex;
}

.qs-card {
  position: relative;
}

.qs-card-header {
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .25rem;
  display: flex;
  position: relative;
}

.qs-card-header .save-indicator {
  flex-shrink: 0;
  margin-left: auto;
  position: static;
  transform: scale(0);
}

.qs-card-header .save-indicator.visible {
  animation: .25s cubic-bezier(.175, .885, .32, 1.5) forwards indicatorSlamStatic;
}

.qs-card-num {
  color: var(--primary);
  flex-shrink: 0;
  font-weight: 700;
}

.qs-card-text {
  text-wrap: balance;
  font-weight: 600;
  line-height: 1.35;
}

.qs-card-help {
  font-size: var(--text-small);
  color: var(--text-muted);
  text-wrap: balance;
  margin-bottom: .5rem;
  padding-left: 1.5rem;
}

.qs-card-control {
  margin-top: .5rem;
}

.qs-textarea {
  resize: vertical;
  width: 100%;
  min-height: 4rem;
}

.qs-numeric-row {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.qs-number-input {
  max-width: 8rem;
}

.qs-unit {
  color: var(--text-secondary);
  font-size: var(--text-small);
}

.qs-date-input {
  max-width: 12rem;
}

.qs-scale-row {
  flex-wrap: wrap;
  gap: .375rem;
  display: flex;
}

.qs-scale-pill {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  min-width: 2.5rem;
  height: 2.5rem;
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.qs-scale-pill:hover {
  border-color: var(--primary);
}

.qs-scale-pill.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.qs-scale-labels {
  font-size: var(--text-caption);
  color: var(--text-muted);
  text-wrap: balance;
  justify-content: space-between;
  margin-top: .25rem;
  display: flex;
}

.qs-other-input {
  margin-top: .5rem;
}

.qs-card .radio-item, .qs-card .checkbox-item {
  text-wrap: balance;
}

.checkbox-group {
  flex-direction: column;
  gap: .125rem;
  display: flex;
}

.chat-tab-content {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: none;
}

.chat-tab-content.active {
  display: flex;
}

.pw-card {
  position: relative;
}

.pw-stacked {
  flex-direction: column;
  gap: .5rem;
  margin-top: .5rem;
  display: flex;
}

.pw-answer-col {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: .625rem;
}

.pw-answer-label {
  font-size: var(--text-caption);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .25rem;
  font-weight: 600;
}

.pw-answer-value {
  font-size: var(--text-body);
  color: var(--text);
  word-break: break-word;
  text-wrap: balance;
}

.pw-answer-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.pw-answer-header .pw-answer-label {
  margin-bottom: 0;
}

.pw-edit-btn, .pw-reply-btn {
  font-size: var(--text-caption);
  text-align: center;
  min-width: 3.5rem;
  padding: .125rem .375rem;
}

.pw-reply-area {
  margin-top: .5rem;
}

.pw-reply-input-row {
  align-items: center;
  gap: .375rem;
  display: flex;
}

.pw-reply-input {
  font-size: var(--text-small);
  flex: 1;
  padding: .375rem .5rem;
}

.qs-comment-area {
  margin-top: var(--spacing-3);
}

.qs-comment-label {
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-1);
}

.qs-comment-input {
  font-size: var(--text-small);
  width: 100%;
  padding: .375rem .5rem;
}

.pw-my-answer.editing .pw-answer-value {
  display: none;
}

.pw-my-answer.editing .pw-edit-area {
  display: block !important;
}

.pw-answer-empty .pw-answer-value {
  font-style: italic;
}

.pw-stacked.pw-answer-match {
  border: 1px solid var(--success);
  border-radius: var(--radius-sm);
  padding: .25rem;
}

.pw-stacked.pw-answer-match .pw-answer-col {
  background: #10b98114;
}

.save-btn-row {
  justify-content: center;
  margin-top: .5rem;
  display: flex;
}

.pw-lock-badge {
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  color: var(--primary);
  background: #dc6e0a1a;
  border: 1px solid #dc6e0a4d;
  align-items: center;
  gap: .375rem;
  margin-top: .25rem;
  margin-bottom: .25rem;
  padding: .25rem .75rem;
  font-weight: 500;
  display: inline-flex;
}

.pw-lock-badge i {
  font-size: var(--text-caption);
}

.pw-mod-badge {
  color: var(--text-secondary);
  background: var(--bg-input);
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 8px;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: .7rem;
  display: inline-flex;
}

.pw-mod-badge i {
  font-size: .6rem;
}

.pw-mod-pending {
  color: var(--primary);
  background: #dc6e0a1a;
}

.pw-mod-low-quality {
  color: var(--error);
  background: #ef44441a;
}

.pw-answer-comment {
  font-style: italic;
  font-size: var(--text-small);
  color: var(--text-secondary);
  word-break: break-word;
  text-wrap: balance;
  margin-top: .25rem;
}

.pw-ai-box {
  background: var(--bg-elevated, var(--bg-input));
  border-top: 1px solid var(--border);
}

.pw-ai-score {
  color: var(--primary);
  font-weight: 700;
  font-size: var(--text-body);
}

.pw-ai-loading .pw-answer-value {
  color: var(--text-muted);
  font-style: italic;
}

.pw-score-badge {
  color: #fff;
  z-index: 1;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  position: absolute;
  top: -8px;
  right: -8px;
}

.pw-score-0 {
  background: #e53e3e;
}

.pw-score-20 {
  background: #dd6b20;
}

.pw-score-40 {
  background: #d69e2e;
}

.pw-score-60 {
  background: #38a169;
}

.pw-score-80 {
  background: #2f855a;
}

.pw-set-item {
  cursor: pointer;
  position: relative;
}

.pw-set-badge {
  z-index: 1;
  font-size: var(--text-caption);
  position: absolute;
  top: .125rem;
  right: .125rem;
}

.pw-set-item .friend-preview {
  font-size: var(--text-caption);
}

.admin-tabs {
  padding: 0 var(--spacing-md);
  border-bottom: 1px solid var(--border);
  gap: 2px;
  display: flex;
  overflow-x: auto;
}

.admin-tab {
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--text-body);
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  padding: .625rem 1rem;
  font-weight: 500;
}

.admin-tab:hover {
  color: var(--text);
}

.admin-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.admin-stat-grid {
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  display: grid;
}

.admin-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
}

.admin-stat-value {
  font-size: 1.75rem;
  font-weight: var(--weight-bold);
}

.admin-stat-label {
  font-size: var(--text-small);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: .25rem;
}

.admin-filters {
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-md) var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.admin-filters select, .admin-filters input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-body);
  padding: .4375rem .625rem;
}

.admin-filters input {
  min-width: 12rem;
}

.admin-table-wrap {
  padding: 0 var(--spacing-md);
  overflow-x: auto;
}

.admin-table {
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  width: 100%;
  overflow: hidden;
}

.admin-table th, .admin-table td {
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body);
  padding: .625rem .875rem;
}

.admin-table th {
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--text-small);
  letter-spacing: .5px;
  white-space: nowrap;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-thumb {
  border-radius: var(--radius-sm);
  object-fit: cover;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
}

.admin-content-preview {
  -webkit-line-clamp: 2;
  max-width: 200px;
  font-size: var(--text-small);
  color: var(--text-secondary);
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.admin-avatar {
  object-fit: cover;
  background: var(--border);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
}

.admin-pagination {
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  justify-content: center;
  align-items: center;
  display: flex;
}

.admin-page-info {
  color: var(--text-muted);
  font-size: var(--text-body);
}

.admin-status-select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-small);
  padding: .25rem .5rem;
}

.admin-period-bar {
  padding: 0 var(--spacing-md) var(--spacing-sm);
  gap: .375rem;
  display: flex;
}

.admin-stats-section {
  padding: 0 var(--spacing-md) var(--spacing-lg);
}

.admin-section-title {
  color: var(--text-muted);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--spacing-sm);
}

.badge-success {
  color: var(--success);
  background: #34c75926;
}

.badge-danger {
  color: #ff3b30;
  background: #ff3b3026;
}

.badge-primary {
  color: var(--primary);
  background: #dc6e0a26;
}

.badge-info {
  color: #5ac8fa;
  background: #5ac8fa26;
}

.badge-muted {
  color: var(--text-muted);
  background: #8e8e9326;
}

.text-dim {
  color: var(--text-muted);
}

.photo-ai-caption {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  text-align: center;
  text-wrap: balance;
  padding: var(--spacing-xs) 0;
  font-style: italic;
}

.photo-meta-toggle {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--text-caption);
  color: var(--text-secondary);
  padding: var(--spacing-xs) 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  font-style: italic;
  display: flex;
}

.photo-meta-caption {
  text-align: center;
  text-wrap: balance;
}

.photo-meta-chevron {
  color: var(--text-muted);
  font-size: .6rem;
  transition: transform .2s;
  display: inline-flex;
}

.photo-meta-toggle.expanded .photo-meta-chevron {
  transform: rotate(180deg);
}

.photo-meta-detail {
  padding: 0 var(--spacing-sm) var(--spacing-xs);
  display: none;
}

.photo-meta-detail.expanded {
  display: block;
}

.photo-meta-row {
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-caption);
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding: 2px 0;
  display: flex;
}

.photo-meta-row:last-child {
  border-bottom: none;
}

.photo-meta-label {
  color: var(--text-muted);
  flex-shrink: 0;
}

.photo-meta-value {
  color: var(--text-primary);
  text-align: right;
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.photo-meta-score-bar {
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  vertical-align: middle;
  width: 48px;
  height: 6px;
  display: inline-block;
  overflow: hidden;
}

.photo-meta-score-fill {
  background: var(--primary);
  border-radius: var(--radius-full);
  height: 100%;
  display: block;
}

.photo-meta-scene {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  text-align: left;
  text-wrap: balance;
  margin: 2px 0 0;
  padding: 0;
  line-height: 1.3;
}

.knowledge-section {
  margin-bottom: .75rem;
  padding: 1rem;
}

.knowledge-textarea {
  white-space: pre;
  font-family: inherit;
  font-size: var(--text-small);
  line-height: 1.5;
  overflow-x: auto;
}

.knowledge-row {
  gap: .75rem;
  display: flex;
}

.knowledge-actions {
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  display: flex;
}

.fact-row {
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  display: flex;
}

.fact-row .fact-cat, .fact-row .fact-key {
  flex-shrink: 0;
  width: 8rem;
}

.fact-row .fact-val {
  flex: 1;
  min-width: 0;
}

.personality-axis {
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  display: flex;
}

.personality-axis-label {
  font-size: var(--text-small);
  color: var(--text-secondary);
  text-align: right;
  min-width: 5rem;
}

.personality-axis-label:last-of-type {
  text-align: left;
}

.personality-axis-range {
  accent-color: var(--primary);
  flex: 1;
}

.personality-axis-value {
  font-size: var(--text-small);
  text-align: center;
  min-width: 2rem;
  font-weight: 600;
}

html {
  font-size: 17px;
}

html.hp-active, body.hp-active {
  background: #f2f2f7 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.hp-bg-grid {
  top: 60px;
  left: 0;
  right: var(--scrollbar-width, 0);
  z-index: 0;
  grid-template-columns: repeat(var(--cols), 1fr);
  box-sizing: border-box;
  pointer-events: none;
  background: var(--text);
  align-content: start;
  gap: 5px;
  padding: 5px;
  display: grid;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}

.hp-bg-grid img {
  backface-visibility: hidden;
  width: 100%;
  height: auto;
  display: block;
}

.hp-bg-grid img.flipping {
  animation: .6s ease-in-out tile-flip;
}

@keyframes tile-flip {
  0% {
    transform: perspective(400px)rotateY(0);
  }

  49.9% {
    transform: perspective(400px)rotateY(90deg);
  }

  50% {
    transform: perspective(400px)rotateY(-90deg);
  }

  100% {
    transform: perspective(400px)rotateY(0);
  }
}

#app.hp-page {
  --text: #000;
  --text-secondary: #3c3c43;
  --text-muted: #8e8e93;
  --bg: #f2f2f7;
  --bg-card: #fff;
  --bg-input: #e5e5ea;
  --border: #d1d1d6;
  --hp-card-opacity: .94;
  max-width: var(--max-width);
  height: 100%;
  box-shadow: none;
  background: none;
  flex-direction: column;
  margin: 0 auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

#app.hp-page .hp-content {
  z-index: 2;
  flex-direction: column;
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden auto;
}

#app.hp-page .hp-content > .hp-hero {
  flex-direction: column;
  flex: 1 0 auto;
  justify-content: center;
  display: flex;
}

.hp-display {
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  letter-spacing: -.02em;
  text-wrap: balance;
  line-height: 1.1;
}

.hp-headline {
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  letter-spacing: -.01em;
  text-wrap: balance;
  line-height: 1.2;
}

.hp-subhead {
  font-size: var(--text-subhead);
  font-weight: var(--weight-normal);
  color: var(--text-secondary);
  text-wrap: balance;
  line-height: 1.4;
}

.hp-body {
  font-size: var(--text-body);
  font-weight: var(--weight-normal);
  text-wrap: balance;
  line-height: 1.5;
}

.hp-small {
  font-size: var(--text-small);
  font-weight: var(--weight-normal);
  color: var(--text-muted);
  text-wrap: balance;
  line-height: 1.4;
}

.hp-nav {
  z-index: 100;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  background: #fffffff2;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: .4rem 1rem;
  display: flex;
  position: relative;
}

.hp-nav-inner {
  align-items: center;
  display: flex;
}

.hp-nav-logo {
  align-items: center;
  text-decoration: none;
  display: flex;
}

.hp-nav-logo-img {
  width: auto;
  height: 20px;
}

.hp-nav-link {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  transition: color var(--transition);
  margin-right: 1rem;
  text-decoration: none;
}

.hp-nav-link:hover {
  color: var(--primary);
}

.hp-section {
  padding: 2rem 1rem;
}

.hp-section-card {
  z-index: 2;
  background: rgb(255 255 255 / var(--hp-card-opacity));
  color: #1a1a1a;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  backdrop-filter: grayscale() blur(2px);
  text-wrap: balance;
  padding: 2.5rem 1.5rem;
  position: relative;
  box-shadow: 0 2px 8px #0000000a;
}

.hp-section-card--dark {
  background: rgb(26 26 26 / var(--hp-card-opacity));
  color: var(--bg-card);
  border-color: var(--system-gray3);
  -webkit-backdrop-filter: grayscale() blur(2px);
}

.hp-section-card--dark .hp-subhead, .hp-section-card--dark .hp-small {
  color: #ffffffb3;
}

.hp-section-card--dark .hp-list li {
  color: #ffffffd9;
}

.hp-section-card--accent {
  background: rgb(220 110 10 / var(--hp-card-opacity));
  color: #fff;
  border-color: var(--primary-dark);
  -webkit-backdrop-filter: grayscale() blur(2px);
}

.hp-section-card--accent .hp-subhead {
  color: #ffffffd9;
}

.hp-section-card--gradient {
  background: linear-gradient(135deg, rgb(255 255 255 / var(--hp-card-opacity)) 0%, rgb(242 242 247 / var(--hp-card-opacity)) 100%);
  -webkit-backdrop-filter: grayscale() blur(2px);
}

.hp-section-card.legal-card {
  text-align: left;
  text-wrap: unset;
  max-width: 800px;
  margin: 0 auto;
}

.hp-section-card.legal-card h2 {
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  margin-bottom: .5rem;
}

.hp-section-card.legal-card h3 {
  font-size: var(--text-subhead);
  font-weight: var(--weight-semibold);
  margin-top: 1.5rem;
  margin-bottom: .75rem;
}

.hp-section-card.legal-card p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.hp-section-card.legal-card ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.hp-section-card.legal-card li {
  color: var(--text-secondary);
  margin-bottom: .5rem;
  line-height: 1.6;
}

.hp-section-card.legal-card a {
  color: var(--primary);
  text-decoration: none;
}

.hp-section-card.legal-card a:hover {
  text-decoration: underline;
}

.hp-section-card.legal-card a.btn {
  color: #fff;
}

.hp-section-card.legal-card a.btn:hover {
  text-decoration: none;
}

.hp-section-card.legal-card .legal-effective {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.hp-section-card.contact-content {
  text-align: center;
}

.hp-section-card.contact-content > p {
  max-width: 500px;
  margin: 0 auto 2rem;
}

.hp-section-card.contact-content .contact-card {
  background: var(--bg);
  border-radius: var(--radius);
  text-align: left;
  border: 1px solid var(--border);
  margin-bottom: 1rem;
  padding: 1.5rem;
}

.hp-section-card.contact-content .contact-card h3 {
  align-items: center;
  gap: .5rem;
  margin-top: 0;
  margin-bottom: .5rem;
  display: flex;
}

.hp-section-card.contact-content .contact-card h3 i {
  color: var(--primary);
}

.hp-section-card.contact-content .contact-card p {
  margin-bottom: .5rem;
}

.hp-section-card.contact-content .contact-card ul {
  margin-bottom: 0;
}

.hp-page {
  min-height: 100vh;
}

.hp-hero {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.hp-hero .hp-section-card {
  padding: 2rem 1.5rem;
}

.hp-hero-content {
  flex-direction: column;
  gap: 2rem;
  display: flex;
}

.hp-hero-text {
  text-align: center;
}

.hp-hero-tagline {
  font-size: var(--text-subhead);
  font-weight: var(--weight-normal);
  color: var(--text-secondary);
  text-wrap: balance;
  margin-bottom: .5rem;
}

.hp-hero-title {
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  letter-spacing: -.02em;
  text-wrap: balance;
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.hp-hero-title .highlight {
  color: var(--primary);
}

.hp-hero-subtitle {
  font-size: var(--text-subhead);
  font-weight: var(--weight-normal);
  color: var(--text-secondary);
  text-wrap: balance;
  margin-bottom: 2rem;
  line-height: 1.4;
}

.hp-hero-image {
  width: 100%;
  max-width: 320px;
  box-shadow: var(--shadow-lg);
  border: var(--border-image);
  border-radius: 0;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.hp-hero-image img {
  object-fit: cover;
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  display: block;
}

.hp-hero-image .hp-split-image-text {
  font-size: var(--text-heading);
  padding: .75rem 1.25rem;
}

.hp-cta-form {
  flex-direction: column;
  gap: .75rem;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
}

.hp-cta-form .input {
  font-size: var(--text-body);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 2px solid var(--border);
  padding: 1rem 1.25rem;
}

.hp-cta-form .input:focus {
  border-color: var(--primary);
}

.hp-cta-form .btn {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  padding: 1rem 2rem;
}

.hp-cta-hint {
  text-align: center;
  font-size: var(--text-small);
  color: var(--text-muted);
  text-wrap: balance;
}

.hp-split {
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  display: flex;
}

.hp-split--reverse {
  flex-direction: column;
}

.hp-split-image {
  width: 100%;
  max-width: 350px;
  box-shadow: var(--shadow-lg);
  border: var(--border-image);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.hp-split-image img {
  object-fit: cover;
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
  display: block;
}

.hp-split-image-overlay, .hp-image-overlay {
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  display: flex;
  position: absolute;
  inset: 0;
}

.hp-hero-image .hp-image-overlay, .hp-split-image .hp-image-overlay, .hp-split-image .hp-split-image-overlay {
  align-items: flex-end;
  padding-bottom: 10%;
}

.hp-split-image-text, .hp-image-text {
  color: #fff;
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  text-align: center;
  text-wrap: balance;
  letter-spacing: -.01em;
  border-radius: var(--radius-lg);
  background: #0000008c;
  padding: 1rem 1.5rem;
  line-height: 1.2;
}

.hp-split-text {
  text-align: center;
  text-wrap: balance;
}

.hp-split-text .hp-headline {
  margin-bottom: 1rem;
}

.hp-split-text .hp-subhead {
  margin-bottom: 1.5rem;
}

.hp-list {
  text-align: left;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-list li {
  font-size: var(--text-body);
  text-wrap: balance;
  margin-bottom: .75rem;
  padding-left: 1.75rem;
  line-height: 1.5;
  position: relative;
}

.hp-list li:before {
  content: "";
  background: var(--primary);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: .5rem;
  left: 0;
}

.hp-list--check li:before {
  content: "";
  color: var(--success);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: var(--text-small);
  background: none;
  top: .25rem;
}

.hp-list--x li:before {
  content: "";
  background: var(--text);
  color: var(--error);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: var(--text-small);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  top: .1rem;
}

.hp-list--white li:before {
  background: #fff;
}

.hp-list--black li:before {
  background: var(--text);
}

.hp-list--centered {
  text-align: left;
  display: inline-block;
}

.hp-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  padding: 2rem 1.5rem;
}

.hp-card .hp-headline {
  margin-bottom: 1rem;
}

.hp-card .hp-list {
  margin-top: 1.5rem;
}

.hp-centered {
  text-align: center;
  text-wrap: balance;
  max-width: 700px;
  margin: 0 auto;
}

.hp-centered .hp-headline {
  margin-bottom: 1rem;
}

.hp-centered .hp-subhead {
  margin-bottom: 1.5rem;
}

.hp-final-cta .hp-section-card {
  background-position: center;
  background-size: cover;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hp-final-cta .hp-section-card:before {
  content: "";
  border-radius: inherit;
  background: linear-gradient(135deg, #000000bf 0%, #0000008c 100%);
  position: absolute;
  inset: 0;
}

.hp-final-cta .hp-centered {
  z-index: 1;
  position: relative;
}

.hp-final-cta .hp-headline, .hp-final-cta .hp-subhead, .hp-final-cta .hp-body, .hp-final-cta .hp-list li {
  color: #fff;
  text-wrap: balance;
}

.hp-final-cta .hp-subhead {
  opacity: .9;
}

.hp-final-cta .hp-cta-form .input {
  background: #fffffff2;
}

.hp-footer {
  background: #1a1a1a;
  border-top: 1px solid #ffffff1a;
}

.hp-footer-inner {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  display: flex;
}

.hp-footer-logo {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.hp-footer-logo img {
  width: auto;
  height: 24px;
}

.hp-footer-logo-img {
  filter: brightness(0) invert();
  width: auto;
  height: 11px;
}

.hp-footer-text {
  font-size: var(--text-small);
  color: #fff9;
  margin: 0;
  line-height: 1.4;
}

.hp-footer-legal {
  font-size: var(--text-small);
}

.hp-footer-legal a {
  color: #fff9;
  transition: color var(--transition);
  text-decoration: none;
}

.hp-footer-legal a:hover {
  color: var(--primary);
}

.hp-footer-divider {
  color: #ffffff4d;
  margin: 0 .5rem;
}

.hp-emphasis {
  font-weight: var(--weight-bold);
}

.hp-strike {
  opacity: .6;
  text-decoration: line-through;
}

.hp-highlight {
  color: var(--primary);
}

.hp-section--dark .hp-highlight {
  color: var(--primary-light);
}

.hp-screenshot-swap {
  flex-shrink: 0;
  width: 160px;
  position: relative;
}

.hp-screenshot-swap img {
  border-radius: var(--radius);
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-lg);
  border: .1875rem solid #000;
  transition: opacity .6s;
}

.hp-screenshot-swap img:not(:first-child) {
  opacity: 0;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

.hp-screenshot-swap img.active {
  opacity: 1;
  z-index: 2;
}

.hp-screenshot-dots {
  z-index: 3;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  display: flex;
  position: relative;
}

.hp-screenshot-dot {
  opacity: .25;
  background: currentColor;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  transition: opacity .3s;
}

.hp-screenshot-dot.active {
  opacity: 1;
}

@media (width <= 767px) {
  .hp-display, .hp-hero-title {
    font-size: var(--text-display-mobile);
  }

  .hp-headline, .hp-split-image-text, .hp-image-text {
    font-size: var(--text-heading-mobile);
  }

  .hp-nav-logo-img {
    height: 13px;
  }

  .hp-subhead, .hp-hero-tagline, .hp-hero-subtitle {
    font-size: var(--text-subhead-mobile);
  }

  .hp-screenshot-swap {
    margin: 0 auto;
  }
}

@media (width >= 768px) {
  .hp-section {
    padding: 1.5rem 2rem;
  }

  .hp-section-card {
    border-radius: 2rem;
    padding: 3rem 2.5rem;
  }

  .hp-hero .hp-section-card {
    padding: 3rem 2.5rem;
  }

  .hp-hero-content {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }

  .hp-hero-text {
    text-align: left;
    flex: 1;
  }

  .hp-hero-image {
    flex: 0 280px;
    min-width: 200px;
    max-width: 280px;
  }

  .hp-cta-form {
    max-width: 400px;
    margin: 0;
  }

  .hp-split {
    flex-direction: row;
    gap: 4rem;
  }

  .hp-split--reverse {
    flex-direction: row-reverse;
  }

  .hp-split-image {
    flex: 0 0 40%;
    max-width: 400px;
  }

  .hp-split-text {
    text-align: left;
    flex: 1;
  }

  .hp-list--centered {
    display: block;
  }

  .hp-screenshot-swap {
    width: 200px;
  }
}

@media (width >= 1024px) {
  .hp-section {
    padding: 1.5rem 2rem;
  }

  .hp-section-card {
    border-radius: 2.5rem;
    padding: 4rem 3rem;
  }

  .hp-hero .hp-section-card {
    padding: 4rem 3rem;
  }

  .hp-hero-content {
    gap: 3rem;
  }

  .hp-hero-image {
    flex: 0 340px;
    min-width: 240px;
    max-width: 340px;
  }

  .hp-nav-inner {
    padding: .5rem 2rem;
  }
}

.cmp-table-card {
  padding: 1.5rem 0 !important;
}

.cmp-section {
  margin-bottom: .5rem;
}

.cmp-section:last-child {
  margin-bottom: 0;
}

.cmp-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-small);
  table-layout: fixed;
}

.cmp-table th, .cmp-table td {
  text-align: center;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  padding: .625rem .75rem;
}

.cmp-table thead th {
  background: var(--bg);
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
  vertical-align: bottom;
  letter-spacing: -.01em;
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.cmp-feature-th {
  width: 50%;
  text-align: left !important;
}

.cmp-feature-td {
  font-weight: var(--weight-medium);
  text-align: left !important;
}

.cmp-th-22q {
  width: 25%;
  color: var(--primary) !important;
  background: #fff7ed !important;
}

.cmp-td-22q {
  background: #fefcf9;
}

.cmp-th-bumble {
  color: var(--text-secondary);
  width: 25%;
}

.cmp-table th:first-child, .cmp-table td:first-child {
  z-index: 1;
  background: var(--bg-card);
  position: sticky;
  left: 0;
}

.cmp-table thead th:first-child {
  z-index: 3;
  background: var(--bg);
}

.cmp-overflow-row {
  display: none;
}

.cmp-cell {
  font-weight: var(--weight-medium);
  font-size: var(--text-small);
  align-items: center;
  gap: .3rem;
  display: inline-flex;
}

.cmp-yes {
  color: var(--success);
}

.cmp-paywall {
  color: #e67e22;
}

.cmp-no {
  color: var(--text-muted);
}

.cmp-price-tag {
  color: var(--error);
  font-weight: var(--weight-semibold);
}

.cmp-show-more-btn {
  border: none;
  border-bottom: 1px solid var(--border);
  width: 100%;
  color: var(--primary);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
  background: none;
  padding: .6rem .75rem;
  display: block;
}

.cmp-show-more-btn:hover {
  background: var(--bg);
}

.cmp-footnote {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin: 0;
  padding: .5rem .75rem .75rem;
  font-style: italic;
}

@media (width <= 767px) {
  .cmp-table {
    font-size: var(--text-caption);
  }

  .cmp-table th, .cmp-table td {
    padding: .5rem;
  }

  .cmp-table thead th {
    font-size: var(--text-small);
  }

  .cmp-cell {
    font-size: var(--text-caption);
  }

  .cmp-table-card {
    padding: 1rem 0 !important;
  }

  .cmp-show-more-btn {
    font-size: var(--text-caption);
    padding: .5rem;
  }

  .cmp-footnote {
    padding: .4rem .5rem .6rem;
  }
}

@media (width >= 768px) {
  .cmp-table th, .cmp-table td {
    padding: .75rem 1rem;
  }

  .cmp-show-more-btn {
    padding: .6rem 1rem;
  }

  .cmp-footnote {
    padding: .5rem 1rem .75rem;
  }
}
/*# sourceMappingURL=client.7c701061.css.map */