/*
 * Strony dokumentow (polityka prywatnosci, warunki). Lekki arkusz zamiast
 * calego style.css - tamten blokuje przewijanie strony, bo konfigurator
 * przewija tylko swoje panele. Te same kolory i kroje co w aplikacji.
 */
:root {
  --bg: #16181c;
  --panel: #21242a;
  --line: #343941;
  --brass: #c9a227;
  --brass-2: #b08d57;
  --brass-hi: #f0d98a;
  --text: #e8e6e1;
  --text-2: #b4bac3;
  --text-3: #8a919c;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 8% -8%, rgba(201, 162, 39, .12), transparent 62%),
    radial-gradient(900px 560px at 104% 2%, rgba(123, 21, 32, .22), transparent 60%),
    linear-gradient(180deg, #1c1f25 0%, #15171b 48%, #111317 100%);
  background-attachment: fixed;
  color: var(--text-2);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brass-hi); }
a:hover { color: #fff3c4; }
:focus-visible { outline: 2px solid #4a9eff; outline-offset: 2px; }

.naglowek {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(123, 21, 32, .28), transparent 40%), linear-gradient(180deg, #262a31, #1a1d22);
}
.naglowek a.marka {
  display: flex; align-items: center; gap: 10px;
  color: var(--brass-hi); text-decoration: none;
  font-family: 'Oswald', 'Inter', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: .03em;
}
.naglowek img { border-radius: 8px; }
.naglowek .wroc {
  margin-left: auto;
  padding: 7px 14px;
  border: 1px solid #8a6f22;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0d98a, #c9a227 55%, #94761f);
  color: #1d1704;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: transform .15s;
}
.naglowek .wroc:hover { transform: scale(1.05); color: #1d1704; }

main {
  max-width: 860px;
  margin: 0 auto;
  padding: 36px 20px 60px;
}
h1 {
  margin: 0 0 6px;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.data { margin: 0 0 26px; font-size: 13px; color: var(--text-3); }
h2 {
  margin: 30px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--brass-hi);
}
p, ul, ol { margin: 0 0 12px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 5px; }
strong { color: var(--text); }
.ramka {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 9px;
  background: rgba(33, 36, 42, .75);
}
.spis { columns: 2; column-gap: 28px; font-size: 14px; }
@media (max-width: 620px) { .spis { columns: 1; } }

.stopka {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  background: #15171b;
  font-size: 12.5px;
  color: var(--text-3);
  text-align: center;
}
.stopka a { color: var(--brass-2); }
.stopka .romb { color: var(--brass); }
code {
  padding: 1px 6px; border-radius: 4px; background: #0f1114; border: 1px solid var(--line);
  font-size: .88em; color: var(--brass-hi);
}