/* Farbdesigns. Jedes Design setzt nur Grundton (--h), Akzentfarben und ggf. Fläche/Lichtschein.
   Gratis: mint (Standard), ocean, violet, forest, sunset. Premium (Shop): magma, stars, aurora, neon – mit animiertem Hintergrund (js/wallpaper.js). */
:root[data-theme="ocean"] { --h: 212; --accent: #55b4ff; --accent2: #8f8cff; --accent-ink: #04182e; --wave: #8fd0ff; --glow: hsl(212 75% 22%); }
:root[data-theme="violet"] { --h: 262; --accent: #b095ff; --accent2: #f06ad8; --accent-ink: #1c1040; --wave: #cdb6ff; --glow: hsl(268 60% 24%); --hero1: hsl(268 55% 20%); }
:root[data-theme="forest"] { --h: 158; --accent: #4ade80; --accent2: #bef264; --accent-ink: #052e16; --wave: #86efac; --glow: hsl(150 55% 18%); --hero1: hsl(152 50% 17%); }
:root[data-theme="sunset"] { --h: 14; --accent: #ff9f5a; --accent2: #ff5d8f; --accent-ink: #3a1604; --wave: #ffc58a; --glow: hsl(18 60% 20%); --hero1: hsl(14 55% 19%); --bg: hsl(14 38% 7%); --bg2: hsl(14 36% 9%); --panel: hsl(14 34% 11%); --panel2: hsl(14 32% 15%); --panel3: hsl(14 30% 19%); --panel-end: hsl(14 34% 10%); --line: hsl(14 28% 20%); --line2: hsl(14 26% 27%); --line3: hsl(14 26% 36%); --input: hsl(14 38% 8%); --wavebg: hsl(14 40% 7%); --hero2: hsl(14 40% 8%); --muted: #c3a89c; --faint: #8e7468; }

/* ---- Premium mit Wallpaper: Flächen halbtransparent, damit der Hintergrund durchscheint ---- */
:root[data-wall] body { background: var(--bg); }
:root[data-wall] .card, :root[data-wall] .modal, :root[data-wall] .menu { backdrop-filter: blur(7px) saturate(1.1); }
:root[data-wall] .card { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 62%, transparent), color-mix(in srgb, var(--panel-end) 54%, transparent)); }
:root[data-wall] .sidebar { background: color-mix(in srgb, var(--bg) 45%, transparent); backdrop-filter: blur(6px); }
:root[data-wall] .wavewrap, :root[data-wall] .drop { background: color-mix(in srgb, var(--wavebg) 70%, transparent); }
:root[data-wall] .authgrid { background: color-mix(in srgb, var(--panel) 80%, transparent); backdrop-filter: blur(8px); }
#wall { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
#app { position: relative; z-index: 1; }

:root[data-theme="magma"] { --h: 6; --accent: #ff7a33; --accent2: #ffc233; --accent-ink: #3b1200; --wave: #ffa468; --glow: hsl(8 80% 20%);
  --bg: hsl(6 45% 5%); --bg2: hsl(6 42% 7%); --panel: hsl(6 38% 9%); --panel2: hsl(6 34% 13%); --panel3: hsl(6 30% 18%); --panel-end: hsl(6 38% 8%); --line: hsl(8 36% 19%); --line2: hsl(10 36% 27%); --line3: hsl(12 38% 36%); --input: hsl(6 42% 6%); --wavebg: hsl(6 46% 5%); --hero1: hsl(8 70% 17%); --hero2: hsl(6 45% 7%); --muted: #d1a99a; --faint: #977365; }
:root[data-theme="stars"] { --h: 246; --accent: #9db8ff; --accent2: #d3a9ff; --accent-ink: #0c1236; --wave: #b6c8ff; --glow: hsl(250 60% 20%);
  --bg: hsl(248 62% 5%); --bg2: hsl(248 56% 7%); --panel: hsl(248 48% 10%); --panel2: hsl(248 42% 14%); --panel3: hsl(248 38% 19%); --panel-end: hsl(248 48% 9%); --line: hsl(248 36% 21%); --line2: hsl(248 34% 29%); --line3: hsl(248 34% 40%); --input: hsl(248 56% 7%); --wavebg: hsl(248 60% 5%); --hero1: hsl(252 55% 18%); --hero2: hsl(248 60% 7%); }
:root[data-theme="aurora"] { --h: 190; --accent: #5cf2c0; --accent2: #b18cff; --accent-ink: #022a22; --wave: #7ff0d6; --glow: hsl(170 55% 16%);
  --bg: hsl(200 62% 5%); --bg2: hsl(200 56% 7%); --panel: hsl(200 48% 10%); --panel2: hsl(200 42% 14%); --panel3: hsl(200 38% 19%); --panel-end: hsl(200 48% 9%); --line: hsl(198 36% 20%); --line2: hsl(198 34% 28%); --line3: hsl(198 34% 38%); --input: hsl(200 56% 7%); --wavebg: hsl(200 60% 5%); --hero1: hsl(180 50% 15%); --hero2: hsl(200 60% 7%); }
:root[data-theme="neon"] { --h: 290; --accent: #ff3df0; --accent2: #22e4ff; --accent-ink: #330030; --wave: #3de8ff; --glow: hsl(300 80% 20%);
  --bg: hsl(278 70% 5%); --bg2: hsl(278 62% 7%); --panel: hsl(278 52% 10%); --panel2: hsl(278 46% 14%); --panel3: hsl(278 42% 19%); --panel-end: hsl(278 52% 9%); --line: hsl(285 44% 22%); --line2: hsl(285 42% 30%); --line3: hsl(285 44% 42%); --input: hsl(278 62% 7%); --wavebg: hsl(278 66% 5%); --hero1: hsl(290 60% 18%); --hero2: hsl(278 66% 7%); }