/* === Единые переменные темы для теории/виджетов === */
:root{
  --th-fg:#0f172a; --th-br:#e5e7eb;
  --th-card:#f8fafc; /* фон «серого блока» */
  --th-btn-br:#d1d5db;

  --opt-hov:#eef2ff;  /* hover варианта */
  --opt-sel:#eff6ff;  /* выбран */
  --opt-ok:#ecfdf5;   /* правильный */
  --opt-bad:#fef2f2;  /* неправильный */
  --opt-miss:#fff7ed; /* пропущен */
  --c-blue:#3b82f6; --c-green:#16a34a; --c-red:#dc2626; --c-amber:#f59e0b;
}
@media (prefers-color-scheme: dark){
  :root{
    --th-fg:#e5e7eb; --th-br:#1f2937;
    --th-card:#0f172a;
    --th-btn-br:#374151;
    --opt-hov:#111827; --opt-sel:#0b1324;
    --opt-ok:#052e2b; --opt-bad:#1f0b0b; --opt-miss:#1c1917;
    --c-blue:#60a5fa; --c-green:#34d399; --c-red:#f87171; --c-amber:#fb923c;
  }
}

/* === Универсальный каркас виджета === */
.th-widget .tw-card{
  background: var(--th-card);
  border: 1px solid var(--th-br);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  color: var(--th-fg);
}
.th-widget .tw-intro{
  margin-bottom: 10px;
  line-height: 1.5;
}
.th-widget .tw-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.th-widget .tw-gap{
  display:inline-block;
  min-width:40px;
  width:auto;
  max-width:50px;
  border:1px solid #d1d5db;
  border-radius:6px;
  padding:2px 6px;
  margin:0 4px;
}

/* Кнопки/поля */
.th-widget .tw-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border-radius:8px; border:1px solid var(--th-btn-br);
  background:#fff; cursor:pointer;
}
.th-widget .tw-btn:disabled{ opacity:.6; cursor:default; }
.th-widget .tw-input{
  height:34px; border:1px solid var(--th-btn-br); border-radius:8px;
  padding:0 10px; background:#fff;
}
.th-widget .tw-feedback{ margin-top:6px; min-height:1.2em; }

