/* =================================================================
   Astralna Kraina – Sennik CSS
   Palette: deep navy #06091A, midnight #0D1433, cosmic blue #1A2255,
            gold #D4A843, soft gold #F0C060, glow cyan #4FC3F7,
            mist white #E8EAF6
================================================================= */

/* ── Reset & base ── */
.ak-app {
  --ak-bg:       #06091A;
  --ak-surface:  #0D1433;
  --ak-card:     #111830;
  --ak-border:   rgba(212,168,67,.25);
  --ak-gold:     #D4A843;
  --ak-gold-lt:  #F0C060;
  --ak-cyan:     #4FC3F7;
  --ak-text:     #E8EAF6;
  --ak-muted:    #8B93C4;
  --ak-radius:   12px;
  --ak-font-dis: 'Georgia', 'Palatino Linotype', serif;
  --ak-font-ui:  'Segoe UI', system-ui, sans-serif;

  background: var(--ak-bg);
  color:       var(--ak-text);
  font-family: var(--ak-font-ui);
  font-size:   16px;
  line-height: 1.6;
  min-height:  100vh;
}

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

/* Slow shimmer flow for big titles: Odkryj tajemnice snów, Popularne sny, Nasze artykuły, Wszystkie sny, Inne interpretacje snów.
   Keeps existing gold→cyan gradient — just animates background position so colors flow left to right. */
.ak-hero__title em,
.ak-section-title em,
.ak-dream-related__title em {
  background-size: 200% 100% !important;
  animation: ak-title-flow 10s linear infinite;
}
@keyframes ak-title-flow {
  from { background-position: 200% 50%; }
  to   { background-position: 0% 50%; }
}

/* Disable text selection and I-beam cursor everywhere except inputs */
.ak-app {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  cursor: default;
}
.ak-app input,
.ak-app textarea {
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  cursor: text;
}
.ak-app a       { color: var(--ak-gold); text-decoration: none; }
.ak-app button  { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Stars particle bg ── */
.ak-stars { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ak-star  {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: ak-twinkle var(--dur, 4s) var(--delay, 0s) infinite;
}
.ak-star:nth-child(3n)   { width:3px; height:3px; }
.ak-star:nth-child(5n)   { background: var(--ak-cyan); }
.ak-star:nth-child(7n)   { background: var(--ak-gold); }

<?php
// We can't use PHP here – output raw CSS with JS-applied positions
?>

@keyframes ak-twinkle {
  0%,100% { opacity:1; transform:scale(.8); }
  50%      { opacity:.9; transform:scale(1); }
}

/* ── Hero ── */
.ak-hero {
  position: relative;
  min-height: 540px;
  border-top: 3px solid rgba(212,168,67,.18);
  border-bottom: 3px solid rgba(212,168,67,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, #1c2d6e44 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%, #0a3d6244 0%, transparent 60%),
    var(--ak-bg);
  padding: 80px 24px 60px;
  text-align: center;
}

.ak-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
  opacity: 0; /* JS drives opacity from video.currentTime — see sennik.js */
}

.ak-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,9,26,0.70) 0%, rgba(7,9,26,0.90) 100%);
  z-index: 1;
  pointer-events: none;
}

.ak-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='1' fill='%234FC3F720'/%3E%3C/svg%3E") repeat;
  animation: ak-drift 60s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes ak-drift { to { background-position: 100px 100px; } }

.ak-hero .ak-stars { z-index: 2; }
.ak-hero__inner { position: relative; z-index: 3; max-width: 720px; transform: translateY(-70px); }
.ak-hero__moon { z-index: 3; }

.ak-hero__badge {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ak-gold);
  background: rgba(212,168,67,.12);
  border: 1px solid rgba(212,168,67,.3);
  border-radius: 100px;
  padding: 6px 18px;
  margin-bottom: 20px;
}

