/* Палитра — darkPalette из max-ui src/styles/variables/appearance.scss */
  :root{
    --page:rgb(16 17 20);
    --bg:rgb(23 24 28);
    --card:rgb(37 38 45);
    --bar:rgb(30 31 36);
    --sheet:rgb(23 23 24);
    --overlay:rgb(13 13 13 / .64);
    --t1:rgb(255 255 255 / .8);
    --t2:rgb(255 255 255 / .74);
    --t3:rgb(255 255 255 / .44);
    --t4:rgb(255 255 255 / .28);
    --accent:rgb(0 122 255);
    --sec:rgb(67 68 85);
    --green:rgb(43 198 68);
    --red:rgb(206 66 87);
    --orange:rgb(255 159 10);
    --fill:rgb(255 255 255 / .09);
    --fill2:rgb(255 255 255 / .06);
    --line:rgb(255 255 255 / .06);
    --grad-blue:linear-gradient(157deg,#08D7F3 6.38%,#5398FF 85%);
    --grad-violet:linear-gradient(155deg,#BF97FF 6.6%,#526EFF 84.12%);
    --grad-green:linear-gradient(158deg,#14E1D5 6.15%,#03C722 85.68%);
    --grad-pink:linear-gradient(153deg,#FF48B6 .77%,#FF8A35 93.03%);
    --grad-orange:linear-gradient(155deg,#FFC93D 6.6%,#FF832A 84.12%);
  }
  *{box-sizing:border-box}
  body{
    margin:0;background:var(--page);color:var(--t1);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Roboto","Helvetica Neue",sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  @keyframes shimmer{0%{opacity:.45}50%{opacity:.9}100%{opacity:.45}}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* --- каркас экрана --- */
  .phone{background:var(--bg);border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgb(0 0 0 / .2),0 12px 32px rgb(0 0 0 / .3)}
  /* Шапку с «Назад» рисует сам MAX — здесь только заголовок экрана. */
  .bar{height:44px;display:flex;align-items:center;justify-content:center;background:var(--bar);font-size:17px;font-weight:600;letter-spacing:-.43px;color:var(--t1)}
  .bar.split{justify-content:space-between;padding:0 16px}
  .bar.tall{height:52px;padding:0 20px;justify-content:space-between}
  .body{padding:20px 16px;display:flex;flex-direction:column;gap:16px;min-height:600px}
  .thin{height:3px;background:var(--fill)}
  .thin>i{display:block;height:3px;background:var(--accent)}

  /* --- атомы --- */
  .card{background:var(--card);border-radius:16px}
  .card.pad{padding:16px;display:flex;flex-direction:column;gap:12px}
  .list{background:var(--card);border-radius:16px;display:flex;flex-direction:column}
  .row{padding:14px 16px;display:flex;align-items:center;gap:12px;min-height:44px}
  .row .grow{flex:1;display:flex;flex-direction:column;gap:2px}
  .sep{height:1px;background:var(--line);margin-left:16px}
  .sep.inset{margin-left:56px}
  .btn{min-height:48px;border-radius:12px;background:var(--accent);color:#fff;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}
  .btn.sec{background:var(--sec);color:var(--t1)}
  .btn.sm{min-height:36px;padding:0 14px;border-radius:10px;font-size:14px}
  .btn.md{min-height:44px;padding:0 20px;font-size:15px}
  .bottom{margin-top:auto}
  .prog{height:6px;border-radius:3px;background:var(--fill)}
  .prog>i{display:block;height:100%;border-radius:3px;background:var(--accent)}
  .prog.xs{height:4px;border-radius:2px}
  .tag{font-size:13px;line-height:16px;color:var(--t2);background:var(--fill);border-radius:8px;padding:6px 10px}
  .label{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--t4)}
  .section-label{padding:12px 16px 8px;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--t4)}
  .hint{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:12px;padding:12px 14px}
  .hint i{width:6px;height:6px;border-radius:3px;background:var(--accent);margin-top:6px;flex:0 0 auto}
  .hint p{margin:0;font-size:13px;line-height:18px;color:var(--t3)}
  .t3{font-size:13px;color:var(--t3)}
  .t4s{font-size:13px;color:var(--t4)}
  .h1{font-size:28px;line-height:32px;font-weight:600;letter-spacing:.02px;color:var(--t1)}
  .h2{font-size:22px;line-height:26px;font-weight:600;letter-spacing:-.26px;color:var(--t1)}
  .h3{font-size:20px;line-height:24px;font-weight:600;letter-spacing:-.28px;color:var(--t1)}
  .h4{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.43px;color:var(--t1)}
  .h5{font-size:16px;line-height:20px;font-weight:600;color:var(--t1)}
  .body-text{font-size:15px;line-height:21px;color:var(--t2)}
  .q{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.26px;color:var(--t1)}

  /* --- 2c: шкала согласия, 5 растущих сегментов --- */
  .scale{display:flex;align-items:center;justify-content:space-between;gap:6px}
  .seg{flex:1;min-height:64px;border-radius:14px;background:var(--fill);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .seg:hover{background:rgb(231 231 231 / .15)}
  .seg i{border-radius:50%;background:var(--t4)}
  .seg:nth-child(1) i{width:14px;height:14px}
  .seg:nth-child(2) i{width:20px;height:20px}
  .seg:nth-child(3) i{width:26px;height:26px}
  .seg:nth-child(4) i{width:32px;height:32px}
  .seg:nth-child(5) i{width:38px;height:38px}
  .seg.on,.seg.on:hover{background:var(--accent);box-shadow:0 0 0 2px rgb(0 122 255 / .3)}
  .seg.on i{background:#fff}
  .scale-value{align-self:center;font-size:15px;font-weight:600;color:var(--accent)}
  .dots{display:flex;gap:4px;align-items:center;justify-content:center}
  .dots i{width:20px;height:4px;border-radius:2px;background:rgb(255 255 255 / .12)}
  .dots i.on{background:var(--accent)}

  /* --- 2e: варианты ответа --- */
  .ans{min-height:56px;border-radius:14px;background:var(--card);border:2px solid transparent;padding:12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer}
  .ans:hover{background:rgb(50 52 61)}
  .ans .key{width:26px;height:26px;border-radius:8px;background:var(--fill);color:var(--t3);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .ans .txt{font-size:16px;line-height:21px;color:var(--t1);flex:1}
  .ans .tick{display:none;flex:0 0 auto}
  .ans.on,.ans.on:hover{background:rgb(0 122 255 / .16);border-color:var(--accent)}
  .ans.on .key{background:var(--accent);color:#fff}
  .ans.on .tick{display:block}

  /* --- 2f: шит паузы --- */
  .modal{position:relative;height:646px;overflow:hidden}
  .modal .dim{position:absolute;inset:0;background:var(--overlay)}
  .modal .blurred{filter:blur(1.5px);opacity:.55}
  .sheet{position:absolute;left:0;right:0;bottom:0;background:var(--sheet);border-radius:20px 20px 0 0;padding:8px 16px 20px;display:flex;flex-direction:column;gap:16px;box-shadow:0 -8px 32px rgb(0 0 0 / .3)}
  .sheet .grabber{width:36px;height:4px;border-radius:2px;background:rgb(255 255 255 / .12);align-self:center}
  .modal.closed .dim,.modal.closed .sheet{display:none}
  .modal.closed .blurred{filter:none;opacity:1}
  .switch{width:44px;height:26px;border-radius:13px;background:var(--accent);padding:2px;display:flex;justify-content:flex-end}
  .switch i{width:22px;height:22px;border-radius:11px;background:#fff}

  /* --- 2g: скелетоны стриминга --- */
  .sk{height:12px;border-radius:6px;background:var(--fill)}
  .sk.live{animation:shimmer 1.4s ease-in-out infinite}
  .spinner{width:22px;height:22px;border-radius:11px;border:2px solid rgb(0 122 255 / .25);border-top-color:var(--accent);animation:spin 1s linear infinite}
  .caret{display:inline-block;width:2px;height:16px;background:var(--accent);margin-left:2px;vertical-align:-3px;animation:shimmer .9s steps(2) infinite}

  /* --- 2h: карточка лучшего совпадения --- */
  .hero{border-radius:20px;overflow:hidden;background:var(--card)}
  .hero-top{background:var(--grad-blue);padding:20px 18px;display:flex;flex-direction:column;gap:8px}
  .hero-top .label{color:var(--t1);letter-spacing:1px}
  .hero-top .h1{color:#fff}
  .bar-strip{width:8px;height:32px;border-radius:4px;flex:0 0 auto}

  /* --- 2k: экран педагога --- */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .stat{background:var(--card);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
  .stat .num{font-size:28px;line-height:30px;font-weight:600;color:var(--t1)}
  .stat .num small{font-size:17px;color:var(--t4)}
  .barline{display:flex;align-items:center;gap:12px}
  .barline .name{flex:0 0 116px;font-size:14px;color:var(--t2);overflow-wrap:anywhere}
  .barline .track{flex:1;height:22px;border-radius:6px;background:var(--fill2)}
  .barline .track>i{display:block;height:100%;border-radius:6px;background:var(--accent)}
  .barline .val{width:26px;text-align:right;font-size:14px;font-weight:600;color:var(--t1)}
  .filter{min-height:36px;padding:0 14px;border-radius:10px;background:var(--card);color:var(--t2);font-size:14px;display:flex;align-items:center;gap:8px}
  .filter.on{background:var(--accent);color:#fff;font-weight:600}

  /* --- приложение: один экран на весь вьюпорт --- */
  .phone{max-width:480px;margin:0 auto;min-height:100vh;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
  @media (min-width:520px){
    body{padding:24px 0}
    .phone{min-height:calc(100vh - 48px);border-radius:20px;box-shadow:0 12px 32px rgb(0 0 0 / .3)}
  }
  /* нижние кнопки не должны уезжать под системную полоску телефона */
  .body{flex:1;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .btn[disabled]{opacity:.4;pointer-events:none}
  .hidden{display:none !important}
  .link{font-size:15px;color:var(--accent);cursor:pointer;user-select:none}
  .center{align-items:center;justify-content:center;text-align:center}

  /* экран педагога шире и без телефонной рамки */
  .desk{max-width:960px;margin:0 auto;padding:20px}
  .desk .stats{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .cols{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
  .cols>*{flex:1 1 280px}
  .panel{background:var(--card);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:14px}
  input.field{min-height:44px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--t1);font-size:16px;padding:0 14px;outline:none;width:100%}
  input.field:focus{border-color:var(--accent)}