:root{
    --bg:#F1F3EE;
    --surface:#FFFFFF;
    --surface-2:#E7EAE2;
    --ink-900:#1B211D;
    --ink-700:#3C453F;
    --ink-500:#6B756E;
    --border:#D7DCD1;
    --border-strong:#C1C9BA;
    --accent-leader:#9C5F1E;
    --accent-team:#235C51;
    --on-accent:#FFFFFF;
    --level-low:#B5493A;
    --level-mid:#B9862F;
    --level-high:#2F7A66;
    --focus-ring:#235C51;
    --radius-sm:3px;
    --radius-md:6px;
    --font-display:'Unbounded','Arial Black',sans-serif;
    --font-body:'Literata',Georgia,'Times New Roman',serif;
    --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#121613;
      --surface:#1A2019;
      --surface-2:#212823;
      --ink-900:#ECEFE8;
      --ink-700:#C2CAC3;
      --ink-500:#8A958D;
      --border:#2A322C;
      --border-strong:#3A433B;
      --accent-leader:#E3A24D;
      --accent-team:#4FA694;
      --on-accent:#15130D;
      --level-low:#E17E67;
      --level-mid:#E0B662;
      --level-high:#55BCA2;
      --focus-ring:#4FA694;
    }
  }
  :root[data-theme="dark"]{
    --bg:#121613;
    --surface:#1A2019;
    --surface-2:#212823;
    --ink-900:#ECEFE8;
    --ink-700:#C2CAC3;
    --ink-500:#8A958D;
    --border:#2A322C;
    --border-strong:#3A433B;
    --accent-leader:#E3A24D;
    --accent-team:#4FA694;
    --on-accent:#15130D;
    --level-low:#E17E67;
    --level-mid:#E0B662;
    --level-high:#55BCA2;
    --focus-ring:#4FA694;
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink-900);
    font-family:var(--font-body);
    line-height:1.6;
    padding:clamp(1.5rem,4vw,4rem) 1.25rem 6rem;
  }
  ::selection{background:var(--accent-team);color:var(--on-accent);}
  a{color:inherit;}
  button{font:inherit;color:inherit;}
  :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}

  .page{max-width:46rem;margin:0 auto;}

  .eyebrow{
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--ink-500);
    margin:0 0 .9rem;
  }
  h1{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(1.7rem,1.25rem + 2vw,2.5rem);
    line-height:1.08;
    letter-spacing:-.01em;
    text-wrap:balance;
    margin:0 0 .8rem;
  }
  .intro{
    font-size:1.02rem;
    color:var(--ink-700);
    max-width:38rem;
    margin:0 0 2.2rem;
  }

  .tabs{
    display:flex;
    width:fit-content;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-md);
    overflow:hidden;
    margin-bottom:1.75rem;
  }
  .tab{
    appearance:none;background:var(--surface);border:none;cursor:pointer;
    padding:.65rem 1.3rem;
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--ink-500);
    transition:background-color .2s ease,color .2s ease;
  }
  .tab + .tab{border-left:1px solid var(--border-strong);}
  .tab[data-test="leader"][aria-selected="true"]{background:var(--accent-leader);color:var(--on-accent);}
  .tab[data-test="team"][aria-selected="true"]{background:var(--accent-team);color:var(--on-accent);}
  .tab:not([aria-selected="true"]):hover{background:var(--surface-2);color:var(--ink-900);}

  .test{display:none;}
  .test.is-active{display:block;}
  .test{--test-accent:var(--accent-leader);}
  .test[data-test="team"]{--test-accent:var(--accent-team);}

  .test-meta{
    display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;
    font-family:var(--font-mono);font-size:.75rem;color:var(--ink-500);
    margin-bottom:1.1rem;
  }
  .test-meta strong{color:var(--ink-700);font-weight:500;}

  .progress-row{
    display:flex;align-items:center;gap:.9rem;
    margin-bottom:2.4rem;
  }
  .progress-label{
    font-family:var(--font-mono);font-size:.72rem;color:var(--ink-500);
    white-space:nowrap;font-variant-numeric:tabular-nums;
  }
  .meter{display:flex;gap:2px;flex:1;}
  .meter-seg{
    flex:1;height:10px;background:var(--surface-2);border:1px solid var(--border);
    border-radius:1px;
    transition:background-color .4s ease;
  }
  .meter--lg .meter-seg{height:22px;}
  .meter--progress .meter-seg.is-filled{background:var(--test-accent);border-color:var(--test-accent);}

  .cat-block{margin-bottom:2.2rem;}
  .cat-head{
    display:flex;align-items:baseline;gap:.6rem;
    margin-bottom:.9rem;
    padding-bottom:.5rem;
    border-bottom:1px solid var(--border);
  }
  .cat-index{
    font-family:var(--font-mono);font-size:.75rem;color:var(--test-accent);
    font-weight:500;
  }
  .cat-head h3{
    font-family:var(--font-display);font-weight:600;font-size:1.02rem;
    margin:0;letter-spacing:-.005em;
  }

  .statement{
    display:flex;flex-direction:column;gap:.7rem;
    padding:1rem 0;
    border-bottom:1px dashed var(--border);
  }
  .statement:last-child{border-bottom:none;}
  .statement p{margin:0;font-size:.98rem;color:var(--ink-900);max-width:36rem;}

  .scale{display:flex;align-items:center;gap:.4rem;}
  .scale-btn{
    appearance:none;background:var(--surface);cursor:pointer;
    width:2.1rem;height:2.1rem;
    border:1px solid var(--border-strong);border-radius:var(--radius-sm);
    font-family:var(--font-mono);font-size:.85rem;font-weight:500;
    color:var(--ink-700);
    transition:background-color .15s ease,border-color .15s ease,color .15s ease;
  }
  .scale-btn:hover{border-color:var(--test-accent);}
  .scale-btn.is-filled{background:var(--test-accent);border-color:var(--test-accent);color:var(--on-accent);}
  .scale-caps{
    display:flex;justify-content:space-between;
    font-family:var(--font-mono);font-size:.68rem;color:var(--ink-500);
    max-width:calc(2.1rem*5 + .4rem*4 + 1px);
  }

  .submit-row{
    display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
    margin-top:1rem;
  }
  .btn-primary{
    appearance:none;border:none;cursor:pointer;border-radius:var(--radius-sm);
    background:var(--test-accent);color:var(--on-accent);
    padding:.8rem 1.6rem;font-family:var(--font-mono);font-size:.82rem;
    letter-spacing:.04em;text-transform:uppercase;font-weight:500;
    transition:opacity .15s ease;
  }
  .btn-primary:disabled{opacity:.35;cursor:not-allowed;}
  .btn-ghost{
    appearance:none;cursor:pointer;border-radius:var(--radius-sm);
    background:transparent;border:1px solid var(--border-strong);color:var(--ink-700);
    padding:.75rem 1.3rem;font-family:var(--font-mono);font-size:.78rem;
    letter-spacing:.03em;text-transform:uppercase;
  }
  .btn-ghost:hover{border-color:var(--test-accent);color:var(--ink-900);}
  .remaining{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-500);}

  .results{display:none;}
  .results.is-active{display:block;}

  .result-hero{
    padding:1.6rem 0 1.9rem;border-bottom:1px solid var(--border);margin-bottom:1.8rem;
  }
  .result-hero-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.9rem;}
  .result-hero-label{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-500);}
  .result-hero-value{font-family:var(--font-display);font-weight:800;font-size:2.1rem;font-variant-numeric:tabular-nums;}
  .result-hero-desc{margin:.9rem 0 0;color:var(--ink-700);font-size:1rem;max-width:36rem;}

  .result-cats{display:flex;flex-direction:column;gap:1.05rem;margin-bottom:2rem;}
  .result-row{display:grid;grid-template-columns:1.1rem 9.5rem 1fr 3rem;align-items:center;gap:.8rem;}
  .result-row .cat-index{font-size:.7rem;}
  .result-row .cat-name{font-size:.88rem;color:var(--ink-900);}
  .result-row .cat-score{font-family:var(--font-mono);font-size:.85rem;text-align:right;color:var(--ink-700);font-variant-numeric:tabular-nums;}

  .result-focus{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
    padding:1.4rem 1.5rem;margin-bottom:1.8rem;
  }
  .result-focus h3{
    font-family:var(--font-display);font-weight:600;font-size:.98rem;margin:0 0 1rem;
  }
  .focus-item{padding:.7rem 0;border-top:1px dashed var(--border);}
  .focus-item:first-of-type{border-top:none;padding-top:0;}
  .focus-item strong{display:block;font-size:.92rem;margin-bottom:.25rem;}
  .focus-item p{margin:0;font-size:.92rem;color:var(--ink-700);}

  .result-actions{display:flex;gap:.8rem;flex-wrap:wrap;}

  footer{
    max-width:46rem;margin:3rem auto 0;
    font-family:var(--font-mono);font-size:.72rem;color:var(--ink-500);
    border-top:1px solid var(--border);padding-top:1.2rem;
  }

  @media (max-width:34rem){
    .result-row{grid-template-columns:1rem 6.2rem 1fr 2.6rem;gap:.5rem;}
  }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important;}
  }

/* overrides.css — точечные правки поверх исходного фрагмента (src/ не трогаем, чтобы новая
   версия от автора ложилась без ручного слияния). Причины — в README, раздел «Правки». */

/* 1. Колонка балла «3.3 / 5» в моноширинном шрифте не помещалась в 3rem и переносилась
      на две строки на любой ширине экрана. Ширина по содержимому + запрет переноса. */
.result-row{grid-template-columns:1.1rem 9.5rem 1fr auto;}
.result-row .cat-score{white-space:nowrap;}

/* 2. На телефоне (≤34rem) название категории обрезалось (6.2rem мало для «Эмоциональный»)
      и налезало на шкалу. Переводим строку в две: имя сверху, шкала и балл снизу. */
@media (max-width:34rem){
  .result-row{
    grid-template-columns:1.1rem 1fr auto;
    grid-template-rows:auto auto;
    gap:.35rem .6rem;
    align-items:center;
  }
  .result-row .cat-index{grid-row:1;grid-column:1;}
  .result-row .cat-name{grid-row:1;grid-column:2 / 4;}
  .result-row .meter{grid-row:2;grid-column:2;}
  .result-row .cat-score{grid-row:2;grid-column:3;}
}