/* Design-Variante "Liquid Glass" — wird nach app.css geladen und überschreibt Farben und Flächen. */
html:root {
  --bg: #0b1020;
  --card: rgba(255, 255, 255, .08);
  --sunk: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .15);
  --ink: #f2f5f7;
  --muted: rgba(232, 238, 245, .64);
  --accent: #c8e65a;
  --accent-ink: #10141a;
  --good: #74e8a6;
  --good-bg: rgba(52, 211, 153, .2);
  --mid-bg: rgba(251, 191, 36, .2);
  --bad: #ff9a9a;
  --bad-bg: rgba(248, 113, 113, .22);
  --warn-bg: rgba(251, 191, 36, .22);
  --grid: rgba(255, 255, 255, .08);
  --glass: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04));
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(255, 255, 255, .06);
  --shadow: 0 12px 40px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

body { background: var(--bg); }
/* farbiges, langsam treibendes Licht hinter dem Glas */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 34% at 14% 18%, rgba(56, 189, 248, .55), transparent 62%),
    radial-gradient(34% 30% at 86% 12%, rgba(168, 85, 247, .48), transparent 62%),
    radial-gradient(44% 40% at 72% 86%, rgba(34, 197, 94, .34), transparent 62%),
    radial-gradient(34% 34% at 18% 92%, rgba(234, 106, 42, .32), transparent 62%);
  filter: blur(30px);
  animation: drift 32s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(3%, -2%, 0) rotate(7deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 650; letter-spacing: -.02em; }

/* Glasflächen */
.card, .tabs, .seg, #toasts .toast {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: var(--glass-edge), var(--shadow);
}
.card { border-radius: 24px; position: relative; overflow: hidden; }
/* Lichtkante oben links */
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 0% 0%, rgba(255, 255, 255, .14), transparent 45%);
}
.card > * { position: relative; }

.sub-card, .tile, .tform, .rules, .trade, .empty {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.tile, .sub-card, .tform { border-radius: 16px; }
.trade { border-radius: 14px; border-left: 4px solid var(--c, rgba(255, 255, 255, .2)); }
.trade.add { border-style: dashed; border-left-width: 1px; }
.trade.add:hover, button.tr:hover { background: rgba(255, 255, 255, .1); }

input, select, textarea { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); border-radius: 12px; }
select option, select optgroup { background: #1a2133; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline-color: rgba(200, 230, 90, .5); border-color: var(--accent); }
.title-in { background: transparent; border-color: transparent; }

.btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.btn:hover { background: rgba(255, 255, 255, .15); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 0 0 1px rgba(200, 230, 90, .4), 0 6px 22px rgba(200, 230, 90, .35); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.link { color: #9cc3ff; }

/* Reiter als Glas-Pille */
.tabs { display: inline-flex; border-radius: 16px; padding: 4px; gap: 2px; margin: 18px 0 22px; max-width: 100%; }
.tabs a { border-bottom: 0; border-radius: 12px; padding: 7px 14px; }
.tabs a.on { background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); color: var(--ink); }
.seg { border-radius: 14px; }
.seg button.on { box-shadow: 0 4px 14px rgba(200, 230, 90, .3); }
.chip { background: rgba(255, 255, 255, .1); }

/* Kalender */
.cal-d { border-radius: 10px; }
.cal-d.sel { outline-color: #fff; }
.cal-d.good { box-shadow: 0 0 12px rgba(52, 211, 153, .25); }

/* Zahlen und Charts */
.big, .big2 { text-shadow: 0 0 24px rgba(255, 255, 255, .15); }
.big.pos, .big2.pos { text-shadow: 0 0 24px rgba(116, 232, 166, .35); }
.bar { background: rgba(255, 255, 255, .1); }
.bar i { box-shadow: 0 0 12px rgba(200, 230, 90, .6); }
.chart .ist { stroke: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .45)); }
.chart .pt { fill: #141a2b; stroke: #fff; }
.chart .area { fill: rgba(56, 189, 248, .22); }
.chart .val { fill: #fff; }
.lg-i i.line { background: #fff; }

.eval .tr.sub, .matrix .tr.sub, .days .tr.mh { background: rgba(255, 255, 255, .07); }
.dx { background: rgba(0, 0, 0, .15); }
.toast { color: var(--ink); }
.toast.err { background: rgba(220, 60, 60, .55); }
.login { border-radius: 26px; }