:root { color-scheme: light; --ink:#08213b; --muted:#64778c; --navy:#05294f; --cyan:#0c91a1; --blue:#1879e8; --line:#d4e3eb; --paper:#eef7fb; font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { min-width:320px; min-height:100vh; min-height:100dvh; margin:0; background:var(--paper); color:var(--ink); }
button,input,select { font:inherit; }
a { color:inherit; text-decoration:none; }
.onboarding-topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:68px; padding:max(12px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 12px max(22px,env(safe-area-inset-left)); background:var(--navy); color:#fff; }
.onboarding-topbar a { color:#cceff4; font-weight:800; }
.onboarding-topbar strong { display:flex; align-items:baseline; gap:8px; }
.onboarding-topbar small { color:#9fdbe3; font-size:11px; }
.onboarding-shell { display:grid; place-items:center; min-height:calc(100dvh - 68px); padding:clamp(18px,4vw,48px); }
.onboarding-card { width:min(760px,100%); border:1px solid var(--line); border-radius:8px; background:#fff; padding:clamp(22px,4vw,42px); box-shadow:0 26px 80px rgba(6,42,72,.12); }
.onboarding-card>header span { color:var(--cyan); font-size:12px; font-weight:900; }
.onboarding-card h1 { margin:8px 0; font-size:clamp(34px,6vw,54px); letter-spacing:0; }
.onboarding-card>header p { margin:0; color:var(--muted); font-weight:700; }
.progress { height:5px; margin:24px 0 28px; overflow:hidden; background:#dcebf1; }
.progress span { display:block; width:33.333%; height:100%; background:linear-gradient(90deg,#16bccb,var(--blue)); transition:width .2s ease; }
.step-panel { min-height:250px; }
.mode-options,.consent-list { display:grid; gap:12px; }
.mode-option,.consent-item { display:flex; align-items:flex-start; gap:14px; border:1px solid var(--line); border-radius:7px; padding:18px; cursor:pointer; }
.mode-option:has(input:checked),.consent-item:has(input:checked) { border-color:#57b5df; background:#effaff; box-shadow:inset 4px 0 var(--blue); }
.mode-option input,.consent-item input { width:20px; height:20px; flex:0 0 auto; margin:2px 0 0; }
.mode-option span,.consent-item span { display:grid; gap:5px; }
.mode-option strong,.consent-item strong { font-size:18px; }
.mode-option small,.consent-item small,.test-code p,.guardian-confirmation { color:var(--muted); font-size:13px; line-height:1.55; }
.test-code { margin-top:18px; border-top:1px solid var(--line); padding-top:18px; }
.identity-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
label { display:grid; gap:7px; color:var(--muted); font-size:13px; font-weight:800; }
input,select { width:100%; min-height:50px; border:1px solid var(--line); border-radius:6px; background:#fff; padding:11px 12px; color:var(--ink); outline:none; }
input:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(24,121,232,.1); }
.consent-item--required { border-left:4px solid var(--blue); }
.terms-section { display:grid; gap:10px; }
.terms-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; }
.terms-heading div { display:grid; gap:3px; }
.terms-heading span { color:var(--cyan); font-size:11px; font-weight:900; }
.terms-heading h2 { margin:0; font-size:22px; letter-spacing:0; }
.terms-heading>strong { color:#9a5d13; font-size:12px; }
.terms-heading>strong.is-complete { color:#11816f; }
.terms-reader { height:min(330px,40dvh); min-height:240px; overflow:auto; border:1px solid var(--line); border-radius:7px; background:#f8fbfd; padding:20px 22px; outline:none; overscroll-behavior:contain; scrollbar-gutter:stable; }
.terms-reader:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(24,121,232,.1); }
.terms-reader article { max-width:66ch; margin:0 auto; }
.terms-reader h3 { margin:22px 0 7px; color:var(--ink); font-size:16px; letter-spacing:0; }
.terms-reader h3:first-child { margin-top:0; }
.terms-reader p { margin:0; color:#536a80; font-size:13px; line-height:1.75; }
.terms-end { display:grid; gap:3px; margin-top:24px; border-top:1px solid var(--line); padding:18px 0 4px; color:#137c88; }
.terms-end span,.terms-read-hint { color:var(--muted); font-size:12px; }
.terms-read-hint { margin:0; }
.consent-list--after-terms { margin-top:18px; }
.consent-group { overflow:hidden; border:1px solid var(--line); border-radius:7px; background:#fff; }
.consent-group>header { display:flex; align-items:baseline; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line); background:#f7fbfd; padding:13px 18px; }
.consent-group>header strong { color:var(--ink); font-size:14px; }
.consent-group>header span { color:var(--muted); font-size:12px; }
.consent-group .consent-list { gap:0; }
.consent-group .consent-item { border:0; border-radius:0; padding:17px 18px; }
.consent-group .consent-item--required { border-bottom:1px solid var(--line); border-left:4px solid var(--blue); }
.consent-group .consent-item--optional { background:#fbfdfe; }
.consent-group .consent-item--optional strong { font-size:16px; }
.consent-group .consent-item--optional small { color:#718297; }
.consent-group .consent-item:has(input:checked) { background:#effaff; box-shadow:none; }
.consent-group .consent-item--required:has(input:checked) { box-shadow:inset 4px 0 var(--blue); }
.consent-item.is-locked { cursor:not-allowed; opacity:.58; background:#f3f6f8; box-shadow:none; }
.consent-item.is-locked:has(input:checked) { border-color:var(--line); background:#f3f6f8; box-shadow:none; }
.guardian-confirmation { border-left:4px solid var(--cyan); background:#f2fbfb; padding:12px 14px; }
.form-message { min-height:24px; margin:16px 0 0; color:#b13c3c; font-size:13px; font-weight:800; }
.onboarding-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:12px; border-top:1px solid var(--line); }
button { min-width:150px; min-height:48px; border:1px solid transparent; border-radius:6px; background:var(--blue); color:#fff; padding:10px 18px; font-weight:900; cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.5; }
button.secondary { border-color:var(--line); background:#fff; color:var(--cyan); }
@media (max-width:620px) { .onboarding-topbar{min-height:60px;padding-inline:14px}.onboarding-topbar strong{font-size:14px}.onboarding-topbar small{display:none}.onboarding-shell{align-items:start;min-height:calc(100dvh - 60px);padding:14px}.onboarding-card{padding:22px 18px}.identity-grid{grid-template-columns:1fr}.step-panel{min-height:320px}.terms-heading{align-items:start}.terms-heading h2{font-size:20px}.terms-reader{height:42dvh;min-height:260px;padding:16px}.consent-item{padding:15px}.consent-group>header{align-items:flex-start;flex-direction:column;gap:3px;padding:12px 15px}.consent-group .consent-item{padding:15px}.onboarding-actions button{min-width:0;flex:1} }