:root{
  --bg:#f4fbfd;
  --bg2:#e8f6fb;
  --panel:#ffffff;
  --panel2:#eef9fc;
  --text:#073f8f;
  --heading:#053a86;
  --muted:#4f7698;
  --line:#b7ddea;
  --accent:#073f8f;
  --accent2:#a7d7e8;
  --accent3:#dff3f8;
  --ok:#16865b;
  --warn:#b88716;
  --alert:#b54747;
  --shadow:0 18px 60px rgba(7,63,143,.12);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at top left,rgba(167,215,232,.46),transparent 34%),
    linear-gradient(180deg,var(--bg),#ffffff 58%,var(--bg2));
  color:var(--text);
  padding-bottom:86px;
}
.app-header{
  position:sticky;top:0;z-index:5;
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:14px 16px;
  background:rgba(244,251,253,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;gap:12px;align-items:center}
.brand img{
  width:54px;height:46px;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(7,63,143,.12));
}
.brand h1{font-size:18px;margin:0;color:var(--heading)}
.eyebrow{
  letter-spacing:.13em;text-transform:uppercase;
  font-size:11px;color:var(--accent);font-weight:900;margin:0 0 6px;
}
main{max-width:900px;margin:auto;padding:16px}
.screen{display:none}.screen.active{display:block}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);
  border-radius:24px;
  padding:20px;
  margin:14px 0;
  box-shadow:var(--shadow);
}
.hero{position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;right:-80px;top:-80px;
  width:220px;height:220px;border-radius:999px;
  background:radial-gradient(circle,rgba(167,215,232,.75),rgba(167,215,232,0) 68%);
  pointer-events:none;
}
.hero h2{
  position:relative;font-size:28px;line-height:1.08;margin:0 0 12px;color:var(--heading);
}
.hero p,.card p{color:var(--muted);line-height:1.55}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.tool-card{
  border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(180deg,#ffffff,var(--accent3));
  color:var(--text);padding:18px;text-align:left;min-height:136px;
  box-shadow:0 10px 28px rgba(7,63,143,.08);
}
.tool-card span{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;
  background:var(--accent);color:#ffffff;font-weight:900;margin-bottom:14px;
}
.tool-card strong{display:block;font-size:18px;margin-bottom:6px;color:var(--heading)}
.tool-card small{color:var(--muted);line-height:1.4}
button{font:inherit;cursor:pointer}
.primary,.secondary,.ghost,.back{border:0;border-radius:999px;padding:13px 18px;font-weight:900}
.primary{background:var(--accent);color:#ffffff;box-shadow:0 10px 24px rgba(7,63,143,.2)}
.secondary{background:var(--accent3);color:var(--accent);border:1px solid var(--line)}
.ghost,.back{background:#ffffff;color:var(--accent);border:1px solid var(--line)}
.hidden{display:none}
.safety-box{
  border-left:4px solid var(--accent);background:rgba(167,215,232,.28);
  padding:12px 14px;border-radius:14px;color:var(--text);line-height:1.45;
}
.scale-note{background:rgba(167,215,232,.22);padding:12px;border-radius:14px;color:var(--muted);margin:12px 0}
.question{padding:14px 0;border-bottom:1px solid var(--line)}
.question p{margin:0 0 10px;color:var(--text)}
.choices{display:flex;gap:8px;flex-wrap:wrap}
.choices label{
  display:flex;align-items:center;gap:5px;background:#ffffff;border:1px solid var(--line);
  border-radius:999px;padding:9px 11px;color:var(--muted);
}
.choices input{accent-color:var(--accent)}
.timer{
  font-size:64px;font-weight:900;text-align:center;margin:22px 0;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.big-number{text-align:center;font-size:68px;font-weight:900;margin:10px;color:var(--accent)}
.big-number small{display:block;font-size:13px;color:var(--muted)}
.result{
  margin-top:16px;padding:14px;border-radius:16px;background:#ffffff;border:1px solid var(--line);display:none;
}
.result.show{display:block}
.result strong{display:block;margin-bottom:6px}
.result.ok{border-color:rgba(22,134,91,.45)}
.result.warn{border-color:rgba(184,135,22,.55)}
.result.alert{border-color:rgba(181,71,71,.55)}
.levels label{display:block;border:1px solid var(--line);border-radius:16px;padding:14px;margin:10px 0;background:#ffffff}
.levels input{accent-color:var(--accent)}
.summary-list.empty{color:var(--muted)}
.summary-item{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 0}
.summary-item small{color:var(--muted)}
.cta{
  text-align:center;background:linear-gradient(180deg,#ffffff,#eaf7fb);border-color:var(--accent2);
}
.cta h3{font-size:26px;margin-top:4px;color:var(--heading)}
.cta p{max-width:720px;margin-left:auto;margin-right:auto}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.cta-button{
  display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:999px;
  background:var(--accent);color:#ffffff;text-decoration:none;font-weight:900;
  box-shadow:0 10px 24px rgba(7,63,143,.18);
}
.cta-button.secondary{background:#ffffff;color:var(--accent);border:1px solid var(--line);box-shadow:none}
.cta-contact{font-weight:900;color:var(--heading)}
.cta-note{color:var(--muted);font-size:14px}
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;display:flex;overflow-x:auto;
  background:rgba(244,251,253,.96);border-top:1px solid var(--line);
  padding:8px env(safe-area-inset-right) calc(8px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
}
.bottom-nav button{min-width:84px;background:transparent;border:0;color:var(--muted);padding:10px 8px;font-size:12px;font-weight:900}
.bottom-nav button.active{color:var(--accent)}
a{color:var(--accent)}
@media(min-width:760px){
  .hero h2{font-size:40px}.app-header{padding:18px 28px}main{padding:28px}.bottom-nav{justify-content:center}
}


.routines.locked{
  border-style:dashed;
}
.routine-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin:16px 0;
}
.routine-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  box-shadow:0 10px 26px rgba(7,63,143,.08);
}
.routine-card h4{
  margin:0 0 10px;
  color:var(--heading);
  font-size:20px;
}
.routine-card ol{
  padding-left:20px;
  color:var(--muted);
  line-height:1.55;
}
.routine-card li{margin:8px 0}
.routine-card p{margin:8px 0}
.routine-safety{margin-top:12px}