.ak-hero__title {
  font-family: var(--ak-font-dis);
  font-size: clamp(1.8rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ak-text);
  margin-bottom: 16px;
  text-shadow: 0 0 40px rgba(212,168,67,.3);
  white-space: nowrap;
}
.ak-hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--ak-gold) 0%, var(--ak-gold-lt) 50%, var(--ak-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ak-hero__sub {
  color: var(--ak-muted);
  font-size: 1rem;
  margin-bottom: 36px;
}

.ak-hero__moon {
  position: absolute;
  top: 24px; right: 5%;
  font-size: 4rem;
  opacity: .35;
  animation: ak-float 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ak-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ── Search box ── */
.ak-search-wrap { position: relative; max-width: 580px; margin: 0 auto; }

.ak-search-box {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.06);
  border: 1.5px solid var(--ak-border);
  border-radius: 100px;
  padding: 6px 6px 6px 20px;
  gap: 12px;
  backdrop-filter: blur(12px);
  transition: border-color .2s, box-shadow .2s;
}
.ak-search-box:focus-within {
  border-color: var(--ak-gold);
  box-shadow: 0 0 0 4px rgba(212,168,67,.12), 0 8px 30px rgba(0,0,0,.4);
}
.ak-search-icon { font-size: 1.1rem; flex-shrink:0; }
.ak-search-box input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--ak-text);
  font-size: 1rem;
  font-family: inherit;
}
.ak-search-box input::placeholder { color: var(--ak-muted); }

/* ── Buttons ── */
.ak-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 100px;
  font-size: .9rem;
  font-weight: 600;
  font-family: inherit;
  transition: all .2s;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  color: #0D1433;
}
.ak-btn--gold {
  background: linear-gradient(135deg, var(--ak-gold) 0%, var(--ak-gold-lt) 100%) !important;
  color: #0D1433 !important;
}
.ak-btn--gold:hover { filter: brightness(1.1); transform: translateY(-1px); }

.ak-btn--search {
  padding: 12px 30px;
  font-size: .95rem;
  font-weight: 700;
  justify-content: center;
  min-width: 140px;
  letter-spacing: .02em;
  box-shadow: 0 4px 16px rgba(212,168,67,.28), inset 0 1px 0 rgba(255,255,255,.25);
}

/* Hide native clear (X) button on search inputs across browsers */
.ak-search-box input::-webkit-search-cancel-button,
.ak-search-box input::-webkit-search-decoration,
.ak-search-box input::-ms-clear,
.ak-search-box input::-ms-reveal {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.ak-btn--ghost {
  border: 1.5px solid var(--ak-border);
  color: var(--ak-gold);
  background: transparent;
}
.ak-btn--ghost:hover { background: rgba(212,168,67,.08); }

/* ── Autocomplete ── */
.ak-autocomplete {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--ak-surface);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  z-index: 100;
}
.ak-autocomplete__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  transition: background .15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  color: var(--ak-text);
  font-family: inherit;
}
.ak-autocomplete__item:hover,
.ak-autocomplete__item:focus { background: rgba(212,168,67,.08); }
.ak-autocomplete__item + .ak-autocomplete__item { border-top: 1px solid rgba(255,255,255,.05); }
.ak-autocomplete__sym { font-size: 1.4rem; }
.ak-autocomplete__name { font-weight: 600; font-size: .95rem; }
.ak-autocomplete__sum  { font-size: .8rem; color: var(--ak-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

/* ── Alphabet bar ── */
.ak-alpha-bar {
  background:
    linear-gradient(180deg, rgba(7,9,26,0.25) 0%, rgba(7,9,26,0.35) 100%),
    url('../img/topimg.png') center / 100% 100% no-repeat,
    var(--ak-surface);
  border-top: 3px solid rgba(212,168,67,.18);
  border-bottom: 3px solid rgba(212,168,67,.18);
  height: 120px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Make WP main site header sticky at top instead of the alphabet bar */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}
/* Offset by WP admin bar height when logged in */
body.admin-bar header.wp-block-template-part {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar header.wp-block-template-part {
    top: 46px;
  }
}
.ak-alpha-bar__label {
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ak-gold);
  white-space: nowrap;
  text-align: center;
  font-weight: 700;
  text-shadow: 0 0 20px rgba(212,168,67,.35);
  line-height: 1;
}
.ak-alpha-bar__letters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  max-width: 1200px;
}

.ak-alpha-btn {
  background: transparent;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--ak-gold);
  transition: all .15s;
  font-family: inherit;
  line-height: 1.2;
}
.ak-alpha-btn:hover {
  background: transparent;
  color: var(--ak-gold-lt);
  text-shadow:
    0 0 6px rgba(240,192,96,.9),
    0 0 14px rgba(212,168,67,.6),
    0 0 22px rgba(212,168,67,.35);
}
.ak-alpha-btn.active {
  background: transparent;
  color: var(--ak-gold-lt);
  text-shadow:
    0 0 8px rgba(240,192,96,1),
    0 0 18px rgba(240,192,96,.7),
    0 0 30px rgba(212,168,67,.5);
}

