/* Website-only palette. Keep every converter on the site's neutral charcoal scale. */
/* The router preserves scroll explicitly; changing form heights must not re-anchor it. */
html:has(.sft) { overflow-anchor: none; }
.sft.sft {
  --sl-bg: #111;
  --sl-surface: #202020;
  --sl-text: #ededed;
  --sl-dim: #b3b3b3;
  --sl-faint: #999;
  --sl-line: #363636;
  --sl-accent: #bdbdbd;
  --sl-pill: #333;
  --sl-hover: #2b2b2b;
  color-scheme: dark;
  background: #111;
}
.sft.sft .sl-toolwrap {
  --border-strong: #4a4a4a;
  --accent-2: #d4d4d4;
  --accent-fg: #111;
  --accent-soft: rgb(255 255 255 / 8%);
}
.sft.sft .sft-sidebar,
.sft.sft .sl-toolwrap .panel { background: #1a1a1a; border-color: #333; }
.sft.sft .sft-group > span,
.sft.sft .sft-group a svg,
.sft.sft .sft-eyebrow,
.sft.sft .sft-privacy { color: #a3a3a3; }
.sft.sft .sft-group a { color: #b3b3b3; }
.sft.sft .sft-group a:hover { color: #ededed; background: #242424; }
.sft.sft .sft-group a[aria-current="page"] { color: #ededed; background: #303030; }
.sft.sft .sft-group a[aria-current="page"] svg,
.sft.sft .sft-group a[aria-current="page"] span { color: inherit; }
.sft.sft .sl-toolwrap .tool__head h1 { color: #dedede; }
.sft.sft .sl-toolwrap .sfield {
  background: linear-gradient(to right, #383838 var(--p), #222 var(--p));
  border-color: #3b3b3b;
}
.sft.sft .sl-toolwrap .dropzone,
.sft.sft .sl-toolwrap .panel .dropzone:not(.is-compact) { background: #1a1a1a; border-color: #444; }
.sft.sft .sl-toolwrap .dropzone:hover,
.sft.sft .sl-toolwrap .dropzone.is-over,
.sft.sft .sl-toolwrap .panel .dropzone:not(.is-compact):hover,
.sft.sft .sl-toolwrap .panel .dropzone:not(.is-compact).is-over { background: #222; border-color: #888; }
.sft.sft .sl-toolwrap .btn--primary {
  background: #2b2b2b;
  border-color: #666;
  color: #ededed;
}
.sft.sft .sl-toolwrap .btn--primary:hover:not(:disabled) { background: #383838; border-color: #888; }
.sft.sft .sl-toolwrap .result-actions .btn--primary,
.sft.sft .sl-toolwrap .convert-card__actions .convert-card__download { background: transparent; border-color: #666; color: #ededed; }
.sft.sft .sl-toolwrap .result-actions .btn--primary:hover,
.sft.sft .sl-toolwrap .convert-card__actions .convert-card__download:hover { background: #2b2b2b; border-color: #888; }
.sft.sft .sl-toolwrap .chip.is-active { background: #333; border-color: #888; color: #ededed; }
.sft.sft .sl-toolwrap .pill:not(.pill--good):not(.pill--warn) { background: #333; color: #dedede; }
.sft.sft .sl-toolwrap .link-btn,
.sft.sft .sl-toolwrap .file__working,
.sft.sft .sl-toolwrap .is-working .convert-card__status { color: #d4d4d4; }
.sft.sft .sl-toolwrap .range { accent-color: #bdbdbd; }
.sft.sft .sl-toolwrap .spinner { border-color: #555; border-top-color: #ddd; }
.sft.sft .sl-toolwrap .progress__bar { background: linear-gradient(90deg, #444, #666); }
.sft.sft .sl-toolwrap .convert-card__progress > span { background: linear-gradient(90deg, #999, #ddd); box-shadow: none; }
.sft.sft .sl-toolwrap .convert-card__wash { background: linear-gradient(90deg, #ffffff04, #ffffff14); border-right-color: #ffffff26; }
.sft.sft .sl-toolwrap .dropveil { background: rgb(0 0 0 / 24%); }
.sft.sft .sft-mobile select { background: #202020; color: #ededed; border-color: #3b3b3b; }
.sft.sft :is(button, a, input, select):focus-visible,
.sft.sft .sl-toolwrap :is(button, a, input, select):focus-visible,
.sft.sft .sfield:focus-within { outline-color: #bdbdbd; }
.sft-menu.sft-menu { color-scheme: dark; }
.sft-menu.sft-menu .sft-menu-trigger { color: #b3b3b3; }
.sft-menu.sft-menu .sft-menu-trigger:hover,
.sft-menu.sft-menu .sft-menu-trigger[aria-expanded="true"] { background: #202020; color: #ededed; }
.sft-menu.sft-menu .sft-menu-panel { background: #1a1a1a; color: #ededed; }
.sft-menu.sft-menu .sft-menu-panel p,
.sft-menu.sft-menu .sft-menu-panel a svg,
.sft-menu.sft-menu .sft-menu-trigger svg { color: #a3a3a3; }
.sft-menu.sft-menu .sft-menu-panel a { color: #b3b3b3; }
.sft-menu.sft-menu .sft-menu-panel a:hover { background: #303030; color: #ededed; }
.sft-menu.sft-menu .sft-menu-panel .sft-menu-all { border-color: #363636; }
.sft-menu.sft-menu :is(button, a):focus-visible { outline-color: #bdbdbd; }
/* Only the changing tool content fades; navigation stays visually steady. */
@media (prefers-reduced-motion: no-preference) {
  .sft.sft .sft-main { animation: screenlab-tool-enter 160ms ease-out both; }
}
@keyframes screenlab-tool-enter { from { opacity: .65; } to { opacity: 1; } }