/* Светлая тема + повышенный контраст (WCAG AA) */
:root{
  --conf-bg:#f6f7f9;
  --conf-card:#ffffff;
  --conf-surface:#ffffff;          /* фон стат-блоков сделали белым */
  --conf-line:#d1d5db;            /* граница темнее для 3:1 в UI */
  --conf-muted:#374151;           /* вторичный текст темнее */
  --conf-text:#0b0f1a;            /* основной текст почти чёрный */
  --conf-accent:#e86100;          /* оранжевый чуть темнее для лучшего контраста */
  --conf-ok:#15803d; --conf-warn:#b45309; --conf-err:#b91c1c;
  --conf-radius:16px; --conf-gap:14px;
  --conf-shadow:0 8px 24px rgba(17,24,39,.06);
}

/* Контейнер/виджет */
.configurator .widget{background:var(--conf-card); border:1px solid var(--conf-line);
  border-radius:var(--conf-radius); box-shadow:var(--conf-shadow); overflow:hidden}
.configurator .flex-c {text-align: center; margin-bottom: 1rem;}
/* Заголовки — контрастнее и крупнее */
.configurator .configurator__header{padding:22px 22px 12px; border-bottom:1px solid var(--conf-line)}
.configurator .configurator__header h2{margin:0 0 6px; font-size:24px; font-weight:800; letter-spacing:.2px}
.configurator .configurator__header p{margin:0; color:var(--conf-muted)}

/* Сетка */
.configurator .grid{display:grid; grid-template-columns:1.1fr .9fr}
.configurator .col{padding:20px}
.configurator .col+.col{border-left:1px solid var(--conf-line)}
@media (max-width:900px){
  .configurator .grid{grid-template-columns:1fr}
  .configurator .col+.col{border-left:none;border-top:1px solid var(--conf-line)}
}

/* Поля — более явная рамка + фокус-обводка 3:1 */
.configurator .field{display:grid; grid-template-columns:1fr 190px; gap:12px; align-items:center; margin-bottom:var(--conf-gap)}
.configurator .field.is-wide{grid-template-columns:1fr}
.configurator .label{font-size:13px; color:var(--conf-muted); font-weight:600}

.configurator select,input,textarea{
  width:100%; padding:11px 12px; border-radius:12px;
  border:1.5px solid var(--conf-line); background:#fff; color:var(--conf-text); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.configurator select {appearance:auto;}
.configurator input[type="number"]{text-align:center}
.configurator select:focus,input:focus,textarea:focus{
  border-color:var(--conf-accent);
  box-shadow:0 0 0 3px rgba(232,97,0,.18); /* видимый фокус (WCAG 1.4.11) */
}

/* Панели */
.configurator .panel{background:var(--conf-card); border:1px solid var(--conf-line);
  border-radius:14px; padding:16px; margin:12px 0}
.configurator .panel h3{
  margin:0 0 12px; font-size:15px; font-weight:800; color:var(--conf-text);
  position:relative; padding-left:10px;
}
.configurator .panel h3:before{
  content:""; position:absolute; left:0; top:3px; bottom:3px; width:4px; border-radius:4px;
  background:var(--conf-accent); opacity:.9; /* цветной маркер заголовка */
}

/* РЕЗУЛЬТАТЫ — больше контраста, крупнее цифры */
.configurator .stats{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:10px 0}
.configurator .stat{
  background:var(--conf-surface); border:1.5px solid var(--conf-line);
  padding:14px; border-radius:14px;
}
.configurator .stat b{display:block; font-size:12px; color:var(--conf-muted); font-weight:700; letter-spacing:.2px}
.configurator .stat span{
  display:block; margin-top:6px; font-size:20px; font-weight:600; color:var(--conf-text);
}

/* Подсказки/примечания */
.configurator .note{font-size:13px; color:var(--conf-muted)}
.configurator .ok{color:var(--conf-ok)} .configurator .warn{color:var(--conf-warn)} .configurator .err{color:var(--conf-err)}

/* Визуализация S×P — контрастнее сетка */
.configurator .grid-vis{
  display:grid; gap:4px; grid-template-columns:repeat(auto-fill,minmax(16px,1fr));
  background:#fff; border:1.5px solid var(--conf-line); padding:12px; border-radius:12px;
  max-height:260px; overflow:auto
}
.configurator .cell{
  height:16px; border-radius:4px;
  background:linear-gradient(180deg,#ffa45c,#e86100); /* ярче, но на белом > 4.5:1 с белым текстом мы не используем */
}

/* Кнопки — более тёмный акцент + чёткий хов/фокус */
.configurator .btn{
  appearance:none; border:0; border-radius:12px;
  background:var(--conf-accent); color:#fff; font-weight:800; padding:12px 16px; cursor:pointer;
  transition:filter .15s ease, transform .02s ease, box-shadow .15s ease;
}
.configurator .btn:hover{filter:brightness(.95)}
.configurator .btn:active{transform:translateY(1px)}
.configurator .btn:focus-visible{box-shadow:0 0 0 3px rgba(232,97,0,.28)}

.configurator .btn.secondary{
  background:#f3f4f6; color:var(--conf-text);
  border:1.5px solid var(--conf-line); font-weight:700;
}

/* Ссылки в тексте заметнее, не только цветом */
.configurator a{color:var(--conf-accent); font-weight:700; text-underline-offset:3px}
.configurator a:hover{text-decoration:underline}