
:root{color-scheme:light}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#0f172a;background:#fff}
.container{max-width:1180px;margin:0 auto;padding:28px 20px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer;text-decoration:none}
.btn:focus{outline:3px solid #cbd5e1;outline-offset:2px}
.btn-primary{background:#0f172a;color:#fff}
.btn-ghost{background:#f1f5f9;color:#0f172a;border:1px solid #e5e7eb}
.btn-green{background:#10b981;color:#052e16}
.btn-blue{background:#60a5fa;color:#0b2545}
.btn-rose{background:#fda4af;color:#4a041e}
.muted{color:#475569}
.header{display:grid;grid-template-columns:520px 1fr;gap:28px;align-items:center;margin-bottom:18px}
.header .name{font-size:72px;font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0}
.header .role{font-size:22px;color:#334155;margin:8px 0 14px}
.header .headline{font-size:56px;font-weight:900;line-height:1.05;margin:0 0 8px}
.header .sub{font-size:20px;max-width:720px}
.q{border:1px solid #e5e7eb;border-radius:14px;padding:14px}
.q h3{margin:0 0 8px;font-size:18px}
.optrow3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opt{border:1px solid #cbd5e1;padding:12px;border-radius:10px;text-align:center;cursor:pointer;user-select:none}
.opt.selected{border-color:#0f172a;background:#0f172a;color:#fff}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.k{border:1px solid #e5e7eb;border-radius:12px;padding:12px}
.k .label{font-size:12px;color:#64748b}
.k .value{font-size:22px;font-weight:800}
.score-circle{width:150px;height:150px;border-radius:50%;border:10px solid #0f172a;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:40px}
.footer{margin-top:28px;font-size:12px;color:#94a3b8}
.hidden{display:none!important}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.header-actions{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 0}
.video-title{font-weight:900;font-size:22px;margin:0 0 10px}
@media(max-width:1100px){.header{grid-template-columns:1fr}}
