/* Ambient theme decoration layer. Additive only; delete this file and the
   matching script/link in index.html to revert. */

.page {
  position: relative;
  isolation: isolate;
}

.page > :not(.theme-decor-layer) {
  position: relative;
  z-index: 1;
}

/* Fixed full-bleed backdrop: the themed world fills the viewport and stays put
   while content scrolls over it (Apple "liquid glass" feel). */
.theme-decor-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint style;
}

.theme-decor-layer,
.theme-decor-layer * {
  pointer-events: none !important;
}

.theme-decor-layer[hidden],
.page:not(.active) .theme-decor-layer {
  display: none;
}

/* Custom themes are gated by the engine, not blanket-hidden: theme-decor.js
   sets the layer's [hidden] attribute based on the custom config (a borrowed
   base + the background / floating-details toggles). A blanket display:none here
   used to override that and hid the borrowed art entirely — and with it the
   interactive creature. The [hidden] rule above handles the off states. */

.auth-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--decor-auth-field, transparent);
  opacity: .78;
}

.auth-overlay > * {
  position: relative;
  z-index: 1;
}

:root[data-theme="ocean"] .auth-overlay {
  --decor-auth-field:
    radial-gradient(circle at 18% 82%, rgba(255, 111, 94, .18), transparent 28%),
    radial-gradient(circle at 76% 16%, rgba(24, 220, 240, .18), transparent 30%),
    linear-gradient(180deg, rgba(3, 19, 31, .2), rgba(20, 50, 70, .18));
}

:root[data-theme="cosmic"] .auth-overlay {
  --decor-auth-field:
    radial-gradient(circle at 20% 22%, rgba(139, 92, 246, .20), transparent 28%),
    radial-gradient(circle at 80% 72%, rgba(245, 158, 11, .14), transparent 30%),
    radial-gradient(circle at 52% 48%, rgba(103, 232, 249, .10), transparent 38%);
}

:root[data-theme="forest"] .auth-overlay {
  --decor-auth-field:
    radial-gradient(circle at 14% 88%, rgba(134, 239, 172, .16), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(224, 123, 57, .13), transparent 28%);
}

:root[data-theme="neon"] .auth-overlay {
  --decor-auth-field:
    linear-gradient(180deg, rgba(232, 121, 249, .16), transparent 42%),
    radial-gradient(circle at 80% 74%, rgba(34, 211, 238, .15), transparent 30%);
}

:root[data-theme="ember"] .auth-overlay {
  --decor-auth-field:
    radial-gradient(ellipse at 50% 105%, rgba(249, 115, 22, .28), transparent 42%),
    radial-gradient(circle at 20% 20%, rgba(96, 165, 250, .08), transparent 30%);
}

:root[data-theme="midnight"] .auth-overlay {
  --decor-auth-field:
    linear-gradient(135deg, rgba(103, 232, 249, .12), transparent 34%, rgba(240, 171, 252, .10) 62%, transparent),
    radial-gradient(circle at 76% 16%, rgba(232, 196, 104, .13), transparent 24%),
    radial-gradient(circle at 24% 78%, rgba(165, 180, 252, .13), transparent 30%);
}

:root[data-theme="mycelium"] .auth-overlay {
  --decor-auth-field:
    radial-gradient(circle at 18% 80%, rgba(210, 92, 44, .15), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(232, 196, 116, .14), transparent 28%),
    linear-gradient(180deg, rgba(38, 23, 12, .12), rgba(19, 35, 24, .10));
}

:root[data-theme="rose"] .auth-overlay {
  --decor-auth-field:
    radial-gradient(circle at 18% 18%, rgba(251, 113, 133, .20), transparent 30%),
    radial-gradient(circle at 84% 84%, rgba(232, 184, 120, .16), transparent 30%),
    radial-gradient(circle at 58% 20%, rgba(216, 180, 254, .12), transparent 28%);
}

:root[data-theme="slate"] .auth-overlay {
  --decor-auth-field:
    linear-gradient(135deg, rgba(34, 211, 238, .14), transparent 28%, rgba(244, 114, 182, .10) 54%, transparent 72%, rgba(163, 230, 53, .08)),
    radial-gradient(circle at 74% 22%, rgba(255, 255, 255, .10), transparent 28%),
    linear-gradient(#000, #000);
}

:root[data-theme="light"] .auth-overlay {
  --decor-auth-field:
    linear-gradient(180deg, rgba(96, 165, 250, .14), transparent 42%),
    radial-gradient(circle at 84% 14%, rgba(245, 158, 11, .16), transparent 28%);
}

:root[data-theme="desert"] .auth-overlay {
  --decor-auth-field:
    radial-gradient(circle at 18% 86%, rgba(236, 72, 153, .16), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(249, 115, 22, .18), transparent 34%),
    linear-gradient(180deg, rgba(18, 8, 10, .16), rgba(84, 37, 22, .12));
}

:root[data-theme="library"] .auth-overlay {
  --decor-auth-field:
    radial-gradient(circle at 18% 18%, rgba(212, 163, 115, .16), transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(127, 29, 29, .16), transparent 30%),
    linear-gradient(180deg, rgba(16, 9, 6, .20), rgba(65, 42, 22, .14));
}

:root[data-theme="arctic"] .auth-overlay {
  --decor-auth-field:
    linear-gradient(135deg, rgba(103, 232, 249, .16), transparent 34%, rgba(167, 139, 250, .13) 62%, transparent),
    radial-gradient(circle at 80% 18%, rgba(248, 250, 252, .14), transparent 26%);
}

:root[data-theme="cyber"] .auth-overlay {
  --decor-auth-field:
    radial-gradient(circle at 18% 80%, rgba(163, 230, 53, .14), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(34, 211, 238, .18), transparent 30%),
    linear-gradient(135deg, transparent, rgba(232, 121, 249, .12), transparent);
}

:root[data-theme="treasury"] .auth-overlay {
  --decor-auth-field:
    radial-gradient(circle at 82% 18%, rgba(251, 191, 36, .18), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(34, 197, 94, .12), transparent 30%),
    linear-gradient(180deg, rgba(4, 4, 3, .18), rgba(87, 59, 10, .10));
}

.theme-decor-scrim,
.theme-decor-field,
.theme-decor-stage {
  position: absolute;
  inset: 0;
}

.theme-decor-scrim {
  opacity: var(--decor-scrim-opacity, .72);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-base) 86%, transparent), transparent 34%),
    radial-gradient(circle at 50% 18%, transparent 0 28%, color-mix(in srgb, var(--bg-base) 76%, transparent) 86%);
}

.theme-decor-field {
  opacity: var(--decor-field-opacity, .78);
  background:
    var(--decor-image, linear-gradient(transparent, transparent)),
    var(--decor-field);
  /* Painted scene ALWAYS covers + centers, on every screen/orientation. The old
     per-scene `NNN% auto` sizing (tuned for tall phones) over-scaled into a
     mis-sized sliver on desktop / narrow windows — that was the "background not
     properly sized" bug. */
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
}

.theme-decor-field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--decor-scene-field, transparent);
  background-size: var(--decor-scene-size, auto);
  opacity: var(--decor-scene-opacity, .56);
}

.theme-decor-field::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--decor-page-field, transparent);
  background-size: var(--decor-page-size, auto);
  opacity: var(--decor-page-opacity, .42);
}

.theme-decor-stage {
  overflow: hidden;
  /* Sprites are rebuilt per page; a short settle-in keeps scene changes feeling
     like the world gently shifts rather than a hard pop. The bg field/scrim are
     not re-faded (same per-theme image), so navigation stays crisp. */
  animation: decor-stage-in 320ms ease-out;
}
@keyframes decor-stage-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .theme-decor-stage { animation: none; }
}

/* Image sprites get their own full-stage wrapper so the responsive count caps
   (:nth-of-type, below) count ONLY sprites — not the particle/ambient spans that
   render before them. inset:0 keeps the children's %-based left/top resolving
   against the same box as the stage, so placement is unchanged. */
.theme-decor-sprites {
  position: absolute;
  inset: 0;
}

.theme-decor-sprite {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  opacity: var(--o, .74);
  transform: translate3d(-50%, -50%, 0) rotate(var(--r, 0deg)) scaleX(var(--flip, 1));
  transform-origin: 50% 50%;
  /* No will-change here: with ~28 large image sprites it's the classic
     "too many layers" anti-pattern that exhausts the GPU and stalls the
     animation (the float looked frozen on phones). The animation animates
     transform, so the browser composites it on demand anyway. */
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .2));
}

.theme-decor-sprite svg,
.theme-decor-sprite img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: visible;
}

.theme-decor-full .theme-decor-sprite { opacity: var(--o, .82); }
.theme-decor-framed .theme-decor-sprite { opacity: var(--o, .72); }
.theme-decor-restrained .theme-decor-sprite { opacity: var(--o, .58); }

.theme-decor-restrained .sprite-large,
.theme-decor-restrained .sprite-xl {
  opacity: .5;
}

.sprite-edge { filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .2)); }
.sprite-soft { filter: blur(.1px) drop-shadow(0 8px 18px rgba(0, 0, 0, .14)); }
.sprite-glow { filter: drop-shadow(0 0 12px var(--decor-glow)) drop-shadow(0 12px 22px rgba(0, 0, 0, .2)); }

.decor-theme-ocean {
  --decor-image: url("theme-decor/assets/backgrounds/ocean.webp");
  --decor-field-opacity: .58;
  --d1: #18dcf0;
  --d2: #ff6f5e;
  --d3: #ffc93c;
  --d4: #2ee6a8;
  --d5: #b07cff;
  --decor-glow: rgba(24, 220, 240, .28);
  --decor-field:
    radial-gradient(circle at 16% 88%, rgba(255, 111, 94, .12), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(24, 220, 240, .12), transparent 26%),
    linear-gradient(180deg, rgba(10, 89, 122, .12), rgba(3, 19, 31, .05) 58%, rgba(255, 111, 94, .07));
}

.decor-theme-cosmic {
  --decor-image: url("theme-decor/assets/backgrounds/cosmic.webp");
  --decor-field-opacity: .54;
  --d1: #8b5cf6;
  --d2: #f59e0b;
  --d3: #67e8f9;
  --d4: #f0abfc;
  --d5: #a7f3d0;
  --decor-glow: rgba(139, 92, 246, .34);
  --decor-field:
    radial-gradient(circle at 24% 20%, rgba(139, 92, 246, .18), transparent 28%),
    radial-gradient(circle at 78% 74%, rgba(245, 158, 11, .12), transparent 26%),
    radial-gradient(circle at 50% 45%, rgba(103, 232, 249, .08), transparent 36%);
}

.decor-theme-forest {
  --decor-image: url("theme-decor/assets/backgrounds/forest.webp");
  --decor-field-opacity: .54;
  --d1: #10b981;
  --d2: #e07b39;
  --d3: #86efac;
  --d4: #7dd3fc;
  --d5: #fb7185;
  --decor-glow: rgba(16, 185, 129, .26);
  --decor-field:
    linear-gradient(90deg, rgba(16, 185, 129, .08), transparent 26%, transparent 74%, rgba(224, 123, 57, .08)),
    radial-gradient(circle at 50% 92%, rgba(134, 239, 172, .12), transparent 30%);
}

.decor-theme-neon {
  --decor-image: url("theme-decor/assets/backgrounds/neon.webp");
  --decor-field-opacity: .50;
  --d1: #e879f9;
  --d2: #a3e635;
  --d3: #22d3ee;
  --d4: #f43f5e;
  --d5: #facc15;
  --decor-glow: rgba(232, 121, 249, .42);
  --decor-field:
    linear-gradient(180deg, rgba(232, 121, 249, .10), transparent 45%),
    linear-gradient(90deg, rgba(34, 211, 238, .07), transparent, rgba(163, 230, 53, .07));
}

.decor-theme-ember {
  --decor-image: url("theme-decor/assets/backgrounds/ember.webp");
  --decor-field-opacity: .54;
  --d1: #f97316;
  --d2: #fbbf24;
  --d3: #fb7185;
  --d4: #60a5fa;
  --d5: #fed7aa;
  --decor-glow: rgba(249, 115, 22, .36);
  --decor-field:
    radial-gradient(ellipse at 50% 100%, rgba(249, 115, 22, .20), transparent 36%),
    radial-gradient(circle at 12% 16%, rgba(96, 165, 250, .06), transparent 26%);
}

