*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --purple-900:#3B0764;--purple-700:#6D28D9;--purple-500:#8B5CF6;--purple-400:#A78BFA;--purple-300:#C4B5FD;--purple-100:#EDE9FE;--purple-50:#FAF5FF;
    --white:#FFFFFF;--gray-50:#F8FAFC;--gray-100:#F1F5F9;--gray-200:#E2E8F0;--gray-400:#94A3B8;--gray-600:#475569;--gray-900:#0F172A;
    --radius:14px;--shadow:0 4px 24px rgba(109,40,217,0.08)
}
html{background:var(--white)}
body{font-family:'Inter',sans-serif;font-size:16px;line-height:1.6;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px 16px;
    background:linear-gradient(160deg,var(--gray-50) 0%,var(--purple-50) 100%)}
.app{width:100%;max-width:460px;position:relative}
.app::before,.app::after{content:'';position:fixed;border-radius:50%;pointer-events:none;opacity:.08;filter:blur(60px)}
.app::before{width:300px;height:300px;background:var(--purple-500);top:-80px;right:-60px;animation:float 8s ease-in-out infinite}
.app::after{width:200px;height:200px;background:var(--purple-300);bottom:40px;left:-40px;animation:float 6s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.header{text-align:center;margin-bottom:28px}
.header h1{font-size:28px;font-weight:700;color:var(--gray-900);letter-spacing:-0.02em}
.header h1 span{color:var(--purple-500)}
.header p{font-size:14px;color:var(--gray-400);margin-top:6px;font-weight:300}
.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:28px;margin-bottom:16px;box-shadow:var(--shadow)}
.btn{display:block;width:100%;padding:15px;border:none;border-radius:var(--radius);font:600 15px 'Inter',sans-serif;cursor:pointer;transition:all .2s;letter-spacing:-0.01em}
.btn-gold,.btn-primary{background:linear-gradient(135deg,var(--purple-700),var(--purple-500));color:var(--white);box-shadow:0 4px 16px rgba(139,92,246,0.3)}
.btn-gold:hover,.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(139,92,246,0.4)}
.btn-outline{background:transparent;border:1px solid var(--gray-200);color:var(--gray-600)}
.btn-outline:hover{background:var(--purple-50);border-color:var(--purple-300)}
.progress{height:4px;background:var(--gray-200);border-radius:2px;margin-bottom:24px;overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--purple-700),var(--purple-400));transition:width .4s ease;border-radius:2px}
.q-counter{font-size:11px;color:var(--purple-500);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.q-text{font-size:18px;font-weight:500;margin-bottom:24px;min-height:54px;color:var(--gray-900);line-height:1.5}
.options{display:flex;flex-direction:column;gap:8px}
.opt{padding:13px 16px;border:1px solid var(--gray-200);border-radius:10px;cursor:pointer;font-size:14px;transition:all .15s;display:flex;align-items:center;gap:12px;color:var(--gray-600);background:var(--white)}
.opt:hover{border-color:var(--purple-400);background:var(--purple-50)}
.opt.selected{border-color:var(--purple-500);background:var(--purple-100);color:var(--gray-900);font-weight:500}
.opt-num{width:26px;height:26px;border-radius:50%;background:var(--gray-100);border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;color:var(--gray-400)}
.opt.selected .opt-num{background:var(--purple-500);border-color:var(--purple-500);color:var(--white)}
.nav{display:flex;gap:10px;margin-top:20px}
.nav .btn{flex:1}
.hidden{display:none}
.results{text-align:center}
.dim-grid{display:grid;gap:8px;text-align:left;margin:20px 0}
.dim-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:10px;background:var(--gray-50);border:1px solid var(--gray-200)}
.dim-name{font-size:13px;font-weight:400;color:var(--gray-600)}
.dim-badge{font-size:10px;font-weight:700;padding:4px 10px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}
.dim-badge.low{background:rgba(34,197,94,0.1);color:#16A34A}
.dim-badge.medium{background:rgba(234,179,8,0.1);color:#CA8A04}
.dim-badge.high{background:rgba(239,68,68,0.1);color:#DC2626}
.dim-badge.critical{background:rgba(220,38,38,0.15);color:#B91C1C}
.overall{font-size:52px;font-weight:700;margin:12px 0;letter-spacing:-0.03em}
.overall.low{color:#16A34A}.overall.medium{color:#CA8A04}.overall.high{color:#DC2626}.overall.critical{color:#B91C1C}
.score-sub{font-size:14px;color:var(--gray-400);font-weight:300}
.footer{text-align:center;margin-top:28px;font-size:11px;color:var(--gray-400)}
.footer a{color:var(--purple-500);text-decoration:none}
.features{display:grid;gap:16px;margin:20px 0}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat-icon{width:36px;height:36px;border-radius:10px;background:var(--purple-100);border:1px solid var(--purple-300);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.feat-text{font-size:13px;color:var(--gray-600);line-height:1.4}
.feat-text strong{display:block;font-size:14px;color:var(--gray-900);font-weight:500;margin-bottom:2px}
.badge-nr1{display:inline-flex;align-items:center;gap:6px;background:var(--purple-100);border:1px solid var(--purple-300);border-radius:20px;padding:5px 12px;font-size:11px;color:var(--purple-700);font-weight:600;margin-bottom:16px;letter-spacing:.02em}