/*
 * Photo Tools Studio — Viscosity v22 refined.
 * Loaded after styles.css and airy.css.
 *
 * Goals:
 * - dark mode keeps the successful neon/liquid/grid mood with more transparent UI;
 * - light mode changes shader colours directly instead of using a white filter;
 * - panels stay glass-like and not opaque;
 * - privacy note stays at the bottom of the viewport;
 * - long selected background-photo names are clipped with ellipsis.
 */

:root {
  color-scheme: light;

  --glass-blur: 7px;
  --glass-control-blur: 3.5px;

  --shader-opacity: 0.54;
  --viscosity-page-bg:
    radial-gradient(circle at 12% 0%, rgba(105, 145, 255, 0.14), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(125, 92, 255, 0.10), transparent 34%),
    linear-gradient(180deg, #eef5ff 0%, #e6effb 52%, #dfeaf7 100%);

  /* Light readability wash only. The visible colour shift is handled in WebGL. */
  --shader-overlay:
    linear-gradient(180deg, rgba(238, 245, 255, 0.06), rgba(221, 232, 246, 0.10));

  --glass-bg: rgba(248, 252, 255, 0.24);
  --glass-bg-strong: rgba(248, 252, 255, 0.34);
  --glass-control-bg: rgba(248, 252, 255, 0.30);
  --glass-border: rgba(20, 35, 60, 0.18);
  --glass-border-soft: rgba(20, 35, 60, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.52);
  --glass-shadow: rgba(42, 62, 92, 0.16);

  --ink: #0e1728;
  --label: #1d2b42;
  --muted: #43546b;
  --line: rgba(20, 35, 60, 0.16);
  --line-strong: rgba(20, 35, 60, 0.24);
  --header-bg: rgba(248, 252, 255, 0.26);
  --panel: rgba(248, 252, 255, 0.24);
  --panel-soft: rgba(248, 252, 255, 0.22);
  --control-bg: rgba(248, 252, 255, 0.32);
  --control-hover: rgba(248, 252, 255, 0.42);
  --button-soft: rgba(248, 252, 255, 0.32);
  --button-soft-hover: rgba(248, 252, 255, 0.44);
  --button-soft-border: rgba(37, 99, 235, 0.28);
  --accent: #2563eb;
  --accent-dark: #174fc1;
  --accent-soft: rgba(219, 234, 254, 0.44);
  --success: #0f8a5f;
  --success-soft: rgba(220, 252, 231, 0.42);
  --danger: #b42323;
  --danger-soft: rgba(254, 226, 226, 0.42);
  --empty: #4b5f77;
}

[data-theme="dark"] {
  color-scheme: dark;

  --shader-opacity: 0.64;
  --viscosity-page-bg:
    radial-gradient(circle at 18% 0%, rgba(91, 33, 182, 0.20), transparent 34%),
    radial-gradient(circle at 82% 12%, rgba(49, 70, 110, 0.18), transparent 34%),
    linear-gradient(180deg, #0c1222 0%, #080d19 52%, #050814 100%);

  --shader-overlay:
    linear-gradient(180deg, rgba(5, 8, 16, 0.10), rgba(5, 8, 16, 0.36));

  --glass-bg: rgba(13, 18, 31, 0.18);
  --glass-bg-strong: rgba(13, 18, 31, 0.26);
  --glass-control-bg: rgba(17, 24, 39, 0.20);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-border-soft: rgba(255, 255, 255, 0.11);
  --glass-highlight: rgba(255, 255, 255, 0.18);
  --glass-shadow: rgba(0, 0, 0, 0.38);

  --ink: #f8fbff;
  --label: #e7edf8;
  --muted: #c7d1e1;
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.21);
  --header-bg: rgba(13, 18, 31, 0.20);
  --panel: rgba(13, 18, 31, 0.18);
  --panel-soft: rgba(17, 24, 39, 0.20);
  --control-bg: rgba(17, 24, 39, 0.22);
  --control-hover: rgba(30, 41, 59, 0.34);
  --button-soft: rgba(30, 41, 59, 0.24);
  --button-soft-hover: rgba(51, 65, 85, 0.34);
  --button-soft-border: rgba(148, 163, 184, 0.24);
  --accent: #78a7ff;
  --accent-dark: #d3e1ff;
  --accent-soft: rgba(31, 45, 68, 0.34);
  --success: #70e3ad;
  --success-soft: rgba(23, 53, 38, 0.40);
  --danger: #ff8a8a;
  --danger-soft: rgba(58, 29, 34, 0.40);
  --empty: #cad4e4;
}

html {
  min-height: 100%;
  background: var(--viscosity-page-bg);
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding-bottom: 92px;
  background: transparent;
  color: var(--ink);
}

.shader-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  pointer-events: none;
  opacity: var(--shader-opacity);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--shader-overlay);
}

/* Disable decorative blob overlays from airy.css. */
body::after {
  content: none;
  display: none;
}

/* Keep real UI above the shader and overlay. */
.app-header,
.access-shell,
.tool-home,
.workspace,
.editor-workspace,
.privacy-footer,
.download-frame {
  position: relative;
  z-index: 2;
}

/* API/access generator stays available for future env-based enabling,
   but does not appear in public mode. */
.access-shell[hidden] {
  display: none;
}

.app-header,
.panel,
.preview-area,
.tool-card,
.access-card,
.optional-access summary {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.12);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.12);
  box-shadow:
    0 18px 54px var(--glass-shadow),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.app-header {
  height: 66px;
  background: var(--header-bg);
}

.tool-intro h1,
.panel-heading h1,
.panel-heading h2,
.tool-card strong,
.file-row strong,
.queue-file strong,
.selection-readout strong,
.status-card-header strong,
.brand span {
  color: var(--ink);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] .tool-intro h1,
[data-theme="dark"] .panel-heading h1,
[data-theme="dark"] .panel-heading h2,
[data-theme="dark"] .tool-card strong,
[data-theme="dark"] .file-row strong,
[data-theme="dark"] .queue-file strong,
[data-theme="dark"] .selection-readout strong,
[data-theme="dark"] .status-card-header strong,
[data-theme="dark"] .brand span {
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.45);
}

.tool-intro p,
.tool-card small,
.panel-heading p,
.drop-zone small,
.file-row small,
.queue-file small,
.queue-help,
.range-control small,
.select-control small,
.file-control small,
.selection-readout small,
.tool-message,
.privacy-footer {
  color: var(--muted);
}

.primary-button,
.secondary-button,
.small-button,
.theme-toggle,
.kofi-button,
.custom-select-button,
.custom-select-option,
.queue-download,
.drop-zone,
.file-row,
.queue-file,
.status-log,
.toggle-control,
.selection-readout,
.tool-icon,
.drop-icon,
input,
select,
button {
  background-color: var(--glass-control-bg);
  border-color: var(--glass-border-soft);
  color: var(--ink);
  backdrop-filter: blur(var(--glass-control-blur)) saturate(1.08);
  -webkit-backdrop-filter: blur(var(--glass-control-blur)) saturate(1.08);
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

[data-theme="dark"] .primary-button,
[data-theme="dark"] .secondary-button,
[data-theme="dark"] .small-button,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .kofi-button,
[data-theme="dark"] .custom-select-button,
[data-theme="dark"] .custom-select-option,
[data-theme="dark"] .queue-download,
[data-theme="dark"] .drop-zone,
[data-theme="dark"] .file-row,
[data-theme="dark"] .queue-file,
[data-theme="dark"] .status-log,
[data-theme="dark"] .toggle-control,
[data-theme="dark"] .selection-readout,
[data-theme="dark"] .tool-icon,
[data-theme="dark"] .drop-icon,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] button {
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.primary-button {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.84), rgba(92, 111, 255, 0.70));
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

.primary-button:hover:not(:disabled) {
  background:
    linear-gradient(135deg, rgba(24, 83, 206, 0.90), rgba(118, 92, 255, 0.78));
}

.secondary-button,
.small-button,
.theme-toggle,
.kofi-button,
.queue-download,
.optional-access summary {
  color: var(--accent-dark);
  font-weight: 780;
}

.tool-card:hover,
.drop-zone:hover,
.drop-zone.is-dragover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.42);
  background: var(--glass-bg-strong);
}

.image-frame,
.canvas-frame,
.square-frame {
  background:
    linear-gradient(45deg, var(--checker-a) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker-a) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker-a) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker-a) 75%),
    rgba(255, 255, 255, 0.12);
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
  background-size: 20px 20px;
  border-color: var(--glass-border-soft);
}

.status-log,
.queue-file:not(.is-empty),
.file-row:not(.is-empty),
.selection-readout {
  background: var(--glass-bg-strong);
}

.status-log li,
#statusPill {
  color: var(--label);
}

.status-log li.is-active,
#statusPill.is-processing {
  color: var(--accent-dark);
}

.status-log li.is-done,
#statusPill.is-ready {
  color: var(--success);
}

.status-log li.is-error,
#statusPill.is-error {
  color: var(--danger);
}

/* Dock Privacy to the viewport bottom. */
.privacy-footer {
  position: fixed;
  left: 50%;
  bottom: 14px;
  width: min(calc(100vw - 56px), 1440px);
  max-width: 1440px;
  margin: 0;
  padding: 12px 18px;
  transform: translateX(-50%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(7px) saturate(1.10);
  -webkit-backdrop-filter: blur(7px) saturate(1.10);
  box-shadow:
    0 14px 38px var(--glass-shadow),
    inset 0 1px 0 var(--glass-highlight);
}

.privacy-footer p {
  margin: 0;
  max-width: 100%;
}

.privacy-footer strong {
  color: var(--accent-dark);
}

/* Prevent long uploaded/background filenames from leaking through buttons/panels. */
.file-row,
.queue-file,
.file-control,
.selection-readout,
.custom-select-button {
  min-width: 0;
}

.file-row strong,
.queue-file strong,
.queue-file small,
#backgroundImageName,
#metadataFileText,
.custom-select-button span:first-child {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#backgroundImageName {
  width: 100%;
}

input::placeholder,
textarea::placeholder {
  color: rgba(67, 84, 107, 0.76);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(199, 209, 225, 0.72);
}

/* Remove decorative shine/glow animations from airy-style variants if present. */
.shine-animation,
.glow-animation,
[class*="shine"],
[class*="glow"] {
  animation: none;
}

@media (max-width: 720px),
(pointer: coarse) {
  body {
    padding-bottom: 116px;
  }

  .shader-bg {
    opacity: calc(var(--shader-opacity) * 0.72);
  }

  .app-header,
  .panel,
  .preview-area,
  .tool-card,
  .access-card {
    backdrop-filter: blur(6px) saturate(1.06);
    -webkit-backdrop-filter: blur(6px) saturate(1.06);
  }

  .privacy-footer {
    bottom: 10px;
    width: calc(100vw - 24px);
    padding: 10px 12px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shader-bg {
    opacity: calc(var(--shader-opacity) * 0.72);
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
  }
}


/* v23 safety patch: shader and overlay must never catch clicks. */
.shader-bg,
body::before,
body::after {
  pointer-events: none;
}

.app-header,
.access-shell,
.tool-home,
.workspace,
.editor-workspace,
.privacy-footer,
.download-frame {
  position: relative;
  z-index: 10;
}


/* ------------------------------------------------------------------
   v25 minimal fixes built from v23.
   Fixes status spacing/radius, Clear/Ready pills, preview sizing,
   fixed Privacy footer, file input overflow, slider colour, hover feedback,
   metadata preview simplification, and small-image preview scaling.
------------------------------------------------------------------- */

/* 1) Status card: give text air and make rounded corners consistent. */
.status-card {
  padding: 18px;
  border-top: 1px solid var(--line);
}

.status-card-header {
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.status-log {
  padding: 18px 22px;
  border-radius: 20px;
  line-height: 1.7;
}

.status-log li {
  padding-left: 0;
}

#statusPill,
.queue-status {
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--glass-border-soft);
  background: var(--glass-bg-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 6px 16px rgba(0, 0, 0, 0.08);
}

/* 2) Queue card and Clear button: remove square-looking artefacts and add feedback. */
.queue-heading button,
#clearButton {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 999px;
  background: var(--glass-control-bg);
  color: var(--accent-dark);
  font-weight: 780;
  cursor: pointer;
  transition:
    transform 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.queue-heading button:hover,
#clearButton:hover,
.queue-heading button:focus-visible,
#clearButton:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(132, 169, 255, 0.45);
  background: var(--glass-bg-strong);
  box-shadow:
    0 9px 22px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.queue-heading button:active,
#clearButton:active {
  transform: translateY(0) scale(0.98);
}

.queue-file {
  border-radius: 18px;
  overflow: hidden;
  background: var(--glass-bg-strong);
}

.thumb-placeholder {
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(132, 169, 255, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* 3) Preview areas: make original/result frames consistent and enlarge small images. */
.preview-grid {
  align-items: stretch;
}

.preview-column {
  min-width: 0;
}

.image-frame {
  min-height: 420px;
  height: 100%;
  border-radius: 28px;
}

.square-frame {
  aspect-ratio: auto;
  width: 100%;
  max-height: none;
  align-self: stretch;
}

.image-frame.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.canvas-frame {
  min-height: 520px;
  border-radius: 28px;
}

.canvas-frame.has-image canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 720px;
}

/* 4) Metadata cleaner: hide the second visual preview; keep processing/download logic. */
#metadataWorkspace .preview-grid {
  grid-template-columns: 1fr;
}

#metadataWorkspace .preview-column:nth-child(2) {
  display: none;
}

/* 5) Native file inputs: stop long text and square dark clipping. */
.file-control {
  min-width: 0;
}

.file-control input[type="file"],
#backgroundImageInput,
#cropFileInput,
#blurFileInput,
#metadataFileInput {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 42px;
  display: block;
  overflow: hidden;
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--glass-border-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 8px 18px rgba(0, 0, 0, 0.10);
}

.file-control input[type="file"]::file-selector-button,
#backgroundImageInput::file-selector-button,
#cropFileInput::file-selector-button,
#blurFileInput::file-selector-button,
#metadataFileInput::file-selector-button {
  max-width: 56%;
  margin: 0 10px 0 0;
  padding: 8px 13px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(190, 215, 255, 0.32);
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(125, 160, 220, 0.15));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 5px 16px rgba(0, 0, 0, 0.12);
  font: inherit;
  font-weight: 780;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* 6) Primary button and sliders: neutral glass palette, no heavy blue/old green. */
.primary-button {
  background:
    linear-gradient(135deg, rgba(92, 119, 205, 0.48), rgba(91, 66, 166, 0.34));
  color: var(--ink);
  border: 1px solid rgba(210, 225, 255, 0.30);
  box-shadow:
    0 12px 30px rgba(12, 18, 35, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

[data-theme="dark"] .primary-button {
  color: #f8fbff;
  background:
    linear-gradient(135deg, rgba(110, 160, 255, 0.30), rgba(112, 73, 190, 0.24));
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-1px);
  background:
    linear-gradient(135deg, rgba(118, 151, 235, 0.56), rgba(112, 83, 190, 0.42));
  border-color: rgba(225, 235, 255, 0.42);
}

.primary-button:disabled {
  opacity: 0.52;
}

input[type="range"] {
  accent-color: #84a9ff;
}

.range-control input[type="range"] {
  height: 18px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}

.range-control input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(185, 205, 240, 0.28);
  background:
    linear-gradient(90deg, rgba(112, 154, 255, 0.58), rgba(130, 97, 210, 0.48)),
    rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 5px 16px rgba(0, 0, 0, 0.12);
}

.range-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.86);
  background:
    radial-gradient(circle at 35% 30%, #ffffff 0%, #dce8ff 28%, #82a8ff 100%);
  box-shadow:
    0 0 0 4px rgba(132, 169, 255, 0.16),
    0 6px 16px rgba(25, 35, 70, 0.26);
}

.range-control input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(185, 205, 240, 0.28);
  background:
    linear-gradient(90deg, rgba(112, 154, 255, 0.58), rgba(130, 97, 210, 0.48)),
    rgba(255, 255, 255, 0.10);
}

.range-control input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.86);
  background: #84a9ff;
  box-shadow:
    0 0 0 4px rgba(132, 169, 255, 0.16),
    0 6px 16px rgba(25, 35, 70, 0.26);
}

/* 7) Header buttons: visible hover/focus/active feedback. */
.theme-toggle,
.kofi-button {
  position: relative;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease,
    filter 150ms ease;
}

.theme-toggle::after,
.kofi-button::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 2px rgba(132, 169, 255, 0.28);
  transition: opacity 150ms ease;
}

.theme-toggle:hover,
.kofi-button:hover,
.theme-toggle:focus-visible,
.kofi-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(185, 210, 255, 0.44);
  background: rgba(255, 255, 255, 0.20);
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.theme-toggle:hover::after,
.kofi-button:hover::after,
.theme-toggle:focus-visible::after,
.kofi-button:focus-visible::after {
  opacity: 1;
}

.theme-toggle:active,
.kofi-button:active {
  transform: translateY(0) scale(0.98);
  filter: brightness(0.95);
}

/* 8) Privacy: fixed bottom and aligned check icon. */
body {
  padding-bottom: 112px;
}

.privacy-footer {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 14px;
  width: min(calc(100vw - 56px), 1440px);
  max-width: 1440px;
  margin: 0;
  padding: 12px 18px;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(7px) saturate(1.10);
  -webkit-backdrop-filter: blur(7px) saturate(1.10);
  box-shadow:
    0 14px 38px var(--glass-shadow),
    inset 0 1px 0 var(--glass-highlight);
}

.privacy-footer>span {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  display: inline-grid;
  place-items: center;
}

.privacy-footer>span::after {
  left: 6px;
  top: 7px;
}

.privacy-footer p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Extra safety: shader and overlays never block clicks. */
.shader-bg,
body::before,
body::after {
  pointer-events: none;
}

@media (max-width: 720px),
(pointer: coarse) {
  body {
    padding-bottom: 136px;
  }

  .privacy-footer {
    bottom: 10px;
    width: calc(100vw - 24px);
    padding: 10px 12px;
    border-radius: 24px;
    font-size: 12px;
  }

  .image-frame,
  .canvas-frame {
    min-height: 320px;
    border-radius: 22px;
  }
}


/* v26 themed SVG icon polish */
.brand-logo,
.tool-icon img,
.kofi-button img {
  transition:
    opacity 150ms ease,
    transform 150ms ease,
    filter 150ms ease;
}

.tool-icon {
  overflow: hidden;
}

.tool-card:hover .tool-icon img,
.kofi-button:hover img,
.theme-toggle:hover .theme-icon {
  transform: scale(1.04);
}

[data-theme="dark"] .tool-icon img,
[data-theme="dark"] .brand-logo,
[data-theme="dark"] .kofi-button img {
  filter: drop-shadow(0 0 10px rgba(120, 167, 255, 0.20));
}

[data-theme="light"] .tool-icon img,
[data-theme="light"] .brand-logo,
[data-theme="light"] .kofi-button img {
  filter: drop-shadow(0 8px 14px rgba(37, 99, 235, 0.08));
}


/* v27 generated liquid-glass PNG assets */
.brand {
  min-width: 0;
}

.brand-wordmark-img {
  width: clamp(220px, 18vw, 310px);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(37, 99, 235, 0.10));
  transition: filter 160ms ease, opacity 160ms ease, transform 160ms ease;
}

[data-theme="dark"] .brand-wordmark-img {
  filter:
    drop-shadow(0 0 16px rgba(112, 165, 255, 0.22)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}

.tool-icon {
  width: 66px;
  height: 66px;
  border-radius: 18px;
  overflow: visible;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 14px 30px rgba(18, 25, 43, 0.18);
}

.tool-icon img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  border-radius: 18px;
}

.tool-card:hover .tool-icon img {
  transform: translateY(-1px) scale(1.08);
}

[data-theme="dark"] .tool-icon img,
[data-theme="dark"] .kofi-button img {
  filter:
    drop-shadow(0 0 12px rgba(111, 164, 255, 0.28)) drop-shadow(0 0 18px rgba(147, 82, 255, 0.18));
}

[data-theme="light"] .tool-icon img,
[data-theme="light"] .kofi-button img {
  filter:
    drop-shadow(0 10px 16px rgba(37, 99, 235, 0.12)) drop-shadow(0 2px 8px rgba(142, 93, 255, 0.10));
}

.kofi-button img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  padding: 0;
}

@media (max-width: 720px) {
  .brand-wordmark-img {
    width: min(250px, calc(100vw - 36px));
  }

  .tool-icon {
    width: 60px;
    height: 60px;
  }
}


/* ------------------------------------------------------------------
   v28: fix generated logo/icon integration.
   The generated assets were visually good, but too large in the header
   and too bright/large in the tool cards. This patch scales them into
   the interface instead of letting the images define the layout.
------------------------------------------------------------------- */

.app-header {
  min-height: 54px;
  height: 54px;
  padding: 0 24px;
  overflow: hidden;
}

.brand {
  min-width: 0;
  gap: 10px;
  align-items: center;
  overflow: hidden;
}

/* The wordmark PNG already contains the full "Photo Tools Studio" text.
   Keep it compact so it behaves like a header logo, not a hero banner. */
.brand-logo,
.brand-wordmark,
.brand img {
  width: auto;
  height: 38px;
  max-width: min(280px, 42vw);
  object-fit: contain;
  object-position: left center;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter:
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 10px rgba(105, 132, 255, 0.16));
}

.brand>span {
  display: none;
}

.header-actions {
  flex: 0 0 auto;
  gap: 10px;
}

.theme-toggle,
.kofi-button {
  min-height: 32px;
  height: 32px;
  padding: 0 11px;
  font-size: 12px;
}

.kofi-button img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* Tool cards: icons should support the title, not overpower it. */
.tool-cards {
  gap: 18px;
}

.tool-card {
  min-height: 232px;
  padding: 24px;
}

.tool-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(95, 120, 180, 0.06));
  border: 1px solid rgba(185, 205, 255, 0.22);
  box-shadow:
    0 10px 24px rgba(10, 16, 32, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.tool-icon img {
  width: 48px;
  height: 48px;
  padding: 4px;
  object-fit: contain;
  display: block;
}

[data-theme="dark"] .tool-icon img {
  opacity: 0.92;
  filter:
    saturate(0.92) contrast(0.98) drop-shadow(0 0 8px rgba(125, 104, 255, 0.26));
}

[data-theme="light"] .tool-icon img {
  opacity: 0.95;
  filter:
    saturate(0.86) contrast(0.98) drop-shadow(0 6px 12px rgba(67, 96, 170, 0.12));
}

/* Keep cards readable over the shader. */
.tool-card strong {
  margin-top: 4px;
  font-size: 19px;
  line-height: 1.18;
}

.tool-card small {
  font-size: 13px;
  line-height: 1.45;
}

/* The home layout looked too tiny after the oversized header logo.
   Give the card area a normal visual scale again. */
.tool-home {
  padding-top: 52px;
}

.tool-intro {
  margin-bottom: 26px;
}

.tool-intro h1 {
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

/* Privacy footer should remain present but not compete with the main UI. */
.privacy-footer {
  font-size: 12px;
  opacity: 0.92;
}

/* Mobile/tablet safety. */
@media (max-width: 720px),
(pointer: coarse) {
  .app-header {
    min-height: 60px;
    height: auto;
    padding: 10px 14px;
    overflow: visible;
  }

  .brand-logo,
  .brand-wordmark,
  .brand img {
    height: 34px;
    max-width: min(230px, 72vw);
  }

  .header-actions {
    width: 100%;
  }

  .tool-icon {
    width: 56px;
    height: 56px;
  }

  .tool-icon img {
    width: 46px;
    height: 46px;
  }
}


/* ------------------------------------------------------------------
   v29: split logo into icon + title in one line, and remove the
   background tiles behind the generated images/icons.
------------------------------------------------------------------- */

.app-header {
  min-height: 58px;
  height: 58px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}

.brand-logo {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 6px 14px rgba(99, 114, 255, 0.14));
}

.brand-wordmark-img {
  width: auto;
  height: 29px;
  max-width: min(290px, 46vw);
  flex: 0 1 auto;
  object-fit: contain;
  object-position: left center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
}

/* Remove decorative background plates from generated images. */
.tool-icon {
  width: 60px;
  height: 60px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  display: grid;
  place-items: center;
}

.tool-icon img {
  width: 58px;
  height: 58px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}

.kofi-button img,
.theme-icon img,
.brand img {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

[data-theme="dark"] .tool-icon img,
[data-theme="dark"] .brand-logo,
[data-theme="dark"] .brand-wordmark-img,
[data-theme="dark"] .kofi-button img {
  filter:
    drop-shadow(0 6px 16px rgba(122, 86, 255, 0.18)) drop-shadow(0 0 10px rgba(108, 183, 255, 0.10));
}

[data-theme="light"] .tool-icon img,
[data-theme="light"] .brand-logo,
[data-theme="light"] .brand-wordmark-img,
[data-theme="light"] .kofi-button img {
  filter:
    drop-shadow(0 6px 14px rgba(79, 104, 188, 0.08));
}

/* Keep cards aligned after removing the icon tile. */
.tool-card {
  padding-top: 26px;
}

.tool-card strong {
  margin-top: 10px;
}

/* Mobile safety */
@media (max-width: 720px),
(pointer: coarse) {
  .app-header {
    min-height: 62px;
    height: auto;
  }

  .brand {
    gap: 8px;
  }

  .brand-logo {
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex-basis: 36px;
  }

  .brand-wordmark-img {
    height: 23px;
    max-width: min(210px, 62vw);
  }

  .tool-icon {
    width: 54px;
    height: 54px;
  }

  .tool-icon img {
    width: 52px;
    height: 52px;
  }
}


/* ------------------------------------------------------------------
   v30: branding + theme toggle cleanup
------------------------------------------------------------------- */

.app-header {
  min-height: 56px;
  height: 56px;
  padding: 0 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: min(420px, 46vw);
  overflow: hidden;
  flex-wrap: nowrap;
}

.brand-logo {
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex: 0 0 36px;
  display: block;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 5px 12px rgba(89, 112, 255, 0.14)) drop-shadow(0 0 8px rgba(122, 187, 255, 0.10));
}

.brand-title {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 7px;
  line-height: 1;
  white-space: nowrap;
  font-weight: 860;
  letter-spacing: -0.03em;
}

.brand-title span {
  display: inline-block;
}

.brand-photo {
  color: var(--ink);
  font-size: 24px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.brand-tools {
  font-size: 21px;
  background: linear-gradient(135deg, #7a8cff 0%, #7ae0ff 38%, #8b73ff 68%, #6ca9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 3px 10px rgba(112, 155, 255, 0.16));
}

.brand-wordmark-img {
  display: none;
}

/* keep wrappers transparent */
.tool-icon,
.tool-icon img,
.kofi-button img,
.brand img {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* theme button: more glass, less flat */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  height: 34px;
  padding: 4px 12px 4px 5px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(190, 214, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
  box-shadow:
    0 10px 24px rgba(11, 18, 35, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(9px) saturate(1.12);
  -webkit-backdrop-filter: blur(9px) saturate(1.12);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.02) 58%, rgba(255, 255, 255, 0.04));
  opacity: 0.92;
}

.theme-toggle>* {
  position: relative;
  z-index: 1;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(202, 223, 255, 0.38);
  box-shadow:
    0 14px 28px rgba(9, 15, 32, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 0 0 1px rgba(132, 169, 255, 0.06);
}

.theme-toggle:active {
  transform: translateY(0) scale(0.985);
}

.theme-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  display: inline-block;
  transform: none;
}

[data-theme="light"] .theme-icon {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.98) 0%, rgba(202, 223, 255, 0.94) 22%, rgba(61, 113, 232, 1) 58%, rgba(41, 86, 201, 0.98) 100%);
  box-shadow:
    0 0 0 4px rgba(63, 116, 238, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.72),
    0 6px 12px rgba(41, 86, 201, 0.22);
}

[data-theme="dark"] .theme-icon {
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.96) 0%, rgba(220, 233, 255, 0.92) 20%, rgba(118, 174, 255, 0.98) 52%, rgba(85, 127, 245, 0.98) 100%);
  box-shadow:
    0 0 0 4px rgba(110, 160, 255, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.66),
    0 8px 14px rgba(20, 31, 70, 0.28);
}

#themeToggleLabel {
  font-size: 13px;
  font-weight: 780;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.header-actions {
  gap: 10px;
}

.kofi-button {
  min-height: 34px;
  height: 34px;
}

@media (max-width: 720px),
(pointer: coarse) {
  .app-header {
    min-height: 58px;
    height: auto;
    padding: 8px 12px;
  }

  .brand {
    max-width: 62vw;
    gap: 8px;
  }

  .brand-logo {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-basis: 32px;
  }

  .brand-title {
    gap: 5px;
  }

  .brand-photo {
    font-size: 18px;
  }

  .brand-tools {
    font-size: 16px;
  }

  .theme-toggle,
  .kofi-button {
    min-height: 32px;
    height: 32px;
  }

  .theme-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-basis: 18px;
  }

  #themeToggleLabel {
    font-size: 12px;
  }
}


/* ------------------------------------------------------------------
   v31: brand closer to the original idea + transparent SVG tool icons
   + moon/sun theme toggle.
------------------------------------------------------------------- */

/* Header logo/title: bigger icon, one-line title, Photo plain + Tools Studio gradient. */
.app-header {
  min-height: 62px;
  height: 62px;
}

.brand {
  gap: 12px;
  max-width: min(560px, 56vw);
  align-items: center;
}

.brand-logo {
  width: 48px;
  height: 48px;
  min-width: 48px;
  flex: 0 0 48px;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 8px 17px rgba(108, 145, 255, 0.18)) drop-shadow(0 0 10px rgba(120, 220, 255, 0.10));
}

.brand-title {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.brand-photo,
.brand-tools {
  font-size: clamp(25px, 1.55vw, 32px);
  line-height: 0.96;
}

[data-theme="light"] .brand-photo {
  color: #071426;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .brand-photo {
  color: #ffffff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.38);
}

.brand-tools {
  background:
    linear-gradient(120deg, #7bdcff 0%, #8c7cff 36%, #6d7cff 64%, #46b9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter:
    drop-shadow(0 0 8px rgba(111, 150, 255, 0.22)) drop-shadow(0 4px 10px rgba(30, 80, 190, 0.08));
}

/* The old wordmark image must not reserve space or appear again. */
.brand-wordmark-img {
  display: none;
  width: 0;
  height: 0;
  opacity: 0;
}

/* Tool icons: remove the glass/white tile; let the SVG itself be the icon. */
.tool-icon {
  width: 62px;
  height: 62px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tool-icon img {
  width: 62px;
  height: 62px;
  padding: 0;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tool-card:hover .tool-icon img {
  transform: translateY(-1px) scale(1.05);
}

[data-theme="light"] .tool-icon img {
  filter:
    drop-shadow(0 8px 12px rgba(63, 96, 180, 0.10)) drop-shadow(0 0 8px rgba(100, 190, 255, 0.08));
}

[data-theme="dark"] .tool-icon img {
  filter:
    drop-shadow(0 0 14px rgba(122, 205, 255, 0.23)) drop-shadow(0 0 18px rgba(147, 100, 255, 0.14));
}

/* Theme toggle: restore the clearer moon/sun idea, but keep the glass button. */
.theme-toggle {
  min-height: 36px;
  height: 36px;
  padding: 4px 13px 4px 7px;
  gap: 9px;
  border-radius: 999px;
  border: 1px solid rgba(192, 212, 255, 0.30);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.065));
  box-shadow:
    0 12px 28px rgba(11, 18, 35, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px) saturate(1.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.18);
}

.theme-icon {
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  overflow: visible;
  transform: none;
  background: transparent;
  box-shadow: none;
}

.theme-icon::before,
.theme-icon::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* Light theme: show a small sun. */
[data-theme="light"] .theme-icon::before {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #ffffff 0 12%, #ffe58a 26%, #ffbf47 58%, #ff8a34 100%);
  box-shadow:
    0 0 0 4px rgba(255, 190, 74, 0.15),
    0 0 14px rgba(255, 187, 69, 0.34),
    inset 0 1px 1px rgba(255, 255, 255, 0.75);
}

[data-theme="light"] .theme-icon::after {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0 9deg,
      rgba(255, 176, 45, 0.82) 9deg 16deg,
      transparent 16deg 45deg,
      rgba(255, 176, 45, 0.82) 45deg 52deg,
      transparent 52deg 81deg,
      rgba(255, 176, 45, 0.82) 81deg 88deg,
      transparent 88deg 117deg,
      rgba(255, 176, 45, 0.82) 117deg 124deg,
      transparent 124deg 153deg,
      rgba(255, 176, 45, 0.82) 153deg 160deg,
      transparent 160deg 189deg,
      rgba(255, 176, 45, 0.82) 189deg 196deg,
      transparent 196deg 225deg,
      rgba(255, 176, 45, 0.82) 225deg 232deg,
      transparent 232deg 261deg,
      rgba(255, 176, 45, 0.82) 261deg 268deg,
      transparent 268deg 360deg);
  opacity: 0.85;
}

/* Dark theme: show a crescent moon. */
[data-theme="dark"] .theme-icon::before {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #ffffff 0 10%, #dceaff 28%, #8bb6ff 62%, #5f7dff 100%);
  box-shadow:
    0 0 0 4px rgba(113, 151, 255, 0.16),
    0 0 16px rgba(130, 190, 255, 0.30),
    inset 0 1px 1px rgba(255, 255, 255, 0.72);
}

[data-theme="dark"] .theme-icon::after {
  width: 16px;
  height: 16px;
  left: 8px;
  top: 1px;
  border-radius: 50%;
  background: rgba(14, 18, 36, 0.98);
  box-shadow:
    -9px 7px 0 -7px rgba(195, 222, 255, 0.92),
    6px 2px 0 -6px rgba(195, 222, 255, 0.75);
}

#themeToggleLabel {
  font-size: 13px;
  font-weight: 830;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(215, 230, 255, 0.48);
  box-shadow:
    0 16px 34px rgba(8, 14, 28, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 0 0 1px rgba(115, 160, 255, 0.08);
}

@media (max-width: 720px),
(pointer: coarse) {
  .app-header {
    min-height: 60px;
  }

  .brand {
    max-width: 62vw;
    gap: 9px;
  }

  .brand-logo {
    width: 40px;
    height: 40px;
    min-width: 40px;
    flex-basis: 40px;
  }

  .brand-photo,
  .brand-tools {
    font-size: clamp(18px, 5vw, 23px);
  }

  .tool-icon,
  .tool-icon img {
    width: 56px;
    height: 56px;
  }

  .theme-toggle {
    height: 34px;
    min-height: 34px;
  }
}


/* ------------------------------------------------------------------
   v32: theme toggle as requested.
   Light mode: glass outer circle + yellow glowing circle.
   Dark mode: a dark violet circle slides in from the side and covers it.
------------------------------------------------------------------- */

.theme-toggle {
  position: relative;
  min-height: 36px;
  height: 36px;
  padding: 4px 13px 4px 7px;
  gap: 9px;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(196, 214, 255, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07));
  box-shadow:
    0 12px 28px rgba(9, 14, 30, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px) saturate(1.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.18);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.025) 58%, rgba(255, 255, 255, 0.05));
  opacity: 0.85;
}

.theme-toggle>* {
  position: relative;
  z-index: 1;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(215, 230, 255, 0.50);
  box-shadow:
    0 16px 34px rgba(8, 14, 30, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 0 0 1px rgba(125, 164, 255, 0.09);
}

.theme-toggle:active {
  transform: translateY(0) scale(0.985);
}

/* Outer glass circle. */
.theme-icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  min-width: 24px;
  flex: 0 0 24px;
  border-radius: 999px;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.20) 34%, rgba(124, 148, 215, 0.13) 68%, rgba(255, 255, 255, 0.18));
  border: 1px solid rgba(221, 231, 255, 0.55);
  box-shadow:
    0 5px 13px rgba(30, 42, 80, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.64),
    inset 0 -1px 2px rgba(61, 77, 125, 0.20);
  transform: none;
}

.theme-icon::before,
.theme-icon::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  transition:
    transform 260ms cubic-bezier(0.2, 0.85, 0.2, 1),
    opacity 220ms ease,
    box-shadow 220ms ease;
}

