/* ==========================================================================
   Marszal Image Resizer - Complete Stylesheet
   Design system: marszalstudio.pl
   ========================================================================== */

/* ==========================================================================
   1. CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */

#marszal-app {
  /* --- Colors: Primary --- */
  --color-gold: #FFC702;
  --color-gold-dark: #FAB702;
  --color-gold-secondary: #FFBB02;
  --color-gold-muted: rgba(255, 199, 2, 0.15);
  --color-gold-subtle: rgba(255, 199, 2, 0.08);

  /* --- Colors: Text --- */
  --color-text: #242424;
  --color-text-secondary: #959797;
  --color-text-muted: #A3B1B4;
  --color-text-inverse: #FFFFFF;

  /* --- Colors: Backgrounds --- */
  --color-bg: #FFFFFF;
  --color-surface: #F5F7FA;
  --color-surface-warm: #F9FAFB;
  --color-surface-elevated: #FFFFFF;

  /* --- Colors: Accents --- */
  --color-accent-cyan: #E3FCFF;
  --color-accent-teal: #E2F3F6;
  --color-accent-green: #94E945;
  --color-accent-green-muted: rgba(148, 233, 69, 0.15);
  --color-toc-bg: #D5F6FC;

  /* --- Colors: Semantic --- */
  --color-warning: #FF6B6B;
  --color-warning-bg: rgba(255, 107, 107, 0.1);
  --color-warning-border: rgba(255, 107, 107, 0.3);
  --color-success: #94E945;
  --color-success-bg: rgba(148, 233, 69, 0.1);
  --color-info: #4DA8DA;
  --color-info-bg: rgba(77, 168, 218, 0.1);

  /* --- Typography --- */
  --font-family: "Inter Variable", "InterVariable", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 16px;
  --font-size-body: 19px;
  --font-size-lg: 22px;
  --font-size-xl: 28px;
  --font-size-2xl: 36px;
  --font-size-3xl: 48px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing: -0.03em;
  --line-height-body: 1.8em;
  --line-height-heading: 1.25;
  --line-height-tight: 1.4;

  /* --- Spacing --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* --- Border Radius --- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-pill: 50px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(21, 33, 33, 0.06);
  --shadow-md: 0 4px 16px rgba(21, 33, 33, 0.08);
  --shadow-lg: 0 8px 32px rgba(21, 33, 33, 0.12);
  --shadow-xl: 0px 2px 64px -40px rgba(21, 33, 33, 0.5);
  --shadow-card: 0 2px 12px rgba(21, 33, 33, 0.06);
  --shadow-card-hover: 0 8px 28px rgba(21, 33, 33, 0.12);
  --shadow-dropzone: 0 0 0 4px rgba(255, 199, 2, 0.2);

  /* --- Glass --- */
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-backdrop: blur(15px) contrast(1.3) saturate(1.3);
  --glass-border: rgba(255, 255, 255, 0.3);

  /* --- Layout --- */
  --container-max: 900px;
  --container-wide: 1100px;
  --container-padding: 24px;

  /* --- Transitions --- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* --- Z-index --- */
  --z-dropzone: 1;
  --z-controls: 10;
  --z-slider: 20;
  --z-overlay: 50;
  --z-toast: 100;
}

/* --- Dark Mode Tokens --- */
#marszal-app [data-theme="dark"] {
  --color-text: #F0F0F0;
  --color-text-secondary: #9CA3AF;
  --color-text-muted: #6B7280;
  --color-text-inverse: #111111;

  --color-bg: #111111;
  --color-surface: #1A1A1A;
  --color-surface-warm: #1E1E1E;
  --color-surface-elevated: #222222;

  --color-accent-cyan: rgba(227, 252, 255, 0.08);
  --color-accent-teal: rgba(226, 243, 246, 0.06);
  --color-toc-bg: rgba(213, 246, 252, 0.06);

  --color-gold-muted: rgba(255, 199, 2, 0.12);
  --color-gold-subtle: rgba(255, 199, 2, 0.05);

  --color-warning-bg: rgba(255, 107, 107, 0.15);
  --color-warning-border: rgba(255, 107, 107, 0.25);
  --color-success-bg: rgba(148, 233, 69, 0.12);
  --color-info-bg: rgba(77, 168, 218, 0.12);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0px 2px 64px -40px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-dropzone: 0 0 0 4px rgba(255, 199, 2, 0.15);

  --glass-bg: rgba(30, 30, 30, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
}

/* Auto dark mode detection */



/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */

*,
*::before,
#marszal-app *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#marszal-app ::selection {
  background: var(--color-gold);
  color: var(--color-text-inverse, #242424);
}

#marszal-app ::-moz-selection {
  background: var(--color-gold);
  color: var(--color-text-inverse, #242424);
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#marszal-app img {
  max-width: 100%;
  height: auto;
  display: block;
}

#marszal-app button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  letter-spacing: var(--letter-spacing);
}

#marszal-app input, #marszal-app select {
  font-family: inherit;
  letter-spacing: var(--letter-spacing);
}


/* ==========================================================================
   3. CUSTOM SCROLLBAR
   ========================================================================== */

.resizer-marketplace-grid::-webkit-scrollbar,
#marszal-app .resizer-specs-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.resizer-marketplace-grid::-webkit-scrollbar-track,
#marszal-app .resizer-specs-list::-webkit-scrollbar-track {
  background: transparent;
}

.resizer-marketplace-grid::-webkit-scrollbar-thumb,
#marszal-app .resizer-specs-list::-webkit-scrollbar-thumb {
  background: var(--color-text-muted);
  border-radius: var(--radius-pill);
}

.resizer-marketplace-grid::-webkit-scrollbar-thumb:hover,
#marszal-app .resizer-specs-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary);
}

/* Firefox scrollbar */
.resizer-marketplace-grid,
#marszal-app .resizer-specs-list {
  scrollbar-width: thin;
  scrollbar-color: var(--color-text-muted) transparent;
}


/* ==========================================================================
   4. LAYOUT / CONTAINER
   ========================================================================== */

#marszal-app .resizer {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--container-padding);
  position: relative;
}

#marszal-app .resizer-wide {
  max-width: var(--container-wide);
}

#marszal-app .resizer-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

#marszal-app .resizer-header__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

#marszal-app .resizer-header__subtitle {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  line-height: var(--line-height-tight);
}

#marszal-app .resizer-section {
  margin-bottom: var(--space-xl);
}

#marszal-app .resizer-section__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}


/* ==========================================================================
   5. DROP ZONE
   ========================================================================== */

#marszal-app .resizer-dropzone {
  position: relative;
  border: 2px dashed var(--color-text-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  cursor: pointer;
  background: var(--color-surface-warm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  gap: var(--space-md);
}

/* Empty state (default) */
#marszal-app .resizer-dropzone__icon {
  width: 56px;
  height: 56px;
  color: var(--color-text-muted);
  opacity: 0.6;
}

#marszal-app .resizer-dropzone__text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  line-height: var(--line-height-tight);
}

#marszal-app .resizer-dropzone__text strong {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

#marszal-app .resizer-dropzone__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Hover state */
#marszal-app .resizer-dropzone:hover {
  border-color: var(--color-gold);
  background: var(--color-gold-subtle);
}

#marszal-app .resizer-dropzone:hover .resizer-dropzone__icon {
  color: var(--color-gold-dark);
  opacity: 0.8;
}

/* Dragging state (active file drag over) */
#marszal-app .resizer-dropzone.is-dragging {
  border-color: var(--color-gold);
  border-style: solid;
  background: var(--color-gold-muted);
  box-shadow: var(--shadow-dropzone);
}

#marszal-app .resizer-dropzone.is-dragging .resizer-dropzone__icon {
  color: var(--color-gold-dark);
  opacity: 1;
}

#marszal-app .resizer-dropzone.is-dragging .resizer-dropzone__text {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

/* Drag border pulse animation */
@keyframes dropzone-pulse {
  0%, 100% { box-shadow: var(--shadow-dropzone); }
  50% { box-shadow: 0 0 0 8px rgba(255, 199, 2, 0.12); }
}

#marszal-app .resizer-dropzone.is-dragging {
  animation: dropzone-pulse 1.2s ease-in-out infinite;
}

/* Has-image state (image loaded) */
#marszal-app .resizer-dropzone.has-image {
  border-style: solid;
  border-color: var(--color-accent-green);
  background: var(--color-success-bg);
  padding: var(--space-md);
  min-height: auto;
  cursor: default;
}

.resizer-dropzone.has-image .resizer-dropzone__icon,
.resizer-dropzone.has-image .resizer-dropzone__text,
#marszal-app .resizer-dropzone.has-image .resizer-dropzone__hint {
  display: none;
}

/* File input hidden */
#marszal-app .resizer-dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

#marszal-app .resizer-dropzone.has-image .resizer-dropzone__input {
  display: none;
}

/* Thumbnail preview inside dropzone */
#marszal-app .resizer-dropzone__preview {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}

#marszal-app .resizer-dropzone__thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

#marszal-app .resizer-dropzone__file-info {
  flex: 1;
  text-align: left;
  min-width: 0;
}

#marszal-app .resizer-dropzone__filename {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#marszal-app .resizer-dropzone__filesize {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

#marszal-app .resizer-dropzone__remove {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

#marszal-app .resizer-dropzone__remove:hover {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}


/* ==========================================================================
   6. MARKETPLACE SELECTOR (Bento Grid)
   ========================================================================== */

#marszal-app .resizer-marketplace {
  margin-bottom: var(--space-xl);
}

#marszal-app .resizer-marketplace__heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing);
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