.ak-alpha-sep {
  color: var(--ak-gold);
  opacity: .45;
  margin: 0 2px;
  font-weight: 400;
  user-select: none;
  pointer-events: none;
}

/* ── Middle section (starfield video bg) ── */
.ak-middle {
  position: relative;
  overflow: hidden;
  background: var(--ak-bg);
  border-top: 3px solid rgba(212,168,67,.18);
  border-bottom: 3px solid rgba(212,168,67,.18);
}
.ak-middle__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0; /* JS drives opacity from video.currentTime — see sennik.js */
}
.ak-middle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,9,26,0.55) 0%, rgba(7,9,26,0.75) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Particle overlay above video in middle section */
.ak-middle__stars { z-index: 2; }
.ak-middle__stars .ak-star {
  box-shadow: 0 0 6px rgba(255,255,255,.7);
}
.ak-middle__stars .ak-star:nth-child(4n) {
  width: 3px; height: 3px;
  box-shadow: 0 0 10px rgba(255,255,255,.85);
}
.ak-middle__stars .ak-star:nth-child(6n) {
  width: 4px; height: 4px;
  box-shadow: 0 0 14px rgba(212,168,67,.8);
  background: var(--ak-gold);
}
.ak-middle__stars .ak-star:nth-child(9n) {
  width: 5px; height: 5px;
  box-shadow: 0 0 18px rgba(79,195,247,.7);
  background: var(--ak-cyan);
}
.ak-middle__stars .ak-star:nth-child(13n) {
  width: 2px; height: 2px;
  box-shadow: 0 0 4px rgba(255,255,255,.5);
}