/* Yellow glow circle. It remains underneath in both themes. */
.theme-icon::before {
  width: 15px;
  height: 15px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  background:
    radial-gradient(circle at 36% 32%, #fff7c7 0%, #ffe267 34%, #ffc233 70%, #ffad2e 100%);
  box-shadow:
    0 0 0 4px rgba(255, 205, 77, 0.16),
    0 0 13px rgba(255, 199, 54, 0.56),
    0 0 22px rgba(255, 179, 43, 0.26),
    inset 0 1px 1px rgba(255, 255, 255, 0.72);
}

/* Violet cover circle. In light mode it waits on the side. */
.theme-icon::after {
  width: 20px;
  height: 20px;
  left: 50%;
  top: 50%;
  transform: translate(34%, -50%) scale(0.78);
  opacity: 0.30;
  background:
    radial-gradient(circle at 34% 28%, #8b73ff 0%, #4a2a83 40%, #201133 74%, #12091f 100%);
  box-shadow:
    0 0 10px rgba(118, 82, 255, 0.28),
    inset 0 1px 1px rgba(203, 184, 255, 0.26),
    inset 0 -2px 4px rgba(0, 0, 0, 0.28);
}

/* Dark theme: the violet circle slides over and fully covers the yellow circle. */
[data-theme="dark"] .theme-icon::after {
  transform: translate(-50%, -50%) scale(1.08);
  opacity: 1;
  box-shadow:
    0 0 0 4px rgba(113, 80, 255, 0.14),
    0 0 18px rgba(132, 82, 255, 0.38),
    inset 0 1px 1px rgba(212, 196, 255, 0.28),
    inset 0 -2px 5px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .theme-icon::before {
  opacity: 0.20;
  transform: translate(-50%, -50%) scale(0.96);
}

#themeToggleLabel {
  font-size: 13px;
  font-weight: 830;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Keep newly selected tool SVGs clean and vector-like after theme switching. */
.tool-icon,
.tool-icon img {
  background: transparent;
}

.tool-icon img[src$="background-light.svg"],
.tool-icon img[src$="background-dark.svg"],
.tool-icon img[src$="crop-light.svg"],
.tool-icon img[src$="crop-dark.svg"],
.tool-icon img[src$="blur-light.svg"],
.tool-icon img[src$="blur-dark.svg"],
.tool-icon img[src$="metadata-light.svg"],
.tool-icon img[src$="metadata-dark.svg"] {
  object-fit: contain;
}

@media (max-width: 720px),
(pointer: coarse) {
  .theme-toggle {
    height: 34px;
    min-height: 34px;
    padding-right: 11px;
  }

  .theme-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    flex-basis: 22px;
  }

  .theme-icon::before {
    width: 14px;
    height: 14px;
  }

  .theme-icon::after {
    width: 19px;
    height: 19px;
  }
}


/* ------------------------------------------------------------------
   v33: inverted theme-toggle icon logic.
   The button still switches to the opposite theme:
   - dark theme shows a muted yellow glow circle (suggests "switch to light")
   - light theme shows a muted purple cover circle (suggests "switch to dark")
   No image assets are used.
------------------------------------------------------------------- */

.theme-toggle {
  --toggle-glass-border: rgba(190, 210, 255, 0.24);
  --toggle-glass-top: rgba(255, 255, 255, 0.18);
  --toggle-glass-bottom: rgba(255, 255, 255, 0.055);
  min-height: 36px;
  height: 36px;
  gap: 8px;
  padding: 4px 13px 4px 7px;
  border-radius: 999px;
  border: 1px solid var(--toggle-glass-border);
  background:
    linear-gradient(180deg, var(--toggle-glass-top), var(--toggle-glass-bottom));
  box-shadow:
    0 10px 24px rgba(8, 14, 30, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(9px) saturate(1.12);
  -webkit-backdrop-filter: blur(9px) saturate(1.12);
}

.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.015) 62%, rgba(255, 255, 255, 0.035));
  opacity: 0.82;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(210, 226, 255, 0.36);
  box-shadow:
    0 13px 28px rgba(8, 14, 30, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(124, 158, 255, 0.055);
}

.theme-toggle:active {
  transform: translateY(0) scale(0.985);
}

.theme-icon {
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(245, 249, 255, 0.58), rgba(155, 176, 220, 0.22));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 2px rgba(26, 34, 64, 0.16),
    0 5px 12px rgba(31, 48, 92, 0.16);
  transform: none;
}

.theme-icon::before,
.theme-icon::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transition:
    transform 220ms ease,
    opacity 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

/* Base yellow circle: muted, no rays. */
.theme-icon::before {
  width: 13px;
  height: 13px;
  left: 4.5px;
  top: 4.5px;
  background:
    radial-gradient(circle at 34% 30%,
      rgba(255, 255, 240, 0.88) 0%,
      rgba(244, 212, 121, 0.82) 42%,
      rgba(214, 156, 65, 0.76) 100%);
  box-shadow:
    0 0 8px rgba(227, 186, 84, 0.30),
    0 0 2px rgba(255, 255, 255, 0.48) inset;
  opacity: 0.92;
}

/* Cover circle: muted dark purple. */
.theme-icon::after {
  width: 17px;
  height: 17px;
  left: 9px;
  top: 2.5px;
  background:
    radial-gradient(circle at 34% 30%,
      rgba(91, 78, 140, 0.96) 0%,
      rgba(58, 45, 105, 0.98) 54%,
      rgba(31, 25, 62, 1) 100%);
  box-shadow:
    inset 0 1px 1px rgba(205, 197, 255, 0.20),
    0 0 8px rgba(92, 74, 150, 0.22);
  opacity: 0.96;
}

/* Inverted logic:
   dark theme = show yellow circle; purple cover is outside.
   Button text remains "Light", meaning click switches to light. */
[data-theme="dark"] .theme-icon::after {
  transform: translateX(19px) scale(0.92);
  opacity: 0.60;
}

[data-theme="dark"] .theme-icon::before {
  transform: translateX(0) scale(1);
  opacity: 0.94;
}

/* light theme = purple circle slides over and fully covers yellow.
   Button text remains "Dark", meaning click switches to dark. */
[data-theme="light"] .theme-icon::after {
  transform: translateX(-6px) scale(1.08);
  opacity: 0.98;
}

[data-theme="light"] .theme-icon::before {
  transform: scale(0.96);
  opacity: 0.72;
}

/* Less saturated text/outline treatment for both themes. */
[data-theme="light"] .theme-toggle {
  --toggle-glass-border: rgba(88, 112, 170, 0.18);
  --toggle-glass-top: rgba(255, 255, 255, 0.46);
  --toggle-glass-bottom: rgba(232, 238, 248, 0.34);
}

[data-theme="dark"] .theme-toggle {
  --toggle-glass-border: rgba(184, 202, 255, 0.22);
  --toggle-glass-top: rgba(255, 255, 255, 0.14);
  --toggle-glass-bottom: rgba(255, 255, 255, 0.045);
}

#themeToggleLabel {
  font-weight: 800;
  letter-spacing: -0.01em;
}


/* ------------------------------------------------------------------
   v34: softer inverted theme-toggle icon.
   - dark theme: simple yellow glow circle with a small highlight, no rays
   - light theme: muted dark-purple cover circle fully overlays the yellow
   - tool card icons use SVG on first paint to avoid old PNG flicker
------------------------------------------------------------------- */

/* Avoid first-paint fallback look for the tool-card icons. */
.tool-icon img[src$="-light.svg"],
.tool-icon img[src$="-dark.svg"],
.tool-icon img[src$="background.svg"],
.tool-icon img[src$="crop.svg"],
.tool-icon img[src$="blur.svg"],
.tool-icon img[src$="metadata.svg"] {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Keep the button glassy but quieter. */
.theme-toggle {
  position: relative;
  min-height: 36px;
  height: 36px;
  gap: 8px;
  padding: 4px 13px 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(190, 210, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055));
  box-shadow:
    0 9px 22px rgba(8, 14, 30, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
}

.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.012) 65%, rgba(255, 255, 255, 0.03));
  opacity: 0.78;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(210, 226, 255, 0.34);
  box-shadow:
    0 12px 26px rgba(8, 14, 30, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(124, 158, 255, 0.045);
}

.theme-toggle:active {
  transform: translateY(0) scale(0.985);
}

.theme-icon {
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(246, 249, 255, 0.52), rgba(150, 168, 210, 0.20));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 2px rgba(26, 34, 64, 0.14),
    0 5px 11px rgba(31, 48, 92, 0.13);
  transform: none;
}

/* Reset all older sun/moon pseudo styles, including ray/conic variants. */
.theme-icon::before,
.theme-icon::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transition:
    transform 220ms ease,
    opacity 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

/* Simple sun: only a muted yellow circle with a soft highlight. No rays. */
.theme-icon::before {
  width: 13px;
  height: 13px;
  left: 4.5px;
  top: 4.5px;
  background:
    radial-gradient(circle at 35% 28%,
      rgba(255, 252, 220, 0.90) 0%,
      rgba(232, 202, 118, 0.78) 42%,
      rgba(185, 132, 60, 0.70) 100%);
  box-shadow:
    0 0 7px rgba(215, 175, 82, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.42);
  opacity: 0.88;
}

/* Muted moon/cover disk. It is darker and less glowing than v33. */
.theme-icon::after {
  width: 17px;
  height: 17px;
  left: 9px;
  top: 2.5px;
  background:
    radial-gradient(circle at 35% 30%,
      rgba(58, 53, 95, 0.98) 0%,
      rgba(43, 36, 78, 1) 55%,
      rgba(26, 22, 52, 1) 100%);
  box-shadow:
    inset 0 1px 1px rgba(178, 171, 230, 0.12),
    0 0 5px rgba(66, 55, 116, 0.12);
  opacity: 0.92;
}

/* Inverted logic:
   Dark theme shows sun because the button action is "Light". */
[data-theme="dark"] .theme-icon::before {
  transform: translateX(0) scale(1);
  opacity: 0.88;
}

[data-theme="dark"] .theme-icon::after {
  transform: translateX(19px) scale(0.90);
  opacity: 0.38;
}

/* Light theme shows the purple cover/moon because the button action is "Dark". */
[data-theme="light"] .theme-icon::before {
  transform: scale(0.96);
  opacity: 0.46;
}

[data-theme="light"] .theme-icon::after {
  transform: translateX(-6px) scale(1.08);
  opacity: 0.94;
}

/* Quieter theme-specific button surfaces. */
[data-theme="light"] .theme-toggle {
  border-color: rgba(88, 112, 170, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(232, 238, 248, 0.30));
}

[data-theme="dark"] .theme-toggle {
  border-color: rgba(184, 202, 255, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
}

#themeToggleLabel {
  font-weight: 800;
  letter-spacing: -0.01em;
}


/* ------------------------------------------------------------------
   v36: researched pure-CSS theme icon.
   - sun = one simple yellow circle with a tiny highlight
   - crescent = dark purple circle + same-background mask circle
   - no image assets, no conic rays, no realistic gradients
------------------------------------------------------------------- */

.theme-icon,
.theme-icon::before,
.theme-icon::after {
  clip-path: none;
  mask: none;
  -webkit-mask: none;
}

.theme-toggle {
  position: relative;
  min-height: 36px;
  height: 36px;
  gap: 8px;
  padding: 4px 13px 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(190, 210, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055));
  box-shadow:
    0 9px 22px rgba(8, 14, 30, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
}

.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.012) 65%, rgba(255, 255, 255, 0.026));
  opacity: 0.78;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(210, 226, 255, 0.34);
  box-shadow:
    0 12px 26px rgba(8, 14, 30, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 0 1px rgba(124, 158, 255, 0.045);
}

.theme-toggle:active {
  transform: translateY(0) scale(0.985);
}

.theme-icon {
  --toggle-icon-bg: rgba(220, 228, 244, 0.82);
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  background: var(--toggle-icon-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -1px 2px rgba(26, 34, 64, 0.12),
    0 5px 11px rgba(31, 48, 92, 0.12);
  transform: none;
}

.theme-icon::before,
.theme-icon::after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  transition:
    transform 210ms ease,
    opacity 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

/* Dark theme: button action is Light, so icon is a simple sun. */
[data-theme="dark"] .theme-icon {
  --toggle-icon-bg: rgba(34, 39, 68, 0.72);
}

[data-theme="dark"] .theme-icon::before {
  width: 13px;
  height: 13px;
  left: 4.5px;
  top: 4.5px;
  background: #e4bd5d;
  box-shadow:
    0 0 6px rgba(218, 178, 84, 0.18),
    inset 0 1px 1px rgba(255, 244, 196, 0.46);
  opacity: 0.96;
  transform: scale(1);
}

[data-theme="dark"] .theme-icon::after {
  width: 3.5px;
  height: 3.5px;
  left: 7.2px;
  top: 6.2px;
  background: rgba(255, 245, 196, 0.72);
  box-shadow: none;
  opacity: 0.82;
  transform: scale(1);
}

/* Light theme: button action is Dark, so icon is a dark purple crescent. */
[data-theme="light"] .theme-icon {
  --toggle-icon-bg: rgba(223, 231, 246, 0.88);
}

[data-theme="light"] .theme-icon::before {
  width: 14px;
  height: 14px;
  left: 4px;
  top: 4px;
  background: #302653;
  box-shadow:
    inset 0 1px 1px rgba(194, 185, 240, 0.10),
    0 0 4px rgba(48, 38, 83, 0.10);
  opacity: 0.98;
  transform: scale(1);
}

[data-theme="light"] .theme-icon::after {
  width: 13px;
  height: 13px;
  left: 8px;
  top: 2.8px;
  background: var(--toggle-icon-bg);
  box-shadow: none;
  opacity: 1;
  transform: scale(1);
}

#themeToggleLabel {
  font-weight: 800;
  letter-spacing: -0.01em;
}

[data-theme="light"] .theme-toggle {
  border-color: rgba(88, 112, 170, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(232, 238, 248, 0.30));
}

[data-theme="dark"] .theme-toggle {
  border-color: rgba(184, 202, 255, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
}

/* Avoid old-icon flash: SVGs are used directly and not hidden before JS runs. */
.tool-icon,
.tool-icon img,
.tool-icon img[src$=".svg"] {
  background: transparent;
  opacity: 1;
  visibility: visible;
}


/* ------------------------------------------------------------------
   v37: center sun/moon inside the theme button.
   Fixes the visual offset by anchoring the icon pieces around 50%/50%.
------------------------------------------------------------------- */

.theme-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  flex: 0 0 30px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

/* Reset older absolute offsets from v33-v36. */
.theme-icon::before,
.theme-icon::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  box-sizing: border-box;
}

/* Dark theme: centered simple sun.
   ::before = yellow disk, ::after = small highlight. */
[data-theme="dark"] .theme-icon::before {
  width: 13px;
  height: 13px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #e4bd5d;
  box-shadow:
    0 0 6px rgba(218, 178, 84, 0.18),
    inset 0 1px 1px rgba(255, 244, 196, 0.46);
  opacity: 0.96;
}

[data-theme="dark"] .theme-icon::after {
  width: 3.4px;
  height: 3.4px;
  left: calc(50% - 3px);
  top: calc(50% - 4px);
  transform: translate(-50%, -50%);
  background: rgba(255, 245, 196, 0.72);
  box-shadow: none;
  opacity: 0.82;
}

/* Light theme: centered crescent.
   The dark disk is shifted slightly right, because the mask removes the right side.
   This makes the visible crescent appear centered, not left-heavy. */
[data-theme="light"] .theme-icon::before {
  width: 14px;
  height: 14px;
  left: calc(50% + 1.2px);
  top: 50%;
  transform: translate(-50%, -50%);
  background: #302653;
  box-shadow:
    inset 0 1px 1px rgba(194, 185, 240, 0.10),
    0 0 4px rgba(48, 38, 83, 0.10);
  opacity: 0.98;
}

[data-theme="light"] .theme-icon::after {
  width: 13px;
  height: 13px;
  left: calc(50% + 4.6px);
  top: calc(50% - 1px);
  transform: translate(-50%, -50%);
  background: var(--toggle-icon-bg);
  box-shadow: none;
  opacity: 1;
}


/* ------------------------------------------------------------------
   v38: corrected theme icon + Ko-fi motion.
------------------------------------------------------------------- */

/* Same click/hover language for theme and Ko-fi. */
.theme-toggle,
.kofi-button {
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
  will-change: transform;
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
.kofi-button:hover,
.kofi-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(210, 226, 255, 0.34);
  box-shadow:
    0 12px 26px rgba(8, 14, 30, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 0 1px rgba(124, 158, 255, 0.045);
}

.theme-toggle:active,
.kofi-button:active {
  transform: translateY(0) scale(0.985);
}

/* Rebuild the theme icon from zero so older offsets do not leak in. */
.theme-icon {
  --toggle-icon-bg: rgba(223, 231, 246, 0.88);
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  background: var(--toggle-icon-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -1px 2px rgba(26, 34, 64, 0.12),
    0 5px 11px rgba(31, 48, 92, 0.12);
  transform: none;
}

.theme-icon::before,
.theme-icon::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  box-sizing: border-box;
  clip-path: none;
  mask: none;
  -webkit-mask: none;
  transition:
    transform 180ms ease,
    opacity 160ms ease,
    background 160ms ease;
}

/* Dark theme: icon says the action is Light, so show a simple centered sun. */
[data-theme="dark"] .theme-icon {
  --toggle-icon-bg: rgba(34, 39, 68, 0.72);
}

[data-theme="dark"] .theme-icon::before {
  width: 13px;
  height: 13px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #e0b85a;
  box-shadow:
    0 0 5px rgba(218, 178, 84, 0.14),
    inset 0 1px 1px rgba(255, 244, 196, 0.42);
  opacity: 0.96;
}

/* Small highlight on the sun, not a separate off-center object. */
[data-theme="dark"] .theme-icon::after {
  width: 3px;
  height: 3px;
  left: calc(50% - 2.4px);
  top: calc(50% - 2.8px);
  transform: translate(-50%, -50%);
  background: rgba(255, 245, 196, 0.62);
  box-shadow: none;
  opacity: 0.78;
}

/* Light theme: icon says the action is Dark, so show a centered dark-purple crescent.
   The purple disk is intentionally shifted right; after masking, the visible crescent
   sits visually in the center of the 22px icon. */
[data-theme="light"] .theme-icon {
  --toggle-icon-bg: rgba(223, 231, 246, 0.88);
}

[data-theme="light"] .theme-icon::before {
  width: 15px;
  height: 15px;
  left: calc(50% + 2.8px);
  top: 50%;
  transform: translate(-50%, -50%);
  background: #2f2554;
  box-shadow:
    inset 0 1px 1px rgba(194, 185, 240, 0.10),
    0 0 3px rgba(48, 38, 83, 0.08);
  opacity: 0.98;
}

[data-theme="light"] .theme-icon::after {
  width: 14px;
  height: 14px;
  left: calc(50% + 6.4px);
  top: calc(50% - 0.8px);
  transform: translate(-50%, -50%);
  background: var(--toggle-icon-bg);
  box-shadow: none;
  opacity: 1;
}

/* Keep label vertical alignment clean. */
.theme-toggle,
.kofi-button {
  align-items: center;
}

#themeToggleLabel,
.kofi-button span {
  line-height: 1;
}


/* ------------------------------------------------------------------
   v39: supplied tool icons + moon position correction.
   The 4 tool icons use the uploaded light/dark SVG files and are cache-busted.
------------------------------------------------------------------- */

.tool-card[data-tool-open="background"] .tool-icon img,
.tool-card[data-tool-open="crop"] .tool-icon img,
.tool-card[data-tool-open="blur"] .tool-icon img,
.tool-card[data-tool-open="metadata"] .tool-icon img {
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
}

/* Theme and Ko-fi buttons share the same press/hover behavior. */
.theme-toggle,
.kofi-button {
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
  will-change: transform;
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
.kofi-button:hover,
.kofi-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(210, 226, 255, 0.34);
  box-shadow:
    0 12px 26px rgba(8, 14, 30, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 0 1px rgba(124, 158, 255, 0.045);
}

.theme-toggle:active,
.kofi-button:active {
  transform: translateY(0) scale(0.985);
}

/* Re-define the theme icon after older overrides. */
.theme-icon {
  --toggle-icon-bg: rgba(223, 231, 246, 0.88);
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  background: var(--toggle-icon-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -1px 2px rgba(26, 34, 64, 0.12),
    0 5px 11px rgba(31, 48, 92, 0.12);
  transform: none;
}

.theme-icon::before,
.theme-icon::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  box-sizing: border-box;
  clip-path: none;
  mask: none;
  -webkit-mask: none;
}

/* Sun is already OK: centered yellow circle + small highlight. */
[data-theme="dark"] .theme-icon {
  --toggle-icon-bg: rgba(34, 39, 68, 0.72);
}

[data-theme="dark"] .theme-icon::before {
  width: 13px;
  height: 13px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #e0b85a;
  box-shadow:
    0 0 5px rgba(218, 178, 84, 0.14),
    inset 0 1px 1px rgba(255, 244, 196, 0.42);
  opacity: 0.96;
}

[data-theme="dark"] .theme-icon::after {
  width: 3px;
  height: 3px;
  left: calc(50% - 2.4px);
  top: calc(50% - 2.8px);
  transform: translate(-50%, -50%);
  background: rgba(255, 245, 196, 0.62);
  box-shadow: none;
  opacity: 0.78;
}

/* Moon was too far right. Shift the whole crescent left. */
[data-theme="light"] .theme-icon {
  --toggle-icon-bg: rgba(223, 231, 246, 0.88);
}

[data-theme="light"] .theme-icon::before {
  width: 15px;
  height: 15px;
  left: calc(50% + 0.6px);
  top: 50%;
  transform: translate(-50%, -50%);
  background: #2f2554;
  box-shadow:
    inset 0 1px 1px rgba(194, 185, 240, 0.10),
    0 0 3px rgba(48, 38, 83, 0.08);
  opacity: 0.98;
}

[data-theme="light"] .theme-icon::after {
  width: 14px;
  height: 14px;
  left: calc(50% + 4.2px);
  top: calc(50% - 0.8px);
  transform: translate(-50%, -50%);
  background: var(--toggle-icon-bg);
  box-shadow: none;
  opacity: 1;
}


/* ------------------------------------------------------------------
   v40: remove tool-icon backing + cleaner crescent moon.
   - Tool icons have no tile, no shadow, no glow behind them.
   - Moon cutout is transparent via CSS mask, so no grey cover circle is visible.
------------------------------------------------------------------- */

/* Tool icons: only the SVG itself, without any background/plate/shadow. */
.tool-icon,
.tool-card .tool-icon {
  width: 62px;
  height: 62px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  background: transparent;
  background-color: transparent;
  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

.tool-icon::before,
.tool-icon::after {
  content: none;
  display: none;
}

.tool-icon img,
.tool-card .tool-icon img,
.tool-card[data-tool-open="background"] .tool-icon img,
.tool-card[data-tool-open="crop"] .tool-icon img,
.tool-card[data-tool-open="blur"] .tool-icon img,
.tool-card[data-tool-open="metadata"] .tool-icon img {
  width: 62px;
  height: 62px;
  padding: 0;
  display: block;
  object-fit: contain;
  background: transparent;
  background-color: transparent;
  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  opacity: 1;
  visibility: visible;
}

.tool-card:hover .tool-icon img {
  transform: translateY(-1px) scale(1.035);
  filter: none;
}

/* Theme icon reset. */
.theme-icon {
  --toggle-icon-bg: rgba(223, 231, 246, 0.88);
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  background: var(--toggle-icon-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -1px 2px rgba(26, 34, 64, 0.12),
    0 5px 11px rgba(31, 48, 92, 0.12);
  transform: none;
}

.theme-icon::before,
.theme-icon::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  box-sizing: border-box;
}

/* Dark theme: centered sun. */
[data-theme="dark"] .theme-icon {
  --toggle-icon-bg: rgba(34, 39, 68, 0.72);
}

[data-theme="dark"] .theme-icon::before {
  width: 13px;
  height: 13px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #e0b85a;
  box-shadow:
    0 0 5px rgba(218, 178, 84, 0.14),
    inset 0 1px 1px rgba(255, 244, 196, 0.42);
  opacity: 0.96;
  clip-path: none;
  mask: none;
  -webkit-mask: none;
}

/* Small sun highlight. */
[data-theme="dark"] .theme-icon::after {
  width: 3px;
  height: 3px;
  left: calc(50% - 2.4px);
  top: calc(50% - 2.8px);
  transform: translate(-50%, -50%);
  background: rgba(255, 245, 196, 0.62);
  box-shadow: none;
  opacity: 0.78;
  clip-path: none;
  mask: none;
  -webkit-mask: none;
}

/* Light theme: crescent without a visible grey cover circle.
   The cutout is transparent in the mask, so it shows the real icon background. */
[data-theme="light"] .theme-icon {
  --toggle-icon-bg: rgba(223, 231, 246, 0.88);
}

[data-theme="light"] .theme-icon::before {
  width: 15px;
  height: 15px;
  left: calc(50% + 0.2px);
  top: 50%;
  transform: translate(-50%, -50%);
  background: #2f2554;
  box-shadow:
    inset 0 1px 1px rgba(194, 185, 240, 0.10),
    0 0 3px rgba(48, 38, 83, 0.08);
  opacity: 0.98;
  clip-path: none;
  -webkit-mask-image: radial-gradient(circle 8px at 63% 42%,
      transparent 0 56%,
      #000 57% 100%);
  mask-image: radial-gradient(circle 8px at 63% 42%,
      transparent 0 56%,
      #000 57% 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* No grey overlay in light theme. */
[data-theme="light"] .theme-icon::after {
  display: none;
  content: none;
  opacity: 0;
}


/* ------------------------------------------------------------------
   v41: remove real icon backing layer + larger moon cutout + Ko-fi parity.
------------------------------------------------------------------- */

/* Completely remove the square/dimmed plate behind tool icons.
   The wrapper becomes layout-only; only the SVG image is visible. */
.tool-card>.tool-icon,
.tool-card .tool-icon,
.tool-icon {
  all: unset;
  width: 62px;
  height: 62px;
  min-width: 62px;
  display: block;
  position: relative;
  line-height: 0;
  background: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

.tool-card>.tool-icon::before,
.tool-card>.tool-icon::after,
.tool-card .tool-icon::before,
.tool-card .tool-icon::after,
.tool-icon::before,
.tool-icon::after {
  content: none;
  display: none;
  background: none;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tool-card>.tool-icon img,
.tool-card .tool-icon img,
.tool-icon img {
  all: unset;
  width: 62px;
  height: 62px;
  display: block;
  object-fit: contain;
  background: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  visibility: visible;
}

.tool-card:hover>.tool-icon img,
.tool-card:hover .tool-icon img {
  transform: translateY(-1px) scale(1.03);
  filter: none;
}

/* Theme and Ko-fi button: same glass surface and same hover/press feedback. */
.theme-toggle,
.kofi-button {
  position: relative;
  overflow: hidden;
  min-height: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 13px 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(190, 210, 255, 0.22);
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055));
  box-shadow:
    0 9px 22px rgba(8, 14, 30, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
  will-change: transform;
}

.theme-toggle::before,
.kofi-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.012) 65%, rgba(255, 255, 255, 0.026));
  opacity: 0.78;
}

.theme-toggle>*,
.kofi-button>* {
  position: relative;
  z-index: 1;
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
.kofi-button:hover,
.kofi-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(210, 226, 255, 0.34);
  box-shadow:
    0 12px 26px rgba(8, 14, 30, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 0 1px rgba(124, 158, 255, 0.045);
}

.theme-toggle:active,
.kofi-button:active {
  transform: translateY(0) scale(0.985);
}

[data-theme="light"] .theme-toggle,
[data-theme="light"] .kofi-button {
  border-color: rgba(88, 112, 170, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(232, 238, 248, 0.30));
}

[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .kofi-button {
  border-color: rgba(184, 202, 255, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
}

.kofi-button img {
  width: 22px;
  height: 22px;
  display: block;
  background: transparent;
  box-shadow: none;
  border: 0;
}

#themeToggleLabel,
.kofi-button span {
  line-height: 1;
  font-weight: 800;
}

/* Re-center sun/moon inside the 22px theme icon. */
.theme-icon {
  --toggle-icon-bg: rgba(223, 231, 246, 0.88);
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  background: var(--toggle-icon-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -1px 2px rgba(26, 34, 64, 0.12),
    0 5px 11px rgba(31, 48, 92, 0.12);
  transform: none;
}

.theme-icon::before,
.theme-icon::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  box-sizing: border-box;
}

/* Dark theme: centered sun. */
[data-theme="dark"] .theme-icon {
  --toggle-icon-bg: rgba(34, 39, 68, 0.72);
}

[data-theme="dark"] .theme-icon::before {
  width: 13px;
  height: 13px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #e0b85a;
  box-shadow:
    0 0 5px rgba(218, 178, 84, 0.14),
    inset 0 1px 1px rgba(255, 244, 196, 0.42);
  opacity: 0.96;
  clip-path: none;
  mask: none;
  -webkit-mask: none;
}

/* Small highlight centered inside the sun, not a separate object. */
[data-theme="dark"] .theme-icon::after {
  width: 3px;
  height: 3px;
  left: calc(50% - 2.4px);
  top: calc(50% - 2.8px);
  transform: translate(-50%, -50%);
  background: rgba(255, 245, 196, 0.62);
  box-shadow: none;
  opacity: 0.78;
  display: block;
  clip-path: none;
  mask: none;
  -webkit-mask: none;
}

/* Light theme: crescent via mask.
   The invisible cutout circle is 10% larger than v40.
   No grey overlay element is drawn. */
[data-theme="light"] .theme-icon {
  --toggle-icon-bg: rgba(223, 231, 246, 0.88);
}

[data-theme="light"] .theme-icon::before {
  width: 15px;
  height: 15px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #2f2554;
  box-shadow:
    inset 0 1px 1px rgba(194, 185, 240, 0.10),
    0 0 3px rgba(48, 38, 83, 0.08);
  opacity: 0.98;
  clip-path: none;
  -webkit-mask-image: radial-gradient(circle 8.8px at 64% 42%,
      transparent 0 58%,
      #000 59% 100%);
  mask-image: radial-gradient(circle 8.8px at 64% 42%,
      transparent 0 58%,
      #000 59% 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

[data-theme="light"] .theme-icon::after {
  display: none;
  content: none;
  opacity: 0;
}

/* ------------------------------------------------------------------
   v43: final archive-based polish.
   This block is intentionally placed last to override older v31-v41 layers.
------------------------------------------------------------------- */

/* Tool icons: show only the SVG drawing. No wrapper tile, glow, blur, shadow, or square overlay. */
.tool-card > .tool-icon,
.tool-card .tool-icon,
.tool-card[data-tool-open="background"] .tool-icon,
.tool-card[data-tool-open="crop"] .tool-icon,
.tool-card[data-tool-open="blur"] .tool-icon,
.tool-card[data-tool-open="metadata"] .tool-icon {
  width: 58px;
  height: 58px;
  min-width: 58px;
  flex: 0 0 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: visible;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
}

.tool-card > .tool-icon::before,
.tool-card > .tool-icon::after,
.tool-card .tool-icon::before,
.tool-card .tool-icon::after,
.tool-card[data-tool-open="background"] .tool-icon::before,
.tool-card[data-tool-open="background"] .tool-icon::after,
.tool-card[data-tool-open="crop"] .tool-icon::before,
.tool-card[data-tool-open="crop"] .tool-icon::after,
.tool-card[data-tool-open="blur"] .tool-icon::before,
.tool-card[data-tool-open="blur"] .tool-icon::after,
.tool-card[data-tool-open="metadata"] .tool-icon::before,
.tool-card[data-tool-open="metadata"] .tool-icon::after {
  content: none;
  display: none;
  background: transparent;
  box-shadow: none;
  filter: none;
  opacity: 0;
}

.tool-card > .tool-icon img,
.tool-card .tool-icon img,
.tool-card[data-tool-open="background"] .tool-icon img,
.tool-card[data-tool-open="crop"] .tool-icon img,
.tool-card[data-tool-open="blur"] .tool-icon img,
.tool-card[data-tool-open="metadata"] .tool-icon img {
  width: 58px;
  height: 58px;
  min-width: 58px;
  display: block;
  object-fit: contain;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
}

.tool-card:hover > .tool-icon,
.tool-card:hover .tool-icon {
  background: transparent;
  box-shadow: none;
  filter: none;
}

.tool-card:hover > .tool-icon img,
.tool-card:hover .tool-icon img {
  transform: translateY(-1px) scale(1.025);
  filter: none;
  box-shadow: none;
}

/* Theme toggle and Ko-fi: identical glass hover/active/focus feedback. */
.theme-toggle,
.kofi-button {
  position: relative;
  overflow: hidden;
  min-height: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 13px 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(190, 210, 255, 0.22);
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055));
  box-shadow:
    0 9px 22px rgba(8, 14, 30, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.theme-toggle::before,
.kofi-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.012) 65%, rgba(255, 255, 255, 0.026));
  opacity: 0.78;
}

.theme-toggle > *,
.kofi-button > * {
  position: relative;
  z-index: 1;
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
.kofi-button:hover,
.kofi-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(210, 226, 255, 0.34);
  box-shadow:
    0 12px 26px rgba(8, 14, 30, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 0 1px rgba(124, 158, 255, 0.045);
}

.theme-toggle:active,
.kofi-button:active {
  transform: translateY(0) scale(0.985);
}

[data-theme="light"] .theme-toggle,
[data-theme="light"] .kofi-button {
  border-color: rgba(88, 112, 170, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(232, 238, 248, 0.30));
}

[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .kofi-button {
  border-color: rgba(184, 202, 255, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
}

/* Centered theme icon: dark theme shows Sun/Light, light theme shows Moon/Dark. */
.theme-icon {
  --toggle-icon-bg: rgba(223, 231, 246, 0.88);
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  background: var(--toggle-icon-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -1px 2px rgba(26, 34, 64, 0.12),
    0 5px 11px rgba(31, 48, 92, 0.12);
  transform: none;
}

.theme-icon::before,
.theme-icon::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  box-sizing: border-box;
}

[data-theme="dark"] .theme-icon {
  --toggle-icon-bg: rgba(34, 39, 68, 0.72);
}

[data-theme="dark"] .theme-icon::before {
  width: 13px;
  height: 13px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #e0b85a;
  box-shadow:
    0 0 5px rgba(218, 178, 84, 0.14),
    inset 0 1px 1px rgba(255, 244, 196, 0.42);
  opacity: 0.96;
  clip-path: none;
  mask: none;
  -webkit-mask: none;
}

[data-theme="dark"] .theme-icon::after {
  width: 3px;
  height: 3px;
  left: calc(50% - 2.4px);
  top: calc(50% - 2.8px);
  transform: translate(-50%, -50%);
  background: rgba(255, 245, 196, 0.62);
  box-shadow: none;
  opacity: 0.78;
  display: block;
  clip-path: none;
  mask: none;
  -webkit-mask: none;
}

[data-theme="light"] .theme-icon {
  --toggle-icon-bg: rgba(223, 231, 246, 0.88);
}

[data-theme="light"] .theme-icon::before {
  width: 15px;
  height: 15px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #2f2554;
  box-shadow:
    inset 0 1px 1px rgba(194, 185, 240, 0.10),
    0 0 3px rgba(48, 38, 83, 0.08);
  opacity: 0.98;
  clip-path: none;
  -webkit-mask-image: radial-gradient(circle 8.8px at 64% 42%, transparent 0 58%, #000 59% 100%);
  mask-image: radial-gradient(circle 8.8px at 64% 42%, transparent 0 58%, #000 59% 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

[data-theme="light"] .theme-icon::after {
  display: none;
  content: none;
  opacity: 0;
}

/* ------------------------------------------------------------------
   v0.3: reduced-JS frontend polish.
   - Tool icons are CSS background images, so app.js no longer swaps <img> src.
   - Background selector uses the native <select>; custom dropdown JS was removed.
   - Theme button drawing stays CSS-only.
------------------------------------------------------------------- */

.select-control select#backgroundMode {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 42px;
  padding: 0 42px 0 14px;
  border-radius: 14px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.custom-select,
#backgroundModeCustom,
#backgroundModeButton,
#backgroundModeMenu {
  display: none;
}

.tool-card > .tool-icon,
.tool-card .tool-icon,
.tool-icon.tool-icon-background,
.tool-icon.tool-icon-crop,
.tool-icon.tool-icon-blur,
.tool-icon.tool-icon-metadata {
  width: 58px;
  height: 58px;
  min-width: 58px;
  flex: 0 0 58px;
  display: block;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: visible;
  border: 0;
  outline: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  transition: transform 150ms ease;
}

.tool-card > .tool-icon::before,
.tool-card > .tool-icon::after,
.tool-card .tool-icon::before,
.tool-card .tool-icon::after {
  content: none;
  display: none;
}

.tool-card > .tool-icon img,
.tool-card .tool-icon img {
  display: none;
}

.tool-icon-background {
}

.tool-icon-crop {
}

.tool-icon-blur {
}

.tool-icon-metadata {
}

[data-theme="dark"] .tool-icon-background {
}

[data-theme="dark"] .tool-icon-crop {
}

[data-theme="dark"] .tool-icon-blur {
}

[data-theme="dark"] .tool-icon-metadata {
}

.tool-card:hover > .tool-icon,
.tool-card:hover .tool-icon {
  transform: translateY(-1px) scale(1.025);
  background-color: transparent;
  box-shadow: none;
  filter: none;
}

.theme-icon {
  --toggle-icon-bg: rgba(223, 231, 246, 0.88);
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  background: var(--toggle-icon-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 -1px 2px rgba(26, 34, 64, 0.12),
    0 5px 11px rgba(31, 48, 92, 0.12);
}

.theme-icon::before,
.theme-icon::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  box-sizing: border-box;
}

[data-theme="dark"] .theme-icon {
  --toggle-icon-bg: rgba(34, 39, 68, 0.72);
}

[data-theme="dark"] .theme-icon::before {
  width: 13px;
  height: 13px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #e0b85a;
  box-shadow:
    0 0 5px rgba(218, 178, 84, 0.14),
    inset 0 1px 1px rgba(255, 244, 196, 0.42);
  opacity: 0.96;
  clip-path: none;
  mask: none;
  -webkit-mask: none;
}

[data-theme="dark"] .theme-icon::after {
  width: 3px;
  height: 3px;
  left: calc(50% - 2.4px);
  top: calc(50% - 2.8px);
  transform: translate(-50%, -50%);
  background: rgba(255, 245, 196, 0.62);
  box-shadow: none;
  opacity: 0.78;
}

[data-theme="light"] .theme-icon {
  --toggle-icon-bg: rgba(223, 231, 246, 0.88);
}

[data-theme="light"] .theme-icon::before {
  width: 15px;
  height: 15px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #2f2554;
  box-shadow:
    inset 0 1px 1px rgba(194, 185, 240, 0.10),
    0 0 3px rgba(48, 38, 83, 0.08);
  opacity: 0.98;
  clip-path: none;
  -webkit-mask-image: radial-gradient(circle 8.8px at 64% 42%, transparent 0 58%, #000 59% 100%);
  mask-image: radial-gradient(circle 8.8px at 64% 42%, transparent 0 58%, #000 59% 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

[data-theme="light"] .theme-icon::after {
  display: none;
  content: none;
  opacity: 0;
}



/* ------------------------------------------------------------------
   v0.5 slider polish.
   Fix thumb clipping, give the knob room above the track, and make
   range-control glass blocks slightly wider/airier.
------------------------------------------------------------------- */
.range-control {
  position: relative;
  margin: 18px 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 22px;
  background: var(--glass-bg-strong);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: visible;
}

[data-theme="dark"] .range-control {
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.range-control > span {
  align-items: center;
  margin-bottom: 10px;
}

.range-control small {
  display: block;
  margin-top: 10px;
}

.range-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

.range-control input[type="range"]:focus {
  box-shadow: none;
}

.range-control input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
}

.range-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  position: relative;
}

.range-control input[type="range"]::-moz-range-track {
  height: 10px;
  border-radius: 999px;
}

.range-control input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
}


/* ------------------------------------------------------------------
   v0.6 icon restore + durable slider fix.
   Keeps tool icons CSS-only but also leaves IMG fallback in HTML.
   This block must stay at the very end of viscosity.css.
------------------------------------------------------------------- */

/* Tool cards: no square plate/glow behind icons, only the SVG artwork. */
.tool-card > .tool-icon,
.tool-card .tool-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: block;
  position: relative;

  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

.tool-card > .tool-icon::before,
.tool-card > .tool-icon::after,
.tool-card .tool-icon::before,
.tool-card .tool-icon::after {
  content: none;
  display: none;
}

/* Tool icons are rendered by the real img element in HTML. */
.tool-card > .tool-icon img,
.tool-card .tool-icon img {
  display: none;
  width: 0;
  height: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
}

.tool-card > .tool-icon.tool-icon-background {
}

.tool-card > .tool-icon.tool-icon-crop {
}

.tool-card > .tool-icon.tool-icon-blur {
}

.tool-card > .tool-icon.tool-icon-metadata {
}

[data-theme="dark"] .tool-card > .tool-icon.tool-icon-background {
}

[data-theme="dark"] .tool-card > .tool-icon.tool-icon-crop {
}

[data-theme="dark"] .tool-card > .tool-icon.tool-icon-blur {
}

[data-theme="dark"] .tool-card > .tool-icon.tool-icon-metadata {
}

/* Slider card: more air, no clipping of the knob. */
.range-control {
  position: relative;
  margin: 18px 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 22px;
  background: var(--glass-bg-strong);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: visible;
}

[data-theme="dark"] .range-control {
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.range-control > span {
  align-items: center;
  margin-bottom: 10px;
}

.range-control small {
  display: block;
  margin-top: 10px;
}

.range-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

.range-control input[type="range"]:focus {
  box-shadow: none;
}

.range-control input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
}

.range-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  position: relative;
}

.range-control input[type="range"]::-moz-range-track {
  height: 10px;
  border-radius: 999px;
}

.range-control input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
}

/* End v0.6 patch. */


/* ------------------------------------------------------------------
   v0.7 queue thumbnails, themed scrollbar, and themed native selects.
   Keeps less-JS approach: Background stays a normal select, styled by CSS.
------------------------------------------------------------------- */

/* Queue list: glass container and themed scrollbar instead of browser default. */
.queue-block,
.queue-list {
  border-radius: 22px;
}

.queue-list {
  padding: 6px 6px 6px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 180, 255, 0.70) rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .queue-list {
  scrollbar-color: rgba(150, 180, 255, 0.78) rgba(255, 255, 255, 0.08);
}

.queue-list::-webkit-scrollbar {
  width: 10px;
}

.queue-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(190, 215, 255, 0.14);
}

.queue-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(154, 183, 255, 0.88), rgba(125, 97, 220, 0.72))
    padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 4px 12px rgba(15, 23, 42, 0.18);
}

.queue-list::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, rgba(174, 200, 255, 0.96), rgba(145, 112, 236, 0.84))
    padding-box;
}

/* Queue thumbnails: stop old glass placeholder from covering the preview image. */
.queue-file:not(.is-empty) .thumb-placeholder {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: block;
  position: relative;
  overflow: hidden;

  border-radius: 16px;
  border: 1px solid rgba(205, 222, 255, 0.34);

  background-color: rgba(255, 255, 255, 0.08);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  filter: none;
  opacity: 1;
}

.queue-file:not(.is-empty) .thumb-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.20), transparent 42%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.10));
}

.queue-file.is-empty .thumb-placeholder {
  background-image: none;
}

/* Themed native select controls. This replaces the removed custom JS dropdown visually. */
.select-control {
  position: relative;
  gap: 9px;
  margin: 18px 0;
}

.select-control select {
  -webkit-appearance: none;
  appearance: none;

  width: 100%;
  min-height: 46px;
  height: 46px;
  padding: 0 44px 0 14px;

  border: 1px solid var(--glass-border-soft);
  border-radius: 16px;

  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(125, 160, 220, 0.10)),
    var(--glass-control-bg);

  box-shadow:
    0 9px 20px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);

  backdrop-filter: blur(var(--glass-control-blur)) saturate(1.08);
  -webkit-backdrop-filter: blur(var(--glass-control-blur)) saturate(1.08);

  cursor: pointer;
  outline: none;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.select-control::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 43px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  border-right: 2px solid var(--accent-dark);
  border-bottom: 2px solid var(--accent-dark);
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.88;
}

