/* ═══════════════════════════════════════════════════════
   База — структура. Ниже два скина: POP и BAUHAUS.
   Каждый скин осознанно живёт в одной теме, поэтому
   prefers-color-scheme здесь нет, но фон и цвет
   красятся явно на каждой поверхности.
   ═══════════════════════════════════════════════════════ */
:root{
  --radius:12px; --radius-lg:22px; --border:1px; --border-strong:1px;
  --shadow:none; --shadow-lift:none; --dot-radius:34%; --dot-border:2px;
  --display-case:none; --display-track:-.02em; --display-weight:700;
  --lbl-track:.09em; --lbl-weight:600;
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100vh; position:relative;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:var(--page-deco,none); opacity:var(--deco-opacity,0);
}
.wrap{max-width:660px; margin:0 auto; padding:0 20px 140px; position:relative; z-index:1}
h1,h2{font-family:var(--font-display); font-weight:var(--display-weight); margin:0;
  text-wrap:balance; text-transform:var(--display-case); letter-spacing:var(--display-track); line-height:1.15}
h1{font-size:clamp(1.9rem,7vw,2.9rem)}
h2{font-size:1.45rem}
p{margin:0}
a{color:var(--accent)}
.lbl{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:var(--lbl-track); font-weight:var(--lbl-weight); color:var(--ink-3)}
.muted{color:var(--ink-2); font-size:.92rem}
.stack{display:flex; flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.g32{gap:32px}.g40{gap:40px}
.tnum{font-variant-numeric:tabular-nums}
.hidden{display:none !important}
.rule{height:var(--border-strong); background:var(--rule-strong); border:none; margin:0}

.progress{position:sticky; top:0; z-index:10; background:var(--bg); padding:16px 0 12px;
  border-bottom:var(--border) solid var(--rule); display:flex; flex-direction:column; gap:8px}
.progress-meta{display:flex; justify-content:space-between; align-items:baseline}
.track{height:var(--track-h,12px); background:var(--surface-2); position:relative;
  overflow:hidden; border-radius:var(--radius); border:var(--track-border,none)}
.fill{height:100%; background:var(--accent); transition:width .4s var(--ease); border-radius:var(--radius)}

.hero{padding:60px 0 8px}
.forms{display:grid; gap:14px}
.form-card{display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px;
  background:var(--surface); border:var(--border) solid var(--rule-strong);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:18px 20px;
  cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit;
  /* Нативный appearance у <button> в Chrome глушит box-shadow, а жёсткая
     тень — часть подписи скинов. Отключаем явно. */
  appearance:none; -webkit-appearance:none;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s, background .18s}
.form-card:hover{transform:var(--card-hover,translateY(-3px)); box-shadow:var(--shadow-lift); border-color:var(--accent)}
.form-card:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.form-card .name{font-family:var(--font-display); font-size:1.15rem; font-weight:var(--display-weight);
  text-transform:var(--display-case); letter-spacing:var(--display-track)}
.form-card .len{font-family:var(--font-mono); font-size:.75rem; color:var(--ink-3);
  text-align:right; white-space:nowrap; line-height:1.5}

.note{background:var(--warn-soft); border-left:3px solid var(--warn); padding:14px 18px;
  font-size:.88rem; color:var(--ink-2); border-radius:var(--radius)}
.note b{color:var(--ink)}
.note.err{background:var(--bad-soft); border-color:var(--bad)}

.field{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
input[type=text]{font:inherit; padding:11px 14px; border-radius:var(--radius);
  border:var(--border-strong) solid var(--rule-strong); background:var(--surface);
  color:var(--ink); width:170px; text-transform:uppercase; letter-spacing:.12em;
  font-family:var(--font-mono); font-size:.9rem}
input[type=text]:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.stem{font-family:var(--font-display); font-size:1.3rem; padding:30px 0 6px;
  text-transform:var(--display-case); letter-spacing:var(--display-track)}
.legend{display:flex; justify-content:space-between; gap:16px}
.legend span{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-3); letter-spacing:var(--lbl-track)}
.q{padding:20px 0; border-top:var(--border) solid var(--rule); display:flex; flex-direction:column; gap:14px}
.q-text{font-size:1.02rem; line-height:1.45}
.scale{display:flex; justify-content:space-between; align-items:center; gap:4px; padding:0 2px}
.dot{border:var(--dot-border) solid var(--rule-strong); background:transparent;
  border-radius:var(--dot-radius); cursor:pointer; padding:0; flex:0 0 auto;
  appearance:none; -webkit-appearance:none;
  transition:transform .14s var(--ease), background .14s, border-color .14s, box-shadow .14s}
.dot:hover{border-color:var(--accent); transform:scale(1.12)}
.dot:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.dot[aria-checked="true"]{background:var(--accent); border-color:var(--accent); box-shadow:var(--dot-glow,none)}
.d1{width:22px;height:22px} .d2{width:27px;height:27px} .d3{width:32px;height:32px}
.d4{width:37px;height:37px} .d5{width:42px;height:42px}

.nav{display:flex; gap:12px; align-items:center; padding-top:30px; border-top:var(--border) solid var(--rule)}
button.btn{font-family:var(--font-body); font-size:.95rem; font-weight:700; padding:13px 26px;
  border-radius:var(--radius); cursor:pointer; border:var(--border-strong) solid var(--accent);
  background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow);
  appearance:none; -webkit-appearance:none;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s}