#marszal-app .resizer-marketplace-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  max-height: 400px;
  overflow-y: auto;
  padding: var(--space-xs);
}


/* ==========================================================================
   7. MARKETPLACE CARD
   ========================================================================== */

#marszal-app .resizer-card {
  background: var(--color-surface-elevated);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  position: relative;
  user-select: none;
}

#marszal-app .resizer-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Active / selected state */
#marszal-app .resizer-card.is-active {
  border-color: var(--color-gold);
  background: var(--color-gold-subtle);
  box-shadow: var(--shadow-card-hover);
}

#marszal-app .resizer-card.is-active::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
}

#marszal-app .resizer-card__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

#marszal-app .resizer-card__icon--placeholder {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--color-text-muted);
}

#marszal-app .resizer-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}

#marszal-app .resizer-card__region {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  line-height: 1.4;
}

#marszal-app .resizer-card.is-active .resizer-card__region {
  background: var(--color-gold-muted);
  color: var(--color-gold-dark);
}

/* Region color variants */
#marszal-app .resizer-card__region--eu {
  background: var(--color-accent-teal);
  color: #3A8A9E;
}

#marszal-app .resizer-card__region--us {
  background: var(--color-info-bg);
  color: var(--color-info);
}

#marszal-app .resizer-card__region--global {
  background: var(--color-gold-subtle);
  color: var(--color-gold-dark);
}

#marszal-app [data-theme="dark"] .resizer-card__region--eu {
  background: rgba(226, 243, 246, 0.1);
  color: #6BC0D0;
}

#marszal-app [data-theme="dark"] .resizer-card__region--us {
  background: rgba(77, 168, 218, 0.15);
  color: #6DC4ED;
}


/* ==========================================================================
   8. PREVIEW AREA (Before/After with Slider)
   ========================================================================== */

#marszal-app .resizer-preview {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  min-height: 300px;
  margin-bottom: var(--space-lg);
}

#marszal-app .resizer-preview__canvas-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#marszal-app .resizer-preview__canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Before/After container */
#marszal-app .resizer-preview__compare {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: ew-resize;
}

.resizer-preview__before,
#marszal-app .resizer-preview__after {
  display: block;
  width: 100%;
  height: auto;
}

#marszal-app .resizer-preview__before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 50% 0 0);
}

#marszal-app .resizer-preview__after {
  position: relative;
}

/* Slider handle */
#marszal-app .resizer-preview__slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--color-gold);
  z-index: var(--z-slider);
  cursor: ew-resize;
  transform: translateX(-50%);
}

#marszal-app .resizer-preview__slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-slider);
}

.resizer-preview__slider-handle::before,
#marszal-app .resizer-preview__slider-handle::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  background: var(--color-text-inverse, #242424);
  border-radius: 1px;
}

#marszal-app .resizer-preview__slider-handle::before {
  transform: translateX(-4px) rotate(45deg);
  top: calc(50% - 3px);
}

#marszal-app .resizer-preview__slider-handle::after {
  transform: translateX(-4px) rotate(-45deg);
  top: calc(50% + 1px);
}

/* Slider labels */
#marszal-app .resizer-preview__label {
  position: absolute;
  top: var(--space-md);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: var(--z-slider);
  pointer-events: none;
}

#marszal-app .resizer-preview__label--before {
  left: var(--space-md);
  background: var(--color-text);
  color: var(--color-text-inverse, #FFFFFF);
}

#marszal-app .resizer-preview__label--after {
  right: var(--space-md);
  background: var(--color-gold);
  color: var(--color-text-inverse, #242424);
}

/* Specs info panel below preview */
#marszal-app .resizer-preview__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-surface-warm);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

#marszal-app .resizer-preview__spec {
  text-align: center;
}

#marszal-app .resizer-preview__spec-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

#marszal-app .resizer-preview__spec-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* Empty preview state */
#marszal-app .resizer-preview__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--color-text-muted);
  gap: var(--space-sm);
}

#marszal-app .resizer-preview__empty-icon {
  width: 48px;
  height: 48px;
  opacity: 0.4;
}

#marszal-app .resizer-preview__empty-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}


/* ==========================================================================
   9. CONTROLS PANEL (Glassmorphism)
   ========================================================================== */

#marszal-app .resizer-controls {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

#marszal-app .resizer-controls__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

#marszal-app .resizer-controls__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

#marszal-app .resizer-controls__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

/* Quality slider */
#marszal-app .resizer-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  outline: none;
}

#marszal-app .resizer-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-gold);
  cursor: pointer;
  border: 3px solid var(--color-bg);
  box-shadow: var(--shadow-sm);
}

#marszal-app .resizer-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-gold);
  cursor: pointer;
  border: 3px solid var(--color-bg);
  box-shadow: var(--shadow-sm);
}

#marszal-app .resizer-slider__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  min-width: 36px;
  text-align: right;
}

/* Format selector (pill group) */
#marszal-app .resizer-format-group {
  display: flex;
  gap: var(--space-xs);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  padding: 3px;
}

#marszal-app .resizer-format-pill {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  letter-spacing: var(--letter-spacing);
}

#marszal-app .resizer-format-pill:hover {
  color: var(--color-text);
}

#marszal-app .resizer-format-pill.is-active {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}


/* ==========================================================================
   10. BUTTONS
   ========================================================================== */

/* Primary button - Gold */
#marszal-app .resizer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  border: 2px solid transparent;
}

#marszal-app .resizer-btn--primary {
  background: var(--color-gold);
  color: #242424;
  border-color: var(--color-gold);
}

/* NO transition - matches site explicitly */
#marszal-app .resizer-btn--primary:hover {
  background: #242424;
  color: var(--color-gold);
  border-color: #242424;
}

#marszal-app [data-theme="dark"] .resizer-btn--primary:hover {
  background: var(--color-surface-elevated);
  color: var(--color-gold);
  border-color: var(--color-surface-elevated);
}

#marszal-app .resizer-btn--primary:active {
  transform: scale(0.98);
}

#marszal-app .resizer-btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Secondary button */
#marszal-app .resizer-btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}

#marszal-app .resizer-btn--secondary:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

#marszal-app .resizer-btn--secondary:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ghost button */
#marszal-app .resizer-btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
  padding: 10px 20px;
}

#marszal-app .resizer-btn--ghost:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

/* Small button variant */
#marszal-app .resizer-btn--sm {
  padding: 8px 20px;
  font-size: var(--font-size-sm);
}

/* Large button variant */
#marszal-app .resizer-btn--lg {
  padding: 18px 40px;
  font-size: var(--font-size-lg);
}

/* Full width variant */
#marszal-app .resizer-btn--full {
  width: 100%;
}

/* Icon in button */
#marszal-app .resizer-btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}


/* ==========================================================================
   11. INFO / SPECS PANEL
   ========================================================================== */

#marszal-app .resizer-specs {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

#marszal-app .resizer-specs__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

#marszal-app .resizer-specs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 320px;
  overflow-y: auto;
  padding-right: var(--space-xs);
}

#marszal-app .resizer-specs-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-surface);
  font-size: var(--font-size-sm);
}

#marszal-app .resizer-specs-item:last-child {
  border-bottom: none;
}

#marszal-app .resizer-specs-item__key {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

#marszal-app .resizer-specs-item__value {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-align: right;
}

/* Requirement badges */
#marszal-app .resizer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

#marszal-app .resizer-badge--required {
  background: var(--color-gold-muted);
  color: var(--color-gold-dark);
}

#marszal-app .resizer-badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}

#marszal-app .resizer-badge--info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

#marszal-app .resizer-badge--success {
  background: var(--color-success-bg);
  color: var(--color-accent-green);
}

/* White background required - coral badge */
#marszal-app .resizer-badge--white-bg {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}

#marszal-app .resizer-badge--white-bg::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-warning);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}


/* ==========================================================================
   12. LANGUAGE TOGGLE
   ========================================================================== */

#marszal-app .resizer-lang-toggle {
  display: inline-flex;
  gap: 0;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  padding: 3px;
}

#marszal-app .resizer-lang-toggle__btn {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  line-height: 1;
  letter-spacing: 0.02em;
}

#marszal-app .resizer-lang-toggle__btn:hover {
  color: var(--color-text);
}

#marszal-app .resizer-lang-toggle__btn.is-active {
  background: var(--color-gold);
  color: #242424;
}


/* ==========================================================================
   13. PRIVACY BADGE
   ========================================================================== */

#marszal-app .resizer-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-accent-green-muted);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-top: var(--space-xl);
  text-align: center;
}

#marszal-app .resizer-privacy__icon {
  font-size: 16px;
  flex-shrink: 0;
}

#marszal-app .resizer-privacy strong {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   14. PROGRESS / PROCESSING
   ========================================================================== */

#marszal-app .resizer-progress {
  width: 100%;
  margin: var(--space-md) 0;
}

#marszal-app .resizer-progress__bar-wrap {
  width: 100%;
  height: 8px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

#marszal-app .resizer-progress__bar {
  height: 100%;
  background: var(--color-gold);
  border-radius: var(--radius-pill);
  width: 0%;
}

/* Fill animation */
@keyframes progress-fill {
  from { width: 0%; }
}

#marszal-app .resizer-progress__bar.is-animating {
  animation: progress-fill 0.6s ease-out;
}

/* Indeterminate shimmer */
@keyframes progress-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

#marszal-app .resizer-progress__bar.is-indeterminate {
  width: 40%;
  animation: progress-shimmer 1.5s ease-in-out infinite;
}

#marszal-app .resizer-progress__text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xs);
}

#marszal-app .resizer-progress__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

#marszal-app .resizer-progress__percent {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* Processing overlay */
#marszal-app .resizer-processing {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  border-radius: var(--radius-lg);
  z-index: var(--z-overlay);
}