.decor-theme-midnight {
  --decor-image: url("theme-decor/assets/backgrounds/midnight.webp");
  --decor-field-opacity: .50;
  --d1: #67e8f9;
  --d2: #e8c468;
  --d3: #f8fafc;
  --d4: #94a3b8;
  --d5: #f0abfc;
  --decor-glow: rgba(103, 232, 249, .26);
  --decor-field:
    linear-gradient(120deg, transparent 0 30%, rgba(103, 232, 249, .10) 42%, rgba(240, 171, 252, .09) 56%, transparent 72%),
    radial-gradient(circle at 78% 12%, rgba(232, 196, 104, .10), transparent 18%),
    radial-gradient(circle at 20% 72%, rgba(165, 180, 252, .09), transparent 28%),
    radial-gradient(circle at 68% 72%, rgba(52, 211, 153, .07), transparent 24%);
}

.decor-theme-mycelium {
  --decor-image: url("theme-decor/assets/backgrounds/mycelium.webp");
  --decor-field-opacity: .56;
  --d1: #d25c2c;
  --d2: #e8c474;
  --d3: #78a85a;
  --d4: #f2e6d0;
  --d5: #5b351f;
  --decor-glow: rgba(232, 196, 116, .24);
  --decor-field:
    radial-gradient(circle at 18% 80%, rgba(210, 92, 44, .12), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(232, 196, 116, .11), transparent 24%),
    linear-gradient(180deg, rgba(20, 27, 16, .05), rgba(78, 45, 26, .11));
}

.decor-theme-rose {
  --decor-image: url("theme-decor/assets/backgrounds/rose.webp");
  --decor-field-opacity: .50;
  --d1: #fb7185;
  --d2: #f59e7a;
  --d3: #fde68a;
  --d4: #f8fafc;
  --d5: #d8b4fe;
  --decor-glow: rgba(251, 113, 133, .30);
  --decor-field:
    radial-gradient(circle at 12% 16%, rgba(251, 113, 133, .13), transparent 24%),
    radial-gradient(circle at 88% 84%, rgba(245, 158, 122, .13), transparent 28%),
    radial-gradient(circle at 60% 18%, rgba(216, 180, 254, .12), transparent 26%);
}

.decor-theme-slate {
  --decor-image: url("theme-decor/assets/backgrounds/slate.webp");
  --decor-field-opacity: .58;
  --d1: #22d3ee;
  --d2: #f472b6;
  --d3: #c4b5fd;
  --d4: #34d399;
  --d5: #facc15;
  --decor-glow: rgba(34, 211, 238, .26);
  --decor-field:
    linear-gradient(135deg, rgba(34, 211, 238, .11), transparent 28%, rgba(244, 114, 182, .08) 52%, transparent 72%, rgba(163, 230, 53, .07)),
    radial-gradient(circle at 74% 22%, rgba(196, 181, 253, .10), transparent 24%),
    linear-gradient(#000, #000);
}

.decor-theme-light {
  --decor-image: url("theme-decor/assets/backgrounds/light.webp");
  --decor-field-opacity: .42;
  --d1: #6366f1;
  --d2: #f59e0b;
  --d3: #60a5fa;
  --d4: #16a34a;
  --d5: #fdf2f8;
  --decor-glow: rgba(99, 102, 241, .16);
  --decor-field:
    linear-gradient(180deg, rgba(96, 165, 250, .10), transparent 38%),
    radial-gradient(circle at 84% 12%, rgba(245, 158, 11, .12), transparent 24%);
}

.decor-theme-desert {
  --decor-image: url("theme-decor/assets/backgrounds/desert.webp");
  --decor-field-opacity: .54;
  --d1: #f97316;
  --d2: #ec4899;
  --d3: #f5c16c;
  --d4: #2dd4bf;
  --d5: #84cc16;
  --decor-glow: rgba(249, 115, 22, .34);
  --decor-field:
    radial-gradient(circle at 18% 84%, rgba(236, 72, 153, .12), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(249, 115, 22, .14), transparent 28%),
    linear-gradient(180deg, rgba(64, 23, 16, .08), rgba(18, 8, 10, .06));
}

.decor-theme-library {
  --decor-image: url("theme-decor/assets/backgrounds/library.webp");
  --decor-field-opacity: .52;
  --d1: #d4a373;
  --d2: #7f1d1d;
  --d3: #eab308;
  --d4: #22c55e;
  --d5: #f4e6c8;
  --decor-glow: rgba(212, 163, 115, .30);
  --decor-field:
    radial-gradient(circle at 18% 16%, rgba(212, 163, 115, .12), transparent 26%),
    radial-gradient(circle at 82% 82%, rgba(127, 29, 29, .12), transparent 26%),
    repeating-linear-gradient(90deg, rgba(244, 230, 200, .025) 0 1px, transparent 1px 18px);
}

.decor-theme-arctic {
  --decor-image: url("theme-decor/assets/backgrounds/arctic.webp");
  --decor-field-opacity: .50;
  --d1: #67e8f9;
  --d2: #a78bfa;
  --d3: #f8fafc;
  --d4: #f9a8d4;
  --d5: #7dd3fc;
  --decor-glow: rgba(103, 232, 249, .30);
  --decor-field:
    linear-gradient(135deg, rgba(103, 232, 249, .10), transparent 32%, rgba(167, 139, 250, .09) 60%, transparent),
    radial-gradient(circle at 50% 92%, rgba(248, 250, 252, .11), transparent 28%);
}

.decor-theme-cyber {
  --decor-image: url("theme-decor/assets/backgrounds/cyber.webp");
  --decor-field-opacity: .54;
  --d1: #22d3ee;
  --d2: #e879f9;
  --d3: #a3e635;
  --d4: #f59e0b;
  --d5: #34d399;
  --decor-glow: rgba(34, 211, 238, .42);
  --decor-field:
    linear-gradient(135deg, rgba(34, 211, 238, .10), transparent 30%, rgba(232, 121, 249, .08) 58%, transparent),
    radial-gradient(circle at 18% 84%, rgba(163, 230, 53, .10), transparent 28%);
}

.decor-theme-treasury {
  --decor-image: url("theme-decor/assets/backgrounds/treasury.webp");
  --decor-field-opacity: .55;
  --d1: #fbbf24;
  --d2: #e5e7eb;
  --d3: #22c55e;
  --d4: #93c5fd;
  --d5: #d4af37;
  --decor-glow: rgba(251, 191, 36, .34);
  --decor-field:
    radial-gradient(circle at 82% 16%, rgba(251, 191, 36, .14), transparent 26%),
    radial-gradient(circle at 18% 82%, rgba(34, 197, 94, .10), transparent 28%),
    linear-gradient(#040403, #040403);
}

:root:not([data-theme="custom"]) {
  --decor-ui-edge: rgba(148, 163, 184, .22);
  --decor-ui-glow: rgba(148, 163, 184, .26);
  --decor-ui-pop-soft: rgba(255, 255, 255, .14);
  --decor-ui-line-soft: rgba(255, 255, 255, .12);
  --decor-control-border: color-mix(in srgb, var(--decor-ui-edge) 84%, transparent);
  --decor-card-border: color-mix(in srgb, var(--decor-ui-edge) 70%, transparent);
  --decor-row-border: color-mix(in srgb, var(--decor-ui-edge) 62%, transparent);
  --decor-primary-fill: var(--accent-primary);
  --decor-primary-fill-hover: var(--accent-primary);
  --decor-button-art:
    radial-gradient(circle at 18% 20%, var(--decor-ui-pop-soft) 0 2px, transparent 3px),
    linear-gradient(135deg, transparent 0 68%, var(--decor-ui-line-soft));
  --decor-card-art:
    linear-gradient(135deg, transparent 0 76%, var(--decor-ui-line-soft));
  --decor-row-art:
    linear-gradient(135deg, transparent 0 82%, var(--decor-ui-line-soft));
  --decor-control-field:
    radial-gradient(circle at 14% 18%, var(--decor-ui-pop-soft), transparent 30%),
    linear-gradient(135deg, transparent 0 62%, var(--decor-ui-line-soft));
  --decor-card-field:
    radial-gradient(circle at 100% 0%, var(--decor-ui-pop-soft), transparent 22%),
    linear-gradient(135deg, transparent 0 76%, var(--decor-ui-line-soft));
  --decor-control-shadow:
    0 0 0 1px var(--decor-ui-edge),
    0 10px 26px -18px var(--decor-ui-glow);
  --decor-card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 0 0 1px color-mix(in srgb, var(--decor-ui-edge) 68%, transparent);
}

:root[data-theme="ocean"] {
  --decor-ui-edge: rgba(24, 220, 240, .24);
  --decor-ui-glow: rgba(24, 220, 240, .50);
  --decor-ui-pop-soft: rgba(255, 111, 94, .18);
  --decor-ui-line-soft: rgba(24, 220, 240, .16);
  --decor-control-border: rgba(24, 220, 240, .42);
  --decor-card-border: rgba(24, 220, 240, .30);
  --decor-row-border: rgba(255, 111, 94, .20);
  --decor-primary-fill: #0f766e;
  --decor-primary-fill-hover: #0891b2;
  --decor-button-art:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .24) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 74%, rgba(255, 201, 60, .18) 0 3px, transparent 4px),
    linear-gradient(135deg, transparent 0 58%, rgba(255, 111, 94, .17) 58% 66%, transparent 66%);
  --decor-card-art:
    radial-gradient(circle at 96% 12%, rgba(24, 220, 240, .14), transparent 18%),
    repeating-linear-gradient(172deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 16px);
  --decor-row-art:
    linear-gradient(90deg, rgba(24, 220, 240, .08), transparent 22% 76%, rgba(255, 111, 94, .07));
  --decor-control-field:
    radial-gradient(circle at 15% 18%, rgba(255, 111, 94, .18), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(24, 220, 240, .14), transparent 30%);
  --decor-card-field:
    radial-gradient(circle at 98% 8%, rgba(24, 220, 240, .12), transparent 20%),
    linear-gradient(135deg, transparent 0 72%, rgba(255, 111, 94, .08));
}

:root[data-theme="cosmic"] {
  --decor-ui-edge: rgba(139, 92, 246, .24);
  --decor-ui-glow: rgba(103, 232, 249, .40);
  --decor-ui-pop-soft: rgba(245, 158, 11, .16);
  --decor-ui-line-soft: rgba(139, 92, 246, .16);
  --decor-control-border: rgba(139, 92, 246, .42);
  --decor-card-border: rgba(103, 232, 249, .26);
  --decor-row-border: rgba(245, 158, 11, .18);
  --decor-primary-fill: #6d28d9;
  --decor-primary-fill-hover: #7c3aed;
  --decor-button-art:
    radial-gradient(circle at 20% 22%, rgba(255, 255, 255, .32) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 30%, rgba(245, 158, 11, .24) 0 2px, transparent 3px),
    linear-gradient(135deg, transparent 0 62%, rgba(103, 232, 249, .14));
  --decor-card-art:
    radial-gradient(circle at 94% 8%, rgba(139, 92, 246, .17), transparent 20%),
    radial-gradient(circle at 12% 88%, rgba(245, 158, 11, .11), transparent 18%);
  --decor-row-art:
    repeating-linear-gradient(90deg, rgba(103, 232, 249, .07) 0 1px, transparent 1px 18px);
  --decor-control-field:
    radial-gradient(circle at 18% 20%, rgba(245, 158, 11, .15), transparent 26%),
    radial-gradient(circle at 86% 76%, rgba(103, 232, 249, .13), transparent 28%);
  --decor-card-field:
    radial-gradient(circle at 98% 0%, rgba(139, 92, 246, .15), transparent 22%),
    linear-gradient(135deg, transparent 0 70%, rgba(103, 232, 249, .08));
}

:root[data-theme="forest"] {
  --decor-ui-edge: rgba(134, 239, 172, .22);
  --decor-ui-glow: rgba(16, 185, 129, .34);
  --decor-ui-pop-soft: rgba(224, 123, 57, .15);
  --decor-ui-line-soft: rgba(134, 239, 172, .14);
  --decor-control-border: rgba(134, 239, 172, .34);
  --decor-card-border: rgba(134, 239, 172, .26);
  --decor-row-border: rgba(224, 123, 57, .18);
  --decor-primary-fill: #047857;
  --decor-primary-fill-hover: #059669;
  --decor-button-art:
    linear-gradient(115deg, rgba(134, 239, 172, .15) 0 2px, transparent 2px 55%),
    radial-gradient(ellipse at 84% 72%, rgba(224, 123, 57, .16), transparent 30%);
  --decor-card-art:
    repeating-linear-gradient(112deg, rgba(134, 239, 172, .07) 0 1px, transparent 1px 20px),
    radial-gradient(circle at 98% 10%, rgba(224, 123, 57, .10), transparent 18%);
  --decor-row-art:
    linear-gradient(90deg, rgba(16, 185, 129, .07), transparent 28% 74%, rgba(224, 123, 57, .06));
  --decor-control-field:
    radial-gradient(circle at 14% 18%, rgba(224, 123, 57, .14), transparent 28%),
    linear-gradient(135deg, transparent 0 68%, rgba(134, 239, 172, .12));
  --decor-card-field:
    linear-gradient(90deg, rgba(16, 185, 129, .07), transparent 20% 80%, rgba(224, 123, 57, .06));
}

