/* ==========================================================================
   AI Einkommen Guide — Design Tokens & Komponenten
   Basis: Tailwind (CDN, Utilities) + eigene Tokens/Komponenten hier.
   Theme: Dark / Liquid Glass (inspired by Berry Dashboard + Apple "Liquid Glass").
   ========================================================================== */

:root {
  /* Indigo — bright tone for text/icons/borders on dark, solid tone for filled buttons */
  --color-primary: #8B93F8;
  --color-primary-solid: #4F46E5;
  --color-primary-dark: #4338CA;
  --color-primary-light: rgba(139, 147, 248, 0.16);

  /* Teal — bright tone for text/icons, solid tone for filled buttons */
  --color-accent: #2DD4BF;
  --color-accent-solid: #0D9488;
  --color-accent-light: rgba(45, 212, 191, 0.14);

  /* Surfaces — each step slightly lighter = higher "elevation" (dark-mode convention) */
  --color-bg: #08080F;
  --color-surface: #131320;
  --color-surface-2: #191927;
  --color-surface-3: #23233570;

  /* Text */
  --color-text: #F4F4FA;
  --color-text-secondary: #D3D3E2;
  --color-text-muted: #9A9AB2;
  --color-text-faint: #6C6C84;

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-warning-bg: rgba(251, 191, 36, 0.10);
  --color-warning-border: rgba(251, 191, 36, 0.28);
  --color-warning-text: #FBD160;

  --color-danger: #F87171;
  --color-success: #34D399;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.65);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 22px 44px -14px rgba(79, 70, 229, 0.35);
  --radius-card: 20px;
  --radius-sm: 12px;
}

* { -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; color-scheme: dark; }

/* Native form controls (text/number inputs, selects, checkboxes) default to a
   light UA appearance; color-scheme above fixes checkboxes/scrollbars/select
   popups, these rules cover the visible field chrome we render ourselves. */
