/* =========================
   SergeyDesigner — Tool Skin (Gilbert-friendly)
   Универсальный, модульный, совместим с .tool-* разметкой
   ========================= */

:root {
  /* Палитра Gilbert */
  --sd-bg: #0b0f18;
  --sd-surface: #0f1420;
  --sd-panel: #141925;
  --sd-text: #e9edf7;
  --sd-muted: #9eb0d6;
  --sd-soft: #cfd7f0;
  --sd-border: rgba(255, 255, 255, 0.12);
  --sd-border-soft: rgba(255, 255, 255, 0.08);
  --sd-accent: var(--color-primary, #ff8a26);
  --sd-accent-2: #d6721a;
  --sd-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);

  /* Радиусы/отступы */
  --sd-r-lg: 14px;
  --sd-r-md: 12px;
  --sd-r-sm: 10px;
  --sd-gap: 14px;
  --sd-gap-lg: 18px;

  /* Высоты превью (адаптив) */
  --sd-preview-h: 260px;
}

@media (max-width: 1199.98px) {
  :root {
    --sd-preview-h: 240px;
  }
}
@media (max-width: 991.98px) {
  :root {
    --sd-preview-h: 220px;
  }
}
@media (max-width: 575.98px) {
  :root {
    --sd-preview-h: 200px;
  }
}

/* ====== GRID ====== */
:where(.sd-tool-grid, .tool-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@supports (grid-template-columns: subgrid) {
  /* на будущее */
}

@media (max-width: 991.98px) {
  :where(.sd-tool-grid, .tool-grid) {
    grid-template-columns: 1fr;
  }
}

/* ====== CARD ====== */
:where(.sd-card, .tool-card) {
  background: var(--sd-panel);
  border: 1px solid var(--sd-border-soft);
  border-radius: var(--sd-r-lg);
  overflow: hidden;
  box-shadow: none;
}
:where(.sd-card__head, .tool-card__head) {
  padding: 12px 16px;
  border-bottom: 1px solid var(--sd-border-soft);
  background: var(--sd-surface);
}
:where(.sd-card__head, .tool-card__head) h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.2px;
  color: #dbe3ff;
}
:where(.sd-card__body, .tool-card__body) {
  padding: var(--sd-gap);
}

/* ====== DROPZONE ====== */
:where(.sd-drop, .tool-drop) {
  position: relative;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: var(--sd-r-md);
  background: rgba(255, 255, 255, 0.03);
  padding: 18px;
  text-align: center;
  margin-bottom: var(--sd-gap);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
:where(.sd-drop, .tool-drop:hover) {
  background: rgba(255, 255, 255, 0.06);
}
:where(.sd-drop, .tool-drop).is-over {
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sd-accent) 35%, transparent);
  background: rgba(14, 70, 255, 0.05);
}
:where(.sd-drop, .tool-drop) input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
:where(.sd-drop__hint, .tool-drop__hint) {
  color: #cfd7f0;
  opacity: 0.95;
  pointer-events: none;
}
:where(.sd-drop__hint, .tool-drop__hint) u {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ====== CONTROLS ====== */
.sd-label,
.tool-label {
  display: block;
  font-size: 12px;
  color: #cfd7f0;
  margin-bottom: 6px;
}
.sd-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sd-gap);
}
@media (max-width: 575.98px) {
  .sd-controls {
    grid-template-columns: 1fr;
  }
}

/* Range (Chrome/Edge/Firefox) */
.sd-range,
#jpgQuality {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--sd-accent), var(--sd-accent-2));
  border-radius: 999px;
  outline: none;
  border: 0;
  opacity: 0.9;
}
.sd-range:hover,
#jpgQuality:hover {
  opacity: 1;
}
.sd-range::-webkit-slider-thumb,
#jpgQuality::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--sd-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.sd-range::-moz-range-thumb,
#jpgQuality::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--sd-accent);
}

/* Color input */
.sd-color,
#jpgBg {
  width: 52px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--sd-border);
  border-radius: 8px;
  background: var(--sd-surface);
}

/* ====== PREVIEWS ====== */
:where(.sd-previews, .tool-previews) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sd-gap);
  margin-top: 10px;
}
@media (max-width: 575.98px) {
  :where(.sd-previews, .tool-previews) {
    grid-template-columns: 1fr;
  }
}