button.btn:hover:not(:disabled){transform:var(--btn-hover,translateY(-3px)); box-shadow:var(--shadow-lift)}
button.btn.ghost{background:transparent; color:var(--ink-2); border-color:var(--rule-strong); box-shadow:none}
button.btn:disabled{opacity:.3; cursor:not-allowed}
button.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.saving{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-3); letter-spacing:.08em}

.code{font-family:var(--font-display); font-size:clamp(3.4rem,16vw,6rem);
  letter-spacing:var(--code-track,.04em); color:var(--accent); line-height:.95;
  font-weight:var(--code-weight,800)}
.card{background:var(--surface); border:var(--border) solid var(--rule-strong);
  padding:22px; border-radius:var(--radius-lg); box-shadow:var(--shadow)}
.bars{display:flex; flex-direction:column; gap:11px}
.bar-row{display:grid; grid-template-columns:118px 1fr 50px; align-items:center; gap:10px; font-size:.88rem}
.bar-row .nm{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-row .val{font-family:var(--font-mono); font-size:.78rem; text-align:right; color:var(--ink-3)}
.gauge{height:18px; background:var(--surface-2); position:relative; overflow:hidden;
  border-radius:var(--radius); border:var(--gauge-border,none)}
.gauge i{position:absolute; top:0; height:100%; display:block; border-radius:var(--radius);
  animation:grow .55s var(--ease) both}
.gauge i[data-dir="r"]{transform-origin:left}
.gauge i[data-dir="l"]{transform-origin:right}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.zero{position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--rule-strong); z-index:1}
.quad{display:grid; grid-template-columns:1fr 1fr; gap:var(--quad-gap,1px); background:var(--rule-strong);
  border-radius:var(--radius-lg); overflow:hidden}
.quad>div{background:var(--surface); padding:16px}
.quad .qt{font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:var(--lbl-track); color:var(--ink-3); margin-bottom:7px}
.quad .qv{font-size:.92rem; line-height:1.5}
.quad .hi{border-left:3px solid var(--accent)}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{font-size:.88rem; padding:6px 13px; border:var(--border) solid var(--rule-strong);
  border-radius:var(--radius); background:var(--surface-2); font-weight:700}
.flag{display:flex; gap:12px; font-size:.9rem; padding:10px 0; border-top:var(--border) solid var(--rule)}
.flag b{font-family:var(--font-mono); font-size:.72rem; color:var(--bad); text-transform:uppercase;
  letter-spacing:.06em; white-space:nowrap; padding-top:3px}
.ok{color:var(--ink-2); font-size:.9rem}
.share{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.share code{font-family:var(--font-mono); font-size:.82rem; background:var(--surface-2);
  padding:8px 12px; border-radius:var(--radius); word-break:break-all; flex:1 1 240px}

.skins{position:fixed; z-index:50; left:50%; bottom:20px; transform:translateX(-50%);
  display:flex; gap:4px; padding:5px; background:var(--surface);
  border:var(--border-strong) solid var(--rule-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift,0 6px 24px rgba(0,0,0,.18))}
.skins button{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 14px; border:none; border-radius:var(--radius); cursor:pointer; background:transparent;
  color:var(--ink-2); font-weight:700; appearance:none; transition:all .15s}
.skins button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}
.skins button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

