:root {
  /* Tła */
  --bg-primary:    #07091a;
  --bg-secondary:  rgba(255,255,255,0.03);
  --bg-tertiary:   rgba(255,255,255,0.05);
  --bg-card:       rgba(255,255,255,0.04);
  --bg-hover:      rgba(255,255,255,0.07);
  --bg-glass:      rgba(255,255,255,0.06);
  --bg-input:      rgba(255,255,255,0.06);

  /* Akcenty */
  --accent-blue:   #6097ff;
  --accent-blue-dim: #3a6bcc;
  --accent-green:  #4ade80;
  --accent-red:    #f87171;
  --accent-yellow: #fbbf24;
  --accent-purple: #c084fc;
  --accent-cyan:   #38bdf8;

  /* Tekst */
  --text-primary:   #f0f4ff;
  --text-secondary: #94a3c8;
  --text-muted:     #4b5a7a;

  /* Obramowania — subtelne białe */
  --border:        rgba(255,255,255,0.08);
  --border-light:  rgba(255,255,255,0.12);
  --border-accent: rgba(96,151,255,0.25);

  /* KaTeX */
  --katex-color:   #c5d4ff;

  /* Kategorie */
  --cat-1:  #f59e0b; --cat-2:  #ef4444; --cat-3:  #8b5cf6;
  --cat-4:  #06b6d4; --cat-5:  #10b981; --cat-6:  #f97316;
  --cat-7:  #3b82f6; --cat-8:  #ec4899; --cat-9:  #14b8a6;
  --cat-10: #a855f7; --cat-11: #22c55e; --cat-12: #eab308;
  --cat-13: #f43f5e; --cat-14: #6366f1; --cat-15: #0ea5e9;

  /* Typografia */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Animacje */
  --transition: 0.18s ease;
  --transition-slow: 0.35s ease;

  /* Zaokrąglenia */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  26px;

  /* Cienie */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);
  --glow-blue: 0 0 30px rgba(96,151,255,0.18);
  --glow-sm:   0 0 12px rgba(96,151,255,0.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Tło z subtelnym gradientem */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%,   rgba(60,100,220,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%,  rgba(120,60,200,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 50% 50%,   rgba(96,151,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* KaTeX */
.katex { color: var(--katex-color) !important; font-size: 1.05em; }
.katex-display { color: var(--katex-color) !important; }
.katex-display > .katex { font-size: 1.15em; }

/* Selection */
::selection { background: rgba(96,151,255,0.3); color: var(--text-primary); }

/* Focus ring */
:focus-visible {
  outline: 2px solid rgba(96,151,255,0.6);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Klasa szklana karta */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
}