:where(.sd-preview, .tool-preview) {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sd-border-soft);
  border-radius: var(--sd-r-md);
  padding: 10px;
}
:where(.sd-preview__title, .tool-preview__title) {
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 6px;
}

/* Шахматка + адаптивная высота */
:where(.sd-preview img, .tool-preview img) {
  display: block;
  width: 100%;
  height: var(--sd-preview-h);
  object-fit: contain;
  background: linear-gradient(45deg, #11151d 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(-45deg, #11151d 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(45deg, transparent 75%, #11151d 75%) -8px 0/16px 16px,
    linear-gradient(-45deg, transparent 75%, #11151d 75%) -8px 0/16px 16px,
    #0b0f18;
  border-radius: 8px;
}

/* Скелетон для превью (когда грузится) */
.sd-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.05)
  );
  animation: sd-shimmer 1.2s infinite;
}
@keyframes sd-shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* Метаданные + подсказки */
:where(.sd-meta, .tool-meta) {
  font-size: 12px;
  color: var(--sd-muted);
  margin-top: 6px;
  min-height: 1.2em;
}
:where(.sd-hint, .tool-hint) {
  font-size: 12px;
  color: #8ea1c7;
  margin-top: 8px;
}

/* ====== ACTIONS + BUTTONS ====== */
:where(.sd-actions, .tool-actions) {
  margin-top: var(--sd-gap);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Нормализуем vlt-btn под этот блок */
.vlt-btn.vlt-btn--primary {
  background: linear-gradient(180deg, var(--sd-accent-2), var(--sd-accent));
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(14, 70, 255, 0.25);
  transition: transform 0.06s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.vlt-btn.vlt-btn--primary:hover {
  box-shadow: 0 10px 24px rgba(14, 70, 255, 0.35);
}
.vlt-btn.vlt-btn--primary:active {
  transform: translateY(1px) scale(0.997);
}
.vlt-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* ====== SHARE BAR ====== */
.sd-share {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--sd-gap-lg);
}
.sd-share__btn {
  --btn-bg: #121827;
  --btn-br: var(--sd-border-soft);
  --btn-color: #dbe3ff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-br);
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.06s ease;
}
.sd-share__btn:hover {
  background: #172033;
  border-color: var(--sd-border);
}
.sd-share__btn:active {
  transform: translateY(1px);
}
.sd-share__btn .sd-ico {
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* Брендовые оттенки при hover (лёгкий намёк, не кислотный) */
.sd-share__btn--x:hover {
  background: rgba(239, 243, 244, 0.07);
}
.sd-share__btn--fb:hover {
  background: rgba(24, 119, 242, 0.1);
}
.sd-share__btn--ln:hover {
  background: rgba(10, 102, 194, 0.12);
}
.sd-share__btn--rd:hover {
  background: rgba(255, 69, 0, 0.1);
}
.sd-share__btn--tg:hover {
  background: rgba(0, 136, 204, 0.12);
}
.sd-share__btn--wa:hover {
  background: rgba(37, 211, 102, 0.1);
}

/* ====== Мелкие утилиты ====== */
.sd-note,
.tool-note {
  color: #8ea1c7;
  font-size: 12px;
  text-align: right;
}
.text-md-right {
  text-align: right;
}
@media (max-width: 991.98px) {
  .sd-note,
  .tool-note,
  .text-md-right {
    text-align: left;
    margin-top: 10px;
  }
}

/* Аккуратный фокус */
:where(.sd-share__btn, .vlt-btn):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sd-accent) 60%, #fff);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ===== Converter layout fixes (universal) ===== */

/* 1) Страница конвертера: отступ сверху, чтобы хедер не перекрывал */
:root {
  --sd-top-offset-desktop: 96px;
  --sd-top-offset-mobile: 76px;
}

/* если можешь — добавь класс .sd-converter на <main>; но есть и fallback ниже */
.sd-converter .vlt-section:first-child .vlt-section__content {
  padding-top: var(--sd-top-offset-desktop);
}
@media (max-width: 767.98px) {
  .sd-converter .vlt-section:first-child .vlt-section__content {
    padding-top: var(--sd-top-offset-mobile);
  }
}

/* fallback: если класс .sd-converter не добавляли,
   применим отступ к первому секшену внутри .vlt-main */
.vlt-main > .vlt-section:first-child .vlt-section__content {
  padding-top: var(--sd-top-offset-desktop);
}
@media (max-width: 767.98px) {
  .vlt-main > .vlt-section:first-child .vlt-section__content {
    padding-top: var(--sd-top-offset-mobile);
  }
}

/* 2) Делаем 2 колонки на десктопе, 1 колонку на мобайле
   (поверх bootstrap .row {display:flex}) */
.row.tool-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-left: 0; /* убрать отрицательные отступы bootstrap-строки */
  margin-right: 0;
  margin-bottom: 1rem;
}
.row.tool-grid > [class^="col-"],
.row.tool-grid > [class*=" col-"] {
  padding-left: 0; /* убрать gutter-ы у вложенных col-* если они есть */
  padding-right: 0;
}
@media (max-width: 991.98px) {
  .row.tool-grid {
    grid-template-columns: 1fr;
  }
}