:root[data-theme="neon"] {
  --decor-ui-edge: rgba(232, 121, 249, .30);
  --decor-ui-glow: rgba(34, 211, 238, .56);
  --decor-ui-pop-soft: rgba(163, 230, 53, .15);
  --decor-ui-line-soft: rgba(232, 121, 249, .20);
  --decor-control-border: rgba(34, 211, 238, .40);
  --decor-card-border: rgba(232, 121, 249, .34);
  --decor-row-border: rgba(163, 230, 53, .18);
  --decor-primary-fill: #7e22ce;
  --decor-primary-fill-hover: #0891b2;
  --decor-button-art:
    linear-gradient(90deg, rgba(34, 211, 238, .22), transparent 34%, rgba(232, 121, 249, .20)),
    linear-gradient(180deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 100%);
  --decor-card-art:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 8px),
    linear-gradient(135deg, rgba(34, 211, 238, .09), transparent 46%, rgba(232, 121, 249, .09));
  --decor-row-art:
    linear-gradient(90deg, rgba(232, 121, 249, .08), transparent 44%, rgba(34, 211, 238, .08));
  --decor-control-field:
    linear-gradient(90deg, rgba(232, 121, 249, .14), transparent 28%, rgba(34, 211, 238, .12)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 6px);
  --decor-card-field:
    linear-gradient(135deg, rgba(34, 211, 238, .10), transparent 42%, rgba(232, 121, 249, .10));
}

:root[data-theme="ember"] {
  --decor-ui-edge: rgba(249, 115, 22, .25);
  --decor-ui-glow: rgba(249, 115, 22, .48);
  --decor-ui-pop-soft: rgba(251, 191, 36, .17);
  --decor-ui-line-soft: rgba(249, 115, 22, .15);
  --decor-control-border: rgba(249, 115, 22, .42);
  --decor-card-border: rgba(251, 191, 36, .26);
  --decor-row-border: rgba(251, 113, 133, .18);
  --decor-primary-fill: #c2410c;
  --decor-primary-fill-hover: #ea580c;
  --decor-button-art:
    radial-gradient(ellipse at 50% 110%, rgba(251, 191, 36, .30), transparent 44%),
    linear-gradient(135deg, transparent 0 58%, rgba(251, 113, 133, .14));
  --decor-card-art:
    radial-gradient(ellipse at 50% 104%, rgba(249, 115, 22, .13), transparent 30%),
    repeating-linear-gradient(105deg, rgba(251, 191, 36, .06) 0 1px, transparent 1px 20px);
  --decor-row-art:
    linear-gradient(90deg, rgba(249, 115, 22, .08), transparent 72%, rgba(96, 165, 250, .05));
  --decor-control-field:
    radial-gradient(ellipse at 50% 100%, rgba(249, 115, 22, .20), transparent 42%),
    radial-gradient(circle at 16% 18%, rgba(251, 191, 36, .12), transparent 26%);
  --decor-card-field:
    radial-gradient(ellipse at 50% 100%, rgba(249, 115, 22, .12), transparent 34%);
}

:root[data-theme="midnight"] {
  --decor-ui-edge: rgba(103, 232, 249, .22);
  --decor-ui-glow: rgba(240, 171, 252, .34);
  --decor-ui-pop-soft: rgba(232, 196, 104, .14);
  --decor-ui-line-soft: rgba(103, 232, 249, .14);
  --decor-control-border: rgba(103, 232, 249, .34);
  --decor-card-border: rgba(240, 171, 252, .23);
  --decor-row-border: rgba(232, 196, 104, .16);
  --decor-primary-fill: #334155;
  --decor-primary-fill-hover: #0e7490;
  --decor-button-art:
    linear-gradient(125deg, transparent 0 30%, rgba(103, 232, 249, .16), rgba(240, 171, 252, .14), transparent 72%),
    radial-gradient(circle at 76% 18%, rgba(232, 196, 104, .18) 0 2px, transparent 3px);
  --decor-card-art:
    linear-gradient(120deg, transparent 0 42%, rgba(103, 232, 249, .08), rgba(240, 171, 252, .07), transparent 70%),
    radial-gradient(circle at 90% 12%, rgba(232, 196, 104, .09), transparent 16%);
  --decor-row-art:
    linear-gradient(90deg, rgba(103, 232, 249, .07), transparent 52%, rgba(240, 171, 252, .06));
  --decor-control-field:
    radial-gradient(circle at 16% 20%, rgba(232, 196, 104, .13), transparent 28%),
    linear-gradient(125deg, transparent 0 38%, rgba(103, 232, 249, .10), rgba(240, 171, 252, .10), transparent 70%);
  --decor-card-field:
    linear-gradient(125deg, transparent 0 44%, rgba(103, 232, 249, .08), rgba(240, 171, 252, .07), transparent 74%);
}

:root[data-theme="mycelium"] {
  --decor-ui-edge: rgba(232, 196, 116, .24);
  --decor-ui-glow: rgba(120, 168, 90, .32);
  --decor-ui-pop-soft: rgba(210, 92, 44, .14);
  --decor-ui-line-soft: rgba(242, 230, 208, .12);
  --decor-control-border: rgba(232, 196, 116, .36);
  --decor-card-border: rgba(120, 168, 90, .25);
  --decor-row-border: rgba(210, 92, 44, .20);
  --decor-primary-fill: #7c2d12;
  --decor-primary-fill-hover: #9a3412;
  --decor-button-art:
    repeating-linear-gradient(100deg, rgba(242, 230, 208, .14) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 82% 72%, rgba(232, 196, 116, .17) 0 2px, transparent 3px);
  --decor-card-art:
    repeating-linear-gradient(18deg, rgba(120, 168, 90, .065) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 96% 10%, rgba(210, 92, 44, .10), transparent 18%);
  --decor-row-art:
    repeating-linear-gradient(90deg, rgba(242, 230, 208, .055) 0 1px, transparent 1px 12px);
  --decor-control-field:
    radial-gradient(circle at 16% 20%, rgba(210, 92, 44, .14), transparent 28%),
    repeating-linear-gradient(115deg, rgba(242, 230, 208, .08) 0 1px, transparent 1px 9px);
  --decor-card-field:
    radial-gradient(circle at 100% 0%, rgba(232, 196, 116, .10), transparent 22%),
    repeating-linear-gradient(20deg, rgba(120, 168, 90, .06) 0 1px, transparent 1px 18px);
}

:root[data-theme="rose"] {
  --decor-ui-edge: rgba(251, 113, 133, .24);
  --decor-ui-glow: rgba(216, 180, 254, .36);
  --decor-ui-pop-soft: rgba(245, 158, 122, .16);
  --decor-ui-line-soft: rgba(251, 207, 232, .16);
  --decor-control-border: rgba(251, 113, 133, .38);
  --decor-card-border: rgba(216, 180, 254, .26);
  --decor-row-border: rgba(245, 158, 122, .18);
  --decor-primary-fill: #be123c;
  --decor-primary-fill-hover: #e11d48;
  --decor-button-art:
    radial-gradient(ellipse at 16% 22%, rgba(253, 230, 138, .18), transparent 34%),
    radial-gradient(ellipse at 86% 78%, rgba(216, 180, 254, .16), transparent 30%),
    linear-gradient(135deg, transparent 0 64%, rgba(251, 207, 232, .14));
  --decor-card-art:
    radial-gradient(circle at 96% 8%, rgba(251, 113, 133, .12), transparent 20%),
    radial-gradient(circle at 12% 88%, rgba(245, 158, 122, .10), transparent 18%);
  --decor-row-art:
    linear-gradient(90deg, rgba(251, 113, 133, .06), transparent 50%, rgba(216, 180, 254, .06));
  --decor-control-field:
    radial-gradient(circle at 16% 20%, rgba(245, 158, 122, .16), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(216, 180, 254, .13), transparent 30%);
  --decor-card-field:
    radial-gradient(circle at 100% 0%, rgba(251, 113, 133, .11), transparent 22%),
    linear-gradient(135deg, transparent 0 72%, rgba(216, 180, 254, .08));
}