input, select, textarea {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
input::placeholder, textarea::placeholder { color: var(--color-text-faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

::selection { background: var(--color-primary-solid); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Layout helpers ---------- */
.container-page { max-width: 1120px; margin-inline: auto; padding-inline: 20px; }
.section-py { padding-block: 64px; }
@media (max-width: 640px) { .section-py { padding-block: 40px; } }

.hscroll { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; margin: 0 -20px; padding-inline: 20px; }
.hscroll::-webkit-scrollbar { height: 6px; }
.hscroll::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 99px; }
.hscroll > * { scroll-snap-align: start; flex-shrink: 0; }

/* ---------- Nav ---------- */
.nav-link {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.925rem;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.nav-link:hover { color: var(--color-text); }
.nav-link.active { color: var(--color-primary); border-color: var(--color-primary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 0.95rem; line-height: 1;
  padding: 13px 22px; border-radius: 999px;
  cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-primary { background: var(--color-primary-solid); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06) inset; }
.btn-primary:hover { background: #5B52F0; box-shadow: var(--shadow-card-hover); }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-accent { background: var(--color-accent-solid); color: #fff; }
.btn-accent:hover { background: #12B0A0; }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; border-radius: 999px; }
.btn-ghost { background: transparent; color: var(--color-primary); padding: 8px 10px; }
.btn-ghost:hover { background: var(--color-primary-light); }

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.card-hover:hover { box-shadow: var(--shadow-card-hover); border-color: rgba(139,147,248,0.35); transform: translateY(-2px); }

/* ---------- Glass panel (CSS-only Liquid Glass look) ---------- */
.glass {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 50px -20px rgba(0,0,0,0.6);
}

/* ---------- Stat tiles (Berry-style glanceable numbers) ---------- */
.stat-tile {
  border-radius: var(--radius-card);
  padding: 22px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.stat-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.9;
  background: var(--stat-gradient, linear-gradient(135deg, #4F46E5, #4338CA));
}
.stat-tile::after {
  content: ""; position: absolute; width: 140px; height: 140px; border-radius: 999px;
  background: rgba(255,255,255,0.10); top: -50px; right: -40px; z-index: -1;
}
.stat-tile-icon {
  width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--color-primary-light); color: var(--color-primary);
}
.badge-accent { background: var(--color-accent-light); color: var(--color-accent); }
.badge-neutral { background: var(--color-surface-3); color: var(--color-text-muted); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }

/* ---------- Disclaimer / hint boxes ---------- */
.hint-box {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.info-box {
  background: var(--color-primary-light);
  border: 1px solid rgba(139,147,248,0.3);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ---------- Progress bar ---------- */
.progress-track { width: 100%; height: 8px; border-radius: 999px; background: var(--color-surface-3); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); border-radius: 999px; transition: width 300ms ease; }

/* ---------- Tabs ---------- */
.tab-btn {
  padding: 10px 16px; border-radius: 999px; font-size: 0.875rem; font-weight: 600;
  color: var(--color-text-muted); background: transparent; cursor: pointer;
  border: 1px solid transparent; transition: all 150ms ease; white-space: nowrap;
}
.tab-btn:hover { color: var(--color-text); }
.tab-btn.active { background: var(--color-primary-solid); color: #fff; }

/* ---------- Step / prompt cards ---------- */
.step-card { position: relative; }
.step-card.done { border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.06); }
.step-num {
  width: 34px; height: 34px; border-radius: 999px; background: var(--color-primary-light);
  color: var(--color-primary); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
}
.step-card.done .step-num { background: var(--color-success); color: #06281d; }

.prompt-box {
  background: #050509; color: #D7D9E6; border-radius: 10px; padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.06);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8125rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}

/* ---------- Checklist ---------- */
.check-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--color-text-muted); }
.check-item input[type="checkbox"] {
  margin-top: 3px; width: 17px; height: 17px; border-radius: 5px; accent-color: var(--color-accent); cursor: pointer; flex-shrink: 0;
}

/* ---------- Filter chip ---------- */
.chip {
  font-size: 0.8125rem; font-weight: 500; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted);
  cursor: pointer; transition: all 150ms ease;
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip.active { background: var(--color-primary-solid); border-color: var(--color-primary-solid); color: #fff; }

/* ---------- Difficulty dots ---------- */
.diff-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--color-border-strong); display: inline-block; }
.diff-dot.on { background: var(--color-primary); }

/* ---------- Accordion ---------- */
.accordion-trigger { cursor: pointer; }
.accordion-panel { display: none; }
.accordion-panel.open { display: block; }
.accordion-chevron { transition: transform 200ms ease; }
.accordion-trigger[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px;
}

/* ---------- Misc ---------- */
.gradient-hero {
  background:
    radial-gradient(1100px 560px at 12% -12%, rgba(99, 102, 241, 0.30) 0%, transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(45, 212, 191, 0.20) 0%, transparent 55%),
    radial-gradient(700px 500px at 60% 110%, rgba(139, 92, 246, 0.16) 0%, transparent 60%),
    var(--color-bg);
}
.copy-btn { cursor: pointer; }
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }

/* Ambient glow blobs, available as a fixed background layer (see .bg-blobs) */
.bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-blobs span {
  position: absolute; border-radius: 999px; filter: blur(80px); opacity: 0.35;
}
.bg-blobs span:nth-child(1) { width: 480px; height: 480px; background: #4F46E5; top: -160px; left: -120px; }
.bg-blobs span:nth-child(2) { width: 420px; height: 420px; background: #0D9488; bottom: -140px; right: -100px; }
.bg-blobs span:nth-child(3) { width: 320px; height: 320px; background: #7C3AED; top: 40%; left: 60%; opacity: 0.22; }

/* ==========================================================================
   Dark-mode overrides for the small set of raw Tailwind utility classes
   used inline across the HTML (originally authored for a light theme).
   Loaded after the Tailwind CDN stylesheet; !important guards against the
   Play CDN's runtime JIT re-injecting its own rules after DOM updates.
   ========================================================================== */
.text-primary, .hover\:text-primary:hover { color: var(--color-primary) !important; }
.text-accent { color: var(--color-accent) !important; }

.bg-white { background-color: var(--color-surface) !important; }
.bg-white\/90 { background-color: rgba(8, 8, 15, 0.72) !important; }
.bg-white\/70 { background-color: rgba(255, 255, 255, 0.05) !important; }

.text-slate-900 { color: var(--color-text) !important; }
.text-slate-800 { color: var(--color-text) !important; }
.text-slate-700 { color: var(--color-text-secondary) !important; }
.text-slate-600 { color: var(--color-text-muted) !important; }
.text-slate-500 { color: var(--color-text-muted) !important; }
.text-slate-400 { color: var(--color-text-faint) !important; }
.text-slate-300 { color: var(--color-text-faint) !important; }

.border-slate-200 { border-color: var(--color-border) !important; }
.border-slate-100 { border-color: var(--color-border) !important; }
.border-slate-300 { border-color: var(--color-border-strong) !important; }
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-border) !important; }

.bg-slate-50 { background-color: var(--color-surface-2) !important; }
.bg-slate-100 { background-color: var(--color-surface-3) !important; }
.hover\:bg-slate-100:hover { background-color: var(--color-surface-3) !important; }

.from-indigo-50 { --tw-gradient-from: rgba(99, 102, 241, 0.14) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(99, 102, 241, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-teal-50 { --tw-gradient-to: rgba(45, 212, 191, 0.14) var(--tw-gradient-to-position) !important; }