/* Mivora · 冰白 / 钴蓝
   全站颜色与手机尺寸集中在此，常改颜色只需要修改下面的变量。 */
:root {
  color-scheme: light;
  --ice: #f7faff;
  --paper: #ffffff;
  --blue: #2454d8;
  --blue-dark: #163ca4;
  --blue-light: #e9efff;
  --ink: #172b4d;
  --muted: #6a7a94;
  --line: #dbe4f3;
  --rose: var(--blue);
}
body, body.mobile-discovery {
  background: #edf3fc;
  color: var(--ink);
  --rose: var(--blue);
  --cream: var(--blue);
  --muted: #6a7a94;
  --m-ink: var(--ice);
  --m-rose: var(--blue);
  --m-cream: var(--blue);
  --m-muted: var(--muted);
}
.f-shell, .mobile-discovery .m-shell {
  width: 100%;
  max-width: 430px;
  background: var(--ice);
  border-color: var(--line);
}
.f-shell { overflow: hidden; }
.f-header, .m-header {
  height: 60px;
  margin: 0 18px;
  border-color: var(--line);
}
.f-brand, .m-brand { color: var(--blue); font-size: 29px; }
.f-brand span, .m-brand span { color: var(--muted); border-color: #c8d6ef; font-size: 10px; }
.language-picker { background: white; color: var(--ink); border-color: var(--line); min-height: 38px; }
.f-back, .m-header-heart, .m-caption svg { color: var(--blue); }
.f-gate, .f-guide { padding: 0 18px 22px; }
.f-intro, .m-intro { background: none; }
.f-intro { padding-top: 21px; }
.f-eyebrow, .m-eyebrow { color: var(--muted); font-size: 10px; }
.f-eyebrow svg, .m-eyebrow svg { color: var(--blue); }
.f-intro h1 { font-size: 32px; font-weight: 500; line-height: 1.3; letter-spacing: -.8px; margin-top: 10px; }
.f-intro em, .m-intro h1 em { color: var(--blue); font-family: inherit; font-weight: 500; }
.f-intro p { color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 10px; }
.f-preference { padding-top: 0; }
.f-preference-title { margin-bottom: 11px; }
.f-preference-title > span, .m-gender-bar > span { color: var(--muted); font-size: 10px; }
.f-preference h2 { font-weight: 500; }
.f-genders { margin-bottom: 12px; }
.f-genders button { min-height: 49px; background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; }
.f-genders button > span { border-color: #cad7ef; }
.f-genders button[aria-pressed=true] { background: var(--blue-light); color: var(--blue-dark); border-color: #8da9f0; }
.f-genders button[aria-pressed=true] > span { background: var(--blue); color: white; border-color: var(--blue); }
.f-primary { background: var(--blue); color: white; min-height: 52px; border-radius: 12px; font-weight: 500; box-shadow: 0 6px 16px #2454d81a; }
.f-adult { color: var(--muted); font-size: 10px; margin-top: 10px; }
.f-signature { color: #7d8fac; font-family: inherit; font-size: 12px; line-height: 1.5; letter-spacing: 1px; margin-top: 16px; }

/* 六人叠放：五张后排人像 + 亚洲前景主卡，最左北美洲，最右欧洲。
   百分比定位让 320–430px 的手机宽度保持相同构图；不需要横向拖动。 */
.f-gallery { direction: ltr; height: 264px; margin: 18px 0 17px; isolation: isolate; }
.f-gallery::before { width: 76%; height: 38%; left: 12%; bottom: 4%; filter: none; background: #e4edff; border-radius: 50%; }
.f-portrait { width: 24%; height: 59%; border: 2px solid white; border-radius: 11px; background: #e5ecf7; box-shadow: 0 6px 16px #294b851a; transform-origin: 50% 80%; }
.f-portrait::after { display: none; }
.f-portrait img { object-position: 50% 27%; }
.f-portrait-north { left: 0; top: 19%; transform: rotate(-11deg); z-index: 1; }
.f-portrait-south { left: 18%; top: 7%; transform: rotate(-7deg); z-index: 2; }
.f-portrait-middle { left: 38%; top: 0; transform: rotate(0); z-index: 3; }
.f-portrait-africa { right: 18%; top: 7%; transform: rotate(7deg); z-index: 2; }
.f-portrait-europe { right: 0; top: 19%; transform: rotate(11deg); z-index: 1; }
.f-portrait-asia { width: 44%; height: 73%; left: 28%; top: 27%; z-index: 5; transform: none; border-radius: 14px; border-width: 3px; box-shadow: 0 10px 25px #153ba52b; }
.f-portrait-asia img { object-position: 50% 35%; }
.f-gallery-star { color: var(--blue); right: 6px; top: -8px; font-size: 24px; }

/* Safari 引导：保留轻量 CSS 动画，统一高亮与菜单的颜色。 */
.f-guide .f-intro h1 { font-size: 30px; }
.f-guide .f-intro p { font-size: 12px; }
.f-animation-card { border-color: var(--line); background: white; border-radius: 17px; margin: 18px 0; }
.f-motion { background: #eaf0ff; }
.f-demo-phone { box-shadow: 0 0 0 1px #566680, 4px 3px 0 #b7c6df; }
.f-demo-content { color: #244779; }
.f-demo-content i { background: #bfd0f4; }
.f-demo-content i+i { background: #a4bdec; }
.f-browser-row::after { border-color: var(--blue); }
.f-browser-row::before { background: #2454d810; }
.f-menu-dots::after { border-color: var(--blue); box-shadow: 0 0 0 4px #2454d81a; }
.f-demo-tap { background: var(--blue); box-shadow: 0 0 0 6px #2454d825; }
.f-motion-bar { color: var(--muted); height: 44px; }
.f-motion-bar button { color: var(--blue); min-height: 44px; font-size: 10px; }
.f-motion-bar button > svg { margin-right: 4px; }
.f-steps li > span { color: var(--blue); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.5; background: var(--blue-light); border-radius: 8px; text-align: center; min-width: 32px; padding: 5px 3px; }
.f-steps strong { color: var(--ink); font-size: 13px; font-weight: 500; }
.f-steps p { color: var(--muted); font-size: 11px; }
.f-copy-hint { color: var(--muted); font-size: 11px; }
.f-manual-copy { background: var(--blue-light); border-color: var(--line); }
.f-manual-copy label { color: var(--ink); }
.f-manual-copy input { background: white; color: var(--ink); border-color: var(--line); font-size: 16px; }
.f-toast, .m-toast { background: var(--ink); color: white; border-color: #ffffff30; }

/* 人物发现：窄屏双列、手机比例主图、白色导航。 */
.m-intro { padding: 22px 18px 16px; }
.m-intro h1 { font-size: 29px; line-height: 1.4; font-weight: 500; }
.m-gender-bar { padding: 0 18px 16px; }
.m-gender { background: #eaf0fb; border-radius: 10px; }
.m-gender button { color: var(--muted); min-height: 40px; border-radius: 8px; }
.m-gender button[aria-pressed=true] { background: var(--blue); color: white; }
.m-spotlight, .m-photo { background: #e6edf8; border-radius: 14px; }
.m-spotlight-open { aspect-ratio: 1 / 1.06; }
.m-photo-shade { background: linear-gradient(180deg,#11285120,transparent 30%,transparent 52%,#102b6466 80%,#102b64bb); }
.m-spotlight-info strong { color: white; font-size: 27px; }
.m-meet { color: white; border-color: #ffffff80; background: #2454d8dd; backdrop-filter: none; }
.m-heart { background: #fffffff2; color: var(--blue); border-color: white; }
.m-heart.is-saved, .m-spotlight .m-heart.is-saved { background: var(--blue); color: white; border-color: var(--blue); }
.m-spotlight .m-heart { background: #ffffffed; color: var(--blue); backdrop-filter: none; border-color: white; }
.m-section-heading { padding: 24px 3px 16px; }
.m-section-heading .m-eyebrow { color: var(--muted); font-size: 10px; }
.m-section-heading h2 { font-size: 22px; font-weight: 500; }
.m-section-flower { color: var(--blue); }
.m-grid { column-gap: 11px; row-gap: 21px; }
.m-caption strong { color: var(--ink); font-size: 14px; font-weight: 500; }
.m-caption small { color: var(--muted); }
.m-pause { border-color: var(--line); padding: 23px 8px; }
.m-pause > span { color: var(--muted); }
.m-pause em, .m-pause > svg { color: var(--blue); }
.m-pause p { font-size: 19px; }
.m-shuffle-hint { grid-column: 1 / -1; }
.m-shuffle-hint button { display: flex; align-items: center; width: 100%; min-height: 62px; padding: 13px 14px; border: 1px solid #ccdaf7; border-radius: 13px; background: #edf3ff; color: var(--blue); text-align: start; }
.m-shuffle-hint button > span { flex: 1; min-width: 0; margin: 0 11px; font-size: 12px; line-height: 1.7; overflow-wrap: break-word; }
.m-shuffle-hint button > svg { width: 17px; height: 17px; }
[dir=rtl] .m-shuffle-hint button > svg:last-child { transform: scaleX(-1); }
.m-load button { color: var(--blue); border-color: #c6d6fa; background: white; }
.m-bottom-nav { max-width: 430px; background: #fffffffa; border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.m-bottom-nav button { color: #78879e; }
.m-bottom-nav button[aria-current] { color: var(--blue); }
.m-empty button { background: var(--blue); color: white; }

/* 资料与留资表单使用同一蓝白主题。 */
.mobile-discovery dialog.m-dialog { max-width: 406px; background: white; color: var(--ink); border-color: var(--line); box-shadow: 0 20px 70px #14356830; }
.m-dialog::backdrop, .legacy-backdrop { background: #10254b80; backdrop-filter: none; -webkit-backdrop-filter: none; }
.m-dialog-close { background: #ffffffec; color: var(--ink); border-color: white; backdrop-filter: none; }
.m-profile-info { padding: 22px; }
.m-original-name { color: var(--muted); }
.m-profile-save { background: var(--blue); color: white; border-radius: 12px; min-height: 50px; }
.mobile-discovery dialog.m-contact-dialog { max-width: 430px; background: var(--ice); color: var(--ink); border-color: #d6e1f3; }
.m-contact-handle { background: #bbcbe5; }
.m-contact-person { background: white; border-color: var(--line); }
.m-contact-person small, .m-contact-back, .m-contact-heading p { color: var(--muted); }
.m-contact-close { background: white; color: var(--ink); border-color: var(--line); width: 44px; height: 44px; }
.m-contact-heading .m-contact-hello { color: var(--blue); }
.m-contact-heading h2 { font-size: 27px; }
.m-contact-note { color: var(--blue-dark); background: var(--blue-light); border-color: var(--blue); }
.m-contact-field > label { color: #526580; font-size: 11px; }
.m-contact-field input, .m-contact-field select { background: white; color: var(--ink); border-color: #cedaee; border-radius: 11px; }
.m-contact-field input::placeholder { color: #8a97ac; }
.m-contact-field input:focus, .m-contact-field select:focus { outline-color: #2454d825; border-color: var(--blue); }
.m-contact-field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px white inset; }
.m-contact-field input[aria-invalid=true] { border-color: #c34242; }
.m-contact-error { color: #b32d36; }
.m-contact-submit { background: var(--blue); color: white; border-color: var(--blue); border-radius: 12px; }
.m-contact-success-icon { color: var(--blue); border-color: #c1d2f5; background: var(--blue-light); }
.m-contact-success .m-eyebrow { color: var(--blue); }
.m-contact-success > p { color: var(--muted); }
[dir=rtl] .m-contact-note { border-right-color: var(--blue); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--blue); }

@media (min-width:400px) {
  .f-gallery { height: 280px; }
}
@media (max-width:360px) {
  .f-header, .m-header { margin: 0 15px; height: 56px; }
  .f-gate, .f-guide { padding-left: 15px; padding-right: 15px; }
  .f-intro { padding-top: 18px; }
  .f-intro h1, .f-guide .f-intro h1 { font-size: 28px; }
  .f-intro p, .f-guide .f-intro p { font-size: 11px; }
  .f-gallery { height: 232px; margin: 16px 0; }
  .f-portrait { border-radius: 9px; }
  .f-genders button { min-height: 46px; }
  .f-primary { min-height: 49px; }
  .f-signature { margin-top: 12px; }
  .m-intro h1 { font-size: 27px; }
  .m-contact-heading h2 { font-size: 25px; }
}
@media (max-width:600px) {
  .mobile-discovery dialog.m-contact-dialog { width: 100%; max-width: 430px; }
  .m-dialog::backdrop { background: #10254b80; }
}
/* 留出旧款 iPhone 与 Safari 地址栏的空间；内容仍可正常纵向滚动。 */
@media (max-height:700px) and (max-width:600px) {
  .f-gate .f-intro { padding-top: 16px; }
  .f-gate .f-intro h1 { margin-top: 8px; }
  .f-gate .f-gallery { height: 214px; margin-top: 14px; margin-bottom: 14px; }
  .f-signature { margin-top: 12px; }
}
@media (max-height:600px) and (max-width:600px) {
  .f-gate .f-intro h1 { font-size: 27px; }
  .f-gate .f-gallery { height: 178px; margin-top: 12px; margin-bottom: 12px; }
}
@supports not (aspect-ratio:1) {
  .m-spotlight-open { padding-top: 106%; }
}