.select-control select:hover {
  transform: translateY(-1px);
  border-color: rgba(132, 169, 255, 0.46);
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.select-control select:focus,
.select-control select:focus-visible {
  border-color: rgba(132, 169, 255, 0.62);
  box-shadow:
    0 0 0 4px var(--focus-ring),
    0 12px 26px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.select-control select option {
  color: #151b2a;
  background: #f7f9ff;
}

[data-theme="dark"] .select-control select option {
  color: #f4f7ff;
  background: #151b2a;
}

/* Hide old custom dropdown shell if it is still present in HTML. */
.custom-select {
  display: none;
}

/* End v0.7 patch. */


/* ------------------------------------------------------------------
   v0.8 queue frame, real thumbnails, and themed dropdowns.
   Fixes:
   - queue item shadows/borders no longer clipped;
   - uploaded-file thumbnails use --queue-thumb so old backgrounds
     cannot hide blob previews;
   - Background and Output size use custom themed dropdowns because native
     select popups cannot be reliably styled across browsers.
------------------------------------------------------------------- */

/* Queue frame: give list items enough inner air so rounded cards/shadows are not cut. */
.queue-block {
  margin: 18px 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(190, 215, 255, 0.20);
  border-radius: 0;
  overflow: visible;
}

.queue-list {
  max-height: 360px;
  margin: 0 -4px;
  padding: 10px 12px 10px 10px;
  overflow-y: auto;
  overflow-x: visible;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(190, 215, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 24px rgba(15, 23, 42, 0.06);
  scrollbar-gutter: stable;
}

.queue-file {
  margin: 0 2px;
  border-radius: 22px;
  overflow: visible;
}

.queue-file + .queue-file {
  margin-top: 10px;
}

/* Real preview thumbnails. Older CSS used background: ...; this defeats it. */
.queue-file:not(.is-empty) .thumb-placeholder {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: block;
  position: relative;
  overflow: hidden;

  border-radius: 16px;
  border: 1px solid rgba(205, 222, 255, 0.38);

  background-image: var(--queue-thumb);
  background-color: rgba(255, 255, 255, 0.08);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  filter: none;
  opacity: 1;
}

.queue-file:not(.is-empty) .thumb-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 40%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.08));
}

.queue-file.is-empty .thumb-placeholder {
  background-image: none;
}

/* Themed scrollbar inside selected files list. */
.queue-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 180, 255, 0.72) rgba(255, 255, 255, 0.10);
}

.queue-list::-webkit-scrollbar {
  width: 10px;
}

.queue-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(190, 215, 255, 0.14);
}

.queue-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(154, 183, 255, 0.88), rgba(125, 97, 220, 0.72))
    padding-box;
}

/* Hide native select, keep it in DOM for existing processing logic. */
.select-control select.is-themed-native {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  border: 0;
  box-shadow: none;
}

/* Disable old native-select arrow from v0.7. */
.select-control::after {
  content: none;
  display: none;
}

.themed-select {
  position: relative;
  width: 100%;
  z-index: 20;
}

.themed-select-button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;

  border-radius: 16px;
  border: 1px solid rgba(190, 215, 255, 0.28);
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(125, 160, 220, 0.10)),
    var(--glass-control-bg);
  box-shadow:
    0 9px 20px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(var(--glass-control-blur)) saturate(1.08);
  -webkit-backdrop-filter: blur(var(--glass-control-blur)) saturate(1.08);

  cursor: pointer;
  text-align: left;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.themed-select-button:hover,
.themed-select.is-open .themed-select-button {
  transform: translateY(-1px);
  border-color: rgba(132, 169, 255, 0.50);
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.themed-select-button:focus-visible {
  outline: none;
  border-color: rgba(132, 169, 255, 0.62);
  box-shadow:
    0 0 0 4px var(--focus-ring),
    0 12px 26px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.themed-select-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.themed-select-chevron {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-right: 2px solid var(--accent-dark);
  border-bottom: 2px solid var(--accent-dark);
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.88;
}

.themed-select-menu {
  position: absolute;
  z-index: 80;
  left: 0;
  right: 0;
  top: calc(100% + 8px);

  display: grid;
  gap: 4px;
  padding: 8px;

  border-radius: 18px;
  border: 1px solid rgba(190, 215, 255, 0.30);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(125, 160, 220, 0.12)),
    rgba(244, 248, 255, 0.86);
  box-shadow:
    0 18px 48px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

[data-theme="dark"] .themed-select-menu {
  background:
    linear-gradient(135deg, rgba(110, 160, 255, 0.14), rgba(120, 75, 210, 0.12)),
    rgba(16, 20, 34, 0.90);
  box-shadow:
    0 20px 54px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.themed-select-menu[hidden] {
  display: none;
}

.themed-select-option {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;

  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}

.themed-select-option:hover,
.themed-select-option:focus-visible {
  outline: none;
  border-color: rgba(132, 169, 255, 0.36);
  background: rgba(132, 169, 255, 0.16);
}

.themed-select-option.is-selected {
  border-color: rgba(132, 169, 255, 0.46);
  background:
    linear-gradient(135deg, rgba(132, 169, 255, 0.28), rgba(125, 97, 220, 0.18));
  color: var(--ink);
  font-weight: 780;
}

.themed-select.is-disabled .themed-select-button {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
  box-shadow:
    0 6px 14px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Old HTML custom dropdown must stay hidden; v0.8 creates a clean generic one. */
.custom-select {
  display: none;
}

/* End v0.8 patch. */


/* ------------------------------------------------------------------
   v0.9 queue scrollbar containment.
   Keeps v0.8 visuals, but prevents the selected-files scrollbar from
   protruding outside the rounded glass frame.
------------------------------------------------------------------- */

.queue-block {
  overflow: visible;
}

.queue-list {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px 12px 10px 10px;

  border-radius: 24px;
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-gutter: stable;
  clip-path: inset(0 round 24px);
}

.queue-list::-webkit-scrollbar {
  width: 8px;
}

.queue-list::-webkit-scrollbar-track {
  margin: 12px 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.queue-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(154, 183, 255, 0.88), rgba(125, 97, 220, 0.72))
    padding-box;
}

.queue-file {
  max-width: 100%;
}

/* End v0.9 patch. */


/* ------------------------------------------------------------------
   v1.0 internal queue scrollbar.
   The v0.9 clip-path kept the scrollbar inside the border but cut its
   top/bottom ends. This version removes the clipping, hides native
   scrollbar buttons, and moves the thin scrollbar into the thumbnail list.
------------------------------------------------------------------- */

.queue-list {
  width: 100%;
  margin: 0;

  /* right padding creates internal space for scrollbar inside the list */
  padding: 10px 18px 10px 10px;

  border-radius: 24px;
  overflow-y: auto;
  overflow-x: hidden;

  /* no clipping, otherwise scrollbar ends get cut */
  clip-path: none;
  scrollbar-gutter: auto;

  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(110, 160, 255, 0.035));
}

.queue-list::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Hide top/bottom scrollbar buttons that looked like clipped triangles. */
.queue-list::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

.queue-list::-webkit-scrollbar-track {
  margin: 10px 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 0 0 1px rgba(190, 215, 255, 0.10);
}

.queue-list::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(158, 188, 255, 0.92), rgba(130, 104, 226, 0.76))
    padding-box;
  box-shadow:
    0 6px 16px rgba(20, 24, 46, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.queue-list::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, rgba(177, 204, 255, 0.96), rgba(150, 123, 238, 0.84))
    padding-box;
}

/* Keep cards away from the scrollbar so the scrollbar visually belongs inside the list. */
.queue-file {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
}

/* Firefox fallback. */
.queue-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 180, 255, 0.78) rgba(255, 255, 255, 0.06);
}

/* End v1.0 patch. */


/* ------------------------------------------------------------------
   v1.1 custom queue scrollbar.
   Native Windows/Chromium scrollbar buttons ignore parts of styling and
   keep showing clipped arrow caps. Hide native scrollbar completely and
   draw a small glass scroll indicator inside the selected-files list.
------------------------------------------------------------------- */

.queue-block {
  position: relative;
}

.queue-list {
  width: 100%;
  margin: 0;
  padding: 10px 18px 10px 10px;

  border-radius: 24px;
  overflow-y: auto;
  overflow-x: hidden;

  clip-path: none;
  scrollbar-gutter: auto;

  /* Hide native scrollbar entirely. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.queue-list::-webkit-scrollbar,
.queue-list::-webkit-scrollbar-track,
.queue-list::-webkit-scrollbar-thumb,
.queue-list::-webkit-scrollbar-button,
.queue-list::-webkit-scrollbar-corner {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}

.queue-custom-scrollbar {
  position: absolute;
  z-index: 12;
  right: 8px;
  top: var(--queue-scrollbar-top, 56px);
  width: 6px;
  height: var(--queue-scrollbar-height, 220px);

  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 0 0 1px rgba(190, 215, 255, 0.10),
    0 8px 18px rgba(0, 0, 0, 0.10);

  pointer-events: none;
}

.queue-custom-scrollbar[hidden] {
  display: none;
}

.queue-custom-scrollbar-thumb {
  position: absolute;
  left: 0;
  top: var(--queue-scrollbar-thumb-top, 0px);
  width: 6px;
  height: var(--queue-scrollbar-thumb-height, 42px);

  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(166, 195, 255, 0.95), rgba(128, 111, 232, 0.82));
  box-shadow:
    0 6px 16px rgba(20, 24, 46, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Keep list cards slightly away from the custom inner scrollbar. */
.queue-file {
  width: calc(100% - 2px);
  max-width: calc(100% - 2px);
}

/* End v1.1 patch. */

/* ------------------------------------------------------------------
   v1.2 clickable custom queue scrollbar.
   Same visual style as v1.1, but the track and thumb now accept pointer
   input for click-to-jump and drag scrolling.
------------------------------------------------------------------- */

.queue-custom-scrollbar {
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
}

.queue-custom-scrollbar-thumb {
  pointer-events: auto;
  cursor: grab;
  transition:
    filter 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}

.queue-custom-scrollbar:hover .queue-custom-scrollbar-thumb,
.queue-custom-scrollbar.is-dragging .queue-custom-scrollbar-thumb,
.queue-custom-scrollbar-thumb.is-dragging {
  filter: brightness(1.08) saturate(1.08);
  box-shadow:
    0 8px 18px rgba(20, 24, 46, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.queue-custom-scrollbar-thumb.is-dragging {
  cursor: grabbing;
}

/* End v1.2 patch. */


/* ------------------------------------------------------------------
   v1.3 privacy footer placement.
   Privacy text must stay at the bottom of the interface content, not fixed
   to the viewport and not floating near the top. On mobile the check icon
   stays left of the text so the card does not become taller than needed.
------------------------------------------------------------------- */

.privacy-footer {
  position: static;
  inset: auto;
  z-index: auto;

  width: auto;
  max-width: 1440px;
  margin: 10px auto 30px;
  padding: 0 28px 28px;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;

  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;

  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: auto;
}

.privacy-footer > span {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  align-self: flex-start;

  border-radius: 50%;
}

.privacy-footer p {
  margin: 0;
  min-width: 0;
  max-width: 100%;
}

/* Ensure hidden workspaces do not reserve height above the footer. */
.tool-workspace.is-hidden,
#toolHome.is-hidden {
  display: none;
}

/* Mobile: keep icon left, not above text. */
@media (max-width: 720px) {
  .privacy-footer {
    margin: 6px 0 22px;
    padding: 0 16px 24px;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;

    font-size: 12px;
    line-height: 1.42;
    text-align: left;
  }

  .privacy-footer > span {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex-basis: 16px;
    margin-top: 1px;
  }

  .privacy-footer > span::after {
    width: 7px;
    height: 4px;
    left: 4px;
    top: 5px;
  }
}

/* End v1.3 patch. */


/* ------------------------------------------------------------------
   v1.4 privacy footer card restore.
   Fixes v1.3 side drift and restores the glass card/border. The block is
   still a normal page element below the interface, not fixed to viewport.
------------------------------------------------------------------- */

.privacy-footer {
  position: static;
  inset: auto;
  z-index: 1;

  box-sizing: border-box;
  width: min(1120px, calc(100% - 56px));
  max-width: 1120px;

  margin: 14px auto 34px;
  padding: 14px 18px;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;

  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;

  border: 1px solid rgba(190, 215, 255, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(120, 160, 220, 0.08)),
    var(--glass-bg-strong, rgba(255, 255, 255, 0.12));
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);

  overflow: visible;
  pointer-events: auto;
}

[data-theme="dark"] .privacy-footer {
  border-color: rgba(190, 215, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(110, 160, 255, 0.11), rgba(120, 75, 210, 0.09)),
    rgba(15, 18, 32, 0.54);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.privacy-footer > span {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  align-self: flex-start;

  border-radius: 50%;
  border: 1px solid rgba(95, 209, 154, 0.50);
  background: rgba(95, 209, 154, 0.16);
}

.privacy-footer p {
  margin: 0;
  min-width: 0;
  max-width: 100%;
}

/* Hidden screens must not push the footer away. */
.tool-workspace.is-hidden,
#toolHome.is-hidden {
  display: none;
}

@media (max-width: 720px) {
  .privacy-footer {
    width: calc(100% - 32px);
    max-width: none;

    margin: 10px auto 24px;
    padding: 12px 14px;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 9px;

    border-radius: 18px;
    font-size: 12px;
    line-height: 1.42;
    text-align: left;
  }

  .privacy-footer > span {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex: 0 0 16px;
    margin-top: 1px;
  }

  .privacy-footer > span::after {
    width: 7px;
    height: 4px;
    left: 4px;
    top: 5px;
  }
}

/* End v1.4 patch. */


/* ------------------------------------------------------------------
   v1.5 privacy footer hard-center.
   The previous card style could still inherit old horizontal positioning on
   wide screens. This pins the normal-flow footer to the center of the page
   without making it fixed/sticky.
------------------------------------------------------------------- */

body > .privacy-footer {
  position: relative;
  inset: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);

  box-sizing: border-box;
  width: min(960px, calc(100vw - 56px));
  max-width: 960px;

  margin: 22px 0 36px;
  padding: 14px 18px;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;

  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;

  border: 1px solid rgba(190, 215, 255, 0.26);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(120, 160, 220, 0.10)),
    rgba(244, 248, 255, 0.54);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);

  overflow: visible;
  pointer-events: auto;
}

[data-theme="dark"] body > .privacy-footer,
body[data-theme="dark"] > .privacy-footer {
  border-color: rgba(190, 215, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(110, 160, 255, 0.11), rgba(120, 75, 210, 0.09)),
    rgba(15, 18, 32, 0.58);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body > .privacy-footer > span {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  align-self: flex-start;
  border-radius: 50%;
}

body > .privacy-footer p {
  margin: 0;
  min-width: 0;
  max-width: 100%;
}

/* Keep only the active interface in the layout. */
.tool-workspace.is-hidden,
#toolHome.is-hidden {
  display: none;
}

/* Mobile: same centered card, icon remains left of text. */
@media (max-width: 720px) {
  body > .privacy-footer {
    left: 50%;
    transform: translateX(-50%);

    width: calc(100vw - 32px);
    max-width: none;

    margin: 14px 0 24px;
    padding: 12px 14px;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;

    border-radius: 18px;
    font-size: 12px;
    line-height: 1.42;
    text-align: left;
  }

  body > .privacy-footer > span {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex: 0 0 16px;
    margin-top: 1px;
  }

  body > .privacy-footer > span::after {
    width: 7px;
    height: 4px;
    left: 4px;
    top: 5px;
  }
}

/* End v1.5 patch. */


/* ------------------------------------------------------------------
   v1.6 privacy footer normal-flow bottom.
   Logic:
   - privacy card is part of the page/interface, not fixed to viewport;
   - it appears after the active interface/workspace;
   - it is centered with normal margin auto, not with left/transform;
   - it keeps the glass card;
   - mobile keeps the check icon left of the text.
------------------------------------------------------------------- */

body > .privacy-footer {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;

  box-sizing: border-box;
  width: min(960px, calc(100% - 56px));
  max-width: 960px;

  margin: 24px auto 36px;
  padding: 14px 18px;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;

  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;

  border: 1px solid rgba(190, 215, 255, 0.26);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(120, 160, 220, 0.10)),
    rgba(244, 248, 255, 0.54);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);

  overflow: visible;
  pointer-events: auto;
}

[data-theme="dark"] body > .privacy-footer {
  border-color: rgba(190, 215, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(110, 160, 255, 0.11), rgba(120, 75, 210, 0.09)),
    rgba(15, 18, 32, 0.58);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body > .privacy-footer > span {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  align-self: flex-start;
  border-radius: 50%;
}

body > .privacy-footer p {
  margin: 0;
  min-width: 0;
  max-width: 100%;
}

/* Hidden screens must not reserve vertical space before the footer. */
.tool-workspace.is-hidden,
#toolHome.is-hidden {
  display: none;
}

/* Mobile: centered card under interface, icon stays left of text. */
@media (max-width: 720px) {
  body > .privacy-footer {
    position: relative;
    left: auto;
    transform: none;

    width: calc(100% - 32px);
    max-width: none;

    margin: 16px auto 24px;
    padding: 12px 14px;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 9px;

    border-radius: 18px;
    font-size: 12px;
    line-height: 1.42;
    text-align: left;
  }

  body > .privacy-footer > span {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex: 0 0 16px;
    margin-top: 1px;
  }

  body > .privacy-footer > span::after {
    width: 7px;
    height: 4px;
    left: 4px;
    top: 5px;
  }
}

/* End v1.6 patch. */

/* ------------------------------------------------------------------
   v1.7 hard privacy footer bottom fix.
   The privacy card is still normal page content, but flex auto-margin
   pushes it to the bottom of the visible page when the interface is short.
   It does not use fixed positioning and does not cover the UI.
------------------------------------------------------------------- */
html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.app-header,
.access-shell,
#toolHome,
.tool-workspace,
.download-frame {
  flex: 0 0 auto;
}

.tool-workspace.is-hidden,
#toolHome.is-hidden {
  display: none;
}

body > .privacy-footer {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;

  flex: 0 0 auto;
  box-sizing: border-box;
  width: min(calc(100% - 56px), 1120px);
  max-width: 1120px;
  min-height: 58px;

  /* Top auto margin consumes empty vertical space and pushes the card down. */
  margin: auto auto 44px;
  padding: 12px 18px;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;

  text-align: left;
  overflow: visible;
  pointer-events: auto;
}

body > .privacy-footer > span {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  margin: 2px 0 0;
  display: block;
  position: relative;
  overflow: visible;
  border-radius: 50%;
  align-self: flex-start;
}

body > .privacy-footer > span::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 8px;
  height: 5px;
  left: 50%;
  top: 48%;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center center;
}

body > .privacy-footer p {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 720px),
(pointer: coarse) {
  body {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  body > .privacy-footer {
    width: calc(100% - 32px);
    max-width: none;
    min-height: 58px;
    margin: auto auto 28px;
    padding: 12px 14px;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 9px;

    border-radius: 18px;
    font-size: 12px;
    line-height: 1.42;
    text-align: left;
  }

  body > .privacy-footer > span {
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex: 0 0 18px;
    margin-top: 2px;
  }

  body > .privacy-footer > span::after {
    width: 8px;
    height: 5px;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/* End v1.7 bottom privacy footer fix. */


/* ------------------------------------------------------------------
   v1.7 minimal fix: queue alignment, wider preview/editor areas,
   social preset support. Does not alter shader/background glass styling.
------------------------------------------------------------------- */

@media (min-width: 1281px) {
  #backgroundWorkspace.workspace {
    width: min(1840px, calc(100vw - 48px));
    max-width: 1840px;
    grid-template-columns:
      minmax(350px, 390px)
      minmax(760px, 1fr)
      minmax(320px, 380px);
    align-items: start;
  }

  #cropWorkspace.editor-workspace,
  #blurWorkspace.editor-workspace {
    width: min(1680px, calc(100vw - 48px));
    max-width: 1680px;
    grid-template-columns: minmax(320px, 380px) minmax(900px, 1fr);
    align-items: start;
  }

  #backgroundWorkspace .preview-grid {
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
    gap: 22px;
  }

  #backgroundWorkspace .image-frame {
    min-height: 520px;
  }

  #backgroundWorkspace .image-frame.has-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #cropWorkspace .preview-grid,
  #blurWorkspace .preview-grid {
    grid-template-columns: minmax(620px, 1.45fr) minmax(360px, 0.85fr);
    gap: 22px;
  }

  #cropWorkspace .canvas-frame,
  #blurWorkspace .canvas-frame,
  #cropWorkspace .image-frame,
  #blurWorkspace .image-frame {
    min-height: 620px;
  }

  #cropWorkspace .canvas-frame.has-image canvas,
  #blurWorkspace .canvas-frame.has-image canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

#backgroundWorkspace .queue-file {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) max-content max-content;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  overflow: visible;
}

#backgroundWorkspace .queue-file.is-empty {
  grid-template-columns: 46px minmax(0, 1fr);
}

#backgroundWorkspace .queue-file-meta {
  min-width: 0;
}

#backgroundWorkspace .queue-file strong {
  max-width: none;
}

#backgroundWorkspace .queue-status,
#backgroundWorkspace .queue-download {
  align-self: center;
  justify-self: end;
  margin-left: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

#backgroundWorkspace .queue-download {
  min-width: 104px;
  text-align: center;
}

@media (max-width: 1280px) {
  #backgroundWorkspace .preview-grid,
  #cropWorkspace .preview-grid,
  #blurWorkspace .preview-grid {
    grid-template-columns: 1fr;
  }

  #backgroundWorkspace .image-frame,
  #cropWorkspace .canvas-frame,
  #blurWorkspace .canvas-frame,
  #cropWorkspace .image-frame,
  #blurWorkspace .image-frame {
    min-height: 420px;
  }
}

@media (max-width: 720px) {
  #backgroundWorkspace .queue-file {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #backgroundWorkspace .queue-status,
  #backgroundWorkspace .queue-download {
    margin-left: 58px;
    min-width: 0;
  }
}

/* End v1.7 minimal fix. */

/* ------------------------------------------------------------------
   v1.7.1 minimal layout correction.
   Fixes only:
   1) Crop / Blur result column must be the same width as the edit column.
   2) Main glass interface columns must stretch to the height of the tallest one.
   Does not change the transparent background styling.
------------------------------------------------------------------- */

@media (min-width: 1281px) {
  #backgroundWorkspace.workspace,
  #cropWorkspace.editor-workspace,
  #blurWorkspace.editor-workspace {
    align-items: stretch;
  }

  #backgroundWorkspace.workspace > .panel,
  #backgroundWorkspace.workspace > .preview-area,
  #cropWorkspace.editor-workspace > .panel,
  #cropWorkspace.editor-workspace > .preview-area,
  #blurWorkspace.editor-workspace > .panel,
  #blurWorkspace.editor-workspace > .preview-area {
    height: 100%;
    align-self: stretch;
  }

  #backgroundWorkspace .panel,
  #backgroundWorkspace .preview-area,
  #cropWorkspace .panel,
  #cropWorkspace .preview-area,
  #blurWorkspace .panel,
  #blurWorkspace .preview-area {
    display: flex;
    flex-direction: column;
  }

  #backgroundWorkspace .preview-grid,
  #cropWorkspace .preview-grid,
  #blurWorkspace .preview-grid {
    align-items: stretch;
  }

  #cropWorkspace .preview-grid,
  #blurWorkspace .preview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
  }

  #cropWorkspace .preview-column,
  #blurWorkspace .preview-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  #cropWorkspace .canvas-frame,
  #blurWorkspace .canvas-frame,
  #cropWorkspace .image-frame,
  #blurWorkspace .image-frame {
    width: 100%;
    min-width: 0;
    min-height: 620px;
    flex: 1 1 auto;
  }
}


/* ------------------------------------------------------------------
   v1.7.2 metadata layout fix.
   Minimal change: make Remove Metadata use the same visible two-column
   Original / Clean result preview behavior as the other tools.
   Existing JS and /api/remove-exif backend are reused.
------------------------------------------------------------------- */

#metadataWorkspace .preview-grid > .preview-column:nth-child(2) {
  display: flex;
}

@media (min-width: 1281px) {
  #metadataWorkspace.editor-workspace {
    width: min(1680px, calc(100vw - 48px));
    max-width: 1680px;
    grid-template-columns: minmax(320px, 380px) minmax(900px, 1fr);
    align-items: stretch;
  }

  #metadataWorkspace.editor-workspace > .panel,
  #metadataWorkspace.editor-workspace > .preview-area {
    height: 100%;
    align-self: stretch;
  }

  #metadataWorkspace .panel,
  #metadataWorkspace .preview-area {
    display: flex;
    flex-direction: column;
  }

  #metadataWorkspace .preview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 620px;
  }

  #metadataWorkspace .preview-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  #metadataWorkspace .image-frame {
    width: 100%;
    min-width: 0;
    min-height: 620px;
    flex: 1 1 auto;
  }
}

@media (max-width: 1280px) {
  #metadataWorkspace .preview-grid {
    grid-template-columns: 1fr;
  }

  #metadataWorkspace .preview-grid > .preview-column:nth-child(2) {
    display: flex;
  }

  #metadataWorkspace .image-frame {
    min-height: 420px;
  }
}

@media (max-width: 720px) {
  #metadataWorkspace .image-frame {
    min-height: 340px;
  }
}

/* End v1.7.2 metadata layout fix. */


/* ------------------------------------------------------------------
   v1.7.3 Remove Metadata UI simplification.
   Keep #metadataResultPreview in the DOM because app.js uses it after
   /api/remove-exif finishes, but hide the second visual preview.
   The cleaned file is still downloaded through the Download button.
------------------------------------------------------------------- */

#metadataWorkspace .preview-grid {
  grid-template-columns: minmax(0, 1fr);
}

#metadataWorkspace .preview-grid > .preview-column:nth-child(2) {
  display: none;
}

@media (min-width: 1281px) {
  #metadataWorkspace.editor-workspace {
    width: min(1280px, calc(100vw - 48px));
    max-width: 1280px;
    grid-template-columns: minmax(320px, 380px) minmax(620px, 1fr);
  }

  #metadataWorkspace .preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* End v1.7.3 Remove Metadata UI simplification. */

/* ------------------------------------------------------------------
   v1.7.4 stable frontend pass.
   Keep the existing glass theme, but remove the last layout conflicts:
   - Remove Metadata shows Original and Clean result like a real tool.
   - Queue Download stays aligned.
   - Privacy note remains below the interface and centered.
   - Tool icons stay transparent, without square backgrounds.
------------------------------------------------------------------- */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#backgroundWorkspace.workspace {
  width: min(1840px, calc(100vw - 48px));
  max-width: 1840px;
}

#cropWorkspace.editor-workspace,
#blurWorkspace.editor-workspace,
#metadataWorkspace.editor-workspace {
  width: min(1680px, calc(100vw - 48px));
  max-width: 1680px;
}

@media (min-width: 1281px) {
  #backgroundWorkspace.workspace {
    grid-template-columns:
      minmax(340px, 390px)
      minmax(760px, 1fr)
      minmax(300px, 360px);
    align-items: stretch;
  }

  #cropWorkspace.editor-workspace,
  #blurWorkspace.editor-workspace,
  #metadataWorkspace.editor-workspace {
    grid-template-columns: minmax(320px, 380px) minmax(900px, 1fr);
    align-items: stretch;
  }

  #cropWorkspace .preview-grid,
  #blurWorkspace .preview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
    flex: 1 1 auto;
  }

  #metadataWorkspace .preview-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
    flex: 1 1 auto;
  }

  #cropWorkspace .canvas-frame,
  #blurWorkspace .canvas-frame,
  #cropWorkspace .image-frame,
  #blurWorkspace .image-frame,
  #metadataWorkspace .image-frame {
    min-height: 620px;
    flex: 1 1 auto;
  }
}

#metadataWorkspace .preview-grid {
  grid-template-columns: minmax(0, 1fr);
}

#backgroundWorkspace .queue-file {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) max-content max-content;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
}

#backgroundWorkspace .queue-file.is-empty {
  grid-template-columns: 46px minmax(0, 1fr);
}

#backgroundWorkspace .queue-file-meta {
  min-width: 0;
}

#backgroundWorkspace .queue-status,
#backgroundWorkspace .queue-download {
  align-self: center;
  justify-self: end;
  margin-left: 0;
  white-space: nowrap;
}

#backgroundWorkspace .queue-download {
  min-width: 104px;
  min-height: 32px;
}

.tool-card > .tool-icon,
.tool-card .tool-icon {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0;
  box-shadow: none;
  filter: none;
}

.tool-card:hover > .tool-icon,
.tool-card:hover .tool-icon {
  background-color: transparent;
  box-shadow: none;
  filter: none;
}

.theme-toggle {
  --theme-toggle-bg: rgba(223, 231, 246, 0.88);
  align-items: center;
  background: var(--theme-toggle-bg);
}

[data-theme="dark"] .theme-toggle {
  --theme-toggle-bg: rgba(34, 39, 68, 0.72);
}

.theme-icon {
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.theme-icon::before,
.theme-icon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.theme-icon::before {
  width: 15px;
  height: 15px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(35, 104, 242, 0.13);
}

.theme-icon::after {
  display: none;
}

[data-theme="dark"] .theme-icon::before {
  width: 16px;
  height: 16px;
}

[data-theme="dark"] .theme-icon::after {
  display: block;
  width: 13px;
  height: 13px;
  left: 10px;
  top: 3px;
  background: var(--theme-toggle-bg);
}

body > .privacy-footer {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  transform: none;
  width: min(1440px, calc(100% - 56px));
  max-width: 1440px;
  margin: auto auto 28px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

body > .privacy-footer > span {
  margin-top: 1px;
}

@media (max-width: 1280px) {
  #backgroundWorkspace.workspace,
  #cropWorkspace.editor-workspace,
  #blurWorkspace.editor-workspace,
  #metadataWorkspace.editor-workspace {
    width: calc(100% - 32px);
    max-width: none;
  }

  #backgroundWorkspace .preview-grid,
  #cropWorkspace .preview-grid,
  #blurWorkspace .preview-grid,
  #metadataWorkspace .preview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #backgroundWorkspace.workspace,
  #cropWorkspace.editor-workspace,
  #blurWorkspace.editor-workspace,
  #metadataWorkspace.editor-workspace {
    width: 100%;
  }

  #backgroundWorkspace .queue-file {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
  }

  #backgroundWorkspace .queue-status,
  #backgroundWorkspace .queue-download {
    justify-self: start;
    margin-left: 58px;
  }

  #backgroundWorkspace .queue-download {
    width: auto;
    min-width: 104px;
  }

  body > .privacy-footer {
    width: calc(100% - 32px);
    min-height: auto;
    margin: auto auto 24px;
    padding: 12px;
    flex-direction: row;
    align-items: flex-start;
  }
}