:root[data-theme="slate"] {
  --decor-ui-edge: rgba(34, 211, 238, .25);
  --decor-ui-glow: rgba(244, 114, 182, .38);
  --decor-ui-pop-soft: rgba(250, 204, 21, .12);
  --decor-ui-line-soft: rgba(34, 211, 238, .16);
  --decor-control-border: rgba(34, 211, 238, .38);
  --decor-card-border: rgba(244, 114, 182, .24);
  --decor-row-border: rgba(196, 181, 253, .18);
  --decor-primary-fill: #020204;
  --decor-primary-fill-hover: #111827;
  --decor-button-art:
    linear-gradient(135deg, rgba(34, 211, 238, .22), transparent 26%, rgba(244, 114, 182, .17) 54%, transparent 72%, rgba(250, 204, 21, .13)),
    linear-gradient(#020204, #020204);
  --decor-card-art:
    linear-gradient(135deg, rgba(34, 211, 238, .10), transparent 28%, rgba(244, 114, 182, .08) 58%, transparent 76%, rgba(250, 204, 21, .07)),
    linear-gradient(#000, #000);
  --decor-row-art:
    linear-gradient(90deg, rgba(34, 211, 238, .07), transparent 38%, rgba(244, 114, 182, .06), transparent 72%, rgba(250, 204, 21, .05));
  --decor-control-field:
    linear-gradient(135deg, rgba(34, 211, 238, .15), transparent 22%, rgba(244, 114, 182, .10) 52%, transparent 68%, rgba(163, 230, 53, .09)),
    linear-gradient(#020204, #020204);
  --decor-card-field:
    linear-gradient(135deg, rgba(34, 211, 238, .10), transparent 26%, rgba(244, 114, 182, .08) 56%, transparent 78%, rgba(250, 204, 21, .07)),
    linear-gradient(#000, #000);
  --decor-control-shadow:
    0 0 0 1px rgba(34, 211, 238, .24),
    0 0 0 2px rgba(244, 114, 182, .08),
    0 14px 32px -22px rgba(34, 211, 238, .70);
}

/* Slate's intentional near-black primary fill needs light ink. The base
   button style assumes bright money-green and uses black text, which made
   primary actions (including Savings-plan setup) render black-on-black. */
:root[data-theme="slate"] :where(
  .btn-primary,
  .btn-process,
  .settings-key-save,
  .add-menu-btn,
  .add-fab
) { color: #f8fafc; }

:root[data-theme="light"] {
  --decor-ui-edge: rgba(99, 102, 241, .18);
  --decor-ui-glow: rgba(96, 165, 250, .22);
  --decor-ui-pop-soft: rgba(245, 158, 11, .13);
  --decor-ui-line-soft: rgba(99, 102, 241, .10);
  --decor-control-border: rgba(99, 102, 241, .25);
  --decor-card-border: rgba(96, 165, 250, .18);
  --decor-row-border: rgba(245, 158, 11, .14);
  --decor-primary-fill: #4f46e5;
  --decor-primary-fill-hover: #2563eb;
  --decor-button-art:
    radial-gradient(circle at 18% 20%, rgba(245, 158, 11, .14), transparent 28%),
    linear-gradient(135deg, transparent 0 66%, rgba(96, 165, 250, .12));
  --decor-card-art:
    radial-gradient(circle at 98% 4%, rgba(96, 165, 250, .09), transparent 20%),
    linear-gradient(135deg, transparent 0 78%, rgba(245, 158, 11, .06));
  --decor-row-art:
    linear-gradient(90deg, rgba(99, 102, 241, .045), transparent 70%, rgba(245, 158, 11, .055));
  --decor-control-field:
    radial-gradient(circle at 16% 18%, rgba(245, 158, 11, .12), transparent 28%),
    linear-gradient(135deg, transparent 0 70%, rgba(96, 165, 250, .10));
  --decor-card-field:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, .09), transparent 24%);
}

:root[data-theme="desert"] {
  --bg-base: #12080a;
  --bg-surface: #231218;
  --bg-elevated: #341f25;
  --bg-hover: #4a2e31;
  --accent-primary: #f97316;
  --accent-dim: #c2410c;
  --accent-glow: rgba(249, 115, 22, .20);
  --accent-muted: rgba(249, 115, 22, .09);
  --accent-secondary: #ec4899;
  --accent-secondary-dim: #be185d;
  --accent-secondary-glow: rgba(236, 72, 153, .17);
  --accent-secondary-muted: rgba(236, 72, 153, .08);
  --green-primary: #2dd4bf;
  --green-dim: #14b8a6;
  --green-muted: #115e59;
  --green-glow: rgba(45, 212, 191, .16);
  --status-danger: #fb7185;
  --status-danger-muted: rgba(251, 113, 133, .13);
  --status-warning: #fbbf24;
  --status-warning-muted: rgba(251, 191, 36, .13);
  --status-info: #38bdf8;
  --status-info-muted: rgba(56, 189, 248, .13);
  --border: rgba(249, 115, 22, .22);
  --border-subtle: rgba(249, 115, 22, .10);
  --border-strong: rgba(249, 115, 22, .38);
  --text-primary: #fff4eb;
  --text-secondary: #d9af99;
  --text-muted: #8c5e50;
  --text-inverse: #12080a;
  --decor-ui-edge: rgba(249, 115, 22, .26);
  --decor-ui-glow: rgba(236, 72, 153, .34);
  --decor-ui-pop-soft: rgba(245, 193, 108, .16);
  --decor-ui-line-soft: rgba(249, 115, 22, .15);
  --decor-control-border: rgba(249, 115, 22, .40);
  --decor-card-border: rgba(236, 72, 153, .25);
  --decor-row-border: rgba(45, 212, 191, .17);
  --decor-primary-fill: #c2410c;
  --decor-primary-fill-hover: #ea580c;
  --decor-button-art:
    radial-gradient(ellipse at 18% 22%, rgba(245, 193, 108, .18), transparent 34%),
    linear-gradient(135deg, transparent 0 64%, rgba(236, 72, 153, .13));
  --decor-card-art:
    radial-gradient(circle at 96% 8%, rgba(249, 115, 22, .12), transparent 20%),
    linear-gradient(135deg, transparent 0 78%, rgba(45, 212, 191, .07));
  --decor-row-art:
    linear-gradient(90deg, rgba(249, 115, 22, .07), transparent 52%, rgba(236, 72, 153, .06));
  --decor-control-field:
    radial-gradient(circle at 16% 20%, rgba(245, 193, 108, .15), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(236, 72, 153, .12), transparent 30%);
  --decor-card-field:
    radial-gradient(circle at 100% 0%, rgba(249, 115, 22, .11), transparent 22%),
    linear-gradient(135deg, transparent 0 72%, rgba(45, 212, 191, .07));
}

:root[data-theme="library"] {
  --bg-base: #100906;
  --bg-surface: #20140e;
  --bg-elevated: #322116;
  --bg-hover: #4a3323;
  --accent-primary: #d4a373;
  --accent-dim: #a97042;
  --accent-glow: rgba(212, 163, 115, .18);
  --accent-muted: rgba(212, 163, 115, .08);
  --accent-secondary: #7f1d1d;
  --accent-secondary-dim: #5f1515;
  --accent-secondary-glow: rgba(127, 29, 29, .18);
  --accent-secondary-muted: rgba(127, 29, 29, .08);
  --green-primary: #22c55e;
  --green-dim: #16a34a;
  --green-muted: #14532d;
  --green-glow: rgba(34, 197, 94, .14);
  --status-danger: #ef4444;
  --status-danger-muted: rgba(239, 68, 68, .13);
  --status-warning: #eab308;
  --status-warning-muted: rgba(234, 179, 8, .13);
  --status-info: #93c5fd;
  --status-info-muted: rgba(147, 197, 253, .12);
  --border: rgba(212, 163, 115, .22);
  --border-subtle: rgba(212, 163, 115, .10);
  --border-strong: rgba(212, 163, 115, .38);
  --text-primary: #f8efe0;
  --text-secondary: #c7a98e;
  --text-muted: #80624b;
  --text-inverse: #100906;
  --decor-ui-edge: rgba(212, 163, 115, .26);
  --decor-ui-glow: rgba(234, 179, 8, .28);
  --decor-ui-pop-soft: rgba(244, 230, 200, .14);
  --decor-ui-line-soft: rgba(212, 163, 115, .14);
  --decor-control-border: rgba(212, 163, 115, .38);
  --decor-card-border: rgba(127, 29, 29, .24);
  --decor-row-border: rgba(234, 179, 8, .16);
  --decor-primary-fill: #7c2d12;
  --decor-primary-fill-hover: #92400e;
  --decor-button-art:
    linear-gradient(115deg, rgba(244, 230, 200, .12) 0 2px, transparent 2px 58%),
    radial-gradient(circle at 84% 76%, rgba(234, 179, 8, .14), transparent 28%);
  --decor-card-art:
    repeating-linear-gradient(90deg, rgba(244, 230, 200, .045) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 98% 10%, rgba(212, 163, 115, .11), transparent 18%);
  --decor-row-art:
    repeating-linear-gradient(0deg, rgba(244, 230, 200, .045) 0 1px, transparent 1px 12px);
  --decor-control-field:
    radial-gradient(circle at 16% 18%, rgba(212, 163, 115, .13), transparent 28%),
    repeating-linear-gradient(90deg, rgba(244, 230, 200, .06) 0 1px, transparent 1px 12px);
  --decor-card-field:
    radial-gradient(circle at 100% 0%, rgba(234, 179, 8, .09), transparent 22%),
    linear-gradient(135deg, transparent 0 74%, rgba(127, 29, 29, .08));
}

:root[data-theme="arctic"] {
  --bg-base: #030712;
  --bg-surface: #0b1424;
  --bg-elevated: #14233a;
  --bg-hover: #203653;
  --accent-primary: #67e8f9;
  --accent-dim: #0891b2;
  --accent-glow: rgba(103, 232, 249, .18);
  --accent-muted: rgba(103, 232, 249, .08);
  --accent-secondary: #a78bfa;
  --accent-secondary-dim: #7c3aed;
  --accent-secondary-glow: rgba(167, 139, 250, .16);
  --accent-secondary-muted: rgba(167, 139, 250, .08);
  --green-primary: #34d399;
  --green-dim: #10b981;
  --green-muted: #145a45;
  --green-glow: rgba(52, 211, 153, .14);
  --status-danger: #f9a8d4;
  --status-danger-muted: rgba(249, 168, 212, .12);
  --status-warning: #fde68a;
  --status-warning-muted: rgba(253, 230, 138, .12);
  --status-info: #7dd3fc;
  --status-info-muted: rgba(125, 211, 252, .13);
  --border: rgba(103, 232, 249, .20);
  --border-subtle: rgba(103, 232, 249, .10);
  --border-strong: rgba(103, 232, 249, .36);
  --text-primary: #f1f9ff;
  --text-secondary: #a8c3d7;
  --text-muted: #5e7690;
  --text-inverse: #030712;
  --decor-ui-edge: rgba(103, 232, 249, .25);
  --decor-ui-glow: rgba(167, 139, 250, .34);
  --decor-ui-pop-soft: rgba(248, 250, 252, .14);
  --decor-ui-line-soft: rgba(103, 232, 249, .14);
  --decor-control-border: rgba(103, 232, 249, .38);
  --decor-card-border: rgba(167, 139, 250, .24);
  --decor-row-border: rgba(248, 250, 252, .16);
  --decor-primary-fill: #0e7490;
  --decor-primary-fill-hover: #0891b2;
  --decor-button-art:
    linear-gradient(125deg, rgba(103, 232, 249, .16), transparent 38%, rgba(167, 139, 250, .14)),
    radial-gradient(circle at 78% 18%, rgba(248, 250, 252, .16) 0 2px, transparent 3px);
  --decor-card-art:
    linear-gradient(135deg, rgba(103, 232, 249, .09), transparent 42%, rgba(167, 139, 250, .08)),
    radial-gradient(circle at 94% 10%, rgba(248, 250, 252, .10), transparent 18%);
  --decor-row-art:
    linear-gradient(90deg, rgba(103, 232, 249, .07), transparent 48%, rgba(167, 139, 250, .06));
  --decor-control-field:
    radial-gradient(circle at 16% 20%, rgba(248, 250, 252, .12), transparent 28%),
    linear-gradient(125deg, transparent 0 38%, rgba(103, 232, 249, .10), rgba(167, 139, 250, .09), transparent 70%);
  --decor-card-field:
    linear-gradient(125deg, transparent 0 44%, rgba(103, 232, 249, .08), rgba(167, 139, 250, .07), transparent 74%);
}

:root[data-theme="cyber"] {
  --bg-base: #020205;
  --bg-surface: #071017;
  --bg-elevated: #0d1c25;
  --bg-hover: #142b35;
  --accent-primary: #22d3ee;
  --accent-dim: #0891b2;
  --accent-glow: rgba(34, 211, 238, .22);
  --accent-muted: rgba(34, 211, 238, .09);
  --accent-secondary: #e879f9;
  --accent-secondary-dim: #c026d3;
  --accent-secondary-glow: rgba(232, 121, 249, .18);
  --accent-secondary-muted: rgba(232, 121, 249, .08);
  --green-primary: #a3e635;
  --green-dim: #84cc16;
  --green-muted: #3f6212;
  --green-glow: rgba(163, 230, 53, .16);
  --status-danger: #fb7185;
  --status-danger-muted: rgba(251, 113, 133, .13);
  --status-warning: #f59e0b;
  --status-warning-muted: rgba(245, 158, 11, .13);
  --status-info: #38bdf8;
  --status-info-muted: rgba(56, 189, 248, .13);
  --border: rgba(34, 211, 238, .24);
  --border-subtle: rgba(34, 211, 238, .11);
  --border-strong: rgba(34, 211, 238, .42);
  --text-primary: #effffd;
  --text-secondary: #93d7d6;
  --text-muted: #4e817e;
  --text-inverse: #020205;
  --decor-ui-edge: rgba(34, 211, 238, .28);
  --decor-ui-glow: rgba(232, 121, 249, .42);
  --decor-ui-pop-soft: rgba(163, 230, 53, .14);
  --decor-ui-line-soft: rgba(34, 211, 238, .16);
  --decor-control-border: rgba(34, 211, 238, .42);
  --decor-card-border: rgba(232, 121, 249, .26);
  --decor-row-border: rgba(163, 230, 53, .16);
  --decor-primary-fill: #0e7490;
  --decor-primary-fill-hover: #0891b2;
  --decor-button-art:
    linear-gradient(90deg, rgba(34, 211, 238, .20), transparent 34%, rgba(232, 121, 249, .16)),
    radial-gradient(circle at 82% 72%, rgba(163, 230, 53, .15), transparent 28%);
  --decor-card-art:
    repeating-linear-gradient(115deg, rgba(34, 211, 238, .055) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 98% 10%, rgba(232, 121, 249, .10), transparent 18%);
  --decor-row-art:
    linear-gradient(90deg, rgba(34, 211, 238, .07), transparent 44%, rgba(163, 230, 53, .06));
  --decor-control-field:
    linear-gradient(90deg, rgba(34, 211, 238, .13), transparent 28%, rgba(232, 121, 249, .10)),
    radial-gradient(circle at 84% 78%, rgba(163, 230, 53, .11), transparent 28%);
  --decor-card-field:
    linear-gradient(135deg, rgba(34, 211, 238, .09), transparent 42%, rgba(232, 121, 249, .08));
}

:root[data-theme="treasury"] {
  --bg-base: #040403;
  --bg-surface: #11100b;
  --bg-elevated: #1d1a12;
  --bg-hover: #2b2618;
  --accent-primary: #fbbf24;
  --accent-dim: #d97706;
  --accent-glow: rgba(251, 191, 36, .20);
  --accent-muted: rgba(251, 191, 36, .08);
  --accent-secondary: #e5e7eb;
  --accent-secondary-dim: #9ca3af;
  --accent-secondary-glow: rgba(229, 231, 235, .14);
  --accent-secondary-muted: rgba(229, 231, 235, .07);
  --green-primary: #22c55e;
  --green-dim: #16a34a;
  --green-muted: #14532d;
  --green-glow: rgba(34, 197, 94, .16);
  --status-danger: #f87171;
  --status-danger-muted: rgba(248, 113, 113, .12);
  --status-warning: #facc15;
  --status-warning-muted: rgba(250, 204, 21, .13);
  --status-info: #93c5fd;
  --status-info-muted: rgba(147, 197, 253, .12);
  --border: rgba(251, 191, 36, .22);
  --border-subtle: rgba(251, 191, 36, .10);
  --border-strong: rgba(251, 191, 36, .40);
  --text-primary: #fff8e6;
  --text-secondary: #cabf9f;
  --text-muted: #77705c;
  --text-inverse: #040403;
  --decor-ui-edge: rgba(251, 191, 36, .28);
  --decor-ui-glow: rgba(229, 231, 235, .28);
  --decor-ui-pop-soft: rgba(34, 197, 94, .12);
  --decor-ui-line-soft: rgba(251, 191, 36, .15);
  --decor-control-border: rgba(251, 191, 36, .42);
  --decor-card-border: rgba(229, 231, 235, .22);
  --decor-row-border: rgba(34, 197, 94, .15);
  --decor-primary-fill: #a16207;
  --decor-primary-fill-hover: #ca8a04;
  --decor-button-art:
    linear-gradient(135deg, rgba(251, 191, 36, .20), transparent 34%, rgba(229, 231, 235, .14)),
    radial-gradient(circle at 86% 76%, rgba(34, 197, 94, .12), transparent 28%);
  --decor-card-art:
    linear-gradient(135deg, rgba(251, 191, 36, .10), transparent 34%, rgba(229, 231, 235, .08)),
    radial-gradient(circle at 96% 8%, rgba(34, 197, 94, .08), transparent 18%);
  --decor-row-art:
    linear-gradient(90deg, rgba(251, 191, 36, .07), transparent 52%, rgba(229, 231, 235, .05));
  --decor-control-field:
    radial-gradient(circle at 16% 20%, rgba(251, 191, 36, .14), transparent 28%),
    linear-gradient(135deg, transparent 0 68%, rgba(229, 231, 235, .10));
  --decor-card-field:
    radial-gradient(circle at 100% 0%, rgba(251, 191, 36, .10), transparent 22%),
    linear-gradient(135deg, transparent 0 72%, rgba(34, 197, 94, .06));
}

.decor-scene-home {
  --decor-image-position: center;
  --decor-image-size: cover;
  --decor-scene-field:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--d1) 15%, transparent), transparent 28%),
    radial-gradient(circle at 16% 88%, color-mix(in srgb, var(--d2) 12%, transparent), transparent 22%);
}