#marszal-app [data-theme="dark"] .resizer-processing {
  background: rgba(17, 17, 17, 0.85);
}

#marszal-app .resizer-processing__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-surface);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

#marszal-app .resizer-processing__text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}


/* ==========================================================================
   15. FILE SIZE WARNING
   ========================================================================== */

#marszal-app .resizer-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  margin-top: var(--space-md);
}

#marszal-app .resizer-warning__icon {
  width: 20px;
  height: 20px;
  color: var(--color-warning);
  flex-shrink: 0;
  margin-top: 2px;
}

#marszal-app .resizer-warning__text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-warning);
  line-height: var(--line-height-tight);
}

#marszal-app .resizer-warning__text strong {
  font-weight: var(--font-weight-bold);
}

/* Success message variant */
#marszal-app .resizer-success {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-success-bg);
  border: 1px solid rgba(148, 233, 69, 0.3);
  margin-top: var(--space-md);
}

#marszal-app .resizer-success__text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-green);
  line-height: var(--line-height-tight);
}


/* ==========================================================================
   16. TOAST NOTIFICATIONS
   ========================================================================== */

#marszal-app .resizer-toast {
  position: fixed;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  z-index: var(--z-toast);
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}

#marszal-app .resizer-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#marszal-app .resizer-toast--success {
  background: var(--color-text);
  color: var(--color-bg);
}

#marszal-app .resizer-toast--error {
  background: var(--color-warning);
  color: #FFFFFF;
}


/* ==========================================================================
   17. THEME TOGGLE
   ========================================================================== */

#marszal-app .resizer-theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}

#marszal-app .resizer-theme-toggle:hover {
  background: var(--color-surface-warm);
  color: var(--color-text);
}

#marszal-app .resizer-theme-toggle__icon {
  width: 20px;
  height: 20px;
}


/* ==========================================================================
   18. TOOLBAR (Header area with lang + theme)
   ========================================================================== */

#marszal-app .resizer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

#marszal-app .resizer-toolbar__left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

#marszal-app .resizer-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}


/* ==========================================================================
   19. DOWNLOAD AREA
   ========================================================================== */

#marszal-app .resizer-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--color-surface-warm);
  border-radius: var(--radius-lg);
  text-align: center;
}

#marszal-app .resizer-download__size {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

#marszal-app .resizer-download__size strong {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

#marszal-app .resizer-download__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}


/* ==========================================================================
   20. TWO-COLUMN LAYOUT (Preview + Controls side by side on desktop)
   ========================================================================== */

#marszal-app .resizer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

#marszal-app .resizer-main__preview {
  min-width: 0;
}

#marszal-app .resizer-main__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}


/* ==========================================================================
   21. DIMENSIONS INPUT (Custom width/height)
   ========================================================================== */

#marszal-app .resizer-dimensions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

#marszal-app .resizer-dimensions__input {
  width: 80px;
  padding: 8px 12px;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  background: var(--color-bg);
  text-align: center;
  letter-spacing: var(--letter-spacing);
}

#marszal-app .resizer-dimensions__input:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-muted);
}

#marszal-app .resizer-dimensions__separator {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
}

#marszal-app .resizer-dimensions__lock {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}

#marszal-app .resizer-dimensions__lock.is-locked {
  background: var(--color-gold-muted);
  color: var(--color-gold-dark);
}

#marszal-app .resizer-dimensions__unit {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   22. BATCH MODE (Multiple files)
   ========================================================================== */

#marszal-app .resizer-batch-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

#marszal-app .resizer-batch-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-warm);
  border-radius: var(--radius-md);
}

#marszal-app .resizer-batch-item__thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

#marszal-app .resizer-batch-item__name {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#marszal-app .resizer-batch-item__status {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

#marszal-app .resizer-batch-item__status--done {
  color: var(--color-accent-green);
}

#marszal-app .resizer-batch-item__status--processing {
  color: var(--color-gold-dark);
}

#marszal-app .resizer-batch-item__status--error {
  color: var(--color-warning);
}


/* ==========================================================================
   23. RESPONSIVE DESIGN
   ========================================================================== */

/* --- Mobile: max 767px --- */
@media (max-width: 767px) {
  #marszal-app {
    --container-padding: 16px;
  }

  #marszal-app .resizer {
    padding: var(--space-lg) var(--container-padding);
  }

  #marszal-app .resizer-header__title {
    font-size: var(--font-size-xl);
  }

  #marszal-app .resizer-header__subtitle {
    font-size: var(--font-size-sm);
  }

  /* Marketplace grid: 2 columns on mobile */
  #marszal-app .resizer-marketplace-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    max-height: 300px;
  }

  #marszal-app .resizer-card {
    padding: 12px;
    gap: 6px;
  }

  #marszal-app .resizer-card__icon {
    width: 32px;
    height: 32px;
  }

  #marszal-app .resizer-card__icon--placeholder {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  #marszal-app .resizer-card__name {
    font-size: var(--font-size-xs);
  }

  #marszal-app .resizer-card__region {
    font-size: 9px;
    padding: 1px 6px;
  }

  /* Dropzone: full width, reduced padding */
  #marszal-app .resizer-dropzone {
    padding: var(--space-2xl) var(--space-md);
    min-height: 180px;
  }

  #marszal-app .resizer-dropzone__icon {
    width: 40px;
    height: 40px;
  }

  /* Controls: stack vertically */
  #marszal-app .resizer-controls {
    padding: var(--space-md);
    gap: var(--space-md);
  }

  #marszal-app .resizer-controls__row {
    flex-direction: column;
    align-items: stretch;
  }

  /* Preview specs: stack to 1 column */
  #marszal-app .resizer-preview__specs {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  #marszal-app .resizer-preview__spec {
    display: flex;
    justify-content: space-between;
    text-align: left;
  }

  /* Buttons: full width on mobile */
  .resizer-btn--primary,
  #marszal-app .resizer-btn--secondary {
    width: 100%;
  }

  /* Download actions: stack */
  #marszal-app .resizer-download__actions {
    flex-direction: column;
    width: 100%;
  }

  /* Toolbar adjustments */
  #marszal-app .resizer-toolbar {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  /* Privacy badge wrap */
  #marszal-app .resizer-privacy {
    flex-direction: column;
    text-align: center;
    border-radius: var(--radius-lg);
    padding: var(--space-md);
  }

  /* Dimensions stacking */
  #marszal-app .resizer-dimensions {
    flex-wrap: wrap;
  }

  #marszal-app .resizer-dimensions__input {
    width: 70px;
  }

  /* Batch items: tighter */
  #marszal-app .resizer-batch-item {
    padding: var(--space-xs) var(--space-sm);
  }

  #marszal-app .resizer-batch-item__thumb {
    width: 32px;
    height: 32px;
  }

  /* Format pills: scrollable */
  #marszal-app .resizer-format-group {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #marszal-app .resizer-format-pill {
    flex-shrink: 0;
  }
}

/* --- Tablet: max 1024px --- */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Marketplace grid: 3 columns on tablet */
  #marszal-app .resizer-marketplace-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  #marszal-app .resizer-main {
    grid-template-columns: 1fr;
  }

  #marszal-app .resizer-controls__row {
    flex-wrap: wrap;
  }
}

/* --- Desktop: min 1025px --- */
@media (min-width: 1025px) {
  /* Marketplace grid: 5 columns on desktop */
  #marszal-app .resizer-marketplace-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Side-by-side layout when wide container used */
  #marszal-app .resizer-wide .resizer-main {
    grid-template-columns: 1fr 320px;
  }

  #marszal-app .resizer-wide .resizer-main__sidebar {
    position: sticky;
    top: var(--space-lg);
    align-self: start;
  }
}


/* ==========================================================================
   24. PRINT STYLES
   ========================================================================== */

@media print {
  /* Hide the interactive tool */
  .resizer-dropzone,
  .resizer-controls,
  .resizer-preview__slider,
  .resizer-preview__slider-handle,
  .resizer-preview__label,
  .resizer-btn,
  .resizer-lang-toggle,
  .resizer-theme-toggle,
  .resizer-privacy,
  .resizer-progress,
  .resizer-processing,
  .resizer-warning,
  .resizer-success,
  .resizer-toast,
  .resizer-download,
  .resizer-format-group,
  .resizer-toolbar__right,
  .resizer-batch-list,
  #marszal-app .resizer-dropzone__remove {
    display: none !important;
  }

  /* Show specs table cleanly */
  #marszal-app .resizer {
    max-width: 100%;
    padding: 0;
  }

  #marszal-app .resizer-specs {
    box-shadow: none;
    border: 1px solid #DDD;
    page-break-inside: avoid;
  }

  #marszal-app .resizer-marketplace-grid {
    max-height: none;
    overflow: visible;
  }

  #marszal-app .resizer-card {
    box-shadow: none;
    border: 1px solid #DDD;
    page-break-inside: avoid;
  }

  #marszal-app .resizer-card.is-active {
    border-color: #000;
    font-weight: bold;
  }

  #marszal-app .resizer-preview__canvas {
    max-height: 400px;
    object-fit: contain;
  }

  body {
    color: #000;
    background: #FFF;
  }

  #marszal-app * {
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* ==========================================================================
   25. UTILITY CLASSES
   ========================================================================== */

#marszal-app .resizer-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

#marszal-app .resizer-text-center {
  text-align: center;
}

#marszal-app .resizer-text-right {
  text-align: right;
}

#marszal-app .resizer-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

#marszal-app .resizer-gap-sm {
  gap: var(--space-sm);
}

#marszal-app .resizer-gap-md {
  gap: var(--space-md);
}

