:root{--primary:#7C3AED;--primary-dark:#6D28D9;--primary-light:#EDE9FE;--accent:#F59E0B;--bg:#F3F0FF;--bg-card:#FFFFFF;--text:#111827;--text-muted:#6B7280;--border:#E5E7EB;--radius:16px;--shadow:0 4px 24px rgba(124,58,237,.08),0 1px 4px rgba(0,0,0,.06);--max-w:660px;--transition:0.2s ease}
[data-theme="dark"]{--bg:#0d0d1a;--bg-card:#1a1a2e;--text:#f1f5f9;--text-muted:#94a3b8;--border:#2d2d4a;--primary-light:#2d1b69;--shadow:0 4px 24px rgba(0,0,0,.4)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:"Inter",sans-serif;background:var(--bg);color:var(--text);line-height:1.6;transition:background var(--transition),color var(--transition);min-height:100vh}
a{color:inherit;text-decoration:none}
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:background var(--transition)}
[data-theme="dark"] header{background:rgba(26,26,46,.85)}
.header-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:var(--primary);letter-spacing:-0.5px}
.logo-icon{width:28px;height:28px;background:linear-gradient(135deg,#7C3AED,#9f67fa);border-radius:7px;display:flex;align-items:center;justify-content:center;color:white;font-size:14px}
.header-actions{display:flex;align-items:center;gap:8px}
.btn-icon{background:none;border:1px solid var(--border);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all var(--transition)}
.btn-icon:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}
.lang-switcher{position:relative}
.lang-btn{background:none;border:1px solid var(--border);border-radius:8px;padding:0 12px;height:34px;cursor:pointer;font-family:"Inter",sans-serif;font-size:13px;font-weight:600;color:var(--text-muted);display:flex;align-items:center;gap:4px;transition:all var(--transition);white-space:nowrap}
.lang-btn:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}
.lang-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:200}
.lang-dropdown.open{display:block}
.lang-option{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:500;color:var(--text);transition:background var(--transition)}
.lang-option:hover{background:var(--primary-light);color:var(--primary)}
.lang-option.active{color:var(--primary);font-weight:700}
.main{max-width:var(--max-w);margin:0 auto;padding:32px 20px 120px}
.view{display:none}.view.active{display:block;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.intro-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.intro-card-top{padding:40px 32px;text-align:center;position:relative;overflow:hidden}
.intro-card-top::before{content:"";position:absolute;top:-40px;right:-40px;width:180px;height:180px;background:rgba(255,255,255,.08);border-radius:50%}
.intro-emoji{font-size:56px;display:block;margin-bottom:16px;position:relative;z-index:1}
.intro-card-top h1{font-size:clamp(22px,4vw,30px);font-weight:800;color:white;letter-spacing:-0.5px;line-height:1.2;margin-bottom:8px;position:relative;z-index:1}
.intro-card-top p{color:rgba(255,255,255,.85);font-size:15px;line-height:1.6;max-width:420px;margin:0 auto;position:relative;z-index:1}
.intro-card-body{padding:28px}
.intro-meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.meta-pill{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--text-muted)}
.ad-slot-top{background:var(--bg);border:1px dashed var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:11px;min-height:80px;margin-bottom:20px}
.intro-profiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.profile-preview{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:11px 13px;display:flex;gap:8px;align-items:flex-start;transition:all var(--transition)}
.profile-preview:hover{border-color:var(--primary);background:var(--primary-light)}
.profile-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:4px}
.profile-preview h4{font-size:12px;font-weight:700;margin-bottom:1px}
.profile-preview p{font-size:11px;color:var(--text-muted);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.question-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.test-name-header{padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
.test-name{font-size:12px;font-weight:700;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:1px}
.q-fraction{font-size:12px;font-weight:600;color:rgba(255,255,255,.75)}
.progress-section{padding:20px 24px 4px}
.progress-bar-wrap{border-radius:999px;height:8px;overflow:hidden}
[data-theme="dark"] .progress-bar-wrap{background:rgba(255,255,255,.1)!important}
.progress-bar-fill{height:100%;border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.progress-pct{font-size:11px;font-weight:700;text-align:right;margin-top:4px}
.question-body{padding:28px 24px 24px}
.question-text{font-size:clamp(16px,2.5vw,20px);font-weight:700;line-height:1.45;letter-spacing:-0.3px;margin-bottom:24px;text-align:center}
.q-subtitle{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);text-align:center;margin-bottom:20px}
.options-grid{display:flex;flex-direction:column;gap:10px}
.option-btn{width:100%;text-align:left;background:var(--bg);border:2px solid var(--border);border-radius:12px;padding:14px 18px;font-family:"Inter",sans-serif;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;transition:all .25s ease;display:flex;align-items:center;gap:14px;line-height:1.5;position:relative;overflow:hidden}
.option-btn:not(.selected):not(.dimmed):hover{border-color:rgba(124,58,237,.3);background:var(--bg-card);transform:translateX(3px)}
.option-btn.dimmed{opacity:.32;filter:grayscale(.8);cursor:pointer}
.opt-letter{width:30px;height:30px;border-radius:8px;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .25s ease}
.opt-a{background:#EDE9FE;color:#6D28D9;border:1.5px solid #c4b5fd}
.opt-b{background:#FEF3C7;color:#B45309;border:1.5px solid #fcd34d}
.opt-c{background:#DBEAFE;color:#1D4ED8;border:1.5px solid #93c5fd}
.opt-d{background:#D1FAE5;color:#065F46;border:1.5px solid #6ee7b7}
.option-btn.selected.sel-a{background:#F5F3FF;border-color:#7C3AED}
.option-btn.selected.sel-a .opt-a{background:#7C3AED;color:white}
.option-btn.selected.sel-a::after{content:"✓";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:15px;font-weight:900;color:#7C3AED}
.option-btn.selected.sel-b{background:#FFFBEB;border-color:#D97706}
.option-btn.selected.sel-b .opt-b{background:#D97706;color:white}
.option-btn.selected.sel-b::after{content:"✓";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:15px;font-weight:900;color:#D97706}
.option-btn.selected.sel-c{background:#EFF6FF;border-color:#2563EB}
.option-btn.selected.sel-c .opt-c{background:#2563EB;color:white}
.option-btn.selected.sel-c::after{content:"✓";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:15px;font-weight:900;color:#2563EB}
.option-btn.selected.sel-d{background:#F0FDF4;border-color:#059669}
.option-btn.selected.sel-d .opt-d{background:#059669;color:white}
.option-btn.selected.sel-d::after{content:"✓";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:15px;font-weight:900;color:#059669}
.likert-btn{width:100%;text-align:left;background:var(--bg);border:2px solid var(--border);border-radius:10px;padding:13px 18px;font-family:"Inter",sans-serif;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;transition:all .2s ease;position:relative}
.likert-btn:hover{border-color:var(--primary);background:var(--primary-light)}
.likert-btn.selected{border-color:var(--primary);background:var(--primary-light);font-weight:700}
.likert-btn.selected::after{content:"✓";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:900;color:var(--primary)}
.nav-btns{padding:0 24px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.btn-prev{background:none;border:1.5px solid var(--border);border-radius:10px;padding:10px 20px;font-family:"Inter",sans-serif;font-size:14px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all var(--transition)}
.btn-prev:disabled{opacity:.3;cursor:not-allowed}
.btn-next{color:white;border:none;border-radius:10px;padding:12px 28px;font-family:"Inter",sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all var(--transition);margin-left:auto}
.btn-next:hover:not(:disabled){transform:translateY(-1px)}
.btn-next:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.q-out-l{animation:qOL .22s ease forwards}.q-out-r{animation:qOR .22s ease forwards}.q-in-r{animation:qIR .28s ease forwards}.q-in-l{animation:qIL .28s ease forwards}
@keyframes qOL{to{opacity:0;transform:translateX(-40px)}}@keyframes qOR{to{opacity:0;transform:translateX(40px)}}@keyframes qIR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}@keyframes qIL{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
.result-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:20px}
.result-top{padding:40px 32px;text-align:center;position:relative;overflow:hidden}
.result-top::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) 1px,transparent 0,transparent 50%);background-size:10px 10px;pointer-events:none}
.result-badge{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;padding:5px 14px;border-radius:999px;margin-bottom:10px}
.result-emoji-large{font-size:52px;display:block;margin-bottom:10px;line-height:1}
.result-name{font-size:clamp(30px,5vw,48px);font-weight:800;letter-spacing:-1.5px;line-height:1;margin-bottom:8px}
.result-tagline{font-size:16px;color:var(--text-muted);font-weight:500;max-width:420px;margin:0 auto 24px}
.score-wrap{background:var(--bg);border-radius:12px;padding:20px;margin:0 28px 28px}
.score-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}.score-row:last-child{margin-bottom:0}
.score-label{font-size:11px;font-weight:700;width:130px;flex-shrink:0}
.score-track{flex:1;background:var(--border);border-radius:999px;height:7px;overflow:hidden}
.score-fill{height:100%;border-radius:999px;transition:width 1s ease .4s}
.score-pct{font-size:11px;font-weight:800;width:34px;text-align:right;flex-shrink:0}
.score-bar-wrap{background:var(--border);border-radius:999px;height:12px;margin:14px 0 8px;overflow:hidden}
.score-bar-fill{height:100%;border-radius:999px;transition:width 1.2s ease .4s}
.score-ranges{display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);font-weight:600}
.result-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin-bottom:16px;box-shadow:var(--shadow)}
.result-section-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.result-section-header h2{font-size:18px;font-weight:800;letter-spacing:-0.3px;margin:0}
.result-section p{color:var(--text-muted);line-height:1.8;margin-bottom:14px;font-size:15px}.result-section p:last-child{margin-bottom:0}
.key-insight{background:var(--primary-light);border-left:4px solid var(--primary);border-radius:0 10px 10px 0;padding:14px 18px;margin:16px 0;font-size:14px;font-weight:600;color:var(--primary);line-height:1.6}
[data-theme="dark"] .key-insight{background:rgba(124,58,237,.15);color:#a78bfa}
.traits-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow)}
.traits-section-header{background:var(--bg);padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.traits-section-header h2{font-size:17px;font-weight:800;letter-spacing:-0.3px;margin:0}
.traits-body{display:grid;grid-template-columns:1fr 1fr}
.traits-col{padding:20px 24px}.traits-col:first-child{border-right:1px solid var(--border)}
.traits-col h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.trait-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:13px;line-height:1.5}
.trait-icon{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;margin-top:1px}
.result-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.result-ctas-secondary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.btn-pdf{display:flex;align-items:center;justify-content:center;gap:8px;background:#059669;color:white;border:none;font-family:"Inter",sans-serif;font-size:15px;font-weight:700;padding:15px 20px;border-radius:12px;cursor:pointer;transition:all var(--transition);width:100%;box-shadow:0 4px 12px rgba(5,150,105,.3);margin-bottom:10px}
.btn-pdf:hover{background:#047857;transform:translateY(-1px)}
.btn-share{display:flex;align-items:center;gap:8px;color:white;border:none;font-family:"Inter",sans-serif;font-size:14px;font-weight:700;padding:13px 20px;border-radius:12px;cursor:pointer;transition:all var(--transition);flex:1;justify-content:center}
.btn-share:hover{transform:translateY(-1px)}
.btn-retake{display:flex;align-items:center;gap:8px;background:var(--bg-card);color:var(--text);border:1.5px solid var(--border);font-family:"Inter",sans-serif;font-size:14px;font-weight:600;padding:13px 20px;border-radius:12px;cursor:pointer;transition:all var(--transition);flex:1;justify-content:center}
.btn-retake:hover{border-color:var(--primary);color:var(--primary)}
.newsletter-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;text-align:center;box-shadow:var(--shadow)}
.newsletter-box .nl-icon{font-size:36px;margin-bottom:10px}.newsletter-box h3{font-size:20px;font-weight:800;margin-bottom:8px}.newsletter-box p{font-size:14px;color:var(--text-muted);margin-bottom:20px}
.nl-form{display:flex;gap:8px;max-width:400px;margin:0 auto}
.nl-input{flex:1;padding:12px 16px;border:1.5px solid var(--border);border-radius:10px;font-family:"Inter",sans-serif;font-size:14px;background:var(--bg);color:var(--text);outline:none;transition:border-color var(--transition)}.nl-input:focus{border-color:var(--primary)}
.nl-submit{background:var(--accent);color:white;border:none;font-family:"Inter",sans-serif;font-size:14px;font-weight:700;padding:12px 20px;border-radius:10px;cursor:pointer;white-space:nowrap}.nl-submit:hover{background:#d97706}
.nl-success{color:#059669;font-size:14px;font-weight:600;margin-top:8px;display:none}
.ad-sticky{position:fixed;bottom:0;left:0;right:0;z-index:90;background:var(--bg-card);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;min-height:70px;padding:8px 16px}
.ad-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:1px solid var(--border);border-radius:6px;width:24px;height:24px;font-size:11px;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center}
#btt{position:fixed;bottom:84px;right:20px;z-index:89;width:40px;height:40px;color:white;border:none;border-radius:10px;font-size:16px;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all var(--transition)}
#btt.visible{display:flex}#btt:hover{opacity:.85;transform:translateY(-2px)}
#view-questions.active{display:flex;flex-direction:column;justify-content:center}
@media print{*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}body,html{background:white!important}header,.ad-sticky,#btt,.result-ctas,.result-ctas-secondary,.btn-pdf,.newsletter-box,.ad-slot-top,.view:not(#view-result){display:none!important}#view-result{display:block!important;position:static!important}.result-card,.result-section,.traits-section{box-shadow:none!important;break-inside:avoid;border:1px solid #e5e7eb!important}.main{padding:0!important;max-width:100%!important}@page{margin:1.5cm;size:A4}}
@media(max-width:540px){.intro-profiles{grid-template-columns:1fr}.traits-body{grid-template-columns:1fr}.traits-col:first-child{border-right:none;border-bottom:1px solid var(--border)}.nl-form{flex-direction:column}.result-ctas,.result-ctas-secondary{flex-direction:column}}
.btn-start{display:block;width:100%;color:white;font-weight:800;font-size:17px;padding:18px 32px;border:none;border-radius:12px;cursor:pointer;transition:all var(--transition)}
.btn-start:hover{transform:translateY(-2px)}