/* 羽毛球等级自评：复用蓝鲸羽集的深海氛围，突出问卷可读性。 */
.assessment-page { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 46px 0 82px; }
.assessment-hero { position: relative; display: grid; grid-template-columns: 1.03fr .97fr; gap: 5%; min-height: 392px; align-items: center; overflow: hidden; padding: 46px 52px; border: 1px solid rgba(154,220,238,.18); border-radius: 22px; background: radial-gradient(circle at 82% 22%, rgba(75,190,219,.17), transparent 29%), linear-gradient(135deg, rgba(11,52,82,.9), rgba(5,25,43,.95)); box-shadow: 0 22px 56px rgba(0,11,22,.16), inset 0 1px rgba(255,255,255,.03); }
.assessment-hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.12; background: repeating-linear-gradient(120deg, transparent 0 29px, rgba(177,238,249,.3) 30px 31px, transparent 32px 62px); mask-image: linear-gradient(90deg, transparent 26%, #000 88%); }
.assessment-hero-copy,.assessment-hero-visual { position:relative; z-index:1; }
.assessment-hero h1 { margin: 13px 0 12px; color:var(--ink); font:800 clamp(35px,4.25vw,54px)/1.2 var(--serif); letter-spacing:-.055em; }
.assessment-hero h1 em,.assessment-recommendations h2 em { color:#8bd9ea; font-style:normal; }
.assessment-hero-copy > p:not(.eyebrow) { max-width:500px; margin:0; color:#b1c7ce; font-size:13px; line-height:1.85; }
.assessment-hero-notes { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.assessment-hero-notes span { padding:6px 10px; border:1px solid rgba(168,226,239,.17); border-radius:999px; background:rgba(8,37,58,.38); color:#b8e5ee; font-size:11px; }
.assessment-hero .store-btn { min-height:42px; }
.assessment-hero-visual { height:274px; overflow:hidden; }
.assessment-court { position:absolute; width:278px; height:170px; right:22px; top:44px; border:1px solid rgba(150,224,241,.31); transform:rotate(-11deg) skewX(-10deg); box-shadow:0 0 32px rgba(74,199,225,.12), inset 0 0 30px rgba(88,195,220,.06); }
.assessment-court i { position:absolute; display:block; background:rgba(179,240,248,.25); }
.assessment-court i:nth-child(1),.assessment-court i:nth-child(2) { left:50%; width:1px; height:100%; }.assessment-court i:nth-child(1){transform:translateX(-50%)}.assessment-court i:nth-child(2){left:25%}
.assessment-court i:nth-child(3) { top:50%; width:100%; height:1px; }.assessment-court i:nth-child(4) { top:25%; left:0; width:100%; height:1px; }
.assessment-orbit { position:absolute; border:1px solid rgba(140,219,237,.2); border-radius:50%; }.orbit-one { width:266px; height:266px; right:4px; top:0; }.orbit-two { width:368px; height:368px; right:-58px; top:-48px; border-style:dashed; opacity:.7; }
.assessment-shuttle { position:absolute; right:59px; top:28px; width:76px; height:43px; border:2px solid rgba(214,248,252,.9); border-width:2px 0 2px 2px; border-radius:70% 10% 10% 70%; transform:rotate(-28deg); filter:drop-shadow(0 0 9px rgba(111,218,238,.48)); }.assessment-shuttle::before,.assessment-shuttle::after{content:"";position:absolute;left:21px;width:51px;height:1px;background:rgba(211,247,252,.85);transform-origin:left}.assessment-shuttle::before{top:7px;transform:rotate(18deg)}.assessment-shuttle::after{bottom:7px;transform:rotate(-18deg)}.assessment-shuttle span{position:absolute;left:-12px;top:10px;width:17px;height:18px;border-radius:45% 45% 52% 52%;background:#e4faff;box-shadow:0 0 13px rgba(148,229,244,.75)}
.assessment-reading { position:absolute; z-index:2; left:17px; bottom:23px; display:grid; }.assessment-reading small { color:#78d0e5; font:9px var(--mono); letter-spacing:.16em; }.assessment-reading strong { color:#f0fbfd; font:700 62px/.94 var(--mono); letter-spacing:-.08em; text-shadow:0 0 28px rgba(89,206,232,.18); }.assessment-reading span { color:#809eae; font:9px var(--mono); letter-spacing:.08em; }
.assessment-intro { display:grid; grid-template-columns:.88fr 1.12fr; gap:9%; margin:24px 0; padding:30px 34px; border-left:2px solid #8fe8fb; border-radius:0 16px 16px 0; background:rgba(103,203,225,.055); }.assessment-intro h2,.assessment-topline h2,.assessment-recommendations h2 { margin:12px 0 0; color:var(--ink); font:800 29px/1.25 var(--serif); letter-spacing:-.05em; }.intro-copy { color:#aabfc8; font-size:13px; line-height:1.85; }.intro-copy p { margin:0; }.intro-copy ul { display:grid; gap:7px; padding:0; margin:15px 0 0; list-style:none; }.intro-copy li { position:relative; padding-left:17px; }.intro-copy li::before { content:""; position:absolute; left:0; top:.66em; width:6px; height:6px; border-radius:50%; background:#8fe8fb; box-shadow:0 0 10px rgba(143,232,251,.5); }
.assessment-workspace,.assessment-result { padding:30px; border:1px solid rgba(216,239,246,.14); border-radius:17px; background:rgba(16,57,83,.72); box-shadow:inset 0 1px rgba(255,255,255,.02); }.assessment-topline { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding-bottom:20px; border-bottom:1px solid rgba(216,239,246,.14); }.progress-box { width:min(245px,36%); }.progress-box span { display:block; margin-bottom:8px; color:#9cc7d2; text-align:right; font:11px var(--mono); letter-spacing:.07em; }.progress-track { height:5px; overflow:hidden; border-radius:99px; background:rgba(6,28,46,.7); }.progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5bc6df,#a0ecf8); box-shadow:0 0 14px rgba(103,219,240,.48); transition:width .2s ease; }.assessment-status { min-height:20px; margin:17px 0 6px; color:#9eb5be; font-size:12px; }.assessment-status.is-error { color:#ffbac7; }
.assessment-workspace [hidden],.assessment-result[hidden],.assessment-trend[hidden] { display:none !important; }
.tool-hub { margin:24px 0; padding:30px; border:1px solid rgba(216,239,246,.14); border-radius:17px; background:rgba(16,57,83,.72); }
.tool-hub[hidden] { display:none !important; }.hub-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:20px; }.hub-heading h2 { margin:12px 0 0; color:var(--ink); font:800 29px/1.2 var(--serif); letter-spacing:-.05em; }.hub-heading>p { max-width:370px; margin:0; color:#9fb9c3; font-size:12px; line-height:1.8; }.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.tool-card { display:flex; flex-direction:column; min-height:248px; padding:20px; border:1px solid rgba(216,239,246,.14); border-radius:14px; background:linear-gradient(155deg,rgba(12,54,78,.76),rgba(6,29,47,.46)); }.tool-card.quick { border-color:rgba(143,232,251,.42); background:radial-gradient(circle at 92% 10%,rgba(120,225,242,.17),transparent 32%),linear-gradient(155deg,rgba(18,76,103,.82),rgba(6,29,47,.52)); }.tool-card.style { background:radial-gradient(circle at 92% 8%,rgba(82,183,204,.13),transparent 29%),linear-gradient(155deg,rgba(9,56,78,.8),rgba(6,29,47,.48)); }.tool-card-top { display:flex; justify-content:space-between; align-items:center; }.tool-card-top span { padding:5px 8px; border:1px solid rgba(142,226,242,.24); border-radius:999px; color:#9ae0ee; font:9px var(--mono); letter-spacing:.1em; }.tool-card-top b { color:rgba(167,229,241,.42); font:600 26px var(--mono); }.tool-card h3 { margin:28px 0 7px; color:#f0fcfe; font:800 25px var(--serif); letter-spacing:-.04em; }.tool-card strong { color:#9ee5f2; font-size:12px; }.tool-card p { margin:13px 0 20px; color:#9eb8c2; font-size:12px; line-height:1.75; }.tool-card .store-btn { margin-top:auto; min-height:39px; align-self:flex-start; }.back-to-hub { margin:0 0 15px; padding:0; border:0; background:transparent; color:#8fbdc8; font-size:12px; }.back-to-hub:hover { color:#bff3fa; }.assessment-note { margin:16px 0 0; padding:10px 13px; border-left:2px solid rgba(143,232,251,.75); background:rgba(91,197,220,.06); color:#9db6c0; font-size:12px; line-height:1.75; }.result-caution { margin:15px 0 0; padding:12px 15px; border:1px solid rgba(143,232,251,.2); border-radius:10px; background:rgba(57,142,168,.09); color:#aed4dc; font-size:12px; line-height:1.7; }
.dimension-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:18px; }.dimension-steps button { display:grid; grid-template-columns:auto 1fr; gap:1px 9px; min-height:53px; align-content:center; padding:8px 12px; border:1px solid rgba(216,239,246,.13); border-radius:10px; background:rgba(6,29,47,.3); color:#9bb5bf; text-align:left; }.dimension-steps button.active { border-color:rgba(143,232,251,.65); background:rgba(76,181,210,.14); color:#ecfbfe; }.dimension-steps button.complete:not(.active) { border-color:rgba(120,207,225,.24); }.dimension-steps button > span { grid-row:1 / 3; align-self:center; color:#73cada; font:10px var(--mono); }.dimension-steps button.complete > span::after { content:"✓"; margin-left:3px; }.dimension-steps strong { font-size:12px; }.dimension-steps small { color:#7f9da8; font-size:9px; }
.question-list { display:grid; gap:14px; }.question-card { padding:20px; border:1px solid rgba(216,239,246,.13); border-radius:13px; background:rgba(6,29,47,.35); transition:border-color .18s ease, background .18s ease; }.question-card:focus-within { border-color:rgba(143,232,251,.6); background:rgba(14,55,78,.38); }.question-card.is-missing { border-color:rgba(255,137,158,.72); }.question-card-head { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }.question-card-head > div > small { color:#779da9; font-size:9px; letter-spacing:.08em; }.question-number { flex:0 0 auto; display:grid; width:25px; height:25px; place-items:center; border-radius:50%; background:rgba(113,211,232,.12); color:#9ce4f2; font:10px var(--mono); }.question-card h3 { margin:3px 0 0; color:#e7f7fa; font-size:15px; line-height:1.6; font-weight:650; }.option-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }.assessment-option { position:relative; min-height:62px; cursor:pointer; }.assessment-option input { position:absolute; opacity:0; pointer-events:none; }.assessment-option span { display:flex; height:100%; align-items:center; justify-content:center; gap:7px; padding:8px; border:1px solid rgba(216,239,246,.15); border-radius:9px; background:rgba(7,30,48,.42); color:#9eb6c0; text-align:center; font-size:11px; line-height:1.4; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; }.assessment-option span b { display:grid; flex:0 0 20px; width:20px; height:20px; place-items:center; border-radius:50%; background:rgba(126,212,230,.09); color:#7fcddd; font:9px var(--mono); }.assessment-option:hover span { border-color:rgba(143,232,251,.45); color:#d5f4f8; transform:translateY(-1px); }.assessment-option input:checked + span { border-color:#8fe8fb; background:rgba(74,181,211,.18); color:#ecfbfe; box-shadow:inset 0 0 0 1px rgba(143,232,251,.08),0 0 16px rgba(83,204,234,.08); }.assessment-option input:checked + span b { background:#a7eaf5; color:#0a3048; }.assessment-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; }.assessment-actions .store-btn { min-height:40px; }.assessment-actions .btn-ghost,.result-foot .btn-ghost { min-height:40px; padding:7px 15px; border:1px solid rgba(216,239,246,.22); border-radius:999px; background:rgba(7,30,48,.3); color:#bde8f2; font-size:12px; }.step-actions { display:flex; gap:8px; margin-left:auto; }
.assessment-result { margin-top:24px; }.result-banner { display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center; padding:30px; overflow:hidden; border:1px solid rgba(143,232,251,.18); border-radius:14px; background:radial-gradient(circle at 90% 15%,rgba(90,207,230,.16),transparent 31%),rgba(7,35,54,.56); }.level-chip { display:inline-block; margin-top:12px; padding:5px 9px; border:1px solid rgba(143,232,251,.35); border-radius:99px; color:#aeeaf4; font-size:11px; }.result-banner h2 { margin:9px 0; color:#eefcff; font:800 39px/1.15 var(--serif); letter-spacing:-.06em; }.result-banner p { max-width:620px; margin:0; color:#a8c0c9; font-size:13px; line-height:1.8; }.score-orb { display:grid; min-width:152px; min-height:152px; place-content:center; text-align:center; border:1px solid rgba(143,232,251,.3); border-radius:50%; background:rgba(11,61,85,.45); box-shadow:0 0 45px rgba(71,191,221,.1),inset 0 0 30px rgba(71,191,221,.06); }.score-orb small,.score-orb span { color:#9fb7c1; font-size:10px; }.score-orb strong { color:#b7f1f9; font:700 47px/.9 var(--mono); letter-spacing:-.08em; }
.assessment-profile-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:12px; margin:20px 0; }.ability-map { min-height:250px; padding:17px; border:1px solid rgba(216,239,246,.13); border-radius:12px; background:rgba(7,30,48,.35); }.ability-map-head { display:flex; justify-content:space-between; gap:12px; }.ability-map-head div { display:grid; }.ability-map-head small,.ability-map-head span { color:#84a2ad; font-size:9px; }.ability-map-head strong { margin-top:4px; color:#e3f7fa; font-size:13px; }.ability-map svg { display:block; width:100%; height:205px; overflow:visible; }.radar-grid polygon,.radar-grid line { fill:none; stroke:rgba(150,220,235,.19); stroke-width:1; }.radar-value { fill:rgba(99,210,232,.2); stroke:#92e5f3; stroke-width:2; filter:drop-shadow(0 0 8px rgba(77,199,225,.26)); }.ability-map text { fill:#8fb1bc; font:9px var(--mono); }.dimension-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0; }.dimension-card { padding:17px; border:1px solid rgba(216,239,246,.13); border-radius:12px; background:rgba(7,30,48,.35); }.dimension-card.is-focus { border-color:rgba(143,232,251,.4); background:rgba(35,107,134,.22); }.dimension-card .dimension-top { display:flex; justify-content:space-between; gap:8px; color:#a9c1ca; font-size:12px; }.dimension-card strong { color:#b6f0f8; font:700 22px var(--mono); }.dimension-card .dimension-track { height:5px; margin-top:14px; overflow:hidden; border-radius:99px; background:rgba(5,24,41,.7); }.dimension-card .dimension-track i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#59bfda,#9beafa); }.dimension-card small { display:block; margin-top:8px; color:#91aab4; font-size:11px; }.assessment-trend { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:-5px 0 20px; padding:14px 17px; border:1px solid rgba(216,239,246,.13); border-radius:11px; background:rgba(5,27,45,.35); }.assessment-trend div { display:flex; align-items:baseline; gap:9px; }.assessment-trend small,.assessment-trend p { margin:0; color:#88a6b1; font-size:10px; }.assessment-trend strong { color:#9ee7f3; font:700 18px var(--mono); }.assessment-trend strong.down { color:#ffd29c; }
.assessment-recommendations { display:grid; grid-template-columns:.85fr 1.15fr; gap:9%; padding:30px; border-left:2px solid #8fe8fb; border-radius:0 13px 13px 0; background:rgba(104,205,225,.055); }.assessment-recommendations ol { display:grid; gap:12px; padding:0; margin:0; list-style:none; counter-reset:focus; }.assessment-recommendations li { position:relative; padding:0 0 12px 36px; border-bottom:1px solid rgba(216,239,246,.12); color:#b6cbd3; font-size:13px; line-height:1.75; counter-increment:focus; }.assessment-recommendations li::before { content:"0" counter(focus); position:absolute; left:0; top:1px; color:#8de0f0; font:11px var(--mono); }.assessment-recommendations li:last-child { border-bottom:0; padding-bottom:0; }.result-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:20px; color:#91aab4; font-size:12px; line-height:1.65; }.result-foot p { max-width:650px; margin:0; }.result-foot div { display:flex; gap:9px; white-space:nowrap; }
.page-entry { animation:assessment-enter .32s ease-out both; } @keyframes assessment-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (max-width:980px) { .option-list { grid-template-columns:repeat(2,1fr); }.assessment-option:last-child { grid-column:1 / -1; }.assessment-profile-grid { grid-template-columns:1fr; }.ability-map { min-height:220px; }.ability-map svg { height:180px; } }
@media (max-width:820px) { .assessment-page { width:min(100% - 32px,1180px); padding:28px 0 52px; }.assessment-hero { grid-template-columns:1fr; min-height:0; gap:12px; padding:29px 22px 23px; border-radius:20px; }.assessment-hero-visual { order:-1; height:188px; border-radius:15px; background:rgba(5,27,45,.2); }.assessment-court { width:215px; height:131px; right:18px; top:31px; }.orbit-one{width:203px;height:203px;right:-3px;top:3px}.orbit-two{width:285px;height:285px;right:-43px;top:-43px}.assessment-shuttle{right:39px;top:28px;transform:scale(.75) rotate(-28deg)}.assessment-reading{left:16px;bottom:16px}.assessment-reading strong{font-size:46px}.assessment-hero h1{font-size:clamp(34px,9vw,45px)}.assessment-hero-copy > p:not(.eyebrow){font-size:12px}.assessment-intro,.assessment-recommendations { grid-template-columns:1fr; gap:18px; padding:23px 20px; }.assessment-workspace,.assessment-result { padding:19px; border-radius:15px; }.assessment-topline { align-items:flex-start; }.assessment-topline h2,.assessment-intro h2,.assessment-recommendations h2 { font-size:25px; }.progress-box { width:130px; flex:0 0 130px; }.result-banner { grid-template-columns:1fr; padding:22px; }.score-orb { width:130px; min-width:130px; min-height:130px; }.result-banner h2 { font-size:35px; }.result-foot { display:block; }.result-foot div { margin-top:14px; }.assessment-result { margin-top:18px; } }
@media (max-width:820px) { .tool-hub { padding:20px; border-radius:15px; }.hub-heading { display:block; }.hub-heading>p { margin-top:12px; }.tool-grid { grid-template-columns:1fr; }.tool-card { min-height:0; }.tool-card h3 { margin-top:20px; } }
@media (max-width:540px) { .assessment-page { width:calc(100% - 24px); }.assessment-hero { padding-inline:18px; }.assessment-topline { display:block; }.progress-box { width:100%; margin-top:15px; }.dimension-steps { position:sticky; top:6px; z-index:10; gap:3px; padding:4px; border:1px solid rgba(193,232,241,.16); border-radius:12px; background:rgba(5,29,47,.92); backdrop-filter:blur(14px); }.dimension-steps button { display:flex; min-height:42px; justify-content:center; align-items:center; padding:5px; text-align:center; }.dimension-steps button > span,.dimension-steps small { display:none; }.dimension-steps strong { font-size:11px; }.option-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.assessment-option { min-height:52px; }.assessment-option:last-child { grid-column:1 / -1; }.assessment-option span { justify-content:flex-start; padding:9px 8px; text-align:left; font-size:10px; }.question-card { padding:15px; }.question-card h3 { font-size:14px; }.assessment-actions { display:grid; grid-template-columns:1fr; }.step-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; margin-left:0; }.step-actions > :only-child,.step-actions #submitAssessment { grid-column:1 / -1; }.assessment-actions .store-btn,.assessment-actions .btn-ghost { width:100%; }.dimension-grid { grid-template-columns:1fr; }.dimension-card { padding:14px; }.assessment-profile-grid { margin-top:14px; }.ability-map { min-height:210px; }.ability-map svg { height:170px; }.assessment-trend { display:block; }.assessment-trend p { margin-top:7px; }.result-banner { padding:19px; }.result-foot div { display:grid; grid-template-columns:1fr; }.result-foot .store-btn,.result-foot .btn-ghost { width:100%; }.assessment-hero-notes { margin:18px 0; } }
@media (max-width:540px) { .tool-hub { margin:16px 0; padding:17px; }.hub-heading h2 { font-size:25px; }.tool-card { padding:17px; }.tool-card h3 { font-size:23px; }.option-count-3 { grid-template-columns:1fr !important; }.option-count-3 .assessment-option:last-child { grid-column:auto; } }
@media (prefers-reduced-motion:reduce) { .page-entry { animation:none; }.assessment-option span { transition:none; } }