.decor-scene-together,
.decor-scene-bridge {
  --decor-image-position: 24% center;
  --decor-image-size: 112% auto;
  --decor-scene-field:
    radial-gradient(circle at 28% 36%, color-mix(in srgb, var(--d1) 16%, transparent), transparent 24%),
    radial-gradient(circle at 72% 38%, color-mix(in srgb, var(--d2) 16%, transparent), transparent 24%),
    linear-gradient(90deg, transparent 0 38%, color-mix(in srgb, var(--d3) 10%, transparent) 48% 52%, transparent 62% 100%);
}

.decor-scene-quest {
  --decor-image-position: 70% center;
  --decor-image-size: 116% auto;
  --decor-scene-field:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--d2) 16%, transparent), transparent 22%),
    linear-gradient(135deg, transparent 0 38%, color-mix(in srgb, var(--d1) 11%, transparent) 48%, transparent 62%);
}

.decor-scene-stash,
.decor-scene-vault {
  --decor-image-position: 76% 72%;
  --decor-image-size: 124% auto;
  --decor-scene-field:
    radial-gradient(ellipse at 50% 94%, color-mix(in srgb, var(--d2) 20%, transparent), transparent 34%),
    radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--d3) 12%, transparent), transparent 20%);
}

.decor-scene-quiet {
  --decor-image-position: 50% 28%;
  --decor-image-size: 112% auto;
  --decor-scene-field:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--d1) 9%, transparent), transparent 36%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-base) 20%, transparent));
  --decor-scene-opacity: .48;
}

.decor-scene-calendar {
  --decor-image-position: 18% 62%;
  --decor-image-size: 118% auto;
  --decor-scene-field:
    linear-gradient(color-mix(in srgb, var(--d1) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--d1) 10%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--d2) 13%, transparent), transparent 24%);
  --decor-scene-size: 64px 64px, 64px 64px, auto;
}

.decor-scene-dock,
.decor-scene-income {
  --decor-image-position: 84% 48%;
  --decor-image-size: 120% auto;
  --decor-scene-field:
    linear-gradient(100deg, transparent 0 28%, color-mix(in srgb, var(--d1) 13%, transparent) 46%, transparent 70%),
    radial-gradient(circle at 18% 82%, color-mix(in srgb, var(--d2) 13%, transparent), transparent 24%);
}

.decor-scene-focus,
.decor-scene-entry {
  --decor-image-position: 50% 82%;
  --decor-image-size: 126% auto;
  --decor-scene-field:
    radial-gradient(circle at 50% 46%, transparent 0 34%, color-mix(in srgb, var(--bg-base) 28%, transparent) 82%),
    radial-gradient(circle at 82% 76%, color-mix(in srgb, var(--d2) 10%, transparent), transparent 18%);
  --decor-scene-opacity: .44;
}

.decor-scene-workshop,
.decor-scene-studio,
.decor-scene-tools {
  --decor-image-position: 8% 32%;
  --decor-image-size: 118% auto;
  --decor-scene-field:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--d1) 8%, transparent) 0 1px, transparent 1px 22px),
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--d2) 13%, transparent), transparent 22%);
}

.decor-scene-ledger,
.decor-scene-charts {
  --decor-image-position: 50% 50%;
  --decor-image-size: 132% auto;
  --decor-field-opacity: .38;
  --decor-scene-field:
    linear-gradient(color-mix(in srgb, var(--d1) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--d1) 6%, transparent) 1px, transparent 1px);
  --decor-scene-opacity: .28;
  --decor-scene-size: 38px 38px, 38px 38px;
}

body[data-decor-page="dashboard"] {
  --decor-page-field:
    radial-gradient(ellipse at 50% 102%, color-mix(in srgb, var(--d2) 14%, transparent), transparent 34%),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--d1) 10%, transparent), transparent 22%);
  --decor-page-button-field:
    radial-gradient(circle at 12% 20%, var(--decor-ui-pop-soft), transparent 34%);
}

body[data-decor-page="txlog"] {
  --decor-page-field:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--d1) 7%, transparent) 0 1px, transparent 1px 29px),
    linear-gradient(90deg, transparent 0 72%, color-mix(in srgb, var(--d2) 9%, transparent) 84%, transparent);
  --decor-page-opacity: .22;
  --decor-page-button-field:
    repeating-linear-gradient(0deg, var(--decor-ui-line-soft) 0 1px, transparent 1px 7px);
}

body[data-decor-page="cards"] {
  --decor-page-field:
    linear-gradient(135deg, color-mix(in srgb, var(--d1) 9%, transparent), transparent 28%, color-mix(in srgb, var(--d2) 10%, transparent) 74%, transparent),
    radial-gradient(circle at 78% 76%, color-mix(in srgb, var(--d3) 12%, transparent), transparent 24%);
  --decor-page-button-field:
    linear-gradient(135deg, transparent 0 22%, var(--decor-ui-line-soft) 22% 26%, transparent 26% 100%);
}

body[data-decor-page="bills"] {
  --decor-page-field:
    linear-gradient(color-mix(in srgb, var(--d2) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--d2) 8%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--d1) 10%, transparent), transparent 20%);
  --decor-page-size: 72px 72px, 72px 72px, auto;
  --decor-page-button-field:
    linear-gradient(90deg, var(--decor-ui-line-soft) 0 6px, transparent 6px);
}

body[data-decor-page="imports"],
body[data-decor-page="scanner"] {
  --decor-page-field:
    linear-gradient(115deg, transparent 0 36%, color-mix(in srgb, var(--d1) 14%, transparent) 46%, transparent 58%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--d3) 5%, transparent) 0 1px, transparent 1px 36px);
  --decor-page-button-field:
    linear-gradient(115deg, transparent 0 38%, var(--decor-ui-line-soft) 48%, transparent 58%);
}

body[data-decor-page="settings"],
body[data-decor-page="devnotes"],
body[data-decor-page="palette"] {
  --decor-page-field:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--d1) 7%, transparent) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--d2) 12%, transparent), transparent 22%);
  --decor-page-button-field:
    repeating-linear-gradient(135deg, var(--decor-ui-line-soft) 0 1px, transparent 1px 10px);
}

body[data-decor-page="us"],
body[data-decor-page="balance-bridge"] {
  --decor-page-field:
    radial-gradient(circle at 24% 40%, color-mix(in srgb, var(--d1) 13%, transparent), transparent 26%),
    radial-gradient(circle at 76% 42%, color-mix(in srgb, var(--d2) 13%, transparent), transparent 26%),
    linear-gradient(90deg, transparent 0 42%, color-mix(in srgb, var(--d3) 9%, transparent) 50%, transparent 58%);
  --decor-page-button-field:
    radial-gradient(circle at 18% 50%, var(--decor-ui-pop-soft), transparent 28%),
    radial-gradient(circle at 82% 50%, var(--decor-ui-line-soft), transparent 28%);
}

body[data-decor-page="coach"] {
  --decor-page-field:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--d1) 8%, transparent), transparent 34%),
    radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--d2) 10%, transparent), transparent 20%);
  --decor-page-button-field:
    radial-gradient(circle at 50% 20%, var(--decor-ui-pop-soft), transparent 36%);
}

body[data-decor-page="savings"],
body[data-decor-page="goals"] {
  --decor-page-field:
    radial-gradient(ellipse at 50% 92%, color-mix(in srgb, var(--d2) 16%, transparent), transparent 32%),
    linear-gradient(135deg, transparent 0 38%, color-mix(in srgb, var(--d1) 11%, transparent) 50%, transparent 62%);
  --decor-page-button-field:
    radial-gradient(circle at 84% 18%, var(--decor-ui-pop-soft), transparent 26%);
}

body[data-decor-page="analytics"] {
  --decor-page-field:
    linear-gradient(color-mix(in srgb, var(--d1) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--d1) 5%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--d2) 8%, transparent), transparent 22%);
  --decor-page-size: 44px 44px, 44px 44px, auto;
  --decor-page-opacity: .16;
  --decor-page-button-field: none;
  --decor-card-art:
    linear-gradient(135deg, transparent 0 84%, color-mix(in srgb, var(--decor-ui-line-soft) 54%, transparent));
  --decor-card-border: color-mix(in srgb, var(--decor-ui-edge) 54%, transparent);
  --decor-row-border: color-mix(in srgb, var(--decor-ui-edge) 42%, transparent);
}

body[data-decor-page="manual"],
body[data-decor-page="income"] {
  --decor-page-field:
    radial-gradient(circle at 18% 82%, color-mix(in srgb, var(--d2) 12%, transparent), transparent 24%),
    linear-gradient(110deg, transparent 0 34%, color-mix(in srgb, var(--d1) 12%, transparent) 46%, transparent 60%);
  --decor-page-button-field:
    linear-gradient(110deg, transparent 0 40%, var(--decor-ui-line-soft) 48%, transparent 60%);
}

body[data-decor-page] {
  --decor-page-card-field: var(--decor-page-button-field, none);
}

body[data-decor-page="analytics"] {
  --decor-page-card-field: none;
}

:root[data-theme="light"] .theme-decor-scrim {
  --decor-scrim-opacity: .56;
  background:
    linear-gradient(180deg, rgba(244, 246, 250, .88), rgba(244, 246, 250, .28) 42%, rgba(244, 246, 250, .62)),
    radial-gradient(circle at 50% 20%, transparent 0 30%, rgba(244, 246, 250, .72) 88%);
}

.theme-decor-kind-grid {
  left: 50%;
  top: 76%;
  width: min(680px, 88vw);
  height: 250px;
  opacity: .22;
  transform: translate3d(-50%, -50%, 0) perspective(460px) rotateX(62deg);
}

.theme-decor-kind-topo,
.theme-decor-kind-hyphae,
.theme-decor-kind-constellation,
.theme-decor-kind-rays,
.theme-decor-kind-vines,
.theme-decor-kind-trees,
.theme-decor-kind-rainbow,
.theme-decor-kind-skyline,
.theme-decor-kind-aurora,
.theme-decor-kind-silver-cloud,
.theme-decor-kind-moss-log,
.theme-decor-kind-desert-pine,
.theme-decor-kind-spore-print,
.theme-decor-kind-amoled-road,
.theme-decor-kind-neon-ribbon,
.theme-decor-kind-black-glass {
  width: min(520px, 72vw);
  height: min(360px, 48vw);
  opacity: var(--o, .28);
}

.theme-decor-kind-grid {
  transform-origin: 50% 50%;
}

