/* ────────────────────────────────────────────────────────────────────
   Панель стенда — единая дизайн-система (стиль Apple HIG, тёмное стекло)
   Подключение в стенде:
     <link rel="stylesheet" href="/panel.css">
     <script src="/panel.js"></script>
     StendPanel.build({ defs, desc, params, defaults, eases, evalEase,
                        bezApprox, storageKey })
   Компоненты: .st-gear (кнопка), .st-panel (панель), h4 (заголовок секции),
   .card (карточка секции), .row (строка), .val (значение), select, range,
   .curve (редактор безье), .st-reset (кнопка сброса), .st-tip (подсказка)
   ──────────────────────────────────────────────────────────────────── */

:root {
  --st-accent: #0A84FF;                 /* системный синий Apple */
  --st-glass: rgba(24, 24, 26, .72);    /* стекло панели */
  --st-glass-2: rgba(40, 40, 42, .85);  /* стекло подсказки */
  --st-card: rgba(255, 255, 255, .05);  /* карточка секции */
  --st-hairline: rgba(255, 255, 255, .07); /* волосяной разделитель */
  --st-border: rgba(255, 255, 255, .12);
  --st-text: rgba(255, 255, 255, .92);
  --st-text-2: rgba(255, 255, 255, .5);
  --st-text-3: rgba(255, 255, 255, .45);
  --st-track: rgba(255, 255, 255, .22);
  --st-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --st-radius: 16px;
  --st-radius-card: 12px;
  --st-blur: blur(28px) saturate(1.7);
}

/* ── Кнопка-шестерёнка (левый нижний угол) ── */
.st-gear {
  position: fixed; left: 12px; bottom: 12px; z-index: 20;
  width: 36px; height: 36px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28, 28, 30, .6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 0.5px solid var(--st-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.st-gear:hover { background: rgba(44, 44, 46, .75); }
.st-gear:active { transform: scale(.92); }
.st-gear svg { width: 16px; height: 16px; display: block; }

/* ── Панель ── */
.st-panel {
  position: fixed; left: 12px; bottom: 58px; z-index: 20; width: 324px;
  max-height: calc(100dvh - 74px); overflow-y: auto;
  background: var(--st-glass);
  -webkit-backdrop-filter: var(--st-blur);
  backdrop-filter: var(--st-blur);
  border: 0.5px solid var(--st-border);
  border-radius: var(--st-radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 2px 12px rgba(0, 0, 0, .35);
  padding: 12px 14px;
  color: #fff;
  font: 13px/1.35 var(--st-font);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
  transform-origin: bottom left;
  animation: st-panel-in .28s cubic-bezier(.32, .72, 0, 1);
}
@keyframes st-panel-in {
  from { opacity: 0; transform: scale(.94) translateY(6px); }
}
.st-panel::-webkit-scrollbar { width: 5px; }
.st-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 3px; }
.st-panel::-webkit-scrollbar-track { background: transparent; }

/* ── Секции ── */
.st-panel h4 {
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--st-text-3);
  margin: 16px 6px 6px;
}
.st-panel h4:first-child { margin-top: 2px; }
.st-panel .card {
  background: var(--st-card);
  border: 0.5px solid rgba(255, 255, 255, .06);
  border-radius: var(--st-radius-card);
  overflow: hidden;
}
.st-panel .row {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 5px 12px;
}
.st-panel .card > .row + .row,
.st-panel .card > canvas + .row { border-top: 0.5px solid var(--st-hairline); }
.st-panel label { flex: 1; color: var(--st-text); cursor: help; }
.st-panel .val {
  min-width: 44px; text-align: right;
  color: var(--st-text-2); font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ── Слайдер (заливку слева рисует panel.js) ── */
.st-panel input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 104px; height: 3px; border-radius: 2px;
  background: var(--st-track);
  outline: none;
}
.st-panel input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45), 0 0 0 0.5px rgba(0, 0, 0, .18);
}
.st-panel input[type=range]::-moz-range-thumb {
  width: 17px; height: 17px; border: none; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

/* ── Выпадающий список ── */
.st-panel select {
  -webkit-appearance: none; appearance: none;
  max-width: 150px;
  background: rgba(120, 120, 128, .26)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'><path d='M1.5 5.2 5 1.7 8.5 5.2M1.5 8.8 5 12.3 8.5 8.8' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 8px center / 10px 14px;
  border: none; border-radius: 7px;
  color: #fff; font: 12px var(--st-font);
  padding: 5px 26px 5px 10px;
  cursor: pointer;
}

/* ── Редактор кривой безье: квадратное поле, удобное для лепки ── */
.st-panel canvas.curve {
  display: block; width: calc(100% - 24px); height: auto;
  aspect-ratio: 1 / 1;
  margin: 4px auto 12px; border-radius: 8px;
  touch-action: none; cursor: crosshair;
}

/* ── Кнопка сброса ── */
.st-panel .st-reset {
  margin: 14px 0 2px; width: 100%;
  background: var(--st-card);
  border: 0.5px solid rgba(255, 255, 255, .06);
  border-radius: var(--st-radius-card);
  padding: 10px 0; cursor: pointer;
  color: var(--st-accent); font: 500 13px var(--st-font);
  transition: background .15s ease;
}
.st-panel .st-reset:hover { background: rgba(255, 255, 255, .09); }
.st-panel .st-reset:active { background: rgba(255, 255, 255, .12); }

/* ── Всплывающая подсказка ── */
.st-tip {
  position: fixed; z-index: 30; max-width: 260px;
  display: block; opacity: 0; visibility: hidden;
  transition: opacity .16s ease, visibility .16s ease;
  background: var(--st-glass-2);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 0.5px solid var(--st-border);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
  padding: 9px 11px; color: rgba(255, 255, 255, .85);
  font: 12px/1.5 var(--st-font);
  pointer-events: none;
}
.st-tip.show { opacity: 1; visibility: visible; }

/* ────────────────────────────────────────────────────────────────────
   Тема «Нотхинг» (Nothing OS): матовый чёрный, моноширинная типографика,
   красная точка-акцент, пунктирные разделители. Включается классом
   .st-theme-nothing на .st-gear / .st-panel / .st-tip (панель делает сама)
   ──────────────────────────────────────────────────────────────────── */
.st-theme-nothing {
  --st-accent: #D71921;
  --st-glass: rgba(10, 10, 10, .93);
  --st-glass-2: rgba(16, 16, 16, .96);
  --st-card: rgba(255, 255, 255, .03);
  --st-hairline: rgba(255, 255, 255, .16);
  --st-border: rgba(255, 255, 255, .2);
  --st-track: rgba(255, 255, 255, .25);
  --st-font: "SF Mono", ui-monospace, "Roboto Mono", Menlo, monospace;
  --st-radius: 10px;
  --st-radius-card: 8px;
  --st-blur: blur(8px);
}
.st-panel.st-theme-nothing { font-size: 11.5px; letter-spacing: .02em; }
.st-panel.st-theme-nothing h4 { letter-spacing: .22em; color: rgba(255, 255, 255, .6); }
.st-panel.st-theme-nothing h4::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--st-accent);
  margin-right: 8px; vertical-align: 1px;
}
.st-panel.st-theme-nothing .card > .row + .row,
.st-panel.st-theme-nothing .card > canvas + .row {
  border-top: 1px dashed rgba(255, 255, 255, .18);
}
.st-panel.st-theme-nothing select { border-radius: 4px; }
.st-panel.st-theme-nothing .st-reset {
  border-radius: 8px;
  text-transform: uppercase; letter-spacing: .18em; font-size: 11px;
}