:root {
  --blue-950: #16382b;
  --blue-900: #1f4d3a;
  --blue-800: #2a6b4f;
  --blue-700: #3a8a66;
  --blue-500: #5ab892;
  --cyan: #8ed8c0;
  --yellow: #d4a843;
  --orange: #c47a3a;
  --ink: #1a2e26;
  --muted: #6a8a7a;
  --white: #ffffff;
  --shadow: 0 24px 60px rgba(22, 56, 43, 0.2);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  background: #e8f0eb;
}

button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: #2a6b4f;
}

.app-shell::before, .app-shell::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.app-shell::before {
  inset: -42px;
  background: url('/assets/network-security-poster-bg.webp') center / cover no-repeat;
  filter: blur(34px) saturate(1.12);
  opacity: .58;
  transform: scale(1.12);
}
.app-shell::after { inset: 0; background: rgba(16, 56, 40, .3); }

.decor { position: absolute; z-index: 0; pointer-events: none; opacity: .4; }
.decor-left { width: 210px; height: 210px; left: 4%; top: 24%; border: 2px solid rgba(42, 107, 79, .25); border-radius: 50%; box-shadow: 0 0 0 22px rgba(42,107,79,.06), 0 0 0 46px rgba(42,107,79,.04); }
.decor-right { width: 250px; height: 250px; right: 5%; top: 12%; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: inset 0 0 0 20px rgba(255,255,255,.14), inset 0 0 0 42px rgba(255,255,255,.1); }