/* Списки вариантов (для select-виджетов) */
.th-widget .tw-list{ list-style:none; margin:8px 0 12px; padding:0; }
.th-widget .tw-option{
  padding:6px 10px; border-radius:8px; cursor:pointer;
  outline:2px solid transparent;
  transition: background-color .12s ease, outline-color .12s ease;
}
.th-widget .tw-option + .tw-option{ margin-top:6px; }
.th-widget .tw-list.tw-two-col{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(var(--tw-grid-columns, 2), minmax(200px, 1fr));
}
.th-widget .tw-list.tw-two-col .tw-option{
  margin:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.th-widget .tw-list.tw-two-col .tw-option + .tw-option{
  margin-top:0;
}

@media (max-width: 640px){
  .th-widget .tw-list.tw-two-col{
    grid-template-columns:repeat(var(--tw-grid-columns, 2), minmax(140px, 1fr));
  }
}

@media (max-width: 480px){
  .th-widget .tw-list.tw-two-col{
    grid-template-columns:repeat(1, minmax(0, 1fr));
  }
}

.th-widget .tw-option:hover{ background:var(--opt-hov); }
.th-widget .tw-option.is-selected{ background:var(--opt-sel); outline-color:var(--c-blue); }
.th-widget .tw-option.is-correct{  background:var(--opt-ok);   outline-color:var(--c-green); }
.th-widget .tw-option.is-wrong{    background:var(--opt-bad);  outline-color:var(--c-red); }
.th-widget .tw-option.is-missed{   background:var(--opt-miss); outline-color:var(--c-amber); }

/* Специфика pow-виджета */
.th-widget .tw-pow .tw-label{ min-width:140px; color:#475569; }
.th-widget .tw-pow .tw-range-row .tw-range{ flex:1; }
.th-widget .tw-pow .tw-formula{ margin-top:6px; font-weight:600; font-size:1.15rem; text-align:left; }


/* Список для перетаскивания */
.th-widget .tw-sort{
  list-style:none;
  margin:8px 0 12px;
  padding:0;
}
.th-widget .tw-item{
  padding:8px 10px;
  border-radius:8px;
  border:1px dashed #d1d5db;
  background:#fff;
  cursor:grab;
  user-select:none;
}
.th-widget .tw-item + .tw-item{ margin-top:8px; }
.th-widget .tw-item.is-dragging{
  opacity:.7;
  border-style:solid;
  cursor:grabbing;
}

/* Подсветка результата */
.th-widget .tw-item.is-correct{
  background:#ecfdf5;
  border-color:#16a34a;
}
.th-widget .tw-item.is-wrong{
  background:#fef2f2;
  border-color:#dc2626;
}



.tw-figure{
  margin:20px auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  max-width:min(100%, 480px);
}
.tw-figure img{
  max-width:100%;
  width:100%;
  height:auto;
  border-radius:12px;
  object-fit:contain;
  box-shadow:0 2px 8px rgba(15,23,42,0.08);
}
.tw-figure figcaption{
  font-size:0.9rem;
  color:#475569;
  text-align:center;
  max-width:90%;
}


/* Плоттер линейной функции */

.theory-block table{
  width:100%;
  border-collapse:collapse;
  margin:20px 0;
  table-layout:fixed;
}
.theory-block table td,
.theory-block table th{
  text-align:center;
  vertical-align:middle;
}
.theory-block table.algo-table td,
.theory-block table.algo-table th{
  text-align:left;
  vertical-align:top;
}
.theory-block table.algo-table strong{
  display:inline-block;
  min-width:1.5em;
}
.theory-block table td img,
.theory-block table th img{
  display:block;
  margin:0 auto;
  width:100%;
  max-height:400px;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(15,23,42,0.08);
}


.tw-card.tw-important {
  background: #fef2f2; /* нежно-красный фон */
  border: 2px solid #ef4444; /* красная рамка */
  color: #b91c1c; /* тёмно-красный текст */
  text-align: center;
  padding: 1.5em;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.tw-plot .tw-plot-box{
  width:100%;
  background:linear-gradient(135deg,#f8fafc,#eef2ff);
  border-radius:18px;
  padding:0px;
  box-shadow:0 8px 20px rgba(15,23,42,0.08);
  overflow:hidden;
}
.tw-plot .tw-plot-box .tw-plot-svg{
  box-shadow:none;
  border-radius:16px;
}
.tw-plot-svg{
  width:100%;
  height:auto;
  display:block;
  background:#fff;
}

.tw-plot .plot-bg{
  fill:#ffffff;
  stroke:rgba(148,163,184,0.35);
  stroke-width:1.4;
}

.tw-plot .grid-line{
  stroke:rgba(148,163,184,0.25);
  stroke-width:1;
}
.tw-plot .grid-line.horizontal{ stroke-dasharray:4 6; }
.tw-plot .grid-line.vertical{ stroke-dasharray:6 8; }

.tw-plot .axis-line{
  stroke:#1e293b;
  stroke-width:2.2;
  stroke-linecap:round;
}

.tw-plot .axis-label{
  fill:#1e293b;
  font-size:16px;
  font-weight:700;
  user-select:none;
}
.tw-plot .axis-label.axis-label-x{ text-anchor:start; dominant-baseline:central; }
.tw-plot .axis-label.axis-label-y{ text-anchor:end; dominant-baseline:central; }

.tw-plot .tick{
  stroke:#1e293b;
  stroke-width:1.4;
}
.tw-plot .tick-label{
  fill:#475569;
  font-size:14px;
  font-weight:600;
  user-select:none;
}
.tw-plot .tick-label.tick-label-y{ text-anchor:end; }
.tw-plot .tick-label.tick-label-x{ text-anchor:middle; }

.tw-plot .pt{
  fill:#1d4ed8;
  stroke:#93c5fd;
  stroke-width:2;
}
.tw-plot .pt.pt-b{
  fill:#f97316;
  stroke:#fed7aa;
}
.tw-plot .lbl{
  fill:#0f172a;
  font-size:18px;
  font-weight:700;
  text-shadow:0 1px 2px rgba(255,255,255,0.8);
}

.tw-plot .line{
  stroke:#2563eb;
  stroke-width:3.2;
  stroke-linecap:round;
}

.tw-plot.tw-plot-linear .tw-controls{
  gap:12px;
}

.pt-good{ fill:#10b981; stroke:#065f46; stroke-width:1.2; }
.pt-bad { fill:#ef4444; stroke:#991b1b; stroke-width:1.2; opacity:.85; }