html {
    --stage-bg: linear-gradient(135deg, #eaedff 0%, #f0ebff 35%, #fce8f0 70%, #fdf0e0 100%);
    --ink: #1b2a6b;
    --ink-hover: #26358a;
    --ink-text: #14204f;
    --ink-muted: rgba(27, 42, 107, 0.45);
    --ink-contrast: #fff;
    --ink-shadow: rgba(27, 42, 107, 0.3);
    --ink-shadow-strong: rgba(27, 42, 107, 0.36);
    --ink-shadow-soft: rgba(50, 35, 110, 0.08);
    --card-line: rgba(27, 42, 107, 0.22);
    --card-line-soft: rgba(27, 42, 107, 0.16);
    --field-bg: rgba(255, 255, 255, 0.78);
    --field-bg-focus: rgba(255, 255, 255, 0.96);
    --chip-bg: rgba(255, 255, 255, 0.72);
    --tree-locked: #b0a0c4;
    --logo-shadow: rgba(80, 60, 180, 0.18);
    --logo-shadow-strong: rgba(80, 60, 180, 0.28);
    --logo-glow: none;
    --logo-glow-sm: none;
    --grain-opacity: 0.025;
    --blob-opacity: 1;
    --canvas-bg: transparent;
    --plate-bg: transparent;
    --plate-opacity: 0;
}

html[data-theme="dark"] {
    --stage-bg: transparent;
    --ink: #8fa4ff;
    --ink-hover: #a6b8ff;
    --ink-text: #e8ecff;
    --ink-muted: rgba(232, 236, 255, 0.45);
    --ink-contrast: #0b0f24;
    --ink-shadow: rgba(90, 110, 255, 0.35);
    --ink-shadow-strong: rgba(90, 110, 255, 0.45);
    --ink-shadow-soft: rgba(0, 0, 0, 0.35);
    --card-line: rgba(223, 228, 255, 0.18);
    --card-line-soft: rgba(223, 228, 255, 0.12);
    --field-bg: rgba(255, 255, 255, 0.09);
    --field-bg-focus: rgba(255, 255, 255, 0.15);
    --chip-bg: rgba(18, 22, 40, 0.6);
    --tree-locked: #3a4066;
    --logo-shadow: rgba(90, 110, 255, 0.25);
    --logo-shadow-strong: rgba(90, 110, 255, 0.4);
    --logo-glow: drop-shadow(0 0 36px rgba(130, 150, 255, 0.38));
    --logo-glow-sm: drop-shadow(0 0 18px rgba(130, 150, 255, 0.22));
    --grain-opacity: 0.05;
    --blob-opacity: 0;
    --canvas-bg: #070a18;
    --plate-bg: radial-gradient(ellipse at center, rgba(232, 236, 255, 0.8) 0%, rgba(232, 236, 255, 0.42) 48%, rgba(232, 236, 255, 0) 74%);
    --plate-opacity: 0.9;
}

#auroraCanvas {
    position: fixed; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    background: var(--canvas-bg);
    pointer-events: none;
    transition: background 0.5s ease;
}

#fxGrain {
    position: fixed; inset: 0; z-index: 4;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
    transition: opacity 0.5s ease;
}

.mesh-blob {
    position: absolute; z-index: 0; pointer-events: none;
    border-radius: 50%; filter: blur(90px);
    opacity: var(--blob-opacity);
    transition: opacity 0.6s ease;
    animation: blobDrift 56s ease-in-out infinite alternate;
}
.blob-1 {
    width: 620px; height: 620px; top: -160px; left: -140px;
    background: radial-gradient(circle, rgba(150, 130, 255, 0.16), transparent 70%);
}
.blob-2 {
    width: 480px; height: 480px; bottom: -120px; right: -110px;
    background: radial-gradient(circle, rgba(255, 150, 180, 0.13), transparent 70%);
    animation-duration: 64s; animation-delay: -12s;
}
.blob-3 {
    width: 380px; height: 380px; top: 30%; right: 6%;
    background: radial-gradient(circle, rgba(255, 200, 140, 0.12), transparent 70%);
    animation-duration: 48s; animation-delay: -26s;
}
.blob-4 {
    width: 340px; height: 340px; bottom: 8%; left: 4%;
    background: radial-gradient(circle, rgba(140, 190, 255, 0.13), transparent 70%);
    animation-duration: 70s; animation-delay: -8s;
}

@keyframes blobDrift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(38px, -26px) scale(1.06); }
    100% { transform: translate(-24px, 22px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
    .mesh-blob { animation: none; }
}