.section--topics{
  margin-top: var(--header-h);
  min-height: calc(100vh - var(--header-h));
  display: flex;
  justify-content: center;
  padding: 40px var(--pad-x);
  color: #f5f5f5;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    radial-gradient(1200px 600px at 70% 30%, rgba(255,140,0,.25), transparent 60%),
    url("../Images/QubitBG.png") no-repeat center center / cover;
}

.topics { max-width: 1000px; width: 100%; }

.topics-header { text-align: center; margin-bottom: 28px; }
.topics-lead { max-width: 800px; margin: 0 auto; opacity: .95; }

.topics-left { display: grid; gap: 20px; }

.topics-block {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.topics-h2 { margin: 0 0 10px; color: #ffcc66; }

.topics-list { margin: 0; padding-left: 18px; display: grid; gap: 10px; }

.topics-note {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
}

.topics-back { margin-top: 30px; text-align: center; }

.btn-back{
  display: inline-block;
  padding: 16px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff8800, #ffcc33);
  color: #111;
  font-weight: 800;
  text-decoration: none;
  font-size: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.btn-back:hover{
  background: linear-gradient(135deg, #ffcc33, #ff8800);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}




/* Globalny styl przycisku tłumaczeń w topbarze */
.actions.actions--icons #lang-toggle {
  appearance: none;                /* usuń natywne style przycisku */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  padding: 0;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .1s ease;
}
.actions.actions--icons #lang-toggle:hover { background:#444; transform: translateY(-1px); }
.actions.actions--icons #lang-toggle:focus-visible { outline:2px solid #fff; outline-offset:2px; }

.actions.actions--icons #lang-toggle img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;  /* ładniejsze rogi flagi */
  pointer-events: none; /* klik zawsze w button */
}