@media (max-width:520px){
  .bar-row{grid-template-columns:86px 1fr 44px; font-size:.8rem}
  .d5{width:38px;height:38px} .d4{width:34px;height:34px} .d3{width:30px;height:30px}
  .d2{width:26px;height:26px} .d1{width:22px;height:22px}
  .quad{grid-template-columns:1fr}
  .wrap{padding-bottom:120px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* ═══ POP — сочный пастель-поп. Дружелюбный тон: подросток не читает
       тест как экзамен, родитель — как приговор. ═══ */
[data-skin="pop"]{
  --bg:#FDF7FF; --surface:#FFFFFF; --surface-2:#F3EAFB;
  --ink:#1F1533; --ink-2:#6B5C86; --ink-3:#9C8DB5;
  --rule:#EADCF7; --rule-strong:#D9C4EF;
  --accent:#7C3AED; --accent-ink:#FFFFFF;
  --dom-R:#F97316; --dom-I:#0EA5E9; --dom-A:#EC4899;
  --dom-S:#10B981; --dom-E:#F59E0B; --dom-C:#8B5CF6;
  --warn:#D97706; --warn-soft:#FEF6E7; --bad:#E11D48; --bad-soft:#FEECF1;
  --font-display:ui-rounded,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --font-body:ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --radius:12px; --radius-lg:22px; --dot-radius:34%; --dot-border:2px;
  --shadow:0 4px 0 var(--rule-strong); --shadow-lift:0 10px 26px rgba(124,58,237,.26);
  --dot-glow:0 5px 14px rgba(124,58,237,.4);
  --card-hover:translateY(-3px); --btn-hover:translateY(-3px);
  --code-weight:800; --track-h:12px;
  --page-deco:radial-gradient(circle 300px at 88% 2%, #FBCFE8 99%, transparent 100%),
              radial-gradient(circle 240px at 2% 34%, #C7D2FE 99%, transparent 100%);
  --deco-opacity:.5;
}
[data-skin="pop"] h1{
  background:linear-gradient(96deg,#7C3AED 12%,#EC4899 64%,#F59E0B);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
[data-skin="pop"] .chip{background:var(--accent); color:var(--accent-ink); border-color:transparent}

/* ═══ BAUHAUS — первичные цвета, жирные чёрные линии, ноль скруглений.
       Точки Лайкерта уже круги растущего радиуса — здесь этот словарь
       звучит громче всего, поэтому крайние покрашены в первичные. ═══ */
[data-skin="bauhaus"]{
  --bg:#F7F5F0; --surface:#FFFFFF; --surface-2:#EDEAE3;
  --ink:#0D0D0D; --ink-2:#4A4A4A; --ink-3:#7D7D7D;
  --rule:#D5D1C8; --rule-strong:#0D0D0D;
  --accent:#1B4CE0; --accent-ink:#FFFFFF;
  --dom-R:#E63329; --dom-I:#1B4CE0; --dom-A:#FFD400;
  --dom-S:#0F9B62; --dom-E:#F07300; --dom-C:#0D0D0D;
  --warn:#F07300; --warn-soft:#FDF1E3; --bad:#E63329; --bad-soft:#FBE9E8;
  --font-display:"Century Gothic","Futura","Trebuchet MS",system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --display-case:uppercase; --display-track:.06em; --display-weight:700;
  --lbl-track:.16em; --lbl-weight:700;
  --radius:0px; --radius-lg:0px; --border:2px; --border-strong:3px;
  --dot-border:3px; --dot-radius:50%;
  --shadow:none; --shadow-lift:none; --card-hover:none; --btn-hover:none;
  --code-track:.04em; --code-weight:700;
  --track-h:14px; --track-border:3px solid var(--ink); --gauge-border:2px solid var(--ink);
  --quad-gap:3px;
  --page-deco:radial-gradient(circle 190px at 92% 6%, #FFD400 99%, transparent 100%),
              radial-gradient(circle 130px at 4% 42%, #E63329 99%, transparent 100%);
  --deco-opacity:.16;
}
[data-skin="bauhaus"] .form-card,
[data-skin="bauhaus"] .card{border-width:3px}
[data-skin="bauhaus"] .form-card:hover{background:var(--accent); color:var(--accent-ink)}
[data-skin="bauhaus"] .form-card:hover .len,
[data-skin="bauhaus"] .form-card:hover .muted{color:var(--accent-ink)}
[data-skin="bauhaus"] .dot:nth-child(1){border-color:#E63329}
[data-skin="bauhaus"] .dot:nth-child(3){border-color:#FFD400}
[data-skin="bauhaus"] .dot:nth-child(5){border-color:#1B4CE0}
[data-skin="bauhaus"] .chip{background:#FFD400; border-width:2px}