:root {
  --navy: #0c1b2b;
  --navy-soft: #18344d;
  --ink: #15202d;
  --cream: #f7f1e8;
  --cream-light: #fffaf3;
  --gold: #a87831;
  --gold-light: #d5b16f;
  --muted: #646b6d;
  --line: rgba(12, 27, 43, 0.14);
  --danger: #9d3636;
  --success: #24654f;
  --shadow: 0 18px 48px rgba(12, 27, 43, 0.1);
  --shadow-soft: 0 8px 24px rgba(12, 27, 43, 0.08);
  --radius: 22px;
  --page-space: clamp(18px, 4vw, 34px);
  --section-space: clamp(18px, 4vw, 28px);
  --mobile-nav-height: 60px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--cream); color-scheme: light; }
body {
  margin: 0;
  min-height: 100svh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
a { color: var(--navy); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(168, 120, 49, 0.42);
  outline-offset: 3px;
}
.skip-link { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100; display: inline-flex; min-height: 44px; padding: 10px 14px; align-items: center; transform: translateY(-160%); border-radius: 10px; background: #fff; }
.skip-link:focus { transform: translateY(0); }
.ambient { position: fixed; border-radius: 999px; pointer-events: none; opacity: 0.14; }
.ambient-a { width: 360px; height: 360px; inset-block-start: -140px; inset-inline-end: -180px; background: radial-gradient(circle, var(--gold-light), transparent 70%); }
.ambient-b { width: 280px; height: 280px; inset-block-end: 8%; inset-inline-start: -160px; background: radial-gradient(circle, #c9d4df, transparent 70%); }
.app-shell { display: grid; width: 100%; min-height: 100svh; min-height: 100dvh; grid-template-rows: auto minmax(0, 1fr) auto; }
.app-shell:focus { outline: none; }
.app-scroll-region { min-width: 0; min-height: 0; }
.app-frame { position: relative; width: min(100%, 960px); margin: 0 auto; padding: 0 max(18px, env(safe-area-inset-right)) max(44px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.app-content { min-width: 0; }
.brand-lockup { display: inline-flex; min-height: 44px; gap: 12px; align-items: center; color: var(--navy); text-decoration: none; }
.brand-lockup strong { display: block; font: 700 23px/1 Georgia, "Times New Roman", serif; letter-spacing: 0.25em; }
.brand-lockup small { display: block; margin-top: 5px; color: var(--gold); font-size: 11px; letter-spacing: 0.1em; }
.brand-mark { width: 42px; height: 42px; }
.topbar { width: 100%; }
.header-inner { display: flex; width: min(100%, 960px); min-height: 72px; align-items: center; justify-content: space-between; gap: 16px; margin-inline: auto; padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left)); }
.mobile-header-context { display: none; }
.header-mark { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 10px; }
.header-mark img { width: 100%; height: 100%; object-fit: contain; }
.topbar-tools { display: flex; flex: 0 0 auto; gap: 10px; align-items: center; }
.compact-locale, .header-account { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, 0.72); color: var(--navy); text-decoration: none; }
.compact-locale { cursor: pointer; font-size: 11px; font-weight: 850; }
.header-account .ui-icon { width: 20px; height: 20px; }
.language-switcher { display: inline-flex; min-height: 48px; padding-inline: 3px; align-items: center; gap: 1px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.72); color: var(--muted); direction: ltr; }
.language-switcher button { min-width: 44px; min-height: 44px; padding-inline: 8px; border: 0; border-radius: 999px; background: transparent; color: var(--navy); cursor: pointer; font-size: 11px; font-weight: 750; }
.language-switcher button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.back { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, 0.72); text-decoration: none; }
.back .ui-icon { width: 20px; height: 20px; }
.member-nav { display: flex; align-items: center; gap: 7px; margin: 0 0 24px; padding: 7px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 252, 247, 0.82); font-size: 12px; font-weight: 750; scrollbar-width: thin; }
.member-nav a, .link-button { display: inline-flex; flex: 0 0 auto; min-height: 44px; padding: 9px 13px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 10px; background: transparent; color: var(--navy); cursor: pointer; text-decoration: none; white-space: nowrap; }
.member-nav .ui-icon { width: 17px; height: 17px; }
.member-nav a:hover, .member-nav a:focus-visible, .link-button:hover, .link-button:focus-visible { background: #f2eadf; }
.member-nav a[aria-current="page"] { background: var(--navy); color: #fff; }
.mobile-nav { display: none; }
.ui-icon { display: block; width: 24px; height: 24px; flex: 0 0 auto; overflow: visible; }
.welcome-graphic { display: grid; width: min(100%, 420px); min-height: 170px; margin: -18px 0 10px; place-items: center; border-radius: 32px; background: radial-gradient(circle at 50% 58%, rgba(213, 177, 111, 0.2), transparent 48%); }
.welcome-graphic .connection-graphic { width: min(100%, 340px); }
.account-page { display: grid; max-width: 760px; gap: 26px; margin-inline: auto; }
.account-heading { padding: 10px 4px 0; }
.settings-section { min-width: 0; }
.settings-section > h2 { margin: 0 0 9px; color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
.settings-list { overflow: hidden; border: 1px solid rgba(12, 27, 43, 0.09); border-radius: 20px; background: rgba(255, 250, 243, 0.9); box-shadow: var(--shadow-soft); }
.settings-row { display: grid; width: 100%; min-height: 72px; grid-template-columns: 42px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; border: 0; border-bottom: 1px solid rgba(12, 27, 43, 0.08); background: transparent; color: var(--navy); text-align: start; text-decoration: none; }
.settings-row:last-child { border-bottom: 0; }
.settings-row:not(.settings-row-static):hover, .settings-row:not(.settings-row-static):focus-visible { background: #f2eadf; }
.settings-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; background: #eee5d8; color: var(--navy); }
.settings-icon .ui-icon { width: 20px; height: 20px; }
.settings-copy { display: grid; min-width: 0; gap: 4px; }
.settings-copy strong { font-size: 14px; }
.settings-copy small { overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.4; text-overflow: ellipsis; }
.settings-meta { color: var(--success); font-size: 10px; font-weight: 800; }
.settings-chevron { color: var(--muted); }
.settings-chevron .ui-icon { width: 18px; height: 18px; }
.settings-row-static .language-switcher { min-height: 44px; box-shadow: none; }
.settings-section .install-card { margin-top: 12px; }
.settings-logout { cursor: pointer; }
.settings-logout .settings-icon, .settings-logout strong { color: var(--danger); }
.account-session { margin-bottom: 10px; }
.question-progress-visual { position: relative; display: grid; width: 72px; height: 72px; margin: 0 auto 18px; place-items: center; color: var(--gold); }
.question-progress-visual svg:first-child { position: absolute; width: 100%; height: 100%; transform: rotate(-90deg); }
.question-progress-visual circle { fill: none; stroke: rgba(12, 27, 43, 0.1); stroke-width: 3; }
.question-progress-visual .question-progress-value { stroke: var(--gold); stroke-linecap: round; }
.question-progress-visual > .ui-icon { width: 24px; height: 24px; }
.match-question-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; color: var(--muted); font-size: 11px; }
.match-question-progress strong { color: var(--navy); }
.match-question-progress progress { grid-column: 1 / -1; width: 100%; height: 5px; }
.match-journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 20px 0 4px; padding: 0; list-style: none; }
.match-journey li { position: relative; display: grid; min-width: 0; gap: 6px; justify-items: center; color: var(--muted); text-align: center; }
.match-journey li::before { position: absolute; z-index: 0; inset-block-start: 14px; inset-inline-start: 0; width: 100%; height: 1px; background: rgba(12, 27, 43, 0.15); content: ""; }
.match-journey li:first-child::before { width: 50%; inset-inline-start: 50%; }
.match-journey li:last-child::before { width: 50%; }
.match-journey li > span { z-index: 1; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--cream-light); font-size: 10px; font-weight: 800; }
.match-journey .complete > span, .match-journey .current > span { border-color: var(--navy); background: var(--navy); color: #fff; }
.match-journey .current > span { box-shadow: 0 0 0 4px rgba(168, 120, 49, 0.18); }
.match-journey .complete::before { background: var(--navy); }
.match-journey .ui-icon { width: 15px; height: 15px; }
.match-journey small { max-width: 100%; overflow: hidden; font-size: 9px; text-overflow: ellipsis; }
.paired-nodes { width: min(100%, 260px); margin-inline: auto; color: var(--gold); }
.paired-nodes path { stroke: currentColor; stroke-width: 2; }
.paired-nodes circle { fill: var(--cream-light); stroke: var(--navy); stroke-width: 2; }
.paired-nodes circle:last-child { fill: var(--gold-light); }
.paired-nodes-waiting circle:last-child { fill: var(--cream-light); stroke-dasharray: 3 3; }
.paired-nodes-disconnected path { stroke-dasharray: 4 6; opacity: 0.65; }
.verification-face-graphic { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.verification-face-graphic .face-frame-path { stroke: var(--gold); }
.verification-face-graphic .face-shield { fill: var(--navy); stroke: var(--navy); }
.verification-face-graphic .face-check { stroke: #fff; }
.message-send { display: inline-flex; gap: 8px; }
.message-send .ui-icon { width: 19px; height: 19px; }
.conversation-list { display: grid; gap: 9px; }
.conversation-row { display: grid; min-width: 0; min-height: 74px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 11px 13px; border: 1px solid rgba(12, 27, 43, 0.1); border-radius: 17px; background: rgba(255, 255, 255, 0.62); color: var(--navy); text-decoration: none; }
.conversation-row:hover, .conversation-row:focus-visible { border-color: rgba(168, 120, 49, 0.42); background: #fffaf3; }
.conversation-avatar { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--navy); color: var(--gold-light); }
.conversation-avatar .ui-icon { width: 20px; height: 20px; }
.conversation-copy { display: grid; min-width: 0; gap: 4px; }
.conversation-copy strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-copy small { overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.conversation-action { display: flex; gap: 5px; align-items: center; color: var(--gold); font-size: 10px; font-weight: 800; }
.conversation-action .ui-icon { width: 16px; height: 16px; }
.btn-danger-ghost { gap: 8px; }
.btn-danger-ghost .ui-icon { width: 18px; height: 18px; }
.hero { padding: 70px 4px 36px; }
.hero h1, .screen-title, .card h2 { color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.06; }
.hero h1 { max-width: 590px; margin: 14px 0; font-size: clamp(46px, 12vw, 72px); }
.hero > p:not(.eyebrow, .footer-note) { max-width: 580px; color: #4d565c; font-size: 18px; line-height: 1.65; }
.install-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-top: 22px; padding: 24px; border: 1px solid rgba(168, 120, 49, 0.28); border-radius: var(--radius); background: #fffaf1; box-shadow: var(--shadow-soft); }
.install-identity { display: grid; gap: 9px; justify-items: center; min-width: 104px; color: var(--navy); }
.install-identity img { width: 64px; height: 64px; border-radius: 14px; box-shadow: var(--shadow-soft); }
.install-identity strong, .install-identity span { display: block; text-align: center; }
.install-identity strong { font: 700 16px/1 Georgia, "Times New Roman", serif; letter-spacing: 0.2em; }
.install-identity span { margin-top: 5px; color: var(--gold); font-size: 10px; }
.install-copy h2 { margin: 7px 0; color: var(--navy); font: 500 27px/1.15 Georgia, "Times New Roman", serif; }
.install-copy > p:last-of-type { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.install-benefits { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0; padding: 0; color: #4d565c; font-size: 11px; list-style: none; }
.install-benefits li::before { margin-inline-end: 6px; color: var(--gold); content: "✓"; }
.btn-install { min-width: 170px; background: var(--navy); color: #fff; box-shadow: 0 10px 22px rgba(12, 27, 43, 0.16); }
.install-steps { display: grid; min-width: 210px; gap: 9px; margin: 0; padding: 15px 15px 15px 34px; border-radius: 15px; background: #f1e6d4; color: var(--navy); font-size: 12px; line-height: 1.4; }
[dir="rtl"] .install-steps { padding: 15px 34px 15px 15px; }
.install-guidance { max-width: 230px; margin: 0; padding: 14px; border-radius: 14px; background: #f1e6d4; color: var(--navy); font-size: 12px; line-height: 1.5; }
.install-card-compact { grid-template-columns: auto 1fr auto; }
.install-card-compact .install-identity { min-width: auto; }
.install-card-compact .install-identity img { width: 48px; height: 48px; }
.eyebrow { margin: 0; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.screen-title { margin: 14px 0; font-size: clamp(34px, 8vw, 42px); }
.screen-sub { margin: 0 0 24px; color: var(--muted); line-height: 1.6; }
.card { padding: clamp(22px, 5vw, 34px); border: 1px solid rgba(12, 27, 43, 0.06); border-radius: var(--radius); background: #fffaf3; box-shadow: var(--shadow); }
.card-spaced { margin-top: 22px; }
.narrow { max-width: 560px; margin-inline: auto; }
.form { display: grid; gap: 18px; }
.form-section { display: grid; gap: 16px; padding: 19px; border: 1px solid rgba(12, 27, 43, 0.08); border-radius: 19px; background: rgba(255, 255, 255, 0.62); }
.form-section > h2 { margin: 0; color: var(--gold); font: 800 11px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.field { display: grid; gap: 7px; }
.field label, .fieldset legend { color: #35404a; font-size: 13px; font-weight: 780; }
.fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.input, .select, .textarea { width: 100%; min-height: 50px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 14px; outline: none; background: rgba(255, 255, 255, 0.9); color: var(--ink); }
.machine-input { direction: ltr; text-align: left; unicode-bidi: isolate; }
.natural-input { direction: auto; text-align: start; }
.input:focus, .select:focus, .textarea:focus { border-color: rgba(168, 120, 49, 0.72); box-shadow: 0 0 0 3px rgba(168, 120, 49, 0.1); }
.textarea { min-height: 120px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.hint, .optional { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; font-weight: 450; }
.check { display: flex; min-height: 44px; gap: 12px; align-items: center; cursor: pointer; font-size: 13px; line-height: 1.5; }
.check input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--gold); }
.optional-panel { padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.optional-panel summary { display: flex; min-height: 44px; align-items: center; color: var(--navy); cursor: pointer; font-size: 13px; font-weight: 780; }
.optional-content { margin-top: 14px; }
.actions { display: grid; gap: 12px; margin-top: 30px; }
.compact-actions { margin-top: 22px; }
.inline-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.btn { display: grid; min-height: 54px; padding: 0 20px; place-items: center; border: 0; border-radius: 16px; cursor: pointer; font-weight: 780; text-align: center; text-decoration: none; transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 12px 26px rgba(12, 27, 43, 0.16); }
.btn-secondary { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.7); color: var(--navy); }
.btn-ghost { border: 1px dashed rgba(12, 27, 43, 0.24); background: transparent; color: var(--navy); }
.btn:disabled { cursor: not-allowed; opacity: 0.48; }
.alternate, .footer-note { margin-top: 24px; color: var(--muted); font-size: 12px; text-align: center; }
.alternate a { display: inline-grid; min-height: 44px; padding-inline: 8px; place-items: center; font-weight: 750; }
h1[tabindex="-1"]:focus { outline: none; }
.form-error:empty { display: none; }
.error-box, .notice { padding: 12px 14px; border: 1px solid #edc9c4; border-radius: 13px; background: #fff2f0; color: var(--danger); font-size: 13px; line-height: 1.5; }
.notice { margin-top: 18px; border-color: #e8d8bd; background: #f8f1e7; color: #4f5a61; }
.notice.success { border-color: #c7e2d5; background: #eff9f4; color: var(--success); }
.notice.warning { border-color: #e7d2a4; background: #fff8e8; color: #795c27; }
.privacy-note { display: flex; gap: 12px; margin: 20px 0; padding: 16px; border-inline-start: 3px solid var(--gold); border-radius: 13px; background: #fff8ec; color: #4f5a61; font-size: 13px; line-height: 1.5; }
.privacy-note strong, .privacy-note > span > span { display: block; }
.privacy-note strong { color: var(--navy); }
.privacy-note-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #f0e2c9; color: #795c27; }
.privacy-note-icon .ui-icon { width: 18px; height: 18px; }
.photo-count { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0 12px; color: var(--muted); font-size: 12px; font-weight: 750; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.photo-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 8px 20px rgba(12, 27, 43, 0.06); }
.photo-card-primary { grid-row: span 2; }
.photo-card-primary .private-image-frame { min-height: 360px; }
.private-image-frame { position: relative; display: grid; width: 100%; min-width: 0; aspect-ratio: 4 / 5; min-height: 220px; place-items: center; overflow: hidden; background: #eee7dc; }
.private-image-frame img { width: 100%; height: 100%; object-fit: cover; }
.private-image-loading { padding: 18px; color: var(--muted); font-size: 12px; text-align: center; }
.photo-privacy-chip, .photo-primary-overlay { position: absolute; z-index: 2; inset-block-start: 12px; display: grid; min-height: 30px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 999px; background: rgba(12, 27, 43, 0.84); color: #fff; box-shadow: 0 5px 16px rgba(12, 27, 43, 0.18); }
.photo-privacy-chip { inset-inline-end: 12px; width: 30px; }
.photo-privacy-chip .ui-icon { width: 15px; height: 15px; }
.photo-primary-overlay { inset-inline-start: 12px; padding: 0 10px; color: #f4dba8; font-size: 9px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.photo-card-body { display: grid; gap: 12px; padding: 15px; }
.photo-card-body p { min-height: 38px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.photo-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.badge { display: inline-flex; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; }
.badge-primary { background: #f2eadf; color: #71552d; }
.badge-ready { background: #eaf6f0; color: var(--success); }
.badge-muted { background: #edf0f2; color: #596169; }
.photo-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.btn-compact { min-height: 44px; padding: 8px 12px; border-radius: 12px; font-size: 12px; }
.btn-danger-ghost { border: 1px solid #e4c9c7; background: #fff7f6; color: var(--danger); }
.empty-state { padding: 36px 20px; border: 1px solid rgba(168, 120, 49, 0.18); border-radius: 18px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(247, 241, 232, 0.82)); color: var(--muted); text-align: center; }
.empty-state-graphic { display: grid; width: 58px; height: 58px; margin: 0 auto 16px; place-items: center; border: 1px solid rgba(168, 120, 49, 0.24); border-radius: 50%; background: #fff9ef; color: var(--gold); }
.empty-state-graphic.empty-state-wide { width: min(100%, 190px); height: 76px; border: 0; border-radius: 24px; background: radial-gradient(circle, rgba(213, 177, 111, 0.2), transparent 68%); }
.empty-state-wide .paired-nodes { width: 170px; margin: 0; }
.empty-state-graphic .ui-icon { width: 28px; height: 28px; }
.empty-state strong { color: var(--navy); font: 500 22px/1.2 Georgia, "Times New Roman", serif; }
.empty-state p { max-width: 430px; margin: 10px auto 0; font-size: 13px; line-height: 1.55; }
.file-input { min-height: 56px; padding: 6px; }
.file-input::file-selector-button { min-height: 44px; margin-inline-end: 12px; padding: 10px 14px; border: 0; border-radius: 10px; background: var(--navy); color: #fff; cursor: pointer; font-weight: 750; }
.upload-preview { display: grid; grid-template-columns: 82px 1fr auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.upload-preview[hidden] { display: none; }
.upload-preview img { width: 82px; height: 96px; border-radius: 12px; object-fit: cover; background: #eee7dc; }
.upload-preview strong, .upload-preview span { display: block; overflow-wrap: anywhere; }
.upload-preview strong { color: var(--navy); font-size: 13px; }
.upload-preview span { margin-top: 5px; color: var(--muted); font-size: 11px; }
.status-panel { display: flex; gap: 14px; align-items: center; margin: 20px 0 12px; padding: 18px; border: 1px solid rgba(168, 120, 49, 0.18); border-radius: 16px; background: #f4ecdf; }
.status-panel.status-approved { border-color: #c7e2d5; background: #eff9f4; }
.status-panel.status-needs_review, .status-panel.status-rejected { border-color: #e7d2a4; background: #fff8e8; }
.verification-state-graphic { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--navy); color: var(--gold-light); }
.status-approved .verification-state-graphic { background: var(--success); color: #fff; }
.status-submitted .verification-state-graphic { background: #e8dcc5; color: #765827; }
.status-needs_review .verification-state-graphic, .status-rejected .verification-state-graphic { background: #f8e6df; color: var(--danger); }
.verification-state-graphic .ui-icon { width: 24px; height: 24px; }
.status-panel strong { color: var(--navy); }
.status-panel p, .notice p { margin: 5px 0 0; line-height: 1.5; }
.verification-privacy { display: flex; gap: 8px; align-items: flex-start; margin: 12px 2px 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.verification-privacy .ui-icon { width: 17px; height: 17px; margin-top: 1px; color: var(--gold); }
.btn-refresh { width: 100%; }
.verification-flow { margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(12, 27, 43, 0.1); }
.verification-fallback { margin-top: 18px; padding-top: 8px; border-top: 1px solid rgba(12, 27, 43, 0.1); }
.verification-fallback summary { display: flex; min-height: 48px; align-items: center; color: var(--navy); cursor: pointer; font-weight: 800; }
.verification-fallback .form { margin-top: 16px; }
.camera-panel { overflow: hidden; margin: 22px 0 0; border: 0; border-radius: 22px; background: #f2eadf; }
.camera-intro { padding: clamp(22px, 5vw, 30px); text-align: center; }
.camera-intro[hidden] { display: none; }
.camera-symbol { display: grid; width: 76px; height: 76px; margin: 0 auto 16px; place-items: center; border: 1px solid rgba(213, 177, 111, 0.34); border-radius: 50%; background: var(--navy); color: var(--gold-light); box-shadow: 0 10px 24px rgba(12, 27, 43, 0.16); }
.camera-symbol .ui-icon { width: 34px; height: 34px; }
.camera-intro h3 { margin: 8px 0; color: var(--navy); font: 500 28px/1.15 Georgia, "Times New Roman", serif; }
.camera-intro > p:not(.eyebrow, .notice) { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.camera-error { margin: 16px; }
.camera-live, .camera-captured { display: grid; gap: 16px; padding: 16px; }
.camera-live[hidden], .camera-captured[hidden], .camera-error[hidden] { display: none; }
.camera-viewport { position: relative; width: min(100%, 520px); margin-inline: auto; overflow: hidden; border-radius: 20px; background: var(--navy); }
.camera-live video, .camera-captured img { width: 100%; max-height: min(68dvh, 680px); aspect-ratio: 3 / 4; border-radius: 18px; background: var(--navy); object-fit: cover; }
.camera-live video { transform: scaleX(-1); }
.face-guide { position: absolute; inset: 12% 18% 16%; border: 2px solid rgba(255, 250, 243, 0.88); border-radius: 48% 48% 44% 44%; box-shadow: 0 0 0 999px rgba(5, 15, 25, 0.2); pointer-events: none; }
.camera-live p, .camera-captured p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; text-align: center; }
.captured-confirmation { display: flex; gap: 8px; align-items: center; justify-content: center; }
.captured-confirmation .ui-icon { width: 18px; height: 18px; color: var(--success); }
.camera-guidance span { display: block; margin-top: 4px; font-size: 11px; }
.camera-live-actions { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.camera-live-actions button { min-height: 48px; border: 0; background: transparent; color: var(--navy); cursor: pointer; font-size: 12px; font-weight: 780; }
.camera-shutter { display: grid; width: 72px; height: 72px; padding: 6px; place-items: center; border: 2px solid var(--navy) !important; border-radius: 50%; }
.camera-shutter span { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); }
.camera-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.progress-wrap { margin: 20px 0 26px; }
.progress-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
progress { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(12, 27, 43, 0.08); }
progress::-webkit-progress-bar { background: rgba(12, 27, 43, 0.08); }
progress::-webkit-progress-value { border-radius: 999px; background: var(--gold); }
progress::-moz-progress-bar { border-radius: 999px; background: var(--gold); }
.readiness-list { display: grid; margin: 22px 0; padding: 0; list-style: none; }
.readiness-list li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.readiness-list strong { color: var(--muted); font-size: 11px; }
.status-icon { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
.status-icon.complete { border-color: #bddaca; background: #eaf6f0; color: var(--success); }
.dashboard-primary { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 32px); border: 1px solid rgba(12, 27, 43, 0.06); border-radius: 24px; background: rgba(255, 250, 243, 0.78); box-shadow: var(--shadow-soft); }
.dashboard-ready { border-color: transparent; background: transparent; box-shadow: none; }
.dashboard-hero-layout { display: grid; grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 38px); align-items: center; }
.dashboard-hero-copy { position: relative; z-index: 1; min-width: 0; }
.dashboard-hero-copy .screen-title { max-width: 520px; margin: 10px 0; font-size: clamp(32px, 5vw, 42px); }
.dashboard-hero-copy .screen-sub { max-width: 510px; margin-bottom: 16px; font-size: 14px; line-height: 1.5; }
.dashboard-connection-art { display: grid; min-height: 190px; place-items: center; border-radius: 46% 54% 50% 50%; background: radial-gradient(circle, rgba(213, 177, 111, 0.24), rgba(242, 234, 223, 0.32) 55%, transparent 72%); }
.connection-graphic { width: min(100%, 320px); overflow: visible; color: var(--navy); }
.connection-graphic path { stroke-linecap: round; fill: none; }
.connection-orbit { stroke: rgba(12, 27, 43, 0.7); stroke-width: 2; }
.connection-thread { stroke: var(--gold); stroke-width: 2.5; }
.connection-graphic circle { fill: var(--cream-light); stroke: var(--gold); stroke-width: 2; }
.dashboard-main-action { width: min(100%, 320px); margin-top: 18px; }
.next-step { margin: 24px 0; padding: 22px; border-radius: 18px; background: #f2eadf; }
.dashboard-next { margin: 18px 0 0; padding: 17px 0 0; border-top: 1px solid rgba(12, 27, 43, 0.1); border-radius: 0; background: transparent; }
.next-step h2 { margin: 7px 0; color: var(--navy); font: 500 27px/1.15 Georgia, "Times New Roman", serif; }
.next-step > p:not(.eyebrow) { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.dashboard-next h2 { margin: 6px 0; font-size: 24px; }
.dashboard-next .btn { width: min(100%, 320px); min-height: 50px; }
.dashboard-readiness { margin-top: 22px; padding-top: 17px; border-top: 1px solid rgba(12, 27, 43, 0.1); }
.dashboard-readiness-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.dashboard-readiness-heading > strong { color: var(--muted); font-size: 11px; font-weight: 650; }
.dashboard-statuses { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.dashboard-statuses::before { position: absolute; inset-block-start: 21px; inset-inline: 16%; height: 1px; background: rgba(12, 27, 43, 0.13); content: ""; }
.dashboard-status { position: relative; z-index: 1; display: grid; min-width: 0; gap: 7px; justify-items: center; color: var(--navy); text-align: center; text-decoration: none; }
.dashboard-status:hover .dashboard-status-icon, .dashboard-status:focus-visible .dashboard-status-icon { border-color: var(--gold); background: #fff8ec; }
.dashboard-status-icon { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(12, 27, 43, 0.14); border-radius: 50%; background: var(--cream-light); color: var(--navy); box-shadow: 0 0 0 5px rgba(255, 250, 243, 0.88); }
.dashboard-status.complete .dashboard-status-icon { border-color: rgba(36, 101, 79, 0.28); background: #e6f1eb; color: var(--success); }
.dashboard-status-icon .ui-icon { width: 20px; height: 20px; }
.dashboard-status small, .dashboard-status strong { display: block; overflow-wrap: anywhere; }
.dashboard-status small { color: var(--muted); font-size: 10px; line-height: 1.25; }
.dashboard-status strong { margin-top: 2px; font-size: 11px; line-height: 1.25; }
.home-introductions { margin-top: clamp(22px, 4vw, 34px); padding-top: 18px; border-top: 1px solid rgba(12, 27, 43, 0.1); }
.home-introduction-state { display: grid; grid-template-columns: minmax(150px, 0.65fr) minmax(0, 1.35fr); min-height: 154px; gap: 20px; align-items: center; margin-top: 10px; padding: 12px 20px; border-radius: 22px; background: rgba(255, 250, 243, 0.56); }
.home-introduction-art { display: grid; min-width: 0; place-items: center; }
.home-introduction-art .connection-graphic { width: min(100%, 210px); }
.home-introduction-copy { min-width: 0; }
.home-introduction-copy h2 { margin: 0; color: var(--navy); font: 500 clamp(22px, 3.4vw, 29px)/1.15 Georgia, "Times New Roman", serif; }
.home-introduction-copy p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.home-introduction-copy .btn { width: min(100%, 280px); margin-top: 16px; }
.dashboard-referral { display: grid; grid-template-columns: minmax(0, 1.6fr) auto auto; gap: 16px; align-items: center; border-color: rgba(12, 27, 43, 0.08); background: rgba(255, 250, 243, 0.56); box-shadow: none; }
.dashboard-referral h2 { margin: 7px 0; font-size: 24px; line-height: 1.12; }
.dashboard-referral p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.dashboard-referral-code { display: grid; gap: 5px; min-width: 120px; padding: 12px 15px; border-radius: 14px; background: #f2eadf; }
.dashboard-referral-code span { color: var(--muted); font-size: 10px; }
.dashboard-referral-code strong { color: var(--navy); letter-spacing: 0.1em; }
.dashboard-referral-summary { display: flex; gap: 16px; margin: 0; }
.dashboard-referral-summary dt { color: var(--muted); font-size: 10px; }
.dashboard-referral-summary dd { margin: 4px 0 0; color: var(--navy); font: 500 21px/1 Georgia, "Times New Roman", serif; }
.dashboard-referral > .hint { grid-column: 1 / -1; }
.section-heading { margin: 28px 0 14px; color: var(--navy); font: 500 22px/1.2 Georgia, "Times New Roman", serif; }
.onboarding-steps { display: grid; gap: 9px; }
.onboarding-step { display: grid; grid-template-columns: 48px minmax(0, 1fr) 22px auto; min-height: 76px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 15px; color: var(--navy); text-decoration: none; }
.onboarding-step:hover, .onboarding-step:focus-visible { background: #f2eadf; }
.step-graphic, .account-panel-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: #eee5d8; color: var(--navy); }
.step-graphic { position: relative; }
.step-graphic b { position: absolute; inset-block-end: -4px; inset-inline-end: -4px; display: grid; width: 19px; height: 19px; place-items: center; border: 2px solid var(--cream-light); border-radius: 50%; background: var(--navy); color: #fff; font-size: 9px; }
.step-graphic.complete b { background: var(--success); }
.step-graphic.complete { background: #e7f2ec; color: var(--success); }
.step-graphic .ui-icon { width: 22px; height: 22px; }
.step-finish { color: var(--success); }
.step-finish .ui-icon { width: 18px; height: 18px; }
.onboarding-step strong, .onboarding-step small { display: block; }
.onboarding-step small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.step-action { color: var(--gold); font-size: 11px; font-weight: 800; }
.complete-onboarding { margin-top: 22px; }
.onboarding-hint { margin-top: 18px; }
.supporting-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.supporting-action { display: flex; min-height: 68px; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.64); color: var(--navy); text-decoration: none; }
.supporting-action > span { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: #f2eadf; color: var(--gold); }
.supporting-action .ui-icon { width: 20px; height: 20px; }
.supporting-action strong { font-size: 12px; line-height: 1.35; }
.account-panel { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 28px; padding: 18px; border-top: 1px solid var(--line); border-radius: 16px; background: rgba(237, 242, 246, 0.62); }
.account-panel h2 { margin: 5px 0; font-size: 21px; }
.account-panel p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.account-panel-icon { color: var(--gold); }
.photo-uploader { margin: 18px 0 28px; padding: 22px; border: 1px solid rgba(168, 120, 49, 0.16); border-radius: 18px; background: #f2eadf; }
.photo-uploader h2 { margin: 7px 0 16px; }
.photo-upload-heading { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.photo-upload-placeholder { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; border: 1px dashed rgba(168, 120, 49, 0.58); border-radius: 16px; background: #fff9ef; color: var(--gold); }
.photo-upload-placeholder .ui-icon { width: 27px; height: 27px; }
.section-list { display: grid; gap: 12px; }
.section-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255, 255, 255, 0.74); color: var(--navy); cursor: pointer; text-align: start; transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s; }
.section-card:hover, .section-card:focus-visible { border-color: rgba(168, 120, 49, 0.44); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.section-card-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: #f2eadf; color: var(--gold); }
.section-card-icon .ui-icon { width: 22px; height: 22px; }
.section-card-copy { min-width: 0; }
.section-card strong, .section-card small { display: block; }
.section-card strong { font: 500 20px/1.2 Georgia, "Times New Roman", serif; }
.section-card small { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.section-progress { color: var(--gold); font-size: 12px; font-weight: 800; white-space: nowrap; }
.question-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.section-pill, .critical-pill, .required-pill { display: inline-flex; padding: 7px 11px; border-radius: 999px; background: #f2eadf; color: #71552d; font-size: 10px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.critical-pill { background: #fbe9e6; color: #8b3932; }
.required-pill { background: #e9f0f5; color: #31536d; }
.question-title { margin: 18px 0 8px; color: var(--navy); font: 500 clamp(25px, 6vw, 31px)/1.2 Georgia, "Times New Roman", serif; }
.help { color: var(--muted); font-size: 13px; line-height: 1.5; }
.choice-list { display: grid; gap: 10px; margin-top: 12px; }
.inline-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: block; padding: 15px 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 255, 255, 0.76); line-height: 1.4; }
.choice input:focus-visible + span { outline: 3px solid rgba(168, 120, 49, 0.42); outline-offset: 3px; }
.choice input:checked + span { border-color: rgba(168, 120, 49, 0.82); background: #fff8eb; box-shadow: inset 0 0 0 1px rgba(168, 120, 49, 0.22); }
.scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.scale-choice input, .importance input { position: absolute; opacity: 0; pointer-events: none; }
.scale-choice span { display: grid; height: 56px; place-items: center; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--navy); cursor: pointer; font-weight: 800; transition: border-color 0.18s, background 0.18s, transform 0.18s; }
.scale-choice input:checked + span { border-color: var(--navy); background: var(--navy); box-shadow: 0 9px 18px rgba(12, 27, 43, 0.16); color: #fff; transform: translateY(-2px); }
.scale-choice input:focus-visible + span, .importance input:focus-visible + span { outline: 3px solid rgba(168, 120, 49, 0.42); outline-offset: 3px; }
.fine { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.fine summary { color: var(--navy); cursor: pointer; font-size: 14px; font-weight: 800; }
.fine-grid { display: grid; gap: 18px; margin-top: 17px; }
.importance { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.importance span { display: grid; min-height: 42px; padding: 6px; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--muted); cursor: pointer; font-size: 11px; text-align: center; }
.importance input:checked + span { border-color: #d3b47d; background: #f2eadf; color: #71552d; }
.partner-options { display: grid; gap: 8px; margin-top: 10px; }
.partner-options label { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 13px; }
.partner-options input { margin-top: 2px; accent-color: var(--gold); }
.invite-code { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 12px; padding: 14px 16px; border: 1px solid #e4d2b3; border-radius: 15px; background: #fff8ec; }
.invite-code span { color: var(--muted); font-size: 12px; }
.invite-code strong { color: var(--navy); letter-spacing: 0.12em; }
.share-url { font-size: 13px; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 14px; }
.summary-grid div { padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.summary-grid dt { color: var(--muted); font-size: 11px; }
.summary-grid dd { margin: 5px 0 0; color: var(--navy); font: 500 26px/1 Georgia, "Times New Roman", serif; }
.match-layout { display: grid; gap: 0; }
.match-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.match-card { display: grid; gap: 15px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255, 255, 255, 0.76); }
.match-card-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.match-card-alignment { display: grid; gap: 5px; justify-items: center; color: var(--navy); }
.match-card-alignment small { max-width: 82px; font-size: 10px; font-weight: 800; line-height: 1.25; text-align: center; }
.match-card h2, .prompt-card h3 { margin: 7px 0; color: var(--navy); font: 500 23px/1.2 Georgia, "Times New Roman", serif; }
.match-card-copy > p:last-child, .match-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.compatibility-panel { display: grid; gap: 13px; margin: 22px 0; padding: 18px; border: 1px solid #e7d8be; border-radius: 17px; background: #fff9ef; }
.compatibility-panel > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.compatibility-heading { display: flex; gap: 16px; align-items: center; }
.compatibility-copy { display: grid; gap: 5px; min-width: 0; }
.compatibility-copy strong { color: var(--navy); }
.compatibility-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.compatibility-ring { display: grid; width: 88px; height: 88px; flex: 0 0 auto; place-items: center; color: var(--gold); }
.compatibility-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.compatibility-ring circle { fill: none; stroke-width: 4; }
.compatibility-ring-track { stroke: rgba(12, 27, 43, 0.09); }
.compatibility-ring-value { stroke: var(--gold); stroke-linecap: round; }
.compatibility-ring text { fill: var(--navy); stroke: none; font: 700 10px/1 Inter, ui-sans-serif, system-ui, sans-serif; text-anchor: middle; dominant-baseline: middle; transform: rotate(90deg); transform-origin: center; }
.compatibility-ring-compact { width: 64px; height: 64px; }
.compatibility-ring-compact circle { stroke-width: 4.5; }
.compatibility-ring-compact text { font-size: 11px; }
.compatibility-ring-empty { border: 1px solid rgba(168, 120, 49, 0.24); border-radius: 50%; background: #fff9ef; }
.compatibility-ring-empty .ui-icon { width: 28px; height: 28px; }
.dimension-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dimension-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-top: 10px; border-top: 1px solid rgba(168, 120, 49, 0.18); font-size: 12px; }
.dimension-list li > div { display: grid; min-width: 0; gap: 6px; }
.dimension-list progress { height: 5px; }
.dimension-list strong { color: var(--navy); }
.stage-panel { padding: 16px; border-inline-start: 3px solid var(--navy); border-radius: 14px; background: #edf2f6; }
.stage-panel span { color: var(--navy); font-weight: 800; }
.stage-panel p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.prompt-list { display: grid; gap: 14px; }
.prompt-card { min-width: 0; padding: 19px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.prompt-number { margin: 0; color: var(--gold); font-size: 10px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.match-answer-form { margin-top: 17px; }
.answer-panel { margin-top: 14px; padding: 14px; border-radius: 14px; background: #f5f0e8; }
.answer-panel.other { background: #edf2f6; }
.answer-panel strong { color: var(--navy); font-size: 12px; }
.answer-panel p { margin: 6px 0 0; overflow-wrap: anywhere; color: #3e4850; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.consent-panel, .connection-panel { display: grid; gap: 13px; }
.consent-panel h2, .consent-panel p, .connection-panel h2, .connection-panel p { margin-top: 0; }
.revealed-image-frame { display: grid; width: min(100%, 560px); aspect-ratio: 4 / 5; margin: 18px auto; place-items: center; overflow: hidden; border-radius: 22px; background: #e9e3d9; box-shadow: 0 16px 34px rgba(12, 27, 43, 0.14); color: var(--muted); font-size: 13px; }
.revealed-image-frame img { width: 100%; height: 100%; object-fit: cover; }
.safety-panel .report-panel { margin-top: 22px; }
.chat-toolbar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin: 18px 0; }
.message-list { display: grid; gap: 11px; min-height: 180px; max-height: 58vh; overflow-y: auto; padding: 18px; border: 1px solid rgba(168, 120, 49, 0.12); border-radius: 20px; background: linear-gradient(180deg, #f7f1e8, #f1e9dd); overscroll-behavior: contain; }
.message { width: min(82%, 560px); padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; border-end-start-radius: 5px; background: #fff; overflow-wrap: anywhere; }
.message-other { justify-self: start; }
.message-mine { justify-self: end; border-color: #d7c49f; border-radius: 16px; border-end-start-radius: 16px; border-end-end-radius: 5px; background: #fff9ee; box-shadow: 0 5px 12px rgba(168, 120, 49, 0.08); }
.message strong { color: var(--navy); font-size: 11px; }
.message p { margin: 5px 0; color: var(--ink); font-size: 14px; line-height: 1.5; text-align: start; unicode-bidi: plaintext; white-space: pre-wrap; }
.message time { color: var(--muted); font-size: 10px; }
.message-form { margin-top: 18px; }
.moderation-layout { display: grid; gap: 0; }
.moderation-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin: 22px 0; }
.moderation-toolbar .field { max-width: 420px; }
.moderation-queue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.moderation-card { display: grid; min-width: 0; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.78); }
.moderation-card-header, .moderation-detail-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.moderation-card code, .moderation-detail-header code { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }
.moderation-card-meta, .moderation-meta { display: grid; gap: 10px; margin: 0; }
.moderation-card-meta div, .moderation-meta div { min-width: 0; padding-block: 9px; border-bottom: 1px solid var(--line); }
.moderation-card-meta dt, .moderation-meta dt { color: var(--muted); font-size: 11px; }
.moderation-card-meta dd, .moderation-meta dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--navy); font-size: 13px; font-weight: 750; }
.moderation-pagination { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 22px; }
.moderation-pagination span { color: var(--muted); font-size: 12px; text-align: center; }
.moderation-detail-header { margin: 20px 0; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.moderation-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0; }
.moderation-artifact-frame { display: grid; width: min(100%, 560px); aspect-ratio: 4 / 5; min-height: 260px; margin: 18px auto; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #e9e3d9; color: var(--muted); font-size: 13px; }
.moderation-artifact-frame img { width: 100%; height: 100%; object-fit: contain; background: #101820; }
.moderation-note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.review-note { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 15px; }
.internal-note { background: #edf2f6; }
.member-note { background: #fff8ec; }
.review-note strong { color: var(--navy); font-size: 12px; }
.review-note p { margin: 8px 0 0; overflow-wrap: anywhere; line-height: 1.55; unicode-bidi: plaintext; white-space: pre-wrap; }
.review-field { padding: 15px; border: 1px solid var(--line); border-radius: 16px; }
.internal-review-field { background: #edf2f6; }
.member-review-field { border-color: #e4d2b3; background: #fff8ec; }
.loading { display: flex; width: min(calc(100% - 36px), 520px); min-height: 160px; gap: 14px; align-items: center; justify-content: center; margin: 18vh auto 0; padding: 28px; border-radius: var(--radius); background: #fffaf3; box-shadow: var(--shadow-soft); color: var(--muted); font-size: 13px; }
.loading > span:last-child { display: grid; gap: 3px; }
.loading strong { color: var(--navy); }
.loading small { font-size: 11px; }
.spinner { width: 30px; height: 30px; border: 3px solid rgba(12, 27, 43, 0.12); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
.toast { position: fixed; z-index: 30; inset-inline: 0; inset-block-end: 24px; width: max-content; max-width: calc(100% - 36px); margin-inline: auto; padding: 12px 16px; transform: translateY(20px); border-radius: 13px; opacity: 0; background: var(--navy); box-shadow: var(--shadow); color: #fff; font-size: 13px; transition: opacity 0.2s, transform 0.2s; }
.toast.show { transform: translateY(0); opacity: 1; }
.update-root:empty { display: none; }
.update-sheet { position: fixed; z-index: 90; inset-inline: 18px; inset-block-end: 22px; display: flex; width: min(calc(100% - 36px), 620px); gap: 18px; align-items: center; justify-content: space-between; margin-inline: auto; padding: 16px; border: 1px solid rgba(213, 177, 111, 0.42); border-radius: 18px; background: var(--navy); box-shadow: 0 20px 60px rgba(12, 27, 43, 0.26); color: #fff; }
.update-sheet strong { color: #fff; }
.update-sheet p { margin: 4px 0 0; color: #d7dde2; font-size: 12px; }
.update-sheet .btn { min-width: 120px; border: 1px solid rgba(255,255,255,.24); background: #fffaf3; color: var(--navy); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes connection-drift { 50% { transform: translateY(-4px); } }
@keyframes guide-breathe { 50% { border-color: rgba(213, 177, 111, 0.95); } }
@media (prefers-reduced-motion: no-preference) {
  .connection-graphic { animation: connection-drift 5s ease-in-out infinite; }
  .face-guide { animation: guide-breathe 2.6s ease-in-out infinite; }
  .empty-state-graphic, .camera-symbol { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .empty-state:hover .empty-state-graphic, .camera-intro:hover .camera-symbol { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(12, 27, 43, 0.1); }
}
[dir="rtl"] body { font-family: Tahoma, Arial, "Segoe UI", sans-serif; }
[dir="rtl"] .brand-lockup small, [dir="rtl"] .eyebrow, [dir="rtl"] .badge, [dir="rtl"] .section-pill, [dir="rtl"] .critical-pill, [dir="rtl"] .required-pill, [dir="rtl"] .camera-divider, [dir="rtl"] .settings-section > h2, [dir="rtl"] .form-section > h2 { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .back .ui-icon, [dir="rtl"] .settings-chevron .ui-icon, [dir="rtl"] .conversation-action .ui-icon-chevron { transform: scaleX(-1); }
[dir="rtl"] progress { direction: rtl; }
@media (max-width: 680px) {
  html, body { height: 100%; overflow: hidden; }
  body { background: var(--cream); }
  .app-shell { height: 100svh; height: 100dvh; min-height: 0; overflow: hidden; grid-template-rows: auto minmax(0, 1fr) auto; }
  .app-header { z-index: 20; min-width: 0; overflow: hidden; grid-row: 1; border-bottom: 1px solid rgba(12, 27, 43, 0.08); background: rgba(255, 250, 243, 0.98); box-shadow: 0 5px 18px rgba(12, 27, 43, 0.04); }
  .header-inner { min-width: 0; min-height: 54px; gap: 8px; padding: max(5px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 5px max(12px, env(safe-area-inset-left)); }
  .desktop-brand { display: none; }
  .mobile-header-context { display: flex; min-width: 0; flex: 1 1 0; gap: 8px; align-items: center; overflow: hidden; }
  .mobile-header-context > strong { min-width: 0; overflow: hidden; color: var(--navy); font: 600 17px/1.2 Georgia, "Times New Roman", serif; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-header-context > .brand-lockup span { display: none; }
  .mobile-header-context > .brand-lockup .brand-mark { width: 38px; height: 38px; }
  .compact-locale, .header-account { width: 44px; height: 44px; background: transparent; }
  .app-scroll-region { grid-row: 2; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scroll-padding-block: 14px 28px; }
  .app-frame { width: 100%; min-height: 100%; padding: 0; }
  .app-content { min-width: 0; padding: 12px max(14px, env(safe-area-inset-right)) 24px max(14px, env(safe-area-inset-left)); overflow: visible; }
  .member-nav { display: none; }
  .mobile-nav { position: relative; z-index: 25; grid-row: 3; display: grid; min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-top: 1px solid rgba(255, 255, 255, 0.1); background: var(--navy); box-shadow: 0 -6px 18px rgba(12, 27, 43, 0.13); }
  .mobile-nav a { display: grid; min-width: 0; min-height: 48px; padding: 3px; place-items: center; align-content: center; gap: 1px; border-radius: 11px; color: #d8dde2; text-decoration: none; }
  .mobile-nav a > .ui-icon { width: 19px; height: 19px; color: var(--gold-light); }
  .mobile-nav a small { max-width: 100%; overflow: hidden; font-size: 9.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.11); color: #fff; }
  .mobile-nav a[aria-current="page"] > .ui-icon { color: #f0d39d; }
  .card { padding: 22px 20px; border-color: transparent; border-radius: 20px; background: #fffaf3; box-shadow: 0 10px 28px rgba(12, 27, 43, 0.08); }
  .onboarding-card, .profile-page, .preferences-page, .questionnaire-page, .question-page, .photos-page, .verification-page, .matches-page, .messages-page { padding: 8px 2px 18px; background: transparent; box-shadow: none; }
  .account-page { gap: 22px; }
  .account-heading { padding-inline: 2px; }
  .settings-list { border-radius: 18px; background: rgba(255, 250, 243, 0.95); }
  .settings-row { min-height: 70px; padding: 9px 12px; }
  .settings-row-static { grid-template-columns: 42px minmax(0, 1fr); }
  .settings-row-static .language-switcher { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .grid2, .inline-actions { grid-template-columns: 1fr; }
  .screen-title { margin: 10px 0; font-size: clamp(32px, 9vw, 40px); }
  .screen-sub { margin-bottom: 20px; font-size: 14px; line-height: 1.55; }
  .hero { padding: 32px 4px 20px; }
  .hero h1 { font-size: clamp(40px, 12vw, 54px); }
  .install-card, .install-card-compact { grid-template-columns: auto 1fr; padding: 19px; }
  .install-card .install-copy, .install-card .btn-install, .install-card .install-steps, .install-card .install-guidance { grid-column: 1 / -1; }
  .install-card .install-copy { text-align: center; }
  .install-card .install-identity { grid-column: 1 / -1; }
  .btn-install, .install-steps { width: 100%; min-width: 0; }
  .install-guidance { max-width: none; text-align: center; }
  .dashboard-primary { padding: 8px 2px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .dashboard-hero-layout { grid-template-columns: 1fr; gap: 2px; }
  .dashboard-connection-art { min-height: 124px; }
  .dashboard-connection-art .connection-graphic { width: min(86%, 286px); }
  .dashboard-hero-copy .screen-title { margin: 7px 0; font-size: clamp(28px, 7.8vw, 34px); line-height: 1.08; }
  .dashboard-hero-copy .screen-sub { margin-bottom: 12px; font-size: 13px; line-height: 1.45; }
  .dashboard-main-action { width: 100%; min-height: 50px; margin-top: 14px; }
  .dashboard-next { margin-top: 13px; padding-top: 13px; }
  .dashboard-next h2 { font-size: 21px; }
  .dashboard-next p:not(.eyebrow) { margin-bottom: 13px; font-size: 12px; line-height: 1.45; }
  .dashboard-next .btn { width: 100%; min-height: 50px; }
  .dashboard-readiness { margin-top: 17px; padding-top: 14px; }
  .dashboard-readiness-heading { align-items: baseline; }
  .dashboard-readiness-heading > strong { font-size: 10px; }
  .dashboard-statuses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
  .dashboard-status small { font-size: 9px; }
  .dashboard-status strong { font-size: 10px; }
  .home-introductions { margin-top: 18px; padding-top: 14px; }
  .home-introduction-state { grid-template-columns: 112px minmax(0, 1fr); min-height: 124px; gap: 8px; padding: 8px 2px; background: transparent; }
  .home-introduction-art .connection-graphic { width: 122px; }
  .home-introduction-copy h2 { font-size: 21px; }
  .home-introduction-copy p { margin-top: 6px; font-size: 12px; }
  .home-introduction-copy .btn { width: 100%; min-height: 48px; margin-top: 12px; }
  .supporting-actions { grid-template-columns: 1fr 1fr; }
  .dashboard-referral { grid-template-columns: 1fr auto; }
  .dashboard-referral.card { padding: 18px 16px; border-radius: 16px; background: rgba(255, 250, 243, 0.48); }
  .dashboard-referral h2 { font-size: 22px; }
  .dashboard-referral-code { padding: 9px 12px; }
  .dashboard-referral > div:first-child, .dashboard-referral-summary, .dashboard-referral > .hint { grid-column: 1 / -1; }
  .dashboard-referral-code { min-width: 0; }
  .photo-uploader { margin-inline: -4px; padding: 18px; }
  .readiness-list li { grid-template-columns: 26px 1fr; }
  .readiness-list strong { grid-column: 2; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .photo-card-primary { grid-column: 1 / -1; grid-row: auto; }
  .photo-card-primary .private-image-frame { min-height: 380px; }
  .photo-card:not(.photo-card-primary) .private-image-frame { min-height: 180px; }
  .photo-card:not(.photo-card-primary) .photo-card-body p { display: none; }
  .photo-card:not(.photo-card-primary) .photo-actions { grid-template-columns: 1fr; }
  .match-list { grid-template-columns: 1fr; }
  .moderation-queue, .moderation-note-grid { grid-template-columns: 1fr; }
  .moderation-toolbar { grid-template-columns: 1fr; }
  .upload-preview { grid-template-columns: 72px 1fr; }
  .upload-preview img { width: 72px; height: 84px; }
  .upload-preview .btn { grid-column: 1 / -1; }
  .message-list { max-height: none; overflow-y: visible; padding: 13px; overscroll-behavior: auto; }
  .conversation-row { min-height: 68px; padding: 9px 8px; background: rgba(255, 250, 243, 0.64); }
  .conversation-action { font-size: 0; }
  .conversation-action .ui-icon { width: 18px; height: 18px; }
  .message-form { position: sticky; z-index: 8; bottom: 0; grid-template-columns: minmax(0, 1fr) auto; margin: 18px -4px 0; padding: 12px; border: 1px solid rgba(12, 27, 43, 0.08); border-radius: 20px; background: rgba(242, 234, 223, 0.97); box-shadow: 0 -8px 22px rgba(12, 27, 43, 0.08); scroll-margin-bottom: 20px; }
  .message-form .form-error { grid-column: 1 / -1; }
  .message-form .field { min-width: 0; }
  .message-form label, .message-form .hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .message-form .textarea { min-height: 50px; max-height: 130px; resize: none; }
  .message-form .message-send { width: 52px; min-height: 52px; padding: 0; align-self: end; border-radius: 50%; }
  .message-form .message-send span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .camera-panel[data-camera-state="live"], .camera-panel[data-camera-state="capturing"], .camera-panel[data-camera-state="captured"] { position: fixed; z-index: 80; inset: 0; width: 100%; height: 100dvh; margin: 0; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); border-radius: 0; overflow-y: auto; background: #071522; }
  .camera-panel[data-camera-state="live"] .camera-live, .camera-panel[data-camera-state="capturing"] .camera-live, .camera-panel[data-camera-state="captured"] .camera-captured { min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px); align-content: center; }
  .camera-panel[data-camera-state="live"] .camera-guidance, .camera-panel[data-camera-state="capturing"] .camera-guidance, .camera-panel[data-camera-state="captured"] .camera-captured p { color: #eef0f2; }
  .camera-panel[data-camera-state="live"] .camera-live-actions button, .camera-panel[data-camera-state="capturing"] .camera-live-actions button { color: #fff; }
  .camera-panel[data-camera-state="live"] .camera-shutter, .camera-panel[data-camera-state="capturing"] .camera-shutter { border-color: #fff !important; }
  .camera-panel[data-camera-state="live"] .camera-shutter span, .camera-panel[data-camera-state="capturing"] .camera-shutter span { background: #fff; }
  .camera-panel[data-camera-state="captured"] .camera-captured img { max-height: 68dvh; margin-inline: auto; object-fit: contain; }
  .toast { inset-block-end: calc(88px + env(safe-area-inset-bottom)); }
  .update-sheet { inset-block-end: calc(var(--mobile-nav-height) + 14px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; }
  .update-sheet .btn { width: 100%; }
}
@media (max-width: 420px) {
  .topbar { gap: 10px; }
  .topbar-tools { gap: 6px; }
  .language-switcher { padding-inline: 4px; }
  .language-switcher button { padding-inline: 6px; }
  .brand-lockup strong { font-size: 20px; }
  .brand-lockup small { display: none; }
  .brand-mark { width: 38px; height: 38px; }
  .topbar-has-back .brand-mark { display: none; }
  .topbar-has-back .brand-lockup strong { font-size: 18px; }
  .camera-actions { grid-template-columns: 1fr; }
  .supporting-actions { grid-template-columns: 1fr; }
  .onboarding-step { grid-template-columns: 44px minmax(0, 1fr) 20px; }
  .step-action { grid-column: 2 / -1; }
  .account-panel { grid-template-columns: 44px minmax(0, 1fr); }
  .account-panel .btn { grid-column: 1 / -1; }
  .inline-choices, .summary-grid { grid-template-columns: 1fr; }
  .importance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-actions { grid-template-columns: 1fr; }
  .message { width: 92%; }
  .moderation-meta { grid-template-columns: 1fr; }
  .moderation-pagination { grid-template-columns: 1fr 1fr; }
  .moderation-pagination span { grid-column: 1 / -1; grid-row: 1; }
}
@media (display-mode: standalone) and (max-width: 680px) {
  html, body, .app-shell { height: 100svh; min-height: 100svh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}