/* End v1.7.4 stable frontend pass. */

/* ------------------------------------------------------------------
   v1.7.6 compression UI and theme icon correction.
   The current-theme button shows the target mode:
   - Light button in dark mode uses a sun.
   - Dark button in light mode uses a moon.
------------------------------------------------------------------- */

[data-theme="dark"] .theme-icon,
[data-theme="light"] .theme-icon {
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  display: inline-block;
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] .theme-icon {
  overflow: visible;
}

[data-theme="light"] .theme-icon {
  overflow: hidden;
}

[data-theme="dark"] .theme-icon::before,
[data-theme="light"] .theme-icon::before,
[data-theme="dark"] .theme-icon::after,
[data-theme="light"] .theme-icon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

[data-theme="dark"] .theme-icon::before {
  width: 12px;
  height: 12px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #ffe08a, #f59e0b);
  box-shadow:
    0 -8px 0 -5px #f59e0b,
    0 8px 0 -5px #f59e0b,
    8px 0 0 -5px #f59e0b,
    -8px 0 0 -5px #f59e0b,
    6px 6px 0 -5px #f59e0b,
    -6px 6px 0 -5px #f59e0b,
    6px -6px 0 -5px #f59e0b,
    -6px -6px 0 -5px #f59e0b,
    0 0 0 4px rgba(245, 158, 11, 0.16);
}

[data-theme="dark"] .theme-icon::after {
  display: none;
}

[data-theme="light"] .theme-icon::before {
  width: 16px;
  height: 16px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #8fb5ff, #3d71e8);
  box-shadow: 0 0 0 4px rgba(61, 113, 232, 0.13);
}

[data-theme="light"] .theme-icon::after {
  display: block;
  width: 13px;
  height: 13px;
  left: 10px;
  top: 3px;
  background: var(--theme-toggle-bg, rgba(223, 231, 246, 0.88));
}

/* End v1.7.6 compression UI and theme icon correction. */

/* ------------------------------------------------------------------
   v1.7.8 batch export tool cards and workspaces.
------------------------------------------------------------------- */

.tool-card > .tool-icon.tool-icon-compress {
}

.tool-card > .tool-icon.tool-icon-format {
}

.tool-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-theme="dark"] .tool-card > .tool-icon.tool-icon-compress {
}

[data-theme="dark"] .tool-card > .tool-icon.tool-icon-format {
}

.range-action-row .small-button:hover:not(:disabled),
.range-action-row .small-button:focus-visible {
  background: var(--button-soft-hover);
  border-color: rgba(53, 111, 244, 0.38);
  transform: translateY(-1px);
}

#compressWorkspace .queue-file,
#formatWorkspace .queue-file {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) max-content max-content;
  align-items: center;
}

#compressWorkspace .queue-download,
#formatWorkspace .queue-download {
  justify-self: end;
  margin-left: 0;
}

#compressWorkspace .range-action-row {
  grid-template-columns: minmax(260px, 1fr) max-content;
  gap: 8px;
}

#compressWithoutCompressionButton {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1;
}

@media (min-width: 1281px) {
  #compressWorkspace.editor-workspace,
  #formatWorkspace.editor-workspace {
    max-width: 1680px;
    grid-template-columns: minmax(360px, 430px) minmax(740px, 1fr);
  }

  #compressWorkspace .preview-grid,
  #formatWorkspace .preview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #compressWorkspace .image-frame,
  #formatWorkspace .image-frame {
    min-height: 560px;
  }
}

@media (max-width: 720px) {
  .tool-cards {
    grid-template-columns: 1fr;
  }

  #compressWorkspace .preview-grid,
  #formatWorkspace .preview-grid {
    grid-template-columns: 1fr;
  }

  #compressWorkspace .queue-file,
  #formatWorkspace .queue-file {
    grid-template-columns: 46px minmax(0, 1fr);
    row-gap: 8px;
  }

  #compressWorkspace .range-action-row {
    grid-template-columns: 1fr;
  }

  #compressWorkspace .queue-status,
  #compressWorkspace .queue-download,
  #formatWorkspace .queue-status,
  #formatWorkspace .queue-download {
    margin-left: 58px;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .tool-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* End v1.7.8 batch export tool cards and workspaces. */


/* v1.7.9 clean icon source of truth */
.tool-card > .tool-icon,
.tool-card .tool-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  flex: 0 0 56px;
  display: block;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

.tool-card > .tool-icon::before,
.tool-card > .tool-icon::after,
.tool-card .tool-icon::before,
.tool-card .tool-icon::after {
  content: none;
  display: none;
}

.tool-card > .tool-icon .tool-icon-img,
.tool-card .tool-icon .tool-icon-img {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  object-fit: contain;
  opacity: 1;
  visibility: visible;
  background: transparent;
  box-shadow: none;
  filter: none;
}


.tool-card:hover > .tool-icon,
.tool-card:hover .tool-icon {
  transform: translateY(-1px) scale(1.025);
  background: transparent;
  box-shadow: none;
  filter: none;
}

/* v1.8.0 final single SVG icon rendering.
   Icons are real <img> elements from /static/icons/.
   No CSS icon backgrounds and no query versions. */
html[data-theme] body .tool-card[data-tool-open] > .tool-icon,
html[data-theme] body .tool-card[data-tool-open] .tool-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  flex: 0 0 56px;
  display: block;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  line-height: 0;
}

html[data-theme] body .tool-card[data-tool-open] > .tool-icon::before,
html[data-theme] body .tool-card[data-tool-open] > .tool-icon::after,
html[data-theme] body .tool-card[data-tool-open] .tool-icon::before,
html[data-theme] body .tool-card[data-tool-open] .tool-icon::after {
  content: none;
  display: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  filter: none;
  opacity: 0;
}

html[data-theme] body .tool-card[data-tool-open] > .tool-icon .tool-icon-img,
html[data-theme] body .tool-card[data-tool-open] .tool-icon .tool-icon-img,
html[data-theme] body .tool-card[data-tool-open] > .tool-icon img.tool-icon-img,
html[data-theme] body .tool-card[data-tool-open] .tool-icon img.tool-icon-img {
  width: 56px;
  height: 56px;
  min-width: 56px;
  max-width: 56px;
  display: block;
  object-fit: contain;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  filter: none;
  opacity: 1;
  visibility: visible;
}

html[data-theme] body .tool-card[data-tool-open]:hover > .tool-icon,
html[data-theme] body .tool-card[data-tool-open]:hover .tool-icon {
  transform: translateY(-1px) scale(1.025);
  background: transparent;
  background-image: none;
  box-shadow: none;
  filter: none;
}

/* v1.8.1 clean tool icons: one real IMG from /static/icons, no CSS icon backgrounds. */
body .tool-cards .tool-card[data-tool-open] > .tool-icon,
body .tool-cards .tool-card[data-tool-open]:hover > .tool-icon,
body .tool-cards .tool-card[data-tool-open]:focus-visible > .tool-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  filter: none;
  opacity: 1;
  visibility: visible;
  overflow: visible;
  line-height: 0;
}

body .tool-cards .tool-card[data-tool-open] > .tool-icon::before,
body .tool-cards .tool-card[data-tool-open] > .tool-icon::after,
body .tool-cards .tool-card[data-tool-open]:hover > .tool-icon::before,
body .tool-cards .tool-card[data-tool-open]:hover > .tool-icon::after,
body .tool-cards .tool-card[data-tool-open]:focus-visible > .tool-icon::before,
body .tool-cards .tool-card[data-tool-open]:focus-visible > .tool-icon::after {
  content: none;
  display: none;
  width: 0;
  height: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  filter: none;
  opacity: 0;
  visibility: hidden;
}

html body .tool-cards .tool-card[data-tool-open] > .tool-icon > img.tool-icon-img,
html body .tool-cards .tool-card[data-tool-open]:hover > .tool-icon > img.tool-icon-img,
html body .tool-cards .tool-card[data-tool-open]:focus-visible > .tool-icon > img.tool-icon-img {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 56px;
  height: 56px;
  min-width: 56px;
  max-width: 56px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  filter: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}



/* v1.8.2 isolated tool card icons.
   Source of truth: one real <img> loaded from /static/icons/.
   This deliberately avoids the old .tool-icon class so old icon CSS cannot hide, duplicate, or stack icons. */
.tool-card-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  line-height: 0;
}

.tool-card-icon::before,
.tool-card-icon::after {
  content: none;
  display: none;
}

.tool-card-icon-img {
  width: 56px;
  height: 56px;
  min-width: 56px;
  max-width: 56px;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
}

.tool-card:hover .tool-card-icon-img,
.tool-card:focus-visible .tool-card-icon-img {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.tool-card:hover .tool-card-icon,
.tool-card:focus-visible .tool-card-icon {
  transform: translateY(-1px) scale(1.025);
}

/* v1.8.3 tool card icons (light/dark pairs).
   Each tool card contains two <img> elements: one with .icon-light and one with .icon-dark.
   We hide all images by default, then show the appropriate one based on the document's theme attribute. */
.tool-card-icon img {
  /* Hide all icon images by default. The correct one will be revealed via theme rules below. */
  display: none;
  width: 56px;
  height: 56px;
  min-width: 56px;
  max-width: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

/* Show light version by default and when theme is explicitly light. */
html:not([data-theme="dark"]) .tool-card-icon img.icon-light,
html[data-theme="light"] .tool-card-icon img.icon-light {
  display: block;
}

/* Show dark version when theme is dark. */
html[data-theme="dark"] .tool-card-icon img.icon-dark {
  display: block;
}

/* v1.8.4 final tool card icons: one span, one background image, no IMG artifacts. */
.tool-card-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  flex: 0 0 56px;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: none;
  overflow: visible;
}

.tool-card-icon::before,
.tool-card-icon::after {
  content: none;
  display: none;
}

.tool-card-icon img,
.tool-card-icon-img {
  display: none;
}







.tool-card:hover .tool-card-icon,
.tool-card:focus-visible .tool-card-icon {
  opacity: 1;
  visibility: visible;
  transform: translateY(-1px) scale(1.025);
}

/* v1.8.5 final visible tool icons: one IMG per card, loaded directly from /static/icons/. */
.pts-tool-card-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  line-height: 0;
}

.pts-tool-card-icon::before,
.pts-tool-card-icon::after {
  content: none;
  display: none;
}

.pts-tool-card-icon__img {
  display: block;
  width: 56px;
  height: 56px;
  min-width: 56px;
  max-width: 56px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: none;
}

.tool-card:hover .pts-tool-card-icon,
.tool-card:focus-visible .pts-tool-card-icon {
  transform: translateY(-1px) scale(1.025);
}

.tool-card:hover .pts-tool-card-icon__img,
.tool-card:focus-visible .pts-tool-card-icon__img {
  opacity: 1;
  visibility: visible;
  transform: none;
}


/* v2.1-icons: generic two-file tool card icons.
   Each tool uses /static/icons/{tool-name}-light.svg and /static/icons/{tool-name}-dark.svg.
   CSS decides which image is visible. Icon paths do not use ?v=. */
.pts-tool-card-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  line-height: 0;
}

.pts-tool-card-icon::before,
.pts-tool-card-icon::after {
  content: none;
  display: none;
}

.pts-tool-card-icon__img {
  grid-area: 1 / 1;
  display: none;
  width: 56px;
  height: 56px;
  min-width: 56px;
  max-width: 56px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: none;
}

html:not([data-theme="dark"]) .pts-tool-card-icon__img--light,
html[data-theme="light"] .pts-tool-card-icon__img--light {
  display: block;
}

html[data-theme="dark"] .pts-tool-card-icon__img--dark {
  display: block;
}

html[data-theme="dark"] .pts-tool-card-icon__img--light {
  display: none;
}

.tool-card:hover .pts-tool-card-icon,
.tool-card:focus-visible .pts-tool-card-icon {
  transform: translateY(-1px) scale(1.025);
}

.tool-card:hover .pts-tool-card-icon__img,
.tool-card:focus-visible .pts-tool-card-icon__img {
  opacity: 1;
  visibility: visible;
  transform: none;
}


/* v2.0-bg-icon: final source of truth for visible tool card icons.
   Icons are real <img> files. The wrapper has no background image, so old CSS icon layers cannot appear. */
.pts-tool-card-icon {
  background: transparent;
  background-image: none;
}

.pts-tool-card-icon__img {
  grid-area: 1 / 1;
  display: none;
  width: 56px;
  height: 56px;
  min-width: 56px;
  max-width: 56px;
  object-fit: contain;
  opacity: 1;
  visibility: visible;
}

html:not([data-theme="dark"]) .pts-tool-card-icon__img--light,
html[data-theme="light"] .pts-tool-card-icon__img--light {
  display: block;
}

html[data-theme="dark"] .pts-tool-card-icon__img--dark {
  display: block;
}

html[data-theme="dark"] .pts-tool-card-icon__img--light {
  display: none;
}

/* v33: brand font/size only. Keep site name unchanged. */
.brand-title {
  font-family: "Segoe UI Variable Display", "Aptos Display", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 850;
  letter-spacing: -0.055em;
}

.brand-photo,
.brand-tools {
  font-size: clamp(28px, 1.8vw, 36px);
  line-height: 0.95;
}

@media (max-width: 720px), (pointer: coarse) {
  .brand-photo,
  .brand-tools {
    font-size: clamp(19px, 5.2vw, 25px);
  }
}

/* v2.2-brand-main-font: use the same main UI font for the site name. */
.brand-title {
  font-family: inherit;
  font-weight: 820;
  letter-spacing: -0.025em;
  line-height: 1;
}

.brand-photo,
.brand-tools {
  font-family: inherit;
  font-size: clamp(23px, 1.45vw, 30px);
  line-height: 1;
}

@media (max-width: 720px), (pointer: coarse) {
  .brand-photo,
  .brand-tools {
    font-size: clamp(17px, 4.8vw, 22px);
  }
}

/* brand title should look like the main h1 ("Choose what you want to edit") */
.brand-title {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
}

.brand-photo,
.brand-tools {
  font-family: inherit;
  font-size: clamp(22px, 1.45vw, 29px);
  line-height: 1.08;
  font-weight: 800;
  color: var(--ink);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  filter: none;
}

@media (max-width: 720px), (pointer: coarse) {
  .brand-photo,
  .brand-tools {
    font-size: clamp(17px, 4.7vw, 21px);
  }
}

/* v2.4-compress-format-wide:
   Make Compress Image and Convert Format preview windows as wide as other two-preview tools.
   Do not use the Remove Metadata single-preview layout. */
#compressWorkspace.editor-workspace,
#formatWorkspace.editor-workspace {
  width: min(1680px, calc(100vw - 48px));
  max-width: 1680px;
}

@media (min-width: 1281px) {
  #compressWorkspace.editor-workspace,
  #formatWorkspace.editor-workspace {
    grid-template-columns: minmax(320px, 380px) minmax(900px, 1fr);
    align-items: stretch;
  }

  #compressWorkspace.editor-workspace > .panel,
  #compressWorkspace.editor-workspace > .preview-area,
  #formatWorkspace.editor-workspace > .panel,
  #formatWorkspace.editor-workspace > .preview-area {
    height: 100%;
    align-self: stretch;
  }

  #compressWorkspace .panel,
  #compressWorkspace .preview-area,
  #formatWorkspace .panel,
  #formatWorkspace .preview-area {
    display: flex;
    flex-direction: column;
  }

  #compressWorkspace .preview-grid,
  #formatWorkspace .preview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
    flex: 1 1 auto;
  }

  #compressWorkspace .image-frame,
  #formatWorkspace .image-frame {
    min-height: 620px;
    flex: 1 1 auto;
  }
}

@media (max-width: 1280px) {
  #compressWorkspace.editor-workspace,
  #formatWorkspace.editor-workspace {
    width: calc(100% - 32px);
    max-width: none;
  }

  #compressWorkspace .preview-grid,
  #formatWorkspace .preview-grid {
    grid-template-columns: 1fr;
  }

  #compressWorkspace .image-frame,
  #formatWorkspace .image-frame {
    min-height: 420px;
  }
}

@media (max-width: 720px) {
  #compressWorkspace.editor-workspace,
  #formatWorkspace.editor-workspace {
    width: 100%;
  }
}

/* stable-preview-size:
   Keep preview windows stable when uploaded photos have different aspect ratios.
   Images keep their proportions with object-fit: contain. */
.image-frame {
  height: clamp(420px, 48vh, 680px);
  min-height: 420px;
  max-height: 680px;
  overflow: hidden;
}

.image-frame.has-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Keep Compress / Convert preview windows consistent too. */
#compressWorkspace .image-frame,
#formatWorkspace .image-frame {
  height: clamp(440px, 50vh, 700px);
  min-height: 440px;
  max-height: 700px;
}

/* Metadata has one preview, so keep it stable but not oversized. */
#metadataWorkspace .image-frame {
  height: clamp(420px, 48vh, 680px);
  min-height: 420px;
  max-height: 680px;
}

/* compact-status-queue:
   Put processing stages and queue progress side by side under previews.
   Applies to file-export tools only, not Remove background. */
#metadataWorkspace .preview-area,
#compressWorkspace .preview-area,
#formatWorkspace .preview-area {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(520px, 1.45fr);
  grid-template-areas:
    "preview preview"
    "status queue";
  gap: 18px 22px;
  align-items: stretch;
}

#metadataWorkspace .preview-grid,
#compressWorkspace .preview-grid,
#formatWorkspace .preview-grid {
  grid-area: preview;
  min-width: 0;
}

#metadataWorkspace .status-card,
#compressWorkspace .status-card,
#formatWorkspace .status-card {
  grid-area: status;
  min-width: 0;
  margin: 0;
  padding: 14px;
  align-self: stretch;
}

#metadataWorkspace .queue-position-card,
#compressWorkspace .queue-position-card,
#formatWorkspace .queue-position-card {
  grid-area: queue;
  min-width: 0;
  margin: 0;
  padding: 14px;
  align-self: stretch;
}

#metadataWorkspace .status-card-header,
#compressWorkspace .status-card-header,
#formatWorkspace .status-card-header,
#metadataWorkspace .queue-position-header,
#compressWorkspace .queue-position-header,
#formatWorkspace .queue-position-header {
  margin-bottom: 10px;
}

#metadataWorkspace .status-log,
#compressWorkspace .status-log,
#formatWorkspace .status-log {
  padding: 12px 15px;
  line-height: 1.45;
}

#metadataWorkspace .status-log li,
#compressWorkspace .status-log li,
#formatWorkspace .status-log li {
  font-size: 13px;
}

#metadataWorkspace .queue-position-card,
#compressWorkspace .queue-position-card,
#formatWorkspace .queue-position-card {
  gap: 12px;
}

#metadataWorkspace .queue-position-grid,
#compressWorkspace .queue-position-grid,
#formatWorkspace .queue-position-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#metadataWorkspace .queue-position-grid div,
#compressWorkspace .queue-position-grid div,
#formatWorkspace .queue-position-grid div {
  padding: 9px 10px;
}

@media (max-width: 1100px) {
  #metadataWorkspace .preview-area,
  #compressWorkspace .preview-area,
  #formatWorkspace .preview-area {
    grid-template-columns: 1fr;
    grid-template-areas:
      "preview"
      "status"
      "queue";
  }

  #metadataWorkspace .queue-position-grid,
  #compressWorkspace .queue-position-grid,
  #formatWorkspace .queue-position-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* harmonized-status-queue:
   Compact desktop layout for file-export tools.
   Preview stays on top; processing stages and queue sit side by side below it.
   Mobile/tablet keeps vertical layout. */

@media (min-width: 1101px) {
  #metadataWorkspace.editor-workspace,
  #compressWorkspace.editor-workspace,
  #formatWorkspace.editor-workspace {
    width: min(1680px, calc(100vw - 48px));
    max-width: 1680px;
    min-height: calc(100dvh - 150px);
    align-items: stretch;
  }

  #metadataWorkspace .editor-panel,
  #compressWorkspace .editor-panel,
  #formatWorkspace .editor-panel {
    height: 100%;
    min-height: 0;
    overflow: auto;
  }

  #metadataWorkspace .preview-area,
  #compressWorkspace .preview-area,
  #formatWorkspace .preview-area {
    min-height: calc(100dvh - 150px);
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(520px, 1.6fr);
    grid-template-rows: minmax(420px, 1fr) auto;
    grid-template-areas:
      "preview preview"
      "status queue";
    gap: 16px 22px;
    align-items: stretch;
  }

  #metadataWorkspace .preview-grid,
  #compressWorkspace .preview-grid,
  #formatWorkspace .preview-grid {
    grid-area: preview;
    min-height: 0;
    height: 100%;
  }

  #compressWorkspace .preview-grid,
  #formatWorkspace .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #metadataWorkspace .status-card,
  #compressWorkspace .status-card,
  #formatWorkspace .status-card {
    grid-area: status;
  }

  #metadataWorkspace .queue-position-card,
  #compressWorkspace .queue-position-card,
  #formatWorkspace .queue-position-card {
    grid-area: queue;
  }

  #metadataWorkspace .status-card,
  #compressWorkspace .status-card,
  #formatWorkspace .status-card,
  #metadataWorkspace .queue-position-card,
  #compressWorkspace .queue-position-card,
  #formatWorkspace .queue-position-card {
    margin: 0;
    padding: 14px 16px;
    min-height: 146px;
    align-self: stretch;
    border-top: 1px solid var(--line);
  }

  #metadataWorkspace .status-card-header,
  #compressWorkspace .status-card-header,
  #formatWorkspace .status-card-header,
  #metadataWorkspace .queue-position-header,
  #compressWorkspace .queue-position-header,
  #formatWorkspace .queue-position-header {
    margin-bottom: 10px;
    min-height: 30px;
  }

  #metadataWorkspace .status-log,
  #compressWorkspace .status-log,
  #formatWorkspace .status-log {
    padding: 12px 14px;
    line-height: 1.42;
    border-radius: 16px;
  }

  #metadataWorkspace .status-log li,
  #compressWorkspace .status-log li,
  #formatWorkspace .status-log li {
    font-size: 13px;
  }

  #metadataWorkspace .queue-position-card,
  #compressWorkspace .queue-position-card,
  #formatWorkspace .queue-position-card {
    display: grid;
    grid-template-rows: auto auto 8px auto;
    gap: 11px;
  }

  #metadataWorkspace .queue-position-grid,
  #compressWorkspace .queue-position-grid,
  #formatWorkspace .queue-position-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  #metadataWorkspace .queue-position-grid div,
  #compressWorkspace .queue-position-grid div,
  #formatWorkspace .queue-position-grid div {
    min-height: 58px;
    padding: 9px 12px;
    border-radius: 12px;
  }

  #metadataWorkspace .queue-position-grid span,
  #compressWorkspace .queue-position-grid span,
  #formatWorkspace .queue-position-grid span,
  #metadataWorkspace .queue-position-card small,
  #compressWorkspace .queue-position-card small,
  #formatWorkspace .queue-position-card small {
    font-size: 12px;
    line-height: 1.25;
  }

  #metadataWorkspace .queue-position-grid strong,
  #compressWorkspace .queue-position-grid strong,
  #formatWorkspace .queue-position-grid strong {
    margin-top: 4px;
    font-size: 14px;
  }

  #metadataWorkspace .queue-progress-track,
  #compressWorkspace .queue-progress-track,
  #formatWorkspace .queue-progress-track {
    height: 8px;
    align-self: center;
  }

  #metadataWorkspace .image-frame,
  #compressWorkspace .image-frame,
  #formatWorkspace .image-frame {
    height: 100%;
    min-height: 420px;
    max-height: none;
  }

  #metadataWorkspace .image-frame.has-image img,
  #compressWorkspace .image-frame.has-image img,
  #formatWorkspace .image-frame.has-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* Tablet and phone: keep it vertical and avoid forcing full-screen height. */
@media (max-width: 1100px) {
  #metadataWorkspace.editor-workspace,
  #compressWorkspace.editor-workspace,
  #formatWorkspace.editor-workspace {
    width: 100%;
    min-height: auto;
  }

  #metadataWorkspace .preview-area,
  #compressWorkspace .preview-area,
  #formatWorkspace .preview-area {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "preview"
      "status"
      "queue";
    min-height: auto;
  }

  #metadataWorkspace .preview-grid,
  #compressWorkspace .preview-grid,
  #formatWorkspace .preview-grid {
    grid-area: preview;
  }

  #metadataWorkspace .status-card,
  #compressWorkspace .status-card,
  #formatWorkspace .status-card {
    grid-area: status;
  }

  #metadataWorkspace .queue-position-card,
  #compressWorkspace .queue-position-card,
  #formatWorkspace .queue-position-card {
    grid-area: queue;
  }

  #metadataWorkspace .queue-position-grid,
  #compressWorkspace .queue-position-grid,
  #formatWorkspace .queue-position-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* crop-blur-result-aware-layout:
   Before processing: show one large editor preview.
   After processing: show editor + result side by side.
   Uses CSS :has(), supported by current Chrome/Edge. */

@media (min-width: 1101px) {
  #cropWorkspace .preview-grid:not(:has(#cropResultPreview[src])),
  #blurWorkspace .preview-grid:not(:has(#blurResultPreview[src])) {
    grid-template-columns: 1fr !important;
  }

  #cropWorkspace .preview-grid:not(:has(#cropResultPreview[src])) .preview-column:has(#cropResultPreview),
  #blurWorkspace .preview-grid:not(:has(#blurResultPreview[src])) .preview-column:has(#blurResultPreview) {
    display: none !important;
  }

  #cropWorkspace .preview-grid:has(#cropResultPreview[src]),
  #blurWorkspace .preview-grid:has(#blurResultPreview[src]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  #cropWorkspace .canvas-frame,
  #blurWorkspace .canvas-frame,
  #cropWorkspace .image-frame,
  #blurWorkspace .image-frame {
    height: clamp(360px, calc(100dvh - 300px), 560px) !important;
    min-height: 360px !important;
    max-height: 560px !important;
    overflow: hidden !important;
  }

  #cropWorkspace .canvas-frame.has-image canvas,
  #blurWorkspace .canvas-frame.has-image canvas {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  #cropWorkspace .image-frame.has-image img,
  #blurWorkspace .image-frame.has-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* desktop-fit-screen:
   On desktop, keep the active tool inside the viewport.
   Browser page should not get a vertical scrollbar.
   Phone/tablet layout is not affected. */

@media (min-width: 1101px) and (min-height: 720px) {
  html,
  body {
    height: 100%;
    overflow-y: hidden;
  }

  body {
    min-height: 100dvh;
    padding-bottom: 0 !important;
  }

  .tool-workspace:not(.is-hidden) {
    height: calc(100dvh - 126px);
    max-height: calc(100dvh - 126px);
    overflow: hidden;
  }

  .editor-workspace.tool-workspace:not(.is-hidden),
  #backgroundWorkspace.workspace.tool-workspace:not(.is-hidden) {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .editor-panel,
  .upload-panel,
  .export-panel {
    max-height: 100%;
    overflow: auto;
  }

  .preview-area {
    min-height: 0 !important;
    max-height: 100%;
    overflow: hidden;
  }

  .preview-grid {
    min-height: 0 !important;
  }

  #cropWorkspace.editor-workspace,
  #blurWorkspace.editor-workspace,
  #metadataWorkspace.editor-workspace,
  #compressWorkspace.editor-workspace,
  #formatWorkspace.editor-workspace {
    align-items: stretch;
  }

  #cropWorkspace .preview-area,
  #blurWorkspace .preview-area,
  #metadataWorkspace .preview-area,
  #compressWorkspace .preview-area,
  #formatWorkspace .preview-area {
    gap: 14px;
  }

  #metadataWorkspace .status-card,
  #compressWorkspace .status-card,
  #formatWorkspace .status-card,
  #metadataWorkspace .queue-position-card,
  #compressWorkspace .queue-position-card,
  #formatWorkspace .queue-position-card {
    min-height: 118px !important;
    padding: 12px 14px !important;
  }

  #metadataWorkspace .status-log,
  #compressWorkspace .status-log,
  #formatWorkspace .status-log {
    padding: 10px 12px !important;
    line-height: 1.32 !important;
  }

  .privacy-footer {
    bottom: 8px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
}

/* fix-canvas-tall-slider:
   1) Crop/Blur canvas must not be stretched like a normal image.
   2) Very tall images must stay inside preview frames.
   3) Range sliders should match the glass UI. */

/* --- Crop / Blur: restore correct canvas pointer mapping --- */
#cropWorkspace .canvas-frame,
#blurWorkspace .canvas-frame {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 360px !important;
  max-height: calc(100dvh - 250px) !important;
  overflow: auto !important;
}

#cropWorkspace .canvas-frame.has-image canvas,
#blurWorkspace .canvas-frame.has-image canvas {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 280px) !important;
  object-fit: unset !important;
}

/* Before result: one comfortable editor column. */
@media (min-width: 1101px) {
  #cropWorkspace .preview-grid:not(:has(#cropResultPreview[src])),
  #blurWorkspace .preview-grid:not(:has(#blurResultPreview[src])) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #cropWorkspace .preview-grid:not(:has(#cropResultPreview[src])) .preview-column:has(#cropResultPreview),
  #blurWorkspace .preview-grid:not(:has(#blurResultPreview[src])) .preview-column:has(#blurResultPreview) {
    display: none !important;
  }

  #cropWorkspace .preview-grid:has(#cropResultPreview[src]),
  #blurWorkspace .preview-grid:has(#blurResultPreview[src]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

/* Crop / Blur result preview is a normal image, so it can be contained. */
#cropWorkspace .image-frame,
#blurWorkspace .image-frame {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: clamp(320px, 48dvh, 560px) !important;
  min-height: 320px !important;
  max-height: 560px !important;
  overflow: hidden !important;
}

#cropWorkspace .image-frame.has-image img,
#blurWorkspace .image-frame.has-image img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* --- Compress / Convert / Metadata: tall images stay inside frame --- */
#metadataWorkspace .image-frame,
#compressWorkspace .image-frame,
#formatWorkspace .image-frame {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: clamp(340px, 52dvh, 620px) !important;
  min-height: 340px !important;
  max-height: 620px !important;
  overflow: hidden !important;
}

#metadataWorkspace .image-frame.has-image img,
#compressWorkspace .image-frame.has-image img,
#formatWorkspace .image-frame.has-image img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* --- Glass-style range sliders --- */
.range-control input[type="range"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 10px !important;
  padding: 0 !important;
  border: 1px solid rgba(190, 214, 255, 0.24) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(125, 164, 255, 0.62), rgba(130, 97, 210, 0.52)),
    rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 18px rgba(0, 0, 0, 0.16) !important;
  cursor: pointer !important;
}

.range-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.86) !important;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #a9c7ff 28%, #76a0ff 100%) !important;
  box-shadow:
    0 0 0 5px rgba(132, 169, 255, 0.16),
    0 8px 18px rgba(15, 23, 42, 0.26) !important;
}

.range-control input[type="range"]::-moz-range-thumb {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.86) !important;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #a9c7ff 28%, #76a0ff 100%) !important;
  box-shadow:
    0 0 0 5px rgba(132, 169, 255, 0.16),
    0 8px 18px rgba(15, 23, 42, 0.26) !important;
}

/* --- Desktop: avoid browser vertical scrollbar. Internal panels may scroll instead. --- */
@media (min-width: 1101px) and (min-height: 720px) {
  html,
  body {
    height: 100% !important;
    overflow: hidden !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  .tool-workspace:not(.is-hidden) {
    height: calc(100dvh - 72px) !important;
    max-height: calc(100dvh - 72px) !important;
    overflow: hidden !important;
  }

  .editor-workspace.tool-workspace:not(.is-hidden),
  #backgroundWorkspace.workspace.tool-workspace:not(.is-hidden) {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .editor-panel,
  .upload-panel,
  .export-panel {
    max-height: 100% !important;
    overflow: auto !important;
  }

  .preview-area {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .preview-grid {
    min-height: 0 !important;
  }

  .privacy-footer {
    bottom: 8px !important;
  }
}

/* Phones/tablets: keep normal page scroll. */
@media (max-width: 1100px) {
  html,
  body {
    height: auto !important;
    overflow-y: auto !important;
  }

  .tool-workspace:not(.is-hidden) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* final-privacy-fit:
   Desktop keeps page scroll disabled, but reserves visible space for Privacy.
   Mobile/tablet keeps normal scrolling. */
@media (min-width: 1101px) and (min-height: 720px) {
  :root {
    --pts-header-space: 54px;
    --pts-privacy-space: 48px;
    --pts-screen-gap: 10px;
  }

  html,
  body {
    height: 100% !important;
    overflow: hidden !important;
  }

  body {
    min-height: 100dvh !important;
    padding-bottom: 0 !important;
  }

  .tool-workspace:not(.is-hidden) {
    height: calc(100dvh - var(--pts-header-space) - var(--pts-privacy-space) - var(--pts-screen-gap)) !important;
    max-height: calc(100dvh - var(--pts-header-space) - var(--pts-privacy-space) - var(--pts-screen-gap)) !important;
    overflow: hidden !important;
  }

  .editor-workspace.tool-workspace:not(.is-hidden),
  #backgroundWorkspace.workspace.tool-workspace:not(.is-hidden) {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }

  .preview-area,
  .panel,
  .editor-panel,
  .upload-panel,
  .export-panel {
    min-height: 0 !important;
  }

  .editor-panel,
  .upload-panel,
  .export-panel {
    max-height: 100% !important;
    overflow: auto !important;
  }

  body > .privacy-footer {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 6px !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;

    width: min(calc(100vw - 48px), 1440px) !important;
    max-width: 1440px !important;
    max-height: var(--pts-privacy-space) !important;

    margin: 0 !important;
    padding: 7px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    font-size: clamp(10px, 0.68vw, 12px) !important;
    line-height: 1.22 !important;

    overflow: hidden !important;
  }

  body > .privacy-footer > span {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    flex: 0 0 17px !important;
    margin-top: 0 !important;
  }

  body > .privacy-footer p {
    margin: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
}

/* Mobile/tablet: normal page scroll and normal privacy block. */
@media (max-width: 1100px) {
  html,
  body {
    height: auto !important;
    overflow-y: auto !important;
  }

  .tool-workspace:not(.is-hidden) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body > .privacy-footer {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(100% - 32px) !important;
    max-height: none !important;
    margin: 16px auto 24px !important;
    overflow: visible !important;
  }

  body > .privacy-footer p {
    display: block !important;
    overflow: visible !important;
  }
}

/* ------------------------------------------------------------------
   v1.4-final layout patch.
   Fixes Privacy separation, shared small-preview scaling, non-background
   queue scroll indicators, and last remaining native-looking range sliders.
------------------------------------------------------------------- */

@media (min-width: 1101px) and (min-height: 720px) {
  :root {
    --pts-header-space: 54px;
    --pts-privacy-space: 76px;
    --pts-screen-gap: 16px;
  }

  #toolHome:not(.is-hidden),
  .tool-workspace:not(.is-hidden) {
    height: calc(100dvh - var(--pts-header-space) - var(--pts-privacy-space) - var(--pts-screen-gap)) !important;
    max-height: calc(100dvh - var(--pts-header-space) - var(--pts-privacy-space) - var(--pts-screen-gap)) !important;
    overflow: hidden !important;
  }

  #toolHome:not(.is-hidden) {
    overflow-y: auto !important;
    padding-bottom: 6px !important;
  }

  body > .privacy-footer {
    bottom: 10px !important;
    max-height: calc(var(--pts-privacy-space) - 14px) !important;
    min-height: 52px !important;
    padding: 10px 16px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }
}

.image-frame.has-image img[data-preview-scaled="true"],
.canvas-frame.has-image canvas[data-preview-scaled="true"] {
  width: var(--pts-preview-width) !important;
  height: var(--pts-preview-height) !important;
  max-width: calc(100% - 28px) !important;
  max-height: calc(100% - 28px) !important;
  object-fit: contain !important;
}

.canvas-frame.has-image canvas[data-preview-scaled="true"] {
  flex: 0 0 auto !important;
}

.queue-custom-scrollbar--shared {
  right: 8px;
}

/* One range style for every native slider, including sliders nested inside action rows. */
.range-control input[type="range"],
.range-action-row input[type="range"],
input[type="range"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  overflow: visible !important;
}

.range-control input[type="range"]::-webkit-slider-runnable-track,
.range-action-row input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px !important;
  border: 1px solid rgba(190, 214, 255, 0.24) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(125, 164, 255, 0.62), rgba(130, 97, 210, 0.52)),
    rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 18px rgba(0, 0, 0, 0.16) !important;
}

.range-control input[type="range"]::-webkit-slider-thumb,
.range-action-row input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  margin-top: -7px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.86) !important;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #a9c7ff 28%, #76a0ff 100%) !important;
  box-shadow:
    0 0 0 5px rgba(132, 169, 255, 0.16),
    0 8px 18px rgba(15, 23, 42, 0.26) !important;
}

