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

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — domyślny
══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg:              #f2f2f8;
  --bg-card:         #ffffff;
  --bg-elevated:     #e8e8f2;
  --accent:          #ff4500;
  --accent-bright:   #e03c00;
  --accent-glow:     rgba(255, 69, 0, 0.10);
  --accent-glow-strong: rgba(255, 69, 0, 0.22);
  --text:            #0d0d20;
  --text-muted:      #3a3a60;
  --text-dim:        #7070a0;
  --border:          #dcdcee;
  --border-light:    #e8e8f5;
  --navbar-bg:       rgba(242, 242, 248, 0.95);
  --navbar-menu-bg:  rgba(242, 242, 248, 0.99);
  --heading-start:   #0d0d20;
  --heading-end:     #3a3a80;
  --card-shadow:     0 4px 24px rgba(0, 0, 0, 0.07);
  --radius:          22px;
  --radius-sm:       13px;
  --font:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nav-h:           58px;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — klasa html.dark
══════════════════════════════════════════════════════════════════════════ */
html.dark {
  --bg:              #08080f;
  --bg-card:         #0e0e1a;
  --bg-elevated:     #161625;
  --accent:          #ff4500;
  --accent-bright:   #ff7340;
  --accent-glow:     rgba(255, 69, 0, 0.18);
  --accent-glow-strong: rgba(255, 69, 0, 0.35);
  --text:            #ffffff;
  --text-muted:      #c4c4da;
  --text-dim:        #9090a8;
  --border:          #1a1a2e;
  --border-light:    #20203a;
  --navbar-bg:       rgba(8, 8, 15, 0.92);
  --navbar-menu-bg:  rgba(10, 10, 20, 0.98);
  --heading-start:   #ffffff;
  --heading-end:     #d0d0e8;
  --card-shadow:     0 8px 40px rgba(0, 0, 0, 0.50);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* blokada poziomego scroll – iOS Safari wymaga też na html */
  max-width: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100%;
  transition: background-color 0.25s ease, color 0.25s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

input {
  font-family: var(--font);
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

.container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 16px;
}

.main {
  padding-top: calc(var(--nav-h) + 20px);
  padding-bottom: 80px;
}

/* ── Desktop ≥ 768 px ────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .container {
    max-width: 620px;
    padding: 0 24px;
  }

  .main {
    padding-top: calc(var(--nav-h) + 36px);
    padding-bottom: 100px;
  }
}