#marszal-app .resizer-gap-lg {
  gap: var(--space-lg);
}

.resizer-mt-sm { margin-top: var(--space-sm); }
.resizer-mt-md { margin-top: var(--space-md); }
.resizer-mt-lg { margin-top: var(--space-lg); }
.resizer-mt-xl { margin-top: var(--space-xl); }

.resizer-mb-sm { margin-bottom: var(--space-sm); }
.resizer-mb-md { margin-bottom: var(--space-md); }
.resizer-mb-lg { margin-bottom: var(--space-lg); }
.resizer-mb-xl { margin-bottom: var(--space-xl); }

#marszal-app .resizer-hidden {
  display: none !important;
}

#marszal-app .resizer-visible {
  display: block !important;
}

/* Fade in/out for dynamic elements */
#marszal-app .resizer-fade-in {
  opacity: 0;
}

#marszal-app .resizer-fade-in.is-visible {
  opacity: 1;
}

/* Truncate text */
#marszal-app .resizer-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==========================================================================
   26. FOCUS STYLES (Accessibility)
   ========================================================================== */

.resizer-btn:focus-visible,
.resizer-card:focus-visible,
.resizer-format-pill:focus-visible,
.resizer-lang-toggle__btn:focus-visible,
.resizer-theme-toggle:focus-visible,
.resizer-dimensions__input:focus-visible,
.resizer-dimensions__lock:focus-visible,
#marszal-app .resizer-dropzone__remove:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

#marszal-app .resizer-slider:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 4px;
  border-radius: var(--radius-pill);
}

/* Remove default outlines when focus-visible is supported */
.resizer-btn:focus:not(:focus-visible),
.resizer-card:focus:not(:focus-visible),
.resizer-format-pill:focus:not(:focus-visible),
.resizer-lang-toggle__btn:focus:not(:focus-visible),
.resizer-theme-toggle:focus:not(:focus-visible),
#marszal-app .resizer-dropzone__remove:focus:not(:focus-visible) {
  outline: none;
}


/* ==========================================================================
   27. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #marszal-app .resizer-dropzone.is-dragging {
    animation: none;
  }

  #marszal-app .resizer-progress__bar.is-animating {
    animation: none;
  }

  #marszal-app .resizer-progress__bar.is-indeterminate {
    animation: none;
    width: 100%;
  }

  #marszal-app .resizer-processing__spinner {
    animation: none;
    border-top-color: var(--color-gold);
    opacity: 0.6;
  }

  #marszal-app .resizer-toast.is-visible {
    transform: translateX(-50%) translateY(0);
  }

  #marszal-app .resizer-card:hover {
    transform: none;
  }
}


/* ==========================================================================
   28. INTEGRATION LAYER - Styles for actual HTML markup classes
   These map the HTML class names used in index.html to the design system.
   ========================================================================== */

/* --- Skip link --- */
#marszal-app .skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gold);
  color: #242424;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  z-index: 9999;
  text-decoration: none;
  transition: top var(--transition-fast);
}

#marszal-app .skip-link:focus {
  top: var(--space-md);
}

/* --- Visually hidden (accessible) --- */
#marszal-app .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- Top bar --- */
#marszal-app .top-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--glass-border);
  padding: var(--space-sm) 0;
}

#marszal-app .top-bar__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* --- Language switcher --- */
#marszal-app .lang-switcher {
  display: inline-flex;
  gap: 0;
  background: var(--color-bg);
  border-radius: var(--radius-pill);
  padding: 3px;
}

#marszal-app .lang-switcher__btn {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  line-height: 1;
  letter-spacing: 0.02em;
  border: none;
  font-family: inherit;
}

#marszal-app .lang-switcher__btn:hover {
  color: var(--color-text);
}

#marszal-app .lang-switcher__btn--active {
  background: var(--color-gold);
  color: #242424;
}

/* --- Privacy badge --- */
#marszal-app .privacy-badge {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

#marszal-app .privacy-badge__icon {
  flex-shrink: 0;
  color: var(--color-accent-green);
}

/* --- Page header --- */
#marszal-app .page-header {
  text-align: center;
  padding: var(--space-2xl) 0 var(--space-lg);
}

#marszal-app .page-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

#marszal-app .page-header__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing);
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

#marszal-app .page-header__subtitle {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  line-height: var(--line-height-tight);
  margin: 0;
}

/* --- Main app area --- */
#marszal-app .resizer-app {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--container-padding);
}

/* --- Step containers --- */
#marszal-app .step {
  margin-bottom: var(--space-2xl);
}

#marszal-app .step__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

#marszal-app .step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-gold);
  color: #242424;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

#marszal-app .step__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing);
  color: var(--color-text);
  margin: 0;
}

/* --- Marketplace search --- */
#marszal-app .marketplace-search {
  margin-bottom: var(--space-md);
}

#marszal-app .marketplace-search__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

#marszal-app .marketplace-search__icon {
  position: absolute;
  left: 14px;
  color: var(--color-text-muted);
  pointer-events: none;
}

#marszal-app .marketplace-search__input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-surface-warm);
  letter-spacing: var(--letter-spacing);
  font-family: inherit;
}

#marszal-app .marketplace-search__input:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-muted);
}

#marszal-app .marketplace-search__input::placeholder {
  color: var(--color-text-muted);
}

/* --- Marketplace grid --- */
#marszal-app .marketplace-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

#marszal-app .marketplace-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

#marszal-app .marketplace-group__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0;
}

#marszal-app .marketplace-group__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-xs);
}

#marszal-app .marketplace-grid__empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  padding: var(--space-xl);
}

/* --- Marketplace card --- */
#marszal-app .marketplace-card {
  background: var(--color-surface-elevated);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  user-select: none;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: var(--letter-spacing);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

#marszal-app .marketplace-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

#marszal-app .marketplace-card:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

#marszal-app .marketplace-card:focus:not(:focus-visible) {
  outline: none;
}

#marszal-app .marketplace-card--active {
  border-color: var(--color-gold);
  background: var(--color-gold-subtle);
  box-shadow: var(--shadow-card-hover);
}

#marszal-app .marketplace-card--active::after {
  display: none;
}

#marszal-app .marketplace-card__icon {
  width: 100%;
  height: 36px;
  border-radius: var(--radius-sm);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  flex-shrink: 0;
  overflow: hidden;
}

#marszal-app .marketplace-card__icon svg {
  display: block;
  flex-shrink: 0;
  max-width: 90%;
  max-height: 36px;
}

#marszal-app .marketplace-card--active .marketplace-card__icon {
  background: transparent;
}

#marszal-app .marketplace-card__name {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#marszal-app .marketplace-card__badge {
  display: none;
}

#marszal-app .marketplace-card__flag {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
  pointer-events: none;
}

#marszal-app .marketplace-card--active .marketplace-card__flag {
  opacity: 1;
}

#marszal-app .marketplace-card__dim {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* --- Dropzone --- */
#marszal-app .dropzone {
  position: relative;
  border: 2px dashed var(--color-text-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  cursor: pointer;
  background: var(--color-surface-warm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  gap: var(--space-md);
  outline: none;
}

.dropzone:hover,
#marszal-app .dropzone:focus-visible {
  border-color: var(--color-gold);
  background: var(--color-gold-subtle);
}

#marszal-app .dropzone--hover {
  border-color: var(--color-gold);
  border-style: solid;
  background: var(--color-gold-muted);
  box-shadow: var(--shadow-dropzone);
  animation: dropzone-pulse 1.2s ease-in-out infinite;
}

#marszal-app .dropzone--has-image {
  border-style: solid;
  border-color: var(--color-accent-green);
  background: var(--color-success-bg);
  min-height: auto;
  padding: var(--space-lg);
  cursor: default;
}

#marszal-app .dropzone__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

#marszal-app .dropzone__icon {
  width: 56px;
  height: 56px;
  color: var(--color-text-muted);
  opacity: 0.6;
}

#marszal-app .dropzone:hover .dropzone__icon {
  color: var(--color-gold-dark);
  opacity: 0.8;
}

#marszal-app .dropzone--hover .dropzone__icon {
  color: var(--color-gold-dark);
  opacity: 1;
}

@keyframes dropzone-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

#marszal-app .dropzone__icon--bounce {
  animation: dropzone-bounce 0.8s ease-in-out infinite;
}

#marszal-app .dropzone__text-primary {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

#marszal-app .dropzone__text-secondary {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

#marszal-app .dropzone--touch {
  background: var(--color-gold-subtle);
}

/* --- Editor layout --- */
#marszal-app .editor-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  #marszal-app .editor-layout {
    grid-template-columns: 1fr 320px;
  }
}

/* --- Editor preview --- */
#marszal-app .editor-preview {
  min-width: 0;
}

#marszal-app .editor-preview__canvas-wrap {
  position: relative;
  background: transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

#marszal-app .editor-preview__canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

#marszal-app .editor-preview__dimensions {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}

/* --- Marching ants crop overlay (SVG-based for smooth animation) --- */
#marszal-app .crop-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}
#marszal-app .crop-overlay rect {
  stroke-dasharray: 8, 6;
}
@keyframes dash-march {
  to { stroke-dashoffset: -14; }
}

/* --- Batch thumbnail strip --- */
#marszal-app .batch-strip {
  margin-top: 8px;
}

#marszal-app .batch-strip__info {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

#marszal-app .batch-strip__thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

#marszal-app .batch-strip__thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}

#marszal-app .batch-strip__thumb:hover {
  opacity: 0.9;
}

#marszal-app .batch-strip__thumb--active {
  border-color: var(--color-gold);
  opacity: 1;
}

