/* Конфигуратор на сайте (data-mode="web"): разметка и app.js — те же, что у Mini App
 * (style.css), здесь — тема сайта и раскладка двух вёрсток.
 * Компьютер: 3D слева на всю высоту окна, панель ручек справа.
 * Телефон: 3D на весь экран, ручки — в нижнем выдвижном листе (site.js: перетаскивание
 * за ручку, три положения), «Додати в кошик» всегда внизу. */
html[data-mode="web"] body { font: 16px/1.5 var(--sans); }
html[data-mode="web"] main#main { max-width: none; margin: 0; }
html[data-mode="web"] .app { max-width: none; margin: 0; }
html[data-mode="web"] .card { border-radius: var(--radius); box-shadow: var(--shadow); }
html[data-mode="web"] .card-title { color: var(--head); font-family: var(--sans); }
html[data-mode="web"] .primary { border-radius: 999px; min-height: 54px; font-size: 17px;
  transition: transform .18s var(--spring), opacity .2s; }
html[data-mode="web"] .primary:not(:disabled):active { transform: scale(.97); }
html[data-mode="web"] .primary:not(:disabled):hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
html[data-mode="web"] .stage { border: 0; }
html[data-mode="web"] #stage-sentinel { display: none; }
html[data-mode="web"] .chip[aria-checked="true"] { animation: pop .3s var(--spring); }
.sheet-handle { display: none; }

/* инструменты сайта: поделиться, сравнить, сохранить */
.web-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 58px; padding: 8px 4px;
        border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; font-size: 13px;
        font-weight: 600; transition: transform .18s var(--spring), border-color .2s; }
.tool:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tool:active { transform: scale(.94); }
.tool .ic { width: 20px; height: 20px; color: var(--accent-ink); }

/* сравнение */
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cmp tbody th { font-weight: 600; color: var(--muted); }
.cmp tr.chg td:last-child { color: var(--accent-ink); font-weight: 700; }
.cmp tr.chg { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }

/* скелетоны: панель до каталога, превью до первой модели */
html.cfg-loading #presets, html.cfg-loading #knobs { min-height: 44px; border-radius: 12px;
  background: linear-gradient(100deg, var(--card-2) 30%, var(--page) 50%, var(--card-2) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite; }
html.cfg-loading #knobs { min-height: 120px; margin-top: 12px; }
html[data-mode="web"] .stage:not(.has-model)::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
  animation: breathe 1.6s ease-in-out infinite; pointer-events: none;
}
@keyframes breathe { 50% { transform: scale(1.35); opacity: .45; } }

/* ------------------------------------------------------------------ компьютер */
html[data-mode="web"][data-layout="d"] .app {
  max-width: var(--wrap); margin: 0 auto; padding: 16px var(--gutter) 24px;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(360px, 440px); gap: 24px;
  grid-template-areas: "kinds kinds" "stage panel"; align-items: start;
}
html[data-mode="web"][data-layout="d"] #kinds-group { grid-area: kinds; padding: 0; background: none; }
html[data-mode="web"][data-layout="d"] .stage,
html[data-mode="web"][data-layout="d"] .stage.compact {
  grid-area: stage; position: sticky; top: 88px; height: calc(100vh - 112px); min-height: 420px;
  border-radius: 28px; overflow: hidden; box-shadow: var(--shadow);
}
html[data-mode="web"][data-layout="d"] .stage.compact .hint { display: block; }
html[data-mode="web"][data-layout="d"] .panel { grid-area: panel; padding: 0; }
html[data-mode="web"][data-layout="d"] .actions { margin: 0; padding: 12px 0 16px;
  background: linear-gradient(transparent, var(--page) 16px); }
html[data-mode="web"][data-layout="d"] .ft { margin-top: 32px; }
@media (max-width: 900px) {
  html[data-mode="web"][data-layout="d"] .app { grid-template-columns: 1fr; grid-template-areas: "kinds" "stage" "panel"; }
  html[data-mode="web"][data-layout="d"] .stage { position: relative; top: 0; height: 56vh; }
}

/* ------------------------------------------------------------------ телефон */
html[data-mode="web"][data-layout="m"] { --sheet-top: 52svh; --sheet-mini: calc(100svh - 168px); }
html[data-mode="web"][data-layout="m"] body { padding: 0; overflow: hidden; overscroll-behavior: none; }
.cfg-top { position: fixed; top: 0; left: 0; right: 0; z-index: 8; display: flex; align-items: center; gap: 6px;
           padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; pointer-events: none; }
