html, body {
  font-family: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Open Sans", sans-serif;
  height: 100%
}
/* styl.css — escforum.eu (clean) */
/* =========================
   THEME TOKENS
   ========================= */ :root {
  --bg: #0e1a2b;
  --bg-raised: #122943;
  --card: #162d4f;
  --text: #ecf2f8;
  --muted: #b7c6d9;
  --brand: #00b8ff;
  --accent: #7dd3fc;
  --danger: #ff6b6b;
  --ok: #22c55e;
  --border: #24446f;
  --shadow: 0 10px 30px rgba(0, 0, 0, .25);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f8fb;
    --bg-raised: #ffffff;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --brand: #0077ff;
    --accent: #2563eb;
    --border: #e2e8f0;
    --shadow: 0 10px 30px rgba(2, 6, 23, .08);
    color-scheme: light;
  }
}
/* =========================
   BASE
   ========================= */
* {
  box-sizing: border-box
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}

html, body {
  font-family: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Open Sans", sans-serif;
}

@font-face{
  font-family: "Ubuntu";
  src: url("/assets/fonts/ubuntu/Ubuntu-Regular.woff2?v=1759325375") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Ubuntu";
  src: url("/assets/fonts/ubuntu/Ubuntu-Regular.woff2?v=1759325375") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

img, svg, video {
  max-width: 100%;
  height: auto
}
a {
  color: inherit
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 18px
}
/* =========================
   LAYOUT: HEADER / FOOTER
   ========================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 41, 67, .8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border)
}
@media (prefers-color-scheme: light) {
  .site-header {
    background: rgba(255, 255, 255, .8)
  }
}
.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: var(--bg-raised);
  border-top: 1px solid var(--border)
}
.site-header .wrap, .site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
/* =========================
   HEADER CONTENT / NAV
   ========================= */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700
}
.brand__logo {
  width: 28px;
  height: 28px;
  fill: var(--brand)
}
.brand__text {
  letter-spacing: .3px
}
.site-nav {
  margin-left: auto
}
.menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin: 0
}
.link {
  color: var(--text);
  text-decoration: none;
  opacity: .9;
  border-bottom: 2px solid transparent;
  padding: 6px;
  border-radius: 8px
}
.link:hover {
  opacity: 1;
  border-bottom-color: var(--brand)
}
.menu .link.active {
  opacity: 1;
  border-bottom-color: var(--brand)
}
.hamburger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  margin: 4px 0;
  border-radius: 2px
}
/* MOBILE NAV */
@media (max-width:860px) {
  .hamburger {
    display: inline-block
  }
  .site-nav {
    position: fixed;
    inset: 64px 16px auto 16px;
    z-index: 2147483000;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px;
    box-shadow: var(--shadow);
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: .2s ease;
  }
  .site-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto
  }
  .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 8px
  }
  .site-nav .menu a {
    display: flex;
    align-items: center;
    font-size: 17px;
    line-height: 1.4;
    padding: 12px 14px;
    min-height: 44px;
    border-radius: 10px;
    text-decoration: none;
  }
  .link, .btn {
    width: 100%;
    text-align: left
  }
  .site-nav .menu .link {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    opacity: 1
  }
  .site-nav .menu .link.active {
    color: var(--brand) !important;
    font-weight: 700
  }
}
/* =========================
   BUTTONS
   ========================= */
.btn, a.btn {
  --_bg: transparent;
  --_fg: var(--text);
  --_bd: var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: none;
  transform: none;
  box-shadow: none;
}
.btn--primary {
  background: #79bbff !important;
  border-color: transparent !important;
  color: #fff !important
}
a.btn:visited {
  color: inherit !important
}
/* bez „podskoku” wszędzie */
.btn:active, a.btn:active {
  transform: none !important;
}
/* =========================
   SECTIONS / CARDS / GRIDS
   ========================= */
.section {
  padding: 22px 0
}
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px
}
.section h2 {
  margin: 0;
  font-size: clamp(18px, 2vw, 24px)
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px
}
.grid {
  display: grid;
  gap: 14px
}
.grid--cats {
  grid-template-columns: repeat(4, 1fr)
}
@media (max-width:1000px) {
  .grid--cats {
    grid-template-columns: repeat(3, 1fr)
  }
}
@media (max-width:740px) {
  .grid--cats {
    grid-template-columns: repeat(2, 1fr)
  }
}
@media (max-width:480px) {
  .grid--cats {
    grid-template-columns: 1fr
  }
}
/* =========================
   TOPICS / BADGES
   ========================= */
.topics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px
}
.topic {
  display: grid;
  gap: 8px
}
.topic__main {
  text-decoration: none;
  color: inherit
}
.topic__title {
  margin: 0 0 4px;
  font-size: 17px
}
.topic__excerpt {
  margin: 0;
  color: var(--muted)
}
.topic__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 184, 255, .18);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 12px
}
.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border);
  display: inline-block
}
/* =========================
   CTA
   ========================= */