.theme-decor-kind-aurora,
.theme-decor-kind-amoled-road,
.theme-decor-kind-neon-ribbon {
  mix-blend-mode: screen;
  width: min(760px, 94vw);
  height: min(360px, 45vw);
}

.theme-decor-kind-moss-log,
.theme-decor-kind-desert-pine,
.theme-decor-kind-saguaro,
.theme-decor-kind-ocotillo,
.theme-decor-kind-sandstone,
.theme-decor-kind-book-stack,
.theme-decor-kind-open-book,
.theme-decor-kind-card-catalog,
.theme-decor-kind-ledger-page,
.theme-decor-kind-paper-sheet,
.theme-decor-kind-aurora-veil,
.theme-decor-kind-glacier,
.theme-decor-kind-snowdrift,
.theme-decor-kind-iceberg,
.theme-decor-kind-whale-constellation,
.theme-decor-kind-circuit-vine,
.theme-decor-kind-fiber-root,
.theme-decor-kind-terrarium,
.theme-decor-kind-hydro-rail,
.theme-decor-kind-vault-door,
.theme-decor-kind-deposit-box,
.theme-decor-kind-cash-stack,
.theme-decor-kind-coin-stack,
.theme-decor-kind-ledger-gold {
  width: min(620px, 88vw);
  height: min(300px, 42vw);
}

.theme-decor-kind-spore-print {
  mix-blend-mode: screen;
  opacity: .32;
}

.theme-decor-kind-black-glass,
.theme-decor-kind-prism-shard,
.theme-decor-kind-color-pin,
.theme-decor-kind-aurora-veil,
.theme-decor-kind-circuit-vine,
.theme-decor-kind-holo-flower,
.theme-decor-kind-robot-bee,
.theme-decor-kind-glow-leaf,
.theme-decor-kind-glass-drop,
.theme-decor-kind-neon-sprout,
.theme-decor-kind-diamond,
.theme-decor-kind-jewel-spark {
  mix-blend-mode: screen;
}

.theme-decor-kind-amanita,
.theme-decor-kind-oyster-cluster,
.theme-decor-kind-pink-oyster,
.theme-decor-kind-golden-oyster,
.theme-decor-kind-turkey-tail,
.theme-decor-kind-shelf-fungi,
.theme-decor-kind-morel,
.theme-decor-kind-chanterelle,
.theme-decor-kind-ombre-rose,
.theme-decor-kind-lily,
.theme-decor-kind-orchid,
.theme-decor-kind-cyclamen,
.theme-decor-kind-cactus-flower,
.theme-decor-kind-prickly-pear,
.theme-decor-kind-agave,
.theme-decor-kind-wildflower,
.theme-decor-kind-mica,
.theme-decor-kind-quartz-pebble,
.theme-decor-kind-banker-lamp,
.theme-decor-kind-brass-key,
.theme-decor-kind-fountain-pen,
.theme-decor-kind-bookmark,
.theme-decor-kind-wax-seal,
.theme-decor-kind-ink-bottle,
.theme-decor-kind-reading-glasses,
.theme-decor-kind-ice-crystal,
.theme-decor-kind-cabin-light,
.theme-decor-kind-frost-compass,
.theme-decor-kind-tech-orchid,
.theme-decor-kind-seed-pod,
.theme-decor-kind-gold-bar,
.theme-decor-kind-silver-coin,
.theme-decor-kind-platinum-ingot,
.theme-decor-kind-money-bag,
.theme-decor-kind-banker-lamp-gold {
  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, .22))
    drop-shadow(0 0 10px color-mix(in srgb, var(--decor-glow) 55%, transparent));
}

.theme-decor-kind-treasure-chest,
.theme-decor-kind-campfire,
.theme-decor-kind-arcade,
.theme-decor-kind-watering-can,
.theme-decor-kind-vault-door,
.theme-decor-kind-deposit-box,
.theme-decor-kind-cash-stack,
.theme-decor-kind-coin-stack {
  filter:
    drop-shadow(0 0 12px color-mix(in srgb, var(--d2) 26%, transparent))
    drop-shadow(0 14px 22px rgba(0, 0, 0, .22));
}

.theme-decor-kind-bubble,
.theme-decor-kind-spore,
.theme-decor-kind-ember,
.theme-decor-kind-star,
.theme-decor-kind-spark,
.theme-decor-kind-dust,
.theme-decor-kind-snowflake,
.theme-decor-kind-jewel-spark {
  mix-blend-mode: screen;
}

.theme-decor-kind-lizard,
.theme-decor-kind-desert-snake,
.theme-decor-kind-tarantula,
.theme-decor-kind-seal {
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .32));
}

.decor-theme-neon .page-header h2,
.decor-theme-neon ~ .page-header h2,
:root[data-theme="neon"] .page-header h2,
:root[data-theme="neon"] .page-title {
  text-shadow:
    0 0 8px rgba(232, 121, 249, .30),
    0 0 16px rgba(34, 211, 238, .18);
}

:root[data-theme="neon"] .bank-balance-card,
:root[data-theme="neon"] .settings-card,
:root[data-theme="neon"] .card-page-card,
:root[data-theme="neon"] .add-menu-btn,
:root[data-theme="neon"] .add-fab {
  box-shadow:
    0 0 0 1px rgba(232, 121, 249, .12),
    0 0 22px -14px rgba(34, 211, 238, .75),
    var(--shadow-sm);
}

:root[data-theme="ocean"] .add-fab,
:root[data-theme="ocean"] .add-menu-btn {
  box-shadow:
    0 0 0 1px rgba(24, 220, 240, .16),
    0 12px 28px -12px rgba(24, 220, 240, .72),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

:root[data-theme="rose"] .add-fab,
:root[data-theme="rose"] .add-menu-btn {
  box-shadow:
    0 0 0 1px rgba(251, 113, 133, .14),
    0 12px 28px -12px rgba(251, 113, 133, .70),
    inset 0 1px 0 rgba(255, 255, 255, .20);
}

:root[data-theme="ember"] .add-fab,
:root[data-theme="ember"] .add-menu-btn {
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, .14),
    0 12px 30px -12px rgba(249, 115, 22, .76),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

:root[data-theme="desert"] .add-fab,
:root[data-theme="desert"] .add-menu-btn {
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, .16),
    0 12px 30px -12px rgba(236, 72, 153, .68),
    inset 0 1px 0 rgba(255, 255, 255, .20);
}

:root[data-theme="library"] .add-fab,
:root[data-theme="library"] .add-menu-btn {
  box-shadow:
    0 0 0 1px rgba(212, 163, 115, .16),
    0 12px 30px -12px rgba(212, 163, 115, .62),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

:root[data-theme="arctic"] .add-fab,
:root[data-theme="arctic"] .add-menu-btn {
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, .16),
    0 12px 30px -12px rgba(167, 139, 250, .68),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

:root[data-theme="cyber"] .add-fab,
:root[data-theme="cyber"] .add-menu-btn {
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, .18),
    0 0 28px -12px rgba(232, 121, 249, .82),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

:root[data-theme="treasury"] .add-fab,
:root[data-theme="treasury"] .add-menu-btn {
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, .18),
    0 12px 30px -12px rgba(251, 191, 36, .72),
    inset 0 1px 0 rgba(255, 255, 255, .20);
}

:root:not([data-theme="custom"]) :where(
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .btn-process,
  .btn-accept-correction,
  .settings-key-save,
  .who-paid-btn,
  .add-menu-btn,
  .add-fab,
  .add-menu-item,
  .bank-balance-edit-btn,
  .bank-balance-audit-btn,
  .sidebar-signout-btn,
  .account-signout-btn,
  .theme-btn,
  .palette-theme-btn,
  .tab-btn,
  .bb-settle-chip,
  .bcal-nav,
  .bcal-cell,
  .coach-starter,
  .smart-alert-action,
  .gm-hero,
  .gm-flower,
  .goal-moment-ack,
  .earn-day,
  .ana-collapse-btn,
  .cat-share-btn,
  .cat-private-btn,
  .lw-style-pill,
  .imports-bill-picker-item,
  .api-key-skip-btn,
  button.proj-row-drill
) {
  background-image: none;
  border-color: var(--decor-control-border, var(--decor-ui-edge));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--decor-control-border) 76%, transparent),
    var(--shadow-sm, 0 0 0 transparent);
}

:root:not([data-theme="custom"]) :where(
  .btn-primary,
  .btn-process,
  .settings-key-save,
  .add-menu-btn,
  .add-fab
) {
  background-color: var(--decor-primary-fill, var(--accent-primary));
  text-shadow: 0 1px 10px rgba(0, 0, 0, .26);
}

:root:not([data-theme="custom"]) :where(
  .btn-primary,
  .btn-process,
  .settings-key-save,
  .add-menu-btn,
  .add-fab
):hover {
  background-color: var(--decor-primary-fill-hover, var(--decor-primary-fill, var(--accent-primary)));
}

:root:not([data-theme="custom"]) :where(.nav-link.active, .bottom-nav-item.active) {
  background-image: none;
  border-color: var(--decor-control-border, var(--decor-ui-edge));
  box-shadow:
    inset 0 0 0 1px var(--decor-control-border),
    0 10px 28px -22px var(--decor-ui-glow);
}

:root:not([data-theme="custom"]) :where(.sidebar, .topbar, .bottom-nav, .add-menu) {
  background-image:
    linear-gradient(135deg, var(--decor-ui-line-soft), transparent 36%, var(--decor-ui-pop-soft)),
    var(--decor-card-field, none);
  background-blend-mode: screen, screen;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--decor-ui-edge) 58%, transparent),
    0 18px 42px -34px var(--decor-ui-glow);
}

:root:not([data-theme="custom"]) .nav-link,
:root:not([data-theme="custom"]) .bottom-nav-item {
  text-shadow: 0 0 14px color-mix(in srgb, var(--decor-ui-glow) 70%, transparent);
}

:root:not([data-theme="custom"]) :where(.nav-link:hover, .bottom-nav-item:hover) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--decor-ui-edge) 72%, transparent);
}

:root[data-theme="slate"] :where(.sidebar, .topbar, .bottom-nav, .add-menu) {
  background-image:
    linear-gradient(135deg, rgba(34, 211, 238, .09), transparent 26%, rgba(244, 114, 182, .07) 56%, transparent 72%, rgba(250, 204, 21, .06)),
    linear-gradient(#000, #000);
}

:root[data-theme="light"] :where(.sidebar, .topbar, .bottom-nav, .add-menu) {
  background-image:
    linear-gradient(135deg, rgba(96, 165, 250, .08), transparent 46%, rgba(245, 158, 11, .08)),
    var(--decor-card-field, none);
}

:root:not([data-theme="custom"]) :where(
  .summary-card,
  .cat-bal-card,
  .bank-balance-card,
  .ties-out-card,
  .settings-card,
  .card-page-card,
  .scanner-upload-card,
  .placeholder-card,
  .analytics-card,
  .analytics-stat,
  .us-card,
  .savings-summary-card,
  .goal-card,
  .goals-room-card,
  .goal-modal,
  .goal-journey,
  .goal-invite,
  .gj-extra-row,
  .goal-moment-row,
  .goal-milestone-card,
  .earn-card,
  .earn-cfg-grid,
  .dev-card
) {
  background-color: var(--decor-glass-bg, color-mix(in srgb, var(--bg-surface) 78%, transparent));
  background-image: none;
  -webkit-backdrop-filter: blur(var(--decor-glass-blur, 16px)) saturate(135%);
  backdrop-filter: blur(var(--decor-glass-blur, 16px)) saturate(135%);
  border: 1px solid var(--decor-glass-border, rgba(255, 255, 255, .12));
  box-shadow:
    0 12px 34px -14px rgba(0, 0, 0, .5),
    inset 0 1px 0 var(--decor-glass-top, rgba(255, 255, 255, .10));
}

/* Glass tuning: the light theme needs a dark hairline + bright top highlight so
   the frost reads against a pale background (dark themes use the defaults). */
:root[data-theme="light"] {
  --decor-glass-bg: color-mix(in srgb, var(--bg-surface) 70%, transparent);
  --decor-glass-border: rgba(15, 23, 42, .10);
  --decor-glass-top: rgba(255, 255, 255, .6);
}

/* Frost the chrome too — nav, top bar, sidebar, add-menu — so it all reads as
   one piece of glass over the world. */
:root:not([data-theme="custom"]) :where(.bottom-nav, .sidebar, .add-menu, .add-menu-sheet) {
  background-color: color-mix(in srgb, var(--bg-surface) 92%, transparent) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border-color: var(--decor-glass-border, rgba(255, 255, 255, .12));
}

/* The top bar holds the page title over the busiest part of the world (top of
   screen), so keep it nearly solid — a hint of frost but the title always reads. */
:root:not([data-theme="custom"]) .topbar {
  background-color: color-mix(in srgb, var(--bg-surface) 96%, transparent) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
  border-color: var(--decor-glass-border, rgba(255, 255, 255, .12));
}

:root:not([data-theme="custom"]) :where(
  .bill-row,
  .card-item,
  .acct-row,
  .bb-bd-card,
  .cat-chart-row,
  .card-txn-row,
  .import-row,
  .scan-review-row,
  .bucket-row,
  .transaction-row,
  .tx-row,
  .log-row,
  .briefing-need,
  .imports-bill-picker-row
) {
  background-image: none;
  border-color: var(--decor-glass-border, rgba(255, 255, 255, .10));
}

:root:not([data-theme="custom"]) :where(.page-header h2, .page-title) {
  text-shadow: 0 0 18px var(--decor-ui-glow);
}

body[data-decor-page="analytics"] .theme-decor-sprite,
body[data-decor-page="txlog"] .theme-decor-sprite {
  opacity: .24;
}

body[data-decor-page="analytics"] :where(.analytics-card, .analytics-stat) {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 82%, transparent), color-mix(in srgb, var(--bg-elevated) 70%, transparent)),
    var(--decor-card-field, none);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--decor-ui-edge) 72%, transparent),
    0 12px 28px -24px var(--decor-ui-glow);
}

