:root {
        --ink: #0f0f12;
        --paper: #f5f4f0;
        --accent: #2563eb;
        --accent-light: #dbeafe;
        --muted: #6b7280;
        --border: #e2e0db;
        --card: #ffffff;
      }

      * {
        box-sizing: border-box;
      }

      body {
        font-family: "Poppins", sans-serif;
        background: var(--paper);
        color: var(--ink);
        min-height: 100vh;
      }

      h1,
      h2,
      h3,
      .syne {
        font-family: "Syne", sans-serif;
      }

      /* Checker pattern for transparent preview */
      .checker {
        background-image:
          linear-gradient(45deg, #ccc 25%, transparent 25%),
          linear-gradient(-45deg, #ccc 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, #ccc 75%),
          linear-gradient(-45deg, transparent 75%, #ccc 75%);
        background-size: 16px 16px;
        background-position:
          0 0,
          0 8px,
          8px -8px,
          -8px 0px;
        background-color: #fff;
      }

      .drop-zone {
        border: 2px dashed var(--border);
        transition:
          border-color 0.2s,
          background 0.2s;
      }
      .drop-zone:hover,
      .drop-zone.drag-over {
        border-color: var(--accent);
        background: var(--accent-light);
      }

      input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: var(--border);
        outline: none;
      }
      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--accent);
        cursor: pointer;
        border: 2px solid white;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      }
      input[type="range"]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--accent);
        cursor: pointer;
        border: 2px solid white;
      }

      input[type="color"] {
        -webkit-appearance: none;
        width: 42px;
        height: 42px;
        border: 2px solid var(--border);
        border-radius: 8px;
        cursor: pointer;
        padding: 2px;
        background: none;
      }
      input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
        border-radius: 6px;
      }
      input[type="color"]::-webkit-color-swatch {
        border: none;
        border-radius: 5px;
      }

      .btn-primary {
        background: var(--accent);
        color: #fff;
        font-family: "Syne", sans-serif;
        font-weight: 700;
        letter-spacing: 0.01em;
        transition:
          background 0.2s,
          transform 0.1s,
          box-shadow 0.2s;
      }
      .btn-primary:hover {
        background: #1d4ed8;
        box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
        transform: translateY(-1px);
      }
      .btn-primary:active {
        transform: translateY(0);
      }
      .btn-primary:disabled {
        background: #93c5fd;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      .btn-secondary {
        background: var(--card);
        color: var(--ink);
        border: 1.5px solid var(--border);
        font-family: "Syne", sans-serif;
        font-weight: 600;
        transition:
          border-color 0.2s,
          background 0.2s,
          transform 0.1s;
      }
      .btn-secondary:hover {
        border-color: var(--accent);
        background: var(--accent-light);
        transform: translateY(-1px);
      }
      .btn-secondary:active {
        transform: translateY(0);
      }
      .btn-secondary:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
      }

      .badge {
        font-family: "Syne", sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        background: var(--ink);
        color: var(--paper);
        padding: 2px 8px;
        border-radius: 3px;
      }

      .card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 16px;
      }

      .noise-bg {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
        background-size: 200px;
        opacity: 0.5;
      }

      .tag-pill {
        background: var(--accent-light);
        color: var(--accent);
        font-family: "Syne", sans-serif;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        padding: 2px 10px;
        border-radius: 99px;
      }

      .preview-label {
        position: absolute;
        top: 10px;
        left: 10px;
        background: rgba(0, 0, 0, 0.55);
        color: #fff;
        font-family: "Syne", sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: 99px;
        backdrop-filter: blur(6px);
      }

      #processingOverlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(4px);
        z-index: 999;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      #processingOverlay.active {
        display: flex;
      }

      .spinner {
        width: 44px;
        height: 44px;
        border: 3px solid var(--border);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      .eyedrop-btn {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 6px 12px;
        font-family: "Syne", sans-serif;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        cursor: pointer;
        backdrop-filter: blur(6px);
        transition: background 0.2s;
      }
      .eyedrop-btn:hover {
        background: rgba(37, 99, 235, 0.8);
      }
      .eyedrop-btn.active {
        background: rgba(37, 99, 235, 0.95);
      }

      canvas {
        display: none;
      }

      @media (max-width: 640px) {
        .preview-grid {
          grid-template-columns: 1fr !important;
        }
      }

/* ─── Theme: default dark, switchable light ─────────────────────────────── */
:root,
body.theme-dark {
  --ink: #f8fafc;
  --paper: #070b14;
  --accent: #60a5fa;
  --accent-light: rgba(96, 165, 250, 0.16);
  --muted: #94a3b8;
  --border: #1e293b;
  --card: #0f172a;
  --card-soft: #111827;
  --header: rgba(15, 23, 42, 0.84);
  --checker-light: #334155;
  --checker-dark: #0f172a;
}

body.theme-light {
  --ink: #0f0f12;
  --paper: #f5f4f0;
  --accent: #2563eb;
  --accent-light: #dbeafe;
  --muted: #6b7280;
  --border: #e2e0db;
  --card: #ffffff;
  --card-soft: #f3f4f6;
  --header: rgba(255, 255, 255, 0.8);
  --checker-light: #ccc;
  --checker-dark: #fff;
}

body {
  transition: background 0.25s ease, color 0.25s ease;
}

.app-header {
  border-color: var(--border) !important;
  background: var(--header) !important;
}

.app-footer-border {
  border-color: var(--border) !important;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  font-family: "Syne", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}

.theme-toggle:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-1px);
}

body.theme-dark .card,
body.theme-dark .btn-secondary,
body.theme-dark select,
body.theme-dark input[type="color"] {
  background: var(--card);
  color: var(--ink);
  border-color: var(--border);
}

body.theme-dark .drop-zone {
  border-color: var(--border);
  background: rgba(15, 23, 42, 0.52);
}

body.theme-dark .drop-zone:hover,
body.theme-dark .drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-light);
}

body.theme-dark .checker {
  background-image:
    linear-gradient(45deg, var(--checker-light) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker-light) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker-light) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker-light) 75%);
  background-color: var(--checker-dark);
}

body.theme-dark #processingOverlay {
  background: rgba(7, 11, 20, 0.85);
}

/* Override common Tailwind utility colors so the separated CSS controls theme */
body.theme-dark .bg-white,
body.theme-dark .bg-white\/80 {
  background-color: var(--header) !important;
}
body.theme-dark .bg-gray-100,
body.theme-dark .bg-blue-50 {
  background-color: var(--card-soft) !important;
}
body.theme-dark .bg-blue-100 {
  background-color: var(--accent-light) !important;
}
body.theme-dark .border-gray-100,
body.theme-dark .border-gray-200,
body.theme-dark .border-blue-100 {
  border-color: var(--border) !important;
}
body.theme-dark .text-gray-300,
body.theme-dark .text-gray-400,
body.theme-dark .text-gray-500 {
  color: var(--muted) !important;
}
body.theme-dark .text-blue-500,
body.theme-dark .text-blue-600,
body.theme-dark .text-blue-700 {
  color: var(--accent) !important;
}
body.theme-dark .text-blue-600.bg-blue-50,
body.theme-dark .text-blue-600.bg-blue-50:hover {
  background-color: var(--accent-light) !important;
}
body.theme-dark .badge {
  background: #e2e8f0;
  color: #020617;
}
body.theme-dark .tag-pill {
  background: var(--accent-light);
  color: #93c5fd;
}
body.theme-dark .btn-primary:disabled {
  background: #1e40af;
  color: #bfdbfe;
}
body.theme-dark input[type="range"] {
  background: var(--border);
}