.hero {
  background: radial-gradient(60% 100% at 50% 0%, rgba(0, 184, 255, .15), transparent 60%);
  border-bottom: 1px solid var(--border)
}
.hero h1 {
  margin: 0 0 6px;
  font-size: clamp(24px, 2.6vw, 36px)
}
.hero__lead {
  margin: 0 0 16px;
  color: var(--muted)
}
.search {
  display: flex;
  gap: 10px;
  align-items: center
}
.search input {
  flex: 1 1 auto;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text)
}
.search input::placeholder {
  color: var(--muted)
}
/* =========================
   FORMS
   ========================= */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text);
  outline: none;
}
textarea {
  min-height: 120px;
  resize: vertical
}
/* neutralny focus – bez poświaty/ringu */
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus, select:focus {
  border-color: var(--border);
  box-shadow: none;
  outline: none;
}
/* alias komponentowy */
input.form-input, textarea.form-input, select.form-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text);
  outline: none;
  margin-bottom: 10px;
}
input.form-input:focus, textarea.form-input:focus, select.form-input:focus {
  border-color: var(--border);
  box-shadow: none;
  outline: none
}
/* Walidacja — tylko czerwony tekst, bez czerwonych ramek */
form .error-text {
  display: none;
  margin: .35rem 0 0;
  font-size: .9rem;
  color: var(--danger)
}
form .error-text.is-active {
  display: block
}
form input.is-invalid, form textarea.is-invalid, form select.is-invalid, form input.form-input.is-invalid, form textarea.form-input.is-invalid, form select.form-input.is-invalid {
  border-color: var(--border) !important;
}
form label.is-invalid {
  color: inherit !important
}
/* wyłącz natywne :invalid miganie */
form input:invalid, form textarea:invalid, form select:invalid {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--border) !important;
}
/* =========================
   ALERTS
   ========================= */
.alert {
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  margin: 0 0 12px;
  color: inherit;
}
.alert.err, .alert--err {
  color: var(--danger) !important;
  border-left: 4px solid var(--danger) !important
}
.alert.ok, .alert--ok {
  color: var(--ok) !important;
  border-left: 4px solid var(--ok) !important
}
.alert.err a, .alert--err a, .alert.ok a, .alert--ok a {
  color: inherit !important
}
/* =========================
   COOKIE (modal — aktywny; bannery wyłączone)
   ========================= */
.cookie-banner {
  display: none !important
}
.cookie-modal[hidden] {
  display: none !important
}
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
}
.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .55);
  backdrop-filter: blur(3px);
}
.cookie-modal__dialog {
  position: relative;
  width: min(640px, calc(100vw - 32px));
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  outline: none;
}
.cookie-modal__text {
  color: var(--muted)
}
.cookie-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap
}
/* (ważne) — NIE stylujemy .btn wewnątrz modala, by były IDENTYCZNE jak w login.php */
/* =========================
   LINKS (poza nav)
   ========================= */
a.linki, a.linki:visited {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.42857;
  text-decoration: none;
  color: #00B8FF;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: none;
}
a.linki:hover, a.linki:focus, a.linki:active {
  color: #009BFF;
  text-decoration: none;
  outline: none
}
/* =========================
   CATEGORIES GRID & CARDS
   ========================= */
.grid--cats {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr)
}
@media (max-width:1000px) {
  .grid--cats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width:740px) {
  .grid--cats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width:480px) {
  .grid--cats {
    grid-template-columns: 1fr;
  }
}
.card.cat {
  padding: 0
}
.cat__link {
  display: block;
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  border-radius: 16px
}
.cat__link:hover {
  background: rgba(255, 255, 255, .03)
}
.cat__link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px
}
.cat__icon {
  font-size: 28px
}
.cat__title {
  margin: 8px 0 6px;
  font-size: 18px;
  overflow-wrap: anywhere
}
.cat__meta {
  margin: 0;
  color: var(--muted);
  font-size: 14px
}
/* =========================
   PWA INSTALL
   ========================= */
.install-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.install-fab:hover, .install-fab:active {
  box-shadow: none;
  transform: none
}
.install-fab svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: var(--brand)
}
@media (display-mode:standalone) {
  .install-fab {
    display: none !important
  }
}
.install-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.install-banner__actions {
  display: flex;
  gap: 8px;
  align-items: center
}
.install-banner__hint {
  color: var(--muted);
  margin-left: .35rem
}
@media (max-width:640px) {
  .install-banner {
    grid-template-columns: 1fr
  }
  .install-banner__actions {
    justify-content: flex-end
  }
}
@media (display-mode:standalone) {
  #installBtn, #installBanner {
    display: none !important
  }
}
/* =========================
   UTILITIES
   ========================= */