body[data-decor-page="analytics"] :where(.analytics-svg, .cat-chart) {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .08));
}

body[data-decor-page="txlog"] :where(.transaction-row, .tx-row, .log-row) {
  background-image: none;
}

:root[data-theme="mycelium"] body[data-decor-page="dashboard"],
:root[data-theme="mycelium"] body[data-decor-page="savings"],
:root[data-theme="mycelium"] body[data-decor-page="goals"] {
  --decor-page-field:
    repeating-linear-gradient(18deg, rgba(91, 53, 31, .16) 0 2px, transparent 2px 22px),
    radial-gradient(circle at 16% 86%, rgba(120, 168, 90, .14), transparent 26%),
    radial-gradient(circle at 84% 18%, rgba(232, 196, 116, .12), transparent 22%);
}

:root[data-theme="mycelium"] body[data-decor-page="cards"],
:root[data-theme="mycelium"] body[data-decor-page="bills"],
:root[data-theme="mycelium"] body[data-decor-page="settings"] {
  --decor-page-field:
    linear-gradient(90deg, rgba(91, 53, 31, .14), transparent 18% 82%, rgba(91, 53, 31, .14)),
    repeating-radial-gradient(circle at 16% 84%, rgba(242, 230, 208, .14) 0 1px, transparent 1px 8px);
  --decor-page-opacity: .32;
}

:root[data-theme="rose"] body[data-decor-page="cards"],
:root[data-theme="rose"] body[data-decor-page="bills"],
:root[data-theme="rose"] body[data-decor-page="settings"] {
  --decor-page-field:
    radial-gradient(circle at 12% 88%, rgba(253, 230, 138, .13), transparent 22%),
    radial-gradient(circle at 86% 14%, rgba(216, 180, 254, .13), transparent 22%),
    linear-gradient(135deg, rgba(251, 113, 133, .08), transparent 34% 70%, rgba(245, 158, 122, .08));
}

:root[data-theme="midnight"] body[data-decor-page="dashboard"],
:root[data-theme="midnight"] body[data-decor-page="coach"],
:root[data-theme="midnight"] body[data-decor-page="us"] {
  --decor-page-field:
    linear-gradient(120deg, transparent 0 30%, rgba(103, 232, 249, .13) 43%, rgba(240, 171, 252, .12) 58%, transparent 76%),
    radial-gradient(circle at 78% 14%, rgba(232, 196, 104, .10), transparent 22%);
}

:root[data-theme="slate"] body[data-decor-page] {
  --decor-page-field:
    linear-gradient(135deg, rgba(34, 211, 238, .11), transparent 28%, rgba(244, 114, 182, .08) 54%, transparent 74%, rgba(250, 204, 21, .07)),
    radial-gradient(circle at 86% 18%, rgba(196, 181, 253, .08), transparent 20%),
    linear-gradient(#000, #000);
  --decor-page-opacity: .58;
}

:root[data-theme="slate"] body[data-decor-page="analytics"],
:root[data-theme="slate"] body[data-decor-page="txlog"] {
  --decor-page-opacity: .22;
}

@media (prefers-reduced-motion: no-preference) {
  .theme-decor-sprite {
    animation-duration: var(--dur, 16s);
    animation-delay: var(--delay, 0s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  .decor-anim-float { animation-name: decorFloat; }
  .decor-anim-drift { animation-name: decorDrift; }
  .decor-anim-rise { animation-name: decorRise; }
  .decor-anim-twinkle { animation-name: decorTwinkle; }
  .decor-anim-sway { animation-name: decorSway; }
  .decor-anim-glow { animation-name: decorGlow; }
  .decor-anim-crawl { animation-name: decorCrawl; animation-timing-function: cubic-bezier(.45, 0, .35, 1); }

  .page:not(.active) .theme-decor-sprite {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-decor-sprite {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes decorFloat {
  0% { transform: translate3d(-50%, -50%, 0) rotate(var(--r, 0deg)) scaleX(var(--flip, 1)); }
  100% { transform: translate3d(calc(-50% + 18px), calc(-50% - 30px), 0) rotate(calc(var(--r, 0deg) + 4deg)) scaleX(var(--flip, 1)); }
}

@keyframes decorDrift {
  0% { transform: translate3d(-50%, -50%, 0) rotate(var(--r, 0deg)) scaleX(var(--flip, 1)); }
  100% { transform: translate3d(calc(-50% + 52px), calc(-50% - 16px), 0) rotate(calc(var(--r, 0deg) - 3deg)) scaleX(var(--flip, 1)); }
}

@keyframes decorRise {
  0% { transform: translate3d(-50%, 20%, 0) rotate(var(--r, 0deg)) scaleX(var(--flip, 1)); opacity: .08; }
  24% { opacity: var(--o, .65); }
  100% { transform: translate3d(calc(-50% + 14px), -150%, 0) rotate(calc(var(--r, 0deg) + 6deg)) scaleX(var(--flip, 1)); opacity: .04; }
}

@keyframes decorTwinkle {
  0%, 100% { opacity: .28; transform: translate3d(-50%, -50%, 0) scale(.9) rotate(var(--r, 0deg)); }
  50% { opacity: var(--o, .9); transform: translate3d(-50%, -50%, 0) scale(1.08) rotate(var(--r, 0deg)); }
}

@keyframes decorSway {
  0% { transform: translate3d(-50%, -50%, 0) rotate(calc(var(--r, 0deg) - 3deg)) scaleX(var(--flip, 1)); }
  100% { transform: translate3d(calc(-50% + 16px), -50%, 0) rotate(calc(var(--r, 0deg) + 6deg)) scaleX(var(--flip, 1)); }
}

@keyframes decorGlow {
  0%, 100% { opacity: .42; filter: drop-shadow(0 0 8px var(--decor-glow)); }
  50% { opacity: var(--o, .86); filter: drop-shadow(0 0 18px var(--decor-glow)); }
}

@keyframes decorCrawl {
  0% { transform: translate3d(calc(-50% - 18px), calc(-50% + 2px), 0) rotate(calc(var(--r, 0deg) - 2deg)) scaleX(var(--flip, 1)); }
  38% { transform: translate3d(calc(-50% + 8px), calc(-50% - 3px), 0) rotate(calc(var(--r, 0deg) + 2deg)) scaleX(var(--flip, 1)); }
  100% { transform: translate3d(calc(-50% + 42px), calc(-50% + 1px), 0) rotate(calc(var(--r, 0deg) - 1deg)) scaleX(var(--flip, 1)); }
}

/* ── Interactive creature (one per active screen; logic in theme-decor.js) ─────
   Lives on its OWN fixed layer ABOVE the cards (z-index 45 — above page content
   at 1, below the nav/FAB at 50-60 and modals at 200+), so it's clearly visible
   and plays over a card's corner instead of being buried behind the glass. Still
   pointer-events:none, so it can never steal a tap. The OUTER element's
   transform/opacity are driven from JS (the travel legs); the INNER element
   carries a tiny idle bob so the creature breathes while it lingers, plus a
   twinkle variant for the calm "glint". */
#theme-creature-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 45;
  overflow: hidden;
}

.theme-decor-creature {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cs, 64px);
  height: var(--cs, 64px);
  opacity: 0;
  transform: translate3d(-300px, -300px, 0);
  pointer-events: none !important;
  will-change: transform, opacity;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .42));
}

.theme-decor-creature.cr-glow {
  filter: drop-shadow(0 0 13px var(--decor-glow)) drop-shadow(0 8px 15px rgba(0, 0, 0, .30));
}

.theme-decor-creature .cr-inner {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--face, 1));
}

.theme-decor-creature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (prefers-reduced-motion: no-preference) {
  .theme-decor-creature .cr-inner { animation: decorCreatureIdle 2.9s ease-in-out infinite; }
  .theme-decor-creature.cr-twinkle .cr-inner { animation: decorCreatureTwinkle 1.8s ease-in-out infinite; }
}

@keyframes decorCreatureIdle {
  0%, 100% { transform: scaleX(var(--face, 1)) translateY(0); }
  50% { transform: scaleX(var(--face, 1)) translateY(-3px); }
}

@keyframes decorCreatureTwinkle {
  0%, 100% { transform: scaleX(var(--face, 1)) scale(.9); opacity: .5; }
  50% { transform: scaleX(var(--face, 1)) scale(1.06); opacity: 1; }
}

/* No creatures at all when motion is reduced (belt to the JS suspenders). */
@media (prefers-reduced-motion: reduce) {
  .theme-decor-creature { display: none !important; }
}

/* ── Ambient atmosphere particles (the "alive, not empty" layer) ──────────────
   Tiny soft radial-gradient dots drifting behind the cards. No cut-out art, no
   blur filters — the gradient is its own softness. Per-theme type/colour/size
   set inline by theme-decor.js (renderParticles). */
.theme-decor-particle {
  position: absolute;
  left: var(--px, 50%);
  top: var(--py, 50%);
  width: var(--ps, 4px);
  height: var(--ps, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--pc, rgba(255, 255, 255, .5)) 0%, transparent 70%);
  opacity: var(--po, .5);
  will-change: transform, opacity;
}

/* glow particles get a slightly more solid, brighter core */
.theme-decor-particle.pt-glow {
  background: radial-gradient(circle, var(--pc, rgba(255, 255, 255, .6)) 0%, var(--pc, rgba(255, 255, 255, .6)) 22%, transparent 72%);
}

@media (prefers-reduced-motion: no-preference) {
  .pt-rise    { animation: decorPRise    var(--pdur, 12s) linear      var(--pdelay, 0s) infinite; }
  .pt-fall    { animation: decorPFall    var(--pdur, 12s) linear      var(--pdelay, 0s) infinite; }
  .pt-drift   { animation: decorPDrift   var(--pdur, 14s) ease-in-out var(--pdelay, 0s) infinite alternate; }
  .pt-twinkle { animation: decorPTwinkle var(--pdur, 5s)  ease-in-out var(--pdelay, 0s) infinite; }
  .pt-firefly { animation: decorPFirefly var(--pdur, 10s) ease-in-out var(--pdelay, 0s) infinite alternate; }
}