.range-control input[type="range"]::-moz-range-track,
.range-action-row input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-track {
  height: 10px !important;
  border: 1px solid rgba(190, 214, 255, 0.24) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(125, 164, 255, 0.62), rgba(130, 97, 210, 0.52)),
    rgba(255, 255, 255, 0.10) !important;
}

.range-control input[type="range"]::-moz-range-thumb,
.range-action-row input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.86) !important;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #a9c7ff 28%, #76a0ff 100%) !important;
  box-shadow:
    0 0 0 5px rgba(132, 169, 255, 0.16),
    0 8px 18px rgba(15, 23, 42, 0.26) !important;
}


/* Higher-specificity small-preview scaling so older ID-scoped preview rules cannot override it. */
body #backgroundWorkspace .image-frame.has-image img[data-preview-scaled="true"],
body #cropWorkspace .image-frame.has-image img[data-preview-scaled="true"],
body #blurWorkspace .image-frame.has-image img[data-preview-scaled="true"],
body #metadataWorkspace .image-frame.has-image img[data-preview-scaled="true"],
body #compressWorkspace .image-frame.has-image img[data-preview-scaled="true"],
body #formatWorkspace .image-frame.has-image img[data-preview-scaled="true"],
body #cropWorkspace .canvas-frame.has-image canvas[data-preview-scaled="true"],
body #blurWorkspace .canvas-frame.has-image canvas[data-preview-scaled="true"] {
  width: var(--pts-preview-width) !important;
  height: var(--pts-preview-height) !important;
  max-width: calc(100% - 28px) !important;
  max-height: calc(100% - 28px) !important;
  object-fit: contain !important;
}

/* ------------------------------------------------------------------
   v1.5 page/panel native scrollbar theme.
   Fixes the remaining browser/default vertical scrollbar at the page edge
   and any panel scrollbars that still use native styling.
------------------------------------------------------------------- */
html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 180, 255, 0.76) rgba(255, 255, 255, 0.07);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 0 0 1px rgba(190, 214, 255, 0.12),
    inset 0 10px 22px rgba(15, 18, 42, 0.20);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  min-height: 46px;
  border: 2px solid rgba(18, 22, 48, 0.70);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(178, 204, 255, 0.95), rgba(117, 149, 236, 0.82)),
    rgba(125, 164, 255, 0.60);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 8px 20px rgba(0, 0, 0, 0.22);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, rgba(215, 228, 255, 0.98), rgba(142, 172, 255, 0.90)),
    rgba(145, 178, 255, 0.72);
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ------------------------------------------------------------------
   v1.8.4 theme edge polish.
   Theme-aware card edges and softer Theme-toggle top highlight.
   CSS-only: no tilt logic or backend changes.
------------------------------------------------------------------- */
:root {
  --pts-card-edge: rgba(37, 99, 235, 0.24);
  --pts-card-edge-hover: rgba(37, 99, 235, 0.42);
  --pts-card-edge-glow: rgba(37, 99, 235, 0.18);
  --pts-card-inner-highlight: rgba(185, 210, 255, 0.26);
  --pts-card-inner-lowlight: rgba(37, 99, 235, 0.08);
  --pts-theme-toggle-edge: rgba(88, 112, 170, 0.22);
  --pts-theme-toggle-edge-hover: rgba(37, 99, 235, 0.30);
  --pts-theme-toggle-top: rgba(214, 226, 247, 0.30);
  --pts-theme-toggle-bottom: rgba(222, 233, 248, 0.18);
  --pts-theme-toggle-gloss: rgba(185, 210, 255, 0.22);
  --pts-theme-toggle-glow: rgba(37, 99, 235, 0.12);
  --pts-theme-toggle-shadow: rgba(42, 62, 92, 0.16);
}

[data-theme="dark"] {
  --pts-card-edge: rgba(120, 167, 255, 0.22);
  --pts-card-edge-hover: rgba(120, 167, 255, 0.38);
  --pts-card-edge-glow: rgba(120, 167, 255, 0.16);
  --pts-card-inner-highlight: rgba(120, 167, 255, 0.15);
  --pts-card-inner-lowlight: rgba(0, 0, 0, 0.16);
  --pts-theme-toggle-edge: rgba(142, 166, 255, 0.22);
  --pts-theme-toggle-edge-hover: rgba(142, 166, 255, 0.34);
  --pts-theme-toggle-top: rgba(120, 167, 255, 0.08);
  --pts-theme-toggle-bottom: rgba(12, 18, 34, 0.22);
  --pts-theme-toggle-gloss: rgba(142, 166, 255, 0.11);
  --pts-theme-toggle-glow: rgba(120, 167, 255, 0.10);
  --pts-theme-toggle-shadow: rgba(0, 0, 0, 0.30);
}

html[data-theme] body .tool-home .tool-card[data-tilt-card] {
  border-color: var(--pts-card-edge);
  box-shadow:
    0 18px 54px var(--glass-shadow),
    inset 0 1px 0 var(--pts-card-inner-highlight),
    inset 0 -1px 0 var(--pts-card-inner-lowlight);
}

html[data-theme] body .tool-home .tool-card[data-tilt-card]:hover,
html[data-theme] body .tool-home .tool-card[data-tilt-card].is-tilting,
html[data-theme] body .tool-home .tool-card[data-tilt-card]:focus-visible {
  border-color: var(--pts-card-edge-hover);
  box-shadow:
    0 22px 56px var(--glass-shadow),
    0 0 calc(var(--tilt-glow) * 28px) var(--pts-card-edge-glow),
    inset 0 1px 0 var(--pts-card-inner-highlight),
    inset 0 -1px 0 var(--pts-card-inner-lowlight);
}

html[data-theme] body .theme-toggle {
  border-color: var(--pts-theme-toggle-edge);
  background:
    linear-gradient(180deg, var(--pts-theme-toggle-top), var(--pts-theme-toggle-bottom)),
    var(--theme-toggle-bg, var(--glass-control-bg));
  box-shadow:
    0 9px 22px var(--pts-theme-toggle-shadow),
    inset 0 1px 0 var(--pts-theme-toggle-gloss),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

html[data-theme] body .theme-toggle::before {
  background:
    linear-gradient(
      180deg,
      var(--pts-theme-toggle-gloss),
      rgba(255, 255, 255, 0) 68%,
      rgba(0, 0, 0, 0.025)
    );
  opacity: 0.72;
}

html[data-theme] body .theme-toggle:hover,
html[data-theme] body .theme-toggle:focus-visible {
  border-color: var(--pts-theme-toggle-edge-hover);
  background:
    linear-gradient(180deg, var(--pts-theme-toggle-top), var(--pts-theme-toggle-bottom)),
    var(--theme-toggle-bg, var(--glass-control-bg));
  box-shadow:
    0 12px 28px var(--pts-theme-toggle-shadow),
    0 0 0 1px var(--pts-theme-toggle-glow),
    inset 0 1px 0 var(--pts-theme-toggle-gloss),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] body .theme-toggle::before {
  opacity: 0.58;
}

html[data-theme="dark"] body .theme-toggle::before {
  opacity: 0.68;
}

/* Keep Ko-fi on its existing shared button style; this patch intentionally targets only Theme. */
/* End v1.8.4 theme edge polish. */

/* ------------------------------------------------------------------
   v1.8.5 Ko-fi + neutral card edge polish.
   CSS-only visual override. Keeps v3 stable-hitbox tilt logic intact.
------------------------------------------------------------------- */
:root {
  --pts-card-edge: rgba(77, 91, 124, 0.18);
  --pts-card-edge-hover: rgba(82, 96, 128, 0.30);
  --pts-card-edge-glow: rgba(88, 102, 132, 0.11);
  --pts-card-inner-highlight: rgba(238, 244, 255, 0.22);
  --pts-card-inner-lowlight: rgba(78, 91, 124, 0.055);

  --pts-control-edge: rgba(88, 112, 170, 0.18);
  --pts-control-edge-hover: rgba(88, 112, 170, 0.26);
  --pts-control-top: rgba(225, 233, 247, 0.26);
  --pts-control-bottom: rgba(229, 236, 247, 0.14);
  --pts-control-gloss: rgba(220, 232, 250, 0.16);
  --pts-control-glow: rgba(88, 112, 170, 0.08);
  --pts-control-shadow: rgba(42, 62, 92, 0.14);
}

[data-theme="dark"] {
  --pts-card-edge: rgba(188, 201, 224, 0.15);
  --pts-card-edge-hover: rgba(205, 216, 235, 0.26);
  --pts-card-edge-glow: rgba(205, 216, 235, 0.09);
  --pts-card-inner-highlight: rgba(205, 216, 235, 0.10);
  --pts-card-inner-lowlight: rgba(0, 0, 0, 0.16);

  --pts-control-edge: rgba(190, 204, 232, 0.16);
  --pts-control-edge-hover: rgba(205, 216, 235, 0.26);
  --pts-control-top: rgba(205, 216, 235, 0.055);
  --pts-control-bottom: rgba(12, 18, 34, 0.24);
  --pts-control-gloss: rgba(205, 216, 235, 0.075);
  --pts-control-glow: rgba(205, 216, 235, 0.06);
  --pts-control-shadow: rgba(0, 0, 0, 0.30);
}

html[data-theme] body .tool-home .tool-card[data-tilt-card] {
  border-color: var(--pts-card-edge);
  box-shadow:
    0 18px 54px var(--glass-shadow),
    inset 0 1px 0 var(--pts-card-inner-highlight),
    inset 0 -1px 0 var(--pts-card-inner-lowlight);
}

html[data-theme] body .tool-home .tool-card[data-tilt-card]:hover,
html[data-theme] body .tool-home .tool-card[data-tilt-card].is-tilting,
html[data-theme] body .tool-home .tool-card[data-tilt-card]:focus-visible {
  border-color: var(--pts-card-edge-hover);
  box-shadow:
    0 22px 56px var(--glass-shadow),
    0 0 calc(var(--tilt-glow) * 22px) var(--pts-card-edge-glow),
    inset 0 1px 0 var(--pts-card-inner-highlight),
    inset 0 -1px 0 var(--pts-card-inner-lowlight);
}

html[data-theme] body .theme-toggle,
html[data-theme] body .kofi-button {
  border-color: var(--pts-control-edge);
  background:
    linear-gradient(180deg, var(--pts-control-top), var(--pts-control-bottom)),
    var(--theme-toggle-bg, var(--glass-control-bg));
  box-shadow:
    0 9px 22px var(--pts-control-shadow),
    inset 0 1px 0 var(--pts-control-gloss),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

html[data-theme] body .theme-toggle::before,
html[data-theme] body .kofi-button::before {
  background:
    linear-gradient(
      180deg,
      var(--pts-control-gloss),
      rgba(255, 255, 255, 0) 68%,
      rgba(0, 0, 0, 0.025)
    );
  opacity: 0.62;
}

html[data-theme] body .theme-toggle:hover,
html[data-theme] body .theme-toggle:focus-visible,
html[data-theme] body .kofi-button:hover,
html[data-theme] body .kofi-button:focus-visible {
  border-color: var(--pts-control-edge-hover);
  background:
    linear-gradient(180deg, var(--pts-control-top), var(--pts-control-bottom)),
    var(--theme-toggle-bg, var(--glass-control-bg));
  box-shadow:
    0 12px 28px var(--pts-control-shadow),
    0 0 0 1px var(--pts-control-glow),
    inset 0 1px 0 var(--pts-control-gloss),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] body .theme-toggle::before,
html[data-theme="light"] body .kofi-button::before {
  opacity: 0.50;
}

html[data-theme="dark"] body .theme-toggle::before,
html[data-theme="dark"] body .kofi-button::before {
  opacity: 0.56;
}
/* End v1.8.5 Ko-fi + neutral card edge polish. */

/* v2.2 mobile compact tool cards.
   Loaded here because this theme stylesheet is applied after styles.css. */
@media (max-width: 720px) {
  html[data-theme] body .tool-home .tool-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  html[data-theme] body .tool-home .tool-card[data-tilt-card] {
    min-height: 128px;
    gap: 8px;
    padding: 12px;
    overflow: hidden;
    transition:
      min-height 180ms ease,
      padding 180ms ease,
      gap 180ms ease,
      border-color 160ms ease,
      box-shadow 160ms ease,
      transform 160ms ease;
  }

  html[data-theme] body .tool-home .pts-tool-card-icon,
  html[data-theme] body .tool-home .pts-tool-card-icon__img {
    width: 42px;
    height: 42px;
    min-width: 42px;
    max-width: 42px;
  }

  html[data-theme] body .tool-home .tool-card-copy {
    gap: 0;
  }

  html[data-theme] body .tool-home .tool-card strong {
    min-height: 34px;
    display: flex;
    align-items: flex-end;
    font-size: 14px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  html[data-theme] body .tool-home .tool-card-copy > small,
  html[data-theme] body .tool-home .tool-card-note:not(.tool-card-note--speed) {
    display: none;
  }

  html[data-theme] body .tool-home .tool-card-notes {
    min-height: 0;
    margin: 0;
  }

  html[data-theme] body .tool-home .tool-card-note--speed {
    top: 10px;
    right: 10px;
    max-width: calc(100% - 62px);
    padding: 5px 7px;
    gap: 5px;
  }

  html[data-theme] body .tool-home .tool-card-note--speed .tool-card-note-label {
    display: none;
  }

  html[data-theme] body .tool-home .tool-speed {
    gap: 5px;
    font-size: 11px;
  }

  html[data-theme] body .tool-home .tool-speed-dot {
    width: 7px;
    height: 7px;
  }
}

@media (max-width: 380px) {
  html[data-theme] body .tool-home .tool-card[data-tilt-card] {
    min-height: 116px;
    padding: 10px;
  }

  html[data-theme] body .tool-home .pts-tool-card-icon,
  html[data-theme] body .tool-home .pts-tool-card-icon__img {
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
  }

  html[data-theme] body .tool-home .tool-card strong {
    min-height: 32px;
    font-size: 13px;
  }

  html[data-theme] body .tool-home .tool-card-note--speed {
    top: 8px;
    right: 8px;
    max-width: calc(100% - 54px);
    padding: 4px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body .tool-home .tool-card[data-tilt-card],
  html[data-theme] body .tool-home .pts-tool-card-icon,
  html[data-theme] body .tool-home .pts-tool-card-icon__img {
    transition: none !important;
  }
}

/* v2.3 background workspace desktop overflow guard.
   The desktop shell has a fixed viewport height, so each tall column must scroll
   inside itself instead of letting preview images overlap the status/process UI. */
@media (min-width: 1101px) and (min-height: 720px) {
  html[data-theme] body #backgroundWorkspace .preview-area {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px !important;
  }

  html[data-theme] body #backgroundWorkspace .upload-panel,
  html[data-theme] body #backgroundWorkspace .preview-area,
  html[data-theme] body #backgroundWorkspace .export-panel {
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  html[data-theme] body #backgroundWorkspace .preview-grid,
  html[data-theme] body #backgroundWorkspace .status-card,
  html[data-theme] body #backgroundWorkspace .queue-position-card {
    flex: 0 0 auto !important;
  }

  html[data-theme] body #backgroundWorkspace .preview-grid {
    grid-column: 1 / -1;
  }

  html[data-theme] body #backgroundWorkspace .status-card,
  html[data-theme] body #backgroundWorkspace .queue-position-card {
    min-width: 0;
  }

  html[data-theme] body #backgroundWorkspace .status-card {
    margin: 0;
  }

  html[data-theme] body #backgroundWorkspace .queue-position-card {
    margin: 0;
    align-content: start;
  }

  html[data-theme] body #backgroundWorkspace .preview-grid {
    min-height: auto !important;
  }

  html[data-theme] body #backgroundWorkspace .image-frame {
    flex: 0 0 auto !important;
    min-height: clamp(300px, 34vh, 420px) !important;
  }
}

/* metadata-preview-v12-20260520:
   Late metadata-only layout fix. Viscosity loads after base CSS, so this block
   keeps metadata/photo/status compact without changing the other tools. */
html[data-theme] body #metadataWorkspace .metadata-preview-panel,
html[data-theme] body #metadataWorkspace .metadata-summary-list div,
html[data-theme] body #metadataWorkspace .metadata-details {
  border-color: var(--glass-border-soft);
  background: var(--glass-bg-strong);
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

html[data-theme] body #metadataWorkspace .metadata-summary-list dd,
html[data-theme] body #metadataWorkspace .metadata-details pre {
  text-overflow: clip;
  overflow-wrap: anywhere;
}

html[data-theme] body #metadataWorkspace .metadata-summary-list dd {
  overflow: visible;
  white-space: normal;
}

html[data-theme] body #metadataWorkspace .preview-grid > .metadata-photo-column {
  display: flex;
}

html[data-theme] body #metadataWorkspace .metadata-details pre {
  overflow: auto;
  background: rgba(255, 255, 255, 0.08);
  white-space: pre-wrap;
}

@media (min-width: 1101px) {
  html[data-theme] body #metadataWorkspace.editor-workspace {
    width: min(1560px, calc(100vw - 48px));
    max-width: 1560px;
    grid-template-columns: minmax(300px, 360px) minmax(780px, 1fr);
  }

  html[data-theme] body #metadataWorkspace .preview-area {
    display: grid !important;
    grid-template-columns: minmax(240px, 0.8fr) minmax(420px, 1.2fr);
    grid-template-rows: minmax(420px, 1fr) auto;
    grid-template-areas:
      "preview preview"
      "status queue";
    align-content: start;
    align-items: start;
    min-height: 0 !important;
    gap: 12px 18px;
  }

  html[data-theme] body #metadataWorkspace .preview-grid {
    grid-area: preview;
    align-self: stretch;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.2fr) !important;
    align-items: stretch;
    gap: 16px;
  }

  html[data-theme] body #metadataWorkspace .metadata-preview-panel {
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  html[data-theme] body #metadataWorkspace .metadata-summary-list {
    flex: 0 0 auto;
    max-height: 190px;
    overflow: auto;
    padding-right: 2px;
  }

  html[data-theme] body #metadataWorkspace .metadata-details {
    flex: 0 0 auto;
  }

  html[data-theme] body #metadataWorkspace .metadata-details[open] {
    flex: 1 1 auto;
    min-height: 160px;
    display: flex;
    flex-direction: column;
  }

  html[data-theme] body #metadataWorkspace .metadata-details pre {
    flex: 1 1 auto;
    min-height: 160px;
    max-height: none;
  }

  html[data-theme] body #metadataWorkspace .metadata-copy-status {
    flex: 0 0 auto;
  }

  html[data-theme] body #metadataWorkspace .metadata-photo-column {
    min-height: 0;
  }

  html[data-theme] body #metadataWorkspace .image-frame {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
  }

  html[data-theme] body #metadataWorkspace .image-frame.has-image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  html[data-theme] body #metadataWorkspace .status-card,
  html[data-theme] body #metadataWorkspace .queue-position-card {
    height: max-content !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
  }

  html[data-theme] body #metadataWorkspace .status-card {
    grid-area: status;
    align-self: start !important;
  }

  html[data-theme] body #metadataWorkspace .queue-position-card {
    grid-area: queue;
    align-self: start !important;
    align-content: start;
    grid-template-rows: auto auto 5px auto !important;
    gap: 6px;
  }

  html[data-theme] body #metadataWorkspace .status-card-header,
  html[data-theme] body #metadataWorkspace .queue-position-header {
    min-height: 26px;
    margin-bottom: 6px;
  }

  html[data-theme] body #metadataWorkspace .status-card-header strong,
  html[data-theme] body #metadataWorkspace .queue-position-header strong {
    font-size: 14px;
  }

  html[data-theme] body #metadataWorkspace .queue-position-header [data-queue-pill] {
    min-height: 24px;
    padding: 0 8px;
  }

  html[data-theme] body #metadataWorkspace .status-log {
    min-height: 0 !important;
    padding: 6px 8px !important;
    line-height: 1.18 !important;
  }

  html[data-theme] body #metadataWorkspace .status-log li {
    min-height: 16px;
    font-size: 12px;
  }

  html[data-theme] body #metadataWorkspace .status-log li::before {
    width: 7px;
    height: 7px;
    margin-right: 7px;
  }

  html[data-theme] body #metadataWorkspace .queue-position-grid {
    height: max-content !important;
    align-content: start !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 38px;
    gap: 6px;
  }

  html[data-theme] body #metadataWorkspace .queue-position-grid div {
    height: 38px;
    min-height: 0;
    padding: 6px 8px !important;
  }

  html[data-theme] body #metadataWorkspace .queue-position-grid span,
  html[data-theme] body #metadataWorkspace .queue-position-card small {
    font-size: 11.5px;
    line-height: 1.2;
  }

  html[data-theme] body #metadataWorkspace .queue-position-card > small {
    min-height: 0;
    white-space: nowrap;
  }

  html[data-theme] body #metadataWorkspace .queue-position-grid strong {
    margin-top: 1px;
    font-size: 13px;
  }

  html[data-theme] body #metadataWorkspace .queue-progress-track {
    height: 6px;
  }
}

@media (max-width: 1100px) {
  html[data-theme] body #metadataWorkspace .preview-area {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      "preview"
      "status"
      "queue";
  }

  html[data-theme] body #metadataWorkspace .preview-grid {
    grid-area: preview;
    grid-template-columns: 1fr !important;
  }

  html[data-theme] body #metadataWorkspace .metadata-photo-column {
    order: 1;
  }

  html[data-theme] body #metadataWorkspace .metadata-preview-panel {
    order: 2;
  }

  html[data-theme] body #metadataWorkspace .status-card {
    grid-area: status;
  }

  html[data-theme] body #metadataWorkspace .queue-position-card {
    grid-area: queue;
  }

  html[data-theme] body #metadataWorkspace .image-frame {
    height: clamp(260px, 42dvh, 380px) !important;
    min-height: 260px !important;
    max-height: 380px !important;
  }

  html[data-theme] body #metadataWorkspace .metadata-details {
    min-height: 0;
  }

  html[data-theme] body #metadataWorkspace .metadata-details pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 200px;
  }
}

@media (max-width: 420px) {
  html[data-theme] body #metadataWorkspace .queue-position-grid {
    grid-template-columns: 1fr !important;
  }
}

/* metadata-preview-v14-20260521:
   Frontend-only layout repair verified with debugLayout mode. */
html[data-theme] body #metadataWorkspace .metadata-preview-panel {
  background: var(--glass-bg);
}

html[data-theme] body #metadataWorkspace .metadata-summary-list dd,
html[data-theme] body #metadataWorkspace .metadata-details pre,
html[data-theme] body #metadataWorkspace .queue-position-grid strong {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

html[data-theme] body #metadataWorkspace .metadata-details pre {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (min-width: 1101px) {
  html[data-theme] body #metadataWorkspace.editor-workspace {
    width: min(1680px, calc(100vw - 40px));
    max-width: 1680px;
    grid-template-columns: minmax(300px, 350px) minmax(760px, 1fr);
    align-items: stretch;
  }

  html[data-theme] body #metadataWorkspace .preview-area {
    display: grid !important;
    grid-template-columns: minmax(280px, 0.82fr) minmax(520px, 1.48fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "preview preview"
      "status queue";
    gap: 14px 18px !important;
    min-height: 0 !important;
    align-items: stretch;
    overflow: hidden;
  }

  html[data-theme] body #metadataWorkspace .preview-grid {
    grid-area: preview;
    display: grid !important;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    gap: 14px !important;
    min-height: 0 !important;
    height: 100% !important;
    align-items: stretch !important;
    overflow: hidden;
  }

  html[data-theme] body #metadataWorkspace .metadata-preview-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 12px !important;
  }

  html[data-theme] body #metadataWorkspace .metadata-copy-button {
    max-width: 150px;
    white-space: normal;
    line-height: 1.15;
  }

  html[data-theme] body #metadataWorkspace .metadata-summary-list {
    flex: 0 0 auto;
    gap: 7px !important;
    max-height: min(285px, 48%);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
  }

  html[data-theme] body #metadataWorkspace .metadata-summary-list div {
    grid-template-columns: minmax(76px, max-content) minmax(0, 1fr);
    gap: 5px 9px;
    min-height: 0;
    padding: 7px 9px !important;
  }

  html[data-theme] body #metadataWorkspace #metadataDetails.metadata-details,
  html[data-theme] body #metadataWorkspace #metadataDetails.metadata-details[open] {
    flex: 1 1 0;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden !important;
  }

  html[data-theme] body #metadataWorkspace #metadataDetails.metadata-details summary {
    min-height: 32px;
    margin: 0;
  }

  html[data-theme] body #metadataWorkspace #metadataDetails.metadata-details[open] > #metadataDetailsJson {
    align-self: stretch;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
  }

  html[data-theme] body #metadataWorkspace .metadata-copy-status {
    flex: 0 0 auto;
    min-height: 16px;
  }

  html[data-theme] body #metadataWorkspace .metadata-photo-column {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden;
  }

  html[data-theme] body #metadataWorkspace .metadata-photo-column .image-frame {
    flex: 1 1 auto !important;
    width: 100%;
    height: auto !important;
    min-height: 340px !important;
    max-height: none !important;
  }

  html[data-theme] body #metadataWorkspace .status-card,
  html[data-theme] body #metadataWorkspace .queue-position-card {
    align-self: stretch !important;
    min-height: 118px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    overflow: visible !important;
  }

  html[data-theme] body #metadataWorkspace .status-card {
    grid-area: status;
  }

  html[data-theme] body #metadataWorkspace .queue-position-card {
    grid-area: queue;
    display: grid !important;
    grid-template-rows: auto auto 8px auto !important;
    gap: 8px !important;
    align-content: start !important;
  }

  html[data-theme] body #metadataWorkspace .status-log {
    min-height: 0 !important;
    padding: 8px 10px !important;
    line-height: 1.25 !important;
  }

  html[data-theme] body #metadataWorkspace .queue-position-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(50px, auto) !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  html[data-theme] body #metadataWorkspace .queue-position-grid div {
    display: grid !important;
    align-content: center !important;
    min-width: 0 !important;
    min-height: 50px !important;
    height: auto !important;
    padding: 7px 9px !important;
    overflow: hidden !important;
  }

  html[data-theme] body #metadataWorkspace .queue-position-grid span,
  html[data-theme] body #metadataWorkspace .queue-position-card small {
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  html[data-theme] body #metadataWorkspace .queue-position-grid strong {
    min-height: 0 !important;
    margin-top: 2px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 1100px) {
  html[data-theme] body #metadataWorkspace .preview-area {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "preview"
      "status"
      "queue";
    gap: 16px !important;
    overflow: visible;
  }

  html[data-theme] body #metadataWorkspace .preview-grid {
    grid-area: preview;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  html[data-theme] body #metadataWorkspace .metadata-photo-column {
    order: 1;
  }

  html[data-theme] body #metadataWorkspace .metadata-preview-panel {
    order: 2;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  html[data-theme] body #metadataWorkspace #metadataDetails.metadata-details[open] > #metadataDetailsJson {
    display: block !important;
    max-height: min(34dvh, 280px) !important;
    overflow: auto !important;
  }

  html[data-theme] body #metadataWorkspace .queue-position-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
}

/* ui-controls-review-v1-20260524:
   One late interface base for compact sliders, glass toggles, debug targets,
   queue mini-cards, and header action buttons. */
:root {
  --pts-ui-control-radius: 16px;
  --pts-ui-control-min: 52px;
  --pts-ui-toggle-width: 54px;
  --pts-ui-toggle-height: 30px;
  --pts-ui-toggle-thumb: 24px;
  --pts-ui-toggle-off: rgba(255, 255, 255, 0.46);
  --pts-ui-toggle-on-a: rgba(74, 128, 239, 0.92);
  --pts-ui-toggle-on-b: rgba(82, 151, 239, 0.76);
}

html[data-theme] body .range-control,
html[data-theme] body .select-control,
html[data-theme] body .toggle-control {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: var(--pts-ui-control-min) !important;
  margin: 12px 0 !important;
  padding: 12px 13px !important;
  gap: 8px !important;
  border: 1px solid var(--pts-control-edge, var(--glass-border-soft)) !important;
  border-radius: var(--pts-ui-control-radius) !important;
  background:
    linear-gradient(180deg, var(--pts-control-top, rgba(255, 255, 255, 0.14)), var(--pts-control-bottom, rgba(255, 255, 255, 0.04))),
    var(--glass-control-bg, var(--panel-soft)) !important;
  box-shadow:
    0 8px 18px var(--pts-control-shadow, rgba(15, 23, 42, 0.10)),
    inset 0 1px 0 var(--pts-control-gloss, rgba(255, 255, 255, 0.14)),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04) !important;
}

html[data-theme] body .range-control > span,
html[data-theme] body .select-control > span {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

html[data-theme] body .range-control > span > :first-child,
html[data-theme] body .select-control > span > :first-child,
html[data-theme] body .toggle-control > span {
  min-width: 0;
}

html[data-theme] body .range-control input[type="range"],
html[data-theme] body .range-action-row input[type="range"],
html[data-theme] body input[type="range"][data-ui-control="range"] {
  height: 22px !important;
}

html[data-theme] body .range-control input[type="range"]::-webkit-slider-runnable-track,
html[data-theme] body .range-action-row input[type="range"]::-webkit-slider-runnable-track,
html[data-theme] body input[type="range"][data-ui-control="range"]::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg, rgba(125, 164, 255, 0.70), rgba(130, 97, 210, 0.58)) 0 / var(--range-progress, 100%) 100% no-repeat,
    rgba(255, 255, 255, 0.10) !important;
}

html[data-theme] body .range-control input[type="range"]::-moz-range-track,
html[data-theme] body .range-action-row input[type="range"]::-moz-range-track,
html[data-theme] body input[type="range"][data-ui-control="range"]::-moz-range-track {
  background: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme] body .range-control input[type="range"]::-moz-range-progress,
html[data-theme] body .range-action-row input[type="range"]::-moz-range-progress,
html[data-theme] body input[type="range"][data-ui-control="range"]::-moz-range-progress {
  height: 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(125, 164, 255, 0.70), rgba(130, 97, 210, 0.58)) !important;
}

html[data-theme] body .range-action-row {
  grid-template-columns: minmax(0, 1fr) max-content !important;
  gap: 10px !important;
}

html[data-theme] body .toggle-control input[type="checkbox"],
html[data-theme] body .api-key-remember input[type="checkbox"],
html[data-theme] body #ptsSettingsPanel .pts-setting-row input[type="checkbox"] {
  position: relative !important;
  width: var(--pts-ui-toggle-width) !important;
  height: var(--pts-ui-toggle-height) !important;
  flex: 0 0 var(--pts-ui-toggle-width) !important;
  margin: 0 !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid var(--pts-control-edge, var(--glass-border-soft)) !important;
  border-radius: 999px !important;
  background: var(--pts-ui-toggle-off) !important;
  box-shadow:
    inset 0 1px 2px rgba(74, 89, 117, 0.12),
    0 6px 16px rgba(15, 23, 42, 0.10) !important;
  cursor: pointer !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

html[data-theme] body .toggle-control input[type="checkbox"]::after,
html[data-theme] body .api-key-remember input[type="checkbox"]::after,
html[data-theme] body #ptsSettingsPanel .pts-setting-row input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 50% !important;
  width: var(--pts-ui-toggle-thumb) !important;
  height: var(--pts-ui-toggle-thumb) !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #c9d9ff 36%, #93b4ff 100%) !important;
  box-shadow:
    0 0 0 3px rgba(132, 169, 255, 0.12),
    0 6px 14px rgba(15, 23, 42, 0.24) !important;
  transform: translateY(-50%) !important;
  transition: transform 160ms ease !important;
}

html[data-theme] body .toggle-control input[type="checkbox"]:checked,
html[data-theme] body .api-key-remember input[type="checkbox"]:checked,
html[data-theme] body #ptsSettingsPanel .pts-setting-row input[type="checkbox"]:checked,
html[data-theme] body .cookie-switch input:checked + .cookie-switch-track {
  border-color: rgba(75, 119, 239, 0.34) !important;
  background: linear-gradient(90deg, var(--pts-ui-toggle-on-a), var(--pts-ui-toggle-on-b)) !important;
}

html[data-theme] body .toggle-control input[type="checkbox"]:checked::after,
html[data-theme] body .api-key-remember input[type="checkbox"]:checked::after,
html[data-theme] body #ptsSettingsPanel .pts-setting-row input[type="checkbox"]:checked::after {
  transform: translate(24px, -50%) !important;
}

html[data-theme] body .toggle-control input[type="checkbox"]:focus-visible,
html[data-theme] body .api-key-remember input[type="checkbox"]:focus-visible,
html[data-theme] body #ptsSettingsPanel .pts-setting-row input[type="checkbox"]:focus-visible,
html[data-theme] body input[type="range"][data-ui-control="range"]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 4px var(--focus-ring),
    0 6px 16px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme] body .cookie-switch-track::after {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #c9d9ff 36%, #93b4ff 100%) !important;
  box-shadow:
    0 0 0 3px rgba(132, 169, 255, 0.12),
    0 6px 14px rgba(15, 23, 42, 0.24) !important;
}

html[data-theme] body #backgroundWorkspace .queue-position-grid,
html[data-theme] body #cropWorkspace .queue-position-grid,
html[data-theme] body #blurWorkspace .queue-position-grid,
html[data-theme] body #metadataWorkspace .queue-position-grid,
html[data-theme] body #compressWorkspace .queue-position-grid,
html[data-theme] body #formatWorkspace .queue-position-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html[data-theme] body .queue-position-grid div {
  min-height: 50px !important;
  align-content: center !important;
}

html[data-theme] body .theme-toggle,
html[data-theme] body .kofi-button {
  min-height: 42px !important;
  padding: 0 13px !important;
  gap: 8px !important;
  overflow: visible !important;
  border-color: var(--pts-control-edge, var(--glass-border-soft)) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, var(--pts-control-top, rgba(255, 255, 255, 0.14)), var(--pts-control-bottom, rgba(255, 255, 255, 0.04))),
    var(--glass-control-bg, var(--panel-soft)) !important;
  box-shadow:
    0 9px 22px var(--pts-control-shadow, rgba(15, 23, 42, 0.12)),
    inset 0 1px 0 var(--pts-control-gloss, rgba(255, 255, 255, 0.14)),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: blur(var(--glass-control-blur, 4px)) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(var(--glass-control-blur, 4px)) saturate(1.08) !important;
}

html[data-theme] body .theme-toggle {
  min-width: 104px !important;
  min-height: 52px !important;
}

@media (max-width: 720px) {
  html[data-theme] body .header-actions {
    width: auto !important;
    max-width: 100% !important;
    align-self: flex-end !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  html[data-theme] body .theme-toggle,
  html[data-theme] body .kofi-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 40px !important;
  }

  html[data-theme] body .theme-toggle {
    min-width: 88px !important;
  }

  html[data-theme] body .range-control,
  html[data-theme] body .select-control,
  html[data-theme] body .toggle-control {
    margin: 10px 0 !important;
    padding: 10px 11px !important;
  }

  html[data-theme] body .range-action-row,
  html[data-theme] body #compressWorkspace .range-action-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme] body #ptsSettingsPanel .pts-setting-range {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: stretch !important;
  }

  html[data-theme] body #ptsSettingsPanel .pts-setting-range input[type="range"] {
    width: 100% !important;
  }

  html[data-theme] body .kofi-button {
    min-width: 0 !important;
    max-width: 112px !important;
    padding-inline: 9px !important;
  }

  html[data-theme] body .kofi-button span {
    font-size: 0 !important;
    line-height: 1 !important;
  }

  html[data-theme] body .kofi-button span::after {
    content: "Ko-fi";
    font-size: 12px;
    font-weight: 800;
  }
}

/* soft-shadow-layout-flow-v1-20260524:
   Keep Background export settings in normal document flow when Soft shadow opens.
   The shadow slider group can grow without overlapping Object scale / Background /
   Background removal / Output size controls. */
html[data-theme] body #backgroundWorkspace .export-panel {
  align-items: stretch !important;
}

html[data-theme] body #backgroundWorkspace .export-panel .range-control,
html[data-theme] body #backgroundWorkspace .export-panel .select-control,
html[data-theme] body #backgroundWorkspace .export-panel .toggle-control,
html[data-theme] body #backgroundWorkspace .export-panel .file-control {
  position: relative !important;
  box-sizing: border-box !important;
  display: grid !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

html[data-theme] body #backgroundWorkspace .export-panel .range-control,
html[data-theme] body #backgroundWorkspace .export-panel .select-control,
html[data-theme] body #backgroundWorkspace .export-panel .file-control {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 8px !important;
}

