:root { --ink:#25132e; --plum:#63306f; --violet:#8350a2; --lilac:#f7f0fa; --line:#dfd0e5; --muted:#765b7e; --white:#fff; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--lilac); }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); font-family:ui-rounded,"Avenir Next",Avenir,"Helvetica Neue",sans-serif; background:radial-gradient(circle at 10% 10%,#eadbf0 0,transparent 30rem),radial-gradient(circle at 95% 90%,#e9d6e5 0,transparent 32rem),var(--lilac); }
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.app-shell { display:grid; place-items:center; min-height:100vh; padding:24px max(20px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.auth-card { width:min(100%,460px); padding:clamp(27px,7vw,44px); border:1px solid #ffffffc9; border-radius:30px; background:#fffffff0; box-shadow:0 26px 70px #5129651f; }
.register-card { width:min(100%,570px); }
.wordmark { display:inline-block; color:var(--plum); font:700 2.35rem/1 Georgia,serif; letter-spacing:-.11em; text-decoration:none; }
.eyebrow { margin:30px 0 8px; color:var(--violet); font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:0; font:500 clamp(2.45rem,11vw,3.7rem)/.98 Georgia,"Times New Roman",serif; letter-spacing:-.065em; }
.intro { margin:18px 0 28px; color:#5d4566; line-height:1.55; }
.auth-form { display:grid; gap:15px; }
.auth-form label { display:grid; gap:7px; color:#4e3757; font-size:.86rem; font-weight:700; }
.auth-form input,.auth-form select { width:100%; min-height:49px; padding:12px 13px; border:1px solid var(--line); border-radius:12px; outline:0; color:var(--ink); background:#fff; font-weight:500; }
.auth-form input[type="file"] { padding:10px; }
.auth-form input:focus { border-color:var(--violet); box-shadow:0 0 0 3px #8350a220; }
.auth-form select:focus { border-color:var(--violet); box-shadow:0 0 0 3px #8350a220; }
.auth-form small,.field-note { margin:0; color:var(--muted); font-size:.78rem; font-weight:500; line-height:1.4; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
fieldset { margin:0; padding:0; border:0; } legend { margin-bottom:9px; color:#4e3757; font-size:.86rem; font-weight:700; }.choice-row { display:flex; gap:12px; }.choice-row label { display:flex; align-items:center; gap:7px; min-height:46px; padding:0 13px; border:1px solid var(--line); border-radius:12px; background:#fff; }.choice-row input { width:auto; min-height:auto; margin:0; accent-color:var(--plum); }
.check-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.check-grid label { display:flex; align-items:center; gap:8px; min-height:46px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; color:#4e3757; background:#fff; font-size:.8rem; font-weight:600; }.check-grid input { width:auto; min-height:auto; margin:0; accent-color:var(--plum); }
.photo-summary { display:flex; justify-content:space-between; gap:15px; margin:0 0 22px; padding:14px; border:1px solid var(--line); border-radius:13px; color:#4e3757; background:#fbf8fc; font-size:.82rem; }.photo-summary span { color:var(--muted); }
.compass-card,.question-card { width:min(100%,720px); }.journey-meter,.question-progress { height:9px; overflow:hidden; border-radius:99px; background:#eadff0; }.journey-meter div,.question-progress div { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--plum),var(--violet)); transition:width .25s ease; }.journey-meter { margin-top:25px; }.section-label { margin:24px 0 11px; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.questionnaire-list { display:grid; gap:9px; margin-top:18px; }.questionnaire-row { display:flex; align-items:center; justify-content:space-between; gap:15px; width:100%; padding:16px; border:1px solid var(--line); border-radius:15px; color:var(--ink); background:#fff; text-align:left; cursor:pointer; }.questionnaire-row:hover { border-color:var(--violet); box-shadow:0 8px 22px #51296512; }.questionnaire-row span { display:grid; gap:5px; }.questionnaire-row strong { font-size:.94rem; }.questionnaire-row small { color:var(--muted); font-size:.78rem; }.questionnaire-row b { min-width:42px; color:var(--plum); font-size:.8rem; text-align:right; }.badge-list { display:flex; flex-wrap:wrap; gap:8px; }.badge { padding:8px 11px; border-radius:99px; color:var(--plum); background:#eee1f2; font-size:.78rem; font-weight:750; }.result-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; }.result-card { display:grid; gap:5px; padding:15px; border:1px solid var(--line); border-radius:15px; background:#fbf8fc; }.result-card span { color:var(--violet); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.result-card strong { color:var(--plum); font-size:1rem; }.result-card small { color:var(--muted); font-size:.75rem; }.question-progress { margin-top:22px; }.question-content { min-height:200px; }.question-support { margin:22px 0; padding:13px 14px; border-left:3px solid var(--violet); color:var(--muted); background:#faf6fb; font-size:.85rem; line-height:1.5; }.answer-options { display:grid; gap:10px; margin:24px 0; }.answer-option { display:flex; align-items:flex-start; gap:11px; padding:15px; border:1px solid var(--line); border-radius:14px; color:#4e3757; background:#fff; cursor:pointer; font-size:.91rem; line-height:1.35; }.answer-option:has(input:checked) { border-color:var(--violet); background:#f4eaf7; box-shadow:0 0 0 2px #8350a220; }.answer-option input { width:auto; min-height:auto; margin:2px 0 0; accent-color:var(--plum); }.question-label,.slider-label { display:grid; gap:9px; margin:24px 0; color:#4e3757; font-size:.86rem; font-weight:700; }.question-label textarea { width:100%; resize:vertical; padding:13px; border:1px solid var(--line); border-radius:12px; outline:0; color:var(--ink); background:#fff; line-height:1.5; }.slider-label input { accent-color:var(--plum); }.slider-label output { color:var(--plum); font-weight:800; }.question-card > .text-button { display:block; margin:16px auto 0; }
.primary-button,.secondary-button,.text-button,.back-button { min-height:49px; border-radius:12px; cursor:pointer; font-weight:800; }.primary-button { margin-top:5px; border:0; color:#fff; background:var(--ink); box-shadow:0 12px 25px #51296526; }.primary-button:disabled,.secondary-button:disabled { cursor:wait; opacity:.62; }.secondary-button { border:1px solid var(--line); color:var(--plum); background:#fff; }.text-button,.back-button { min-height:auto; padding:0; border:0; color:var(--plum); background:none; text-decoration:underline; text-underline-offset:3px; }.back-button { justify-self:start; margin-bottom:22px; font-size:.88rem; }.auth-divider { display:flex; align-items:center; gap:12px; margin:26px 0 18px; color:var(--muted); font-size:.82rem; }.auth-divider::before,.auth-divider::after { flex:1; height:1px; content:""; background:var(--line); }.quiet-link { display:block; width:max-content; max-width:100%; margin:20px auto 0; color:var(--muted); font-size:.82rem; text-decoration:underline; text-underline-offset:3px; }.status-message { margin:0 0 20px; padding:12px 13px; border-radius:12px; color:#5f2245; background:#f9e6ee; font-size:.87rem; line-height:1.4; }.status-message.success { color:#2a5e4b; background:#e2f3e9; }
.browse-card,.profile-detail-card { width:min(100%,1080px); padding:clamp(22px,4vw,38px); border:1px solid #ffffffc9; border-radius:30px; background:#fffffff0; box-shadow:0 26px 70px #5129651f; }
.browse-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }.browse-header .eyebrow { margin-top:0; }.browse-header .back-button { margin-top:8px; white-space:nowrap; }
.browse-toolbar { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:22px; padding:13px; border:1px solid var(--line); border-radius:16px; background:#fbf8fc; }.browse-toolbar label { display:grid; gap:6px; color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }.browse-toolbar select { width:100%; min-height:40px; padding:7px 8px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:#fff; font-size:.8rem; letter-spacing:0; text-transform:none; }
.profile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.profile-tile { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 12px 28px #51296512; transition:transform .22s ease,box-shadow .22s ease; }.profile-tile:hover { transform:translateY(-3px); box-shadow:0 18px 35px #51296520; }.profile-tile-main { display:block; width:100%; padding:0; border:0; color:inherit; background:transparent; text-align:left; cursor:pointer; }.profile-tile-main:focus-visible { outline:3px solid #8350a266; outline-offset:-3px; }.profile-image { position:relative; aspect-ratio:4/4.8; overflow:hidden; background:linear-gradient(145deg,#eadcf0,#d8bfdc); }.profile-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }.profile-tile:hover .profile-image img { transform:scale(1.035); }.profile-placeholder { display:grid; place-items:center; width:100%; height:100%; color:#fff; font:500 3.2rem/1 Georgia,serif; background:linear-gradient(145deg,var(--violet),var(--plum)); }.profile-placeholder.large { min-height:360px; font-size:6rem; }.online-dot { position:absolute; right:12px; bottom:12px; width:12px; height:12px; border:2px solid #fff; border-radius:50%; background:#b9aeba; box-shadow:0 2px 8px #25132e45; }.online-dot.online { background:#38a875; }.profile-tile-body { padding:15px 16px 17px; }.profile-tile-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }.profile-tile-heading h2 { margin:0; color:var(--ink); font-size:1.08rem; }.profile-tile-body p { overflow:hidden; margin:6px 0 0; color:var(--muted); font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }.save-profile { flex:none; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; color:var(--plum); background:#fbf8fc; font-size:1.2rem; line-height:1; cursor:pointer; }.tile-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }.tile-meta span { padding:5px 8px; border-radius:99px; color:var(--plum); background:#eee1f2; font-size:.68rem; font-weight:800; }.browse-loading { padding:22px; color:var(--muted); font-size:.85rem; text-align:center; }.browse-card #browse-sentinel { height:1px; }
.profile-detail-card { width:min(100%,1200px); min-height:calc(100vh - 48px); max-width:1200px; animation:detailEnter .32s ease both; }.detail-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr); gap:28px; align-items:end; }.detail-hero-image { position:relative; min-height:360px; overflow:hidden; border-radius:23px; background:linear-gradient(145deg,#eadcf0,#d8bfdc); }.detail-hero-image img { display:block; width:100%; height:100%; min-height:360px; object-fit:cover; transition:transform .35s ease-out; will-change:transform; }.online-pill { position:absolute; left:15px; bottom:15px; padding:7px 10px; border:1px solid #ffffff85; border-radius:99px; color:#fff; background:#25132eb8; font-size:.72rem; font-weight:800; backdrop-filter:blur(8px); }.online-pill.online { color:#fff; background:#23835dbd; }.detail-heading h1 { font-size:clamp(2.2rem,7vw,4rem); }.detail-heading > p:not(.eyebrow) { margin:10px 0 18px; color:var(--muted); }.detail-heading .secondary-button { width:100%; }.detail-copy { margin-top:30px; }.detail-bio { color:#4e3757; line-height:1.65; }.detail-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:22px; }.detail-facts div { display:grid; gap:5px; padding:13px; border:1px solid var(--line); border-radius:13px; background:#fbf8fc; }.detail-facts span { color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.detail-facts strong { color:var(--ink); font-size:.88rem; font-weight:700; }.detail-gallery { margin-top:30px; }.detail-gallery h2 { margin:0 0 13px; font-size:1.2rem; }.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.gallery-grid img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px; }.gallery-locked { margin:0; padding:17px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); background:#fbf8fc; font-size:.84rem; }
@keyframes detailEnter { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
.matches-card,.match-breakdown-card { width:min(100%,1080px); padding:clamp(22px,4vw,38px); border:1px solid #ffffffc9; border-radius:30px; background:#fffffff0; box-shadow:0 26px 70px #5129651f; animation:detailEnter .32s ease both; }.match-feed { display:grid; gap:16px; }.match-tile { display:grid; grid-template-columns:190px minmax(0,1fr); overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 12px 28px #51296512; }.match-tile-image { position:relative; min-height:220px; overflow:hidden; background:linear-gradient(145deg,#eadcf0,#d8bfdc); }.match-tile-image img { width:100%; height:100%; object-fit:cover; }.match-tile-body { padding:20px; }.match-tile-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }.match-tile-heading .eyebrow { margin:0 0 5px; font-size:.64rem; }.match-tile-heading h2 { margin:0; font-size:1.55rem; }.match-score { display:grid; gap:2px; text-align:right; }.match-score strong { color:var(--plum); font-size:2rem; line-height:1; }.match-score span,.confidence-line span { color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.confidence-line { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }.confidence-line strong { color:var(--ink); }.match-brief { min-height:45px; padding:10px 0; color:#4e3757; font-size:.86rem; line-height:1.45; }.match-tile .primary-button { width:100%; }.empty-state { padding:36px 20px; border:1px dashed var(--line); border-radius:18px; color:var(--muted); text-align:center; }.empty-state h2 { margin:0 0 8px; color:var(--ink); font-size:1.3rem; }.empty-state p { margin:0; font-size:.85rem; }.breakdown-hero { position:relative; display:grid; grid-template-columns:1fr auto; gap:12px 25px; align-items:center; padding:26px; border-radius:22px; color:#fff; background:linear-gradient(135deg,var(--ink),var(--plum)); }.breakdown-hero .eyebrow { grid-column:1/-1; margin:0; color:#e9c8ee; }.breakdown-hero h1 { font-size:clamp(2.2rem,8vw,4rem); }.score-orbit { display:grid; place-items:center; width:145px; height:145px; border:8px solid #d99be366; border-radius:50%; background:#ffffff12; text-align:center; }.score-orbit strong { font-size:2.2rem; }.score-orbit span { max-width:80px; color:#efdff2; font-size:.66rem; font-weight:800; text-transform:uppercase; }.breakdown-confidence { grid-column:1/-1; display:flex; justify-content:space-between; padding-top:13px; border-top:1px solid #ffffff3d; color:#eadcf0; font-size:.78rem; }.breakdown-confidence strong { color:#fff; }.brief-panel,.compatibility-map,.calculation-panel,.question-list { margin-top:18px; padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; }.brief-panel h2 { margin:18px 0 8px; font-size:1rem; }.brief-panel h2:first-of-type { margin-top:0; }.brief-panel ul { display:grid; gap:8px; margin:0; padding-left:20px; color:#4e3757; font-size:.86rem; line-height:1.45; }.map-legend { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }.classification { display:inline-block; padding:5px 9px; border-radius:99px; font-size:.66rem; font-style:normal; font-weight:800; white-space:nowrap; }.classification.aligned { color:#23644a; background:#dff3e8; }.classification.close { color:#72521e; background:#f7ebc9; }.classification.worth-discussing { color:#7a3151; background:#f7dfe9; }.classification.awaiting { color:var(--muted); background:#eee9ef; }.breakdown-category { position:relative; display:grid; grid-template-columns:1fr auto; gap:8px 12px; padding:13px 0; border-top:1px solid var(--line); }.breakdown-category:first-of-type { border-top:0; }.breakdown-category-head { display:flex; align-items:center; justify-content:space-between; gap:10px; grid-column:1/-1; }.breakdown-category h3 { margin:0; font-size:.9rem; }.breakdown-category small { color:var(--muted); font-size:.7rem; }.score-track { height:8px; overflow:hidden; align-self:center; border-radius:99px; background:#eee7ef; }.score-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--violet),var(--plum)); }.category-score { color:var(--plum); font-size:.8rem; }.calculation-panel > p:not(.field-note) { color:#4e3757; font-size:.82rem; line-height:1.5; }.weight-row { display:grid; grid-template-columns:145px 1fr 45px; gap:10px; align-items:center; margin:10px 0; color:var(--muted); font-size:.75rem; }.weight-row > div { height:8px; overflow:hidden; border-radius:99px; background:#eee7ef; }.weight-row i { display:block; height:100%; border-radius:inherit; background:var(--violet); }.weight-row strong { color:var(--plum); text-align:right; }.question-comparison { display:grid; grid-template-columns:27px 1fr auto; gap:10px; align-items:center; padding:11px 0; border-top:1px solid var(--line); }.question-comparison:first-of-type { border-top:0; }.question-comparison > span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:var(--plum); background:#eee1f2; font-size:.68rem; font-weight:800; }.question-comparison div { display:grid; gap:3px; min-width:0; }.question-comparison strong { overflow:hidden; color:var(--ink); font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }.question-comparison small { color:var(--muted); font-size:.68rem; }.disclaimer { margin:17px 2px 0; color:var(--muted); font-size:.72rem; line-height:1.45; }
.chat-card,.conversation-card { width:min(100%,900px); padding:clamp(22px,4vw,38px); border:1px solid #ffffffc9; border-radius:30px; background:#fffffff0; box-shadow:0 26px 70px #5129651f; animation:detailEnter .32s ease both; }.conversation-list { display:grid; gap:8px; }.conversation-row { display:grid; grid-template-columns:46px 1fr auto auto; gap:12px; align-items:center; width:100%; padding:13px; border:1px solid var(--line); border-radius:15px; color:var(--ink); background:#fff; text-align:left; cursor:pointer; }.conversation-row:hover { border-color:var(--violet); box-shadow:0 8px 22px #51296512; }.conversation-avatar { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; color:#fff; font:500 1.35rem/1 Georgia,serif; background:linear-gradient(145deg,var(--violet),var(--plum)); }.conversation-row-copy { display:grid; gap:4px; min-width:0; }.conversation-row-copy strong { overflow:hidden; font-size:.95rem; text-overflow:ellipsis; white-space:nowrap; }.conversation-row-copy small { color:var(--muted); font-size:.72rem; }.conversation-unread,.unread-badge { display:grid; place-items:center; min-width:23px; height:23px; padding:0 6px; border-radius:99px; color:#fff; background:var(--plum); font-size:.68rem; font-weight:800; }.conversation-chevron { color:var(--muted); font-size:1.4rem; }.chat-launch { position:relative; }.chat-launch .unread-badge { position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; background:#be4b76; }.conversation-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }.conversation-header .back-button { margin-bottom:0; }.conversation-header h1 { font-size:clamp(2.2rem,8vw,3.5rem); }.message-list { display:grid; gap:3px; max-height:55vh; overflow-y:auto; margin:22px 0 12px; padding:4px 3px; scroll-behavior:smooth; }.message-day { margin:15px 0 7px; color:var(--muted); font-size:.68rem; font-weight:800; text-align:center; text-transform:uppercase; letter-spacing:.08em; }.message-line { display:flex; margin:2px 0; }.message-line.own { justify-content:flex-end; }.message-bubble { max-width:min(80%,560px); padding:10px 12px 7px; border-radius:16px 16px 16px 4px; color:#4e3757; background:#f0e6f3; }.message-line.own .message-bubble { border-radius:16px 16px 4px 16px; color:#fff; background:var(--plum); }.message-bubble p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:.9rem; line-height:1.4; }.message-bubble small { display:block; margin-top:5px; color:#806a86; font-size:.62rem; }.message-line.own .message-bubble small { color:#e7d5eb; }.message-bubble audio { display:block; width:min(260px,100%); margin-top:5px; }.message-image-button { display:block; max-width:260px; padding:0; overflow:hidden; border:0; border-radius:11px; background:transparent; cursor:zoom-in; }.message-image-button img { display:block; width:100%; max-height:300px; object-fit:cover; }.milestone-prompts { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:10px 0 13px; }.milestone-prompts > span { width:100%; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.milestone-prompts button { padding:7px 10px; border:1px solid var(--line); border-radius:99px; color:var(--plum); background:#fbf8fc; font-size:.72rem; cursor:pointer; }.message-form { display:grid; gap:8px; }.message-form textarea { width:100%; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:13px; outline:0; color:var(--ink); background:#fff; line-height:1.45; }.message-form textarea:focus { border-color:var(--violet); box-shadow:0 0 0 3px #8350a220; }.message-actions { display:flex; gap:8px; justify-content:flex-end; }.message-actions .primary-button,.message-actions .secondary-button { min-height:42px; padding:0 16px; }.attach-button { display:grid; place-items:center; width:42px; min-height:42px; border:1px solid var(--line); border-radius:12px; color:var(--plum); background:#fff; font-size:1.4rem; cursor:pointer; }.media-viewer { width:min(94vw,900px); max-height:94vh; padding:15px; border:0; border-radius:18px; background:#25132ef2; }.media-viewer::backdrop { background:#160b1dcc; }.media-viewer .back-button { color:#fff; }.media-viewer img { display:block; width:100%; max-height:80vh; object-fit:contain; }
.account-card { width:min(100%,900px); padding:clamp(22px,4vw,38px); border:1px solid #ffffffc9; border-radius:30px; background:#fffffff0; box-shadow:0 26px 70px #5129651f; animation:detailEnter .32s ease both; }.account-section { margin-top:18px; padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; }.account-section > .section-label { margin-top:0; }.account-section h2 { margin:0; color:var(--plum); font-size:1.8rem; text-transform:capitalize; }.membership-panel { display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,#fff,#f4e9f6); }.membership-mark { color:#c39aca; font:700 1rem/1 Georgia,serif; letter-spacing:.18em; }.account-profile-form textarea { width:100%; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fff; }.account-photo-list { display:grid; gap:8px; margin-bottom:13px; }.account-photo-row { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:#fbf8fc; }.account-photo-kind { color:var(--ink); font-size:.8rem; font-weight:800; }.photo-state { color:var(--muted); font-size:.7rem; text-transform:capitalize; }.account-photo-row .field-note { text-align:right; }.privacy-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.privacy-actions .secondary-button { min-height:44px; font-size:.78rem; }.account-links .secondary-button { width:100%; }.account-card > .text-button { display:block; margin:22px auto 0; }
@media (max-width:600px) { .check-grid { grid-template-columns:1fr; }.choice-row { flex-direction:column; gap:8px; } }
@media (max-width:760px) { .browse-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }.profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.detail-hero { grid-template-columns:1fr; }.detail-hero-image,.detail-hero-image img { min-height:330px; } }
@media (max-width:760px) { .match-tile { grid-template-columns:135px minmax(0,1fr); }.match-tile-image { min-height:190px; }.match-tile-body { padding:15px; }.match-tile-heading h2 { font-size:1.25rem; }.match-score strong { font-size:1.55rem; }.breakdown-hero { grid-template-columns:1fr auto; padding:20px; }.score-orbit { width:112px; height:112px; border-width:6px; }.score-orbit strong { font-size:1.7rem; }.weight-row { grid-template-columns:110px 1fr 38px; } }
@media (max-width:760px) { .chat-card,.conversation-card { padding:20px; border-radius:23px; }.conversation-header { gap:10px; }.conversation-header .text-button { font-size:.72rem; }.message-list { max-height:58vh; }.message-bubble { max-width:88%; } }
@media (max-width:760px) { .account-card { padding:20px; border-radius:23px; }.account-section { padding:16px; }.privacy-actions { grid-template-columns:1fr; } }
@media (max-width:520px) { .result-grid { grid-template-columns:1fr; }.questionnaire-row { padding:14px 12px; } }
@media (max-width:430px) { .browse-card,.profile-detail-card { padding:20px 16px; border-radius:23px; }.browse-header { gap:12px; }.browse-header h1 { font-size:2.3rem; }.browse-toolbar { grid-template-columns:1fr 1fr; padding:10px; gap:8px; }.profile-grid { gap:10px; }.profile-tile-body { padding:12px; }.profile-tile-heading h2 { font-size:.94rem; }.profile-tile-body p { font-size:.72rem; }.tile-meta { gap:4px; }.tile-meta span { padding:4px 6px; font-size:.6rem; }.detail-facts,.gallery-grid { grid-template-columns:1fr 1fr; }.detail-hero-image,.detail-hero-image img { min-height:290px; } }
@media (max-width:430px) { .matches-card,.match-breakdown-card { padding:20px 16px; border-radius:23px; }.match-tile { grid-template-columns:1fr; }.match-tile-image { min-height:240px; }.breakdown-hero { grid-template-columns:1fr; }.score-orbit { width:122px; height:122px; }.breakdown-hero h1 { font-size:2.7rem; }.question-comparison { grid-template-columns:27px minmax(0,1fr); }.question-comparison .classification { grid-column:2; justify-self:start; } }
@media (max-width:430px) { .chat-card,.conversation-card { padding:20px 16px; }.conversation-row { grid-template-columns:40px 1fr auto auto; gap:9px; padding:10px; }.conversation-avatar { width:40px; height:40px; font-size:1.15rem; }.conversation-row-copy strong { font-size:.86rem; }.conversation-row-copy small { font-size:.66rem; }.conversation-chevron { font-size:1.2rem; }.message-actions { gap:6px; }.message-actions .primary-button,.message-actions .secondary-button { padding:0 12px; }.milestone-prompts button { font-size:.66rem; } }
@media (max-width:430px) { .account-card { padding:20px 16px; }.account-section { padding:14px; }.account-photo-row { grid-template-columns:1fr auto; }.account-photo-row .photo-state { grid-column:2; grid-row:1; }.account-photo-row .field-note { grid-column:1/-1; text-align:left; } }
@media (max-width:420px) { .auth-card { padding:27px 22px; border-radius:24px; }.field-grid { grid-template-columns:1fr; } }

/* Mobile app shell */
:root {
  --canvas:#f8f2fa;
  --surface:rgba(255,255,255,.92);
  --surface-soft:#f1e7f4;
  --plum-deep:#3e234a;
  --focus-ring:0 0 0 4px rgba(131,80,162,.18);
}
html { -webkit-text-size-adjust:100%; }
body { min-height:100dvh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:0; box-shadow:var(--focus-ring); }
[hidden] { display:none !important; }
.app-shell { min-height:100dvh; transition:padding .28s ease,background .28s ease; }
.app-shell.member-mode {
  display:block;
  min-height:100dvh;
  padding:
    max(18px,env(safe-area-inset-top))
    max(16px,env(safe-area-inset-right))
    calc(112px + env(safe-area-inset-bottom))
    max(16px,env(safe-area-inset-left));
}
.app-shell.member-mode > .member-screen,
.app-shell.member-mode > .browse-card,
.app-shell.member-mode > .profile-detail-card,
.app-shell.member-mode > .matches-card,
.app-shell.member-mode > .match-breakdown-card,
.app-shell.member-mode > .chat-card,
.app-shell.member-mode > .account-card,
.app-shell.member-mode > .compass-card {
  margin-right:auto;
  margin-left:auto;
}
.member-screen,
.browse-card,
.profile-detail-card,
.matches-card,
.match-breakdown-card,
.chat-card,
.account-card,
.compass-card {
  animation:panelEnter .32s cubic-bezier(.2,.8,.2,1) both;
}
.panel-enter { animation:panelEnter .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes panelEnter {
  from { opacity:0; transform:translateY(10px) scale(.992); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

.home-card {
  width:min(100%,680px);
  padding:clamp(22px,5vw,34px);
  border-color:rgba(255,255,255,.75);
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(253,247,255,.88));
}
.app-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.home-card .eyebrow { margin-top:34px; }
.home-card h1 { color:var(--plum-deep); }
.avatar-button {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(99,48,111,.12);
  border-radius:50%;
  color:var(--plum);
  background:linear-gradient(145deg,#fff,#eee0f1);
  box-shadow:0 8px 20px rgba(81,41,101,.11);
  font-size:1.15rem;
  cursor:pointer;
}
.home-feature-card {
  position:relative;
  overflow:hidden;
  margin-top:27px;
  padding:24px;
  border-radius:24px;
  color:#fff;
  background:
    radial-gradient(circle at 100% 0,rgba(226,167,235,.45),transparent 38%),
    linear-gradient(135deg,#321a3c,var(--plum));
  box-shadow:0 18px 35px rgba(76,35,92,.2);
}
.home-feature-card::after {
  position:absolute;
  right:-35px;
  bottom:-55px;
  width:170px;
  height:170px;
  border:1px solid rgba(255,255,255,.23);
  border-radius:50%;
  content:"";
}
.home-feature-card .section-label { margin:0 0 10px; color:#ebccef; }
.home-feature-card h2 { position:relative; z-index:1; max-width:370px; margin:0; font:500 clamp(1.5rem,5vw,2rem)/1.02 Georgia,"Times New Roman",serif; letter-spacing:-.04em; }
.home-feature-card p:not(.section-label) { position:relative; z-index:1; max-width:390px; margin:12px 0 18px; color:#f0deef; font-size:.86rem; line-height:1.5; }
.home-feature-card .primary-button {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:48px;
  margin:0;
  padding:0 16px;
  color:var(--plum-deep);
  background:#fff;
  box-shadow:none;
}
.home-feature-card .primary-button span { font-size:1.2rem; }
.home-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.home-action {
  position:relative;
  display:grid;
  gap:3px;
  min-height:119px;
  padding:15px;
  border:1px solid rgba(99,48,111,.11);
  border-radius:19px;
  color:var(--ink);
  background:rgba(255,255,255,.8);
  text-align:left;
  box-shadow:0 10px 23px rgba(81,41,101,.06);
  cursor:pointer;
}
.home-action:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(81,41,101,.11); }
.home-action strong { font-size:.88rem; }
.home-action small { color:var(--muted); font-size:.7rem; }
.home-action-icon { display:grid; place-items:center; width:31px; height:31px; margin-bottom:4px; border-radius:10px; color:var(--plum); background:var(--surface-soft); font-size:1.15rem; }
.home-action.subtle { color:#6b536f; }
.home-action.subtle .home-action-icon { color:#6b536f; background:#f3edf4; }
.home-action .unread-badge { position:absolute; top:10px; right:10px; }

.member-navigation {
  position:fixed;
  z-index:40;
  left:50%;
  bottom:max(10px,env(safe-area-inset-bottom));
  display:none;
  align-items:stretch;
  width:min(calc(100% - 24px),650px);
  min-height:68px;
  padding:7px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:25px;
  background:rgba(255,255,255,.86);
  box-shadow:0 16px 42px rgba(59,27,71,.2);
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  transform:translateX(-50%);
}
.member-navigation:not([hidden]) { display:flex; }
.member-navigation button {
  position:relative;
  display:grid;
  flex:1;
  place-items:center;
  gap:3px;
  min-width:0;
  padding:5px 2px;
  border:0;
  border-radius:18px;
  color:#866e8d;
  background:transparent;
  cursor:pointer;
  transition:color .2s ease,background .2s ease,transform .2s ease;
}
.member-navigation button svg {
  width:22px;
  height:22px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.member-navigation button span { overflow:hidden; max-width:100%; font-size:.61rem; font-weight:800; letter-spacing:.01em; text-overflow:ellipsis; white-space:nowrap; }
.member-navigation button.is-active { color:var(--plum); background:#eee1f2; }
.member-navigation button.is-active svg { stroke-width:2.1; }
.member-navigation button:active { transform:scale(.94); }
.member-navigation .unread-badge { position:absolute; top:1px; right:calc(50% - 21px); min-width:18px; height:18px; padding:0 4px; border:2px solid rgba(255,255,255,.92); background:#c24f79; font-size:.57rem; }

@media (max-width:760px) {
  .app-shell.member-mode > .browse-card,
  .app-shell.member-mode > .profile-detail-card,
  .app-shell.member-mode > .matches-card,
  .app-shell.member-mode > .match-breakdown-card,
  .app-shell.member-mode > .chat-card,
  .app-shell.member-mode > .account-card,
  .app-shell.member-mode > .compass-card {
    width:100%;
    padding:4px 0 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .app-shell.member-mode .browse-header { margin-bottom:19px; }
  .app-shell.member-mode .browse-header .back-button,
  .app-shell.member-mode > .profile-detail-card > .back-button,
  .app-shell.member-mode > .match-breakdown-card > .back-button,
  .app-shell.member-mode > .compass-card > .back-button { display:none; }
  .app-shell.member-mode .browse-toolbar { overflow-x:auto; display:flex; padding:0 0 5px; border:0; background:transparent; scrollbar-width:none; }
  .app-shell.member-mode .browse-toolbar::-webkit-scrollbar { display:none; }
  .app-shell.member-mode .browse-toolbar label { flex:0 0 124px; padding:9px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.74); }
  .app-shell.member-mode .browse-toolbar label:first-child { flex-basis:145px; }
  .app-shell.member-mode .profile-grid { gap:11px; }
  .app-shell.member-mode .profile-tile { border-radius:18px; }
  .app-shell.member-mode .profile-tile-body { padding:12px; }
  .app-shell.member-mode .matches-card,
  .app-shell.member-mode .match-breakdown-card,
  .app-shell.member-mode .chat-card,
  .app-shell.member-mode .account-card { padding-top:4px; }
}

/* Match: one intentional profile at a time. */
.match-deck { max-width:560px; margin:0 auto; }.match-deck-count { margin:0 0 10px; color:#8d758f; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-align:center; text-transform:uppercase; }.match-action-card { overflow:hidden; border:1px solid rgba(99,48,111,.14); border-radius:27px; background:#fff; box-shadow:0 22px 48px rgba(73,35,86,.16); touch-action:pan-y; transition:transform .22s ease,opacity .22s ease; user-select:none; }.match-action-card.is-dragging { transition:none; }.match-action-card.is-passing { opacity:0; transform:translateX(-125%) rotate(-12deg) !important; }.match-action-card.is-connecting { opacity:0; transform:translateX(125%) rotate(12deg) !important; }.match-action-image { position:relative; min-height:370px; overflow:hidden; background:linear-gradient(145deg,#eadcf0,#d8bfdc); }.match-action-image img { width:100%; height:100%; min-height:370px; object-fit:cover; }.match-action-body { padding:21px; }.match-action-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }.match-action-heading .eyebrow { margin:0 0 5px; font-size:.63rem; }.match-action-heading h2 { margin:0; color:var(--plum-deep); font-size:2rem; line-height:1; }.match-action-heading p:last-child { margin:8px 0 0; color:#876d8c; font-size:.82rem; }.match-reveal-button { width:100%; min-height:44px; margin-top:7px; border:1px solid rgba(99,48,111,.16); border-radius:12px; color:var(--plum); background:#faf6fb; font:800 .8rem/1 inherit; cursor:pointer; }.match-actions { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:16px; }.match-action { display:flex; align-items:center; justify-content:center; gap:8px; min-height:53px; border:1px solid transparent; border-radius:15px; font:800 .86rem/1 inherit; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }.match-action:hover { transform:translateY(-2px); }.match-action.pass { color:#91506a; border-color:#ecc7d4; background:#fff8fa; }.match-action.connect { color:#fff; background:linear-gradient(135deg,var(--plum),var(--violet)); box-shadow:0 10px 20px rgba(112,45,132,.2); }.match-action > :first-child { font-size:1.28rem; line-height:0; }.match-swipe-hint { margin:15px 0 0; color:#9c879f; font-size:.67rem; text-align:center; }
@media (max-width:520px) { .match-action-card { border-radius:23px; }.match-action-image,.match-action-image img { min-height:48dvh; }.match-action-body { padding:18px 16px; }.match-action-heading h2 { font-size:1.75rem; } }

/* Connect: an inbox for established and pending connections only. */
.connect-card { width:min(100%,760px); padding:clamp(22px,4vw,38px); border:1px solid #ffffffc9; border-radius:30px; background:#fffffff0; box-shadow:0 26px 70px #5129651f; }.connection-section { margin-top:22px; }.connection-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }.connection-heading h2 { margin:0; color:var(--plum-deep); font:500 1.35rem/1 Georgia,"Times New Roman",serif; }.connection-heading span { display:grid; place-items:center; min-width:26px; height:26px; padding:0 8px; border-radius:99px; color:var(--plum); background:#eee1f2; font-size:.7rem; font-weight:800; }.connection-list { display:grid; gap:8px; }.connection-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; min-height:72px; padding:12px; border:1px solid rgba(99,48,111,.12); border-radius:16px; background:#fff; box-shadow:0 6px 17px rgba(81,41,101,.035); }.connection-avatar { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--plum),var(--violet)); font:700 1rem/1 Georgia,"Times New Roman",serif; }.connection-copy { display:grid; gap:4px; min-width:0; }.connection-copy strong { overflow:hidden; color:#55335e; font-size:.88rem; text-overflow:ellipsis; white-space:nowrap; }.connection-copy small { color:#947f99; font-size:.68rem; }.connection-row .secondary-button { min-height:37px; padding:0 10px; font-size:.68rem; white-space:nowrap; }.connection-state { color:#9c879f; font-size:.66rem; text-align:right; }.connection-empty { margin:0; padding:17px 14px; border:1px dashed rgba(99,48,111,.17); border-radius:14px; color:#9a849e; background:#fcf9fd; font-size:.76rem; text-align:center; }
@media (max-width:520px) { .connect-card { padding:20px 16px; border-radius:23px; }.connection-row { grid-template-columns:40px minmax(0,1fr); }.connection-row .secondary-button,.connection-state { grid-column:2; justify-self:start; }.connection-avatar { width:40px; height:40px; } }

/* Chat: native conversation list, message surfaces and keyboard-safe composer. */
.chat-app-header { align-items:center; }.chat-header-mark { display:grid; place-items:center; width:43px; height:43px; margin-left:auto; border-radius:15px; color:var(--plum); background:#eee1f2; }.chat-header-mark svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.conversation-list { gap:10px; }.conversation-row { position:relative; grid-template-columns:50px minmax(0,1fr) auto; gap:13px; min-height:75px; padding:12px; border-color:rgba(99,48,111,.1); border-radius:18px; box-shadow:0 7px 18px rgba(81,41,101,.035); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; animation:conversationEnter .32s ease both; animation-delay:calc(min(var(--conversation-order, 0), 8) * 35ms); }.conversation-row:hover { transform:translateY(-2px); }.conversation-row.has-unread { border-color:rgba(149,70,167,.32); background:linear-gradient(115deg,#fff,#fcf4fd); }.conversation-avatar { width:50px; height:50px; box-shadow:0 6px 14px rgba(81,41,101,.16); }.conversation-row-copy { gap:6px; }.conversation-row-title { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }.conversation-row-title strong { font-size:.92rem; }.conversation-row-title small { flex:none; color:#a18aa7; font-size:.62rem; }.conversation-preview { overflow:hidden; color:#8b768f !important; font-size:.7rem !important; text-overflow:ellipsis; white-space:nowrap; }.conversation-row.has-unread .conversation-preview { color:var(--plum) !important; font-weight:800; }.conversation-unread { min-width:21px; height:21px; box-shadow:0 4px 9px rgba(112,45,132,.18); }.conversation-chevron { justify-self:end; }
@keyframes conversationEnter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
.conversation-card { display:flex; flex-direction:column; min-height:min(760px,calc(100dvh - 48px)); }.conversation-card > .back-button { align-self:flex-start; }.conversation-header { align-items:center; padding:8px 0 15px; border-bottom:1px solid rgba(99,48,111,.09); }.conversation-person { display:flex; align-items:center; gap:11px; min-width:0; }.conversation-person .conversation-avatar { flex:none; }.conversation-header .eyebrow { margin:0 0 3px; font-size:.6rem; }.conversation-header h1 { margin:0; font:500 clamp(1.35rem,5vw,2rem)/1 Georgia,"Times New Roman",serif; letter-spacing:-.035em; }.conversation-header .field-note { margin:4px 0 0; font-size:.68rem; }
.message-list { flex:1; max-height:none; min-height:320px; margin:0; padding:17px 4px 11px; scrollbar-width:thin; scrollbar-color:#c9b8ce transparent; }.message-day { display:flex; align-items:center; justify-content:center; margin:15px 0 10px; }.message-day span { padding:5px 9px; border:1px solid rgba(99,48,111,.09); border-radius:99px; color:#896f90; background:#f7f0f8; font-size:.6rem; letter-spacing:.05em; }.message-bubble { position:relative; max-width:min(77%,560px); padding:10px 12px 8px; border:1px solid rgba(99,48,111,.08); border-radius:18px 18px 18px 5px; box-shadow:0 4px 10px rgba(81,41,101,.045); }.message-line.own .message-bubble { border:0; border-radius:18px 18px 5px 18px; background:linear-gradient(135deg,#774287,var(--plum)); box-shadow:0 7px 16px rgba(81,41,101,.18); }.message-bubble small { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:6px; }.delivery-state { color:#e8d5eb; font-size:.6rem; }.delivery-state.read { color:#f6d3f5; }.message-image-button { position:relative; margin-top:3px; border-radius:13px; box-shadow:0 3px 10px rgba(31,13,40,.17); }.message-image-button img { min-width:180px; }.image-expand-mark { position:absolute; right:7px; bottom:7px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff; background:rgba(38,16,47,.57); font-size:1rem; backdrop-filter:blur(8px); }.voice-note { display:flex; align-items:center; gap:8px; min-width:220px; margin-top:5px; padding:7px 8px; border-radius:12px; background:rgba(255,255,255,.12); }.message-line.received .voice-note { background:rgba(99,48,111,.07); }.voice-note-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:var(--plum); background:#fff; font-size:.9rem; }.voice-note audio { width:100%; margin:0; height:31px; }
.milestone-prompts { margin:4px 0 11px; padding-top:10px; border-top:1px solid rgba(99,48,111,.08); }.milestone-prompts > span { font-size:.6rem; }.milestone-prompts button { padding:6px 9px; color:#76517f; background:#faf6fb; font-size:.66rem; }
.message-form { gap:6px; padding-top:2px; }.message-composer { display:grid; grid-template-columns:40px minmax(0,1fr) 40px 42px; gap:7px; align-items:end; padding:7px; border:1px solid rgba(99,48,111,.13); border-radius:19px; background:rgba(255,255,255,.94); box-shadow:0 8px 20px rgba(81,41,101,.08); }.message-form textarea { min-height:38px; max-height:116px; padding:9px 3px; border:0; border-radius:0; background:transparent; font-size:.86rem; line-height:1.35; }.message-form textarea:focus { box-shadow:none; }.attach-button,.voice-message-button,.send-message-button { display:grid; place-items:center; width:40px; min-height:40px; padding:0; border:0; border-radius:13px; cursor:pointer; }.attach-button { color:var(--plum); background:#f2e6f4; font-size:inherit; }.voice-message-button { color:#806088; background:#f7f3f8; }.send-message-button { width:42px; color:#fff; background:var(--plum); box-shadow:0 5px 12px rgba(112,45,132,.22); }.attach-button svg,.voice-message-button svg,.send-message-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.send-message-button svg { fill:currentColor; stroke:none; width:18px; height:18px; }.attachment-preview { margin:0 5px; color:var(--plum); font-size:.66rem; font-weight:800; }.media-viewer { width:min(100vw,900px); max-width:100vw; max-height:100dvh; padding:17px; border-radius:24px; }.media-viewer img { max-height:calc(100dvh - 90px); }

@media (max-width:760px) {
  .app-shell.member-mode > .conversation-card { width:100%; min-height:100dvh; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .app-shell.member-mode .conversation-card > .back-button { display:none; }
  .app-shell.member-mode .conversation-header { position:sticky; top:0; z-index:5; margin:0 -16px; padding:14px 16px 12px; background:rgba(252,248,253,.92); backdrop-filter:blur(16px); }.app-shell.member-mode .conversation-header h1 { font-size:1.34rem; }.app-shell.member-mode .conversation-header .conversation-avatar { width:40px; height:40px; font-size:1.08rem; }.app-shell.member-mode .conversation-header .text-button { font-size:.64rem; }
  .app-shell.member-mode .message-list { min-height:0; padding:13px 4px 10px; }.app-shell.member-mode .message-bubble { max-width:86%; }.app-shell.member-mode .message-bubble p { font-size:.84rem; }.app-shell.member-mode .message-image-button img { min-width:150px; max-height:270px; }.app-shell.member-mode .voice-note { min-width:190px; }.app-shell.member-mode .milestone-prompts { margin:0; padding:8px 16px 9px; }.app-shell.member-mode .message-form { position:sticky; bottom:calc(var(--keyboard-offset, 0px) + env(safe-area-inset-bottom)); z-index:8; margin:0 -16px; padding:8px 16px calc(9px + env(safe-area-inset-bottom)); background:linear-gradient(transparent,rgba(252,248,253,.95) 22%); }.app-shell.member-mode .message-composer { border-radius:19px; }.mobile-keyboard-open .member-navigation { display:none; }.mobile-keyboard-open .app-shell.member-mode { padding-bottom:14px; }
}

/* Match: richer native cards, reveal moment, and comparison surfaces. */
.match-tile { position:relative; grid-template-columns:222px minmax(0,1fr); border-color:rgba(99,48,111,.12); border-radius:24px; box-shadow:0 16px 35px rgba(81,41,101,.09); animation:matchReveal .42s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(min(var(--match-order, 0), 8) * 55ms); }
@keyframes matchReveal { from { opacity:0; transform:translateY(13px) scale(.987); } to { opacity:1; transform:translateY(0) scale(1); } }
.match-tile-image { min-height:278px; }.match-tile-image img { transition:transform .6s cubic-bezier(.2,.8,.2,1); }.match-tile:hover .match-tile-image img { transform:scale(1.045); }
.match-image-wash { position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(35,15,45,.35)); pointer-events:none; }
.match-photo-label { position:absolute; top:13px; left:13px; padding:6px 9px; border:1px solid rgba(255,255,255,.6); border-radius:99px; color:#fff; background:rgba(49,24,61,.54); font-size:.62rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(10px); }
.match-tile-body { padding:22px 23px 20px; }.match-tile-heading { align-items:center; }.match-tile-heading h2 { font:500 1.8rem/1 Georgia,"Times New Roman",serif; letter-spacing:-.035em; }
.match-open-button { display:grid; flex:none; place-items:center; width:38px; height:38px; border:1px solid rgba(99,48,111,.14); border-radius:50%; color:var(--plum); background:#faf6fb; font-size:1.25rem; cursor:pointer; transition:transform .2s ease,background .2s ease; }.match-open-button:hover { transform:translate(2px,-2px); background:#eee1f2; }
.match-metrics { display:grid; grid-template-columns:102px 1fr; gap:18px; align-items:center; margin:19px 0 15px; padding:13px; border:1px solid rgba(99,48,111,.1); border-radius:18px; background:linear-gradient(120deg,#fbf8fc,#f4ebf6); }
.match-score-ring { position:relative; display:grid; place-items:center; width:88px; height:88px; border-radius:50%; color:var(--plum-deep); background:conic-gradient(var(--plum) calc(var(--alignment) * 1%),#e6dbe9 0); isolation:isolate; text-align:center; }.match-score-ring::before { position:absolute; z-index:-1; inset:7px; border-radius:inherit; background:#fff; content:""; }.match-score-ring strong { font-size:1.46rem; line-height:1; }.match-score-ring sup { font-size:.7rem; }.match-score-ring span { width:62px; margin-top:-4px; color:#806886; font-size:.53rem; font-weight:900; letter-spacing:.045em; line-height:1.15; text-transform:uppercase; }
.confidence-meter { display:grid; gap:7px; min-width:0; }.confidence-meter-head { display:flex; justify-content:space-between; gap:10px; color:#74587c; font-size:.7rem; font-weight:800; }.confidence-meter-head strong { color:var(--plum); }.confidence-meter-track { height:9px; overflow:hidden; border-radius:99px; background:#e3d7e6; }.confidence-meter-track i { display:block; width:calc(var(--confidence) * 1%); height:100%; border-radius:inherit; background:linear-gradient(90deg,#b96acf,var(--plum)); box-shadow:0 2px 8px rgba(112,45,132,.2); }.confidence-meter small { color:#98859d; font-size:.64rem; }
.match-brief { display:grid; grid-template-columns:27px 1fr; gap:8px; align-items:start; min-height:0; padding:3px 1px 15px; }.match-brief-mark { display:grid; place-items:center; width:25px; height:25px; border-radius:9px; color:#a850b1; background:#f2e2f4; font-size:.86rem; }.match-brief p { margin:1px 0 0; }.match-tile .primary-button { display:flex; align-items:center; justify-content:space-between; min-height:45px; padding:0 15px; }.match-tile .primary-button span { font-size:1.25rem; }
.breakdown-hero { overflow:hidden; grid-template-columns:minmax(0,1fr) 150px; gap:8px 25px; min-height:294px; padding:29px; background:radial-gradient(circle at 100% 0,rgba(230,148,230,.43),transparent 34%),linear-gradient(135deg,#24112e,var(--plum)); box-shadow:0 20px 43px rgba(81,41,101,.18); }.breakdown-hero::after { position:absolute; right:-66px; bottom:-78px; width:260px; height:260px; border:1px solid rgba(255,255,255,.16); border-radius:50%; content:""; }.reveal-sparkles { position:absolute; top:20px; right:26px; color:#f3c8f5; font-size:1.45rem; letter-spacing:7px; transform:rotate(-12deg); }.breakdown-hero-copy { align-self:end; }.breakdown-hero h1 { margin:0; color:#fff; font:500 clamp(2.35rem,8vw,4rem)/.94 Georgia,"Times New Roman",serif; letter-spacing:-.055em; }.breakdown-hero-copy p { max-width:330px; margin:11px 0 0; color:#f0dff1; font-size:.8rem; line-height:1.45; }.score-orbit { position:relative; width:145px; height:145px; border:0; background:conic-gradient(#f4c4f4 calc(var(--alignment) * 1%),rgba(255,255,255,.2) 0); box-shadow:0 10px 27px rgba(24,9,31,.21); }.score-orbit::before { position:absolute; inset:8px; border-radius:inherit; background:linear-gradient(145deg,#4d1d5d,#34123e); content:""; }.score-orbit strong,.score-orbit span { position:relative; z-index:1; }.score-orbit strong { font-size:2.15rem; }.score-orbit sup { font-size:.9rem; }.breakdown-confidence { display:flex; grid-column:1/-1; align-items:center; padding:13px 0 0; border-top-color:rgba(255,255,255,.3); }.breakdown-confidence div { display:grid; gap:2px; }.breakdown-confidence small { color:#e9cfe9; font-size:.67rem; }.breakdown-confidence strong { font-size:1.25rem; }
.brief-panel,.compatibility-map,.calculation-panel,.question-list { border-color:rgba(99,48,111,.11); border-radius:21px; box-shadow:0 10px 25px rgba(81,41,101,.045); }.brief-panel { background:linear-gradient(145deg,#fff,#fbf7fc); }.compatibility-map-head,.comparison-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:13px; }.compatibility-map h2,.comparison-heading h2 { margin:0; color:var(--plum-deep); font:500 1.35rem/1 Georgia,"Times New Roman",serif; letter-spacing:-.03em; }.compatibility-map-head .eyebrow,.comparison-heading .eyebrow { margin:0 0 6px; }.map-legend { justify-content:flex-end; margin:0; }.breakdown-category { padding:15px 0; }.breakdown-category h3 { font-size:.93rem; }.score-track { height:9px; }.score-track i { box-shadow:0 2px 8px rgba(112,45,132,.15); }
.question-list { padding:0; overflow:hidden; }.comparison-heading { align-items:start; margin:0; padding:21px 20px 16px; border-bottom:1px solid var(--line); background:#fcf9fd; }.comparison-heading > p { max-width:230px; margin:0; color:var(--muted); font-size:.7rem; line-height:1.45; text-align:right; }.question-comparison { grid-template-columns:30px minmax(0,1fr) auto; gap:12px; margin:0 20px; padding:14px 0; }.question-comparison > span { width:30px; height:30px; }.question-comparison strong { overflow:visible; font-size:.84rem; white-space:normal; }.question-comparison small { order:-1; color:#997c9f; font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }

@media (max-width:760px) {
  .app-shell.member-mode .matches-card,.app-shell.member-mode .match-breakdown-card { padding-top:4px; }
  .app-shell.member-mode .match-tile { grid-template-columns:145px minmax(0,1fr); border-radius:20px; }
  .app-shell.member-mode .match-tile-image { min-height:244px; }.app-shell.member-mode .match-tile-body { padding:15px 14px 14px; }.app-shell.member-mode .match-tile-heading h2 { font-size:1.37rem; }.app-shell.member-mode .match-tile-heading .eyebrow { font-size:.56rem; }.app-shell.member-mode .match-open-button { width:31px; height:31px; font-size:1rem; }
  .app-shell.member-mode .match-metrics { grid-template-columns:72px 1fr; gap:9px; margin:12px 0 10px; padding:9px; border-radius:14px; }.app-shell.member-mode .match-score-ring { width:62px; height:62px; }.app-shell.member-mode .match-score-ring::before { inset:5px; }.app-shell.member-mode .match-score-ring strong { font-size:1rem; }.app-shell.member-mode .match-score-ring span { width:44px; font-size:.42rem; }.app-shell.member-mode .confidence-meter { gap:5px; }.app-shell.member-mode .confidence-meter small { display:none; }.app-shell.member-mode .match-brief { grid-template-columns:21px 1fr; gap:6px; padding-bottom:10px; }.app-shell.member-mode .match-brief-mark { width:20px; height:20px; border-radius:7px; font-size:.68rem; }.app-shell.member-mode .match-brief p { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:.7rem; line-height:1.3; }.app-shell.member-mode .match-tile .primary-button { min-height:38px; padding:0 11px; border-radius:12px; font-size:.68rem; }
  .app-shell.member-mode .breakdown-hero { grid-template-columns:1fr 117px; min-height:270px; padding:23px 20px; border-radius:0 0 25px 25px; }.app-shell.member-mode .breakdown-hero .eyebrow { margin:0; }.app-shell.member-mode .score-orbit { width:116px; height:116px; }.app-shell.member-mode .score-orbit strong { font-size:1.75rem; }.app-shell.member-mode .breakdown-hero-copy p { max-width:200px; font-size:.72rem; }.app-shell.member-mode .breakdown-confidence { padding-top:11px; }.app-shell.member-mode .brief-panel,.app-shell.member-mode .compatibility-map,.app-shell.member-mode .calculation-panel { padding:17px; border-radius:18px; }.app-shell.member-mode .compatibility-map-head { display:grid; gap:12px; }.app-shell.member-mode .map-legend { justify-content:flex-start; }.app-shell.member-mode .comparison-heading { display:grid; gap:8px; padding:18px 16px 14px; }.app-shell.member-mode .comparison-heading > p { max-width:none; text-align:left; }.app-shell.member-mode .question-comparison { margin:0 16px; grid-template-columns:29px minmax(0,1fr); }.app-shell.member-mode .question-comparison .classification { grid-column:2; justify-self:start; }
}
@media (max-width:390px) {
  .app-shell.member-mode { padding-right:12px; padding-left:12px; }
  .home-card { padding:21px 18px; }
  .home-action { min-height:107px; padding:13px; }
  .member-navigation { width:calc(100% - 16px); padding:6px 4px; }
  .member-navigation button span { font-size:.57rem; }
}
 .voice-message-button.is-recording { color:#fff; background:#c04d72; box-shadow:0 0 0 4px rgba(192,77,114,.15); font-size:.78rem; animation:recordingPulse 1s ease-in-out infinite alternate; }
@keyframes recordingPulse { to { transform:scale(1.06); box-shadow:0 0 0 8px rgba(192,77,114,.04); } }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* Compass and Profile: progress-led journey, clear photo management and privacy controls. */
.compass-card { overflow:hidden; padding:0; border-color:rgba(255,255,255,.8); background:rgba(255,255,255,.91); }.compass-card > .back-button { margin:22px 24px 0; }.compass-hero { position:relative; overflow:hidden; padding:12px 28px 25px; color:#fff; background:radial-gradient(circle at 100% 5%,rgba(231,163,236,.42),transparent 34%),linear-gradient(135deg,#30143b,var(--plum)); }.compass-hero::after { position:absolute; right:-72px; bottom:-116px; width:245px; height:245px; border:1px solid rgba(255,255,255,.17); border-radius:50%; content:""; }.compass-hero .wordmark { position:relative; z-index:1; color:#f1cdf4; }.compass-hero .eyebrow { position:relative; z-index:1; margin:30px 0 6px; color:#efc9f2; }.compass-hero h1 { position:relative; z-index:1; margin:0; color:#fff; font:500 clamp(2.3rem,7vw,3.7rem)/.96 Georgia,"Times New Roman",serif; letter-spacing:-.055em; }.compass-hero .intro { position:relative; z-index:1; max-width:450px; margin:11px 0 18px; color:#f1ddef; }.compass-orbit { position:absolute; z-index:1; top:22px; right:27px; display:grid; place-items:center; width:52px; height:52px; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:#f8d7f7; background:rgba(255,255,255,.09); font-size:1.2rem; transform:rotate(-12deg); }.compass-hero .journey-meter { position:relative; z-index:1; margin-top:0; background:rgba(255,255,255,.21); }.compass-hero .journey-meter div { background:linear-gradient(90deg,#fff,#f2b5ef); box-shadow:0 2px 8px rgba(255,255,255,.25); }.compass-hero .field-note { position:relative; z-index:1; margin:9px 0 0; color:#ecd8ec; }.compass-card > :not(.back-button):not(.compass-hero):not(.status-message) { margin-right:24px; margin-left:24px; }.compass-card > .result-grid { margin-top:20px; }.result-grid { grid-template-columns:1fr; }.result-card,.result-empty { position:relative; overflow:hidden; padding:16px; border-color:rgba(99,48,111,.1); border-radius:17px; background:linear-gradient(135deg,#fff,#f7eff8); box-shadow:0 8px 18px rgba(81,41,101,.04); }.result-card::after { position:absolute; right:-20px; bottom:-31px; width:92px; height:92px; border:1px solid #d8bedf; border-radius:50%; content:""; }.result-empty { display:grid; gap:5px; color:#725c78; }.result-empty span { color:#a080a8; font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.result-empty strong { color:var(--plum); font:500 1.2rem/1 Georgia,"Times New Roman",serif; }.result-empty small { color:var(--muted); font-size:.72rem; }.badge-list { display:grid; gap:10px; margin-top:18px !important; }.badge-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }.badge-heading .section-label { margin:0; }.badge-heading > p:last-child { margin:0; color:#806588; font-size:.7rem; }.badge-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.badge { display:flex; align-items:center; gap:8px; min-width:0; padding:10px; border:1px solid rgba(99,48,111,.1); border-radius:15px; background:#fbf8fc; }.badge > b { display:grid; flex:none; place-items:center; width:29px; height:29px; border-radius:10px; color:#a17aa8; background:#eee1f2; }.badge > span { display:grid; gap:2px; min-width:0; }.badge strong { overflow:hidden; color:#5c3a65; font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }.badge small { overflow:hidden; color:#9b879f; font-size:.59rem; text-overflow:ellipsis; white-space:nowrap; }.badge.earned { border-color:#d8b3e1; background:linear-gradient(135deg,#fff,#f5e6f6); }.badge.earned > b { color:#fff; background:var(--plum); box-shadow:0 4px 10px rgba(112,45,132,.2); }.badge.locked { opacity:.7; }.questionnaire-list { gap:10px; margin:20px 24px 27px !important; }.questionnaire-row { position:relative; overflow:hidden; padding:14px; border-color:rgba(99,48,111,.1); border-radius:17px; box-shadow:0 7px 17px rgba(81,41,101,.035); transition:transform .2s ease,box-shadow .2s ease; animation:questionnaireEnter .32s ease both; animation-delay:calc(min(var(--questionnaire-order, 0), 10) * 28ms); }.questionnaire-row:hover { transform:translateY(-2px); }.questionnaire-row-copy { display:grid; gap:5px; flex:1; min-width:0; }.questionnaire-row small { font-size:.68rem; }.questionnaire-row i { display:block; height:5px; overflow:hidden; margin-top:3px; border-radius:99px; background:#eadfed; }.questionnaire-row i b { display:block; width:var(--questionnaire-progress); height:100%; border-radius:inherit; background:linear-gradient(90deg,#bd78ca,var(--plum)); }.questionnaire-row > em { display:grid; flex:none; place-items:center; width:37px; height:37px; border-radius:50%; color:var(--plum); background:#f0e3f2; font-size:.68rem; font-style:normal; font-weight:900; }.questionnaire-row.is-complete > em { color:#fff; background:#388e69; }.compass-loading { display:grid; gap:10px; padding:5px 0 25px; }.compass-loading span { height:69px; border-radius:17px; background:linear-gradient(100deg,#f1ebf2 20%,#fbf8fc 37%,#f1ebf2 54%); background-size:200% 100%; animation:skeletonShimmer 1.35s linear infinite; }.compass-empty-state { padding:28px 18px; border:1px dashed rgba(99,48,111,.2); border-radius:18px; color:#806b86; background:#fbf8fc; text-align:center; }.compass-empty-state strong { display:block; color:var(--plum-deep); font:500 1.25rem/1 Georgia,"Times New Roman",serif; }.compass-empty-state p { margin:8px 0 0; font-size:.76rem; }.compass-card > .status-message { margin:14px 24px 0; }
@keyframes questionnaireEnter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
.account-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }.account-section-heading .section-label { margin:0 0 5px; }.account-section-heading h2 { color:var(--plum-deep); font:500 1.35rem/1 Georgia,"Times New Roman",serif; letter-spacing:-.03em; }.section-heading-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:12px; color:var(--plum); background:#f0e3f2; font-size:1.1rem; }.photo-management-panel .field-note { margin-top:0; line-height:1.45; }.account-photo-list { margin-top:14px; }.account-photo-row { grid-template-columns:32px minmax(0,1fr) auto auto; gap:9px; min-height:60px; border-color:rgba(99,48,111,.1); border-radius:14px; background:#fcf9fd; }.account-photo-row.is-primary { border-color:#d9b4e1; background:linear-gradient(115deg,#fff,#f8eef9); }.account-photo-symbol { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; color:#8c6097; background:#eee1f2; font-size:.86rem; }.account-photo-row.is-primary .account-photo-symbol { color:#fff; background:var(--plum); }.account-photo-copy { display:grid; gap:3px; min-width:0; }.account-photo-copy strong { color:#593a62; font-size:.78rem; }.account-photo-copy small { overflow:hidden; color:#96819b; font-size:.63rem; text-overflow:ellipsis; white-space:nowrap; }.photo-state { padding:4px 7px; border-radius:99px; background:#eee8ef; font-size:.61rem; font-weight:800; }.photo-state.approved { color:#23644a; background:#dff3e8; }.photo-state.pending { color:#72521e; background:#f7ebc9; }.photo-state.rejected { color:#7a3151; background:#f7dfe9; }.photo-row-action { max-width:110px; color:#9b849f; font-size:.61rem; text-align:right; }.photo-empty-state { display:grid; place-items:center; gap:5px; padding:21px; border:1px dashed rgba(99,48,111,.18); border-radius:15px; color:#8d778f; background:#fcf9fd; text-align:center; }.photo-empty-state > span { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; color:var(--plum); background:#eee1f2; }.photo-empty-state strong { color:#614068; font-size:.78rem; }.photo-empty-state p { margin:0; font-size:.67rem; }.privacy-panel { border-color:rgba(112,45,132,.15); background:linear-gradient(145deg,#fff,#fbf5fc); }.privacy-actions .secondary-button { display:flex; align-items:center; justify-content:flex-start; padding:0 13px; border-color:rgba(99,48,111,.12); background:#fff; }.privacy-actions .secondary-button::before { color:var(--plum); content:'→'; font-size:1rem; }.privacy-actions .privacy-danger { color:#94445f; border-color:#ecc4d1; background:#fff8fa; }.privacy-actions .privacy-danger::before { color:#b54e70; content:'!'; font-weight:900; }
@media (max-width:760px) { .app-shell.member-mode > .compass-card { padding:0; overflow:hidden; border-radius:0; }.app-shell.member-mode .compass-card > .back-button { display:none; }.compass-hero { padding:21px 18px 23px; }.compass-card > :not(.back-button):not(.compass-hero):not(.status-message) { margin-right:16px; margin-left:16px; }.compass-card > .status-message { margin-right:16px; margin-left:16px; }.badge-grid { grid-template-columns:1fr; }.questionnaire-list { margin-right:16px !important; margin-left:16px !important; }.account-section-heading h2 { font-size:1.25rem; }.account-photo-row { grid-template-columns:31px minmax(0,1fr) auto; }.account-photo-row .delete-photo,.photo-row-action { grid-column:2/4; justify-self:start; text-align:left; }.privacy-actions { grid-template-columns:1fr; } }

/* Browse: mobile-first discovery cards, controls, gallery and loading states. */
.browse-header-actions { display:flex; align-items:center; gap:10px; }
.browse-filter-button,.browse-clear-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:0 12px; border:1px solid rgba(99,48,111,.15); border-radius:12px; color:var(--plum); background:rgba(255,255,255,.78); font:800 .72rem/1 inherit; cursor:pointer; }
.browse-filter-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.browse-clear-button { align-self:end; color:#785d7e; background:#f5eff6; }
.profile-tile { animation:tileReveal .38s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(min(var(--tile-order, 0), 8) * 35ms); }
@keyframes tileReveal { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.profile-image-wash { position:absolute; inset:auto 0 0; height:42%; pointer-events:none; background:linear-gradient(transparent,rgba(37,19,46,.18)); }
.online-label { position:absolute; top:11px; left:11px; padding:5px 8px; border:1px solid rgba(255,255,255,.6); border-radius:99px; color:#fff; background:rgba(33,121,85,.78); box-shadow:0 3px 12px rgba(17,75,51,.22); font-size:.6rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(8px); }
.save-profile { display:grid; place-items:center; transition:transform .2s ease,color .2s ease,background .2s ease; }
.save-profile svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.save-profile.is-saved { color:#fff; background:var(--plum); border-color:var(--plum); }
.save-profile:active { transform:scale(.88); }
.profile-place { color:#725c78 !important; font-weight:700; }
.profile-occupation { color:#9a819e !important; }
.profile-skeleton { min-width:0; overflow:hidden; padding-bottom:15px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 12px 28px #5129650d; }
.skeleton-photo,.skeleton-line,.skeleton-chip { display:block; margin:12px 14px 0; border-radius:10px; background:linear-gradient(100deg,#f1ebf2 20%,#fbf8fc 37%,#f1ebf2 54%); background-size:200% 100%; animation:skeletonShimmer 1.35s linear infinite; }
.skeleton-photo { width:100%; height:auto; min-height:205px; margin:0; border-radius:0; }
.skeleton-line { width:56%; height:10px; }.skeleton-line.wide { width:72%; height:14px; margin-top:16px; }.skeleton-chip { width:38%; height:20px; border-radius:99px; }
@keyframes skeletonShimmer { to { background-position:-200% 0; } }
.detail-hero-title { position:absolute; right:20px; bottom:17px; left:20px; z-index:2; color:#fff; text-shadow:0 2px 15px rgba(25,12,31,.45); }
.detail-hero-title h1 { margin:0; color:#fff; font:500 clamp(2rem,9vw,3.6rem)/.95 Georgia,"Times New Roman",serif; letter-spacing:-.055em; }
.detail-hero-title p { margin:8px 0 0; color:#fff; font-size:.86rem; font-weight:700; }
.detail-hero-gradient { position:absolute; inset:35% 0 0; pointer-events:none; background:linear-gradient(transparent,rgba(24,10,31,.75)); }
.detail-heading h2 { margin:0; color:var(--plum-deep); font:500 clamp(1.65rem,4vw,2.5rem)/1 Georgia,"Times New Roman",serif; letter-spacing:-.04em; }
.detail-section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; }
.detail-section-heading .eyebrow { margin:0 0 6px; }.detail-section-heading h2 { margin:0; }
.gallery-photo { display:block; overflow:hidden; padding:0; border:0; border-radius:14px; background:#eadcf0; cursor:zoom-in; }
.gallery-photo img { transition:transform .35s ease; }.gallery-photo:hover img { transform:scale(1.06); }

@media (max-width:760px) {
  .app-shell.member-mode .browse-app-header { align-items:center; }
  .app-shell.member-mode .browse-app-header .eyebrow { display:none; }
  .app-shell.member-mode .browse-app-header h1 { margin:0; font-size:2rem; }
  .app-shell.member-mode .browse-app-header .intro { display:none; }
  .app-shell.member-mode .browse-filter-button { min-height:42px; border-radius:14px; }
  .app-shell.member-mode .browse-toolbar { display:none; margin:0 0 16px; padding:13px; border:1px solid rgba(99,48,111,.12); border-radius:18px; background:rgba(255,255,255,.82); box-shadow:0 12px 28px rgba(81,41,101,.08); }
  .app-shell.member-mode .browse-toolbar.is-open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }
  .app-shell.member-mode .browse-toolbar label { display:grid; flex:auto; padding:0; border:0; border-radius:0; background:transparent; }
  .app-shell.member-mode .browse-toolbar label:first-child { flex:auto; }
  .app-shell.member-mode .browse-toolbar label:first-child,.app-shell.member-mode .browse-toolbar label:nth-child(2) { grid-column:span 1; }
  .app-shell.member-mode .browse-toolbar label:nth-child(7),.app-shell.member-mode .browse-clear-button { grid-column:span 2; }
  .app-shell.member-mode .browse-clear-button { min-height:42px; margin-top:2px; }
  .app-shell.member-mode .profile-grid { gap:12px; }
  .app-shell.member-mode .profile-image { aspect-ratio:4/5.45; }
  .app-shell.member-mode .profile-tile { border:1px solid rgba(99,48,111,.1); background:rgba(255,255,255,.86); box-shadow:0 11px 26px rgba(81,41,101,.08); }
  .app-shell.member-mode .profile-tile-body { min-height:92px; padding:11px 11px 13px; }
  .app-shell.member-mode .profile-tile-heading h2 { font-size:.99rem; line-height:1.12; }
  .app-shell.member-mode .save-profile { width:30px; height:30px; }
  .app-shell.member-mode .profile-tile-body p { margin-top:5px; font-size:.68rem; }
  .app-shell.member-mode .profile-occupation { display:none; }
  .app-shell.member-mode .online-dot { right:9px; bottom:9px; width:10px; height:10px; }
  .app-shell.member-mode .profile-skeleton { border-radius:18px; }.app-shell.member-mode .skeleton-photo { min-height:226px; }
  .app-shell.member-mode > .profile-detail-card { min-height:100dvh; padding-top:0; }
  .app-shell.member-mode .detail-hero { display:block; margin:0 -16px; }
  .app-shell.member-mode .detail-hero-image,.app-shell.member-mode .detail-hero-image img { min-height:62dvh; border-radius:0 0 28px 28px; }
  .app-shell.member-mode .detail-heading { padding:22px 2px 0; }.app-shell.member-mode .detail-heading .eyebrow { margin-top:0; }
  .app-shell.member-mode .detail-copy { margin-top:24px; }
  .app-shell.member-mode .detail-facts { gap:8px; }
  .app-shell.member-mode .detail-facts div { min-height:75px; padding:11px; }
  .app-shell.member-mode .gallery-grid { gap:8px; }
  .app-shell.member-mode .gallery-photo { border-radius:12px; }
}