/* Perle: quieter surfaces, deliberate hierarchy, existing brand palette. */
:root { --font-body:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --shadow-card:0 6px 24px rgb(74 60 46 / .045); }
body { background:#f7f5ef; font-size:15px; -webkit-font-smoothing:antialiased; }
body>header { padding:14px max(24px,calc((100vw - 1440px)/2)); background:#f2ede3; gap:14px; }
body>header img { width:66px; height:66px; }
.brand-copy { flex:1; min-width:0; }
header .brand-copy h1 { font-family:var(--font-body); font-size:21px; letter-spacing:-.8px; font-weight:750; text-align:left; }
.brand-caption { display:block; font-size:9px; letter-spacing:1.9px; color:var(--color-text-secondary); margin-top:5px; }
#logoutButton { font-size:12px; border:1px solid #d6d7cd; border-radius:100px; padding:8px 18px; color:var(--color-text-secondary); }
#mainContainer { width:100%; max-width:1440px; margin:auto; min-height:calc(100dvh - 180px); background:transparent; }
main { min-width:0; padding:38px 44px 70px; }
main>section { max-width:1040px; }
h2,h3 { line-height:1.2; font-weight:700; }
h2 { font-size:clamp(25px,3vw,38px); letter-spacing:-1.2px; }
h3 { font-size:19px; letter-spacing:-.4px; }
p { line-height:1.7; }
button { cursor:pointer; }
nav button:hover,nav button.active { padding-right:inherit; margin-right:0; }
#primary-navigation { background:#f2ede3; border-bottom:1px solid #e0e2d7; box-shadow:none; padding:10px 24px 16px; gap:8px; }
#primary-navigation button { display:flex; align-items:center; justify-content:center; gap:10px; max-width:176px; flex:1; padding:12px 20px; font-size:13px; border-radius:100px; color:var(--color-text-secondary); }
#primary-navigation button.active { background:#176c60; color:white; box-shadow:0 4px 12px #176c6019; }
.nav-icon { width:21px; height:21px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#navLoggedIn { width:198px; padding:36px 18px; border-right:1px solid #e4e6dc; gap:4px; }
#navLoggedIn::before { content:"MEHR ENTDECKEN"; font-size:9px; letter-spacing:1.8px; font-weight:700; color:#7a847c; padding:0 12px 15px; }
#navLoggedIn button { padding:11px 12px; font-size:12px; font-weight:500; }
#navLoggedIn button.active,#navLoggedIn button:hover { background:#e1f2eb; color:#176c60; padding:11px 12px; }
#navLoggedIn a { padding:12px; font-size:12px; color:#176c60; }
#navLoggedOut { width:100%; flex-direction:row!important; justify-content:center; gap:14px; background:transparent; border:0; box-shadow:none; padding:16px; margin:0; }
#navLoggedOut button { font-size:11px; font-weight:500; color:#61736a; }
body:not(.is-signed-in) main { width:100%; padding:52px 36px; }
#auth-section { max-width:1100px; position:relative; }
#auth-section:not([style*="none"]) { display:grid!important; grid-template-columns:1.1fr 1fr; gap:76px; align-items:center; }
.welcome-story { padding:25px 0; }
.welcome-story .eyebrow { display:inline-block; margin-bottom:20px; letter-spacing:2px; font-size:10px; }
.welcome-story h2 { font-size:clamp(38px,4.7vw,62px); line-height:1.08; letter-spacing:-2.7px; margin:0 0 24px; max-width:510px; }
.welcome-story>p { max-width:430px; color:var(--color-text-secondary); font-size:16px; }
.welcome-modes { margin:32px 0; display:grid; gap:22px; }
.welcome-modes>div { display:flex; align-items:center; gap:16px; }
.welcome-modes .nav-icon { box-sizing:content-box; padding:13px; border:1px solid #d3ded3; border-radius:16px; color:#176c60; background:#edf1e8; }
.welcome-modes strong,.welcome-modes span { display:block; }
.welcome-modes strong { font-size:14px; margin-bottom:3px; }
.welcome-modes span { font-size:12px; color:var(--color-text-secondary); }
.welcome-story .welcome-note { font-size:11px; }
.auth-panel { background:white; padding:36px; border:1px solid #e3e6dc; box-shadow:0 18px 60px #4a3c2e08; border-radius:26px; }
.auth-panel h2 { font-size:27px; margin:0 0 8px; letter-spacing:-1px; }
.muted-copy,.section-subtitle { color:var(--color-text-secondary); margin:0 0 24px; }
.auth-switch { display:flex; background:#f3f5ef; padding:4px; border-radius:12px; margin:26px 0; }
.auth-switch button { flex:1; border:0; border-radius:9px; font-size:12px; color:#65746d; background:transparent; padding:10px; }
.auth-switch button[aria-pressed=true] { background:white; box-shadow:0 2px 8px #22382c12; color:#176c60; font-weight:650; }
#auth-section form { border:0; box-shadow:none; padding:0; margin:0; border-radius:0; background:transparent; }
#auth-section form[hidden] { display:none; }
label { font-size:12px; font-weight:600; }
input:not([type=checkbox]),select,textarea { padding:13px 14px; border:1px solid #dbe1d8; border-radius:11px; font-size:15px; box-shadow:none; margin-top:7px; margin-bottom:17px; }
input::placeholder,textarea::placeholder { color:#89938c; }
.password-row { position:relative; display:block; }
.password-row input { padding-right:88px; width:100%; }
.password-toggle { position:absolute; right:7px; top:9px; min-height:38px; border:0; background:transparent; color:#61736a; font-size:11px; }
#auth-section button[type=submit] { width:100%; padding:14px; border-radius:12px; font-size:14px; margin-top:6px; }
.recovery { border-top:1px solid #ebeee6; margin-top:24px; padding-top:18px; font-size:12px; color:#62736a; }
.recovery summary { cursor:pointer; }
.recovery h3 { font-size:17px; }
.message:empty { display:none; }
.social-hero { padding:30px 34px; border-radius:22px; border:1px solid #dce5d9; background:linear-gradient(110deg,#e5eee2,#f2ede3); margin-bottom:28px; }
.social-hero h2 { max-width:650px; margin:8px 0 12px; font-size:clamp(26px,3vw,38px); }
.social-hero p { margin:0; max-width:610px; font-size:14px; color:#61736a; }
.social-hero button { margin-top:18px; }
.social-hero.mystery { background:radial-gradient(ellipse at 100% 0,#36796a55,transparent 65%),#183e35; border:0; color:#fff; position:relative; overflow:hidden; }
.social-hero.mystery p { color:#cadbd0; }
.social-hero.mystery .eyebrow { color:#b6d7c6; }
.social-card { padding:24px; border:1px solid #e0e6dc; border-radius:18px; box-shadow:var(--shadow-card); }
.social-card p { font-size:13px; }
.social-page button,.social-card button,#profile-social button,#date-planner button { border-color:#d5dfd3; border-radius:11px; padding:11px 15px; font-size:12px; font-weight:600; }
.social-actions { gap:10px; }
#blind-controls,#now-controls { margin:20px 0; display:flex; flex-wrap:wrap; gap:10px; }
#blind-controls button:first-child,#now-controls button:first-child { background:#176c60; color:white; border-color:#176c60; }
#blind-offers .social-card { display:flex; flex-direction:column; align-items:flex-start; }

.mystery-silhouette { background:radial-gradient(circle at 35% 30%,#fff,#d8e8dc); border:1px solid #d9e5d8; color:#176c60; font-family:Georgia,serif; font-style:italic; width:88px; height:88px; margin:12px 0; }
.progress-steps { counter-reset:step; gap:12px; margin:24px 0; }
.progress-steps li { display:flex; align-items:center; gap:8px; background:transparent; padding:0; font-size:11px; }
.progress-steps li::before { counter-increment:step; content:counter(step); display:grid; place-items:center; width:28px; height:28px; border:1px solid #d5ddd1; border-radius:50%; }
.progress-steps li.done { background:none; }
.progress-steps li.done::before { background:#176c60; border-color:#176c60; color:white; }
#encounter-content>.social-card { margin:18px 0; }
#encounter-content .answer-grid button { min-height:54px; }
.section-heading { text-align:left; margin-bottom:26px; }
.section-heading h2 { margin:10px 0; }
.section-heading p { color:#61736a; font-size:13px; margin:0; }
#matching-profile-container { display:grid; grid-template-columns:1fr 1fr; padding:0; gap:14px; max-width:470px; }
#matchingProfileImage { grid-column:1/-1; grid-row:1; width:100%; height:510px; max-height:60dvh; border-radius:25px; }
#matching-name { grid-row:1; grid-column:1/-1; align-self:end; z-index:1; padding:50px 24px 22px; margin:0; color:white; text-align:left; font-size:29px; background:linear-gradient(transparent,#10251ae0); border-radius:0 0 25px 25px; pointer-events:none; }
#matching-buttons-container { grid-column:1/-1; margin:4px 0; gap:18px; display:flex; flex-direction:row-reverse; }
#matching-buttons-container button { width:62px; height:62px; border-radius:50%; margin:0; font-size:29px; }
#matching-buttons-container #likeBtnMatch { background:#176c60; color:white; border-color:#176c60; box-shadow:0 6px 16px #176c6030; }
#view-profile-btn { grid-column:1/-1; background:none; color:#176c60; border:0; margin:0; padding:0; min-height:32px; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
#matchFeedback { grid-column:1/-1; }
#profile-detail { padding:30px; border-color:#e1e5da; }
#profileDetailTitle { font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:#65746a; margin:0 0 24px; }
.profile-layout { display:grid; grid-template-columns:minmax(200px,.85fr) 1.15fr; gap:32px; margin-bottom:28px; }
#profileImage { width:100%; height:360px; object-fit:cover; border-radius:18px; margin:0; }
.profile-carousel{position:relative;overflow:hidden;border-radius:18px;touch-action:pan-y;cursor:grab;user-select:none}
.profile-carousel:active{cursor:grabbing}.profile-carousel-track{display:flex;width:300%;transform:translateX(-33.333333%)}
.profile-carousel-track>img{box-sizing:border-box;flex:0 0 33.333333%;width:33.333333%!important;height:360px;object-fit:cover;pointer-events:auto;user-select:none}
.profile-carousel:not(.has-multiple) .profile-carousel-track>img:not(#profileImage){visibility:hidden}
.profile-carousel-prev,.profile-carousel-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:#182b2699;color:white;font-size:28px;cursor:pointer}
.profile-carousel-prev{left:8px}.profile-carousel-next{right:8px}.profile-carousel-counter{position:absolute;right:12px;bottom:12px;padding:4px 10px;border-radius:16px;background:#182b26b8;color:white;font-size:12px}
.profile-carousel [hidden]{display:none!important}
.profile-copy p { display:flex; flex-direction:column; margin:0 0 17px; }
.profile-copy p strong { text-transform:uppercase; font-size:9px; letter-spacing:1.4px; color:#738078; margin-bottom:4px; }
.profile-copy p:has(#profileName) span { font-size:30px; font-weight:700; letter-spacing:-1px; }
.profile-copy p:has(#profileUsername) { font-size:12px; }
.profile-copy p[hidden] { display:none; }
#profile-relationship:not([hidden]){display:block;padding:10px 14px;border-radius:12px;background:#fceaf0;color:#8c2850;font-weight:700;font-size:14px}
#profile-social { max-width:none; padding-top:22px; border-top:1px solid #e6eadf; }
#profileGallery { gap:12px; }
#delete-account-details { margin-top:30px; font-size:11px; color:#798177; }
#profileList,#myMatchesList { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:22px; }
.profile,.match-profile { padding:9px 9px 18px; background:#fff; border:1px solid #e1e5da; text-align:left; }
.profile img,.match-profile img { height:245px; border-radius:13px; }
.profile strong,.match-profile strong { display:block; padding:8px 8px 0; font-size:14px; }
.pagination { align-items:center; justify-content:center; gap:18px; padding:20px 0; font-size:11px; }
.pagination button { border:1px solid #d5dfd3; background:white; border-radius:9px; padding:9px 14px; font-size:12px; }
#edit-profile,#preferences-section { max-width:760px; background:white; border:1px solid #e1e5da; padding:30px; border-radius:22px; }
#chat-header { background:transparent; border-bottom:1px solid #dce3d5; padding:16px 0; font-size:14px; }
#chat-matches-list { gap:10px; padding:15px 0; }
#chat-messages { background:#fff; border-radius:20px; border-color:#e0e6db; padding:24px; }
.chat-message-bubble { border-radius:16px; font-size:14px; }
#chat-input-container { gap:10px; background:#f7f5ef; }
#chat-input { margin:0; border-radius:100px; padding:14px 20px; }
#chat-send-btn { border-radius:100px; font-size:12px; padding:12px 24px; background:#176c60; }
.empty-state,#matching-empty { border:1px dashed #d3dece; border-radius:20px; background:#edf1e8; padding:50px 24px; font-size:15px; }
@media(min-width:701px) { #navLoggedIn { align-self:flex-start; position:sticky; top:16px; } }
@media(max-width:1000px) {
 main { padding:28px 24px 70px; }
 #auth-section:not([style*="none"]) { gap:32px; }
 .auth-panel { padding:26px; }
 .welcome-story h2 { font-size:43px; }
}
@media(max-width:700px) {
 body>header { padding:12px 18px; gap:10px; }
 body>header img { width:48px; height:48px; }
 header .brand-copy h1 { font-size:16px; letter-spacing:-.5px; }
 .brand-caption { font-size:7px; letter-spacing:1px; margin-top:4px; }
 #logoutButton { font-size:10px; padding:6px 10px; min-height:36px; }
 main { padding:22px 16px calc(105px + env(safe-area-inset-bottom)); }
 #primary-navigation { padding:8px 10px calc(8px + env(safe-area-inset-bottom)); gap:3px; background:#fbfaf5f5; backdrop-filter:blur(16px); border-top:1px solid #dce3d5; }
 #primary-navigation button { flex-direction:column; gap:5px; font-size:10px; min-height:57px; padding:7px 2px; border-radius:14px; color:#627168; }
 #primary-navigation button.active { box-shadow:none; background:#e1f2eb; color:#176c60; }
 #navLoggedIn { padding:12px 16px; width:100%; border:0; gap:7px; margin:0; }
 #navLoggedIn::before { display:none; }
 #navLoggedIn button,#navLoggedIn button.active,#navLoggedIn button:hover { background:#edf0e8; padding:8px 13px; font-size:11px; min-height:36px; border-radius:100px; }
 body:not(.is-signed-in) main { padding:20px 18px 40px; }
 #auth-section:not([style*="none"]) { grid-template-columns:1fr; gap:18px; }
 .welcome-story { padding:12px 4px 0; }
 .welcome-story h2 { font-size:37px; letter-spacing:-1.6px; margin:0 0 14px; max-width:360px; }
 .welcome-story .eyebrow { font-size:8px; margin-bottom:14px; }
 .welcome-story>p { font-size:13px; margin-bottom:8px; }
 .welcome-modes { display:none; }
 .welcome-story .welcome-note { display:none; }
 .auth-panel { padding:24px 22px; border-radius:22px; }
 .auth-panel h2 { font-size:23px; }
 .auth-panel .muted-copy { font-size:12px; }
 .auth-switch { margin:20px 0; }
 .social-hero { padding:25px 23px; margin-bottom:22px; border-radius:20px; }
 .social-hero h2 { font-size:29px; letter-spacing:-1.1px; }
 .social-hero p { font-size:13px; }
 .social-card { padding:21px; }
 .section-heading h2 { font-size:27px; }
 #matchingProfileImage { height:440px; max-height:53dvh; }
 #matching-name { font-size:26px; }
 #profile-detail { padding:22px; }
 .profile-layout { grid-template-columns:1fr; gap:22px; }
 #profileImage { height:390px; }
 .profile-copy { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
 .profile-copy p:has(#profileName),.profile-copy p:has(#profileDescription) { grid-column:1/-1; }
 .profile-copy p:has(#profileName) { grid-row:1; }
 #profileList,#myMatchesList { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .profile img,.match-profile img { height:200px; }
 #edit-profile,#preferences-section { padding:22px; }
 #chat-messages { padding:16px; }
 #chat-input-container { bottom:calc(83px + env(safe-area-inset-bottom)); }
 .progress-steps { gap:9px; }
 .progress-steps li { font-size:9px; gap:4px; }
 .progress-steps li::before { width:22px; height:22px; }
}

@media(max-width:700px) { input:not([type=checkbox]),select,textarea { font-size:16px; } }

#navLoggedOut button.active { background:#e1f2eb; color:#176c60; }
@media(hover:none) { #primary-navigation button:not(.active):hover { background:transparent; color:#627168; } }