/* ── Main wrapper ── */
.ak-main {
  position: relative;
  z-index: 3;
  max-width: 1140px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* ── View switching ── */
.ak-view { }
.ak-view--active { display: block; }
.ak-view[hidden] { display: none; }

/* ── Section title ── */
.ak-section-title {
  font-family: var(--ak-font-dis);
  font-size: clamp(1.8rem, 5vw, 3.6rem);
  font-weight: 700;
  color: var(--ak-text);
  margin-bottom: 36px;
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 0 40px rgba(212,168,67,.3);
  white-space: nowrap;
}
.ak-section-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--ak-gold) 0%, var(--ak-gold-lt) 50%, var(--ak-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Cards grid ── */
.ak-cards-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.ak-cards-grid--symbols {
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 18px;
  justify-content: center;
  justify-items: stretch;
  max-width: 1140px;
  margin: 0 auto;
}

/* Letter view: 6 in row, max 5 rows (30 per page) */
.ak-cards-grid--letter {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 18px;
  max-width: 1140px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .ak-cards-grid--letter { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 560px) {
  .ak-cards-grid--letter { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Nav row above letter list: [← Powrót]      [Dalej →] */
.ak-nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.ak-nav-buttons .ak-back-btn { margin-bottom: 0; }

/* Articles grid */
.ak-section-title--articles { margin-top: 60px; }
.ak-cards-grid--articles {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px;
}
.ak-article-card {
  background: rgba(255,255,255,.06);
  border: 1.5px solid var(--ak-border);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all .25s;
  text-align: left;
}
.ak-article-card:hover {
  border-color: var(--ak-gold);
  transform: translateY(-3px);
  box-shadow: 0 0 0 4px rgba(212,168,67,.12), 0 8px 30px rgba(0,0,0,.4);
}
.ak-article-card__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid rgba(212,168,67,.18);
}
.ak-article-card__title {
  font-family: var(--ak-font-dis);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ak-text);
  padding: 18px 20px 8px;
  line-height: 1.25;
}
.ak-article-card__desc {
  font-size: .88rem;
  color: var(--ak-muted);
  padding: 0 20px 14px;
  line-height: 1.5;
  flex: 1;
}
.ak-article-card__date {
  font-size: .75rem;
  color: var(--ak-gold);
  padding: 0 20px 18px;
  opacity: .8;
  letter-spacing: .03em;
}
@media (max-width: 900px) {
  .ak-cards-grid--articles { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .ak-cards-grid--articles { grid-template-columns: 1fr !important; }
}
.ak-cards-grid--symbols .ak-symbol-card {
  background: rgba(255,255,255,.06);
  border: 1.5px solid var(--ak-border);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 32px 10px;
  min-height: 240px;
  gap: 10px;
  justify-content: flex-start;
}
.ak-cards-grid--symbols .ak-symbol-card__desc {
  min-height: 2.6em;
  display: flex;
  align-items: center;
  text-align: center;
}
.ak-cards-grid--symbols .ak-symbol-card:hover {
  background: rgba(212,168,67,.10);
  border-color: var(--ak-gold);
  box-shadow: 0 0 0 4px rgba(212,168,67,.12), 0 8px 30px rgba(0,0,0,.4);
  transform: translateY(-3px);
}
.ak-cards-grid--symbols .ak-symbol-card__name {
  font-size: 1.15rem;
  margin-top: -22px; /* pull title up to follow icon's -28px translateY */
}
.ak-cards-grid--symbols .ak-symbol-card__desc {
  font-size: .88rem;
  line-height: 1.4;
  min-height: 4.2em; /* room for 3 bullet lines */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.ak-cards-grid--symbols .ak-symbol-card__desc-item {
  display: block;
  white-space: nowrap;
}
.ak-cards-grid--symbols .ak-symbol-card__desc-item::before {
  content: "✧";
  display: inline-block;
  margin-right: 6px;
  color: var(--ak-gold);
  font-size: .95em;
  vertical-align: baseline;
  text-shadow: 0 0 6px rgba(212,168,67,.5);
}
@media (max-width: 768px) {
  .ak-cards-grid--symbols { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .ak-cards-grid--symbols { grid-template-columns: repeat(2, 1fr); }
}

/* ── Symbol card ── */
.ak-symbol-card {
  background: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius);
  padding: 24px 16px;
  text-align: center;
  transition: all .25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--ak-text);
  font-family: inherit;
}
.ak-symbol-card:hover {
  transform: translateY(-4px);
  border-color: var(--ak-gold);
  box-shadow: 0 8px 30px rgba(212,168,67,.15), 0 0 0 1px rgba(212,168,67,.2);
}
.ak-symbol-card__icon { font-size: 2.4rem; display: block; line-height: 1; }
.ak-symbol-card__icon img {
  width: 116px;
  height: 116px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  transform: translateY(-28px);
}
.ak-symbol-card__name { font-weight: 700; font-size: 1rem; }
.ak-symbol-card__desc { font-size: .78rem; color: var(--ak-muted); }

/* ── Result / letter card ── */
.ak-cards-grid .ak-dream-card {
  background: var(--ak-card);
  border: 1.5px solid var(--ak-border);
  border-radius: 20px;
  padding: 32px 16px;
  min-height: 240px;
  cursor: pointer;
  transition: all .25s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  color: var(--ak-text);
  font-family: inherit;
  text-align: center;
}
.ak-cards-grid .ak-dream-card:hover {
  background: linear-gradient(rgba(212,168,67,.12), rgba(212,168,67,.12)), var(--ak-card);
  border-color: var(--ak-gold);
  box-shadow: 0 0 0 4px rgba(212,168,67,.15), 0 8px 30px rgba(0,0,0,.5);
  transform: translateY(-3px);
}
.ak-dream-card__title {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ak-text);
  line-height: 1.2;
}
.ak-dream-card__sum {
  font-size: .88rem;
  color: var(--ak-muted);
  line-height: 1.5;
}

/* ── Dream detail ── */
.ak-dream-detail {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ak-dream-detail__hero {
  background: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: 16px;
  padding: 48px 40px;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ak-dream-detail__hero::before {
  content:'';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 0% 0%, rgba(212,168,67,.07), transparent);
  pointer-events: none;
}
.ak-dream-detail__sym   { display: none; }
.ak-dream-detail__title {
  font-family: var(--ak-font-dis);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--ak-text) 60%, var(--ak-gold-lt));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ak-dream-detail__summary {
  font-size: 1.15rem;
  color: var(--ak-cyan);
  font-style: italic;
  margin-bottom: 20px;
}
.ak-dream-detail__hero .ak-dream-detail__tags {
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.ak-dream-detail__hero .ak-tag {
  background: rgba(212,168,67,.10);
  border: 1.5px solid var(--ak-border);
  color: var(--ak-gold);
  padding: 8px 18px;
  font-size: .9rem;
  font-weight: 600;
}

.ak-dream-detail__body {
  background: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius);
  padding: 32px;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(232,234,246,.85);
}
.ak-dream-detail__body h3 {
  font-family: var(--ak-font-dis);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 20px;
  background: linear-gradient(135deg, var(--ak-text) 60%, var(--ak-gold-lt));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Detail body centered (Ogólne / Szczegółowe / W tradycjach) ── */
.ak-body--centered {
  text-align: center;
}
.ak-body--centered h3 {
  text-align: center;
}
.ak-body--centered > p {
  text-align: center;
  max-width: 75ch;
  margin: 0 auto 14px;
}

/* Szczegółowe znaczenie — lista pozycji (jeden ciąg, bez kategorii) */
.ak-detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  text-align: left;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.ak-detail-item {
  padding: 8px 14px;
  background: rgba(0,0,0,.18);
  border-left: 2px solid var(--ak-gold);
  border-radius: 4px;
  font-size: .95rem;
  line-height: 1.55;
}
.ak-detail-item__key   { color: var(--ak-gold); font-family: var(--ak-font-dis); font-weight: 700; }
.ak-detail-item__arrow { color: var(--ak-gold); opacity: .7; margin: 0 4px; }
.ak-detail-item__desc  { color: var(--ak-text); }

/* Zakładki tradycji — wycentrowane */
.ak-tabs--centered .ak-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  border-bottom: 1.5px solid var(--ak-border);
  margin-bottom: 22px;
}
.ak-tab {
  background: transparent;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 10px 22px;
  color: var(--ak-muted);
  font-family: var(--ak-font-dis);
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  transition: all .2s;
}
.ak-tab:hover { color: var(--ak-gold-lt); }
.ak-tab.active {
  color: var(--ak-gold);
  border-bottom-color: var(--ak-gold);
}
.ak-tabs__content { min-height: 140px; }
.ak-tab-panel {
  display: none;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ak-text);
  padding: 8px 0;
}
.ak-tab-panel.active {
  display: block;
  text-align: center;
  max-width: 80ch;
  margin: 0 auto;
}

/* Related dreams (Inne interpretacje snów) — chmurki w stylu kafelków popularne sny */
.ak-dream-related {
  margin-top: 0;
  padding: 36px 24px;
  background: transparent;
  border: none;
}
.ak-dream-related__title {
  font-family: var(--ak-font-dis);
  font-size: clamp(1.8rem, 5vw, 3.6rem);
  font-weight: 700;
  color: var(--ak-text);
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 0 40px rgba(212,168,67,.3);
  white-space: nowrap;
  margin-bottom: 30px;
}
.ak-dream-related__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--ak-gold) 0%, var(--ak-gold-lt) 50%, var(--ak-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ak-dream-related__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 1140px;
  margin: 0 auto;
}
.ak-dream-related__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--ak-card);
  border: 1.5px solid var(--ak-border);
  border-radius: 20px;
  color: var(--ak-text);
  font-family: var(--ak-font-dis);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all .25s;
}
.ak-dream-related__pill:hover {
  background: linear-gradient(rgba(212,168,67,.12), rgba(212,168,67,.12)), var(--ak-card);
  border-color: var(--ak-gold);
  box-shadow: 0 0 0 4px rgba(212,168,67,.15), 0 8px 30px rgba(0,0,0,.5);
  transform: translateY(-3px);
}
.ak-dream-related__mark {
  color: var(--ak-gold);
  font-size: .9em;
  text-shadow: 0 0 6px rgba(212,168,67,.5);
}
@media (max-width: 600px) {
  .ak-dream-related { padding: 24px 12px; }
  .ak-dream-related__pill { padding: 10px 16px; font-size: .9rem; }
}