.screen { position: relative; z-index: 1; width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.cover-screen { width: 100%; height: 100dvh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); overflow: hidden; }
.rules-screen { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 30px 0; }
.rules-screen > .rules-card { margin-top: auto; }
.rules-screen > .unit-credit { margin-bottom: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cover-stage { position: relative; z-index: 1; display: flex; justify-content: center; width: min(342px, 100%); }
.cover-art { display: block; width: 100%; height: auto; aspect-ratio: 171 / 256; object-fit: cover; border: 1px solid rgba(255,255,255,.74); border-radius: 28px; box-shadow: 0 28px 70px rgba(22, 56, 43, .42); }
.cover-stage--full { flex: 1; min-height: 0; width: 100%; align-items: center; cursor: pointer; }
.cover-art--full { width: auto; height: auto; aspect-ratio: auto; object-fit: contain; max-width: 100%; max-height: 100%; border-radius: 22px; }
.cover-screen .cover-cta { flex: 0 0 auto; width: min(340px, 100%); margin-top: 0; }
.rules-card { width: min(560px, calc(100% - 24px)); max-width: 560px; margin-top: 0; padding: 30px 30px 24px; }
.rules-highlight { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 6px; }
.rules-highlight > div { padding: 10px 12px; border: 1px solid rgba(212, 168, 67, .45); border-radius: 12px; background: rgba(212, 168, 67, .16); }
.rules-highlight span { display: block; color: #8a6a1c; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.rules-highlight strong { display: block; margin-top: 3px; color: var(--blue-950); font-size: 13px; }

.brand-mark { display: inline-flex; align-items: center; gap: 9px; color: var(--blue-900); font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.brand-mark__logo { display: block; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; object-fit: contain; }
.brand-mark--small { color: #fff; font-size: 14px; }
.eyebrow { margin: 28px 0 15px; color: var(--blue-700); font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.hero-copy h1, .result-screen h2 { margin: 0; color: var(--blue-950); font-size: clamp(50px, 7.3vw, 90px); line-height: 1.08; letter-spacing: -.06em; font-weight: 900; }
h1 em, h2 em { color: var(--blue-700); font-style: normal; text-shadow: 3px 4px 0 rgba(255,255,255,.75); }
.hero-lead { margin: 23px 0 0; color: #23508f; font-size: clamp(17px, 2vw, 21px); line-height: 1.75; font-weight: 600; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 35px; }
.hero-pills span { padding: 9px 14px; border: 1px solid rgba(0,99,200,.18); border-radius: 99px; background: rgba(255,255,255,.5); color: var(--blue-800); font-size: 12px; font-weight: 700; }

.panel { border: 1px solid rgba(255,255,255,.86); border-radius: 28px; background: rgba(255,255,255,.82); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.intro-card { position: relative; z-index: 2; width: min(470px, calc(100% - 24px)); max-width: 470px; margin-top: 28px; padding: 36px 38px 28px; }
.profile-card__header { display: flex; align-items: flex-start; gap: 14px; }
.step-badge { flex: 0 0 auto; margin-top: 2px; padding: 7px 9px; border-radius: 8px; color: #fff; background: var(--blue-700); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.panel-kicker { margin: 0 0 5px; color: var(--blue-700); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.intro-card h2 { margin: 0; color: var(--blue-950); font-size: 25px; line-height: 1.3; letter-spacing: -.04em; }
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; color: #2a5a45; font-size: 13px; font-weight: 700; }
.field span b { color: #d24c50; }
.field input, .field select { width: 100%; height: 46px; padding: 0 14px; border: 1px solid #b4d8c8; border-radius: 13px; outline: 0; color: var(--blue-950); background: rgba(248,253,250,.9); transition: border-color .2s, box-shadow .2s, background .2s; }
.field input::placeholder { color: #a7c4b5; }
.field input:focus, .field select:focus { border-color: var(--blue-700); background: #fff; box-shadow: 0 0 0 4px rgba(58,138,102,.12); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; min-height: 54px; margin-top: 25px; padding: 0 22px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(105deg, #1f4d3a, #3a8a66); box-shadow: 0 13px 22px rgba(31, 77, 58, .25); font-size: 16px; font-weight: 800; transition: transform .2s, box-shadow .2s, filter .2s; }
.primary-button span { font-size: 22px; line-height: 1; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 16px 26px rgba(31, 77, 58, .32); filter: saturate(1.1); }
.primary-button:active { transform: translateY(0); }
.primary-button--compact { width: auto; min-width: 148px; min-height: 48px; margin-top: 0; border-radius: 14px; font-size: 14px; }
.form-error { margin: 12px 0 0; color: #d24c50; font-size: 12px; line-height: 1.5; }
.privacy-note { margin: 19px 0 0; color: #77a08f; font-size: 11px; text-align: center; }
.rules-list { display: grid; gap: 10px; }
.rule-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #d8ebe0; border-radius: 13px; background: rgba(248,253,250,.72); }
.rule-item > span { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; color: #fff; background: var(--blue-800); font-size: 10px; font-weight: 900; }
.rule-item strong, .rule-item small { display: block; }
.rule-item strong { color: var(--blue-950); font-size: 13px; }
.rule-item small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.rule-item--reward > span { color: var(--blue-900); background: var(--yellow); }
.unit-credit { width: min(760px, 100%); margin-top: 30px; color: rgba(255,255,255,.84); font-size: 12px; line-height: 1.7; text-align: center; text-wrap: balance; }
.unit-credit p { margin: 4px 0; }
.unit-credit strong { color: #fff; font-weight: 800; }
.quiz-screen { min-height: calc(100vh - 52px); display: flex; flex-direction: column; padding: 34px 0 72px; }
.quiz-screen::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 36px; background: linear-gradient(140deg, rgba(26, 74, 54, .9), rgba(58, 138, 102, .55)); box-shadow: 0 20px 60px rgba(22, 74, 54, .18); }
.quiz-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding: 0 38px; color: #fff; }
.quiz-subtitle { margin: 8px 0 0; color: rgba(255,255,255,.72); font-size: 12px; }
.progress-wrap { display: flex; flex-direction: column; align-items: stretch; width: min(330px, 40%); padding-top: 5px; }
.progress-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; color: rgba(255,255,255,.78); font-size: 12px; }
.progress-label strong { color: #fff; font-size: 14px; }
.progress-track { height: 8px; border-radius: 99px; background: rgba(16, 56, 40, .32); overflow: hidden; }
.progress-track span { display: block; width: 10%; height: 100%; border-radius: inherit; background: var(--yellow); transition: width .35s ease; }
.quiz-timer {
  align-self: flex-end;
  margin: 0 0 9px;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  color: #fff;
  background: rgba(16, 56, 40, .38);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
.quiz-timer.is-danger {
  color: #fff4cf;
  background: #a44a3c;
  border-color: #c66a4d;
}
.quiz-timer__label { margin-right: 7px; color: rgba(255,255,255,.7); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.quiz-layout { flex: 1; display: flex; align-items: center; width: min(720px, calc(100% - 76px)); margin: 0 auto; padding: 36px 0 14px; }
.quiz-layout .question-card { width: 100%; }
.question-card { padding: 31px 34px 27px; border: 1px solid rgba(255,255,255,.95); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 22px 40px rgba(16, 56, 40, .2); }
.question-theme { margin: -14px -17px 20px; overflow: hidden; border-radius: 18px; background: #c8e8d8; }
.question-theme img { display: block; width: 100%; height: auto; }
.question-card.is-dense .question-theme { margin-bottom: 14px; }
.question-card.is-extra-dense .question-theme { display: none; }
.question-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #78a890; font-size: 12px; }
.question-tag { padding: 7px 12px; border-radius: 8px; color: var(--blue-900); background: var(--yellow); font-weight: 800; }
.question-card h3 { margin: 22px 0 21px; color: var(--blue-950); font-size: clamp(18px, 2.1vw, 25px); line-height: 1.55; letter-spacing: -.03em; }
.question-card.is-dense h3 { margin: 14px 0 13px; font-size: clamp(16px, 1.8vw, 21px); line-height: 1.4; }
.options { display: grid; gap: 10px; }
.option { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 10px; width: 100%; min-height: 51px; padding: 9px 13px; border: 1px solid #c4e0d4; border-radius: 13px; color: #2a5a45; background: #f8fcf9; text-align: left; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.option:hover { border-color: #65c49a; background: #effaf3; transform: translateX(2px); }
.option.is-selected { border-color: var(--blue-700); color: var(--blue-950); background: #e1f5ea; box-shadow: inset 0 0 0 1px var(--blue-700); }
.option-letter { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #447a60; background: #e3f0e8; font-size: 12px; font-weight: 800; }
.option.is-selected .option-letter { color: #fff; background: var(--blue-700); }
.option-text { font-size: 14px; line-height: 1.55; }
.question-card.is-dense .option-text { font-size: 12.5px; line-height: 1.4; }
.question-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 23px; }
.text-button { padding: 10px 0; border: 0; color: #78a090; background: transparent; font-size: 13px; }
.text-button:hover { color: var(--blue-700); }
.text-button:disabled { opacity: .35; cursor: default; }

.result-screen { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: visible; padding: 42px 0 56px; text-align: center; }
.result-badge { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 12px; border-radius: 50%; color: var(--blue-900); background: var(--yellow); box-shadow: 0 10px 0 rgba(180, 140, 50, .24); font-size: 38px; font-weight: 900; }
.result-screen .eyebrow { margin: 0 0 10px; color: var(--blue-700); }
.result-screen h2 { font-size: clamp(45px, 7vw, 70px); }
.result-message { margin: 8px 0 16px; color: #447a60; font-size: 15px; }
.score-card { display: flex; align-items: center; justify-content: space-between; width: min(520px, 100%); padding: 17px 26px; text-align: left; }
.score-copy { display: flex; flex-direction: column; gap: 4px; color: #6b9a82; font-size: 13px; }
.score-copy strong { color: var(--blue-950); font-size: 52px; line-height: 1; letter-spacing: -.07em; }
.score-copy strong small { color: #70a090; font-size: 20px; letter-spacing: 0; }
.score-ring { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; background: conic-gradient(var(--blue-700) var(--score, 0%), #d9eee3 0); position: relative; }
.score-ring::after { content: ''; position: absolute; inset: 9px; border-radius: inherit; background: rgba(255,255,255,.94); }
.score-ring span { position: relative; z-index: 1; color: var(--blue-800); font-size: 16px; font-weight: 900; }
.result-profile { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; color: #629078; font-size: 12px; }
.reward-hint { display: flex; align-items: center; gap: 12px; width: min(520px, 100%); margin-top: 12px; padding: 12px 15px; border-radius: 14px; text-align: left; font-size: 12px; }
.reward-hint strong { font-size: 14px; white-space: nowrap; }
.reward-hint > span:not(.reward-hint__icon) { flex: 1; color: inherit; opacity: .8; }
.reward-hint--qualified { border: 1px solid #d99e1f; color: #5c3d00; background: linear-gradient(135deg, #ffefb3, #ffd766 55%, #f7c948); box-shadow: 0 12px 28px rgba(212, 168, 67, .38); animation: reward-glow 2.4s ease-in-out infinite; }
.reward-hint--qualified strong { font-size: 15px; color: #4a3000; }
.reward-hint--qualified > span:not(.reward-hint__icon) { opacity: .92; color: #6b4a00; font-weight: 600; }
.reward-hint--qualified > span:not(.reward-hint__icon) { flex: 1 1 150px; min-width: 0; }
.reward-hint__icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #ffe08a, #d99e1f); box-shadow: inset 0 -2px 4px rgba(122, 79, 0, .35); }
.reward-hint__icon svg { width: 17px; height: 17px; }
.reward-hint--qualified .reward-link { padding: 9px 14px; border-radius: 10px; color: #fff; background: linear-gradient(105deg, #7a4f00, #a06800); box-shadow: 0 6px 14px rgba(122, 79, 0, .35); }
.reward-hint--qualified .reward-link:active { transform: translateY(1px); }
@keyframes reward-glow { 0%, 100% { box-shadow: 0 12px 28px rgba(212, 168, 67, .38); } 50% { box-shadow: 0 12px 34px rgba(212, 168, 67, .62); } }
.reward-hint--locked { border: 1px solid #d8e9e0; color: #557966; background: rgba(255,255,255,.64); }
.reward-hint--submitted { border: 1px solid #9bd7bc; color: #197450; background: #e0f6e9; }
.reward-link { flex: 0 0 auto; padding: 5px 0 5px 8px; border: 0; color: #8d650b; background: transparent; font-size: 12px; font-weight: 800; }
.leaderboard { width: min(520px, 100%); margin-top: 14px; padding: 17px 20px 12px; text-align: left; }
.leaderboard__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.leaderboard__header .panel-kicker { margin-bottom: 3px; }
.leaderboard h3 { margin: 0; color: var(--blue-950); font-size: 20px; }
.leaderboard__header > span { padding-top: 3px; color: #78a090; font-size: 11px; }
.leaderboard-list { display: grid; gap: 4px; margin-top: 12px; }
.leaderboard-row { display: grid; grid-template-columns: 34px 1fr auto auto auto; align-items: center; gap: 9px; min-height: 34px; padding: 3px 7px; border-radius: 9px; color: #426c56; font-size: 12px; }
.leaderboard-row.is-current { color: var(--blue-950); background: #e7f6ed; box-shadow: inset 3px 0 0 var(--yellow); }
.rank { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; font-size: 10px; font-weight: 900; color: #678b77; background: #edf5ef; }
.rank--1 { color: #73540b; background: #f2d36f; }
.rank--2 { color: #516273; background: #d8e2e8; }
.rank--3 { color: #7b5030; background: #edc19e; }
.leader-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-score { color: #7a9b87; }
.leader-score b { color: var(--blue-800); font-size: 15px; }
.leaderboard-empty { margin: 7px 0 4px; color: #789687; font-size: 12px; text-align: center; }
.leader-time { color: #789687; font-size: 11px; white-space: nowrap; }
.leader-dur { color: #5b866d; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.leaderboard-tip { margin: 8px 0 0; color: #78a090; font-size: 11px; }
.rules-leaderboard { width: 100%; margin-top: 14px; }
.rules-leaderboard .leaderboard-list { max-height: 340px; overflow-y: auto; }
.winners-list { display: grid; gap: 4px; margin-top: 14px; max-height: min(46dvh, 380px); overflow-y: auto; }
.winners-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; min-height: 42px; padding: 4px 7px; border-radius: 9px; color: #426c56; font-size: 12px; }
.winners-row:nth-child(odd) { background: #f2faf5; }
.winner-name { display: block; overflow: hidden; color: var(--blue-950); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.winner-phone { display: block; margin-top: 1px; color: #789687; font-size: 11px; }
.winner-duration { color: #5b866d; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.winners-row .leader-score b { font-size: 14px; }
.rules-winners-button { width: 100%; margin-top: 10px; padding: 11px 0; border: 1px solid rgba(31, 77, 58, .28); border-radius: 16px; color: #1f4d3a; background: transparent; font-size: 13px; font-weight: 700; transition: background .2s; }
.rules-winners-button:hover { background: #eef7f1; }
.prize-showcase { width: 100%; margin-top: 14px; padding: 17px 18px 16px; border-radius: 18px; background: rgba(255, 255, 255, .72); text-align: left; }
.prize-showcase__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prize-showcase__header .panel-kicker { margin-bottom: 3px; }
.prize-showcase h3 { margin: 0; color: var(--blue-950); font-size: 20px; }
.prize-showcase__header > span { padding-top: 3px; color: #78a090; font-size: 11px; }
.prize-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.prize-card { margin: 0; min-width: 0; }
.prize-card img { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; background: #f4f2ee; }
.prize-card figcaption { margin-top: 7px; }
.prize-card strong { display: block; color: var(--blue-950); font-size: 13px; line-height: 1.35; }
.prize-card small { display: block; margin-top: 2px; color: #789687; font-size: 11px; }
.prize-strip { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 10px; border-radius: 12px; background: #f2faf5; }
.prize-strip img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #fff; }
.prize-strip span { color: #426c56; font-size: 12px; }
.answer-review { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; margin-top: 22px; }
.review-item { padding: 6px 10px; border-radius: 99px; background: rgba(255,255,255,.62); color: #4d7a60; font-size: 11px; }
.review-item.is-correct { color: #187a5a; background: #d9f6e8; }
.review-item.is-wrong { color: #a34d60; background: #ffe2e5; }
.result-screen > .primary-button { width: min(270px, 100%); margin-top: 16px; }
.submit-id { min-height: 17px; margin: 8px 0 0; color: rgba(51,100,75,.65); font-size: 11px; }
.result-screen .unit-credit { margin-top: 14px; color: rgba(51,100,75,.72); }
.result-screen .unit-credit strong { color: var(--blue-900); }
.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 18px; background: rgba(16, 56, 40, .56); backdrop-filter: blur(5px); }
.reward-modal { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 36px); overflow-y: auto; padding: 30px 32px 23px; }
.reward-modal h2 { margin: 0; color: var(--blue-950); font-size: 25px; line-height: 1.35; }
.modal-lead { margin: 9px 0 13px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.icon-button { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: #6c927d; background: #edf7f0; font-size: 24px; line-height: 1; }
.wechat-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; margin-bottom: 5px; border: 1px solid #a9d8bc; border-radius: 12px; color: #167448; background: #effaf3; font-size: 13px; font-weight: 800; }
.wechat-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #fff; background: #25bd67; font-size: 10px; }
.wechat-note { margin: 0 0 8px; color: #6d9780; font-size: 11px; text-align: center; }
.wechat-environment-note { margin: 0 0 9px; padding: 9px 11px; border: 1px solid #cfe6d8; border-radius: 10px; color: #4f7962; background: #f2faf5; font-size: 11px; line-height: 1.55; }
.reward-modal .field { margin-top: 12px; }
.reward-modal textarea { width: 100%; padding: 10px 14px; border: 1px solid #b4d8c8; border-radius: 13px; outline: 0; resize: vertical; color: var(--blue-950); background: rgba(248,253,250,.9); }
.reward-modal textarea:focus { border-color: var(--blue-700); background: #fff; box-shadow: 0 0 0 4px rgba(58,138,102,.12); }
.sms-control { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; min-width: 0; }
.sms-control .field { flex: 1; min-width: 0; margin-top: 0; }
.sms-control .field input { min-width: 0; }
.sms-send-button { flex: 0 0 auto; height: 46px; padding: 0 14px; border: 1px solid #8cc9a9; border-radius: 13px; color: #167448; background: #effaf3; font-size: 12px; font-weight: 800; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; }
.sms-send-button:hover { background: #e2f5e9; }
.sms-send-button:disabled { cursor: not-allowed; color: #84a493; background: #eef4f0; border-color: #d8e9e0; }
.sms-note { margin: 8px 0 0; color: #6d9780; font-size: 11px; }
.reward-modal .primary-button { margin-top: 17px; }

[hidden] { display: none !important; }

@media (min-width: 901px) {
  .cover-art--full { max-width: min(100%, 540px); }
  .rules-card { width: min(640px, calc(100% - 24px)); max-width: 640px; padding: 34px 40px 28px; }
  .rules-screen .unit-credit { margin-top: 20px; }
}

@media (max-width: 900px) {
  .quiz-layout { width: min(680px, calc(100% - 48px)); padding-top: 32px; }
}

@media (max-width: 600px) {
  .screen { width: min(100% - 26px, 560px); }
  .cover-screen { width: 100%; gap: 12px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .cover-art--full { border-radius: 18px; }
  .cover-screen .cover-cta { width: 100%; min-height: 48px; }
  .rules-screen { padding: 18px 0 22px; }
  .rules-card { width: calc(100% - 24px); max-width: none; margin: 0 auto; padding: 26px 20px 22px; border-radius: 24px; }
  .intro-card h2 { font-size: 22px; }
  .rules-highlight { gap: 8px; }
  .unit-credit { width: calc(100% - 34px); margin: 25px auto 0; font-size: 11px; line-height: 1.65; }
  .field-row { gap: 9px; }
  .field input, .field select { padding: 0 10px; font-size: 13px; }
  .sms-control { gap: 8px; }
  .sms-send-button { padding: 0 11px; }
  .quiz-timer { margin-bottom: 7px; }
  .quiz-screen { width: calc(100% - 16px); height: 100dvh; min-height: 100dvh; padding: 14px 0; overflow: hidden; }
  .quiz-screen::before { border-radius: 24px; }
  .quiz-header { flex: 0 0 auto; display: block; padding: 0 16px; }
  .quiz-subtitle { margin-top: 5px; }
  .progress-wrap { width: 100%; margin-top: 14px; }
  .progress-label { margin-bottom: 7px; }
  .progress-track { height: 7px; }
  .quiz-layout { flex: 1; min-height: 0; width: 100%; align-items: stretch; padding: 16px 12px 0; }
  .question-card { display: flex; flex-direction: column; min-height: 0; padding: 17px 16px 15px; border-radius: 19px; }
  .question-theme { flex: 0 0 auto; margin: -8px -7px 11px; border-radius: 14px; }
  .question-card.is-dense .question-theme { margin-bottom: 8px; }
  .question-card.is-extra-dense .question-theme { display: none; }
  .question-card h3 { margin: 13px 0 12px; font-size: 16px; line-height: 1.42; }
  .question-card.is-dense h3 { margin: 8px 0; font-size: 14px; line-height: 1.32; }
  .options { flex: 0 0 auto; gap: 7px; }
  .option { grid-template-columns: 23px 1fr; min-height: 42px; padding: 6px 9px; }
  .option-letter { width: 23px; height: 23px; }
  .option-text { font-size: 12.5px; line-height: 1.38; }
  .question-card.is-dense .option-text { font-size: 11px; line-height: 1.28; }
  .question-actions { margin-top: auto; padding-top: 13px; }
  .primary-button--compact { min-width: 125px; min-height: 44px; }
  .result-screen { width: calc(100% - 26px); padding: 14px 0 12px; }
  .result-badge { width: 62px; height: 62px; margin-bottom: 9px; font-size: 30px; }
  .result-screen .eyebrow { margin-bottom: 4px; font-size: 10px; }
  .result-screen h2 { font-size: 42px; }
  .result-message { max-width: 300px; margin: 7px 0 12px; font-size: 13px; line-height: 1.35; }
  .score-card { padding: 12px 18px; }
  .score-copy strong { font-size: 46px; }
  .score-ring { width: 66px; height: 66px; }
  .score-ring::after { inset: 7px; }
  .score-ring span { font-size: 13px; }
  .result-profile { gap: 4px; margin-top: 9px; font-size: 10px; line-height: 1.35; }
  .answer-review { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; margin-top: 12px; }
  .review-item { min-width: 0; padding: 5px 2px; font-size: 10px; white-space: nowrap; }
  .result-screen > .primary-button { width: min(240px, 100%); min-height: 44px; margin-top: 14px; font-size: 14px; }
  .submit-id { min-height: 14px; margin-top: 7px; font-size: 10px; }
  .result-screen .unit-credit { width: calc(100% - 20px); margin-top: 10px; font-size: 10px; line-height: 1.35; }
  .reward-hint--qualified { flex-wrap: wrap; }
  .reward-hint--qualified .reward-link { flex: 1 0 100%; margin-top: 2px; text-align: center; }
}

@media (max-width: 600px) and (max-height: 700px) {
  .quiz-screen { padding-top: 10px; padding-bottom: 10px; }
  .quiz-subtitle { display: none; }
  .progress-wrap { margin-top: 9px; }
  .quiz-layout { padding-top: 10px; }
  .question-card { padding: 13px 13px 11px; }
  .question-theme { margin: -6px -5px 7px; border-radius: 11px; }
  .question-card.is-dense .question-theme { display: none; }
  .question-tag { padding: 5px 9px; }
  .question-card h3 { margin: 9px 0; font-size: 14.5px; line-height: 1.35; }
  .question-card.is-dense h3 { margin: 6px 0; font-size: 12.5px; line-height: 1.25; }
  .options { gap: 5px; }
  .option { min-height: 37px; padding: 4px 7px; }
  .option-text { font-size: 11.5px; line-height: 1.28; }
  .question-card.is-dense .option-text { font-size: 10.5px; line-height: 1.2; }
  .question-actions { margin-top: auto; padding-top: 8px; }
  .primary-button--compact { min-height: 40px; }
}

@media (max-width: 360px) {
  .result-screen .answer-review { column-gap: 3px; }
  .result-screen .review-item { padding: 4px 0; font-size: 9px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
}