html[data-theme] body #backgroundWorkspace .export-panel .toggle-control {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 6px !important;
}

html[data-theme] body #backgroundWorkspace .export-panel .range-control > span,
html[data-theme] body #backgroundWorkspace .export-panel .select-control > span,
html[data-theme] body #backgroundWorkspace .export-panel .file-control > span {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

html[data-theme] body #backgroundWorkspace .export-panel .toggle-control > span {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 3px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html[data-theme] body #backgroundWorkspace .export-panel .range-control small,
html[data-theme] body #backgroundWorkspace .export-panel .select-control small,
html[data-theme] body #backgroundWorkspace .export-panel .file-control small,
html[data-theme] body #backgroundWorkspace .export-panel .toggle-control small {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
}

html[data-theme] body #backgroundWorkspace .export-panel .settings-group[hidden] {
  display: none !important;
}

html[data-theme] body #backgroundWorkspace .export-panel .settings-group:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings .range-control {
  margin: 0 !important;
}


/* soft-shadow-layout-flow-v2-20260524:
   Fix desktop overlap caused by inherited collapsed/max-height rules on the
   Soft shadow settings group. Keep the group and every slider row sized by
   real content height before the Process/Download actions. */
html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: max-content !important;
  align-items: stretch !important;
  gap: 14px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 14px 0 18px !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  opacity: 1 !important;
}

html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) > .range-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-items: stretch !important;
  gap: 9px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 84px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 13px 14px 14px !important;
  overflow: visible !important;
  transform: none !important;
}

html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) > .range-control > span,
html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) > .range-control > input[type="range"],
html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) > .range-control > small {
  position: static !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
}

html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) > .range-control > input[type="range"] {
  display: block !important;
  height: 22px !important;
}

html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) > .range-control > small {
  display: block !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) + .process-action {
  margin-top: 0 !important;
}

/* soft-shadow-layout-flow-v3-20260524:
   Desktop rendering hardening for Soft shadow. The browser geometry can be in
   normal flow while glass/backdrop layers still paint disabled export actions
   through the shadow controls. Keep shadow sliders and action buttons in
   separate stacking layers and give the expanded group a real minimum height. */
html[data-theme] body #backgroundWorkspace .export-panel {
  display: block !important;
  position: relative !important;
  isolation: isolate !important;
  align-content: start !important;
  overflow-x: hidden !important;
}

html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  height: auto !important;
  min-height: calc((112px * 3) + (16px * 2)) !important;
  max-height: none !important;
  margin: 14px 0 24px !important;
  padding: 0 !important;
  border-left: 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate !important;
  transform: none !important;
}

html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) > .range-control {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto 24px auto !important;
  align-items: stretch !important;
  gap: 9px !important;
  min-height: 112px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 14px 14px 15px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 3 !important;
  isolation: isolate !important;
  transform: none !important;
}

html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) > .range-control > span,
html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) > .range-control > input[type="range"],
html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) > .range-control > small {
  position: relative !important;
  z-index: 1 !important;
}

html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) > .range-control > input[type="range"] {
  align-self: center !important;
}

html[data-theme] body #backgroundWorkspace .export-panel #processButton,
html[data-theme] body #backgroundWorkspace .export-panel #downloadButton,
html[data-theme] body #backgroundWorkspace .export-panel .bulk-download-actions {
  position: relative !important;
  inset: auto !important;
  clear: both !important;
  width: 100% !important;
  height: auto !important;
  min-height: 46px !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  transform: none !important;
  z-index: 1 !important;
}

html[data-theme] body #backgroundWorkspace .export-panel #shadowSettings:not([hidden]) + #processButton {
  margin-top: 0 !important;
}

html[data-theme] body #backgroundWorkspace .export-panel #downloadButton {
  margin-top: 18px !important;
}

html[data-theme] body #backgroundWorkspace .export-panel .bulk-download-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

html[data-theme] body #backgroundWorkspace .export-panel .bulk-download-actions .secondary-button {
  min-width: 0 !important;
  margin-top: 0 !important;
}

/* ui-button-system-v1-20260524:
   Final shared visual system for repeated buttons. Keep this after the
   soft-shadow flow fix so action buttons stay below expanded shadow settings. */
:root {
  --pts-button-height: 46px;
  --pts-button-compact-height: 38px;
  --pts-button-inline-height: 34px;
  --pts-button-radius: 14px;
  --pts-button-pill-radius: 999px;
  --pts-button-gap: 8px;
  --pts-button-padding: 0 15px;
  --pts-button-compact-padding: 0 12px;
  --pts-button-font-size: 14px;
  --pts-button-compact-font-size: 13px;
  --pts-button-weight: 800;
  --pts-button-letter-spacing: 0;
  --pts-button-edge: rgba(82, 109, 158, 0.24);
  --pts-button-edge-hover: rgba(63, 104, 190, 0.36);
  --pts-button-top: rgba(255, 255, 255, 0.28);
  --pts-button-bottom: rgba(222, 232, 248, 0.18);
  --pts-button-text: var(--accent-dark);
  --pts-button-shadow: rgba(32, 48, 74, 0.13);
  --pts-button-gloss: rgba(255, 255, 255, 0.18);
  --pts-button-primary-a: rgba(67, 111, 239, 0.92);
  --pts-button-primary-b: rgba(89, 134, 244, 0.82);
  --pts-button-primary-hover-a: rgba(52, 95, 224, 0.96);
  --pts-button-primary-hover-b: rgba(78, 121, 236, 0.88);
  --pts-button-primary-edge: rgba(255, 255, 255, 0.34);
  --pts-button-disabled-opacity: 0.52;
}

[data-theme="dark"] {
  --pts-button-edge: rgba(190, 204, 232, 0.18);
  --pts-button-edge-hover: rgba(205, 216, 235, 0.30);
  --pts-button-top: rgba(235, 242, 255, 0.08);
  --pts-button-bottom: rgba(4, 8, 18, 0.22);
  --pts-button-text: var(--accent-dark);
  --pts-button-shadow: rgba(0, 0, 0, 0.32);
  --pts-button-gloss: rgba(220, 232, 255, 0.08);
  --pts-button-primary-a: rgba(97, 143, 255, 0.88);
  --pts-button-primary-b: rgba(119, 112, 242, 0.80);
  --pts-button-primary-hover-a: rgba(116, 158, 255, 0.94);
  --pts-button-primary-hover-b: rgba(136, 129, 248, 0.88);
  --pts-button-primary-edge: rgba(220, 232, 255, 0.28);
}

html[data-theme] body .primary-button,
html[data-theme] body .secondary-button,
html[data-theme] body .small-button,
html[data-theme] body .queue-download,
html[data-theme] body .queue-heading button,
html[data-theme] body .key-row button,
html[data-theme] body .custom-select-button,
html[data-theme] body .themed-select-button,
html[data-theme] body .theme-toggle,
html[data-theme] body .kofi-button,
html[data-theme] body .optional-access summary {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--pts-button-gap) !important;
  min-height: var(--pts-button-height) !important;
  padding: var(--pts-button-padding) !important;
  border: 1px solid var(--pts-button-edge) !important;
  border-radius: var(--pts-button-radius) !important;
  color: var(--pts-button-text) !important;
  background:
    linear-gradient(180deg, var(--pts-button-top), var(--pts-button-bottom)),
    var(--glass-control-bg, var(--panel-soft)) !important;
  box-shadow:
    0 8px 20px var(--pts-button-shadow),
    inset 0 1px 0 var(--pts-button-gloss),
    inset 0 -1px 0 rgba(0, 0, 0, 0.045) !important;
  backdrop-filter: blur(var(--glass-control-blur, 4px)) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(var(--glass-control-blur, 4px)) saturate(1.08) !important;
  cursor: pointer !important;
  font-size: var(--pts-button-font-size) !important;
  font-weight: var(--pts-button-weight) !important;
  letter-spacing: var(--pts-button-letter-spacing) !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    opacity 150ms ease,
    transform 150ms ease !important;
}

html[data-theme] body .small-button,
html[data-theme] body .queue-download,
html[data-theme] body .queue-heading button,
html[data-theme] body .key-row button,
html[data-theme] body .optional-access summary {
  min-height: var(--pts-button-compact-height) !important;
  padding: var(--pts-button-compact-padding) !important;
  border-radius: var(--pts-button-pill-radius) !important;
  font-size: var(--pts-button-compact-font-size) !important;
}

html[data-theme] body .queue-heading button {
  min-width: 72px !important;
  background:
    linear-gradient(180deg, var(--pts-button-top), var(--pts-button-bottom)),
    var(--glass-control-bg, var(--panel-soft)) !important;
}

html[data-theme] body .queue-download {
  min-height: var(--pts-button-inline-height) !important;
  padding-inline: 11px !important;
}

html[data-theme] body .theme-toggle,
html[data-theme] body .kofi-button,
html[data-theme] body .custom-select-button,
html[data-theme] body .themed-select-button {
  border-radius: var(--pts-button-pill-radius) !important;
}

html[data-theme] body .theme-toggle {
  min-width: 104px !important;
}

html[data-theme] body .kofi-button {
  min-width: 0 !important;
}

html[data-theme] body .primary-button {
  color: #ffffff !important;
  border-color: var(--pts-button-primary-edge) !important;
  background:
    linear-gradient(135deg, var(--pts-button-primary-a), var(--pts-button-primary-b)) !important;
  box-shadow:
    0 10px 24px rgba(37, 99, 235, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10) !important;
}

html[data-theme] body .secondary-button,
html[data-theme] body .primary-button {
  width: 100% !important;
}

html[data-theme] body .secondary-button,
html[data-theme] body .editor-reset-button {
  margin-top: 12px !important;
}

html[data-theme] body .primary-button + .secondary-button {
  margin-top: 12px !important;
}

html[data-theme] body .bulk-download-actions {
  gap: 10px !important;
}

html[data-theme] body .bulk-download-actions .secondary-button {
  min-width: 0 !important;
  margin-top: 0 !important;
}

html[data-theme] body .range-action-row .small-button,
html[data-theme] body #compressWithoutCompressionButton {
  min-height: var(--pts-button-compact-height) !important;
  padding-inline: 12px !important;
  border-radius: var(--pts-button-pill-radius) !important;
}

html[data-theme] body .file-control input[type="file"]::file-selector-button,
html[data-theme] body #backgroundImageInput::file-selector-button,
html[data-theme] body #cropFileInput::file-selector-button,
html[data-theme] body #blurFileInput::file-selector-button,
html[data-theme] body #metadataFileInput::file-selector-button,
html[data-theme] body #compressFileInput::file-selector-button,
html[data-theme] body #formatFileInput::file-selector-button {
  min-height: var(--pts-button-compact-height) !important;
  margin: 0 10px 0 0 !important;
  padding: var(--pts-button-compact-padding) !important;
  border: 1px solid var(--pts-button-edge) !important;
  border-radius: var(--pts-button-pill-radius) !important;
  color: var(--pts-button-text) !important;
  background:
    linear-gradient(180deg, var(--pts-button-top), var(--pts-button-bottom)),
    var(--glass-control-bg, var(--panel-soft)) !important;
  box-shadow:
    0 8px 20px var(--pts-button-shadow),
    inset 0 1px 0 var(--pts-button-gloss) !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: var(--pts-button-compact-font-size) !important;
  font-weight: var(--pts-button-weight) !important;
}

html[data-theme] body .primary-button:hover:not(:disabled),
html[data-theme] body .primary-button:focus-visible:not(:disabled) {
  border-color: var(--pts-button-primary-edge) !important;
  background:
    linear-gradient(135deg, var(--pts-button-primary-hover-a), var(--pts-button-primary-hover-b)) !important;
  box-shadow:
    0 12px 28px rgba(37, 99, 235, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-1px) !important;
}

html[data-theme] body .secondary-button:hover:not(.is-disabled),
html[data-theme] body .secondary-button:focus-visible:not(.is-disabled),
html[data-theme] body .small-button:hover:not(:disabled),
html[data-theme] body .small-button:focus-visible:not(:disabled),
html[data-theme] body .queue-download:hover,
html[data-theme] body .queue-download:focus-visible,
html[data-theme] body .queue-heading button:hover,
html[data-theme] body .queue-heading button:focus-visible,
html[data-theme] body .key-row button:hover:not(:disabled),
html[data-theme] body .key-row button:focus-visible:not(:disabled),
html[data-theme] body .custom-select-button:hover,
html[data-theme] body .custom-select-button:focus-visible,
html[data-theme] body .themed-select-button:hover:not(:disabled),
html[data-theme] body .themed-select-button:focus-visible:not(:disabled),
html[data-theme] body .theme-toggle:hover,
html[data-theme] body .theme-toggle:focus-visible,
html[data-theme] body .kofi-button:hover,
html[data-theme] body .kofi-button:focus-visible,
html[data-theme] body .optional-access summary:hover,
html[data-theme] body .optional-access summary:focus-visible {
  border-color: var(--pts-button-edge-hover) !important;
  color: var(--pts-button-text) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), var(--pts-button-bottom)),
    var(--glass-control-bg, var(--panel-soft)) !important;
  box-shadow:
    0 10px 24px var(--pts-button-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 var(--pts-button-gloss),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-1px) !important;
}

html[data-theme] body .primary-button:focus-visible,
html[data-theme] body .secondary-button:focus-visible,
html[data-theme] body .small-button:focus-visible,
html[data-theme] body .queue-download:focus-visible,
html[data-theme] body .queue-heading button:focus-visible,
html[data-theme] body .key-row button:focus-visible,
html[data-theme] body .custom-select-button:focus-visible,
html[data-theme] body .themed-select-button:focus-visible,
html[data-theme] body .theme-toggle:focus-visible,
html[data-theme] body .kofi-button:focus-visible,
html[data-theme] body .optional-access summary:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 4px var(--focus-ring),
    0 10px 24px var(--pts-button-shadow),
    inset 0 1px 0 var(--pts-button-gloss) !important;
}

html[data-theme] body .primary-button:active:not(:disabled),
html[data-theme] body .secondary-button:active:not(.is-disabled),
html[data-theme] body .small-button:active:not(:disabled),
html[data-theme] body .queue-download:active,
html[data-theme] body .queue-heading button:active,
html[data-theme] body .key-row button:active:not(:disabled),
html[data-theme] body .custom-select-button:active,
html[data-theme] body .themed-select-button:active:not(:disabled),
html[data-theme] body .theme-toggle:active,
html[data-theme] body .kofi-button:active,
html[data-theme] body .optional-access summary:active {
  transform: translateY(0) !important;
  box-shadow:
    0 5px 14px var(--pts-button-shadow),
    inset 0 1px 0 var(--pts-button-gloss),
    inset 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme] body .primary-button:disabled,
html[data-theme] body .secondary-button.is-disabled,
html[data-theme] body .small-button:disabled,
html[data-theme] body .key-row button:disabled,
html[data-theme] body .themed-select-button:disabled,
html[data-theme] body .custom-select-button[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: var(--pts-button-disabled-opacity) !important;
  transform: none !important;
  filter: saturate(0.82) !important;
  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 var(--pts-button-gloss) !important;
}

@media (max-width: 720px) {
  html[data-theme] body .primary-button,
  html[data-theme] body .secondary-button {
    min-height: 44px !important;
  }

  html[data-theme] body .small-button,
  html[data-theme] body .queue-heading button,
  html[data-theme] body .key-row button {
    min-height: 36px !important;
  }

  html[data-theme] body .theme-toggle,
  html[data-theme] body .kofi-button {
    min-height: 40px !important;
    padding-inline: 10px !important;
  }
}

/* interface-polish-v2-20260524:
   Final polish pass for repeated buttons, Ready pills, and the mobile header.
   Palette stays in the existing cool glass theme: slate surfaces, clear blue
   actions, emerald success. Buttons use flat surfaces, not gradient fills. */
:root {
  --pts-polish-ink: #0f172a;
  --pts-polish-blue: #2563eb;
  --pts-polish-blue-soft: rgba(37, 99, 235, 0.12);
  --pts-polish-blue-ring: rgba(37, 99, 235, 0.22);
  --pts-polish-emerald: #059669;
  --pts-polish-emerald-soft: rgba(16, 185, 129, 0.16);
  --pts-polish-emerald-ring: rgba(16, 185, 129, 0.26);
  --pts-polish-rose: #e11d48;
  --pts-polish-rose-soft: rgba(225, 29, 72, 0.12);
  --pts-polish-surface: rgba(246, 250, 255, 0.74);
  --pts-polish-surface-hover: rgba(255, 255, 255, 0.86);
  --pts-polish-surface-active: rgba(226, 234, 246, 0.82);
  --pts-polish-edge: rgba(71, 85, 105, 0.20);
  --pts-polish-edge-hover: rgba(37, 99, 235, 0.34);
  --pts-polish-shadow: rgba(15, 23, 42, 0.12);
  --pts-polish-shadow-strong: rgba(15, 23, 42, 0.17);
}

[data-theme="dark"] {
  --pts-polish-ink: #e5eefb;
  --pts-polish-blue: #60a5fa;
  --pts-polish-blue-soft: rgba(96, 165, 250, 0.16);
  --pts-polish-blue-ring: rgba(96, 165, 250, 0.28);
  --pts-polish-emerald: #34d399;
  --pts-polish-emerald-soft: rgba(52, 211, 153, 0.15);
  --pts-polish-emerald-ring: rgba(52, 211, 153, 0.26);
  --pts-polish-rose: #fb7185;
  --pts-polish-rose-soft: rgba(251, 113, 133, 0.14);
  --pts-polish-surface: rgba(22, 31, 49, 0.72);
  --pts-polish-surface-hover: rgba(30, 42, 64, 0.86);
  --pts-polish-surface-active: rgba(15, 23, 42, 0.84);
  --pts-polish-edge: rgba(203, 213, 225, 0.18);
  --pts-polish-edge-hover: rgba(147, 197, 253, 0.36);
  --pts-polish-shadow: rgba(0, 0, 0, 0.30);
  --pts-polish-shadow-strong: rgba(0, 0, 0, 0.38);
}