.ak-dream-detail__tags {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ak-tag {
  background: rgba(79,195,247,.1);
  border: 1px solid rgba(79,195,247,.25);
  color: var(--ak-cyan);
  border-radius: 100px;
  padding: 4px 14px;
  font-size: .78rem;
  font-weight: 500;
}

/* ── Back button — styled like the gold Wyszukaj button ── */
.ak-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, var(--ak-gold) 0%, var(--ak-gold-lt) 100%) !important;
  color: #0D1433 !important;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 4px 14px rgba(212,168,67,.28), inset 0 1px 0 rgba(255,255,255,.25);
  transition: all .2s;
}
.ak-back-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212,168,67,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.ak-back-btn:hover { color: var(--ak-gold); }

/* ── Promo strip ── */
.ak-promo-strip {
  margin-top: 48px;
  background: linear-gradient(135deg, #0d1a40 0%, #0a1228 100%);
  border: 1px solid rgba(212,168,67,.2);
  border-radius: 16px;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.ak-promo-strip__icon { font-size: 3rem; flex-shrink:0; }
.ak-promo-strip h3 { font-size: 1.2rem; color: var(--ak-text); margin-bottom: 6px; font-family: var(--ak-font-dis); }
.ak-promo-strip p  { font-size: .9rem; color: var(--ak-muted); }
.ak-promo-strip .ak-btn { margin-left: auto; white-space: nowrap; }

/* Promo strip with full-area image background */
.ak-promo-strip--image {
  position: relative;
  padding: 0;
  min-height: 280px;
  overflow: hidden;
  display: block;
  border: 1.5px solid var(--ak-border);
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: all .25s;
}
.ak-promo-strip--image:hover {
  border-color: var(--ak-gold);
  transform: translateY(-3px);
  box-shadow: 0 0 0 4px rgba(212,168,67,.12), 0 8px 30px rgba(0,0,0,.4);
}
.ak-promo-strip__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.ak-promo-strip__content {
  position: relative;
  z-index: 1;
  padding: 40px 44px;
  width: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  max-width: 65%;
}
.ak-promo-strip--image h3 {
  font-size: 2.2rem;
  color: var(--ak-text);
  font-family: var(--ak-font-dis);
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 0 24px rgba(0,0,0,.6);
}
.ak-promo-strip--image p {
  font-size: .95rem;
  color: var(--ak-text);
  margin: 0;
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
}
.ak-promo-strip--image .ak-btn {
  align-self: flex-start;
  margin: 6px 0 0;
}
@media (max-width: 720px) {
  .ak-promo-strip__content { max-width: 100%; padding: 28px; }
  .ak-promo-strip--image h3 { font-size: 1.6rem; }
}

/* ── Loader ── */
.ak-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  gap: 20px;
  color: var(--ak-muted);
}
.ak-loader__ring {
  width: 48px; height: 48px;
  border: 3px solid rgba(212,168,67,.2);
  border-top-color: var(--ak-gold);
  border-radius: 50%;
  animation: ak-spin .8s linear infinite;
}
@keyframes ak-spin { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.ak-empty {
  text-align: center;
  padding: 80px 0;
  color: var(--ak-muted);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.ak-empty[hidden] { display: none; }
.ak-empty__icon { font-size: 3.5rem; opacity:.5; }

/* ── Footer ── */
.ak-footer {
  background:
    linear-gradient(180deg, rgba(7,9,26,0.25) 0%, rgba(7,9,26,0.35) 100%),
    url('../img/topimg.png') center / 100% 100% no-repeat,
    var(--ak-surface);
  border-top: 3px solid rgba(212,168,67,.18);
  text-align: center;
  height: 120px;
  padding: 14px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.ak-footer__logo { font-family: var(--ak-font-dis); font-size: 1.15rem; color: var(--ak-gold); line-height: 1.1; margin: 0; }
.ak-footer__logo-link {
  display: block;
  margin: 0 auto;
  text-decoration: none;
  outline: none;
  border: none;
  background: none;
  line-height: 0;
}
.ak-footer__logo-link:hover,
.ak-footer__logo-link:focus,
.ak-footer__logo-link:active { outline: none; }
.ak-footer__logo-img {
  display: block;
  height: 60px;
  width: auto;
  margin: 0 auto;
  object-fit: contain;
  transition: none;
}
.ak-footer__logo-link:hover .ak-footer__logo-img { filter: none; transform: none; }
.ak-footer__copy { font-size: .78rem; color: var(--ak-muted); line-height: 1.3; margin: 0; text-align: center; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .ak-hero { padding: 60px 16px 40px; min-height: 400px; }
  .ak-hero__title { font-size: 2rem; }
  .ak-search-box { padding: 4px 4px 4px 14px; }
  .ak-btn { padding: 9px 16px; font-size: .82rem; }
  .ak-alpha-bar { padding: 16px 12px; gap: 10px; }
  .ak-alpha-bar__label { font-size: .8rem; letter-spacing: .18em; }
  .ak-alpha-btn { padding: 3px 6px; font-size: .85rem; }
  .ak-alpha-sep { margin: 0 1px; }
  .ak-main { padding: 32px 16px 60px; }
  .ak-dream-detail__hero { padding: 24px; }
  .ak-dream-detail__title { font-size: 1.7rem; }
  .ak-promo-strip { padding: 24px; }
  .ak-promo-strip .ak-btn { margin-left: 0; }
}