.mt-1 {
  margin-top: .25rem
}
.mt-2 {
  margin-top: .5rem
}
.mt-3 {
  margin-top: 1rem
}
.mb-1 {
  margin-bottom: .25rem
}
.mb-2 {
  margin-bottom: .5rem
}
.mb-3 {
  margin-bottom: 1rem
}
.text-muted {
  color: var(--muted)
}
.center {
  text-align: center
}
.max-w-420 {
  max-width: 420px
}
.w-full {
  width: 100%
}
.hidden {
  display: none !important
}
/* Android/iOS: wyłącz niebieską poświatę */
html, body {
  -webkit-tap-highlight-color: transparent
}
a, button, input, label, select, textarea, summary {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none
}
:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important
}
/* === Normalizacja przycisków (globalnie) === */
button.btn, a.btn, input[type="button"].btn, input[type="submit"].btn {
  -webkit-appearance: none;
  appearance: none;
  background-image: none !important; /* zero systemowych gradientów */
  border-radius: 8px; /* jak w .btn */
  border: 1px solid var(--_bd, var(--border));
  padding: 9px 14px;
  line-height: 1.2;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
/* Primary dokładnie jak w login.php */
button.btn.btn--primary, a.btn.btn--primary, input.btn.btn--primary {
  background: #79bbff !important;
  color: #fff !important;
  border: 0 !important; /* bez obramowania jak „ghost” */
}
button.btn.btn--primary:hover, button.btn.btn--primary:active, button.btn.btn--primary:focus, a.btn.btn--primary:hover, a.btn.btn--primary:active, a.btn.btn--primary:focus, input.btn.btn--primary:hover, input.btn.btn--primary:active, input.btn.btn--primary:focus {
  background: #498bff !important;
  color: #fff !important;
}
/* Firefox: usuń wewnętrzną ramkę przycisku */
button.btn::-moz-focus-inner, input.btn::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/* Jednolite zachowanie aktywne – bez „podskoku” */
.btn:active, a.btn:active {
  transform: none !important;
}
/* Cookie modal: oba przyciski mają wyglądać identycznie na starcie */
.cookie-modal .btn--primary:focus {
  background: #79bbff !important; /* NIE przyciemniaj na sam focus */
}
/* Usuń ring w modalu (żeby nie wyglądało „systemowo”) */
.cookie-modal .btn:focus, .cookie-modal .btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.cookie-settings-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--brand);
  cursor: pointer;
  font: inherit;
}
.cookie-settings-link:hover {
  color: #009BFF;
}
.zmiany {margin:8px 0 16px;font-size:.95rem;color: darkgreen;font-weight: 600}
    .grid--cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    @media (max-width: 780px) { /* smartfony: 2 kolumny */
      .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 360px) { /* bardzo wąskie: 1 kolumna */
      .grid--cards { grid-template-columns: 1fr; }
    }
    .grid--cards .card { min-width: 0; } /* zapobiega overflow: */
    .grid--cards .card * { max-width: 100%; }

    /* Druga siatka: zawsze 2 kolumny (na prośbę), z zawijaniem w 2. kolumnie */
    .grid--list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .grid--list > :nth-child(2) {
      min-width: 0; /* pozwala zawijać */
    }
    .grid--list > :nth-child(2) .topic__title,
    .grid--list > :nth-child(2) .topic__excerpt,
    .grid--list > :nth-child(2) p,
    .grid--list > :nth-child(2) a {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    /* Uspokojenie długich e-maili/URLi w kartach */
    .card p, .card strong, .card span {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
/* ===== Lista tematów: układ mobil/desktop ===== */
.topics { 
  display: grid; 
  gap: 12px; 
}

.topic {
  display: grid;
  grid-template-columns: 1fr auto;         /* desktop: tytuł po lewej, meta po prawej */
  grid-template-areas: "main meta";
  align-items: start;
  padding: 12px 16px;
  border-radius: 12px;
}

.topic__main {
  grid-area: main;
  display: block;
  min-width: 0;                            /* ważne dla długich tytułów */
  text-decoration: none;
}

.topic__title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  line-height: 1.3;
  overflow-wrap: anywhere;                 /* łamanie bardzo długich słów */
}

.topic__excerpt {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.topic__meta {
  grid-area: meta;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  color: var(--muted);
  font-size: .85rem;
}

/* kropka-separator; możesz zostawić jak masz – tu przykładowa kropka */
.dot {
  width: 4px; 
  height: 4px; 
  border-radius: 50%;
  background: var(--muted);
  display: inline-block;
  margin: 0 8px;
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .topic {
    grid-template-columns: 1fr;           /* jedna kolumna */
    grid-template-areas: 
      "main"
      "meta";                             /* meta POD tytułem */
  }
  .topic__meta {
    margin-top: 6px;
    white-space: normal;                  /* pozwól zawijać */
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .dot { display: none; }                 /* separatory niepotrzebne w pionie */
}