/* 3) Размер заголовка для конвертеров */
.sd-converter .vlt-large-heading {
  font-size: 26px;
  line-height: 1.3;
}
.sd-converter h1.vlt-large-heading {
  margin-bottom: 8px;
}

/* fallback: если .sd-converter не добавляли — только на секции Converter */
.vlt-section[data-anchor="Converter"] .vlt-large-heading {
  font-size: 26px;
  line-height: 1.3;
}

/* 4) Чуть крупнее заголовки карточек и плотнее тело */
.tool-card__head h3 {
  font-size: 15px;
}
.tool-card__body {
  padding: 16px;
}

/* 5) Чтоб сетка превью не «ломалась» при узких контейнерах */
.tool-previews {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 575.98px) {
  .tool-previews {
    grid-template-columns: 1fr;
  }
}

/* 6) Небольшой визуальный отступ под шапкой страницы конвертера */
.sd-converter .muted {
  margin-top: 6px;
  display: block;
  opacity: 0.85;
}

/* Прогресс-бар для ffmpeg */
.sd-progress {
  margin-top: 12px;
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.sd-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--sd-accent), var(--sd-accent-2));
  transition: width 0.15s linear;
}

/* компактные селекты в стиле Gilbert */
.sd-select {
  background: #0f1420;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e9edf7;
  border-radius: 10px;
  height: 36px;
  padding: 6px 10px;
}

.tool-alert {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}
.tool-alert--warn {
  border-color: #f4c27b;
  background: #fff7ea;
  color: #7a4d00;
}
#heic2png {
  padding: 1rem;
}
#btnResetHeic {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--sd-border-soft);
  border-radius: 10px;
  color: #fff;
}
#btnResetHeic:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

.sizes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.sizes-grid label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.95rem;
}
.tool-select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #000;
}
.ico-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
  min-height: 44px;
}
.ico-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0.4rem;
  font-size: 0.8rem;
}
.ico-thumb img {
  display: block;
  image-rendering: crisp-edges;
}
.tool-drop input[type="file"] {
  cursor: pointer;
}
/* Custom dropdown arrow for .tool-select (keeps native behavior) */
.tool-select{
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  padding-right: 2.25rem;          /* space for arrow */
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 12px 12px;
  font-size: 14px;

  /* Arrow SVG uses currentColor so it adapts to theme */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='white' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <polyline points='6 9 12 15 18 9'/>\
  </svg>");
}

.tool-select::-ms-expand { display: none; }

/* Hover/Focus states */
.tool-select:hover { filter: brightness(1.04); }
.tool-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, .35); /* subtle focus ring */
}

/* Dark theme tuning (optional) */
:root[data-theme="dark"] .tool-select,
body.dark .tool-select{
  color: #EAEAEA;                  /* text + arrow color (currentColor) */
  background-color: #0B0B0D;       /* match your dark cards */
  border-color: rgba(255,255,255,.14);
}

 .manual-tools{ margin-top:.75rem }
  .flex-row{ display:flex; align-items:center }
  .canvas-frame{ width:100%; max-width:100%; border-radius:12px; border:1px solid rgba(0,0,0,.12); display:block }
  .checker{
    background-image:
      linear-gradient(45deg, rgba(0,0,0,.08) 25%, transparent 25%),
      linear-gradient(135deg, rgba(0,0,0,.08) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(0,0,0,.08) 75%),
      linear-gradient(135deg, transparent 75%, rgba(0,0,0,.08) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
  }
  .tool-select::-ms-expand{display:none}
  /* Preview background switch */
  .bg-white{ background:#fff !important }
  .bg-black{ background:#000 !important }
  .bg-checker{ background:none !important }