.placement-page { --placement-accent: var(--color-primary, #c9a24a); }
.placement-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; }
.placement-metric { padding:1.15rem; border:1px solid var(--color-border-soft,#e8dfce); border-radius:18px; background:var(--color-surface-elevated,#fff); }
.placement-metric i { color:var(--placement-accent); font-size:1.15rem; }
.placement-metric strong { display:block; margin-top:.6rem; font-size:1.55rem; color:var(--color-heading,#221f1a); }
.placement-toolbar { display:flex; flex-wrap:wrap; gap:.75rem; align-items:end; margin-bottom:1rem; }
.placement-toolbar > * { min-width:150px; flex:1 1 160px; }
.placement-hierarchy { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.placement-list-panel { min-height:320px; padding:1rem; border:1px solid var(--color-border-soft,#e8dfce); border-radius:18px; background:var(--color-surface-elevated,#fff); }
.placement-list-item { width:100%; display:flex; justify-content:space-between; gap:.75rem; padding:.75rem; margin-bottom:.45rem; border:1px solid transparent; border-radius:12px; color:var(--color-text,#38342d); background:transparent; text-align:start; }
.placement-list-item:hover,.placement-list-item.active { border-color:color-mix(in srgb,var(--placement-accent) 45%,transparent); background:color-mix(in srgb,var(--placement-accent) 10%,transparent); }
.placement-review-flag { color:#a76118; font-weight:700; }
.placement-code-result { margin-top:1rem; padding:1rem; border:1px solid color-mix(in srgb,var(--placement-accent) 45%,transparent); border-radius:16px; background:color-mix(in srgb,var(--placement-accent) 9%,var(--color-surface-elevated,#fff)); }
.placement-code-value { font-size:1.55rem; font-weight:800; letter-spacing:.12em; }
.placement-kiosk-shell { min-height:100dvh; color:var(--color-text,#302c25); background:radial-gradient(circle at 15% 5%,rgba(201,162,74,.16),transparent 30%),var(--color-body,#fcfaf6); }
.placement-kiosk { min-height:100dvh; display:flex; flex-direction:column; }
.placement-kiosk-entry { width:min(560px,calc(100% - 2rem)); margin:auto; padding:clamp(1.5rem,4vw,3rem); text-align:center; border:1px solid var(--color-border-soft,#e8dfce); border-radius:30px; background:var(--color-surface-elevated,#fff); box-shadow:0 24px 70px rgba(35,31,24,.12); }
.placement-kiosk-logo { width:150px; max-height:96px; object-fit:contain; margin-bottom:1.25rem; }
.placement-test-top { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.8rem clamp(1rem,3vw,2rem); border-bottom:1px solid var(--color-border-soft,#e8dfce); background:color-mix(in srgb,var(--color-surface-elevated,#fff) 92%,transparent); backdrop-filter:blur(14px); }
.placement-timer { font-weight:800; font-variant-numeric:tabular-nums; color:var(--placement-accent,#c9a24a); }
.placement-progress { height:6px; background:var(--color-border-soft,#e8dfce); }
.placement-progress > span { display:block; height:100%; background:var(--placement-accent,#c9a24a); transition:width .25s ease; }
.placement-question-wrap { flex:1; width:min(920px,calc(100% - 2rem)); margin:1.5rem auto; display:flex; align-items:center; }
.placement-question-card { width:100%; padding:clamp(1.2rem,3vw,2.3rem); border:1px solid var(--color-border-soft,#e8dfce); border-radius:26px; background:var(--color-surface-elevated,#fff); box-shadow:0 18px 54px rgba(35,31,24,.08); }
.placement-question-media { display:block; width:min(100%,540px); max-height:340px; margin:1rem auto; object-fit:contain; border-radius:20px; background:#fff; }
.placement-passage { margin:1rem 0; padding:1rem; border-inline-start:4px solid var(--placement-accent,#c9a24a); border-radius:12px; white-space:pre-line; background:color-mix(in srgb,var(--placement-accent,#c9a24a) 7%,var(--color-surface,#f7f3eb)); }
.placement-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:1.25rem; }
.placement-option { min-height:58px; padding:.8rem; border:1px solid var(--color-border-soft,#e8dfce); border-radius:16px; color:var(--color-text,#302c25); background:var(--color-surface,#faf7f1); text-align:center; }
.placement-option.selected { border-color:var(--placement-accent,#c9a24a); box-shadow:0 0 0 3px color-mix(in srgb,var(--placement-accent,#c9a24a) 18%,transparent); }
.placement-option img { display:block; width:100%; height:130px; object-fit:contain; margin-bottom:.5rem; border-radius:12px; background:#fff; }
.placement-answer-actions { display:flex; justify-content:space-between; gap:1rem; margin-top:1.25rem; }
.placement-result-card { border:1px solid var(--color-border-soft,#e8dfce); border-radius:20px; padding:1.2rem; background:var(--color-surface-elevated,#fff); }
.placement-review-answer { padding:1rem; margin-bottom:1rem; border:1px solid var(--color-border-soft,#e8dfce); border-radius:16px; }
html[data-theme="navy"] .placement-metric,html[data-theme="navy"] .placement-list-panel,html[data-theme="navy"] .placement-question-card,html[data-theme="navy"] .placement-kiosk-entry,html[data-theme="navy"] .placement-result-card { background:var(--color-surface-elevated,#182234); color:var(--color-text,#f4efe6); }
@media (max-width:991.98px){.placement-hierarchy{grid-template-columns:1fr}.placement-list-panel{min-height:auto}.placement-question-wrap{align-items:flex-start}.placement-options{grid-template-columns:1fr 1fr}}
@media (max-width:575.98px){.placement-options{grid-template-columns:1fr}.placement-test-top{align-items:flex-start}.placement-question-wrap{width:calc(100% - 1rem);margin:.5rem auto}.placement-question-card{border-radius:18px}.placement-answer-actions{flex-direction:column}.placement-answer-actions .app-btn{width:100%}}