html[data-theme] body .primary-button,
html[data-theme] body .secondary-button,
html[data-theme] body .small-button,
html[data-theme] body .queue-download,
html[data-theme] body .queue-heading button,
html[data-theme] body .key-row button,
html[data-theme] body .custom-select-button,
html[data-theme] body .themed-select-button,
html[data-theme] body .theme-toggle,
html[data-theme] body .kofi-button,
html[data-theme] body .optional-access summary,
html[data-theme] body .file-control input[type="file"]::file-selector-button,
html[data-theme] body #backgroundImageInput::file-selector-button,
html[data-theme] body #cropFileInput::file-selector-button,
html[data-theme] body #blurFileInput::file-selector-button,
html[data-theme] body #metadataFileInput::file-selector-button,
html[data-theme] body #compressFileInput::file-selector-button,
html[data-theme] body #formatFileInput::file-selector-button {
  border-color: var(--pts-polish-edge) !important;
  color: var(--pts-polish-blue) !important;
  background: var(--pts-polish-surface) !important;
  box-shadow:
    0 8px 20px var(--pts-polish-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

html[data-theme] body .primary-button {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(37, 99, 235, 0.78) !important;
  box-shadow:
    0 10px 22px rgba(37, 99, 235, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

[data-theme="dark"] body .primary-button {
  color: #f8fbff !important;
  background: rgba(59, 130, 246, 0.70) !important;
}

html[data-theme] body .primary-button:hover:not(:disabled),
html[data-theme] body .primary-button:focus-visible:not(:disabled),
html[data-theme] body .secondary-button:hover:not(.is-disabled),
html[data-theme] body .secondary-button:focus-visible:not(.is-disabled),
html[data-theme] body .small-button:hover:not(:disabled),
html[data-theme] body .small-button:focus-visible:not(:disabled),
html[data-theme] body .queue-download:hover,
html[data-theme] body .queue-download:focus-visible,
html[data-theme] body .queue-heading button:hover,
html[data-theme] body .queue-heading button:focus-visible,
html[data-theme] body .key-row button:hover:not(:disabled),
html[data-theme] body .key-row button:focus-visible:not(:disabled),
html[data-theme] body .custom-select-button:hover,
html[data-theme] body .custom-select-button:focus-visible,
html[data-theme] body .themed-select-button:hover:not(:disabled),
html[data-theme] body .themed-select-button:focus-visible:not(:disabled),
html[data-theme] body .theme-toggle:hover,
html[data-theme] body .theme-toggle:focus-visible,
html[data-theme] body .kofi-button:hover,
html[data-theme] body .kofi-button:focus-visible,
html[data-theme] body .optional-access summary:hover,
html[data-theme] body .optional-access summary:focus-visible {
  border-color: var(--pts-polish-edge-hover) !important;
  background: var(--pts-polish-surface-hover) !important;
  box-shadow:
    0 0 0 3px var(--pts-polish-blue-ring),
    0 10px 24px var(--pts-polish-shadow-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px) !important;
}

html[data-theme] body .primary-button:hover:not(:disabled),
html[data-theme] body .primary-button:focus-visible:not(:disabled) {
  color: #ffffff !important;
  background: rgba(29, 78, 216, 0.82) !important;
  box-shadow:
    0 0 0 3px var(--pts-polish-blue-ring),
    0 12px 26px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

html[data-theme] body .primary-button:active:not(:disabled),
html[data-theme] body .secondary-button:active:not(.is-disabled),
html[data-theme] body .small-button:active:not(:disabled),
html[data-theme] body .queue-download:active,
html[data-theme] body .queue-heading button:active,
html[data-theme] body .key-row button:active:not(:disabled),
html[data-theme] body .custom-select-button:active,
html[data-theme] body .themed-select-button:active:not(:disabled),
html[data-theme] body .theme-toggle:active,
html[data-theme] body .kofi-button:active,
html[data-theme] body .optional-access summary:active {
  background: var(--pts-polish-surface-active) !important;
  border-color: var(--pts-polish-edge-hover) !important;
  box-shadow:
    0 0 0 2px var(--pts-polish-blue-ring),
    0 6px 16px var(--pts-polish-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  transform: translateY(0) !important;
}

html[data-theme] body .primary-button:active:not(:disabled) {
  color: #ffffff !important;
  background: rgba(30, 64, 175, 0.86) !important;
  box-shadow:
    0 0 0 2px var(--pts-polish-blue-ring),
    0 7px 18px rgba(37, 99, 235, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

html[data-theme] body .primary-button:disabled,
html[data-theme] body .secondary-button.is-disabled,
html[data-theme] body .small-button:disabled,
html[data-theme] body .key-row button:disabled,
html[data-theme] body .themed-select-button:disabled,
html[data-theme] body .custom-select-button[aria-disabled="true"] {
  background: rgba(226, 234, 246, 0.54) !important;
  border-color: rgba(100, 116, 139, 0.16) !important;
  color: rgba(37, 99, 235, 0.72) !important;
  opacity: 0.72 !important;
  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

[data-theme="dark"] body .primary-button:disabled,
[data-theme="dark"] body .secondary-button.is-disabled,
[data-theme="dark"] body .small-button:disabled,
[data-theme="dark"] body .key-row button:disabled,
[data-theme="dark"] body .themed-select-button:disabled,
[data-theme="dark"] body .custom-select-button[aria-disabled="true"] {
  background: rgba(30, 41, 59, 0.54) !important;
  color: rgba(147, 197, 253, 0.70) !important;
}

html[data-theme] body #statusPill,
html[data-theme] body .status-card-header [data-status-pill],
html[data-theme] body .queue-status,
html[data-theme] body #queuePositionPill,
html[data-theme] body .queue-position-header [data-queue-pill] {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  min-width: 92px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(16, 185, 129, 0.30) !important;
  border-radius: 999px !important;
  color: var(--pts-polish-emerald) !important;
  background: var(--pts-polish-emerald-soft) !important;
  box-shadow:
    0 8px 18px rgba(16, 185, 129, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-theme] body #statusPill.is-processing,
html[data-theme] body .status-card-header [data-status-pill].is-processing,
html[data-theme] body .queue-status.is-processing,
html[data-theme] body #queuePositionPill.is-processing,
html[data-theme] body .queue-position-header [data-queue-pill].is-processing {
  border-color: rgba(37, 99, 235, 0.30) !important;
  color: var(--pts-polish-blue) !important;
  background: var(--pts-polish-blue-soft) !important;
  box-shadow:
    0 8px 18px rgba(37, 99, 235, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

html[data-theme] body #statusPill.is-error,
html[data-theme] body .status-card-header [data-status-pill].is-failed,
html[data-theme] body .queue-status.is-failed,
html[data-theme] body #queuePositionPill.is-error,
html[data-theme] body .queue-position-header [data-queue-pill].is-error {
  border-color: rgba(225, 29, 72, 0.28) !important;
  color: var(--pts-polish-rose) !important;
  background: var(--pts-polish-rose-soft) !important;
  box-shadow:
    0 8px 18px rgba(225, 29, 72, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html[data-theme] body .status-log li.is-done {
  color: var(--pts-polish-emerald) !important;
}

@media (max-width: 720px) {
  html[data-theme] body .app-header {
    min-height: 58px !important;
    height: 58px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
  }

  html[data-theme] body .brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html[data-theme] body .brand-logo {
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html[data-theme] body .brand-title {
    display: inline-flex !important;
    max-width: calc(100vw - 215px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  html[data-theme] body .brand-photo,
  html[data-theme] body .brand-tools {
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1 !important;
  }

  html[data-theme] body .header-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
  }

  html[data-theme] body .theme-toggle,
  html[data-theme] body .kofi-button {
    align-self: center !important;
    min-height: 38px !important;
    height: 38px !important;
    padding-inline: 9px !important;
  }

  html[data-theme] body .theme-toggle {
    min-width: 78px !important;
  }

  html[data-theme] body .kofi-button {
    max-width: 82px !important;
  }

  html[data-theme] body .kofi-button span::after {
    content: "Ko-fi" !important;
  }
}

@media (max-width: 430px) {
  html[data-theme] body .brand-title {
    display: none !important;
  }

  html[data-theme] body .app-header {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  html[data-theme] body .header-actions {
    grid-column: 2 !important;
  }
}

/* premium-beta-themes-v1-20260524:
   Theme-specific borders, disabled buttons, and two beta colorways.
   Colors follow Radix/Tailwind scale roles: subtle borders, stronger
   interactive borders, solid accent buttons, and theme-tinted disabled states. */
:root,
[data-theme="light"] {
  --pts-theme-primary: #2563eb;
  --pts-theme-primary-hover: #1d4ed8;
  --pts-theme-primary-active: #1e40af;
  --pts-theme-primary-text: #ffffff;
  --pts-theme-primary-border: rgba(37, 99, 235, 0.34);
  --pts-theme-primary-shadow: rgba(37, 99, 235, 0.22);
  --pts-theme-border: rgba(71, 85, 105, 0.22);
  --pts-theme-border-hover: rgba(37, 99, 235, 0.42);
  --pts-theme-ring: rgba(37, 99, 235, 0.24);
  --pts-theme-ring-strong: rgba(37, 99, 235, 0.34);
  --pts-theme-surface: rgba(248, 250, 252, 0.78);
  --pts-theme-surface-hover: rgba(255, 255, 255, 0.90);
  --pts-theme-surface-active: rgba(226, 232, 240, 0.86);
  --pts-theme-disabled-bg: rgba(226, 232, 240, 0.62);
  --pts-theme-disabled-fg: rgba(37, 99, 235, 0.52);
  --pts-theme-disabled-border: rgba(100, 116, 139, 0.18);
  --pts-theme-disabled-shadow: rgba(15, 23, 42, 0.07);
  --pts-theme-success: #059669;
  --pts-theme-success-bg: rgba(16, 185, 129, 0.16);
  --pts-theme-success-border: rgba(16, 185, 129, 0.30);
  --pts-theme-danger: #e11d48;
  --pts-theme-danger-bg: rgba(225, 29, 72, 0.12);
  --pts-theme-danger-border: rgba(225, 29, 72, 0.28);

  --pts-polish-blue: var(--pts-theme-primary);
  --pts-polish-blue-soft: rgba(37, 99, 235, 0.12);
  --pts-polish-blue-ring: var(--pts-theme-ring);
  --pts-polish-emerald: var(--pts-theme-success);
  --pts-polish-emerald-soft: var(--pts-theme-success-bg);
  --pts-polish-emerald-ring: rgba(16, 185, 129, 0.26);
  --pts-polish-rose: var(--pts-theme-danger);
  --pts-polish-rose-soft: var(--pts-theme-danger-bg);
  --pts-polish-surface: var(--pts-theme-surface);
  --pts-polish-surface-hover: var(--pts-theme-surface-hover);
  --pts-polish-surface-active: var(--pts-theme-surface-active);
  --pts-polish-edge: var(--pts-theme-border);
  --pts-polish-edge-hover: var(--pts-theme-border-hover);
  --pts-polish-shadow: rgba(15, 23, 42, 0.12);
  --pts-polish-shadow-strong: rgba(15, 23, 42, 0.17);
}

[data-theme="dark"] {
  --pts-theme-primary: #60a5fa;
  --pts-theme-primary-hover: #3b82f6;
  --pts-theme-primary-active: #2563eb;
  --pts-theme-primary-text: #f8fbff;
  --pts-theme-primary-border: rgba(147, 197, 253, 0.34);
  --pts-theme-primary-shadow: rgba(96, 165, 250, 0.24);
  --pts-theme-border: rgba(203, 213, 225, 0.19);
  --pts-theme-border-hover: rgba(147, 197, 253, 0.42);
  --pts-theme-ring: rgba(96, 165, 250, 0.28);
  --pts-theme-ring-strong: rgba(96, 165, 250, 0.36);
  --pts-theme-surface: rgba(22, 31, 49, 0.74);
  --pts-theme-surface-hover: rgba(30, 42, 64, 0.88);
  --pts-theme-surface-active: rgba(15, 23, 42, 0.86);
  --pts-theme-disabled-bg: rgba(30, 41, 59, 0.58);
  --pts-theme-disabled-fg: rgba(147, 197, 253, 0.52);
  --pts-theme-disabled-border: rgba(148, 163, 184, 0.16);
  --pts-theme-disabled-shadow: rgba(0, 0, 0, 0.24);
  --pts-theme-success: #34d399;
  --pts-theme-success-bg: rgba(52, 211, 153, 0.15);
  --pts-theme-success-border: rgba(52, 211, 153, 0.28);
  --pts-theme-danger: #fb7185;
  --pts-theme-danger-bg: rgba(251, 113, 133, 0.14);
  --pts-theme-danger-border: rgba(251, 113, 133, 0.28);
}

[data-theme="aurora"] {
  color-scheme: light;

  --shader-opacity: 0.52;
  --viscosity-page-bg:
    radial-gradient(circle at 10% 0%, rgba(20, 184, 166, 0.16), transparent 34%),
    radial-gradient(circle at 86% 10%, rgba(56, 189, 248, 0.12), transparent 34%),
    linear-gradient(180deg, #eefdf8 0%, #e6f7fb 52%, #dceff2 100%);
  --shader-overlay:
    linear-gradient(180deg, rgba(240, 253, 250, 0.07), rgba(204, 251, 241, 0.11));

  --glass-bg: rgba(240, 253, 250, 0.24);
  --glass-bg-strong: rgba(240, 253, 250, 0.35);
  --glass-control-bg: rgba(240, 253, 250, 0.32);
  --glass-border: rgba(13, 148, 136, 0.19);
  --glass-border-soft: rgba(13, 148, 136, 0.13);
  --glass-highlight: rgba(255, 255, 255, 0.56);
  --glass-shadow: rgba(15, 118, 110, 0.15);
  --ink: #06201c;
  --label: #123b36;
  --muted: #48655f;
  --line: rgba(15, 118, 110, 0.17);
  --line-strong: rgba(15, 118, 110, 0.25);
  --header-bg: rgba(240, 253, 250, 0.28);
  --panel: rgba(240, 253, 250, 0.24);
  --panel-soft: rgba(236, 253, 245, 0.24);
  --control-bg: rgba(240, 253, 250, 0.34);
  --control-hover: rgba(255, 255, 255, 0.46);
  --button-soft: rgba(240, 253, 250, 0.36);
  --button-soft-hover: rgba(255, 255, 255, 0.48);
  --button-soft-border: rgba(13, 148, 136, 0.28);
  --accent: #0f766e;
  --accent-dark: #115e59;
  --accent-soft: rgba(204, 251, 241, 0.46);
  --success: #047857;
  --success-soft: rgba(209, 250, 229, 0.46);
  --danger: #be123c;
  --danger-soft: rgba(255, 228, 230, 0.44);
  --empty: #4b635f;

  --pts-theme-primary: #0f766e;
  --pts-theme-primary-hover: #115e59;
  --pts-theme-primary-active: #134e4a;
  --pts-theme-primary-text: #ffffff;
  --pts-theme-primary-border: rgba(15, 118, 110, 0.36);
  --pts-theme-primary-shadow: rgba(15, 118, 110, 0.23);
  --pts-theme-border: rgba(13, 148, 136, 0.24);
  --pts-theme-border-hover: rgba(15, 118, 110, 0.44);
  --pts-theme-ring: rgba(20, 184, 166, 0.25);
  --pts-theme-ring-strong: rgba(20, 184, 166, 0.36);
  --pts-theme-surface: rgba(240, 253, 250, 0.78);
  --pts-theme-surface-hover: rgba(255, 255, 255, 0.90);
  --pts-theme-surface-active: rgba(204, 251, 241, 0.78);
  --pts-theme-disabled-bg: rgba(204, 251, 241, 0.54);
  --pts-theme-disabled-fg: rgba(15, 118, 110, 0.55);
  --pts-theme-disabled-border: rgba(13, 148, 136, 0.18);
  --pts-theme-disabled-shadow: rgba(15, 118, 110, 0.08);
  --pts-theme-success: #059669;
  --pts-theme-success-bg: rgba(16, 185, 129, 0.16);
  --pts-theme-success-border: rgba(16, 185, 129, 0.30);
  --pts-theme-danger: #be123c;
  --pts-theme-danger-bg: rgba(225, 29, 72, 0.12);
  --pts-theme-danger-border: rgba(225, 29, 72, 0.28);

  --pts-polish-blue: var(--pts-theme-primary);
  --pts-polish-blue-soft: rgba(20, 184, 166, 0.12);
  --pts-polish-blue-ring: var(--pts-theme-ring);
  --pts-polish-emerald: var(--pts-theme-success);
  --pts-polish-emerald-soft: var(--pts-theme-success-bg);
  --pts-polish-emerald-ring: rgba(16, 185, 129, 0.26);
  --pts-polish-rose: var(--pts-theme-danger);
  --pts-polish-rose-soft: var(--pts-theme-danger-bg);
  --pts-polish-surface: var(--pts-theme-surface);
  --pts-polish-surface-hover: var(--pts-theme-surface-hover);
  --pts-polish-surface-active: var(--pts-theme-surface-active);
  --pts-polish-edge: var(--pts-theme-border);
  --pts-polish-edge-hover: var(--pts-theme-border-hover);
  --pts-polish-shadow: rgba(15, 118, 110, 0.12);
  --pts-polish-shadow-strong: rgba(15, 118, 110, 0.17);
}

[data-theme="nocturne"] {
  color-scheme: dark;

  --shader-opacity: 0.64;
  --viscosity-page-bg:
    radial-gradient(circle at 14% 0%, rgba(225, 29, 72, 0.20), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(34, 211, 238, 0.12), transparent 34%),
    linear-gradient(180deg, #111015 0%, #09090f 52%, #050509 100%);
  --shader-overlay:
    linear-gradient(180deg, rgba(8, 7, 12, 0.12), rgba(8, 7, 12, 0.38));

  --glass-bg: rgba(17, 16, 21, 0.20);
  --glass-bg-strong: rgba(25, 23, 31, 0.30);
  --glass-control-bg: rgba(25, 23, 31, 0.24);
  --glass-border: rgba(255, 228, 235, 0.16);
  --glass-border-soft: rgba(255, 228, 235, 0.11);
  --glass-highlight: rgba(255, 255, 255, 0.17);
  --glass-shadow: rgba(0, 0, 0, 0.42);
  --ink: #fff7fb;
  --label: #ffe4ed;
  --muted: #d9c2cc;
  --line: rgba(255, 228, 235, 0.13);
  --line-strong: rgba(255, 228, 235, 0.21);
  --header-bg: rgba(17, 16, 21, 0.24);
  --panel: rgba(17, 16, 21, 0.20);
  --panel-soft: rgba(25, 23, 31, 0.22);
  --control-bg: rgba(25, 23, 31, 0.26);
  --control-hover: rgba(43, 38, 50, 0.38);
  --button-soft: rgba(30, 27, 36, 0.28);
  --button-soft-hover: rgba(43, 38, 50, 0.42);
  --button-soft-border: rgba(251, 113, 133, 0.25);
  --accent: #fb7185;
  --accent-dark: #ffe4ed;
  --accent-soft: rgba(76, 23, 38, 0.38);
  --success: #2dd4bf;
  --success-soft: rgba(20, 83, 79, 0.36);
  --danger: #fb7185;
  --danger-soft: rgba(76, 23, 38, 0.38);
  --empty: #ead3dc;

  --pts-theme-primary: #e11d48;
  --pts-theme-primary-hover: #be123c;
  --pts-theme-primary-active: #9f1239;
  --pts-theme-primary-text: #fff7fb;
  --pts-theme-primary-border: rgba(251, 113, 133, 0.38);
  --pts-theme-primary-shadow: rgba(225, 29, 72, 0.25);
  --pts-theme-border: rgba(255, 228, 235, 0.18);
  --pts-theme-border-hover: rgba(251, 113, 133, 0.44);
  --pts-theme-ring: rgba(251, 113, 133, 0.28);
  --pts-theme-ring-strong: rgba(251, 113, 133, 0.38);
  --pts-theme-surface: rgba(25, 23, 31, 0.76);
  --pts-theme-surface-hover: rgba(43, 38, 50, 0.90);
  --pts-theme-surface-active: rgba(17, 16, 21, 0.88);
  --pts-theme-disabled-bg: rgba(43, 38, 50, 0.58);
  --pts-theme-disabled-fg: rgba(251, 113, 133, 0.55);
  --pts-theme-disabled-border: rgba(255, 228, 235, 0.14);
  --pts-theme-disabled-shadow: rgba(0, 0, 0, 0.28);
  --pts-theme-success: #2dd4bf;
  --pts-theme-success-bg: rgba(20, 184, 166, 0.15);
  --pts-theme-success-border: rgba(45, 212, 191, 0.28);
  --pts-theme-danger: #fb7185;
  --pts-theme-danger-bg: rgba(251, 113, 133, 0.14);
  --pts-theme-danger-border: rgba(251, 113, 133, 0.30);

  --pts-polish-blue: var(--pts-theme-primary);
  --pts-polish-blue-soft: rgba(251, 113, 133, 0.14);
  --pts-polish-blue-ring: var(--pts-theme-ring);
  --pts-polish-emerald: var(--pts-theme-success);
  --pts-polish-emerald-soft: var(--pts-theme-success-bg);
  --pts-polish-emerald-ring: rgba(45, 212, 191, 0.26);
  --pts-polish-rose: var(--pts-theme-danger);
  --pts-polish-rose-soft: var(--pts-theme-danger-bg);
  --pts-polish-surface: var(--pts-theme-surface);
  --pts-polish-surface-hover: var(--pts-theme-surface-hover);
  --pts-polish-surface-active: var(--pts-theme-surface-active);
  --pts-polish-edge: var(--pts-theme-border);
  --pts-polish-edge-hover: var(--pts-theme-border-hover);
  --pts-polish-shadow: rgba(0, 0, 0, 0.32);
  --pts-polish-shadow-strong: rgba(0, 0, 0, 0.42);
}

html[data-theme] body .primary-button,
html[data-theme] body .secondary-button,
html[data-theme] body .small-button,
html[data-theme] body .queue-download,
html[data-theme] body .queue-heading button,
html[data-theme] body .key-row button,
html[data-theme] body .custom-select-button,
html[data-theme] body .themed-select-button,
html[data-theme] body .theme-toggle,
html[data-theme] body .kofi-button,
html[data-theme] body .optional-access summary,
html[data-theme] body .pts-theme-choice,
html[data-theme] body .file-control input[type="file"]::file-selector-button,
html[data-theme] body #backgroundImageInput::file-selector-button,
html[data-theme] body #cropFileInput::file-selector-button,
html[data-theme] body #blurFileInput::file-selector-button,
html[data-theme] body #metadataFileInput::file-selector-button,
html[data-theme] body #compressFileInput::file-selector-button,
html[data-theme] body #formatFileInput::file-selector-button {
  border-color: var(--pts-theme-border) !important;
  color: var(--pts-theme-primary) !important;
  background: var(--pts-theme-surface) !important;
  box-shadow:
    0 8px 20px var(--pts-polish-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

html[data-theme] body .primary-button {
  color: var(--pts-theme-primary-text) !important;
  border-color: var(--pts-theme-primary-border) !important;
  background: var(--pts-theme-primary) !important;
  box-shadow:
    0 10px 22px var(--pts-theme-primary-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

html[data-theme] body .primary-button:hover:not(:disabled),
html[data-theme] body .primary-button:focus-visible:not(:disabled) {
  color: var(--pts-theme-primary-text) !important;
  border-color: var(--pts-theme-primary-border) !important;
  background: var(--pts-theme-primary-hover) !important;
  box-shadow:
    0 0 0 3px var(--pts-theme-ring),
    0 12px 26px var(--pts-theme-primary-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

html[data-theme] body .primary-button:active:not(:disabled) {
  color: var(--pts-theme-primary-text) !important;
  background: var(--pts-theme-primary-active) !important;
  box-shadow:
    0 0 0 2px var(--pts-theme-ring-strong),
    0 7px 18px var(--pts-theme-primary-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

html[data-theme] body .secondary-button:hover:not(.is-disabled),
html[data-theme] body .secondary-button:focus-visible:not(.is-disabled),
html[data-theme] body .small-button:hover:not(:disabled),
html[data-theme] body .small-button:focus-visible:not(:disabled),
html[data-theme] body .queue-download:hover,
html[data-theme] body .queue-download:focus-visible,
html[data-theme] body .queue-heading button:hover,
html[data-theme] body .queue-heading button:focus-visible,
html[data-theme] body .key-row button:hover:not(:disabled),
html[data-theme] body .key-row button:focus-visible:not(:disabled),
html[data-theme] body .custom-select-button:hover,
html[data-theme] body .custom-select-button:focus-visible,
html[data-theme] body .themed-select-button:hover:not(:disabled),
html[data-theme] body .themed-select-button:focus-visible:not(:disabled),
html[data-theme] body .theme-toggle:hover,
html[data-theme] body .theme-toggle:focus-visible,
html[data-theme] body .kofi-button:hover,
html[data-theme] body .kofi-button:focus-visible,
html[data-theme] body .optional-access summary:hover,
html[data-theme] body .optional-access summary:focus-visible,
html[data-theme] body .pts-theme-choice:hover,
html[data-theme] body .pts-theme-choice:focus-visible {
  border-color: var(--pts-theme-border-hover) !important;
  background: var(--pts-theme-surface-hover) !important;
  box-shadow:
    0 0 0 3px var(--pts-theme-ring),
    0 10px 24px var(--pts-polish-shadow-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px) !important;
}

html[data-theme] body .secondary-button:active:not(.is-disabled),
html[data-theme] body .small-button:active:not(:disabled),
html[data-theme] body .queue-download:active,
html[data-theme] body .queue-heading button:active,
html[data-theme] body .key-row button:active:not(:disabled),
html[data-theme] body .custom-select-button:active,
html[data-theme] body .themed-select-button:active:not(:disabled),
html[data-theme] body .theme-toggle:active,
html[data-theme] body .kofi-button:active,
html[data-theme] body .optional-access summary:active,
html[data-theme] body .pts-theme-choice:active {
  background: var(--pts-theme-surface-active) !important;
  border-color: var(--pts-theme-border-hover) !important;
  box-shadow:
    0 0 0 2px var(--pts-theme-ring),
    0 6px 16px var(--pts-polish-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  transform: translateY(0) !important;
}

html[data-theme] body .primary-button:disabled,
html[data-theme] body .secondary-button.is-disabled,
html[data-theme] body .small-button:disabled,
html[data-theme] body .key-row button:disabled,
html[data-theme] body .themed-select-button:disabled,
html[data-theme] body .custom-select-button[aria-disabled="true"] {
  background: var(--pts-theme-disabled-bg) !important;
  border-color: var(--pts-theme-disabled-border) !important;
  color: var(--pts-theme-disabled-fg) !important;
  opacity: 0.76 !important;
  box-shadow:
    0 5px 14px var(--pts-theme-disabled-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

html[data-theme] body #statusPill,
html[data-theme] body .status-card-header [data-status-pill],
html[data-theme] body .queue-status,
html[data-theme] body #queuePositionPill,
html[data-theme] body .queue-position-header [data-queue-pill] {
  border-color: var(--pts-theme-success-border) !important;
  color: var(--pts-theme-success) !important;
  background: var(--pts-theme-success-bg) !important;
  box-shadow:
    0 8px 18px var(--pts-polish-emerald-ring),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

html[data-theme] body #statusPill.is-processing,
html[data-theme] body .status-card-header [data-status-pill].is-processing,
html[data-theme] body .queue-status.is-processing,
html[data-theme] body #queuePositionPill.is-processing,
html[data-theme] body .queue-position-header [data-queue-pill].is-processing {
  border-color: var(--pts-theme-primary-border) !important;
  color: var(--pts-theme-primary) !important;
  background: var(--pts-polish-blue-soft) !important;
  box-shadow:
    0 8px 18px var(--pts-theme-primary-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

html[data-theme] body #statusPill.is-error,
html[data-theme] body .status-card-header [data-status-pill].is-failed,
html[data-theme] body .queue-status.is-failed,
html[data-theme] body #queuePositionPill.is-error,
html[data-theme] body .queue-position-header [data-queue-pill].is-error {
  border-color: var(--pts-theme-danger-border) !important;
  color: var(--pts-theme-danger) !important;
  background: var(--pts-theme-danger-bg) !important;
}

html[data-theme="aurora"] body .brand-photo {
  color: #06201c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}

html[data-theme="aurora"] body .brand-tools {
  background: linear-gradient(120deg, #0f766e 0%, #0891b2 44%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

html[data-theme="nocturne"] body .brand-photo {
  color: #fff7fb;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
}

html[data-theme="nocturne"] body .brand-tools {
  background: linear-gradient(120deg, #fb7185 0%, #f0abfc 40%, #67e8f9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

html[data-theme="aurora"] body .pts-tool-card-icon__img--light {
  display: block !important;
}

html[data-theme="aurora"] body .pts-tool-card-icon__img--dark {
  display: none !important;
}

html[data-theme="nocturne"] body .pts-tool-card-icon__img--dark {
  display: block !important;
}

html[data-theme="nocturne"] body .pts-tool-card-icon__img--light {
  display: none !important;
}

html[data-theme="aurora"] body .tool-icon img,
html[data-theme="aurora"] body .brand-logo,
html[data-theme="aurora"] body .brand-wordmark-img,
html[data-theme="aurora"] body .kofi-button img {
  filter:
    drop-shadow(0 8px 14px rgba(15, 118, 110, 0.10))
    drop-shadow(0 0 8px rgba(45, 212, 191, 0.08));
}

html[data-theme="nocturne"] body .tool-icon img,
html[data-theme="nocturne"] body .brand-logo,
html[data-theme="nocturne"] body .brand-wordmark-img,
html[data-theme="nocturne"] body .kofi-button img {
  filter:
    drop-shadow(0 0 12px rgba(251, 113, 133, 0.20))
    drop-shadow(0 0 14px rgba(103, 232, 249, 0.10));
}

html[data-theme] body #ptsSettingsPanel .pts-setting-row--theme {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-choice {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--pts-theme-border) !important;
  border-radius: 14px !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: left !important;
  cursor: pointer !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-choice.is-active {
  border-color: var(--pts-theme-border-hover) !important;
  color: var(--pts-theme-primary) !important;
  box-shadow:
    0 0 0 3px var(--pts-theme-ring),
    0 8px 18px var(--pts-polish-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-choice span:last-child {
  display: inline-flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-choice em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 18px !important;
  padding: 0 6px !important;
  border: 1px solid var(--pts-theme-border-hover) !important;
  border-radius: 999px !important;
  color: var(--pts-theme-primary) !important;
  background: var(--pts-polish-blue-soft) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-swatch {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 1px var(--pts-theme-border),
    0 5px 10px var(--pts-polish-shadow) !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-choice--light .pts-theme-swatch {
  background: linear-gradient(135deg, #f8fafc 0%, #bfdbfe 50%, #2563eb 100%) !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-choice--dark .pts-theme-swatch {
  background: linear-gradient(135deg, #020617 0%, #1e293b 52%, #60a5fa 100%) !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-choice--aurora .pts-theme-swatch {
  background: linear-gradient(135deg, #ecfdf5 0%, #5eead4 46%, #0f766e 100%) !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-choice--nocturne .pts-theme-swatch {
  background: linear-gradient(135deg, #09090f 0%, #e11d48 52%, #67e8f9 100%) !important;
}

@media (max-width: 430px) {
  html[data-theme] body #ptsSettingsPanel .pts-theme-options {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* beta-theme-background-v2-20260525:
   Make beta themes standalone palettes instead of light/dark tint overlays. */
[data-theme="aurora"] {
  color-scheme: light;

  --shader-opacity: 0.68;
  --viscosity-page-bg:
    radial-gradient(circle at 18% -8%, rgba(20, 184, 166, 0.36), transparent 34%),
    radial-gradient(circle at 86% 6%, rgba(34, 211, 238, 0.24), transparent 38%),
    radial-gradient(circle at 50% 104%, rgba(5, 150, 105, 0.18), transparent 44%),
    linear-gradient(180deg, #d8fff4 0%, #c5f7f1 46%, #b7e8ec 100%);
  --shader-overlay:
    linear-gradient(180deg, rgba(236, 253, 245, 0.02), rgba(15, 118, 110, 0.07));

  --glass-bg: rgba(220, 252, 241, 0.30);
  --glass-bg-strong: rgba(204, 251, 241, 0.42);
  --glass-control-bg: rgba(236, 253, 245, 0.40);
  --glass-border: rgba(13, 148, 136, 0.28);
  --glass-border-soft: rgba(15, 118, 110, 0.20);
  --glass-highlight: rgba(255, 255, 255, 0.64);
  --glass-shadow: rgba(15, 118, 110, 0.18);

  --ink: #05231f;
  --label: #0b3b34;
  --muted: #42665f;
  --line: rgba(13, 148, 136, 0.20);
  --line-strong: rgba(15, 118, 110, 0.30);
  --header-bg: rgba(204, 251, 241, 0.34);
  --panel: rgba(220, 252, 241, 0.30);
  --panel-soft: rgba(236, 253, 245, 0.32);
  --control-bg: rgba(236, 253, 245, 0.42);
  --control-hover: rgba(255, 255, 255, 0.56);
  --button-soft: rgba(220, 252, 241, 0.46);
  --button-soft-hover: rgba(255, 255, 255, 0.58);
  --button-soft-border: rgba(15, 118, 110, 0.34);
  --accent: #0f766e;
  --accent-dark: #0b5f59;
  --accent-soft: rgba(153, 246, 228, 0.46);
  --success: #047857;
  --success-soft: rgba(167, 243, 208, 0.48);
  --danger: #be123c;
  --danger-soft: rgba(255, 228, 230, 0.44);
  --empty: #355c55;
  --focus-ring: rgba(20, 184, 166, 0.24);
  --theme-toggle-bg: rgba(220, 252, 241, 0.72);

  --pts-card-edge: rgba(15, 118, 110, 0.26);
  --pts-card-edge-hover: rgba(20, 184, 166, 0.44);
  --pts-card-edge-glow: rgba(45, 212, 191, 0.20);
  --pts-card-inner-highlight: rgba(255, 255, 255, 0.46);
  --pts-card-inner-lowlight: rgba(13, 148, 136, 0.08);
  --pts-control-edge: rgba(15, 118, 110, 0.24);
  --pts-control-edge-hover: rgba(20, 184, 166, 0.38);
  --pts-control-top: rgba(255, 255, 255, 0.32);
  --pts-control-bottom: rgba(153, 246, 228, 0.18);
  --pts-control-gloss: rgba(255, 255, 255, 0.28);
  --pts-control-glow: rgba(45, 212, 191, 0.16);
  --pts-control-shadow: rgba(15, 118, 110, 0.16);
  --pts-ui-toggle-off: rgba(204, 251, 241, 0.58);
  --pts-ui-toggle-on-a: rgba(15, 118, 110, 0.94);
  --pts-ui-toggle-on-b: rgba(20, 184, 166, 0.82);

  --pts-button-edge: rgba(15, 118, 110, 0.26);
  --pts-button-edge-hover: rgba(20, 184, 166, 0.38);
  --pts-button-top: rgba(255, 255, 255, 0.30);
  --pts-button-bottom: rgba(153, 246, 228, 0.16);
  --pts-button-text: #0b5f59;
  --pts-button-shadow: rgba(15, 118, 110, 0.14);
  --pts-button-gloss: rgba(255, 255, 255, 0.24);
  --pts-button-disabled-opacity: 0.70;

  --pts-theme-primary: #0f766e;
  --pts-theme-primary-hover: #0d9488;
  --pts-theme-primary-active: #115e59;
  --pts-theme-primary-text: #ffffff;
  --pts-theme-primary-border: rgba(15, 118, 110, 0.40);
  --pts-theme-primary-shadow: rgba(15, 118, 110, 0.24);
  --pts-theme-border: rgba(15, 118, 110, 0.26);
  --pts-theme-border-hover: rgba(20, 184, 166, 0.46);
  --pts-theme-ring: rgba(45, 212, 191, 0.26);
  --pts-theme-ring-strong: rgba(20, 184, 166, 0.38);
  --pts-theme-surface: rgba(220, 252, 241, 0.80);
  --pts-theme-surface-hover: rgba(255, 255, 255, 0.92);
  --pts-theme-surface-active: rgba(153, 246, 228, 0.78);
  --pts-theme-disabled-bg: rgba(167, 243, 208, 0.56);
  --pts-theme-disabled-fg: rgba(15, 118, 110, 0.62);
  --pts-theme-disabled-border: rgba(15, 118, 110, 0.18);
  --pts-theme-disabled-shadow: rgba(15, 118, 110, 0.09);
  --pts-theme-success: #047857;
  --pts-theme-success-bg: rgba(16, 185, 129, 0.18);
  --pts-theme-success-border: rgba(16, 185, 129, 0.32);
  --pts-theme-danger: #be123c;
  --pts-theme-danger-bg: rgba(225, 29, 72, 0.12);
  --pts-theme-danger-border: rgba(225, 29, 72, 0.28);

  --pts-polish-blue: var(--pts-theme-primary);
  --pts-polish-blue-soft: rgba(20, 184, 166, 0.14);
  --pts-polish-blue-ring: var(--pts-theme-ring);
  --pts-polish-emerald: var(--pts-theme-success);
  --pts-polish-emerald-soft: var(--pts-theme-success-bg);
  --pts-polish-emerald-ring: rgba(16, 185, 129, 0.24);
  --pts-polish-rose: var(--pts-theme-danger);
  --pts-polish-rose-soft: var(--pts-theme-danger-bg);
  --pts-polish-surface: var(--pts-theme-surface);
  --pts-polish-surface-hover: var(--pts-theme-surface-hover);
  --pts-polish-surface-active: var(--pts-theme-surface-active);
  --pts-polish-edge: var(--pts-theme-border);
  --pts-polish-edge-hover: var(--pts-theme-border-hover);
  --pts-polish-shadow: rgba(15, 118, 110, 0.13);
  --pts-polish-shadow-strong: rgba(15, 118, 110, 0.19);
}

[data-theme="nocturne"] {
  color-scheme: dark;

  --shader-opacity: 0.76;
  --viscosity-page-bg:
    radial-gradient(circle at 16% -6%, rgba(225, 29, 72, 0.34), transparent 34%),
    radial-gradient(circle at 84% 8%, rgba(34, 211, 238, 0.20), transparent 38%),
    radial-gradient(circle at 50% 105%, rgba(127, 29, 29, 0.20), transparent 44%),
    linear-gradient(180deg, #16060d 0%, #0c050a 52%, #050307 100%);
  --shader-overlay:
    linear-gradient(180deg, rgba(8, 3, 7, 0.08), rgba(8, 3, 7, 0.46));

  --glass-bg: rgba(28, 12, 20, 0.28);
  --glass-bg-strong: rgba(40, 15, 28, 0.38);
  --glass-control-bg: rgba(35, 14, 25, 0.34);
  --glass-border: rgba(255, 205, 218, 0.20);
  --glass-border-soft: rgba(255, 205, 218, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --glass-shadow: rgba(0, 0, 0, 0.48);

  --ink: #fff7fb;
  --label: #ffe4ed;
  --muted: #d8bcc8;
  --line: rgba(255, 205, 218, 0.14);
  --line-strong: rgba(251, 113, 133, 0.26);
  --header-bg: rgba(28, 12, 20, 0.30);
  --panel: rgba(28, 12, 20, 0.28);
  --panel-soft: rgba(40, 15, 28, 0.30);
  --control-bg: rgba(35, 14, 25, 0.36);
  --control-hover: rgba(62, 24, 42, 0.48);
  --button-soft: rgba(40, 15, 28, 0.38);
  --button-soft-hover: rgba(62, 24, 42, 0.50);
  --button-soft-border: rgba(251, 113, 133, 0.30);
  --accent: #f43f5e;
  --accent-dark: #ffe4ed;
  --accent-soft: rgba(76, 23, 38, 0.46);
  --success: #2dd4bf;
  --success-soft: rgba(20, 83, 79, 0.42);
  --danger: #fb7185;
  --danger-soft: rgba(76, 23, 38, 0.44);
  --empty: #efd4de;
  --focus-ring: rgba(251, 113, 133, 0.28);
  --theme-toggle-bg: rgba(35, 14, 25, 0.78);

  --pts-card-edge: rgba(251, 113, 133, 0.22);
  --pts-card-edge-hover: rgba(251, 113, 133, 0.40);
  --pts-card-edge-glow: rgba(251, 113, 133, 0.22);
  --pts-card-inner-highlight: rgba(255, 228, 235, 0.12);
  --pts-card-inner-lowlight: rgba(0, 0, 0, 0.22);
  --pts-control-edge: rgba(255, 205, 218, 0.18);
  --pts-control-edge-hover: rgba(251, 113, 133, 0.34);
  --pts-control-top: rgba(255, 228, 235, 0.08);
  --pts-control-bottom: rgba(8, 3, 7, 0.26);
  --pts-control-gloss: rgba(255, 228, 235, 0.09);
  --pts-control-glow: rgba(251, 113, 133, 0.12);
  --pts-control-shadow: rgba(0, 0, 0, 0.36);
  --pts-ui-toggle-off: rgba(62, 24, 42, 0.56);
  --pts-ui-toggle-on-a: rgba(225, 29, 72, 0.94);
  --pts-ui-toggle-on-b: rgba(34, 211, 238, 0.72);

  --pts-button-edge: rgba(255, 205, 218, 0.18);
  --pts-button-edge-hover: rgba(251, 113, 133, 0.36);
  --pts-button-top: rgba(255, 228, 235, 0.08);
  --pts-button-bottom: rgba(8, 3, 7, 0.24);
  --pts-button-text: #ffe4ed;
  --pts-button-shadow: rgba(0, 0, 0, 0.36);
  --pts-button-gloss: rgba(255, 228, 235, 0.09);
  --pts-button-disabled-opacity: 0.68;

  --pts-theme-primary: #e11d48;
  --pts-theme-primary-hover: #f43f5e;
  --pts-theme-primary-active: #be123c;
  --pts-theme-primary-text: #fff7fb;
  --pts-theme-primary-border: rgba(251, 113, 133, 0.42);
  --pts-theme-primary-shadow: rgba(225, 29, 72, 0.28);
  --pts-theme-border: rgba(255, 205, 218, 0.20);
  --pts-theme-border-hover: rgba(251, 113, 133, 0.48);
  --pts-theme-ring: rgba(251, 113, 133, 0.30);
  --pts-theme-ring-strong: rgba(251, 113, 133, 0.42);
  --pts-theme-surface: rgba(40, 15, 28, 0.80);
  --pts-theme-surface-hover: rgba(62, 24, 42, 0.92);
  --pts-theme-surface-active: rgba(28, 12, 20, 0.90);
  --pts-theme-disabled-bg: rgba(62, 24, 42, 0.58);
  --pts-theme-disabled-fg: rgba(255, 205, 218, 0.58);
  --pts-theme-disabled-border: rgba(255, 205, 218, 0.13);
  --pts-theme-disabled-shadow: rgba(0, 0, 0, 0.30);
  --pts-theme-success: #2dd4bf;
  --pts-theme-success-bg: rgba(20, 184, 166, 0.16);
  --pts-theme-success-border: rgba(45, 212, 191, 0.30);
  --pts-theme-danger: #fb7185;
  --pts-theme-danger-bg: rgba(251, 113, 133, 0.14);
  --pts-theme-danger-border: rgba(251, 113, 133, 0.30);

  --pts-polish-blue: var(--pts-theme-primary);
  --pts-polish-blue-soft: rgba(251, 113, 133, 0.15);
  --pts-polish-blue-ring: var(--pts-theme-ring);
  --pts-polish-emerald: var(--pts-theme-success);
  --pts-polish-emerald-soft: var(--pts-theme-success-bg);
  --pts-polish-emerald-ring: rgba(45, 212, 191, 0.26);
  --pts-polish-rose: var(--pts-theme-danger);
  --pts-polish-rose-soft: var(--pts-theme-danger-bg);
  --pts-polish-surface: var(--pts-theme-surface);
  --pts-polish-surface-hover: var(--pts-theme-surface-hover);
  --pts-polish-surface-active: var(--pts-theme-surface-active);
  --pts-polish-edge: var(--pts-theme-border);
  --pts-polish-edge-hover: var(--pts-theme-border-hover);
  --pts-polish-shadow: rgba(0, 0, 0, 0.34);
  --pts-polish-shadow-strong: rgba(0, 0, 0, 0.46);
}

html[data-theme="aurora"] body .brand-photo {
  color: #05231f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
}

html[data-theme="aurora"] body .brand-tools {
  background: linear-gradient(120deg, #0f766e 0%, #14b8a6 48%, #0891b2 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

html[data-theme="nocturne"] body .brand-photo {
  color: #fff7fb;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.52);
}

html[data-theme="nocturne"] body .brand-tools {
  background: linear-gradient(120deg, #fb7185 0%, #e879f9 44%, #67e8f9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

html[data-theme="aurora"] body .empty-preview {
  color: rgba(5, 35, 31, 0.78) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

html[data-theme="nocturne"] body .empty-preview {
  color: rgba(255, 228, 235, 0.84) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.60) !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-choice--aurora .pts-theme-swatch {
  background: linear-gradient(135deg, #d8fff4 0%, #2dd4bf 48%, #0f766e 100%) !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-choice--nocturne .pts-theme-swatch {
  background: linear-gradient(135deg, #16060d 0%, #e11d48 52%, #67e8f9 100%) !important;
}

/* realtime-tool-load-v2-final-20260525:
   Final order-safe override for compact percent load chips. */
html[data-theme] body .tool-home .tool-card-note--speed {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html[data-theme] body .tool-home .tool-load {
  --tool-load-percent: 0%;
  --tool-load-color: #4b645d;
  --tool-load-bg: rgba(238, 244, 241, 0.70);
  --tool-load-border: rgba(74, 100, 93, 0.22);
  --tool-load-text: #243a35;
  --tool-load-meter: rgba(75, 100, 93, 0.42);
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  min-width: 70px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border: 1px solid var(--tool-load-border) !important;
  border-radius: 8px !important;
  background: var(--tool-load-bg) !important;
  color: var(--tool-load-text) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

html[data-theme] body .tool-home .tool-load::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4px;
  bottom: 1px;
  width: min(var(--tool-load-percent), calc(100% - 8px));
  height: 1px;
  border-radius: 999px;
  background: var(--tool-load-meter);
  opacity: 0.62;
  transition: width 220ms ease, background-color 180ms ease;
}

html[data-theme] body .tool-home .tool-load [data-tool-load-text] {
  position: relative;
  z-index: 1;
}

html[data-theme] body .tool-home .tool-load .tool-speed-dot {
  position: relative;
  z-index: 1;
  width: 6px !important;
  height: 6px !important;
  background: var(--tool-load-color) !important;
  box-shadow: none !important;
}

html[data-theme] body .tool-home .tool-load.is-load-ready,
html[data-theme] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #3c8069;
  --tool-load-bg: rgba(232, 243, 238, 0.72);
  --tool-load-border: rgba(60, 128, 105, 0.24);
  --tool-load-text: #265947;
  --tool-load-meter: rgba(60, 128, 105, 0.32);
}

html[data-theme] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #3d6f9f;
  --tool-load-bg: rgba(231, 238, 247, 0.74);
  --tool-load-border: rgba(61, 111, 159, 0.26);
  --tool-load-text: #294d70;
  --tool-load-meter: rgba(61, 111, 159, 0.46);
}

html[data-theme] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #9b6a22;
  --tool-load-bg: rgba(247, 239, 223, 0.76);
  --tool-load-border: rgba(155, 106, 34, 0.28);
  --tool-load-text: #654416;
  --tool-load-meter: rgba(155, 106, 34, 0.48);
}

html[data-theme] body .tool-home .tool-load.is-load-unknown {
  --tool-load-color: #6d7480;
  --tool-load-bg: rgba(235, 239, 244, 0.70);
  --tool-load-border: rgba(109, 116, 128, 0.22);
  --tool-load-text: #3e4652;
  --tool-load-meter: rgba(109, 116, 128, 0.30);
}

[data-theme="dark"] body .tool-home .tool-load.is-load-ready,
[data-theme="dark"] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #7cc6a7;
  --tool-load-bg: rgba(34, 74, 62, 0.32);
  --tool-load-border: rgba(124, 198, 167, 0.24);
  --tool-load-text: #d3f0e4;
  --tool-load-meter: rgba(124, 198, 167, 0.42);
  --tool-load-fill: rgba(124, 198, 167, 0.12);
}

[data-theme="dark"] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #8fb4ea;
  --tool-load-bg: rgba(42, 67, 105, 0.34);
  --tool-load-border: rgba(143, 180, 234, 0.24);
  --tool-load-text: #d9e7fb;
  --tool-load-meter: rgba(143, 180, 234, 0.48);
  --tool-load-fill: rgba(143, 180, 234, 0.16);
}

[data-theme="dark"] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #d2a85e;
  --tool-load-bg: rgba(91, 68, 31, 0.36);
  --tool-load-border: rgba(210, 168, 94, 0.26);
  --tool-load-text: #f1ddba;
  --tool-load-meter: rgba(210, 168, 94, 0.50);
  --tool-load-fill: rgba(210, 168, 94, 0.18);
}

[data-theme="aurora"] body .tool-home .tool-load.is-load-ready,
[data-theme="aurora"] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #4b8978;
  --tool-load-bg: rgba(226, 240, 235, 0.76);
  --tool-load-border: rgba(75, 137, 120, 0.25);
  --tool-load-text: #285a50;
  --tool-load-meter: rgba(75, 137, 120, 0.42);
  --tool-load-fill: rgba(75, 137, 120, 0.11);
}

[data-theme="aurora"] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #347d76;
  --tool-load-bg: rgba(220, 238, 235, 0.78);
  --tool-load-border: rgba(52, 125, 118, 0.27);
  --tool-load-text: #215850;
  --tool-load-meter: rgba(52, 125, 118, 0.50);
  --tool-load-fill: rgba(52, 125, 118, 0.16);
}

[data-theme="aurora"] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #967037;
  --tool-load-bg: rgba(243, 235, 220, 0.78);
  --tool-load-border: rgba(150, 112, 55, 0.28);
  --tool-load-text: #684b22;
  --tool-load-meter: rgba(150, 112, 55, 0.50);
  --tool-load-fill: rgba(150, 112, 55, 0.17);
}

[data-theme="nocturne"] body .tool-home .tool-load.is-load-ready,
[data-theme="nocturne"] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #79d7df;
  --tool-load-bg: rgba(22, 60, 66, 0.34);
  --tool-load-border: rgba(121, 215, 223, 0.24);
  --tool-load-text: #d4f5f7;
  --tool-load-meter: rgba(121, 215, 223, 0.44);
  --tool-load-fill: rgba(121, 215, 223, 0.13);
}

[data-theme="nocturne"] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #f08aa0;
  --tool-load-bg: rgba(82, 28, 43, 0.38);
  --tool-load-border: rgba(240, 138, 160, 0.26);
  --tool-load-text: #ffdbe4;
  --tool-load-meter: rgba(240, 138, 160, 0.52);
  --tool-load-fill: rgba(240, 138, 160, 0.18);
}

[data-theme="nocturne"] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #e7b86b;
  --tool-load-bg: rgba(91, 61, 29, 0.38);
  --tool-load-border: rgba(231, 184, 107, 0.28);
  --tool-load-text: #ffe5b6;
  --tool-load-meter: rgba(231, 184, 107, 0.52);
  --tool-load-fill: rgba(231, 184, 107, 0.18);
}

@media (max-width: 720px) {
  html[data-theme] body .tool-home .tool-load {
    min-width: 64px !important;
    min-height: 21px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }
}

/* cookie-overlay-layout-final-20260525:
   Must be last because older theme blocks redefine cookie card layout. */
html[data-theme] body .cookie-consent-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
  padding: 20px !important;
}

html[data-theme] body .cookie-consent-copy {
  min-width: 0 !important;
  max-width: none !important;
}

html[data-theme] body .cookie-consent-copy h2 {
  margin: 0 0 8px !important;
}

html[data-theme] body .cookie-consent-copy p {
  max-width: 58ch !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

html[data-theme] body .cookie-consent-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html[data-theme] body .cookie-consent-actions .cookie-button {
  min-width: 0 !important;
  min-height: 44px !important;
  white-space: normal !important;
}

@media (max-width: 640px) {
  html[data-theme] body .cookie-consent-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* nocturne-preview-checker-v1-20260526:
   Red theme previews need a dark checkerboard, not a white transparency grid. */
[data-theme="nocturne"] body .image-frame,
[data-theme="nocturne"] body .canvas-frame,
[data-theme="nocturne"] body .square-frame {
  background:
    linear-gradient(45deg, rgba(255, 228, 235, 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 228, 235, 0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 228, 235, 0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 228, 235, 0.08) 75%),
    rgba(16, 5, 12, 0.88) !important;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0 !important;
  background-size: 20px 20px !important;
  border-color: rgba(251, 113, 133, 0.20) !important;
}

/* button-overlay-qa-export-scroll-safe-20260526:
   Desktop export sidebars can be taller than the viewport after a file is
   selected. Keep user-scrolled buttons clear of the fixed privacy footer
   without compressing the controls or changing background/crop/blur flow. */
@media (min-width: 1101px) and (min-height: 720px) {
  html[data-theme] body #metadataWorkspace.editor-workspace > .editor-panel,
  html[data-theme] body #compressWorkspace.editor-workspace > .editor-panel,
  html[data-theme] body #formatWorkspace.editor-workspace > .editor-panel {
    scroll-padding-bottom: calc(var(--pts-privacy-space, 76px) + 18px) !important;
  }

  html[data-theme] body #metadataWorkspace :is(button, a.secondary-button, label[for], .themed-select-button),
  html[data-theme] body #compressWorkspace :is(button, a.secondary-button, label[for], .themed-select-button),
  html[data-theme] body #formatWorkspace :is(button, a.secondary-button, label[for], .themed-select-button) {
    scroll-margin-bottom: calc(var(--pts-privacy-space, 76px) + 18px) !important;
  }
}

/* existing-debug-overlap-fix-v1-20260526:
   Keep built-in debug targets inside their visible layout boxes on the normal
   theme without changing API flow or the soft-shadow settings expansion. */
html[data-theme] body #metadataWorkspace #metadataDetails.metadata-details:not([open]) > #metadataDetailsJson {
  display: none !important;
}

@media (min-width: 1281px) and (min-height: 720px) {
  html[data-theme] body #compressWorkspace .preview-grid,
  html[data-theme] body #formatWorkspace .preview-grid {
    align-items: start !important;
    min-height: 0 !important;
  }

  html[data-theme] body #compressWorkspace .image-frame,
  html[data-theme] body #formatWorkspace .image-frame {
    flex: 0 1 auto !important;
    height: clamp(320px, calc(100dvh - 540px), 560px) !important;
    min-height: 320px !important;
    max-height: clamp(320px, calc(100dvh - 540px), 560px) !important;
  }
}

@media (max-width: 1100px) {
  html[data-theme] body #metadataWorkspace #metadataDetails.metadata-details[open] {
    height: auto !important;
    overflow: visible !important;
  }

  html[data-theme] body #metadataWorkspace #metadataDetails.metadata-details[open] > #metadataDetailsJson {
    display: block !important;
    max-height: min(30dvh, 220px) !important;
    overflow: auto !important;
  }
}

/* server-load-user-queue-cookie-v1-20260525:
   Final overlay styles for private queue waiting and blocking cookie consent. */
html[data-theme] body .queue-wait-modal {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.34), transparent 42%),
    rgba(18, 27, 31, 0.38);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
}

html[data-theme] body .queue-wait-modal[hidden] {
  display: none !important;
}

html[data-theme] body .queue-wait-card {
  width: min(460px, calc(100vw - 32px));
  border: 1px solid var(--pts-theme-border, rgba(74, 100, 93, 0.25));
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(242, 248, 246, 0.90)),
    var(--glass-bg-strong, rgba(255, 255, 255, 0.84));
  color: var(--text, #1f2f2b);
  box-shadow:
    0 24px 70px rgba(23, 41, 45, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  padding: 18px;
}

html[data-theme] body .queue-wait-head {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
}

html[data-theme] body .queue-wait-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--pts-theme-border, rgba(74, 100, 93, 0.24));
  background:
    linear-gradient(135deg, var(--pts-theme-primary, #466a61), rgba(255, 255, 255, 0.36));
  box-shadow:
    0 10px 24px var(--pts-theme-ring, rgba(70, 106, 97, 0.18)),
    inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

html[data-theme] body .queue-wait-icon::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  margin: 10px auto 0;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-top-color: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  animation: pts-queue-wait-spin 1.1s linear infinite;
}

@keyframes pts-queue-wait-spin {
  to {
    transform: rotate(360deg);
  }
}

html[data-theme] body .queue-wait-card h2 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: 0;
}

html[data-theme] body .queue-wait-card p {
  margin: 0;
  color: var(--muted, rgba(54, 69, 64, 0.72));
  font-size: 13px;
  line-height: 1.45;
}

html[data-theme] body .queue-wait-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 14px;
}

html[data-theme] body .queue-wait-grid > div {
  min-width: 0;
  border: 1px solid var(--pts-theme-border, rgba(74, 100, 93, 0.16));
  border-radius: 8px;
  background: var(--pts-theme-surface, rgba(244, 248, 247, 0.76));
  padding: 10px 8px;
  text-align: center;
}

html[data-theme] body .queue-wait-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted, rgba(54, 69, 64, 0.66));
  font-size: 11px;
  font-weight: 700;
}

html[data-theme] body .queue-wait-grid strong {
  display: block;
  color: var(--pts-theme-primary-active, #273f39);
  font-size: 19px;
  line-height: 1.1;
}

html[data-theme] body .queue-wait-progress {
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--pts-theme-border, rgba(74, 100, 93, 0.15));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
}

html[data-theme] body .queue-wait-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--pts-theme-primary, #466a61);
  transition: width 180ms ease;
}

html[data-theme] body #queueWaitSummary {
  margin-top: 12px;
}

html[data-theme] body #queueWaitHide {
  width: 100%;
  margin-top: 16px;
}

body.has-cookie-modal {
  overflow: hidden;
}

html[data-theme] body.has-cookie-modal > :not(#cookieConsentBanner):not(#cookiePreferencesPanel) {
  filter: blur(3px) saturate(0.92);
  pointer-events: none !important;
  user-select: none;
}

html[data-theme] body .cookie-consent:not([hidden]),
html[data-theme] body .cookie-preferences:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.28), transparent 44%),
    rgba(18, 27, 31, 0.42) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.10);
  backdrop-filter: blur(18px) saturate(1.10);
  pointer-events: auto !important;
}

html[data-theme] body .cookie-consent:not([hidden]) {
  z-index: 10000 !important;
}

html[data-theme] body .cookie-preferences:not([hidden]) {
  z-index: 10020 !important;
}

html[data-theme] body .cookie-consent-card,
html[data-theme] body .cookie-preferences-card {
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: min(560px, calc(100vw - 32px)) !important;
  border-radius: 8px !important;
}

[data-theme="dark"] body .queue-wait-modal,
[data-theme="dark"] body .cookie-consent:not([hidden]),
[data-theme="dark"] body .cookie-preferences:not([hidden]) {
  background:
    radial-gradient(circle at 50% 42%, rgba(126, 164, 210, 0.16), transparent 44%),
    rgba(4, 9, 16, 0.58) !important;
}

[data-theme="dark"] body .queue-wait-card {
  background:
    linear-gradient(180deg, rgba(25, 35, 51, 0.90), rgba(15, 22, 34, 0.94)),
    rgba(15, 22, 34, 0.92);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="aurora"] body .queue-wait-modal,
[data-theme="aurora"] body .cookie-consent:not([hidden]),
[data-theme="aurora"] body .cookie-preferences:not([hidden]) {
  background:
    radial-gradient(circle at 50% 42%, rgba(224, 239, 233, 0.42), transparent 44%),
    rgba(19, 54, 49, 0.34) !important;
}

[data-theme="nocturne"] body .queue-wait-modal,
[data-theme="nocturne"] body .cookie-consent:not([hidden]),
[data-theme="nocturne"] body .cookie-preferences:not([hidden]) {
  background:
    radial-gradient(circle at 50% 42%, rgba(251, 113, 133, 0.18), transparent 44%),
    rgba(9, 2, 7, 0.62) !important;
}

[data-theme="nocturne"] body .queue-wait-card {
  border-color: rgba(251, 113, 133, 0.24);
  background:
    linear-gradient(180deg, rgba(50, 17, 32, 0.88), rgba(20, 7, 14, 0.94)),
    rgba(20, 7, 14, 0.92);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 205, 218, 0.08);
}

[data-theme="nocturne"] body .queue-wait-grid > div {
  border-color: rgba(251, 113, 133, 0.18);
  background: rgba(35, 10, 22, 0.70);
}

@media (max-width: 540px) {
  html[data-theme] body .queue-wait-card,
  html[data-theme] body .cookie-consent-card,
  html[data-theme] body .cookie-preferences-card {
    width: calc(100vw - 28px) !important;
  }

  html[data-theme] body .queue-wait-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* realtime-tool-load-v2-20260525:
   SaaS-style read-only status chip with a tiny utilization meter.
   It intentionally avoids button-like gloss, lift, and heavy shadows. */
html[data-theme] body .tool-home .tool-card-note--speed {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html[data-theme] body .tool-home .tool-load {
  --tool-load-percent: 0%;
  --tool-load-color: #4b645d;
  --tool-load-bg: rgba(238, 244, 241, 0.70);
  --tool-load-border: rgba(74, 100, 93, 0.22);
  --tool-load-text: #243a35;
  --tool-load-meter: rgba(75, 100, 93, 0.42);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--tool-load-border) !important;
  border-radius: 8px !important;
  background: var(--tool-load-bg) !important;
  color: var(--tool-load-text) !important;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: none !important;
}

html[data-theme] body .tool-home .tool-load::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4px;
  bottom: 3px;
  width: min(var(--tool-load-percent), calc(100% - 8px));
  height: 2px;
  border-radius: 999px;
  background: var(--tool-load-meter);
  opacity: 0.88;
  transition: width 220ms ease, background-color 180ms ease;
}

html[data-theme] body .tool-home .tool-load .tool-speed-dot {
  width: 6px !important;
  height: 6px !important;
  background: var(--tool-load-color) !important;
  box-shadow: none !important;
}

html[data-theme] body .tool-home .tool-load.is-load-ready,
html[data-theme] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #3c8069;
  --tool-load-bg: rgba(232, 243, 238, 0.72);
  --tool-load-border: rgba(60, 128, 105, 0.24);
  --tool-load-text: #265947;
  --tool-load-meter: rgba(60, 128, 105, 0.32);
}

html[data-theme] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #3d6f9f;
  --tool-load-bg: rgba(231, 238, 247, 0.74);
  --tool-load-border: rgba(61, 111, 159, 0.26);
  --tool-load-text: #294d70;
  --tool-load-meter: rgba(61, 111, 159, 0.46);
}

html[data-theme] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #9b6a22;
  --tool-load-bg: rgba(247, 239, 223, 0.76);
  --tool-load-border: rgba(155, 106, 34, 0.28);
  --tool-load-text: #654416;
  --tool-load-meter: rgba(155, 106, 34, 0.48);
}

html[data-theme] body .tool-home .tool-load.is-load-unknown {
  --tool-load-color: #6d7480;
  --tool-load-bg: rgba(235, 239, 244, 0.70);
  --tool-load-border: rgba(109, 116, 128, 0.22);
  --tool-load-text: #3e4652;
  --tool-load-meter: rgba(109, 116, 128, 0.30);
}

[data-theme="dark"] body .tool-home .tool-load {
  --tool-load-bg: rgba(23, 31, 45, 0.58);
  --tool-load-border: rgba(174, 190, 214, 0.18);
  --tool-load-text: #d8e2f0;
  --tool-load-meter: rgba(174, 190, 214, 0.34);
}

[data-theme="dark"] body .tool-home .tool-load.is-load-ready,
[data-theme="dark"] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #7cc6a7;
  --tool-load-bg: rgba(34, 74, 62, 0.32);
  --tool-load-border: rgba(124, 198, 167, 0.24);
  --tool-load-text: #d3f0e4;
  --tool-load-meter: rgba(124, 198, 167, 0.42);
}

[data-theme="dark"] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #8fb4ea;
  --tool-load-bg: rgba(42, 67, 105, 0.34);
  --tool-load-border: rgba(143, 180, 234, 0.24);
  --tool-load-text: #d9e7fb;
  --tool-load-meter: rgba(143, 180, 234, 0.48);
}

[data-theme="dark"] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #d2a85e;
  --tool-load-bg: rgba(91, 68, 31, 0.36);
  --tool-load-border: rgba(210, 168, 94, 0.26);
  --tool-load-text: #f1ddba;
  --tool-load-meter: rgba(210, 168, 94, 0.50);
}

[data-theme="aurora"] body .tool-home .tool-load {
  --tool-load-bg: rgba(237, 244, 241, 0.72);
  --tool-load-border: rgba(67, 118, 106, 0.21);
  --tool-load-text: #254a42;
  --tool-load-meter: rgba(67, 118, 106, 0.36);
}

[data-theme="aurora"] body .tool-home .tool-load.is-load-ready,
[data-theme="aurora"] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #4b8978;
  --tool-load-bg: rgba(226, 240, 235, 0.76);
  --tool-load-border: rgba(75, 137, 120, 0.25);
  --tool-load-text: #285a50;
  --tool-load-meter: rgba(75, 137, 120, 0.42);
}

[data-theme="aurora"] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #347d76;
  --tool-load-bg: rgba(220, 238, 235, 0.78);
  --tool-load-border: rgba(52, 125, 118, 0.27);
  --tool-load-text: #215850;
  --tool-load-meter: rgba(52, 125, 118, 0.50);
}

[data-theme="aurora"] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #967037;
  --tool-load-bg: rgba(243, 235, 220, 0.78);
  --tool-load-border: rgba(150, 112, 55, 0.28);
  --tool-load-text: #684b22;
  --tool-load-meter: rgba(150, 112, 55, 0.50);
}

[data-theme="nocturne"] body .tool-home .tool-load {
  --tool-load-bg: rgba(31, 12, 22, 0.58);
  --tool-load-border: rgba(255, 205, 218, 0.16);
  --tool-load-text: #f4dbe3;
  --tool-load-meter: rgba(255, 205, 218, 0.32);
}

[data-theme="nocturne"] body .tool-home .tool-load.is-load-ready,
[data-theme="nocturne"] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #79d7df;
  --tool-load-bg: rgba(22, 60, 66, 0.34);
  --tool-load-border: rgba(121, 215, 223, 0.24);
  --tool-load-text: #d4f5f7;
  --tool-load-meter: rgba(121, 215, 223, 0.44);
}

[data-theme="nocturne"] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #f08aa0;
  --tool-load-bg: rgba(82, 28, 43, 0.38);
  --tool-load-border: rgba(240, 138, 160, 0.26);
  --tool-load-text: #ffdbe4;
  --tool-load-meter: rgba(240, 138, 160, 0.52);
}

[data-theme="nocturne"] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #e7b86b;
  --tool-load-bg: rgba(91, 61, 29, 0.38);
  --tool-load-border: rgba(231, 184, 107, 0.28);
  --tool-load-text: #ffe5b6;
  --tool-load-meter: rgba(231, 184, 107, 0.52);
}

@media (max-width: 720px) {
  html[data-theme] body .tool-home .tool-load {
    min-width: 64px;
    min-height: 21px;
    padding: 0 7px;
    font-size: 11px;
  }
}

/* realtime-tool-load-v1-20260525:
   Replace static speed chips with live server load chips. */
html[data-theme] body .tool-home .tool-load {
  --tool-load-color: #527068;
  --tool-load-bg: rgba(244, 248, 247, 0.74);
  --tool-load-border: rgba(82, 112, 104, 0.26);
  --tool-load-text: #243b36;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--tool-load-border);
  border-radius: 999px;
  background: var(--tool-load-bg);
  color: var(--tool-load-text);
  font-weight: 800;
  letter-spacing: 0;
  box-shadow:
    0 8px 18px rgba(25, 42, 38, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

html[data-theme] body .tool-home .tool-load .tool-speed-dot {
  background: var(--tool-load-color);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.22),
    0 0 12px var(--tool-load-color);
}

html[data-theme] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #2f8f70;
  --tool-load-bg: rgba(226, 242, 236, 0.76);
  --tool-load-border: rgba(47, 143, 112, 0.30);
  --tool-load-text: #1f5f4b;
}

html[data-theme] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #3d6fb6;
  --tool-load-bg: rgba(226, 235, 249, 0.78);
  --tool-load-border: rgba(61, 111, 182, 0.30);
  --tool-load-text: #284a78;
}

html[data-theme] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #a36b19;
  --tool-load-bg: rgba(248, 238, 218, 0.80);
  --tool-load-border: rgba(163, 107, 25, 0.32);
  --tool-load-text: #67420f;
}

html[data-theme] body .tool-home .tool-load.is-load-busy {
  --tool-load-color: #a75535;
  --tool-load-bg: rgba(248, 230, 222, 0.80);
  --tool-load-border: rgba(167, 85, 53, 0.32);
  --tool-load-text: #6d3925;
}

html[data-theme] body .tool-home .tool-load.is-load-full {
  --tool-load-color: #b64242;
  --tool-load-bg: rgba(249, 225, 225, 0.82);
  --tool-load-border: rgba(182, 66, 66, 0.34);
  --tool-load-text: #743030;
}

html[data-theme] body .tool-home .tool-load.is-load-unknown {
  --tool-load-color: #6d7480;
  --tool-load-bg: rgba(235, 239, 244, 0.76);
  --tool-load-border: rgba(109, 116, 128, 0.26);
  --tool-load-text: #3e4652;
}

[data-theme="dark"] body .tool-home .tool-load,
[data-theme="nocturne"] body .tool-home .tool-load {
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] body .tool-home .tool-load.is-load-idle,
[data-theme="nocturne"] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #62caa7;
  --tool-load-bg: rgba(37, 88, 75, 0.30);
  --tool-load-border: rgba(98, 202, 167, 0.28);
  --tool-load-text: #c9f3e5;
}

[data-theme="dark"] body .tool-home .tool-load.is-load-active,
[data-theme="nocturne"] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #8fb6ff;
  --tool-load-bg: rgba(51, 77, 128, 0.30);
  --tool-load-border: rgba(143, 182, 255, 0.28);
  --tool-load-text: #d7e5ff;
}

[data-theme="dark"] body .tool-home .tool-load.is-load-queued,
[data-theme="nocturne"] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #d8ac55;
  --tool-load-bg: rgba(109, 78, 28, 0.32);
  --tool-load-border: rgba(216, 172, 85, 0.30);
  --tool-load-text: #f4dfb4;
}

[data-theme="dark"] body .tool-home .tool-load.is-load-busy,
[data-theme="nocturne"] body .tool-home .tool-load.is-load-busy {
  --tool-load-color: #df8e6b;
  --tool-load-bg: rgba(123, 65, 43, 0.34);
  --tool-load-border: rgba(223, 142, 107, 0.30);
  --tool-load-text: #f7d5c6;
}

[data-theme="dark"] body .tool-home .tool-load.is-load-full,
[data-theme="nocturne"] body .tool-home .tool-load.is-load-full {
  --tool-load-color: #ef8b8b;
  --tool-load-bg: rgba(122, 45, 51, 0.36);
  --tool-load-border: rgba(239, 139, 139, 0.32);
  --tool-load-text: #ffd7d7;
}

[data-theme="dark"] body .tool-home .tool-load.is-load-unknown,
[data-theme="nocturne"] body .tool-home .tool-load.is-load-unknown {
  --tool-load-color: #98a2b3;
  --tool-load-bg: rgba(67, 76, 93, 0.32);
  --tool-load-border: rgba(152, 162, 179, 0.24);
  --tool-load-text: #d7dce5;
}

@media (max-width: 720px) {
  html[data-theme] body .tool-home .tool-load {
    min-width: 68px;
    min-height: 22px;
    padding: 2px 7px;
    font-size: 11px;
  }
}

/* beta-theme-retune-v3-20260525:
   Calmer sage Aurora, cleaner wine Nocturne, and distinct beta theme-toggle icons. */
[data-theme="aurora"] {
  color-scheme: light;

  --shader-opacity: 0.56;
  --viscosity-page-bg:
    radial-gradient(circle at 16% -8%, rgba(82, 143, 126, 0.26), transparent 34%),
    radial-gradient(circle at 86% 4%, rgba(118, 172, 164, 0.18), transparent 38%),
    radial-gradient(circle at 50% 105%, rgba(64, 124, 106, 0.14), transparent 44%),
    linear-gradient(180deg, #e6f0e9 0%, #d0e4dc 46%, #bfd8d3 100%);
  --shader-overlay:
    linear-gradient(180deg, rgba(248, 251, 247, 0.03), rgba(40, 92, 82, 0.08));

  --glass-bg: rgba(231, 242, 236, 0.30);
  --glass-bg-strong: rgba(218, 235, 227, 0.40);
  --glass-control-bg: rgba(235, 244, 239, 0.42);
  --glass-border: rgba(67, 118, 106, 0.26);
  --glass-border-soft: rgba(67, 118, 106, 0.18);
  --glass-highlight: rgba(255, 255, 255, 0.52);
  --glass-shadow: rgba(40, 84, 75, 0.16);

  --ink: #102822;
  --label: #1b3d34;
  --muted: #4e665e;
  --line: rgba(67, 118, 106, 0.18);
  --line-strong: rgba(42, 124, 111, 0.28);
  --header-bg: rgba(221, 238, 230, 0.40);
  --panel: rgba(231, 242, 236, 0.30);
  --panel-soft: rgba(235, 244, 239, 0.32);
  --control-bg: rgba(235, 244, 239, 0.42);
  --control-hover: rgba(248, 252, 249, 0.56);
  --button-soft: rgba(218, 235, 227, 0.46);
  --button-soft-hover: rgba(248, 252, 249, 0.58);
  --button-soft-border: rgba(42, 124, 111, 0.32);
  --accent: #2a7c6f;
  --accent-dark: #1f5f55;
  --accent-soft: rgba(191, 216, 211, 0.48);
  --success: #257a5e;
  --success-soft: rgba(183, 219, 203, 0.44);
  --danger: #be123c;
  --danger-soft: rgba(255, 228, 230, 0.42);
  --empty: #3e5d55;
  --focus-ring: rgba(94, 176, 157, 0.24);
  --theme-toggle-bg: rgba(223, 239, 231, 0.76);

  --pts-card-edge: rgba(42, 124, 111, 0.24);
  --pts-card-edge-hover: rgba(55, 146, 130, 0.40);
  --pts-card-edge-glow: rgba(94, 176, 157, 0.16);
  --pts-card-inner-highlight: rgba(255, 255, 255, 0.38);
  --pts-card-inner-lowlight: rgba(40, 84, 75, 0.08);
  --pts-control-edge: rgba(67, 118, 106, 0.22);
  --pts-control-edge-hover: rgba(55, 146, 130, 0.34);
  --pts-control-top: rgba(255, 255, 255, 0.26);
  --pts-control-bottom: rgba(191, 216, 211, 0.16);
  --pts-control-gloss: rgba(255, 255, 255, 0.21);
  --pts-control-glow: rgba(94, 176, 157, 0.13);
  --pts-control-shadow: rgba(40, 84, 75, 0.13);
  --pts-ui-toggle-off: rgba(210, 229, 220, 0.58);
  --pts-ui-toggle-on-a: rgba(42, 124, 111, 0.92);
  --pts-ui-toggle-on-b: rgba(94, 176, 157, 0.76);

  --pts-button-edge: rgba(67, 118, 106, 0.24);
  --pts-button-edge-hover: rgba(55, 146, 130, 0.36);
  --pts-button-top: rgba(255, 255, 255, 0.26);
  --pts-button-bottom: rgba(191, 216, 211, 0.15);
  --pts-button-text: #1f5f55;
  --pts-button-shadow: rgba(40, 84, 75, 0.13);
  --pts-button-gloss: rgba(255, 255, 255, 0.20);
  --pts-button-disabled-opacity: 0.70;

  --pts-theme-primary: #2a7c6f;
  --pts-theme-primary-hover: #318d7f;
  --pts-theme-primary-active: #1f5f55;
  --pts-theme-primary-text: #ffffff;
  --pts-theme-primary-border: rgba(42, 124, 111, 0.40);
  --pts-theme-primary-shadow: rgba(40, 84, 75, 0.20);
  --pts-theme-border: rgba(67, 118, 106, 0.25);
  --pts-theme-border-hover: rgba(55, 146, 130, 0.42);
  --pts-theme-ring: rgba(94, 176, 157, 0.24);
  --pts-theme-ring-strong: rgba(55, 146, 130, 0.36);
  --pts-theme-surface: rgba(231, 242, 236, 0.80);
  --pts-theme-surface-hover: rgba(248, 252, 249, 0.92);
  --pts-theme-surface-active: rgba(203, 226, 216, 0.78);
  --pts-theme-disabled-bg: rgba(200, 222, 211, 0.58);
  --pts-theme-disabled-fg: rgba(31, 95, 85, 0.60);
  --pts-theme-disabled-border: rgba(67, 118, 106, 0.16);
  --pts-theme-disabled-shadow: rgba(40, 84, 75, 0.08);
  --pts-theme-success: #257a5e;
  --pts-theme-success-bg: rgba(37, 122, 94, 0.15);
  --pts-theme-success-border: rgba(37, 122, 94, 0.28);
  --pts-theme-danger: #be123c;
  --pts-theme-danger-bg: rgba(225, 29, 72, 0.11);
  --pts-theme-danger-border: rgba(225, 29, 72, 0.26);

  --pts-polish-blue: var(--pts-theme-primary);
  --pts-polish-blue-soft: rgba(42, 124, 111, 0.13);
  --pts-polish-blue-ring: var(--pts-theme-ring);
  --pts-polish-emerald: var(--pts-theme-success);
  --pts-polish-emerald-soft: var(--pts-theme-success-bg);
  --pts-polish-emerald-ring: rgba(37, 122, 94, 0.20);
  --pts-polish-rose: var(--pts-theme-danger);
  --pts-polish-rose-soft: var(--pts-theme-danger-bg);
  --pts-polish-surface: var(--pts-theme-surface);
  --pts-polish-surface-hover: var(--pts-theme-surface-hover);
  --pts-polish-surface-active: var(--pts-theme-surface-active);
  --pts-polish-edge: var(--pts-theme-border);
  --pts-polish-edge-hover: var(--pts-theme-border-hover);
  --pts-polish-shadow: rgba(40, 84, 75, 0.11);
  --pts-polish-shadow-strong: rgba(40, 84, 75, 0.17);
}

[data-theme="nocturne"] {
  color-scheme: dark;

  --shader-opacity: 0.70;
  --shader-overlay:
    linear-gradient(180deg, rgba(8, 3, 7, 0.18), rgba(8, 3, 7, 0.54));

  --glass-bg: rgba(24, 8, 15, 0.34);
  --glass-bg-strong: rgba(33, 10, 21, 0.46);
  --glass-control-bg: rgba(34, 10, 21, 0.44);
  --glass-border: rgba(251, 113, 133, 0.22);
  --glass-border-soft: rgba(251, 113, 133, 0.15);
  --glass-highlight: rgba(255, 205, 218, 0.08);
  --glass-shadow: rgba(0, 0, 0, 0.54);

  --muted: #d0acba;
  --header-bg: rgba(22, 7, 14, 0.38);
  --panel: rgba(24, 8, 15, 0.34);
  --panel-soft: rgba(33, 10, 21, 0.36);
  --control-bg: rgba(34, 10, 21, 0.46);
  --control-hover: rgba(58, 18, 35, 0.54);
  --button-soft: rgba(33, 10, 21, 0.46);
  --button-soft-hover: rgba(58, 18, 35, 0.56);
  --theme-toggle-bg: rgba(24, 8, 15, 0.82);

  --pts-theme-surface: rgba(35, 10, 22, 0.84);
  --pts-theme-surface-hover: rgba(58, 18, 35, 0.92);
  --pts-theme-surface-active: rgba(24, 8, 15, 0.92);
  --pts-theme-disabled-bg: rgba(45, 18, 32, 0.62);
  --pts-theme-disabled-fg: rgba(236, 181, 196, 0.62);
  --pts-theme-disabled-border: rgba(251, 113, 133, 0.13);
  --pts-polish-surface: var(--pts-theme-surface);
  --pts-polish-surface-hover: var(--pts-theme-surface-hover);
  --pts-polish-surface-active: var(--pts-theme-surface-active);
}

html[data-theme="aurora"] body .brand-photo {
  color: #102822;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
}

html[data-theme="aurora"] body .brand-tools {
  background: linear-gradient(120deg, #1f5f55 0%, #2a7c6f 48%, #3f8f80 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

html[data-theme="aurora"] body .tool-icon img,
html[data-theme="aurora"] body .brand-logo,
html[data-theme="aurora"] body .brand-wordmark-img,
html[data-theme="aurora"] body .kofi-button img {
  filter:
    drop-shadow(0 8px 14px rgba(40, 84, 75, 0.10))
    drop-shadow(0 0 8px rgba(94, 176, 157, 0.07));
}

html[data-theme="nocturne"] body > .privacy-footer,
html[data-theme="nocturne"] body .cookie-consent-card,
html[data-theme="nocturne"] body .cookie-preferences-card {
  border-color: rgba(251, 113, 133, 0.24) !important;
  background:
    linear-gradient(135deg, rgba(50, 17, 32, 0.64), rgba(20, 7, 14, 0.76)),
    rgba(20, 7, 14, 0.72) !important;
  color: rgba(255, 228, 235, 0.78) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 205, 218, 0.08) !important;
}

html[data-theme="nocturne"] body > .privacy-footer strong,
html[data-theme="nocturne"] body .cookie-consent-card h2,
html[data-theme="nocturne"] body .cookie-preferences-card h2,
html[data-theme="nocturne"] body .cookie-category h3 {
  color: #fff7fb !important;
}

html[data-theme="nocturne"] body > .privacy-footer p,
html[data-theme="nocturne"] body .cookie-consent-card p,
html[data-theme="nocturne"] body .cookie-preferences-card p,
html[data-theme="nocturne"] body .cookie-category p {
  color: rgba(255, 228, 235, 0.72) !important;
}

html[data-theme="nocturne"] body > .privacy-footer > span {
  border-color: rgba(45, 212, 191, 0.30) !important;
  background: rgba(20, 184, 166, 0.20) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="nocturne"] body .cookie-category {
  border-color: rgba(251, 113, 133, 0.18) !important;
  background: rgba(35, 10, 22, 0.62) !important;
}

html[data-theme="nocturne"] body .cookie-button {
  border-color: rgba(251, 113, 133, 0.26) !important;
  background: rgba(35, 10, 22, 0.72) !important;
  color: #fff7fb !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 205, 218, 0.08) !important;
}

html[data-theme="aurora"] body .theme-icon,
html[data-theme="nocturne"] body .theme-icon {
  overflow: hidden !important;
}

html[data-theme="aurora"] body .theme-icon {
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.95) 0%, rgba(230, 240, 233, 0.88) 20%, transparent 22%),
    linear-gradient(135deg, #dcebe2 0%, #8abdab 44%, #2a7c6f 100%) !important;
  box-shadow:
    0 0 0 4px rgba(94, 176, 157, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.58),
    inset 0 -6px 12px rgba(31, 95, 85, 0.18) !important;
}

html[data-theme="aurora"] body .theme-icon::before {
  left: 6px !important;
  top: 3px !important;
  width: 9px !important;
  height: 16px !important;
  border-radius: 999px 999px 999px 3px !important;
  background: linear-gradient(135deg, #f7fbf6 0%, #6ba995 44%, #1f5f55 100%) !important;
  box-shadow: 7px 5px 0 -3px rgba(138, 189, 171, 0.95) !important;
  opacity: 1 !important;
  transform: rotate(-34deg) !important;
}

html[data-theme="aurora"] body .theme-icon::after {
  left: 5px !important;
  top: 13px !important;
  width: 14px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: rgba(31, 95, 85, 0.72) !important;
  box-shadow: none !important;
  opacity: 0.88 !important;
  transform: rotate(-31deg) !important;
}

html[data-theme="nocturne"] body .theme-icon {
  background:
    radial-gradient(circle at 72% 28%, rgba(103, 232, 249, 0.90) 0%, rgba(103, 232, 249, 0.90) 9%, transparent 11%),
    radial-gradient(circle at 42% 54%, #fb7185 0%, #e11d48 34%, #7f1d2d 64%, #220713 100%) !important;
  box-shadow:
    0 0 0 4px rgba(251, 113, 133, 0.16),
    inset 0 1px 1px rgba(255, 228, 235, 0.24),
    inset 0 -7px 14px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="nocturne"] body .theme-icon::before {
  left: 4px !important;
  top: 4px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffe4ed !important;
  box-shadow: 5px -1px 0 0 #5b1024 inset !important;
  opacity: 0.92 !important;
  transform: none !important;
}

html[data-theme="nocturne"] body .theme-icon::after {
  left: 15px !important;
  top: 5px !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 0 !important;
  background: #67e8f9 !important;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%) !important;
  box-shadow: 0 0 10px rgba(103, 232, 249, 0.52) !important;
  opacity: 1 !important;
  transform: none !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-choice--aurora .pts-theme-swatch {
  background: linear-gradient(135deg, #e6f0e9 0%, #8abdab 48%, #2a7c6f 100%) !important;
}

html[data-theme] body #ptsSettingsPanel .pts-theme-choice--nocturne .pts-theme-swatch {
  background: linear-gradient(135deg, #16060d 0%, #e11d48 52%, #67e8f9 100%) !important;
}

/* realtime-tool-load-v2-final-order-20260525:
   Must stay at the end because earlier compatibility blocks define older pill styles. */
html[data-theme] body .tool-home .tool-card-note--speed {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html[data-theme] body .tool-home .tool-load {
  --tool-load-percent: 0%;
  --tool-load-color: #4b645d;
  --tool-load-bg: rgba(238, 244, 241, 0.70);
  --tool-load-border: rgba(74, 100, 93, 0.22);
  --tool-load-text: #243a35;
  --tool-load-meter: rgba(75, 100, 93, 0.42);
  --tool-load-fill: rgba(75, 100, 93, 0.10);
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  min-width: 70px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border: 1px solid var(--tool-load-border) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, var(--tool-load-fill) 0 var(--tool-load-percent), transparent var(--tool-load-percent) 100%),
    var(--tool-load-bg) !important;
  color: var(--tool-load-text) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

html[data-theme] body .tool-home .tool-load::after {
  content: "";
  display: none !important;
}

html[data-theme] body .tool-home .tool-load [data-tool-load-text],
html[data-theme] body .tool-home .tool-load .tool-speed-dot {
  position: relative;
  z-index: 1;
}

html[data-theme] body .tool-home .tool-load .tool-speed-dot {
  width: 6px !important;
  height: 6px !important;
  background: var(--tool-load-color) !important;
  box-shadow: none !important;
}

html[data-theme] body .tool-home .tool-load.is-load-ready,
html[data-theme] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #3c8069;
  --tool-load-bg: rgba(232, 243, 238, 0.72);
  --tool-load-border: rgba(60, 128, 105, 0.24);
  --tool-load-text: #265947;
  --tool-load-meter: rgba(60, 128, 105, 0.32);
  --tool-load-fill: rgba(60, 128, 105, 0.10);
}

html[data-theme] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #3d6f9f;
  --tool-load-bg: rgba(231, 238, 247, 0.74);
  --tool-load-border: rgba(61, 111, 159, 0.26);
  --tool-load-text: #294d70;
  --tool-load-meter: rgba(61, 111, 159, 0.46);
  --tool-load-fill: rgba(61, 111, 159, 0.16);
}

html[data-theme] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #9b6a22;
  --tool-load-bg: rgba(247, 239, 223, 0.76);
  --tool-load-border: rgba(155, 106, 34, 0.28);
  --tool-load-text: #654416;
  --tool-load-meter: rgba(155, 106, 34, 0.48);
  --tool-load-fill: rgba(155, 106, 34, 0.18);
}

html[data-theme] body .tool-home .tool-load.is-load-unknown {
  --tool-load-color: #6d7480;
  --tool-load-bg: rgba(235, 239, 244, 0.70);
  --tool-load-border: rgba(109, 116, 128, 0.22);
  --tool-load-text: #3e4652;
  --tool-load-meter: rgba(109, 116, 128, 0.30);
  --tool-load-fill: rgba(109, 116, 128, 0.10);
}

[data-theme="dark"] body .tool-home .tool-load.is-load-ready,
[data-theme="dark"] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #7cc6a7;
  --tool-load-bg: rgba(34, 74, 62, 0.32);
  --tool-load-border: rgba(124, 198, 167, 0.24);
  --tool-load-text: #d3f0e4;
  --tool-load-meter: rgba(124, 198, 167, 0.42);
}

[data-theme="dark"] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #8fb4ea;
  --tool-load-bg: rgba(42, 67, 105, 0.34);
  --tool-load-border: rgba(143, 180, 234, 0.24);
  --tool-load-text: #d9e7fb;
  --tool-load-meter: rgba(143, 180, 234, 0.48);
}

[data-theme="dark"] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #d2a85e;
  --tool-load-bg: rgba(91, 68, 31, 0.36);
  --tool-load-border: rgba(210, 168, 94, 0.26);
  --tool-load-text: #f1ddba;
  --tool-load-meter: rgba(210, 168, 94, 0.50);
}

[data-theme="aurora"] body .tool-home .tool-load.is-load-ready,
[data-theme="aurora"] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #4b8978;
  --tool-load-bg: rgba(226, 240, 235, 0.76);
  --tool-load-border: rgba(75, 137, 120, 0.25);
  --tool-load-text: #285a50;
  --tool-load-meter: rgba(75, 137, 120, 0.42);
}

[data-theme="aurora"] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #347d76;
  --tool-load-bg: rgba(220, 238, 235, 0.78);
  --tool-load-border: rgba(52, 125, 118, 0.27);
  --tool-load-text: #215850;
  --tool-load-meter: rgba(52, 125, 118, 0.50);
}

[data-theme="aurora"] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #967037;
  --tool-load-bg: rgba(243, 235, 220, 0.78);
  --tool-load-border: rgba(150, 112, 55, 0.28);
  --tool-load-text: #684b22;
  --tool-load-meter: rgba(150, 112, 55, 0.50);
}

[data-theme="nocturne"] body .tool-home .tool-load.is-load-ready,
[data-theme="nocturne"] body .tool-home .tool-load.is-load-idle {
  --tool-load-color: #79d7df;
  --tool-load-bg: rgba(22, 60, 66, 0.34);
  --tool-load-border: rgba(121, 215, 223, 0.24);
  --tool-load-text: #d4f5f7;
  --tool-load-meter: rgba(121, 215, 223, 0.44);
}

[data-theme="nocturne"] body .tool-home .tool-load.is-load-active {
  --tool-load-color: #f08aa0;
  --tool-load-bg: rgba(82, 28, 43, 0.38);
  --tool-load-border: rgba(240, 138, 160, 0.26);
  --tool-load-text: #ffdbe4;
  --tool-load-meter: rgba(240, 138, 160, 0.52);
}

[data-theme="nocturne"] body .tool-home .tool-load.is-load-queued {
  --tool-load-color: #e7b86b;
  --tool-load-bg: rgba(91, 61, 29, 0.38);
  --tool-load-border: rgba(231, 184, 107, 0.28);
  --tool-load-text: #ffe5b6;
  --tool-load-meter: rgba(231, 184, 107, 0.52);
}

@media (max-width: 720px) {
  html[data-theme] body .tool-home .tool-load {
    min-width: 64px !important;
    min-height: 21px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }
}
/* cookie-overlay-layout-final-end-20260525:
   Last override because older theme blocks redefine cookie card layout. */
html[data-theme] body .cookie-consent-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
  padding: 20px !important;
}

html[data-theme] body .cookie-consent-copy {
  min-width: 0 !important;
  max-width: none !important;
}

html[data-theme] body .cookie-consent-copy h2 {
  margin: 0 0 8px !important;
}

html[data-theme] body .cookie-consent-copy p {
  max-width: 58ch !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

html[data-theme] body .cookie-consent-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html[data-theme] body .cookie-consent-actions .cookie-button {
  min-width: 0 !important;
  min-height: 44px !important;
  white-space: normal !important;
}

@media (max-width: 640px) {
  html[data-theme] body .cookie-consent-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}