#marszal-app .batch-strip__thumb--done {
  opacity: 1;
}

#marszal-app .batch-strip__thumb--done::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent-green);
}

#marszal-app .editor-preview__info {
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

/* --- Editor controls --- */
#marszal-app .editor-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

#marszal-app .editor-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* --- Control groups --- */
#marszal-app .control-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

#marszal-app .control-group__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin: 0;
  padding: 0;
  border: none;
}

#marszal-app fieldset.control-group {
  margin: 0;
  padding: 0;
  border: none;
}

/* --- Pill groups --- */
#marszal-app .pill-group {
  display: flex;
  gap: var(--space-xs);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  padding: 3px;
}

#marszal-app .pill {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  letter-spacing: var(--letter-spacing);
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
}

#marszal-app .pill:hover {
  color: var(--color-text);
}

#marszal-app .pill--active {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

#marszal-app .pill--unsupported {
  opacity: 0.4;
  text-decoration: line-through;
}

#marszal-app .pill:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

#marszal-app .pill:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

/* --- Slider --- */
#marszal-app .slider-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

#marszal-app .slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  outline: none;
}

#marszal-app .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-gold);
  cursor: pointer;
  border: 3px solid var(--color-bg);
  box-shadow: var(--shadow-sm);
}

#marszal-app .slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-gold);
  cursor: pointer;
  border: 3px solid var(--color-bg);
  box-shadow: var(--shadow-sm);
}

#marszal-app .slider:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 4px;
  border-radius: var(--radius-pill);
}

#marszal-app .slider__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  min-width: 40px;
  text-align: right;
}

/* --- Dimensions display --- */
#marszal-app .dimensions-display {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

#marszal-app .size-display {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* --- Specs panel --- */
#marszal-app .specs-panel {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

#marszal-app .specs-panel__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

#marszal-app .specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

#marszal-app .specs-table th {
  text-align: left;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
  border-bottom: 1px solid var(--color-surface);
  white-space: nowrap;
}

#marszal-app .specs-table td {
  text-align: right;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-sm);
  border-bottom: 1px solid var(--color-surface);
}

.specs-table tr:last-child th,
#marszal-app .specs-table tr:last-child td {
  border-bottom: none;
}

#marszal-app .specs-panel__notes {
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-tight);
}

#marszal-app .specs-panel__docs-link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold-dark);
  text-decoration: none;
}

#marszal-app .specs-panel__docs-link:hover {
  text-decoration: underline;
}

/* --- Warnings --- */
#marszal-app .warnings {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

#marszal-app .warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

#marszal-app .warning svg {
  flex-shrink: 0;
  margin-top: 1px;
}

#marszal-app .warning--error {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning);
}

#marszal-app .warning--warning {
  background: rgba(255, 186, 0, 0.1);
  border: 1px solid rgba(255, 186, 0, 0.3);
  color: #C88B00;
}

#marszal-app [data-theme="dark"] .warning--warning {
  color: #FFD166;
}

#marszal-app .warning--info {
  background: var(--color-info-bg);
  border: 1px solid rgba(77, 168, 218, 0.3);
  color: var(--color-info);
}

/* --- Buttons --- */
#marszal-app .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  background: none;
}

#marszal-app .btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#marszal-app .btn--primary {
  background: var(--color-gold);
  color: #242424;
  border-color: var(--color-gold);
}

#marszal-app .btn--primary:hover {
  background: #242424;
  color: var(--color-gold);
  border-color: #242424;
}

#marszal-app [data-theme="dark"] .btn--primary:hover {
  background: var(--color-surface-elevated);
  color: var(--color-gold);
  border-color: var(--color-surface-elevated);
}

#marszal-app .btn--primary:active {
  transform: scale(0.98);
}

#marszal-app .btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

#marszal-app .btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}

#marszal-app .btn--secondary:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

#marszal-app .btn--secondary:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

#marszal-app .btn--small {
  padding: 8px 20px;
  font-size: var(--font-size-sm);
}

#marszal-app .btn:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

/* --- Batch progress --- */
#marszal-app .batch-progress {
  margin-bottom: var(--space-lg);
}

#marszal-app .batch-progress__bar-wrap {
  width: 100%;
  height: 8px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

#marszal-app .batch-progress__bar {
  height: 100%;
  background: var(--color-gold);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

#marszal-app .batch-progress__text {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

/* --- Batch grid --- */
#marszal-app .batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

#marszal-app .batch-card {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

#marszal-app .batch-card--error {
  border: 1px solid var(--color-warning-border);
  background: var(--color-warning-bg);
}

#marszal-app .batch-card__thumb {
  width: 100%;
  height: 150px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

#marszal-app .batch-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#marszal-app .batch-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#marszal-app .batch-card__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

#marszal-app .batch-card__error {
  font-size: var(--font-size-xs);
  color: var(--color-warning);
}

#marszal-app .batch-actions {
  text-align: center;
}

/* --- Privacy footer --- */
#marszal-app .privacy-footer {
  text-align: center;
  padding: var(--space-xl) 0;
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-surface);
}

#marszal-app .privacy-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

#marszal-app .privacy-footer__icon {
  flex-shrink: 0;
  color: var(--color-accent-green);
}

/* --- Theme toggle (floating) --- */
#marszal-app .theme-toggle {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  z-index: var(--z-controls);
  font-family: inherit;
  padding: 0;
}

#marszal-app .theme-toggle:hover {
  background: var(--color-surface-warm);
  color: var(--color-text);
}

#marszal-app .theme-toggle:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

#marszal-app .theme-toggle__icon {
  width: 20px;
  height: 20px;
}

/* Show sun icon only in dark mode, moon only in light mode */
[data-theme="light"] .theme-toggle__icon--sun { display: none; }
[data-theme="dark"] .theme-toggle__icon--moon { display: none; }

/* --- Mobile adjustments for integration layer --- */
@media (max-width: 767px) {
  #marszal-app .top-bar__inner {
    flex-direction: column;
    gap: var(--space-sm);
  }

  #marszal-app .privacy-badge {
    font-size: var(--font-size-xs);
    text-align: center;
  }

  #marszal-app .page-header__title {
    font-size: var(--font-size-xl);
  }

  #marszal-app .page-header__subtitle {
    font-size: var(--font-size-sm);
  }

  #marszal-app .marketplace-group__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  #marszal-app .marketplace-card {
    padding: 12px;
  }

  #marszal-app .marketplace-card__icon {
    min-height: 36px;
    font-size: 16px;
  }

  #marszal-app .editor-layout {
    grid-template-columns: 1fr;
  }

  #marszal-app .editor-actions {
    flex-direction: column;
  }

  #marszal-app .editor-actions .btn {
    width: 100%;
  }

  #marszal-app .dropzone {
    padding: var(--space-2xl) var(--space-md);
    min-height: 180px;
  }

  #marszal-app .batch-grid {
    grid-template-columns: 1fr;
  }

  #marszal-app .theme-toggle {
    bottom: var(--space-md);
    right: var(--space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  #marszal-app .dropzone--hover {
    animation: none;
  }

  #marszal-app .dropzone__icon--bounce {
    animation: none;
  }

  #marszal-app .marketplace-card:hover {
    transform: none;
  }
}

/* ================================================================== */
/*  CTA Sidebar - marszalstudio                                      */
/* ================================================================== */

/* Post-result CTA (shown after download, Elementor blog CTA style) */
#marszal-app .post-result-cta {
  max-width: 900px;
  margin: 24px auto;
}

#marszal-app .post-result-cta__inner {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

#marszal-app .post-result-cta__text h3 {
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 4px;
  letter-spacing: var(--letter-spacing);
}

#marszal-app .post-result-cta__text p {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}

#marszal-app .post-result-cta__btn {
  display: inline-block;
  white-space: nowrap;
  background: var(--color-gold);
  color: var(--color-text);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  letter-spacing: var(--letter-spacing);
  flex-shrink: 0;
}

#marszal-app .post-result-cta__btn:hover {
  background: var(--color-text);
  color: var(--color-gold);
}

@media (max-width: 767px) {
  #marszal-app .post-result-cta__inner {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
}


/* ==========================================================================
   Marszal Image Resizer - WordPress Nuclear Override Stylesheet
   Every property uses !important to defeat any WordPress/Elementor/theme CSS.
   All selectors scoped under #marszal-app.
   Built: 2026-03-28
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL RESET SCOPED TO #marszal-app
   ========================================================================== */

#marszal-app {
  font-family: "Inter Variable", "InterVariable", "Inter", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #242424 !important;
  letter-spacing: -0.03em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
  direction: ltr !important;
  text-align: left !important;
  word-wrap: break-word !important;
  -webkit-text-size-adjust: 100% !important;
}

#marszal-app *,
#marszal-app *::before,
#marszal-app *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

#marszal-app ::selection {
  background: #FFC702 !important;
  color: #242424 !important;
}


/* ==========================================================================
   2. TYPOGRAPHY OVERRIDES - Kill WordPress inherited styles
   ========================================================================== */

#marszal-app h1,
#marszal-app h2,
#marszal-app h3,
#marszal-app h4,
#marszal-app h5,
#marszal-app h6 {
  font-family: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  text-transform: none !important;
  line-height: 1.25 !important;
}

#marszal-app p {
  font-family: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}

#marszal-app a {
  font-family: inherit !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
  color: inherit !important;
  outline: none !important;
}

#marszal-app span,
#marszal-app div {
  font-family: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

#marszal-app button {
  font-family: inherit !important;
  letter-spacing: -0.03em !important;
  cursor: pointer !important;
  border: none !important;
  background: none !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: inherit !important;
  text-transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#marszal-app input,