@keyframes decorPRise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: var(--po, .5); }
  88%  { opacity: var(--po, .5); }
  100% { transform: translate3d(var(--pdrift, 20px), -108vh, 0); opacity: 0; }
}
@keyframes decorPFall {
  0%   { transform: translate3d(0, -12vh, 0); opacity: 0; }
  12%  { opacity: var(--po, .6); }
  88%  { opacity: var(--po, .6); }
  100% { transform: translate3d(var(--pdrift, 20px), 110vh, 0); opacity: 0; }
}
@keyframes decorPDrift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(var(--pdrift, 30px), -14px, 0); }
}
@keyframes decorPTwinkle {
  0%, 100% { transform: scale(.6); opacity: calc(var(--po, .6) * .3); }
  50%      { transform: scale(1.15); opacity: var(--po, .6); }
}
@keyframes decorPFirefly {
  0%   { transform: translate3d(0, 0, 0); opacity: .2; }
  50%  { transform: translate3d(var(--pdrift, 20px), -18px, 0); opacity: var(--po, .8); }
  100% { transform: translate3d(calc(var(--pdrift, 20px) * -1), 10px, 0); opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-decor-particle { animation: none !important; opacity: calc(var(--po, .5) * .55); }
}

/* ── Ambient background creatures (small, drifting, behind the cards) ──────────
   In the decor stage (z-index 0, below cards). Depth-sized + faint; a slow
   alternating drift so the scene feels alive without crowding. */
.theme-decor-ambient {
  position: absolute;
  left: var(--ax, 50%);
  top: var(--ay, 40%);
  width: var(--as, 40px);
  height: var(--as, 40px);
  opacity: var(--ao, .5);
  transform: scaleX(var(--aflip, 1));
  will-change: transform, opacity;
}
.theme-decor-ambient img { display: block; width: 100%; height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: no-preference) {
  .theme-decor-ambient { animation: decorAmbientDrift var(--adur, 20s) ease-in-out var(--adelay, 0s) infinite alternate; }
}
@keyframes decorAmbientDrift {
  0%   { transform: translate3d(0, 0, 0) scaleX(var(--aflip, 1)); }
  100% { transform: translate3d(var(--adx, 40px), -12px, 0) scaleX(var(--aflip, 1)); }
}

/* ── Foreground ledge (one per theme, bottom-anchored, BEHIND cards) ───────────
   A near-foreground depth piece at the bottom edge of the scene. In the stage
   (z-index 0) so it never covers content; the cards float above it. */
.theme-decor-foreground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(150px, 26vh, 300px);
  background: var(--fg) bottom center / 100% auto no-repeat;
  opacity: .52;
  pointer-events: none;
}
@media (min-width: 769px) {
  .theme-decor-foreground { background-size: cover; opacity: .42; }
}

@media (max-width: 768px) {
  /* Phones can't composite 28 big image layers + a screenful of backdrop-blur
     and still animate — so on mobile: lighter glass blur, no per-sprite
     drop-shadows, fewer sprites. Keeps the float smooth instead of frozen. */
  :root { --decor-glass-blur: 7px; }

  .theme-decor-layer {
    inset: 0;
  }

  .theme-decor-sprite {
    width: min(var(--s), 184px);
    height: min(var(--s), 184px);
    filter: none;
  }
  .sprite-edge, .sprite-soft, .sprite-glow { filter: none; }

  /* Phones hold FEWER sprites than the generated set — 24 on a 412px screen
     read as a stacked soup even with spacing. 16/12/8 well-placed pieces read
     composed; the particles + ambient drift + creature carry the life. */
  .theme-decor-restrained .theme-decor-sprites > .theme-decor-sprite:nth-of-type(n + 9),
  .theme-decor-framed .theme-decor-sprites > .theme-decor-sprite:nth-of-type(n + 13),
  .theme-decor-full .theme-decor-sprites > .theme-decor-sprite:nth-of-type(n + 17) {
    display: none;
  }
}

/* ── Landscape (desktop + phone-landscape): make the decor read cleanly ───────
   The per-scene background sizing is `NNN% auto`, tuned for TALL phone screens;
   on a wide/short viewport that over-scales the portrait art into a blurry,
   randomly-cropped sliver (every page except the dashboard). Force cover+center
   in any landscape orientation so each theme's background fills properly.
   Phone-PORTRAIT is untouched (keeps the per-scene framing). Additive, no new
   assets. */
@media (orientation: landscape) {
  .theme-decor-layer,
  .theme-decor-field {
    --decor-image-size: cover !important;
    --decor-image-position: center !important;
  }
}

/* ── Desktop / tablet (wider than the phone breakpoint): fewer, calmer sprites ─
   A wide screen has far more whitespace than a phone, so the full ~40-sprite
   scatter reads as "random floating shapes." Cap the count and ease the opacity
   so the floating layer becomes tasteful ambient texture, matching the phone's
   restraint. (Opacity/visibility only — the float animates transform, so motion
   is untouched.) */
@media (min-width: 769px) {
  /* Desktop has FAR more whitespace than a phone — it should hold MORE scenery,
     not less. Show the full generated set (the old caps here, plus the
     :nth-of-type bug, made desktop read sparse) and keep the art legible. */
  .theme-decor-restrained .theme-decor-sprites > .theme-decor-sprite:nth-of-type(n + 15),
  .theme-decor-framed .theme-decor-sprites > .theme-decor-sprite:nth-of-type(n + 23),
  .theme-decor-full .theme-decor-sprites > .theme-decor-sprite:nth-of-type(n + 31) {
    display: none;
  }
  .theme-decor-full .theme-decor-sprite { opacity: var(--o, .82); }
  .theme-decor-framed .theme-decor-sprite { opacity: var(--o, .72); }
  .theme-decor-restrained .theme-decor-sprite { opacity: var(--o, .56); }
}

/* Treasury, library and cyber's square art is composed like a frame — the
   riches/shelves/glowing terrariums live on the EDGES with an empty dark
   middle. The phone's cover-center crop showed exactly that void. Anchor those
   portrait crops to the rich left side (vault+cash / banker's-lamp desk /
   dome-flower planters); landscape uses its own wide art and is untouched. */
@media (orientation: portrait) {
  .decor-theme-treasury .theme-decor-field,
  .decor-theme-library .theme-decor-field,
  .decor-theme-cyber .theme-decor-field { background-position: left center, center; }
}

/* Landscape-only art swaps.
   The base .decor-theme-* declarations above remain the phone-portrait source
   of truth. These later overrides apply only when the viewport is landscape. */
@media (orientation: landscape) {
  .decor-theme-ocean    { --decor-image: url("theme-decor/assets/backgrounds/ocean-landscape.webp"); }
  .decor-theme-cosmic   { --decor-image: url("theme-decor/assets/backgrounds/cosmic-landscape.webp"); }
  .decor-theme-forest   { --decor-image: url("theme-decor/assets/backgrounds/forest-landscape.webp"); }
  .decor-theme-neon     { --decor-image: url("theme-decor/assets/backgrounds/neon-landscape.webp"); }
  .decor-theme-ember    { --decor-image: url("theme-decor/assets/backgrounds/ember-landscape.webp"); }
  .decor-theme-midnight { --decor-image: url("theme-decor/assets/backgrounds/midnight-landscape.webp"); }
  .decor-theme-mycelium { --decor-image: url("theme-decor/assets/backgrounds/mycelium-landscape.webp"); }
  .decor-theme-rose     { --decor-image: url("theme-decor/assets/backgrounds/rose-landscape.webp"); }
  .decor-theme-slate    { --decor-image: url("theme-decor/assets/backgrounds/slate-landscape.webp"); }
  .decor-theme-light    { --decor-image: url("theme-decor/assets/backgrounds/light-landscape.webp"); }
  .decor-theme-desert   { --decor-image: url("theme-decor/assets/backgrounds/desert-landscape.webp"); }
  .decor-theme-library  { --decor-image: url("theme-decor/assets/backgrounds/library-landscape.webp"); }
  .decor-theme-arctic   { --decor-image: url("theme-decor/assets/backgrounds/arctic-landscape.webp"); }
  .decor-theme-cyber    { --decor-image: url("theme-decor/assets/backgrounds/cyber-landscape.webp"); }
  .decor-theme-treasury { --decor-image: url("theme-decor/assets/backgrounds/treasury-landscape.webp"); }
}

/* ══ THEME LIFE (build 20260701a) — per-theme creature motion signatures ══
   The generic idle bob made every theme's creature feel identical; each theme
   now performs in its own character. Flavor rides on the IMG — .cr-inner's
   transform stays reserved for the --face flip. */
@media (prefers-reduced-motion: no-preference) {
  .theme-decor-creature .cr-inner[class*="cr-m-"] { animation: none; }
  .cr-m-swim img    { animation: crSwim 2.4s ease-in-out infinite; }
  .cr-m-crawl img   { animation: crCrawl 0.9s cubic-bezier(.3,0,.7,1) infinite; }
  .cr-m-trot img    { animation: crTrot 0.55s ease-in-out infinite; }
  .cr-m-hover img   { animation: crHover 3.2s ease-in-out infinite; }
  .cr-m-glitch img  { animation: crGlitch 2.6s steps(1, end) infinite; }
  .cr-m-flutter img { animation: crFlutter 0.34s ease-in-out infinite alternate; }
  .cr-m-flit img    { animation: crFlit 0.5s ease-in-out infinite alternate; }
  .cr-m-waddle img  { animation: crWaddle 0.85s ease-in-out infinite; }
  .cr-m-buzz img    { animation: crBuzz 0.16s linear infinite alternate; }
  .cr-m-shimmer img { animation: crShimmer 2.8s ease-in-out infinite; }
  /* .cr-m-glide / .cr-m-roll: none by design — slow smoothness / JS-driven roll IS the character */
}
@keyframes crSwim    { 0%, 100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-6px) rotate(2.5deg); } }
@keyframes crCrawl   { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2.5px) translateY(-1px); } }
@keyframes crTrot    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5px); } }
@keyframes crHover   { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.03); } }
@keyframes crGlitch  { 0%, 88%, 100% { transform: translateX(0); opacity: 1; } 90% { transform: translateX(-3px); opacity: .55; } 92% { transform: translateX(2px); opacity: 1; } 96% { transform: translateX(0); opacity: .8; } }
@keyframes crFlutter { from { transform: translateY(-1.5px) rotate(-5deg); } to { transform: translateY(1.5px) rotate(5deg); } }
@keyframes crFlit    { from { transform: translateY(-2px) rotate(-3deg); } to { transform: translateY(2px) rotate(3deg); } }
@keyframes crWaddle  { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes crBuzz    { from { transform: translate(0.6px, -0.8px); } to { transform: translate(-0.6px, 0.8px); } }
@keyframes crShimmer { 0%, 100% { opacity: .55; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.35); } }

/* ── Touch-life: bursts from the scenery + startled ambient creatures ─────── */
.theme-decor-burst {
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: var(--bs, 4px);
  height: var(--bs, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--bc, rgba(255,255,255,.8)) 0%, transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .tb-rise    { animation: tbRise var(--bdur, 1.1s) ease-out forwards; }
  .tb-fall    { animation: tbFall var(--bdur, 1.1s) ease-in forwards; }
  .tb-scatter { animation: tbScatter var(--bdur, 1s) ease-out forwards; }
  .tb-twinkle { animation: tbTwinkle var(--bdur, 1s) ease-in-out forwards; }
}
@media (prefers-reduced-motion: reduce) { .theme-decor-burst { display: none; } }
@keyframes tbRise    { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: .95; } 100% { transform: translate3d(var(--bdx, 20px), -84px, 0); opacity: 0; } }
@keyframes tbFall    { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: .95; } 100% { transform: translate3d(var(--bdx, 14px), 64px, 0); opacity: 0; } }
@keyframes tbScatter { 0% { transform: translate3d(0, 0, 0) scale(.6); opacity: .95; } 100% { transform: translate3d(var(--bdx, 30px), -16px, 0) scale(1.25); opacity: 0; } }
@keyframes tbTwinkle { 0% { transform: scale(.4); opacity: 0; } 35% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(.5) translate3d(0, -10px, 0); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .theme-decor-ambient.amb-startle { animation: ambStartle .72s cubic-bezier(.2, .7, .3, 1); }
}
@keyframes ambStartle {
  30%  { transform: translate3d(var(--sdx, 50px), -20px, 0) scaleX(var(--aflip, 1)); opacity: .12; }
  100% { transform: translate3d(0, 0, 0) scaleX(var(--aflip, 1)); opacity: var(--ao, .5); }
}

/* ── Dream upgrades (build 20260702a) ──────────────────────────────────────
   UFO tractor-beam: while the cosmic creature lingers at a card corner, a
   soft light cone fades in beneath it, spotlighting the card (Alex's
   "astronaut shining a light on a card", performed by the theme's UFO). */
.theme-decor-creature.cr-beaming::after {
  content: "";
  position: absolute;
  top: 82%;
  left: 50%;
  width: 150%;
  height: 190%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(150, 225, 255, .38), rgba(150, 225, 255, 0) 88%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .theme-decor-creature.cr-beaming::after { animation: crBeam 2.4s ease-in-out infinite; }
}
@keyframes crBeam { 0%, 100% { opacity: .15; } 45% { opacity: .95; } }

/* Butterfly landing: flutter stops, wings settle into a slow open–close. */
.cr-inner.cr-landed img { animation: crLanded 2.6s ease-in-out infinite !important; }
@keyframes crLanded { 0%, 100% { transform: rotate(-1.5deg) scaleY(1); } 50% { transform: rotate(1.5deg) scaleY(.97); } }
@media (prefers-reduced-motion: reduce) {
  .theme-decor-creature.cr-beaming::after { display: none; }
  .cr-inner.cr-landed img { animation: none !important; }
}