:root{
  color-scheme:dark;
  --bg:#070b14;--panel:#111827;--panel2:#172033;--line:#2b3852;
  --text:#f8fafc;--muted:#a9b4c8;--accent:#60a5fa;--accent2:#a78bfa;
  --good:#34d399;--danger:#fb7185;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top,#18223a 0,#070b14 45%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
button,input,textarea{font:inherit}
button{cursor:pointer}
.app-header{max-width:980px;margin:auto;padding:24px 18px 8px;display:flex;align-items:center;justify-content:space-between;gap:16px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(1.7rem,6vw,2.5rem);margin-bottom:0}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-size:.72rem;font-weight:800;margin-bottom:6px}
main{max-width:980px;margin:auto;padding:18px}
.card{background:linear-gradient(180deg,rgba(23,32,51,.98),rgba(13,20,34,.98));border:1px solid var(--line);border-radius:22px;padding:clamp(18px,5vw,34px);box-shadow:0 18px 60px rgba(0,0,0,.28);margin-bottom:18px}
.center{text-align:center}
.hero{padding:38px 24px}
.hero h2{font-size:clamp(2rem,8vw,4rem);line-height:1.02;margin-bottom:14px}
.muted{color:var(--muted)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
button,.button{border:0;border-radius:14px;padding:14px 18px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#07101e;min-height:48px}
button.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
button.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
button:disabled{opacity:.45;cursor:not-allowed}
.hidden{display:none!important}
label{display:block;font-weight:700;margin:16px 0 8px}
input,textarea{width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);background:#0a1020;color:var(--text)}
textarea{min-height:90px;resize:vertical}
.progress-shell{height:10px;background:#0a1020;border-radius:999px;overflow:hidden;margin-bottom:18px}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s ease}
.question-meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.9rem}
.question{font-size:clamp(1.35rem,5vw,2rem);line-height:1.25;margin:20px 0}
.options{display:grid;gap:10px}
.option{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;background:#0c1425;color:var(--text);border:1px solid var(--line);font-weight:600}
.option:hover,.option.selected{border-color:var(--accent);background:#14213a}
.option-letter{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:9px;background:#243454;color:#cfe3ff}
.nav-row{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.result-name{font-size:clamp(3rem,14vw,6.5rem);line-height:.9;margin-bottom:14px;background:linear-gradient(135deg,#fff,#8ec5ff,#d6b5ff);-webkit-background-clip:text;color:transparent}
.pill-row{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.pill{background:#0c1425;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:#d7e4f7}
.match-grid{display:grid;gap:12px}
.match{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:15px;border-radius:15px;background:#0c1425;border:1px solid var(--line)}
.rank{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#233555;font-weight:900}
.score{font-weight:900;color:var(--good)}
.traits{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.trait{background:#0c1425;border:1px solid var(--line);border-radius:13px;padding:12px}
.trait-top{display:flex;justify-content:space-between;gap:8px}
.trait-track{height:7px;border-radius:99px;background:#222d43;margin-top:8px;overflow:hidden}
.trait-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.history-item{display:grid;grid-template-columns:1fr auto;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.history-item:last-child{border-bottom:0}
.history-actions{display:flex;align-items:center;gap:8px}
.small{padding:9px 11px;min-height:38px;font-size:.85rem}
.danger{background:transparent;color:var(--danger);border:1px solid #633044}
.notice{padding:13px;border-radius:12px;background:#10213a;border:1px solid #244d7d;color:#d6e9ff}
.spinner{width:54px;height:54px;border:5px solid #26344e;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 20px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:560px){.app-header{align-items:flex-start}.nav-row button{flex:1}.history-item{grid-template-columns:1fr}.history-actions{justify-content:flex-start}}