.cfg-top > * { pointer-events: auto; }
/* заголовок над 3D — на своей стеклянной подложке, как кнопки рядом: фон сцены бывает
   тёмным (светлое изделие, .on-dark), светлым (тёмное в тёмной теме, .on-light) и обычным,
   а подложка цвета карточки держит контраст с --text ≥ 4.5:1 на любом из них.
   На узком экране (320) не многоточие: кегль чуть меньше, а не влез — вторая строка
   (поэтому радиус не «таблетка») */
.cfg-title { flex: 0 1 auto; min-width: 0; margin: 0 auto; padding: 7px 14px; border-radius: 20px;
             font: 600 clamp(15px, 4.6vw, 17px)/1.2 var(--serif); text-align: center; color: var(--text);
             text-wrap: balance; overflow-wrap: anywhere;
             background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(10px);
             box-shadow: var(--shadow); }
.icon-btn.glass { background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(10px);
                  box-shadow: var(--shadow); color: var(--text); }
.lang-mini { font-size: 13px; font-weight: 700; color: var(--text); }
html[data-mode="web"][data-layout="m"] .stage,
html[data-mode="web"][data-layout="m"] .stage.compact {
  position: fixed; top: 0; left: 0; right: 0; height: calc(var(--sheet-top) + 28px); z-index: 1;
  transition: height .35s var(--ease);
}
html.sheet-mini[data-mode="web"][data-layout="m"] .stage { height: calc(var(--sheet-mini) + 28px); }
html[data-mode="web"][data-layout="m"] .stage-top { top: 64px; }
html[data-mode="web"][data-layout="m"] .stage .hint { bottom: 40px; }
html[data-mode="web"][data-layout="m"] #kinds-group {
  position: fixed; top: calc(60px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 7; padding: 0 0 4px;
  background: none;
}
html[data-mode="web"][data-layout="m"] #kinds-group .chip { background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(10px); min-height: 38px; }
html[data-mode="web"][data-layout="m"] #kinds-group .chip[aria-checked="true"] { background: var(--text); }
html[data-mode="web"][data-layout="m"] .stage-top { top: 112px; }
html[data-mode="web"][data-layout="m"] .panel {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--sheet-top); z-index: 5;
  overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 0;
  background: var(--page); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px -12px rgb(0 0 0 / 30%);
  transition: top .35s var(--ease);
}
html[data-mode="web"][data-layout="m"] .panel.dragging { transition: none; }
html.sheet-full[data-mode="web"][data-layout="m"] .panel { top: calc(56px + env(safe-area-inset-top, 0px)); }
html.sheet-mini[data-mode="web"][data-layout="m"] .panel { top: var(--sheet-mini); }
html[data-mode="web"][data-layout="m"] .sheet-handle {
  display: block; position: sticky; top: 0; z-index: 3; width: calc(100% + 24px); margin: 0 -12px 8px; height: 30px;
  border: 0; background: var(--page); cursor: grab; touch-action: none;
}
html[data-mode="web"][data-layout="m"] .sheet-handle::before {
  content: ""; display: block; width: 42px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--line);
}
html[data-mode="web"][data-layout="m"] .actions { position: sticky; bottom: 0; margin: 0 -12px;
  padding: 10px 12px calc(10px + var(--safe-bottom)); background: linear-gradient(transparent, var(--page) 16px); }
html[data-mode="web"][data-layout="m"] .toast { bottom: calc(96px + var(--safe-bottom)); }
html[data-mode="web"][data-layout="m"] .card { box-shadow: none; }
/* 3D ниже верхней строки и чипов видов: модель не прячется под ними */
html[data-mode="web"][data-layout="m"] #view { height: calc(100% - 112px); margin-top: 112px; }
/* светлое изделие на тёмном фоне: подписи на стекле — тёмной подложкой (контраст ≥ 4.5:1) */
html[data-mode="web"] .stage.on-dark .chip.glass,
html[data-mode="web"] .stage.on-dark .hint { background: rgb(20 16 12 / 55%); color: #fff; }
/* тёмное изделие в тёмной теме — светлый фон: подсказка на тёмном стекле основным текстом
   (приглушённый на просвечивающем светлом фоне падал до 3.7:1) */
html[data-mode="web"] .stage.on-light .hint { color: var(--text); }
/* статус формы над 3D — на непрозрачной карточке: зелёный «ok» на стекле поверх тёмного
   фона сцены проседал ниже 4.5:1 */
html[data-mode="web"] .stage .badge { background: var(--card); }