:root{
  --bg:#f4f6f9; --card:#fff; --ink:#17212b; --muted:#6b7785;
  --blue:#2b7de9; --blue-d:#1f63bd; --green:#28a745; --red:#e2453c;
  --line:#dfe4ea; --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:22px; line-height:1.35; color:var(--ink); background:var(--bg);
  -webkit-text-size-adjust:100%;
}
#app{position:relative;height:100%;max-width:760px;margin:0 auto;background:var(--card)}
.screen{position:absolute;inset:0;display:none;flex-direction:column;background:var(--card)}
.screen.active{display:flex}

.bar{
  display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 18px;
  border-bottom:1px solid var(--line);background:var(--card);
  padding-top:calc(10px + env(safe-area-inset-top));
}
.bar-title{font-size:26px;font-weight:700;margin:0 auto;transform:translateX(0)}
.back,.link{
  background:none;border:0;color:var(--blue);font:inherit;font-size:22px;
  padding:8px 12px;border-radius:12px;cursor:pointer;
}
.back::before{content:"‹ ";font-size:30px;line-height:0;vertical-align:-2px}
.who{margin-left:auto;color:var(--muted);font-size:20px}

.body{flex:1;overflow-y:auto;padding:22px 20px;-webkit-overflow-scrolling:touch}
.body.center{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px}

h1{font-size:36px;line-height:1.2;margin:0 0 6px}
h2{font-size:30px;line-height:1.25;margin:0 0 14px}
p{margin:0 0 14px}
.muted{color:var(--muted)}
.small{font-size:19px}

.glyph{
  font-size:76px;font-weight:800;color:#e8edf4;letter-spacing:2px;
  line-height:1;margin:6px auto 14px;text-align:center;
}

.row{display:flex;justify-content:space-between;align-items:baseline;font-size:24px;margin:18px 0 8px}
.val{color:var(--green);font-weight:700}

input[type=range]{
  -webkit-appearance:none;width:100%;height:44px;background:transparent;margin:0 0 6px;
}
input[type=range]::-webkit-slider-runnable-track{height:12px;border-radius:8px;background:#e3e9f1}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:40px;height:40px;border-radius:50%;background:var(--blue);
  border:4px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.25);margin-top:-16px;
}
input[type=range]::-moz-range-track{height:12px;border-radius:8px;background:#e3e9f1}
input[type=range]::-moz-range-thumb{width:36px;height:36px;border:4px solid #fff;border-radius:50%;background:var(--blue)}

.input{
  width:100%;font:inherit;font-size:26px;padding:18px;border:2px solid var(--line);
  border-radius:var(--radius);background:#fff;
}
.input:focus{outline:none;border-color:var(--blue)}

.foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}
.btn{
  display:block;width:100%;border:0;border-radius:var(--radius);font:inherit;
  font-size:26px;font-weight:700;padding:22px;cursor:pointer;
}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:active{background:var(--blue-d)}
.btn.big{padding:34px;font-size:32px}
.btn.ghost{background:#eef3fb;color:var(--blue);margin-top:16px}
.btn:disabled{opacity:.5}
.link{display:block;width:100%;text-align:center;margin-top:10px;color:var(--muted)}

.wave{display:flex;gap:10px;justify-content:center;align-items:flex-end;height:120px;margin:26px 0 10px}
.wave span{width:16px;height:16px;border-radius:8px;background:#e3e9f1;transition:height .12s}
.wave.on span{background:var(--blue);animation:pulse 900ms ease-in-out infinite}
.wave.on span:nth-child(2){animation-delay:.1s}
.wave.on span:nth-child(3){animation-delay:.2s}
.wave.on span:nth-child(4){animation-delay:.3s}
.wave.on span:nth-child(5){animation-delay:.2s}
.wave.on span:nth-child(6){animation-delay:.1s}
@keyframes pulse{0%,100%{height:18px}50%{height:96px}}
.hint{text-align:center;font-size:23px;color:var(--muted);margin-top:10px}

.legend{display:flex;gap:22px;justify-content:center;font-size:20px;margin:10px 0 16px}
.legend i{display:inline-block;width:26px;height:4px;border-radius:2px;vertical-align:3px;margin-right:8px}
table{width:100%;border-collapse:collapse;font-size:21px}
th,td{padding:12px 6px;border-bottom:1px solid var(--line);text-align:center}
th:first-child,td:first-child{text-align:left;color:var(--muted)}

.toast{
  position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translate(-50%,20px);
  background:#17212b;color:#fff;padding:16px 22px;border-radius:14px;font-size:21px;
  opacity:0;pointer-events:none;transition:.25s;max-width:90%;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.opt{display:block;width:100%;text-align:left;font:inherit;font-size:24px;padding:20px;margin:0 0 12px;
     border:2px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer}
.opt.on{border-color:var(--blue);background:#eef4fe}
.opt.da.on{border-color:var(--green);background:#eaf7ee}

.install{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;text-align:left;
  background:#eef4fe;border:2px solid #d7e4fa;border-radius:var(--radius);
  padding:16px 18px;margin:0 0 22px;width:100%;
}
[hidden]{display:none!important}
.install[hidden]{display:none!important}
.install img{border-radius:14px}
.install-txt{flex:1 1 55%;display:flex;flex-direction:column;gap:2px;font-size:22px}
.install-txt span{color:var(--muted)}
.install-btn{width:auto;padding:14px 22px;font-size:22px;flex:0 0 auto}
.install-later{width:auto;flex:0 0 auto;margin:0;padding:14px 6px}

.btn-row{display:flex;gap:12px}
.btn-row .btn{flex:1 1 0}
.btn.secondary{background:#e9eef6;color:#17212b}
.btn.secondary:active{background:#dbe3ee}

.ears{display:flex;gap:14px;justify-content:center;margin:8px 0 4px}
.ear-card{
  position:relative;flex:1 1 0;max-width:190px;display:flex;flex-direction:column;
  align-items:center;gap:4px;padding:12px 8px;border-radius:18px;
  border:3px solid #e3e9f1;color:#b9c3d0;background:#f7f9fc;transition:.18s;
}
.ear-card span{font-size:21px;font-weight:600;color:var(--muted)}
.ear-card.on{border-color:var(--blue);background:#eef4fe;color:var(--blue);box-shadow:0 4px 14px rgba(43,125,233,.18)}
.ear-card.on span{color:var(--blue)}
.ear-card.on::after{
  content:"";position:absolute;left:50%;top:26px;width:54px;height:54px;margin-left:-27px;
  border-radius:50%;border:3px solid var(--blue);opacity:.5;animation:earping 1.6s ease-out infinite;
}
@keyframes earping{0%{transform:scale(.9);opacity:.55}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.ear-card svg{position:relative;z-index:1}
#ear-right svg{transform:scaleX(-1)}

.metrics{display:flex;gap:12px;margin:6px 0 14px}
.metric{
  flex:1 1 0;background:#f5f8fc;border:2px solid #e3e9f1;border-radius:18px;
  padding:14px 10px;text-align:center;display:flex;flex-direction:column;gap:2px;
}
.metric-val{font-size:40px;font-weight:800;color:var(--blue);line-height:1.1}
.metric-lbl{font-size:18px;color:var(--muted)}
.verdict{
  background:#f7f9fc;border-left:6px solid var(--blue);border-radius:12px;
  padding:14px 16px;margin:0 0 18px;font-size:21px;
}
.verdict p{margin:0 0 10px}
.verdict p:last-child{margin:0}
.verdict b{color:var(--blue)}
.verdict .bad{border-color:#e2453c}

.btn.danger{background:#e2453c;color:#fff}
.btn.danger:active{background:#c9372f}

.choice{
  text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;font:inherit;
  background:#fff;border:3px solid #e3e9f1;border-radius:20px;padding:20px 18px;margin:0 0 14px;
  cursor:pointer;color:var(--ink);
}
.choice:active{border-color:var(--blue);background:#eef4fe}
.choice-ico{
  flex:0 0 64px;width:64px;height:64px;border-radius:18px;background:#eef4fe;color:var(--blue);
  font-size:34px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.choice-txt{display:flex;flex-direction:column;gap:4px}
.choice-txt b{font-size:26px}
.choice-txt span{font-size:19px;color:var(--muted);line-height:1.25}

.build{display:block;text-align:center;font-size:15px;color:#aab3bf;margin-top:8px}

.chosen{font-size:22px;font-weight:700;color:var(--blue);background:#eef4fe;border-radius:14px;padding:12px 16px;margin:0 0 14px}
.chosen:empty{display:none}

.home{
  background:none;border:0;color:var(--muted);font:inherit;font-size:24px;line-height:1;
  padding:8px 10px;margin-left:auto;cursor:pointer;border-radius:12px;
}
.home:active{background:#eef4fe;color:var(--blue)}

/* ================= ПЛАНШЕТ (портрет и ландшафт) ================= */
@media (min-width: 700px) {
  body { font-size: 24px; }
  #app { max-width: 860px; }
  .body { padding: 26px 32px; }
  .bar { min-height: 72px; padding: 12px 24px; padding-top: calc(12px + env(safe-area-inset-top)); }
  .bar-title { font-size: 28px; }
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  .row { font-size: 26px; }
  .btn { font-size: 28px; padding: 24px; }
  .btn.big { padding: 36px; font-size: 34px; }
  .choice { padding: 24px 22px; }
  .choice-txt b { font-size: 28px; }
  .choice-txt span { font-size: 21px; }
  .ear-card { max-width: 240px; padding: 16px 10px; }
  .metric-val { font-size: 46px; }
  .metric-lbl { font-size: 20px; }
  .verdict { font-size: 23px; }
  th, td { padding: 14px 8px; }
}

@media (min-width: 1024px) {
  #app { max-width: 1080px; }
  .body { padding: 30px 44px; }
  .choice-ico { flex: 0 0 72px; width: 72px; height: 72px; font-size: 38px; }
  .ear-card { max-width: 300px; }
  .ears { gap: 24px; }
}

/* планшет в горизонтали: компактнее по вертикали, чтобы всё влезало без прокрутки */
@media (min-width: 700px) and (max-height: 560px) {
  .body { padding: 14px 24px; }
  h1 { font-size: 32px; }
  h2 { font-size: 27px; }
  .glyph { font-size: 44px; margin: 2px auto 8px; }
  .wave { height: 74px; margin: 12px 0 6px; }
  .ear-card { padding: 8px 8px; }
  .ear-card svg { width: 40px; height: 40px; }
  .foot { padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); }
  .btn { padding: 16px; }
  .btn.big { padding: 22px; font-size: 28px; }
}

/* ================= ТЕЛЕФОН ================= */
@media (max-width: 380px) {
  body { font-size: 20px; }
  h1 { font-size: 29px; }
  h2 { font-size: 25px; }
  .body { padding: 16px 14px; }
  .btn { font-size: 23px; padding: 18px; }
  .btn.big { font-size: 28px; padding: 26px; }
  .choice { padding: 16px 14px; gap: 12px; }
  .choice-ico { flex: 0 0 52px; width: 52px; height: 52px; font-size: 26px; border-radius: 14px; }
  .choice-txt b { font-size: 23px; }
  .choice-txt span { font-size: 17px; }
  .metrics { gap: 8px; }
  .metric-val { font-size: 32px; }
  .metric-lbl { font-size: 16px; }
  .ear-card { padding: 8px 6px; }
  .ear-card span { font-size: 18px; }
  .row { font-size: 21px; }
  .verdict { font-size: 19px; padding: 12px; }
  th, td { font-size: 18px; padding: 10px 4px; }
  .legend { font-size: 17px; gap: 12px; }
}

/* длинные таблицы не должны ломать ширину на телефоне */
.body table { width: 100%; }
@media (max-width: 560px) {
  #speech-chart table, #res-table table { display: block; overflow-x: auto; white-space: nowrap; }
}