#marszal-app select,
#marszal-app textarea {
  font-family: inherit !important;
  letter-spacing: -0.03em !important;
  color: inherit !important;
  margin: 0 !important;
  outline: none !important;
}

#marszal-app label {
  font-family: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

#marszal-app fieldset {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

#marszal-app legend {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
}

#marszal-app ul,
#marszal-app ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#marszal-app li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#marszal-app img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  border: none !important;
  outline: none !important;
}

#marszal-app svg {
  display: block !important;
  overflow: visible !important;
}

#marszal-app table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: none !important;
  background: transparent !important;
}

#marszal-app th,
#marszal-app td {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

#marszal-app hr {
  display: none !important;
}

#marszal-app canvas {
  display: block !important;
}

#marszal-app [hidden] {
  display: none !important;
}


/* ==========================================================================
   3. ACCESSIBILITY - Visually hidden
   ========================================================================== */

#marszal-app .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

#marszal-app .skip-link {
  display: none !important;
}


/* ==========================================================================
   4. HIDDEN ELEMENTS (top-bar, lang-switcher, theme-toggle, page-header)
   In WordPress these are handled by the page itself; hide them.
   ========================================================================== */

#marszal-app .top-bar {
  display: none !important;
}

#marszal-app .lang-switcher {
  display: none !important;
}

#marszal-app .theme-toggle {
  display: none !important;
}

#marszal-app .page-header {
  display: none !important;
}


/* ==========================================================================
   5. CONTAINER - .resizer-app
   ========================================================================== */

#marszal-app .resizer-app {
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}


/* ==========================================================================
   6. STEP CONTAINERS
   ========================================================================== */

#marszal-app .step {
  margin-bottom: 48px !important;
}

#marszal-app .step__header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

#marszal-app .step__number {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #FFC702 !important;
  color: #242424 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

#marszal-app .step__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.03em !important;
  color: #242424 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================================
   7. MARKETPLACE SEARCH
   ========================================================================== */

#marszal-app .marketplace-search {
  margin-bottom: 16px !important;
}

#marszal-app .marketplace-search__input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

#marszal-app .marketplace-search__icon {
  position: absolute !important;
  left: 14px !important;
  color: #A3B1B4 !important;
  pointer-events: none !important;
  width: 18px !important;
  height: 18px !important;
}

#marszal-app .marketplace-search__input {
  width: 100% !important;
  padding: 12px 16px 12px 42px !important;
  border: 2px solid #F5F7FA !important;
  border-radius: 50px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #242424 !important;
  background: #F9FAFB !important;
  letter-spacing: -0.03em !important;
  font-family: inherit !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#marszal-app .marketplace-search__input:focus {
  border-color: #FFC702 !important;
  box-shadow: 0 0 0 3px rgba(255, 199, 2, 0.15) !important;
}

#marszal-app .marketplace-search__input::placeholder {
  color: #A3B1B4 !important;
}


/* ==========================================================================
   8. MARKETPLACE GRID & GROUPS
   ========================================================================== */

#marszal-app .marketplace-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

#marszal-app .marketplace-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#marszal-app .marketplace-group__label {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #A3B1B4 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#marszal-app .marketplace-group__cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 4px !important;
}

#marszal-app .marketplace-grid__empty {
  text-align: center !important;
  color: #A3B1B4 !important;
  font-size: 16px !important;
  padding: 32px !important;
}


/* ==========================================================================
   9. MARKETPLACE CARDS
   ========================================================================== */

#marszal-app .marketplace-card {
  background: #FFFFFF !important;
  border: 2px solid transparent !important;
  border-radius: 16px !important;
  padding: 8px !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 12px rgba(21, 33, 33, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  position: relative !important;
  user-select: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: -0.03em !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.4 !important;
}

#marszal-app .marketplace-card:hover {
  box-shadow: 0 8px 28px rgba(21, 33, 33, 0.12) !important;
  transform: translateY(-2px) !important;
}

#marszal-app .marketplace-card:focus-visible {
  outline: 3px solid #FFC702 !important;
  outline-offset: 2px !important;
}

#marszal-app .marketplace-card:focus:not(:focus-visible) {
  outline: none !important;
}

#marszal-app .marketplace-card--active {
  border-color: #FFC702 !important;
  background: rgba(255, 199, 2, 0.06) !important;
  box-shadow: 0 8px 28px rgba(21, 33, 33, 0.12) !important;
}

#marszal-app .marketplace-card--active::after {
  display: none !important;
}

#marszal-app .marketplace-card__icon {
  width: 100% !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #A3B1B4 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

#marszal-app .marketplace-card__icon svg {
  display: block !important;
  flex-shrink: 0 !important;
  max-width: 90% !important;
  max-height: 36px !important;
}

#marszal-app .marketplace-card--active .marketplace-card__icon {
  background: transparent !important;
}

#marszal-app .marketplace-card__name {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #242424 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

#marszal-app .marketplace-card__badge {
  display: none !important;
}

#marszal-app .marketplace-card__flag {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}

#marszal-app .marketplace-card--active .marketplace-card__flag {
  opacity: 1 !important;
}

#marszal-app .marketplace-card__dim {
  font-size: 11px !important;
  color: #A3B1B4 !important;
  font-weight: 500 !important;
}


/* ==========================================================================
   10. DROPZONE
   ========================================================================== */

#marszal-app .dropzone {
  position: relative !important;
  border: 2px dashed #c0c8cc !important;
  border-radius: 20px !important;
  padding: 48px 24px !important;
  text-align: center !important;
  cursor: pointer !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 240px !important;
  gap: 16px !important;
  outline: none !important;
}

#marszal-app .dropzone:hover,
#marszal-app .dropzone:focus-visible {
  border-color: #FFC702 !important;
  background: rgba(255, 199, 2, 0.03) !important;
}

#marszal-app .dropzone--hover {
  border-color: #FFC702 !important;
  border-style: solid !important;
  background: rgba(255, 199, 2, 0.06) !important;
  box-shadow: 0 0 0 4px rgba(255, 199, 2, 0.2) !important;
  animation: marszal-dropzone-pulse 1.2s ease-in-out infinite !important;
}

#marszal-app .dropzone--has-image {
  border-style: solid !important;
  border-color: #94E945 !important;
  background: rgba(148, 233, 69, 0.1) !important;
  min-height: auto !important;
  padding: 24px !important;
  cursor: default !important;
}

#marszal-app .dropzone--touch {
  background: rgba(255, 199, 2, 0.08) !important;
}

#marszal-app .dropzone__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}

#marszal-app .dropzone__icon {
  width: 56px !important;
  height: 56px !important;
  color: #A3B1B4 !important;
  opacity: 0.6 !important;
  display: block !important;
  margin: 0 auto !important;
}

#marszal-app .dropzone:hover .dropzone__icon {
  color: #FAB702 !important;
  opacity: 0.8 !important;
}

#marszal-app .dropzone--hover .dropzone__icon {
  color: #FAB702 !important;
  opacity: 1 !important;
}

#marszal-app .dropzone__text-primary {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #242424 !important;
  margin: 0 !important;
}

#marszal-app .dropzone__text-secondary {
  font-size: 13px !important;
  color: #A3B1B4 !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

@keyframes marszal-dropzone-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 199, 2, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(255, 199, 2, 0.12); }
}

@keyframes marszal-dropzone-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

#marszal-app .dropzone__icon--bounce {
  animation: marszal-dropzone-bounce 0.8s ease-in-out infinite !important;
}


/* ==========================================================================
   11. EDITOR LAYOUT
   ========================================================================== */

#marszal-app .editor-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 32px !important;
}


/* ==========================================================================
   12. EDITOR PREVIEW
   ========================================================================== */

#marszal-app .editor-preview {
  min-width: 0 !important;
}

#marszal-app .editor-preview__canvas-wrap {
  position: relative !important;
  background: transparent !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 200px !important;
}

#marszal-app .editor-preview__canvas {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 20px !important;
}

#marszal-app .editor-preview__dimensions {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  padding: 4px 12px !important;
  border-radius: 50px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  pointer-events: none !important;
  line-height: 1.4 !important;
}

#marszal-app .editor-preview__info {
  margin-top: 8px !important;
  font-size: 13px !important;
  color: #959797 !important;
  text-align: center !important;
}


/* ==========================================================================
   13. BATCH THUMBNAIL STRIP
   ========================================================================== */

#marszal-app .batch-strip {
  margin-top: 8px !important;
}

#marszal-app .batch-strip__info {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #959797 !important;
  margin-bottom: 6px !important;
}

#marszal-app .batch-strip__thumbs {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding-bottom: 4px !important;
  scrollbar-width: thin !important;
}

#marszal-app .batch-strip__thumb {
  width: 48px !important;
  height: 48px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  opacity: 0.6 !important;
  transition: opacity 0.15s ease !important;
}

#marszal-app .batch-strip__thumb:hover {
  opacity: 0.9 !important;
}

#marszal-app .batch-strip__thumb--active {
  border-color: #FFC702 !important;
  opacity: 1 !important;
}

#marszal-app .batch-strip__thumb--done {
  opacity: 1 !important;
}


/* ==========================================================================
   14. EDITOR CONTROLS
   ========================================================================== */

#marszal-app .editor-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

#marszal-app .editor-actions {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: 0 !important;
}

#marszal-app .control-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#marszal-app .control-group__label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #959797 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: block !important;
}

#marszal-app fieldset.control-group {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}


/* ==========================================================================
   15. PILL GROUPS
   ========================================================================== */

#marszal-app .pill-group {
  display: flex !important;
  gap: 4px !important;
  background: #F5F7FA !important;
  border-radius: 50px !important;
  padding: 3px !important;
  flex-wrap: wrap !important;
}

