/* Observed Ditto motifs: scene-led hero, centered signup, four steps, photo collage.
   Same interactions at all widths. User-requested black palette retained. */
.preview-bar{background:#28202a;color:#f1d9e7;font-size:11px;min-height:32px;gap:15px}.preview-bar a{color:#ded2f1;text-decoration:underline;text-underline-offset:3px}.preview-bar button{font-size:11px}.login-link{color:#eee}.header-actions{gap:20px}.header-actions>.btn{min-width:90px}body[data-page="home"] .header{margin-bottom:-88px;background:transparent;border-bottom:1px solid #ffffff0b}body[data-page="home"] .header .brand{color:#fff}body[data-page="home"] .nav{color:#ddd}
.reference-hero{position:relative;min-height:780px;display:flex;align-items:center;justify-content:center;isolation:isolate;padding:145px 24px 80px;overflow:hidden}.hero-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;z-index:-3;filter:saturate(.72)}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#080808c9 0%,#08080885 42%,#08080865 65%,#080808 100%),linear-gradient(90deg,#08080845,transparent)}.hero-content{text-align:center;max-width:850px;width:100%;position:relative}.reference-hero h1{font:500 clamp(40px,5.5vw,74px)/1.24 'Noto Serif SC','Songti SC',SimSun,Georgia,serif;letter-spacing:-2.5px;margin:26px auto;color:#fff;text-shadow:0 3px 30px #0005}.reference-hero h1 em{font-style:normal;color:#f3c8df}.hero-content>p{font-size:15px;line-height:1.9;color:#eee;text-shadow:0 1px 10px #0008}.reference-signup{background:#ffffff14;border:1px solid #ffffff40;padding:14px;backdrop-filter:blur(20px);border-radius:26px;max-width:370px;margin:33px auto 15px;box-shadow:0 15px 40px #0002}.reference-signup input{display:block;width:100%;background:#0b0b0b40;border:1px solid #ffffff14;color:white;font:14px var(--sans);text-align:center;min-height:54px;border-radius:14px;margin-bottom:10px;padding:14px;outline:none}.reference-signup input::placeholder{color:#e3e0e3}.reference-signup input:focus{border-color:#efc0dc;background:#08080870}.reference-signup .btn{font-size:14px;min-height:51px}.hero-content>p.signup-note{font-size:10px;color:#d1cbd0}.hero-photo-note{position:absolute;right:24px;bottom:28px;color:#b2adb0;font-size:9px;letter-spacing:.3px}.reference-heading{text-align:center;margin:0 auto 55px;max-width:720px}.reference-heading>span{display:inline-block;font:24px/1.4 Georgia,serif;letter-spacing:-.6px;padding:3px 12px;background:#030303;border:1px solid #ffffff12;transform:rotate(-2deg)}.reference-heading>span em{color:var(--accent);font-style:normal}.reference-heading h2{font-size:36px;line-height:1.5;font-weight:500;margin-top:23px;letter-spacing:-1px}.reference-steps{display:grid;grid-template-columns:1fr 1fr;gap:45px 85px;max-width:870px;margin:0 auto 65px}.reference-step{text-align:center;padding:16px 15px}.reference-step:nth-child(even){transform:translateY(70px)}.step-title{display:flex;align-items:center;justify-content:center;gap:10px}.step-title>span{color:var(--accent);font:13px Georgia,serif;border:1px solid #f2b8d454;border-radius:50%;height:29px;width:29px;display:grid;place-items:center}.step-title h3{font-size:21px;font-weight:500;letter-spacing:-.5px}.reference-step>p{font-size:13px;color:#aaa;margin:12px 0 20px}.step-visual{min-height:165px;display:flex;justify-content:center;align-items:center}.sample-chat{text-align:left;width:260px;transform:rotate(-5deg)}.sample-chat>div{font-size:12px;padding:12px 17px;border-radius:17px 17px 17px 3px;background:#252525;border:1px solid #ffffff14;width:max-content;max-width:100%}.sample-chat>div+div{background:#f0b7d2;color:#33232b;margin:15px 0 0 15px;border-radius:17px 17px 3px 17px}.sample-chat .icon{width:15px;height:15px;margin-left:9px}.sample-intro{display:flex;align-items:center;gap:14px;width:255px;padding:25px 22px;background:#e7d0de;color:#3a2733;border-radius:10px;transform:rotate(6deg);box-shadow:9px 10px 0 #42253540}.sample-intro>.icon{width:47px;height:47px;padding:10px;border:1px solid #8f73804a;border-radius:50%;background:#ad8fa124}.sample-intro strong{font-size:13px;display:block}.sample-intro i{display:block;height:4px;width:85px;background:#8f738033;margin-top:8px}.sample-intro i:last-child{width:60px}.sample-intro>span{font-size:28px;margin-left:auto}.step-photo{width:250px;height:160px;border:7px solid #f3ecee;object-position:center 52%;border-radius:4px;transform:rotate(-5deg);box-shadow:5px 5px 0 #ffffff0b}.reference-how{border-top:0;padding-top:65px}.real-moments{background:radial-gradient(ellipse at center,#39273730,transparent 65%);overflow:hidden}.moments-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:21px;align-items:center;padding:20px 0 40px}.moments-gallery figure{margin:0;padding:8px 8px 14px;background:#e8e4de;color:#251f23;transform:rotate(-5deg);box-shadow:0 12px 25px #0005}.moments-gallery figure:nth-child(2){transform:rotate(4deg) translateY(23px)}.moments-gallery figure:nth-child(3){transform:rotate(-3deg) translateY(-12px)}.moments-gallery figure:nth-child(4){transform:rotate(6deg) translateY(13px)}.moments-gallery img{width:100%;height:290px;object-fit:cover;object-position:center 48%;filter:saturate(.85)}.moments-gallery figure:last-child img{object-position:80% center}.moments-gallery figcaption{font:14px/1.5 Georgia,'KaiTi',serif;text-align:center;padding-top:13px}.photo-disclosure{text-align:center;color:#949094;font-size:10px;margin-top:30px}.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}.trust-grid>div{padding:25px 10px}.trust-grid .icon{color:var(--accent);height:30px;width:30px;margin-bottom:18px}.trust-grid h3{font-size:16px;font-weight:500}.connection-state{min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:19px}.connection-state h1{font-size:27px;font-weight:500}.connection-state p{color:#aaa;font-size:14px;max-width:380px}.connection-state>.icon{color:var(--accent);height:38px;width:38px}.loading-ring{height:30px;width:30px;border:2px solid #ffffff26;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.photo-unavailable{min-height:280px;display:grid;place-items:center;color:#a39d9f;background:#181518;font-size:13px}.introduction-reasons{margin-top:24px}.btn[aria-busy="true"]{cursor:wait;opacity:.6}.input:disabled{opacity:.65}.photo-previews:empty{display:none}.preference-photo{box-shadow:0 10px 40px #0004}.reaction-row button{transition:background .15s,border-color .15s,transform .15s}.reaction-row button:active{transform:scale(.96)}
@media(max-width:1050px){.reference-steps{gap:40px 45px}.moments-gallery{gap:16px}.moments-gallery img{height:250px}.reference-hero{min-height:750px}.header-actions{gap:13px}}
@media(max-width:760px){.preview-bar{font-size:8px;gap:10px;padding:5px 8px}.preview-bar button{font-size:9px}.header-actions>.login-link{display:inline-flex;font-size:11px;min-height:44px}.header-actions{gap:10px}.header-actions>.btn{min-width:0;padding:9px 15px}.header .brand{font-size:25px}.header .brand-dot{font-size:23px}.locale{max-width:60px}.reference-hero{padding:127px 22px 64px;min-height:720px}.hero-backdrop{object-position:95% center}.hero-shade{background:linear-gradient(180deg,#080808e3,#08080896 48%,#08080860 72%,#080808 100%)}.reference-hero h1{font-size:40px;letter-spacing:-1.8px;line-height:1.34;margin:25px auto 20px}.hero-content>p{font-size:12px}.hero-kicker{font-size:8px;letter-spacing:2px}.reference-signup{margin-top:29px;max-width:310px;padding:12px;border-radius:23px}.reference-signup input{font-size:16px;min-height:52px}.hero-content>p.signup-note{font-size:9px}.hero-photo-note{font-size:8px;bottom:20px;right:20px}.reference-heading{margin-bottom:35px}.reference-heading>span{font-size:20px}.reference-heading h2{font-size:27px;margin-top:18px}.reference-steps{grid-template-columns:1fr;gap:32px;margin-bottom:0}.reference-step{padding:10px 5px}.reference-step:nth-child(even){transform:none}.reference-step>p{font-size:12px;max-width:300px;margin:12px auto 20px}.step-title h3{font-size:22px}.step-visual{min-height:160px}.reference-how{padding-top:45px}.moments-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px;padding:15px 6px 35px}.moments-gallery img{height:215px}.moments-gallery figcaption{font-size:12px}.moments-gallery figure:nth-child(3){transform:rotate(-4deg) translateY(5px)}.moments-gallery figure:nth-child(4){transform:rotate(5deg) translateY(22px)}.photo-disclosure{font-size:9px;line-height:1.8}.trust-grid{grid-template-columns:1fr;gap:0}.trust-grid>div{padding:23px 0;border-bottom:1px solid var(--line)}.trust-grid h3{font-size:15px}.trust-grid .icon{margin-bottom:13px}.connection-state{min-height:390px}.input,select.input,textarea.input{font-size:16px}.reaction-row button{min-height:52px}.choice{min-height:44px}.form-heading{font-size:28px}.step-progress{margin-bottom:30px}.photo-unavailable{min-height:320px}}
@media(max-width:380px){.header-actions{gap:7px}.header .brand{font-size:23px}.locale{max-width:52px;font-size:9px}.header-actions>.btn{padding:9px 11px}.header-actions>.login-link{font-size:10px}.reference-hero h1{font-size:35px}.moments-gallery{gap:27px 15px}.moments-gallery img{height:185px}}
@media(prefers-reduced-motion:reduce){.loading-ring{animation:none}}

/* User-approved company artwork, preserved unchanged. The viewport removes canvas padding only. */
.brand{flex-shrink:0;letter-spacing:normal}
.brand-logo{display:block;position:relative;width:208px;aspect-ratio:1250 / 330;overflow:hidden}
.brand-logo img{position:absolute;max-width:none;width:141.92%;height:auto;left:-22.4%;top:-83.3333%;object-fit:contain}
.footer .brand-logo{width:192px}
@media(max-width:760px){.header .brand-logo{width:140px}.footer .brand-logo{width:168px}}
@media(max-width:380px){.header .brand-logo{width:126px}}

/* Each editorial scene is unique; keep the existing photo-print presentation. */
.moments-gallery{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:56px}
.moments-gallery img{height:310px}
.moments-gallery figure:last-child img{object-position:center 48%}
.moments-gallery figure:nth-child(5){transform:rotate(-4deg) translateY(22px)}
.moments-gallery figure:nth-child(6){transform:rotate(3deg) translateY(-5px)}
.moments-gallery figure:nth-child(4) img{object-position:center 42%}
.moments-gallery figure:nth-child(5) img{object-position:center 44%}
@media(max-width:1050px){.moments-gallery img{height:270px}}
@media(max-width:760px){.moments-gallery{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}.moments-gallery img{height:215px}.moments-gallery figure:nth-child(5){transform:rotate(-3deg) translateY(4px)}.moments-gallery figure:nth-child(6){transform:rotate(4deg) translateY(20px)}}
@media(max-width:380px){.moments-gallery img{height:185px}}

.step-photo{object-position:center 84%}
.moments-gallery figure:nth-child(6) img{object-position:74% center}
.preference-photo img[src$="date-bookstore.jpg"]{object-position:center 62%}
.preference-photo img[src$="date-cafe.jpg"]{object-position:43% center}
.preference-photo img[src$="date-trail.jpg"]{object-position:center 65%}

/* Mobile-first signup: one question, glass bubbles and explicit selection feedback.
   Reference: local Ditto video frames 09 / 21 / 30. Backend steps stay unchanged. */
.hero-backdrop{object-position:center 42%;filter:saturate(.88)}
.hero-shade{background:linear-gradient(90deg,#080808b5,#08080845 58%,#08080820),linear-gradient(0deg,#080808,transparent 55%,#08080865)}
.hero-content{max-width:1160px;text-align:left}
.reference-hero h1{font-size:clamp(40px,4.5vw,66px);max-width:630px;margin-left:0}
.reference-signup{margin-left:0;background:#ffffff19}
.hero-content>p{max-width:520px}
body[data-page="register"],body[data-page="schedule"]{background:#132b3c;isolation:isolate}
body[data-page="register"]::before,body[data-page="schedule"]::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 18% 15%,#5577958c,transparent 55%),radial-gradient(ellipse at 85% 85%,#66847d44,transparent 55%),linear-gradient(160deg,#142b3c,#1d3b53 55%,#11242e)}
body[data-page="register"] .header,body[data-page="schedule"] .header{background:transparent}
body[data-page="register"] .nav,body[data-page="register"] .header-actions>.btn,body[data-page="register"] .login-link{display:none}
body[data-page="register"] .header-actions{margin-left:auto}
body[data-page="register"] .footer{display:none}
body[data-page="register"] .app-shell{padding:16px 0 48px;min-height:calc(100svh - 88px)}
.onboarding{max-width:480px;padding:24px 26px 26px;border:1px solid #d8eaff30;border-radius:32px;background:linear-gradient(145deg,#a9c7e31a,#09243755);box-shadow:0 24px 80px #0002}
.onboarding .step-top{color:#d0dce6;font-size:11px}
.onboarding .step-top .text-btn{min-height:44px;padding:0 4px;color:#d0dce6}
.onboarding .step-progress{margin:10px 0 26px;background:#ecf3ff20;height:3px}
.onboarding .step-progress i{background:#fa3eab}
.onboarding .form-card{display:flex;flex-direction:column;min-height:560px}
.question-brand{color:#d3dce5;font-size:12px;margin:0 0 8px 14px}
.onboarding .question-bubble{align-self:flex-start;padding:15px 21px;border-radius:28px 28px 28px 7px;border:1px solid #e1efff38;background:linear-gradient(160deg,#d2e7ff29,#e1efff0e);box-shadow:inset 0 1px 2px #fff2;margin:0;letter-spacing:0;font:500 21px/1.6 var(--sans);text-wrap:pretty}
.question-note{display:flex;gap:7px;align-items:center;justify-content:flex-end;color:#b7cbd9;font-size:11px;margin:17px 0 34px}
.question-note .icon{height:14px;width:14px}
.onboarding #form-content{margin-top:32px;min-width:0}
.onboarding .question-note+#form-content{margin-top:auto;padding-top:24px}
.onboarding .field-label{color:#d7e4ee;font-size:13px}
.onboarding .input{background:#0b1d2bbf;border-color:#c9e3f42b;border-radius:16px;min-height:56px;font-size:16px;color:#fff}
.onboarding .input:focus{border-color:#ed67b4;box-shadow:0 0 0 3px #f33ea522}
.onboarding .choice-grid{gap:12px;justify-content:flex-end}
.onboarding .choice{padding:14px 20px;min-height:54px;gap:14px;border:1px solid transparent;background:#091923c9;color:#d2dce4;font-size:15px;transition:background .18s,color .18s,transform .18s}
.onboarding .choice::after{content:'+';display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:18px/1 var(--sans);color:#aebfce;flex-shrink:0}
.onboarding .choice.selected{background:#faf9fc;color:#e90091;border-color:#fff;box-shadow:0 3px 18px #0b162230;font-weight:600}
.onboarding .choice.selected::after{content:'✓';font-size:12px;background:#ed0096;color:white}
.onboarding .choice:active{transform:scale(.97)}
.onboarding [data-question="gender"] .choice-grid,.onboarding [data-question="seeking_gender"] .choice-grid,.onboarding [data-question="4"] .choice-grid{flex-direction:column;align-items:flex-end}
.onboarding [data-question="gender"] .choice,.onboarding [data-question="seeking_gender"] .choice,.onboarding [data-question="4"] .choice{width:92%;justify-content:space-between;text-align:left}
.selection-hint{font-size:12px;color:#cad8e3;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}
.selection-hint span{color:#ffd2ee}
.onboarding .hint,.onboarding .checkbox-label,.onboarding .form-description{color:#c2d0dc}
.onboarding .form-actions{border:0;padding-top:28px;margin-top:auto;gap:16px}
.onboarding .form-actions .btn{min-height:54px;background:#faf9fc;color:#e90091;min-width:144px;font-size:15px}
.onboarding .form-actions .btn.secondary{min-width:44px;background:transparent;color:#d6e1e9;border:1px solid #d6e1e944;margin-left:0}
.onboarding .form-actions .btn:hover{transform:none;background:#ffe7f6}
.onboarding .form-actions .btn.secondary:hover{background:#ffffff12}
.age-picker{padding:16px 0 12px}
.age-values{display:flex;position:relative;justify-content:space-between;gap:48px;margin-bottom:28px}
.age-values label{width:calc(50% - 24px);font-size:12px;color:#c2d0dc;text-align:center}
.onboarding .age-values .input{display:block;text-align:center;font-size:27px;font-weight:650;background:#faf9fc;color:#e90091;border-radius:17px;margin-top:10px;padding:12px 4px}
.age-values>span{position:absolute;left:50%;top:49px;transform:translateX(-50%);color:#b4c8d7}
.dual-range{position:relative;height:58px;background:#091923b8;border-radius:30px;padding:0 14px;--low:10%;--high:30%}
.range-track{position:absolute;left:24px;right:24px;top:24px;height:10px;border-radius:10px;background:linear-gradient(to right,#678093 0 var(--low),#ed1599 var(--low) var(--high),#678093 var(--high) 100%)}
.dual-range input{position:absolute;top:0;left:10px;width:calc(100% - 20px);height:58px;margin:0;background:transparent;appearance:none;-webkit-appearance:none;pointer-events:none;outline-offset:2px}
.dual-range input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;pointer-events:auto;width:32px;height:40px;border-radius:16px;border:2px solid #ffffffb3;background:#eae4ef;box-shadow:0 2px 8px #0005;cursor:ew-resize}
.dual-range input::-moz-range-thumb{pointer-events:auto;width:28px;height:36px;border-radius:16px;border:2px solid #ffffffb3;background:#eae4ef;cursor:ew-resize}
.dual-range input:focus-visible::-webkit-slider-thumb{outline:3px solid #ff38ae;outline-offset:3px}
.age-picker>.hint{text-align:center;margin-top:16px}
body[data-page="schedule"] .center-page{max-width:850px}
body[data-page="schedule"] .panel{background:#071b2a70;border-color:#d4e6f333;border-radius:25px}
body[data-page="schedule"] .page-heading h1{font-family:var(--sans);font-size:30px}
body[data-page="schedule"] .schedule-scroll{border:1px solid #d2e7fa55;border-radius:16px;overscroll-behavior-x:contain;scrollbar-color:#be72a9 #112838;scrollbar-width:thin}
body[data-page="schedule"] .calendar-grid{gap:1px;background:#d2e7fa30}
body[data-page="schedule"] .calendar-grid>div,body[data-page="schedule"] .calendar-grid>button{background:#142e40;color:#d5e1eb;min-height:44px;border-radius:0}
body[data-page="schedule"] .calendar-grid .time{position:sticky;left:0;z-index:2;background:#0c2333;font-size:11px}
body[data-page="schedule"] .calendar-grid>button.selected{background:#79436c;color:#ffcfec;box-shadow:inset 3px 0 #ff22ac}
body[data-page="schedule"] .calendar-grid>button:hover{background:#445567}
body[data-page="schedule"] .calendar-grid>button.selected:hover{background:#92517f}
body[data-page="schedule"] .form-actions .btn{background:#faf9fc;color:#e90091;font-size:14px;min-height:54px}
body[data-page="schedule"] .hint,body[data-page="schedule"] .page-heading p{color:#c4d6e2}
@media(max-width:760px){
 .reference-hero{min-height:760px;min-height:100svh;align-items:flex-end;padding:300px 22px 55px}
 .hero-backdrop{object-position:62% top;height:66%;object-fit:cover;mask-image:linear-gradient(#000 65%,transparent);-webkit-mask-image:linear-gradient(#000 65%,transparent)}
 .hero-shade{background:linear-gradient(0deg,#080808 0%,#080808 25%,#080808b8 48%,#08080808 74%,#08080855)}
 .hero-content{text-align:center}.hero-content>p{margin-left:auto;margin-right:auto}
 .reference-hero h1{font-size:clamp(32px,8.7vw,43px);margin:16px auto;letter-spacing:-1px}
 .reference-signup{margin:23px auto 13px;width:100%;max-width:370px}
 .hero-content>p{font-size:14px}.hero-photo-note{bottom:17px;right:0;width:100%;text-align:center}
 body[data-page="register"] .header{height:66px}
 body[data-page="register"] .app-shell{width:100%;padding:0;min-height:calc(100svh - 66px)}
 .onboarding{width:100%;max-width:480px;border:0;border-radius:0;box-shadow:none;background:transparent;padding:0 22px max(24px,env(safe-area-inset-bottom))}
 .onboarding .step-progress{margin:6px 0 20px}.onboarding .form-card{padding:0;min-height:calc(100svh - 164px)}
 body[data-mode="preview"] .onboarding .form-card{min-height:calc(100svh - 196px)}
 .onboarding .question-bubble{font-size:20px;padding:14px 19px;line-height:1.55}
 .onboarding .choice{font-size:15px;min-height:52px;padding:13px 17px}
 .onboarding .form-actions{padding-bottom:4px}
 .onboarding .form-actions .btn{min-width:120px;white-space:nowrap;padding:12px 16px;gap:8px}
 .onboarding .form-actions .btn.secondary{min-width:90px;flex-shrink:0}
 .onboarding .question-note{margin-bottom:20px}
 body[data-page="schedule"] .center-page{width:calc(100% - 28px);padding-top:16px}
 body[data-page="schedule"] .panel{padding:18px 12px}
 body[data-page="schedule"] .calendar-grid{min-width:710px;grid-template-columns:46px repeat(7,minmax(94px,1fr))}
 body[data-page="schedule"] .form-actions{flex-wrap:wrap}
 body[data-page="schedule"] .form-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.onboarding .choice,.onboarding .step-progress i{transition:none}.onboarding .entrance{animation:none}}
.draft-conflicts{margin:24px 0;padding:18px;border:1px solid #cfafc5;border-radius:18px;background:rgba(245,215,232,.08)}
.draft-conflicts h3{margin-top:0}.draft-conflict{min-width:0;margin:18px 0 0;padding:0;border:0}.draft-conflict legend{font-weight:700;margin-bottom:10px}
.conflict-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.conflict-options .choice{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:8px;white-space:normal;overflow-wrap:anywhere}
.conflict-options .choice span{font-size:14px;line-height:1.5}.conflict-options .choice[aria-pressed="true"]{outline:2px solid #eea7cf;outline-offset:2px}
@media(max-width:520px){.conflict-options{grid-template-columns:1fr}}
@media(max-width:380px){
 .header-inner{gap:12px}.header-actions{margin-left:auto;flex-shrink:0}
 .header-actions>.btn{display:none}.header-actions>.login-link{white-space:nowrap}
 .header .brand-logo{width:126px}
}

/* 2026-10-01 约会详情（匹配后卡片打开的页面）：沿用现有面板与按钮，只补排版。窄屏（360/390px）不横向溢出。 */
.plan-section{display:grid;gap:10px;min-width:0}
.plan-section h3{margin:0;font-size:.9rem;font-weight:600;opacity:.72}
.plan-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-width:0}
.plan-line>*{min-width:0;overflow-wrap:anywhere}
.plan-line small{opacity:.72;margin-left:6px}
.plan-badge{flex:none;color:var(--accent);border:1px solid currentColor;border-radius:999px;padding:2px 10px;font-size:.82rem;white-space:nowrap}
.plan-address{margin:0;overflow-wrap:anywhere;word-break:break-word}
.plan-actions{display:flex;flex-wrap:wrap;gap:8px}
.plan-actions .btn{max-width:100%}
.plan-section+.plan-section{margin-top:12px}

/* 2026-10-02 F05：多选到上限时其余选项变淡（仍可点，点了提示上限） */
.choice.at-limit{opacity:.55}

/* 2026-10-02 F08 绑定指令一键复制 */
.binding-label{margin:.75rem 0 .25rem;font-size:.92rem}
.binding-code{user-select:all;-webkit-user-select:all;word-break:break-all}
.binding-fallback{width:100%;min-height:2.6rem;margin:.5rem 0;font:inherit;padding:.5rem .6rem;border-radius:10px;resize:none}

/* Public profile details are visible with the introduction, before the response controls. */
.introduction-details{margin-top:18px}.introduction-details h3{margin-top:0}
.introduction-details dl{display:grid;gap:12px;margin-bottom:0}
.introduction-details dl>div{display:grid;grid-template-columns:minmax(60px,1fr) minmax(0,3fr);gap:14px}
.introduction-details dt{opacity:.72}.introduction-details dd{margin:0;overflow-wrap:anywhere}

/* Registration keeps its misty blue theme after email verification switches to
   R3. The account and sign-in use the same surfaces, controls and dialogs. */
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) {
  --bg: var(--journey-bg);
  --panel: var(--journey-panel);
  --text: var(--journey-text);
  --muted: var(--journey-muted);
  --line: var(--journey-line);
  --accent: var(--journey-accent);
  background: var(--journey-bg);
  color: var(--journey-text);
  color-scheme: dark;
  isolation: isolate;
}
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"])::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--journey-backdrop);
}
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) .header { background: transparent; }
body[data-page="flow"] .nav { display: none; }
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) :is(.footer, .panel) { border-color: var(--journey-line); }
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) :is(.nav, .footer-small, .hint, .connection-state p, .form-description, .form-legal) { color: var(--journey-muted); }
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) :is(.panel, .onboarding) {
  background: var(--journey-surface);
  border-color: var(--journey-line);
  border-radius: var(--journey-radius);
  box-shadow: var(--journey-shadow);
}
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) .btn:not(.secondary):not(.dark) {
  background: var(--journey-primary-bg);
  color: var(--journey-primary-text);
  border-color: var(--journey-primary-bg);
  border-radius: 999px;
}
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) .btn:not(.secondary):not(.dark):hover:not(:disabled) { background: #ffe7f6; border-color: #ffe7f6; transform: none; }
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) .btn.secondary {
  background: transparent;
  color: var(--journey-text);
  border-color: var(--journey-line);
  border-radius: 999px;
}
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) .btn.secondary:hover:not(:disabled) { background: #ffffff12; border-color: #d8eaff60; transform: none; }
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) .input {
  background: var(--journey-input);
  border-color: var(--journey-line);
  color: var(--journey-text);
  border-radius: 16px;
}
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) .input::placeholder { color: #9cb3c5; }
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) .input:focus { border-color: var(--journey-focus); box-shadow: 0 0 0 3px #f33ea522; }
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--journey-focus); outline-offset: 3px; }
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) .modal-backdrop { background: #071824b8; }
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) .modal {
  background: var(--journey-panel);
  border-color: var(--journey-line);
  border-radius: var(--journey-radius);
  box-shadow: var(--journey-shadow);
}
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) :is(.modal h2, .modal-close) { color: var(--journey-text); }
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) .modal .text-btn { color: var(--journey-accent); }
body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) .modal .btn.text-btn { background: transparent; border-color: transparent; color: var(--journey-accent); }
body[data-page="register"] .onboarding .choice.selected { background: var(--journey-selected-bg); color: var(--journey-selected-text); }
body[data-page="register"] .onboarding .choice.selected::after { background: var(--journey-selected-text); }
body[data-page="register"] .onboarding .age-values .input { background: var(--journey-primary-bg); color: var(--journey-primary-text); }
@media(max-width:760px) {
  body[data-page="register"] .onboarding { background: transparent; border-radius: 0; box-shadow: none; }
}
@media(prefers-reduced-motion:reduce) {
  body:is([data-page="register"], [data-page="flow"], [data-page="login"], [data-page="profile"], [data-page="match"], [data-page="schedule"], [data-page="date"], [data-page="feedback"]) :is(.btn, .input) { transition: none; }
}