:root{
  --bg:#E8F5E9;
  --card:#ffffff;
  --text:#333333;
  --muted:#666666;
  --accent:#00BFFF;
  --accent-hover:#0099CC;
  --accent-weak:rgba(0,191,255,.2);
  --border:#DDEEE1;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --radius:20px;
  --maxw:860px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container{min-height:100%; display:flex; flex-direction:column}
header{
  position:sticky; top:0; z-index:10; background:linear-gradient(180deg, rgba(232,245,233,1) 70%, rgba(232,245,233,0));
  padding:14px 16px 8px; backdrop-filter:saturate(1.2);
}
.progress-wrap{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:12px}
.back{appearance:none; border:none; background:transparent; color:var(--muted); font-weight:600; cursor:pointer; display:flex; align-items:center; gap:8px}
.back[disabled]{opacity:.4; cursor:not-allowed}
.progress{flex:1; height:6px; background:#cfe9d4; border-radius:999px; overflow:hidden}
.progress > span{display:block; height:100%; width:0; background:var(--accent); transition:width .35s ease}
.counter{font-weight:700; color:#49745a}

main{flex:1; display:flex; align-items:center; justify-content:center; padding:24px 16px 56px}
.card{width:100%; max-width:var(--maxw); background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px;}
.title{font-size:22px; line-height:1.35; margin:0 0 18px}
.hint{color:var(--muted); margin-top:-4px; margin-bottom:16px}

/* Варианты ответа как карточки */
.options{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:640px){.options{grid-template-columns:1fr 1fr}}
.option{border:2px solid transparent; background:#F7FFFF; border-radius:16px; padding:14px 16px; cursor:pointer; font-weight:600; transition:transform .06s ease, border-color .12s ease, background-color .12s ease, color .12s ease, box-shadow .12s ease}
.option:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06)}
.option.active{background:var(--accent); color:#fff; border-color:var(--accent)}

/* Поля ввода */
.field{display:flex; gap:12px; align-items:center; margin-top:8px}
.field input{flex:1; padding:14px 16px; border-radius:14px; border:2px solid #bfe3cb; background:#fff; font-size:16px; outline:none}
.field input:focus{border-color:#7ecaa4; box-shadow:0 0 0 3px rgba(126,202,164,.2)}

/* Кнопки */
.actions{display:flex; justify-content:flex-end; gap:12px; margin-top:18px}
.btn{appearance:none; border:none; padding:14px 22px; border-radius:14px; font-weight:700; cursor:pointer; box-shadow:0 8px 16px rgba(0,0,0,.08); transition:transform .06s ease, box-shadow .12s ease, background-color .12s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent-weak); color:#0f5b74}
.btn-primary[disabled]{opacity:.7; cursor:not-allowed}
.btn-primary.enabled{background:var(--accent); color:#fff}
.btn-primary.enabled:hover{background:var(--accent-hover)}

/* Экран загрузки */
.center{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:48px 16px}
.spinner{width:54px; height:54px; border:5px solid rgba(0,191,255,.25); border-top-color:var(--accent); border-radius:50%; animation:spin .9s linear infinite; margin-bottom:18px}
@keyframes spin{to{transform:rotate(360deg)}}
.stage{opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .35s ease; margin:8px 0; color:#4c7f8f; font-weight:600}
.stage.show{opacity:1; transform:none}

/* Мотивационный экран с графиком */
.chart-wrap{margin-top:10px; background:linear-gradient(180deg, #F2FFFD, #F8FFFE); border-radius:18px; padding:18px; border:1px solid #cfe9ff}
.chart-title{font-size:28px; font-weight:800; color:#198f86; margin:8px 0 6px}
svg{width:100%; height:260px; display:block}
.chart-label{font-weight:700; font-size:14px}
.chart-sub{color:var(--muted); margin-top:4px}
.slider{margin:14px 0 4px}
.slider input{width:100%}
.legend{display:flex; justify-content:space-between; color:#8aa; font-size:14px}

/* История до/после */
.duo{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin:12px 0 8px}
.duo figure{margin:0; background:#fff; padding:8px; border-radius:14px; border:1px solid #d9efe7; box-shadow:0 8px 16px rgba(0,0,0,.06)}
.duo img{width:300px; height:auto; border-radius:10px; display:block}
.duo figcaption{text-align:center; color:#2b6e6a; font-weight:700; margin-top:6px}
.subtitle{font-size:20px; color:#0f5b74; margin-top:8px}
.story{font-size:16px; color:#335; line-height:1.6; margin-top:10px}

.footer-note{margin-top:8px; color:#6a8; font-size:13px}

/* ===== Mobile tweaks for quiz ===== */
@media (max-width: 768px){
  :root{ --container: 100%; }
  body{ font-size: 16px; }
  .container{ padding: 14px; }

  header .progress-wrap{ gap: 10px; }
  .progress{ height: 8px; }
  .counter{ font-size: 14px; }

  .card{ padding: 16px; border-radius: 14px; }
  .title{ font-size: 22px; line-height: 1.25; }

  .options{ display: grid; grid-template-columns: 1fr; gap: 10px; }
  .option{ padding: 12px 14px; font-size: 16px; }

  .actions{ gap: 10px; }
  .btn{ width: 100%; padding: 14px; border-radius: 12px; }
  .btn-secondary{ width: 100%; }

  .duo{ display: grid; grid-template-columns: 1fr; gap: 12px; }
  .duo img{ width: 100%; height: auto; border-radius: 12px; }

  .chart-wrap{ padding: 8px; }
  .chart-title{ font-size: 16px; }
  .chart-sub{ font-size: 14px; }
  .slider input[type="range"]{ width: 100%; }

  .form-row{ display: grid; grid-template-columns: 1fr; gap: 10px; }
  input[type="number"], input[type="text"]{ font-size: 16px; padding: 12px 14px; }
}
@media (max-width: 420px){
  .title{ font-size: 20px; }
  .btn{ padding: 12px; }
}