#marszal-app .pill {
  padding: 8px 16px !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #959797 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  letter-spacing: -0.03em !important;
  font-family: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  text-transform: none !important;
}

#marszal-app .pill:hover {
  color: #242424 !important;
}

#marszal-app .pill--active {
  background: #FFFFFF !important;
  color: #242424 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

#marszal-app .pill--unsupported {
  opacity: 0.4 !important;
  text-decoration: line-through !important;
}

#marszal-app .pill:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

#marszal-app .pill:focus-visible {
  outline: 3px solid #FFC702 !important;
  outline-offset: 2px !important;
}


/* ==========================================================================
   16. QUALITY SLIDER
   ========================================================================== */

#marszal-app .slider-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

#marszal-app .slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  flex: 1 !important;
  height: 6px !important;
  border-radius: 50px !important;
  background: #F5F7FA !important;
  outline: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#marszal-app .slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #FFC702 !important;
  cursor: pointer !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(21, 33, 33, 0.06) !important;
}

#marszal-app .slider::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #FFC702 !important;
  cursor: pointer !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(21, 33, 33, 0.06) !important;
}

#marszal-app .slider:focus-visible {
  outline: 3px solid #FFC702 !important;
  outline-offset: 4px !important;
  border-radius: 50px !important;
}

#marszal-app .slider__value {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #242424 !important;
  min-width: 40px !important;
  text-align: right !important;
}

/* Also catch generic range inputs inside our app */
#marszal-app input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 6px !important;
  background: #F5F7FA !important;
  border-radius: 50px !important;
  border: none !important;
  outline: none !important;
}

#marszal-app input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #FFC702 !important;
  cursor: pointer !important;
  border: 3px solid #FFFFFF !important;
}

#marszal-app input[type="range"]::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #FFC702 !important;
  cursor: pointer !important;
  border: 3px solid #FFFFFF !important;
}


/* ==========================================================================
   17. DIMENSIONS & SIZE DISPLAY
   ========================================================================== */

#marszal-app .dimensions-display {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #242424 !important;
}

#marszal-app .size-display {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #242424 !important;
}


/* ==========================================================================
   18. SPECS PANEL
   ========================================================================== */

#marszal-app .specs-panel {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  margin-top: 0 !important;
}

#marszal-app .specs-panel__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #242424 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

#marszal-app .specs-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
}

#marszal-app .specs-table tr {
  background: transparent !important;
  border: none !important;
}

#marszal-app .specs-table th {
  text-align: left !important;
  font-weight: 500 !important;
  color: #959797 !important;
  padding: 8px 8px 8px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: transparent !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

#marszal-app .specs-table td {
  text-align: right !important;
  font-weight: 600 !important;
  color: #242424 !important;
  padding: 8px 0 8px 8px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: transparent !important;
  font-size: 14px !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

#marszal-app .specs-table tr:last-child th,
#marszal-app .specs-table tr:last-child td {
  border-bottom: none !important;
}

#marszal-app .specs-panel__notes {
  margin-top: 16px !important;
  font-size: 13px !important;
  font-style: italic !important;
  color: #959797 !important;
  line-height: 1.5 !important;
}

#marszal-app .specs-panel__docs-link {
  display: inline-block !important;
  margin-top: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #FFC702 !important;
  text-decoration: none !important;
}

#marszal-app .specs-panel__docs-link:hover {
  color: #FAB702 !important;
  text-decoration: underline !important;
}


/* ==========================================================================
   19. WARNINGS
   ========================================================================== */

#marszal-app .warnings {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

#marszal-app .warning {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

#marszal-app .warning svg {
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

#marszal-app .warning--error {
  background: rgba(255, 107, 107, 0.1) !important;
  border: 1px solid rgba(255, 107, 107, 0.3) !important;
  color: #FF6B6B !important;
}

#marszal-app .warning--warning {
  background: rgba(255, 186, 0, 0.1) !important;
  border: 1px solid rgba(255, 186, 0, 0.3) !important;
  color: #C88B00 !important;
}

#marszal-app .warning--info {
  background: rgba(77, 168, 218, 0.1) !important;
  border: 1px solid rgba(77, 168, 218, 0.3) !important;
  color: #4DA8DA !important;
}

#marszal-app .warning-badge {
  font-size: 13px !important;
  color: #FF6B6B !important;
  padding: 8px 12px !important;
  background: rgba(255, 107, 107, 0.1) !important;
  border-radius: 8px !important;
}


/* ==========================================================================
   20. BUTTONS
   ========================================================================== */

#marszal-app .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  border: 2px solid transparent !important;
  border-radius: 50px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  padding: 14px 32px !important;
  background: none !important;
  color: inherit !important;
  text-transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#marszal-app .btn svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

#marszal-app .btn--primary {
  background: #FFC702 !important;
  color: #242424 !important;
  border-color: #FFC702 !important;
}

#marszal-app .btn--primary:hover {
  background: #242424 !important;
  color: #FFC702 !important;
  border-color: #242424 !important;
}

#marszal-app .btn--primary:active {
  transform: scale(0.98) !important;
}

#marszal-app .btn--primary:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

#marszal-app .btn--secondary {
  background: transparent !important;
  color: #242424 !important;
  border: 2px solid #242424 !important;
}

#marszal-app .btn--secondary:hover {
  background: #242424 !important;
  color: #FFFFFF !important;
}

#marszal-app .btn--secondary:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

#marszal-app .btn--small {
  padding: 8px 20px !important;
  font-size: 13px !important;
}

#marszal-app .btn:focus-visible {
  outline: 3px solid #FFC702 !important;
  outline-offset: 2px !important;
}


/* ==========================================================================
   21. BATCH PROGRESS
   ========================================================================== */

#marszal-app .batch-progress {
  margin-bottom: 24px !important;
}

#marszal-app .batch-progress__bar-wrap {
  width: 100% !important;
  height: 8px !important;
  background: #F5F7FA !important;
  border-radius: 50px !important;
  overflow: hidden !important;
}

#marszal-app .batch-progress__bar {
  height: 100% !important;
  background: #FFC702 !important;
  border-radius: 50px !important;
  transition: width 0.3s ease !important;
}

#marszal-app .batch-progress__text {
  display: block !important;
  margin-top: 4px !important;
  font-size: 13px !important;
  color: #959797 !important;
  text-align: center !important;
}


/* ==========================================================================
   22. BATCH GRID & BATCH CARDS
   ========================================================================== */

#marszal-app .batch-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

#marszal-app .batch-card {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 16px !important;
  box-shadow: 0 2px 12px rgba(21, 33, 33, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: hidden !important;
}

#marszal-app .batch-card--error {
  border: 1px solid rgba(255, 107, 107, 0.3) !important;
  background: rgba(255, 107, 107, 0.1) !important;
}

#marszal-app .batch-card__thumb {
  width: 100% !important;
  height: 150px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  background: #F5F7FA !important;
  display: block !important;
}

#marszal-app .batch-card__info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#marszal-app .batch-card__name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #242424 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#marszal-app .batch-card__meta {
  font-size: 11px !important;
  color: #959797 !important;
}

#marszal-app .batch-card__error {
  font-size: 11px !important;
  color: #FF6B6B !important;
}

#marszal-app .batch-actions {
  text-align: center !important;
}


/* ==========================================================================
   23. POST-RESULT CTA
   ========================================================================== */

#marszal-app .post-result-cta {
  max-width: 900px !important;
  margin: 24px auto !important;
}

#marszal-app .post-result-cta__inner {
  background: #F5F7FA !important;
  border-radius: 20px !important;
  padding: 28px 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

#marszal-app .post-result-cta__text h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #242424 !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.03em !important;
  padding: 0 !important;
}

#marszal-app .post-result-cta__text p {
  font-size: 14px !important;
  color: #959797 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#marszal-app .post-result-cta__btn {
  display: inline-block !important;
  white-space: nowrap !important;
  background: #FFC702 !important;
  color: #242424 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  letter-spacing: -0.03em !important;
  flex-shrink: 0 !important;
}

#marszal-app .post-result-cta__btn:hover {
  background: #242424 !important;
  color: #FFC702 !important;
}


/* ==========================================================================
   24. PRIVACY FOOTER
   ========================================================================== */

#marszal-app .privacy-footer {
  text-align: center !important;
  padding: 32px 0 !important;
  margin-top: 48px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

#marszal-app .privacy-footer__inner {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #959797 !important;
}

#marszal-app .privacy-footer__icon {
  flex-shrink: 0 !important;
  color: #94E945 !important;
  width: 20px !important;
  height: 20px !important;
}


/* ==========================================================================
   25. PRIVACY BADGE (in top-bar, but may show in other places)
   ========================================================================== */

#marszal-app .privacy-badge {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #959797 !important;
}

#marszal-app .privacy-badge__icon {
  flex-shrink: 0 !important;
  color: #94E945 !important;
}


/* ==========================================================================
   26. TOAST NOTIFICATIONS
   ========================================================================== */

#marszal-app .resizer-toast {
  position: fixed !important;
  bottom: 32px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(100px) !important;
  padding: 16px 24px !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  z-index: 100 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  box-shadow: 0 8px 32px rgba(21, 33, 33, 0.12) !important;
}

#marszal-app .resizer-toast.is-visible {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

#marszal-app .resizer-toast--success {
  background: #242424 !important;
  color: #FFFFFF !important;
}

#marszal-app .resizer-toast--error {
  background: #FF6B6B !important;
  color: #FFFFFF !important;
}


/* ==========================================================================
   27. PROCESSING OVERLAY / SPINNER
   ========================================================================== */

#marszal-app .resizer-processing {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  border-radius: 20px !important;
  z-index: 50 !important;
}

#marszal-app .resizer-processing__spinner {
  width: 40px !important;
  height: 40px !important;
  border: 3px solid #F5F7FA !important;
  border-top-color: #FFC702 !important;
  border-radius: 50% !important;
  animation: marszal-spinner-rotate 0.8s linear infinite !important;
}

@keyframes marszal-spinner-rotate {
  to { transform: rotate(360deg); }
}

#marszal-app .resizer-processing__text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #959797 !important;
}


/* ==========================================================================
   28. LANGUAGE SWITCHER (standalone, if not hidden)
   ========================================================================== */

#marszal-app .lang-switcher__btn {
  padding: 6px 14px !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #A3B1B4 !important;
  background: transparent !important;
  cursor: pointer !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  border: none !important;
  font-family: inherit !important;
}

#marszal-app .lang-switcher__btn:hover {
  color: #242424 !important;
}

#marszal-app .lang-switcher__btn--active {
  background: #FFC702 !important;
  color: #242424 !important;
}


/* ==========================================================================
   29. OUTPUT LABELS & VALUES (generic)
   ========================================================================== */

#marszal-app .output-label {
  font-size: 13px !important;
  color: #959797 !important;
}

#marszal-app .output-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #242424 !important;
}

#marszal-app .controls-section {
  margin-bottom: 20px !important;
}

#marszal-app .controls-section__label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #959797 !important;
  margin-bottom: 8px !important;
  display: block !important;
}


/* ==========================================================================
   30. BADGES
   ========================================================================== */

#marszal-app .resizer-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

#marszal-app .resizer-badge--required {
  background: rgba(255, 199, 2, 0.15) !important;
  color: #FAB702 !important;
}

#marszal-app .resizer-badge--warning {
  background: rgba(255, 107, 107, 0.1) !important;
  color: #FF6B6B !important;
  border: 1px solid rgba(255, 107, 107, 0.3) !important;
}

#marszal-app .resizer-badge--info {
  background: rgba(77, 168, 218, 0.1) !important;
  color: #4DA8DA !important;
}

#marszal-app .resizer-badge--success {
  background: rgba(148, 233, 69, 0.1) !important;
  color: #94E945 !important;
}

#marszal-app .resizer-badge--white-bg {
  background: rgba(255, 107, 107, 0.1) !important;
  color: #FF6B6B !important;
  border: 1px solid rgba(255, 107, 107, 0.3) !important;
}


/* ==========================================================================
   31. SUCCESS MESSAGE
   ========================================================================== */

#marszal-app .resizer-success {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 16px !important;
  border-radius: 10px !important;
  background: rgba(148, 233, 69, 0.1) !important;
  border: 1px solid rgba(148, 233, 69, 0.3) !important;
  margin-top: 16px !important;
}

#marszal-app .resizer-success__text {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #94E945 !important;
  line-height: 1.4 !important;
}


/* ==========================================================================
   32. DOWNLOAD AREA
   ========================================================================== */

#marszal-app .resizer-download {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 32px !important;
  background: #F9FAFB !important;
  border-radius: 20px !important;
  text-align: center !important;
}

#marszal-app .resizer-download__size {
  font-size: 13px !important;
  color: #959797 !important;
}

#marszal-app .resizer-download__size strong {
  color: #242424 !important;
  font-weight: 700 !important;
}

#marszal-app .resizer-download__actions {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}


/* ==========================================================================
   33. FILE INPUT (hidden)
   ========================================================================== */

#marszal-app .dropzone input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 1 !important;
}

#marszal-app .dropzone--has-image input[type="file"] {
  display: none !important;
}


/* ==========================================================================
   34. CUSTOM SCROLLBARS
   ========================================================================== */

#marszal-app .marketplace-group__cards::-webkit-scrollbar,
#marszal-app .batch-strip__thumbs::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

#marszal-app .marketplace-group__cards::-webkit-scrollbar-track,
#marszal-app .batch-strip__thumbs::-webkit-scrollbar-track {
  background: transparent !important;
}

#marszal-app .marketplace-group__cards::-webkit-scrollbar-thumb,
#marszal-app .batch-strip__thumbs::-webkit-scrollbar-thumb {
  background: #A3B1B4 !important;
  border-radius: 50px !important;
}


/* ==========================================================================
   35. ADDITIONAL WORDPRESS OVERRIDES
   Kill common WordPress/Elementor/theme leaks
   ========================================================================== */

/* Elementor widget wrappers */
#marszal-app .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}

/* WordPress paragraph defaults */
#marszal-app p:last-child {
  margin-bottom: 0 !important;
}

/* WordPress images */
#marszal-app .wp-image,
#marszal-app .size-full,
#marszal-app .aligncenter,
#marszal-app .alignnone {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* WordPress link colors */
#marszal-app a:visited {
  color: inherit !important;
}

#marszal-app a:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* WordPress entry-content defaults */
#marszal-app .entry-content,
#marszal-app .post-content,
#marszal-app article {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* Kill WP admin bar push */
#marszal-app {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Kill Elementor Pro animations on our elements */
#marszal-app .elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
}


/* ==========================================================================
   36. RESPONSIVE - Mobile (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {
  #marszal-app .marketplace-group__cards {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
  }

  #marszal-app .marketplace-card {
    padding: 6px !important;
  }

  #marszal-app .marketplace-card__icon {
    min-height: 36px !important;
    font-size: 16px !important;
  }

  #marszal-app .editor-layout {
    grid-template-columns: 1fr !important;
  }

  #marszal-app .editor-actions {
    flex-direction: column !important;
  }

  #marszal-app .editor-actions .btn {
    width: 100% !important;
  }

  #marszal-app .dropzone {
    padding: 32px 16px !important;
    min-height: 180px !important;
  }

  #marszal-app .batch-grid {
    grid-template-columns: 1fr !important;
  }

  #marszal-app .pill-group {
    flex-wrap: wrap !important;
  }

  #marszal-app .post-result-cta__inner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px !important;
  }

  #marszal-app .step__title {
    font-size: 18px !important;
  }

  #marszal-app .resizer-app {
    padding: 0 12px !important;
  }

  #marszal-app .privacy-footer__inner {
    flex-direction: column !important;
    gap: 4px !important;
  }
}


/* ==========================================================================
   37. RESPONSIVE - Desktop (min-width: 768px)
   ========================================================================== */

@media (min-width: 768px) {
  #marszal-app .editor-layout {
    grid-template-columns: 1fr 320px !important;
  }
}


/* ==========================================================================
   38. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #marszal-app .dropzone--hover {
    animation: none !important;
  }

  #marszal-app .dropzone__icon--bounce {
    animation: none !important;
  }

  #marszal-app .marketplace-card:hover {
    transform: none !important;
  }

  #marszal-app .batch-progress__bar {
    transition: none !important;
  }

  #marszal-app .batch-strip__thumb {
    transition: none !important;
  }

  #marszal-app .marketplace-card {
    transition: none !important;
  }
}

#marszal-app .theme-toggle, #marszal-app .top-bar, #marszal-app .lang-switcher, #marszal-app .page-header { display: none !important; }

#marszal-app canvas, #marszal-app .editor-preview__canvas { border-radius: 0 !important; }
#marszal-app .crop-overlay { display: none; position: absolute !important; pointer-events: none !important; z-index: 10 !important; overflow: visible !important; }
#marszal-app .crop-overlay[style*="display:block"] { display: block !important; }
#marszal-app .crop-overlay rect { stroke: #FFC702; stroke-width: 2; fill: none; stroke-dasharray: 8, 6; animation: dash-march 0.6s linear infinite; }
@keyframes dash-march { to { stroke-dashoffset: -14; } }


#marszal-app > svg.svg-sprite { display: none !important; height: 0 !important; width: 0 !important; position: absolute !important; }
#marszal-app svg:not(.svg-sprite):not(.crop-overlay) { display: block !important; }
#marszal-app canvas, #marszal-app .editor-preview__canvas { border-radius: 0 !important; }
#marszal-app .crop-overlay { position: absolute !important; pointer-events: none !important; z-index: 10 !important; overflow: visible !important; }
#marszal-app .crop-overlay rect { stroke: #FFC702 !important; stroke-width: 2 !important; fill: none !important; stroke-dasharray: 8 6 !important; animation: dash-march 0.6s linear infinite !important; }
@keyframes dash-march { to { stroke-dashoffset: -14; } }


/* --- Marching ants border (div-based, replaces SVG overlay) --- */
#marszal-app .marching-ants-border {
  position: absolute !important;
  inset: -3px !important;
  pointer-events: none !important;
  z-index: 10 !important;
  background-image:
    linear-gradient(90deg, #FFC702 50%, transparent 50%),
    linear-gradient(90deg, #FFC702 50%, transparent 50%),
    linear-gradient(0deg, #FFC702 50%, transparent 50%),
    linear-gradient(0deg, #FFC702 50%, transparent 50%) !important;
  background-size: 12px 2.5px, 12px 2.5px, 2.5px 12px, 2.5px 12px !important;
  background-position: 0 0, 0 100%, 0 0, 100% 0 !important;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y !important;
  animation: marching-ants 0.4s linear infinite !important;
  display: none;
}

@keyframes marching-ants {

  to {
    background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px;
  }
}
.current-menu-item > a[href*="zmiana-rozmiaru"], .current-menu-item > a[href*="resize-image"], .current-menu-item > a[href*="bild-verkleinern"], .current_page_item > a[href*="zmiana-rozmiaru"], .current_page_item > a[href*="resize-image"], .current_page_item > a[href*="bild-verkleinern"] { color: #242424 !important; }