/* Drei futuristische Erscheinungsbilder (Entwuerfe aus Figma, Runde "Plattform").
 *
 *   aurora  dunkles Nachtblau, Glas-Karten, Polarlicht-Leuchten in Cyan/Violett
 *   hud     Schwarz mit Raster, Monospace, Neon-Linien wie ein Cockpit-Display
 *   lumen   hell, schwebende weisse Karten, Pastell-Leuchten im Hintergrund
 *
 * Wie soft.css eine Haut ueber app.css: nur Farben, Formen und Licht aendern sich.
 * Aurora und HUD sind immer dunkel, Lumen immer hell - unabhaengig vom Systemmodus.
 * Der doppelte Attributselektor hebt die Spezifitaet ueber die Dunkel-Regeln von app.css.
 */

/* ================================================================ Aurora */
:root[data-skin="aurora"][data-skin] {
  color-scheme: dark;
  --paper: #070b1a; --sheet: rgba(255, 255, 255, .055); --sheet-2: rgba(255, 255, 255, .08);
  --ground: rgba(255, 255, 255, .07); --ground-2: rgba(255, 255, 255, .11);
  --ink: #eef2ff; --ink-2: #b4bde0; --ink-3: #8f9bc4; --ink-inv: #070b1a;
  --rule: rgba(255, 255, 255, .09); --rule-2: rgba(255, 255, 255, .17);
  --signal: #ff7ac6; --signal-2: #ff4fae; --signal-bg: rgba(255, 122, 198, .14);
  --accent-2: #8f7bff;
  --r-sm: 10px; --r: 18px; --r-lg: 22px;
  --lift: 0 20px 50px rgba(0, 0, 0, .45); --lift-2: 0 30px 90px rgba(0, 0, 0, .6);
  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --fc-proj: #5ee7ff; --fc-opp: #ffb35c; --fc-ovh: #a77bff;
  --sky-1: #5ee7ff; --sky-2: #a77bff;
}
[data-skin="aurora"] body {
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(167, 123, 255, .32), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, rgba(94, 231, 255, .20), transparent 60%),
    radial-gradient(600px 400px at 55% -15%, rgba(255, 122, 198, .14), transparent 60%),
    linear-gradient(160deg, #070b1a, #151a3a) fixed;
  background-attachment: fixed;
}
[data-skin="aurora"] .topbar { background: rgba(7, 11, 26, .55); backdrop-filter: blur(18px); border-bottom-color: var(--rule); }
[data-skin="aurora"] .card, [data-skin="aurora"] .sheet {
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-color: var(--rule-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--lift);
}
[data-skin="aurora"] .sheet { background: rgba(18, 22, 48, .88); }
[data-skin="aurora"] .btn.primary {
  background: linear-gradient(90deg, var(--sky-1), var(--sky-2)); border-color: transparent; color: #070b1a; font-weight: 600;
}
[data-skin="aurora"] .btn.primary:hover { filter: brightness(1.08); box-shadow: 0 6px 24px rgba(94, 231, 255, .35); }
[data-skin="aurora"] .btn { background: rgba(255, 255, 255, .06); }
[data-skin="aurora"] .tab-bar { background: linear-gradient(90deg, var(--sky-1), var(--sky-2)); height: 3px; box-shadow: 0 0 12px var(--sky-1); }
[data-skin="aurora"] input, [data-skin="aurora"] select, [data-skin="aurora"] textarea { background: rgba(255, 255, 255, .06); color: var(--ink); border-color: var(--rule-2); }
[data-skin="aurora"] select option { background: #151a3a; }
[data-skin="aurora"] .stat .v { text-shadow: 0 0 18px rgba(94, 231, 255, .25); }

/* =================================================================== HUD */
:root[data-skin="hud"][data-skin] {
  color-scheme: dark;
  --paper: #03060a; --sheet: #0a1218; --sheet-2: #0d171e;
  --ground: #0f1c22; --ground-2: #13252c;
  --ink: #d8fff4; --ink-2: #8fc9bb; --ink-3: #5d8f86; --ink-inv: #03060a;
  --rule: rgba(25, 245, 193, .14); --rule-2: rgba(25, 245, 193, .32);
  --signal: #ff3d6e; --signal-2: #ff1a52; --signal-bg: rgba(255, 61, 110, .14);
  --accent-2: #12c79c;
  --r-sm: 2px; --r: 2px; --r-lg: 3px;
  --lift: 0 0 0 1px rgba(25, 245, 193, .2), 0 0 30px rgba(25, 245, 193, .08);
  --lift-2: 0 0 0 1px rgba(25, 245, 193, .4), 0 0 60px rgba(25, 245, 193, .15);
  --sans: "Cascadia Mono", "JetBrains Mono", "Roboto Mono", Consolas, ui-monospace, monospace;
  --fc-proj: #19f5c1; --fc-opp: #ffb020; --fc-ovh: #6aa9ff;
  --neon: #19f5c1;
}
[data-skin="hud"] body {
  background-color: #03060a;
  background-image:
    linear-gradient(rgba(25, 245, 193, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 245, 193, .05) 1px, transparent 1px);
  background-size: 40px 40px; background-attachment: fixed;
}
[data-skin="hud"] .topbar { background: rgba(3, 6, 10, .92); border-bottom-color: var(--rule-2); }
[data-skin="hud"] .tabs button, [data-skin="hud"] .card-head h2, [data-skin="hud"] .stat .k,
[data-skin="hud"] .btn, [data-skin="hud"] th { text-transform: uppercase; letter-spacing: .08em; }
[data-skin="hud"] .card-head h2::before { content: "// "; color: var(--neon); }
[data-skin="hud"] .card { border-color: var(--rule-2); position: relative; overflow: visible; }
[data-skin="hud"] .card::before, [data-skin="hud"] .card::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; border: 2px solid var(--neon);
}
[data-skin="hud"] .card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
[data-skin="hud"] .card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
[data-skin="hud"] .card > .card-body.flush { overflow: hidden; }
[data-skin="hud"] .btn { background: transparent; border-color: var(--rule-2); color: var(--ink); }
[data-skin="hud"] .btn:hover { background: rgba(25, 245, 193, .08); border-color: var(--neon); }
[data-skin="hud"] .btn.primary { background: rgba(25, 245, 193, .14); border-color: var(--neon); color: var(--neon); font-weight: 700; }
[data-skin="hud"] .btn.primary::before { content: "[ "; } [data-skin="hud"] .btn.primary::after { content: " ]"; }
[data-skin="hud"] .btn.primary:hover { background: rgba(25, 245, 193, .22); box-shadow: 0 0 18px rgba(25, 245, 193, .35); }
[data-skin="hud"] .tab-bar { background: var(--neon); box-shadow: 0 0 10px var(--neon); }
[data-skin="hud"] .tabs button[aria-current="page"] { color: var(--neon); }
[data-skin="hud"] input, [data-skin="hud"] select, [data-skin="hud"] textarea { background: #050b10; color: var(--ink); border-color: var(--rule-2); }
[data-skin="hud"] input:focus, [data-skin="hud"] select:focus { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon), 0 0 14px rgba(25, 245, 193, .3); }
[data-skin="hud"] .stat .v { color: var(--neon); text-shadow: 0 0 14px rgba(25, 245, 193, .35); }
[data-skin="hud"] .sheet { background: #071016; }

/* ================================================================= Lumen */
:root[data-skin="lumen"][data-skin] {
  color-scheme: light;
  --paper: #eef1f8; --sheet: rgba(255, 255, 255, .86); --sheet-2: #f6f7fc;
  --ground: #eef0f8; --ground-2: #e4e8f5;
  --ink: #141a2e; --ink-2: #4b5470; --ink-3: #6c7590; --ink-inv: #ffffff;
  --rule: rgba(20, 26, 46, .07); --rule-2: rgba(20, 26, 46, .14);
  --signal: #e5487a; --signal-2: #c9305f; --signal-bg: #fde8ef;
  --accent-2: #3d57f0;
  --r-sm: 12px; --r: 24px; --r-lg: 28px;
  --lift: 0 18px 40px -10px rgba(50, 64, 128, .16); --lift-2: 0 30px 80px -10px rgba(50, 64, 128, .28);
  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --fc-proj: #4f6bff; --fc-opp: #ff8a5c; --fc-ovh: #9d6bff;
  --holo: linear-gradient(90deg, #4f6bff, #9d6bff 55%, #ff8a5c);
}
[data-skin="lumen"] body {
  background:
    radial-gradient(700px 500px at 90% -10%, rgba(201, 212, 255, .9), transparent 60%),
    radial-gradient(600px 500px at -10% 100%, rgba(255, 217, 236, .9), transparent 60%),
    radial-gradient(500px 400px at 50% 110%, rgba(215, 255, 241, .8), transparent 60%),
    #eef1f8;
  background-attachment: fixed;
}
[data-skin="lumen"] .topbar { background: rgba(255, 255, 255, .6); backdrop-filter: blur(16px); border-bottom: 0; box-shadow: 0 10px 30px -20px rgba(50, 64, 128, .4); }
[data-skin="lumen"] .card { border-color: rgba(255, 255, 255, .9); box-shadow: var(--lift); backdrop-filter: blur(12px); }
[data-skin="lumen"] .card + .card { margin-top: 26px; }
[data-skin="lumen"] .sheet { background: #ffffff; border-color: #fff; }
[data-skin="lumen"] .btn { border-radius: 999px; background: #fff; border-color: var(--rule-2); }
[data-skin="lumen"] .btn.primary { background: var(--holo); border-color: transparent; color: #fff; font-weight: 600; }
[data-skin="lumen"] .btn.primary:hover { filter: brightness(1.05); box-shadow: 0 8px 24px -6px rgba(79, 107, 255, .5); }
[data-skin="lumen"] .tab-bar { background: var(--holo); height: 3px; }
[data-skin="lumen"] input, [data-skin="lumen"] select, [data-skin="lumen"] textarea { background: #fff; border-radius: 12px; }
[data-skin="lumen"] .stats { border-bottom: 0; gap: 16px; }
[data-skin="lumen"] .stat { background: rgba(255, 255, 255, .85); border: 0; border-radius: 22px; padding: 16px 22px; margin: 0; box-shadow: var(--lift); }

/* Gemeinsam: Segment-Schalter und Pillen folgen den Rundungen der Haut */
[data-skin="aurora"] .seg, [data-skin="lumen"] .seg { border-radius: 999px; overflow: hidden; }
[data-skin="aurora"] .seg-b[aria-current="true"] { background: linear-gradient(90deg, var(--sky-1), var(--sky-2)); color: #070b1a; }
[data-skin="lumen"] .seg-b[aria-current="true"] { background: var(--holo); color: #fff; }
[data-skin="hud"] .seg-b[aria-current="true"] { background: rgba(25, 245, 193, .16); color: var(--neon); }

/* Wo app.css Text in der Kartenfarbe auf dunkler Flaeche setzt (Pille, Hauptknopf),
   ist die Karte hier durchsichtig - dafuer die feste Gegenfarbe. */
[data-skin="aurora"] .pill.ok, [data-skin="lumen"] .pill.ok, [data-skin="hud"] .pill.ok { color: var(--ink-inv); }
[data-skin="aurora"] .pill.ok { background: linear-gradient(90deg, var(--sky-1), var(--sky-2)); border-color: transparent; }
[data-skin="hud"] .pill.ok { background: var(--neon); border-color: var(--neon); }
[data-skin="lumen"] .pill.ok { background: var(--holo); border-color: transparent; }
[data-skin="aurora"] .org2-card.hero, [data-skin="hud"] .org2-card.hero, [data-skin="lumen"] .org2-card.hero { color: var(--ink-inv); }
[data-skin="aurora"] .org2-card.hero .org-chip, [data-skin="hud"] .org2-card.hero .org-chip, [data-skin="lumen"] .org2-card.hero .org-chip { color: var(--ink-inv); }
[data-skin="aurora"] .toast, [data-skin="hud"] .toast, [data-skin="lumen"] .toast { color: var(--ink-inv); }