/* Стили CSS-генераторов: css-gradient-generator, css-box-shadow-generator. Общие файлы сайта не меняются. */
.gen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; padding: 16px; }
.gen-left, .gen-right { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.gen-h { font-weight: 600; font-size: 14px; margin: 0; }
.gen-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; }
.gen-row > .lbl { min-width: 64px; font-weight: 600; }
.gen-row[hidden] { display: none; }
.gen input[type="text"], .gen select {
  height: 38px; padding: 0 10px; font: 400 15px var(--mono); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; min-width: 0;
}
.gen select { font-family: var(--font); }
.gen input[type="text"]:focus, .gen select:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.gen input.invalid { border-color: var(--danger); background: var(--danger-tint); }
.gen input.num { width: 64px; text-align: right; }
.gen input.hex { width: 104px; }
.gen input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--blue); height: 28px; }
.gen input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.gen input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; }
.gen label.chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.gen-ferr { flex-basis: 100%; color: var(--danger); font-size: 13px; }
.gen-ferr:empty { display: none; }
.gen-out { display: flex; flex-direction: column; gap: 8px; }
.gen-code {
  margin: 0; padding: 12px 14px; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-ctl);
  font: 400 14px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); min-height: 48px;
}
.gen-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.gen .notice { margin: 0; }
.checker {
  background-color: #fff;
  background-image: linear-gradient(45deg, #ccd3de 25%, transparent 25%), linear-gradient(-45deg, #ccd3de 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccd3de 75%), linear-gradient(-45deg, transparent 75%, #ccd3de 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.icon-btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- gradient ---------- */
.gg-preview-wrap { border-radius: var(--r-ctl); overflow: hidden; border: 1px solid var(--border); }
.gg-preview { height: 220px; }
.gg-bar { position: relative; height: 32px; margin: 4px 14px 10px; border-radius: 8px; border: 1px solid var(--border); touch-action: none; }
.gg-bar-fill { position: absolute; inset: 0; border-radius: 7px; }
.gg-marker {
  position: absolute; top: 50%; width: 22px; height: 38px; margin: 0; padding: 0; transform: translate(-50%, -50%);
  border-radius: 8px; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 1px 4px rgba(0, 0, 0, .35); cursor: grab; touch-action: none;
}
.gg-marker::after { content: ""; position: absolute; inset: -6px -11px; } /* зона касания ≥ 44 px */
.gg-marker.active { box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 0 3px var(--blue); z-index: 1; }
.gg-marker:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--blue), 0 0 0 5px rgba(36, 81, 232, .35); z-index: 2; }
.gg-stops { display: flex; flex-direction: column; gap: 10px; }
.gg-stop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-ctl); font-size: 14px; }
.gg-stop.active { border-color: var(--blue); }
.gg-stop .n { font-weight: 600; min-width: 18px; color: var(--muted); }
.gg-stop label { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- box shadow ---------- */
.bs-stage { min-height: 280px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-ctl); border: 1px solid var(--border); padding: 40px; }
.bs-box { width: 160px; height: 160px; }
.bs-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-tabs [role="tab"] { height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 500 14px var(--font); cursor: pointer; }
.bs-tabs [role="tab"][aria-selected="true"] { background: var(--blue-tint); color: var(--blue); border-color: var(--blue); font-weight: 600; }
.bs-tabs [role="tab"]:focus-visible { outline: none; box-shadow: var(--focus); }
.bs-layer { display: flex; flex-direction: column; gap: 10px; }
.bs-slider { display: grid; grid-template-columns: 120px minmax(0, 1fr) 72px; align-items: center; gap: 4px 10px; font-size: 14px; }
.bs-slider .gen-ferr { grid-column: 1 / -1; }
.bs-layer-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-preview-settings summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.bs-preview-settings .gen-row { margin-top: 10px; }

@media (max-width: 900px) {
  .gen { grid-template-columns: minmax(0, 1fr); }
  /* мобильный порядок (§15): preview → полоса stops/слои → контролы → CSS-вывод */
  .gen .gen-left, .gen .gen-right { display: contents; }
  .gg-preview-wrap, .bs-stage { order: 1; }
  .gg-bar { order: 2; }
  .gen-right > * { order: 3; }
  .bs-preview-settings { order: 4; }
  .gen-out { order: 5; }
  .gen > .gen-left > .notice { order: 6; }
}
@media (max-width: 768px) {
  .gen { padding: 12px; gap: 14px; }
  .gg-preview { height: 160px; }
  .bs-stage { min-height: 220px; padding: 24px; }
  .bs-box { width: 120px; height: 120px; }
  .bs-slider { grid-template-columns: minmax(0, 1fr) 72px; }
  .bs-slider > .lbl { grid-column: 1 / -1; }
  .gen input[type="range"] { height: 44px; }
  .gen input[type="text"], .gen select, .gen input[type="color"], .icon-btn { height: 44px; }
  .icon-btn { width: 44px; }
}