.placement-body { min-height: 100vh; background: #0e071d; }
.placement-navbar { position: relative; }
.placement-page { position: relative; z-index: 1; width: min(780px, calc(100% - 32px)); margin: 0 auto; padding: 70px 0 100px; }
.placement-intro, .placement-card, .placement-result { padding: clamp(28px, 6vw, 54px); border: 1px solid rgba(196,181,253,.2); border-radius: 20px; background: linear-gradient(145deg, rgba(28,13,61,.96), rgba(15,7,35,.96)); box-shadow: 0 28px 80px rgba(0,0,0,.34); }
.placement-kicker { color: #6ee7b7; font: 800 11px 'Sora', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.placement-intro h1, .placement-result h1 { margin: 14px 0; font-size: clamp(34px, 7vw, 58px); }
.placement-intro p, .placement-result p { color: rgba(233,213,255,.68); line-height: 1.7; }
.placement-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.placement-progress { display: grid; gap: 10px; margin-bottom: 32px; color: #c4b5fd; font-weight: 700; }
.placement-progress > div { height: 8px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.08); }
.placement-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#6ee7b7,#8b5cf6); transition: width .25s; }
.placement-card fieldset { display: grid; gap: 12px; padding: 0; border: 0; }
.placement-card legend { margin-bottom: 22px; font: 700 clamp(20px,4vw,28px) 'Sora', sans-serif; line-height: 1.35; }
.placement-option { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid rgba(196,181,253,.16); border-radius: 12px; color: #ede9fe; background: rgba(255,255,255,.035); cursor: pointer; }
.placement-option:has(input:checked) { border-color: #8b5cf6; background: rgba(124,58,237,.18); }
.placement-option code { white-space: pre-wrap; }
.placement-score { color: #6ee7b7; font: 800 18px 'Sora', sans-serif; }
.hidden { display: none !important; }