/* Family Values Survey - Complete style.css
   Modern Glass UI */

:root{
--primary:#5B8CFF;--secondary:#8B5CF6;--accent:#FF5E9C;
--bg:linear-gradient(135deg,#EEF4FF,#EDE9FE,#FDF2F8);
--text:#1d2433;--muted:#6b7280;--glass:rgba(255,255,255,.55);
--border:rgba(255,255,255,.45);--radius:28px;
--shadow:0 20px 60px rgba(0,0,0,.12);
}
body.dark{--bg:linear-gradient(135deg,#101521,#1a2234,#101521);--text:#f3f6ff;--muted:#aab3c8;--glass:rgba(28,35,49,.62);--border:rgba(255,255,255,.08);--shadow:0 20px 60px rgba(0,0,0,.45);}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text)}
.background::before,.background::after{content:"";position:fixed;border-radius:50%;filter:blur(40px);z-index:-2}
.background::before{width:520px;height:520px;background:#5b8cff33;left:-120px;top:-120px;animation:f1 16s ease-in-out infinite}
.background::after{width:520px;height:520px;background:#8b5cf633;right:-120px;bottom:-120px;animation:f2 18s ease-in-out infinite}
@keyframes f1{50%{transform:translate(80px,60px)}}@keyframes f2{50%{transform:translate(-80px,-50px)}}
.app{max-width:1100px;margin:0 auto;height:100vh;padding:40px 20px;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr;row-gap:24px;overflow:hidden}
.glass{background:var(--glass);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.top{grid-row:1;display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.5rem;font-weight:800;display:flex;gap:10px}
button{font:inherit;cursor:pointer;border:none;transition:.25s}
#themeToggle{width:52px;height:52px;border-radius:16px;background:var(--glass)}
.screen{grid-row:2;grid-column:1;width:100%;height:100%;min-height:0;display:none;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease;overflow:auto}
.screen.active{display:flex}
.screen.active.visible{opacity:1;transform:translateY(0)}
#welcomeScreen.active{justify-content:center;align-items:center}
#welcomeScreen .glass{padding:60px;max-width:760px;text-align:center}
#welcomeScreen h1{font-size:3.2rem;margin-bottom:20px}
#welcomeScreen p{color:var(--muted);line-height:1.8}
#startBtn,#nextBtn,#restartBtn{margin-top:30px;padding:16px 34px;border-radius:18px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-weight:700}
#prevBtn{padding:16px 34px;border-radius:18px;background:#e5e7eb}
body.dark #prevBtn{background:#2c3446;color:#fff}
#surveyScreen.active{flex-direction:column;align-items:center;justify-content:center;gap:24px}
#finishScreen.active{justify-content:center;align-items:center}
.progressWrapper{position:relative;width:140px;height:140px}
.progressCircle{transform:rotate(-90deg)}
.bgCircle,.progress{fill:none;stroke-width:10}
.bgCircle{stroke:#d6d9e2}
.progress{stroke:var(--primary);stroke-linecap:round;stroke-dasharray:377;stroke-dashoffset:377}
#progressText{position:absolute;inset:0;display:grid;place-items:center;font-weight:800}
.questionCard{width:min(860px,100%);padding:40px}
#questionNumber{color:var(--muted);margin-bottom:10px}
#questionText{font-size:2rem;margin-bottom:26px}
#answers{display:grid;gap:14px}
.answer{padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.22);border:1px solid transparent}
body.dark .answer{background:rgba(255,255,255,.05)}
.answer:hover{transform:translateY(-2px);border-color:#5B8CFF55}
.answer.selected{background:linear-gradient(135deg,#5b8cff22,#8b5cf622);border-color:var(--primary)}
.navigation{display:flex;justify-content:space-between;gap:16px;margin-top:30px}
.nextWrapper{display:flex;align-items:center;gap:14px}
button:disabled{opacity:.6;cursor:not-allowed}
.spinner{display:none;font-size:24px;line-height:1}
.spinner.show{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.finish{text-align:center;padding:60px;max-width:680px;margin:0 auto}
.emoji{font-size:5rem;margin-bottom:16px}
input[type=radio],input[type=checkbox]{accent-color:var(--primary)}
input[type=range]{width:100%;accent-color:var(--primary)}
button:disabled{cursor:not-allowed}
.scaleWrapper{display:flex;flex-direction:column;gap:14px;padding:10px 4px}
.scaleLabels{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem}
.scaleValue{align-self:center;font-size:2rem;font-weight:800;color:var(--primary)}
.resultSummary{margin-top:26px;text-align:left;display:flex;flex-direction:column;gap:14px}
.resultStat{background:rgba(255,255,255,.35);border:1px solid var(--border);border-radius:16px;padding:16px 18px;font-size:.98rem}
body.dark .resultStat{background:rgba(255,255,255,.05)}
.resultStat strong{color:var(--primary)}
.resultStat ul{margin:8px 0 0 20px}
.resultStat li{margin-bottom:4px}
@media(max-width:768px){
#welcomeScreen .glass,.questionCard,.finish{padding:24px}
#welcomeScreen h1{font-size:2.2rem}
#questionText{font-size:1.45rem}
.navigation{flex-direction:column-reverse}
#prevBtn,#nextBtn,#restartBtn{width:100%}
.nextWrapper{width:100%}
.nextWrapper #nextBtn{flex:1}
}