/* Калькулятор профнастила + 3D (02.11) — в стилистике витрины (тёмная тема по умолчанию) */
.calc-block {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 22px 24px 18px;
  margin: 26px 0;
  background: rgba(255, 255, 255, 0.04);
}
.calc-block h2 { margin: 0 0 14px; font-size: 22px; }
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 18px;
  margin-bottom: 16px;
}
.calc-field label {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 5px;
}
.calc-field select,
.calc-field input[type="number"] {
  width: 100%;
  background: rgba(10, 14, 22, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  font-size: 15px;
}
.calc-field select:focus-visible,
.calc-field input:focus-visible { outline: 2px solid var(--c-red, #e03a3a); outline-offset: 1px; }
html.theme-light .calc-block { border-color: rgba(22, 32, 46, 0.18); background: rgba(22, 32, 46, 0.04); }
html.theme-light .calc-field label { color: rgba(22, 32, 46, 0.66); }
html.theme-light .calc-field select,
html.theme-light .calc-field input[type="number"] { background: #fff; color: var(--c-navy, #16202e); border-color: rgba(22, 32, 46, 0.35); }

.calc-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 4px 0 12px;
}
.calc-res .v { font-size: 26px; font-weight: 600; letter-spacing: 0.01em; }
.calc-res .k { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }
html.theme-light .calc-res .k { color: rgba(22, 32, 46, 0.6); }
.calc-note { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); margin: 8px 0 0; }
html.theme-light .calc-note { color: rgba(22, 32, 46, 0.55); }
.calc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.calc-actions .btn-apex, .calc-actions .btn-ghost { padding: 10px 18px; }

.calc-3d-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
  margin-top: 14px;
  background: #0b0d12;
  display: block;
}
@media (max-width: 640px) {
  .calc-3d-frame { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .calc-actions .btn-apex, .calc-actions .btn-ghost { transition: none !important; transform: none !important; }
}

/* Тост (анонсером из прототипа; вне типа-страниц не рисуется) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%) translateY(8px);
  background: #161d29;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 80;
  max-width: min(92vw, 560px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }