:root { color-scheme: light; --blue:#075dad; --navy:#062955; --soft:#eef6fb; --muted:#657b91; --line:#d8e5ef; --green:#0aaf76; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html, body { margin:0; min-width:0; overflow-x:hidden; background:var(--soft); color:var(--navy); }
body { min-height:100vh; min-height:100dvh; }
button { min-height:48px; border:0; font:inherit; cursor:pointer; touch-action:manipulation; }
button:focus-visible { outline:3px solid #ffb020; outline-offset:3px; }
[hidden] { display:none !important; }
.view { width:min(100%, 760px); min-height:100vh; min-height:100dvh; margin:0 auto; padding:24px 18px calc(32px + env(safe-area-inset-bottom)); }
.home-view { position:relative; display:flex; flex-direction:column; justify-content:center; overflow:hidden; background:linear-gradient(160deg,#e9f7ff 0%,#dcefff 52%,#f9fcff 100%); }
.home-glow { position:absolute; inset:8% -30% auto; height:340px; background:radial-gradient(circle,rgba(35,139,222,.32),transparent 64%); pointer-events:none; }
.brand { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:26px; font-size:21px; font-weight:800; }
.brand-mark { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; background:linear-gradient(145deg,#0876d1,#044789); color:#fff; box-shadow:0 9px 24px rgba(5,77,147,.25); }
.hero-card, .question-card, .result-panel { position:relative; padding:28px 22px; border:1px solid rgba(255,255,255,.86); border-radius:28px; background:rgba(255,255,255,.9); box-shadow:0 18px 55px rgba(5,75,137,.13); }
.eyebrow { margin:0 0 9px; color:#2874b7; font-size:14px; font-weight:750; letter-spacing:.04em; }
h1, h2, p { overflow-wrap:anywhere; }
.hero-card h1 { margin:0; font-size:clamp(34px,10vw,52px); line-height:1.16; letter-spacing:-.04em; }
.hero-copy { margin:18px 0 24px; color:#49667f; font-size:17px; line-height:1.75; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 28px; }
.feature-grid div { min-width:0; padding:13px 5px; border-radius:16px; background:#eff7fd; text-align:center; }
.feature-grid strong, .feature-grid span { display:block; }
.feature-grid strong { color:#076fc6; font-size:20px; }
.feature-grid span { margin-top:4px; color:#6f8395; font-size:12px; }
.primary-button, .secondary-button, .text-button { width:100%; border-radius:16px; font-weight:750; }
.primary-button { padding:14px 18px; background:linear-gradient(135deg,#0878d7,#05529b); color:#fff; box-shadow:0 10px 24px rgba(5,88,164,.25); }
.primary-button:active { transform:translateY(1px); }
.secondary-button { padding:13px 18px; border:1px solid #b9d3e7; background:#fff; color:#155d99; }
.text-button { background:transparent; color:#46677f; text-decoration:underline; }
button:disabled { cursor:not-allowed; opacity:.45; box-shadow:none; }
.privacy-note, .compact-disclaimer { margin:20px auto 0; color:#60798e; font-size:13px; line-height:1.6; text-align:center; }
.quiz-view { padding-top:max(22px,env(safe-area-inset-top)); }
.quiz-header { margin-bottom:18px; padding:4px 4px 0; }
.quiz-header > div:first-child { display:flex; align-items:end; justify-content:space-between; gap:12px; }
.quiz-header .eyebrow { margin:0; }
.progress-text { margin:0; color:var(--muted); font-size:14px; }
.progress-track { height:8px; margin-top:12px; overflow:hidden; border-radius:99px; background:#d7e7f2; }
.progress-track span { display:block; width:8%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#0a71c7,#27d99c); transition:width .2s ease; }
.question-card { min-height:460px; }
.dimension-label { display:inline-block; margin:0 0 13px; padding:6px 10px; border-radius:99px; background:#e7f4ff; color:#1670b9; font-size:13px; font-weight:700; }
.question-card h2 { margin:0; font-size:25px; line-height:1.4; }
.question-tip { margin:10px 0 20px; color:#76899a; font-size:14px; }
.options { display:grid; gap:11px; }
.option { display:flex; width:100%; min-height:54px; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:15px; background:#fff; color:#23445f; text-align:left; line-height:1.45; }
.option:hover { border-color:#8fc5ec; background:#f8fcff; }
.option.selected { border:2px solid #0b75c9; padding:11px 13px; background:#eaf6ff; color:#064f8e; font-weight:700; }
.option-dot { flex:0 0 20px; width:20px; height:20px; border:2px solid #9db4c5; border-radius:50%; }
.option.selected .option-dot { border:6px solid #0875ca; }
.quiz-actions { display:grid; grid-template-columns:1fr 1.5fr; gap:12px; margin-top:17px; }
.inline-message { min-height:22px; margin:13px 2px 0; color:#b43a2d; font-size:14px; line-height:1.5; text-align:center; }
.result-view { padding-top:max(22px,env(safe-area-inset-top)); background:linear-gradient(180deg,#075dad 0,#ddecf7 36%,#eef6fb 100%); }
.result-hero { padding:32px 18px 28px; color:#fff; text-align:center; }
.result-hero .eyebrow { color:#d8eeff; }
.score-line { margin:10px 0 3px; line-height:1; }
.score-line strong { font-size:clamp(92px,28vw,150px); letter-spacing:-.08em; }
.score-line span { margin-left:10px; font-size:30px; font-weight:700; }
.result-hero h1 { margin:14px 0 10px; font-size:26px; }
.result-summary { max-width:640px; margin:0 auto; color:#e8f4ff; font-size:16px; line-height:1.75; }
.result-panel { margin-bottom:16px; padding:22px 18px; border-color:#fff; border-radius:22px; box-shadow:0 12px 32px rgba(3,53,100,.11); }
.result-panel h2 { margin:0 0 17px; font-size:20px; }
.country-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:10px; }
.country-card { min-width:0; padding:12px 6px; border-radius:13px; background:#f1f7fb; text-align:center; }
.country-card img { display:block; width:60px; height:40px; margin:0 auto 8px; object-fit:contain; }
.country-card span { display:block; font-size:14px; font-weight:700; }
.advice-list { display:grid; gap:10px; margin:0; padding-left:22px; color:#38566d; line-height:1.6; }
.result-actions { display:grid; gap:11px; margin:20px 0 12px; }
.disclaimer { display:flex; flex-direction:column; gap:7px; margin-top:18px; padding:17px; border-radius:16px; background:rgba(255,255,255,.75); color:#536b7e; font-size:14px; line-height:1.65; }
.disclaimer strong { color:#203f59; }
#posterCanvas { position:fixed; left:-9999px; top:0; width:1080px; height:1920px; }
.modal-open { overflow:hidden; }
.poster-modal { position:fixed; z-index:20; inset:0; overflow:auto; padding:12px; background:rgba(1,19,42,.82); }
.poster-dialog { width:min(100%,520px); margin:0 auto; padding:16px; border-radius:20px; background:#fff; }
.poster-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.poster-head h2 { margin:0; font-size:21px; }
.poster-head button { min-width:48px; border-radius:12px; background:#edf3f7; color:#345; font-size:29px; }
.poster-help { margin:12px 0; color:#536b7e; font-size:14px; line-height:1.6; }
.poster-dialog img { display:block; width:100%; height:auto; border-radius:12px; background:#dcebf5; box-shadow:0 7px 24px rgba(4,40,77,.2); }
.poster-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
@media (min-width:700px) { .view { padding-left:32px; padding-right:32px; } .result-actions { grid-template-columns:1.25fr 1fr .8fr; } }
@media (max-width:359px) { .view { padding-left:12px; padding-right:12px; } .hero-card, .question-card { padding:22px 16px; border-radius:22px; } .feature-grid strong { font-size:18px; } .country-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .poster-actions { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }