/* ==========================================================
   OUTPAINT.APP — Splatoon (Inkopolis) skin

   Pairs with app-layout.css. This file owns visual treatment
   only — colors, fonts, backgrounds, borders, box-shadows,
   text-shadows, decorative pseudos, hover transforms,
   border-radius (mostly zero — splat is rectilinear chewed-edge).
   ========================================================== */

/* Kill the splat-btn ribbon globally — the colored band sitting
   just below every .splat-btn from splat-ui.css. App-side direction:
   buttons stay rectangular and clean, no decorative under-ribbon.
   Remove this rule if the ribbon is wanted anywhere again. */
.splat-btn::after { display: none; }

/* Gallery REFRESH — solid rounded pill, sized prominent. Drops
   the chewed clip + idle rotate from .splat-btn; keeps the
   yellow + black border. */
#btnGalleryRefresh {
  clip-path: none;
  transform: none;
  border-radius: 12px;
  padding: 10px 22px;
  font-size: 13px;
  border-width: 3px;
  box-shadow: 4px 4px 0 var(--splat-foreground-ink);
}
#btnGalleryRefresh:hover { transform: scale(1.04); }
#btnGalleryRefresh:active { transform: scale(0.96); }

/* LOG OUT button — splat-btn--ghost paints cyan-dashed-on-transparent,
   which disappears against the appbar's right-side cyan gradient.
   Force solid ink border + ink text so it reads on any hue under it. */
#btnLogout {
  border: 3px solid var(--splat-foreground-ink);
  border-style: solid;
  color: var(--splat-foreground-ink);
  background: transparent;
}
#btnLogout:hover {
  background: var(--splat-foreground-ink);
  color: var(--splat-foreground);
}

/* ----- Page shell ----- */
body {
  font-family: var(--splat-body);
  color: var(--splat-foreground);
  background: var(--splat-bg-deep);
}
.splat-bg {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 123, 31, 0.08), transparent 45%),
    radial-gradient(ellipse at 82% 88%, rgba(0, 210, 255, 0.07), transparent 50%),
    var(--splat-bg-deep);
  z-index: -1;
}

/* ==========================================================
   APP BAR
   ========================================================== */
.op-appbar {
  background: linear-gradient(90deg, var(--splat-orange) 0%, var(--splat-pink) 50%, var(--splat-cyan) 100%);
  border-bottom: 4px solid var(--splat-foreground-ink);
  box-shadow: 0 4px 0 var(--splat-foreground-ink);
}
/* Hamburger — ink bars over the gradient bar. */
.op-appbar__hamburger { color: var(--splat-foreground-ink); }
/* Mobile menu drawer surface. .is-open opens it from JS; the
   transform/opacity transitions live in app-layout.css. */
@media (max-width: 760px) {
  .op-appbar__menu {
    background: var(--splat-bg-deep);
    border-bottom: 4px solid var(--splat-foreground-ink);
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25);
  }
  /* Zero the playful rotations on the appbar — phone real estate
     is too tight for the off-axis read; tilted text starts to look
     accidental rather than designed. */
  .op-appbar__title { transform: none; }
  .op-tab,
  .op-tab:nth-child(2),
  .op-tab.is-active { transform: none; }

  /* Clean up the auth pills inside the drawer — the chewed-edge
     clip + tilt look messy when stacked vertically in a small menu.
     Square-edged rounded pills with solid ink borders read as
     "informative" instead of "accidental graffiti". */
  .op-appbar__menu .op-auth__credits {
    clip-path: none;
    filter: none;
    border: 3px solid var(--splat-foreground-ink);
    border-radius: 10px;
    transform: none;
    padding: 8px 14px;
    font-size: 13px;
    text-align: center;
  }
  .op-appbar__menu .op-auth__credits:hover {
    background: var(--splat-orange);
    transform: scale(1.02);
  }
  .op-appbar__menu .op-auth__email {
    transform: none;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12px;
    text-align: center;
  }
  /* Login / logout buttons sit in the same drawer; match them to
     the chip silhouette so the menu reads as one consistent stack. */
  .op-appbar__menu #btnLogin,
  .op-appbar__menu #btnLogout {
    transform: none;
    border-radius: 10px;
    padding: 10px 16px;
    border-style: solid;
    border-color: var(--splat-foreground-ink);
    border-width: 3px;
  }
}
.op-appbar__title {
  font-family: var(--splat-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--splat-foreground);
  text-shadow: 3px 3px 0 var(--splat-foreground-ink);
  transform: rotate(-2deg);
}

/* Tabs */
.op-tab {
  font-family: var(--splat-display);
  background: var(--splat-bg-cream);
  color: var(--splat-foreground-ink);
  border: 3px solid var(--splat-foreground-ink);
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transform: rotate(-2deg);
  transition: transform var(--op-dur-fast) var(--op-ease),
              background var(--op-dur-fast),
              box-shadow var(--op-dur-fast);
}
.op-tab:nth-child(2) { transform: rotate(1.5deg); }
.op-tab:hover { transform: rotate(0) scale(1.05); background: var(--splat-cyan-bright); }
.op-tab.is-active {
  background: var(--splat-orange);
  color: var(--splat-foreground-ink);
  transform: rotate(0) scale(1.06);
  box-shadow: 4px 4px 0 var(--splat-foreground-ink);
}

/* Auth slot */
.op-auth__credits {
  font-family: var(--splat-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--splat-foreground-ink);
  background: var(--splat-yellow);
  /* Outline via drop-shadow filter rather than `border` — clip-path
     would slice CSS borders along the polygon edges; drop-shadow
     runs after clip so the outline follows the silhouette. */
  filter:
    drop-shadow( 2px  0 0 var(--splat-foreground-ink))
    drop-shadow(-2px  0 0 var(--splat-foreground-ink))
    drop-shadow( 0  2px 0 var(--splat-foreground-ink))
    drop-shadow( 0 -2px 0 var(--splat-foreground-ink));
  white-space: nowrap;
  cursor: pointer;
  clip-path: polygon(6% 0,96% 4%,100% 92%,2% 100%);
  transform: rotate(-2deg);
  transition: transform var(--op-dur-fast) var(--op-ease),
              background var(--op-dur-fast);
}
.op-auth__credits:hover {
  transform: rotate(0) scale(1.06);
  background: var(--splat-orange);
}
.op-auth__email {
  font-family: var(--splat-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--splat-foreground-ink);
  background: var(--splat-bg-cream);
  border: 2px solid var(--splat-foreground-ink);
  transform: rotate(-1.5deg);
}

/* Drop the chewed-edge clip-path and rim shadow on the auth +
   add-image buttons — they fight the clean-rectangle reading. */
#btnLogin, #btnLogout, #btnAddImage { clip-path: none; }
#btnLogin::after, #btnLogout::after, #btnAddImage::after { content: none; }

.op-btn { font-size: 12px; }
.op-btn.splat-btn--sm { font-size: 11px; }

/* Theme dropdown */
.op-theme-trigger {
  background: var(--splat-bg-cream);
  color: var(--splat-foreground-ink);
  border: 3px solid var(--splat-foreground-ink);
  font-family: var(--splat-display);
  letter-spacing: 0.06em;
  box-shadow: 3px 3px 0 var(--splat-foreground-ink);
  transform: rotate(-1.5deg);
  transition: transform var(--op-dur-fast) var(--op-ease),
              background var(--op-dur-fast);
}
.op-theme-trigger:hover {
  transform: rotate(0) scale(1.05);
  background: var(--splat-yellow);
}
.op-theme-trigger__label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}
.op-theme-trigger__sep { opacity: 0.35; font-weight: 400; }
.op-theme-arrow { font-size: 10px; color: var(--splat-foreground-ink); }
.op-theme-menu {
  background: var(--splat-bg-panel);
  border: 3px solid var(--splat-foreground-ink);
  box-shadow: 4px 4px 0 var(--splat-foreground-ink);
}
.op-theme-option {
  background: var(--splat-bg-cream);
  color: var(--splat-foreground-ink);
  border: 2px solid var(--splat-foreground-ink);
  font-family: var(--splat-display);
  font-size: 11px;
  letter-spacing: 0.05em;
  transition: background var(--op-dur-fast);
}
.op-theme-option:hover { background: var(--splat-yellow); }
.op-theme-option.is-active {
  background: var(--splat-orange);
  color: var(--splat-foreground-ink);
}

/* ==========================================================
   STAGE FRAME + CANVAS
   ========================================================== */
.op-stage__frame {
  background:
    repeating-conic-gradient(rgba(255, 245, 224, 0.08) 0% 25%, transparent 0% 50%) 50% / 24px 24px,
    var(--splat-bg-panel);
  border: 3px solid var(--splat-foreground-ink);
  box-shadow: 6px 6px 0 var(--splat-foreground-ink);
}
.op-stage__frame.is-dragover {
  border-color: var(--splat-cyan);
  box-shadow: 6px 6px 0 var(--splat-foreground-ink), inset 0 0 0 3px var(--splat-cyan);
}
.op-canvas {
  background: var(--splat-bg-cream);
  border: 3px solid var(--splat-foreground-ink);
  box-shadow: 4px 4px 0 var(--splat-foreground-ink);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.op-canvas:active { cursor: grabbing; }
.op-canvas.is-empty { cursor: default; }

/* Drop hint — empty-canvas CTA. Goal: read at a glance against
   the white canvas, dominate the visual center, lean into the
   stacked-flat-shadow splat aesthetic. */
.op-drop-hint {
  color: var(--splat-foreground);
  font-family: var(--splat-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  gap: 22px;
}
.op-drop-hint__glyph {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--splat-yellow);
  color: var(--splat-foreground-ink);
  border: 4px solid var(--splat-foreground-ink);
  font-size: 56px;
  font-family: var(--splat-display);
  line-height: 1;
  transform: rotate(-4deg);
  /* Double offset: pink "back plate" + ink hard shadow underneath.
     Reads as two stacked layers, classic splat poster move. */
  box-shadow:
    6px 6px 0 var(--splat-pink),
    10px 10px 0 var(--splat-foreground-ink);
  transition: transform var(--op-dur-fast) var(--op-ease),
              box-shadow var(--op-dur-fast);
}
.op-drop-hint__glyph:hover {
  transform: rotate(0) scale(1.06);
  box-shadow:
    8px 8px 0 var(--splat-pink),
    14px 14px 0 var(--splat-foreground-ink);
}
.op-drop-hint__glyph:active {
  transform: rotate(2deg) scale(0.96);
  box-shadow:
    3px 3px 0 var(--splat-pink),
    5px 5px 0 var(--splat-foreground-ink);
}
.op-drop-hint__line {
  font-size: 18px;
  background: var(--splat-foreground-ink);
  color: var(--splat-foreground);
  border: 4px solid var(--splat-foreground-ink);
  padding: 12px 22px;
  transform: rotate(1.5deg);
  box-shadow: -6px 6px 0 var(--splat-cyan);
}
.op-drop-hint__sub {
  font-family: var(--splat-graffiti);
  font-size: 18px;
  color: var(--splat-pink);
  letter-spacing: 0.1em;
  transform: translateY(-4px) rotate(-2deg);
  /* 4-direction text-shadow = pseudo-stroke that reads on any bg.
     Yellow-on-white was illegible no matter the drop shadow; pink
     with a full ink outline pops against the white canvas and
     stays readable if the canvas later renders an image. */
  text-shadow:
    2px 2px 0 var(--splat-foreground-ink),
   -1px -1px 0 var(--splat-foreground-ink),
    1px -1px 0 var(--splat-foreground-ink),
   -1px  1px 0 var(--splat-foreground-ink);
}

/* ==========================================================
   PILLS
   ========================================================== */
.op-pill {
  background: var(--splat-bg-cream);
  border: 3px solid var(--splat-foreground-ink);
  box-shadow: 4px 4px 0 var(--splat-foreground-ink);
}
.op-pill__btn {
  background: var(--splat-bg-cream);
  color: var(--splat-foreground-ink);
  border: 2.5px solid var(--splat-foreground-ink);
  transition: transform var(--op-dur-fast) var(--op-ease),
              background var(--op-dur-fast);
}
.op-pill__btn:hover { transform: scale(1.06); background: var(--splat-yellow); }

/* Mode pill: filled silhouettes get a thin matching stroke for crispness */
.op-mode-pill .op-pill__btn svg {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.6;
  stroke-linejoin: round;
}
#btnSelectMode[aria-pressed="true"] {
  background: var(--splat-orange);
  color: var(--splat-foreground-ink);
}
#btnWandMode[aria-pressed="true"] {
  background: var(--splat-pink);
  color: var(--splat-foreground);
}

/* ==========================================================
   FLOATING CARD SURFACE
   ========================================================== */
.op-card {
  background: var(--splat-bg-panel);
  border: 3px solid var(--splat-foreground-ink);
  box-shadow: 5px 5px 0 var(--splat-foreground-ink);
  color: var(--splat-foreground);
}

/* Layer count + cards */
.op-layer-count {
  font-family: var(--splat-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--splat-cyan-bright);
}
.op-layer-card {
  background: var(--splat-bg-cream);
  border: 3px solid var(--splat-foreground-ink);
  color: var(--splat-foreground-ink);
}
.op-layer-card:hover { background: var(--splat-yellow); }
.op-layer-card.is-active {
  background: var(--splat-cyan);
  box-shadow: 0 0 0 3px var(--splat-cyan-bright), 4px 4px 0 var(--splat-foreground-ink);
}
.op-layer-card.is-dragging {
  background: var(--splat-cyan-bright);
  box-shadow: 4px 4px 0 var(--splat-foreground-ink);
}
.op-layer-card__handle { color: var(--splat-foreground-ink); }
.op-layer-card__thumb {
  border: 2px solid var(--splat-foreground-ink);
  background: var(--splat-bg-cream);
}
.op-layer-card__label {
  font-family: var(--splat-display);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.op-layer-card__remove {
  background: var(--splat-graffiti-red);
  border: 2px solid var(--splat-foreground-ink);
  color: var(--splat-foreground);
  font-family: var(--splat-display);
  font-size: 12px;
  border-radius: 50%;
  width: 20px; height: 20px;
}
.op-layer-card__remove:hover { background: var(--splat-pink); }

/* Aspect dropdown */
.op-aspect-trigger {
  background: var(--splat-bg-cream);
  color: var(--splat-foreground-ink);
  border: 3px solid var(--splat-foreground-ink);
  font-family: var(--splat-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  box-shadow: 3px 3px 0 var(--splat-foreground-ink);
  transform: rotate(-1.5deg);
  transition: transform var(--op-dur-fast) var(--op-ease),
              background var(--op-dur-fast);
}
.op-aspect-trigger:hover {
  transform: rotate(0) scale(1.05);
  background: var(--splat-yellow);
}
.op-aspect-trigger__prefix {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}
.op-aspect-trigger__sep { opacity: 0.35; font-weight: 400; margin: 0 -2px; }
.op-aspect-arrow { font-size: 10px; color: var(--splat-foreground-ink); }
.op-floating__caption {
  font-family: var(--splat-graffiti);
  font-size: 12px;
  color: var(--splat-foreground-muted);
  letter-spacing: 0.05em;
}
.op-aspect-menu {
  background: var(--splat-bg-panel);
  border: 3px solid var(--splat-foreground-ink);
  box-shadow: 4px 4px 0 var(--splat-foreground-ink);
}
.op-aspect-option {
  background: var(--splat-bg-cream);
  color: var(--splat-foreground-ink);
  border: 2px solid var(--splat-foreground-ink);
  font-family: var(--splat-display);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-align: center;
  transition: background var(--op-dur-fast);
}
.op-aspect-option:hover { background: var(--splat-yellow); }
.op-aspect-option.active {
  background: var(--splat-orange);
  color: var(--splat-foreground-ink);
}

/* ==========================================================
   PROMPT
   ========================================================== */
.op-prompt-input {
  background: var(--splat-bg-cream);
  color: var(--splat-foreground-ink);
  border: 2px solid var(--splat-foreground-ink);
  font-family: var(--splat-body);
  font-weight: 600;
  font-size: 14px;
}
.op-prompt-input:focus {
  border-color: var(--splat-cyan-bright);
  box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.25);
}
.op-prompt-chevron {
  background: var(--splat-bg-cream);
  border: 2px solid var(--splat-foreground-ink);
  color: var(--splat-foreground-ink);
  transition: background var(--op-dur-fast) ease,
              color var(--op-dur-fast) ease;
}
.op-prompt-chevron:hover {
  background: var(--splat-foreground-ink);
  color: var(--splat-bg-cream);
}

.op-prompt-counter {
  font-family: var(--splat-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--splat-foreground-muted);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.op-prompt-counter.is-warn { color: var(--splat-orange-bright); }
.op-prompt-counter.is-max  { color: var(--splat-graffiti-red); }

/* Submit button — drop the chewed-edge clip-path so it reads as a
   crisp rectangle on the dark prompt card. The library .splat-btn
   provides the orange fill + ink border + bold font already. */
.op-floating--prompt #btnSubmit {
  clip-path: none;
  font-family: var(--splat-display);
}
.op-floating--prompt #btnSubmit::after { content: none; }
/* Vendor .splat-btn--filled:hover ships a 3-stack 8/28/64 orange
   bloom which read as too hot on the prompt card. Override with a
   tighter 2-stack glow so the affordance is still visible without
   the wide halo. */
.op-floating--prompt #btnSubmit:hover,
.op-floating--prompt #btnSubmit:focus-visible {
  box-shadow:
    0 0 4px var(--splat-orange),
    0 0 12px rgba(255, 123, 31, 0.32);
}

/* "+ Optional Prompt" toggle — low-contrast dashed cream pill on
   the dark prompt card. Cyan pip + glow when collapsed with text. */
.op-prompt-toggle {
  background: transparent;
  border: 2px dashed rgba(255, 245, 224, 0.32);
  border-radius: 999px;
  font-family: var(--splat-body);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(255, 245, 224, 0.62);
  text-transform: uppercase;
  transition: background var(--op-dur-fast) ease,
              color var(--op-dur-fast) ease,
              border-color var(--op-dur-fast) ease;
}
.op-prompt-toggle:hover {
  background: rgba(255, 245, 224, 0.08);
  border-color: var(--splat-bg-cream);
  color: var(--splat-bg-cream);
}
.op-prompt-toggle__sign { font-weight: 900; font-size: 12px; }
.op-prompt-toggle.has-value {
  border-color: var(--splat-cyan-bright);
  border-style: solid;
  color: var(--splat-cyan-bright);
}
.op-prompt-toggle.has-value::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--splat-cyan-bright);
  box-shadow: 0 0 6px var(--splat-cyan-bright), 0 0 12px rgba(95, 224, 255, 0.55);
  flex: none;
}

/* ==========================================================
   JOB CARDS
   ========================================================== */
.op-job-card {
  background: var(--splat-bg-cream);
  border: 3px solid var(--splat-foreground-ink);
  box-shadow: 3px 3px 0 var(--splat-foreground-ink);
  font-family: var(--splat-display);
  color: var(--splat-foreground-ink);
}
.op-job-card__thumb {
  background: var(--splat-bg-deep);
  border: 2px solid var(--splat-foreground-ink);
}
.op-job-card__status {
  font-size: 10px;
  letter-spacing: 0.06em;
}
.op-job-card__bar {
  background: var(--splat-bg-deep);
}
.op-job-card__bar-fill { background: var(--splat-cyan-bright); }

.op-job-card.is-done {
  background: var(--splat-yellow);
  transition: transform var(--op-dur-fast) var(--op-ease),
              box-shadow var(--op-dur-fast);
}
.op-job-card.is-done:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--splat-foreground-ink);
}
.op-job-card.is-done .op-job-card__status {
  color: var(--splat-foreground-ink);
  font-weight: 700;
}
.op-job-card.is-done .op-job-card__bar-fill { background: var(--splat-orange); }

.op-job-card.is-failed { border-color: var(--splat-graffiti-red); }
.op-job-card.is-failed .op-job-card__bar-fill { background: var(--splat-graffiti-red); }

/* ==========================================================
   STAGE FOOTER + WAND CONTROLS
   ========================================================== */
.op-stage__footer {
  font-family: var(--splat-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--splat-foreground-muted);
  flex-wrap: wrap;
}
.op-stage__readout span {
  color: var(--splat-cyan-bright);
  margin-left: 6px;
}
.op-tol-wrap {
  font-family: var(--splat-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--splat-foreground-muted);
}
.op-tol-label {
  color: var(--splat-orange);
}

/* Show-alpha toggle card. Label inherits the orange call-out hue
   from .op-tol-label's logic (paint-it adjacent), and the state
   word flips between cyan-bright (off) and yellow (on) so it's
   instantly readable. */
.op-alpha-toggle {
  font-family: var(--splat-display);
}
.op-alpha-label {
  color: var(--splat-orange);
}
.op-alpha-state {
  color: var(--splat-cyan-bright);
}
.op-alpha-toggle[aria-pressed="true"] .op-alpha-state {
  color: var(--splat-yellow);
}
/* The layout strips native appearance so accent-color is inert here.
   Drive both the track (background: currentColor) and the thumb
   (background: currentColor) by setting color → splat-pink. */
.op-tol-slider {
  color: var(--splat-pink);
  accent-color: var(--splat-pink);
}
.op-tol-value {
  color: var(--splat-yellow);
  font-family: var(--splat-display);
}

/* ==========================================================
   HOW TO USE

   No background here — body's bg-deep + the parallax canvas
   below stack through, so the splatter sprites read behind
   the cards and demo video.
   ========================================================== */
.op-howto__title {
  font-family: var(--splat-display);
  color: var(--splat-foreground);
  text-shadow: 4px 4px 0 var(--splat-foreground-ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.op-howto__sub {
  font-family: var(--splat-graffiti);
  color: var(--splat-cyan-bright);
  letter-spacing: 0.08em;
}
.op-howto__step {
  background: var(--splat-bg-cream);
  border: 4px solid var(--splat-foreground-ink);
  border-radius: 14px;
  color: var(--splat-foreground-ink);
  box-shadow: 6px 6px 0 var(--splat-foreground-ink);
}
/* Varied rotations so the row of cards reads as hand-pinned
   postcards rather than a regimented grid. */
.op-howto__step:nth-child(1) { transform: rotate(-2.4deg); }
.op-howto__step:nth-child(2) { transform: rotate( 1.6deg); }
.op-howto__step:nth-child(3) { transform: rotate(-1.8deg); }

/* Per-step accent rotation through the splat palette. */
.op-howto__step:nth-child(1) .op-howto__step-num { color: var(--splat-pink); }
.op-howto__step:nth-child(2) .op-howto__step-num { color: var(--splat-cyan); }
.op-howto__step:nth-child(3) .op-howto__step-num { color: var(--splat-orange); }

.op-howto__step-num {
  font-family: var(--splat-display);
  text-shadow:
    3px 3px 0 var(--splat-foreground-ink),
   -1px -1px 0 var(--splat-foreground-ink),
    1px -1px 0 var(--splat-foreground-ink),
   -1px  1px 0 var(--splat-foreground-ink);
}
.op-howto__step-title {
  font-family: var(--splat-display);
  letter-spacing: 0.04em;
  color: var(--splat-foreground-ink);
}
.op-howto__step-desc {
  font-family: var(--splat-body);
  color: var(--splat-foreground-ink);
}
/* Demo video frame — 4px ink stroke + rounded corners. No drop
   shadow; the rounded silhouette + thick border carries the look. */
.op-howto__demo {
  background: var(--splat-bg-cream);
  border: 4px solid var(--splat-foreground-ink);
  border-radius: 16px;
}

/* ==========================================================
   GALLERY

   No own background / no header underline — the parallax canvas
   below body shows through. Filter chips + Refresh + Load More
   get scoped overrides to read as prominent solid pills.
   ========================================================== */
.op-gallery__title {
  font-family: var(--splat-display);
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--splat-foreground);
  text-shadow: 3px 3px 0 var(--splat-pink), 6px 6px 0 var(--splat-foreground-ink);
}

/* Filter chips — drop the chewed clip + tilt, fatten them up,
   round the corners, raise the type so they read as proper
   buttons rather than tiny stickers. */
.op-gallery__filters .splat-chip {
  clip-path: none;
  transform: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  border-width: 3px;
  letter-spacing: 0.06em;
}
.op-gallery__filters .splat-chip:hover { transform: scale(1.05); }
.op-gallery__filters .splat-chip.active {
  box-shadow: 3px 3px 0 var(--splat-foreground-ink);
}
.op-gallery__empty,
.op-gallery__signin,
.op-gallery__loading {
  font-family: var(--splat-graffiti);
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--splat-foreground-muted);
  background: transparent;
  border: none;
  box-shadow: none;
}
.op-gallery__item {
  background: var(--splat-bg-panel);
  transition: transform var(--op-dur-mid) var(--op-ease);
}
/* Four-color cycle on the offset shadows for a scattered look. */
.op-gallery__item:nth-child(4n+1) {
  transform: rotate(-0.4deg);
  box-shadow: 3px 3px 0 var(--splat-orange);
}
.op-gallery__item:nth-child(4n+2) {
  transform: rotate(0.5deg);
  box-shadow: 3px 3px 0 var(--splat-cyan);
}
.op-gallery__item:nth-child(4n+3) {
  transform: rotate(-0.2deg);
  box-shadow: 3px 3px 0 var(--splat-pink);
}
.op-gallery__item:nth-child(4n) {
  transform: rotate(0.3deg);
  box-shadow: 3px 3px 0 var(--splat-yellow);
}
.op-gallery__item:hover { transform: rotate(0) translateY(-3px) scale(1.02); }

/* ==========================================================
   BUY MODAL
   ========================================================== */
.op-buy {
  background: rgba(19, 23, 48, 0.85);
  backdrop-filter: blur(3px);
}

/* Welcome modal — first-login celebration. Cream paper card with
   a graffiti-style title; the big credit number reads as a
   "stamped" hero stat using pink+ink layered text-shadow. */
.op-welcome {
  background: rgba(19, 23, 48, 0.85);
  backdrop-filter: blur(3px);
}
.op-welcome__card {
  background: var(--splat-bg-cream);
  color: var(--splat-foreground-ink);
  border: 4px solid var(--splat-foreground-ink);
  border-radius: 14px;
  font-family: var(--splat-body);
  /* Cyan offset shadow now that the modal's accent palette is
     blue (with pink + yellow as supporting hits). */
  box-shadow: 6px 6px 0 var(--splat-cyan);
  transform: rotate(-0.6deg);
}
.op-welcome__title {
  font-family: var(--splat-display);
  font-size: 24px;
  color: var(--splat-cyan);
  text-shadow: 2px 2px 0 var(--splat-foreground-ink);
  letter-spacing: 0.04em;
}
.op-welcome__title-app { color: var(--splat-orange); }
.op-welcome__credits-num {
  font-family: var(--splat-display);
  /* Yellow numeral wrapped in a 4-direction ink stroke so the
     glyph reads against the cream paper without a dark fill. */
  color: var(--splat-yellow);
  text-shadow:
    4px 4px 0 var(--splat-foreground-ink),
   -2px -2px 0 var(--splat-foreground-ink),
    2px -2px 0 var(--splat-foreground-ink),
   -2px  2px 0 var(--splat-foreground-ink),
    2px  0   0 var(--splat-foreground-ink),
   -2px  0   0 var(--splat-foreground-ink),
    0    2px 0 var(--splat-foreground-ink),
    0   -2px 0 var(--splat-foreground-ink);
}
.op-welcome__credits-label {
  font-family: var(--splat-display);
  /* Pink label with a 2-px offset ink drop shadow. */
  color: var(--splat-pink);
  text-shadow: 2px 2px 0 var(--splat-foreground-ink);
  letter-spacing: 0.18em;
}
.op-welcome__body {
  font-family: var(--splat-body);
  color: var(--splat-foreground-ink);
}

/* Primary CTA painted cyan to match the new accent palette. */
.op-welcome__cta {
  background: var(--splat-cyan) !important;
  color: var(--splat-foreground-ink) !important;
  border: 3px solid var(--splat-foreground-ink) !important;
}
.op-welcome__cta:hover {
  background: var(--splat-cyan-bright) !important;
  filter: brightness(1.05);
}
/* Skip button — override the splat-btn--ghost cyan dashed default
   with an orange dotted border + orange text. */
.op-welcome__skip {
  background: transparent !important;
  color: var(--splat-orange) !important;
  border: 2px dotted var(--splat-orange) !important;
}
.op-welcome__skip:hover {
  background: rgba(255, 123, 31, 0.1) !important;
  filter: brightness(1.05);
}

/* Sign-in prompt — same paper / ink palette as the welcome modal so
   they read as one family. Cyan offset shadow, blue+orange split
   title, cyan primary CTA, orange dotted dismiss. */
.op-signin {
  background: rgba(19, 23, 48, 0.85);
  backdrop-filter: blur(3px);
}
.op-signin__card {
  background: var(--splat-bg-cream);
  color: var(--splat-foreground-ink);
  border: 4px solid var(--splat-foreground-ink);
  border-radius: 14px;
  font-family: var(--splat-body);
  box-shadow: 6px 6px 0 var(--splat-cyan);
  transform: rotate(-0.6deg);
}
.op-signin__title {
  font-family: var(--splat-display);
  font-size: 24px;
  /* All-black title — keeps the modal copy entirely in ink so the
     two buttons own the color hits. */
  color: var(--splat-foreground-ink);
  letter-spacing: 0.04em;
}
.op-signin__title-app { color: var(--splat-foreground-ink); }
.op-signin__body {
  font-family: var(--splat-body);
  color: var(--splat-foreground-ink);
}
/* Google brand "Sign in with Google" button — light theme. Locked to
   the official spec (white surface, #1F1F1F text, #747775 hairline,
   18×18 G logo). Splat skin doesn't paint over it so the brand mark
   stays canonical.

   Interaction states follow Google's Material elevation language:
   resting hairline shadow → lifted shadow on hover → flatter shadow
   + tiny scale on press. Brand-compliant; reads as a real button. */
.op-google-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 12px !important;
  height: 40px;
  background: #FFFFFF !important;
  color: #1F1F1F !important;
  border: 1px solid #747775 !important;
  border-radius: 4px !important;
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500;
  letter-spacing: 0.25px;
  line-height: 1;
  text-shadow: none !important;
  clip-path: none !important;
  cursor: pointer;
  transform: translateY(0) !important;
  box-shadow:
    0 1px 2px rgba(60, 64, 67, 0.15),
    0 1px 3px rgba(60, 64, 67, 0.10) !important;
  transition:
    background-color 120ms ease,
    border-color    120ms ease,
    box-shadow      180ms ease,
    transform       120ms ease !important;
}
.op-google-btn:hover {
  background: #F8F9FA !important;
  border-color: #5F6368 !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 2px 4px rgba(60, 64, 67, 0.20),
    0 3px 8px rgba(60, 64, 67, 0.14) !important;
  filter: none;
}
.op-google-btn:active {
  background: #F1F3F4 !important;
  /* Tiny press: drop the lift, scale down a hair, flatten the shadow.
     Snappier transition so the click "lands" instead of drifting. */
  transform: translateY(0) scale(0.98) !important;
  box-shadow:
    0 1px 1px rgba(60, 64, 67, 0.18),
    0 0   2px rgba(60, 64, 67, 0.10) !important;
  transition-duration: 60ms !important;
}
.op-google-btn:focus-visible {
  outline: none;
  border-color: #1A73E8 !important;
  box-shadow:
    0 0 0 3px rgba(26, 115, 232, 0.25),
    0 1px 3px rgba(60, 64, 67, 0.15) !important;
}
.op-google-btn__logo {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.op-google-btn__label {
  display: inline-block;
}
.op-signin__skip {
  background: transparent !important;
  color: var(--splat-orange) !important;
  border: 2px dotted var(--splat-orange) !important;
}
.op-signin__skip:hover {
  background: rgba(255, 123, 31, 0.1) !important;
  filter: brightness(1.05);
}

/* Settings modal — same overlay treatment as Buy Credits, lighter
   contents. Close button is the same red circle pattern. */
.op-settings {
  background: rgba(19, 23, 48, 0.85);
  backdrop-filter: blur(3px);
}
.op-settings__card {
  background: var(--splat-bg-cream);
  color: var(--splat-foreground-ink);
  border: 4px solid var(--splat-foreground-ink);
  border-radius: 14px;
  font-family: var(--splat-body);
  box-shadow: 4px 4px 0 var(--splat-foreground-ink);
}
.op-settings__close {
  background: var(--splat-graffiti-red);
  border: 3px solid var(--splat-foreground-ink);
  color: var(--splat-foreground);
  font-size: 18px;
  font-family: var(--splat-display);
  border-radius: 50%;
  clip-path: none;
  transform: none;
  transition: transform var(--op-dur-fast) var(--op-ease),
              background var(--op-dur-fast);
}
.op-settings__close:hover { transform: scale(1.08); background: var(--splat-pink); }
.op-settings__title {
  font-family: var(--splat-display);
  font-size: 26px;
  color: var(--splat-pink);
  text-shadow: 3px 3px 0 var(--splat-foreground-ink);
  letter-spacing: 0.04em;
}
.op-settings__section-label {
  font-family: var(--splat-display);
  color: var(--splat-orange);
  letter-spacing: 0.14em;
}
.op-settings__section-body {
  background: var(--splat-bg-panel);
  color: var(--splat-foreground);
  border: 3px solid var(--splat-foreground-ink);
  border-radius: 8px;
  padding: 10px 14px;
}

/* Settings gear in the appbar — picks up the foreground-ink color
   from the gradient bar; subtle hover lift. */
.op-auth__settings { color: var(--splat-foreground-ink); }
.op-auth__settings:hover {
  background: var(--splat-yellow);
  transform: rotate(15deg);
  transition: transform var(--op-dur-fast) var(--op-ease),
              background var(--op-dur-fast);
}
.op-buy__card {
  background: var(--splat-bg-cream);
  color: var(--splat-foreground-ink);
  border: 4px solid var(--splat-foreground-ink);
  font-family: var(--splat-body);
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--splat-foreground-ink), 3px 3px 0 7px var(--splat-pink);
  transform: rotate(-1deg);
}
.op-buy__close {
  background: var(--splat-graffiti-red);
  border: 3px solid var(--splat-foreground-ink);
  color: var(--splat-foreground);
  font-size: 18px;
  font-family: var(--splat-display);
  border-radius: 50%;
  clip-path: none;
  transform: none;
  transition: transform var(--op-dur-fast) var(--op-ease),
              background var(--op-dur-fast);
}
.op-buy__close:hover { transform: scale(1.08); background: var(--splat-pink); }
.op-buy__title {
  font-family: var(--splat-display);
  font-size: 28px;
  color: var(--splat-pink);
  text-shadow: 3px 3px 0 var(--splat-foreground-ink);
  letter-spacing: 0.04em;
}
.op-buy__subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: var(--splat-foreground-ink);
}
.op-buy__banner {
  font-family: var(--splat-graffiti);
  font-size: 16px;
  letter-spacing: 0.04em;
  background: var(--splat-yellow);
  border: 3px solid var(--splat-foreground-ink);
  color: var(--splat-foreground-ink);
  transform: rotate(-1deg);
  box-shadow: 3px 3px 0 var(--splat-foreground-ink);
}
.op-buy__loading {
  font-family: var(--splat-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--splat-foreground-muted);
}
.op-buy__pack {
  background: var(--splat-bg-panel);
  color: var(--splat-foreground);
  border: 3px solid var(--splat-foreground-ink);
  box-shadow: 4px 4px 0 var(--splat-foreground-ink);
  transform: rotate(-0.4deg);
  font-family: var(--splat-body);
  font-weight: 700;
  transition: transform var(--op-dur-mid) var(--op-ease),
              box-shadow var(--op-dur-fast);
}
.op-buy__pack:nth-child(2n) {
  transform: rotate(0.5deg);
  box-shadow: 3px 3px 0 var(--splat-foreground-ink), 8px 8px 0 var(--splat-cyan);
}
.op-buy__pack:hover {
  transform: rotate(0) translateY(-2px) scale(1.02);
  box-shadow: 3px 3px 0 var(--splat-foreground-ink), 9px 9px 0 var(--splat-orange);
}
.op-buy__pack-credits {
  font-family: var(--splat-graffiti);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--splat-cyan-bright);
}
.op-buy__pack-price {
  font-family: var(--splat-display);
  font-size: 22px;
  color: var(--splat-yellow);
  text-shadow: 2px 2px 0 var(--splat-foreground-ink);
}

/* ==========================================================
   LIGHTBOX
   ========================================================== */
.op-lightbox {
  background: rgba(19, 23, 48, 0.92);
  backdrop-filter: blur(3px);
}
/* Lightbox buttons read as utility actions, not page-level CTAs —
   so they drop the splat-blob clip + the ::after ribbon and stay as
   plain rectangles. Download is orange (matches PAINT IT), close
   is a small pink × beside it. */
.op-lightbox__btn {
  border: 3px solid var(--splat-foreground-ink);
  font-family: var(--splat-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  clip-path: none;
  transform: none;
  transition: transform var(--op-dur-fast) var(--op-ease),
              background var(--op-dur-fast),
              filter var(--op-dur-fast);
}
.op-lightbox__btn:hover { transform: scale(1.04); filter: brightness(1.05); }
#lightboxDownload {
  background: var(--splat-orange);
  color: var(--splat-foreground-ink);
}
#lightboxDownload:hover { background: var(--splat-orange-bright); }
.op-lightbox__close {
  background: var(--splat-pink);
  color: var(--splat-foreground);
  font-size: 16px;
  letter-spacing: 0;
  padding: 6px 12px;
  min-width: auto;
}
.op-lightbox__close:hover { background: var(--splat-graffiti-red); }

/* Lightbox prompt-info card — cream paper, ink border + cyan offset
   shadow, slightly tilted so it reads as a sticky-note pinned to
   the right edge. */
.op-lightbox__info {
  background: var(--splat-bg-cream);
  border: 4px solid var(--splat-foreground-ink);
  box-shadow: 4px 4px 0 var(--splat-cyan);
  color: var(--splat-foreground-ink);
  border-radius: 12px;
  transform: rotate(1.4deg);
}
.op-lightbox__info-title {
  font-family: var(--splat-display);
  color: var(--splat-pink);
  text-shadow:
     2px 2px 0 var(--splat-foreground-ink),
    -1px -1px 0 var(--splat-foreground-ink),
     1px -1px 0 var(--splat-foreground-ink),
    -1px  1px 0 var(--splat-foreground-ink);
}
.op-lightbox__info-body {
  font-family: var(--splat-body);
  color: var(--splat-foreground-ink);
}

/* Load More — drop the chewed splat-blob clip + the default rotate
   so the button reads as a clean solid pill. Same prominent sizing
   as the gallery REFRESH so the two read as a pair. */
#btnGalleryLoadMore {
  clip-path: none;
  transform: none;
  border-radius: 12px;
  padding: 10px 26px;
  font-size: 14px;
  border-width: 3px;
  box-shadow: 4px 4px 0 var(--splat-foreground-ink);
}
#btnGalleryLoadMore:hover { transform: scale(1.05); }

.op-compare {
  border: 4px solid var(--splat-foreground-ink);
  box-shadow: 3px 3px 0 var(--splat-foreground-ink), 0 0 60px rgba(255, 123, 31, 0.3);
  background: var(--splat-bg-deep);
}
.op-compare__label {
  font-family: var(--splat-display);
  font-size: 16px;
  letter-spacing: 0.1em;
  background: var(--splat-yellow);
  color: var(--splat-foreground-ink);
  border: 2.5px solid var(--splat-foreground-ink);
  transform: rotate(-2deg);
}
.op-compare__label--after { transform: rotate(2deg); background: var(--splat-cyan); }
.op-compare__divider {
  background: var(--splat-foreground);
  box-shadow: 0 0 14px var(--splat-cyan-bright);
}
.op-compare__handle {
  /* Split-fill: cyan on the left half (the BEFORE side), yellow on
     the right (the AFTER side). Hard 50% stop so the seam aligns
     with the divider running through the handle's center. */
  background: linear-gradient(
    to right,
    var(--splat-cyan)  0%,
    var(--splat-cyan)  50%,
    var(--splat-yellow) 50%,
    var(--splat-yellow) 100%
  );
  border: 3px solid var(--splat-foreground-ink);
  transform: translate(-50%, -50%) rotate(-3deg);
}
.op-compare__handle::before,
.op-compare__handle::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  transform: translateY(-50%);
}
.op-compare__handle::before {
  left: 8px;
  border-width: 7px 10px 7px 0;
  border-color: transparent var(--splat-foreground-ink) transparent transparent;
}
.op-compare__handle::after {
  right: 8px;
  border-width: 7px 0 7px 10px;
  border-color: transparent transparent transparent var(--splat-foreground-ink);
}

/* ==========================================================
   TOAST
   ========================================================== */
.op-toast {
  background: var(--splat-yellow);
  color: var(--splat-foreground-ink);
  font-family: var(--splat-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  border: 3px solid var(--splat-foreground-ink);
  box-shadow: 5px 5px 0 var(--splat-foreground-ink);
}

/* ==========================================================
   LEGAL LINKS — Privacy / Terms / Contact
   Lives at the bottom of the How-To view and inside the Buy
   Credits modal. No page-level footer anymore.
   ========================================================== */
.op-legal {
  font-family: var(--splat-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--splat-foreground-muted);
  text-transform: uppercase;
}
.op-legal--inline {
  /* Inside the Buy Credits modal — sits over cream paper, so
     the link color and copy color need to flip from "on dark"
     to "on light". */
  color: var(--splat-foreground-ink);
  opacity: 0.7;
}
.op-legal__copy { color: var(--splat-yellow); }
.op-legal__sep  { opacity: 0.45; }
.op-legal__link {
  color: var(--splat-cyan-bright);
  text-decoration: none;
  transition: color var(--op-dur-fast);
}
.op-legal__link:hover {
  color: var(--splat-pink);
  text-decoration: underline;
}
.op-legal--inline .op-legal__link {
  color: var(--splat-pink);
}
.op-legal--inline .op-legal__link:hover {
  color: var(--splat-cyan);
}

/* Theme-specific focus ring color */
:root { --op-focus-ring: var(--splat-cyan-bright); }

/* ==========================================================
   MOBILE OVERRIDES — must live at the end of the file so they
   win cascade ties against the unmedia'd desktop rules above.

   The @media block earlier in this file (around line 72) was
   being silently overridden by the .op-tab and other desktop
   rules that come after it in source order. Anything that needs
   to undo a desktop value at ≤760 px belongs here.
   ========================================================== */
@media (max-width: 760px) {
  /* Drop tab tilts in the open hamburger drawer (and elsewhere). */
  .op-tab,
  .op-tab:nth-child(2),
  .op-tab.is-active { transform: none; }
  .op-tab:hover { transform: scale(1.04); background: var(--splat-cyan-bright); }

  /* SHOW ALPHA toggle inherits the .op-card 5/5 ink offset shadow,
     which feels heavy stacked tight against the tool pill. Drop
     it on phones. */
  .op-floating--alpha { box-shadow: none; }
  /* Same goes for the merged 5-button tool pill (undo/redo
     consolidated into view-pill on mobile) — the offset shadow
     stacks redundantly against the prompt card below. */
  .op-view-pill { box-shadow: none; }
}