:root{
  /* DARK tło, jasne karty */
  --bg:        #0b1220;
  --panel:     #0f1624;
  --panel-2:   #121c2b;
  --text:      #e6edf3;
  --muted:     #94a3b8;
  --border:    #1f2937;

  --accent:    #06b6d4;     /* turkus */
  --accent-2:  #22d3ee;     /* hover */
  --gold:      #facc15;     /* złoto */

  --radius: 14px;
  --shadow: 0 6px 22px rgba(0,0,0,.35);
}

/* ====== bazowe ====== */
*{ box-sizing: border-box; }
html,body{
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
a{
  color: var(--accent);
  text-decoration: none;
}
a:hover{
  color: var(--accent-2);
  text-decoration: underline;
}

.container{ max-width:1150px; margin:0 auto; padding:16px; }

/* ====== nagłówek ====== */
header.card{
  background: rgba(10,16,27,.7);
  border: 1px solid #0e1a2a;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:12px; border:1px solid transparent;
  font-weight:600; cursor:pointer; transition:.2s ease;
}
.btn-primary{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#071019;
}
.btn-primary:hover{ filter: brightness(1.1); }
.btn-soft{ background:#0f1a2b; border:1px solid #162032; color:var(--text); }
.btn-soft:hover{ background:#13233a; }

/* LOGO – księżyc (crescent): zamień logo-dot -> logo-moon w HTML */
.logo-moon{
  position:relative; width:22px; height:22px; border-radius:50%;
  background:#ffe68a; box-shadow:0 0 14px rgba(250,204,21,.25) inset, 0 0 12px rgba(250,204,21,.2);
  display:inline-block;
}
.logo-moon::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: var(--bg);
  transform: translateX(6px) scale(.88);
}

/* ====== layout ====== */
.grid{ display:grid; grid-template-columns: 1fr 320px; gap:16px; }
@media (max-width: 960px){ .grid{ grid-template-columns:1fr; } .content{order:1} .sidebar{order:2} }

.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.small.muted{ color: var(--muted); }
.badge{
  padding:.35rem .6rem; border-radius:10px;
  background:#0f1a2b; color:#e6eaf2; font-size:.85rem; border:1px solid #162032;
}
.badge:hover{ background:#13233a; }

/* ====== ranking: nagłówek/legenda + wiersze ====== */
.table-header{
  display:grid; grid-template-columns:44px 1fr 90px 90px 76px; gap:12px;
  align-items:center; padding:10px 12px; margin:6px 0 12px;
  background: linear-gradient(180deg, var(--panel-2), #0f1726);
  border:1px solid #243046; border-radius:12px;
  color:#cfd8e3; font-weight:600; letter-spacing:.3px;
}
.table-header .center{ text-align:right; }

/* lista */
.rank-list{ display:flex; flex-direction:column; gap:10px; }

/* pojedynczy wiersz */
.rank-row{
  display:grid; grid-template-columns:44px 1fr 90px 90px 76px; gap:12px;
  align-items:center; padding:12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.rank-row:hover{ background: var(--panel-2); border-color:#263247; }
.rank-row .place{ text-align:center; font-weight:800; color:#cfe3ff; }
.rank-row .title a{ color:#ffffff; font-weight:700; }  /* biała nazwa */
.rank-row .desc{ font-size:.92rem; color:var(--muted); margin-top:4px; }
.rank-row .col-right{ text-align:right; }

/* TOP-3 – ramki + kolor nazwy */
.rank-row.top1{
  border:2px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(250,204,21,.18) inset, 0 0 18px rgba(250,204,21,.10);
}
.rank-row.top2{
  border:2px solid #cbd5e1;
  box-shadow: 0 0 0 1px rgba(203,213,225,.15) inset, 0 0 14px rgba(203,213,225,.06);
}
.rank-row.top3{
  border:2px solid #cd7f32;
  box-shadow: 0 0 0 1px rgba(205,127,50,.16) inset, 0 0 14px rgba(205,127,50,.08);
}
.rank-row.top1 .place{ color: var(--gold); }
.rank-row.top2 .place{ color: #cbd5e1; }
.rank-row.top3 .place{ color: #cd7f32; }
.rank-row.top1 .title a{ color: var(--gold); }
.rank-row.top2 .title a{ color: #e2e8f0; }
.rank-row.top3 .title a{ color: #f7b787; }

/* co-drugi wiersz subtelnie inny obrys (poza TOP-3) */
.rank-list .rank-row:nth-of-type(even):not(.top1):not(.top2):not(.top3){
  border-color:#243046;
}

/* małe pastylki (np. „strona”) */
.badge.chip{ background:#0f1a2b; border:1px solid #162032; color:#d7e2f2; }

/* ====== sidebar ====== */
.blackcard{ background:#0d131f; border-color:#0d131f; color:#e5ecf6; }
.blackcard a{ color:#e2e8f0; text-decoration:underline; }
.mini-list{ margin:0; padding-left:18px; }
.mini-list li+li{ margin-top:6px; }
.blacklist{ margin:0; padding-left:18px; }
.blacklist li{ margin:6px 0; }

/* Faza Księżyca */
.moon-widget{ display:flex; align-items:center; gap:12px; }
.moon{ position:relative; width:64px; height:64px; }
.moon .disc{
  width:100%; height:100%; border-radius:50%;
  background:radial-gradient(120% 120% at 30% 30%, #fff7dc, #e9dfb8 60%, #d3c79b);
}
.moon .shade{
  position:absolute; inset:0; border-radius:50%;
  --p: calc(var(--phase, .5));
  background: radial-gradient(50% 50% at calc(50% + (var(--p)*40px - 20px)) 50%, rgba(0,0,0,.65) 0 60%, transparent 61%);
  mix-blend-mode:multiply;
}
.moon-info{ color: var(--muted); }

/* ====== karty bloga ====== */
.home-blog{ margin-top:20px; }
.cards-posts{ display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.post-card{
  overflow:hidden; border-radius:16px;
  background:#0f192b; border:1px solid #243046; box-shadow: var(--shadow);
}
.post-card .thumb-wrap{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.post-card .thumb{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transition:transform .35s ease; }
.post-card .thumb.placeholder{ background:linear-gradient(135deg,#1a2540,#172033); }
.post-card:hover .thumb{ transform:scale(1.04); }

/* czytelny overlay tytułu */
.post-card .overlay-title{
  position:absolute; left:12px; right:12px; bottom:12px;
  color:#fff; font-weight:700; line-height:1.25; text-decoration:none;
  padding:10px 12px; border-radius:10px;
  background: linear-gradient(180deg, rgba(6,10,18,.15), rgba(6,10,18,.65));
  backdrop-filter: blur(3px) saturate(120%);
}
.post-card .inner{ padding:14px 16px; }
.post-card .inner .small{ color:#b8c3d4; }
.post-card .inner p{ color:#e8eef8; }
.post-card .btn-read{
  display:inline-block; margin-top:6px; padding:6px 10px; border-radius:10px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#071019; font-weight:700;
}

/* ====== formularze (front) ====== */
.review-form .form-row{ margin-bottom:10px; display:grid; gap:6px; }
.input, select, textarea{
  background:#0f1a2b; border:1px solid #162032; color:var(--text);
  border-radius:10px; padding:.6rem .8rem; width:100%;
}
.input:focus, select:focus, textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(6,182,212,.15);
}
.review-form button{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:none; color:#071019; font-weight:700; padding:10px 14px; border-radius:12px;
  cursor:pointer; box-shadow:0 6px 16px rgba(12,10,60,.15);
}
.review-form button:hover{ filter:brightness(1.05); }

/* ====== artykuły ====== */
.post article{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow: var(--shadow); }
.post h1{ margin:8px 0 10px; }
.post-content{ font-size:18px; line-height:1.75; color:#dfe6f0; }
.post-content h2{ margin-top:22px; margin-bottom:8px; }
.post-content h3{ margin-top:14px; margin-bottom:6px; }
.post-content img{ max-width:100%; height:auto; border-radius:12px; border:1px solid var(--border); display:block; margin:10px auto; }
.post-content ul{ padding-left:22px; }
.post-content li{ margin:6px 0; }

/* ====== cookiebar ====== */
.cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  background:#111827; color:#fff; padding:14px 18px;
  box-shadow:0 -8px 24px rgba(0,0,0,.25);
}
.cookiebar a{ color:#b3c7ff; text-decoration:underline; }
.cookiebar .badge{ background:#30384d; border:none; color:#fff; }
.cookiebar .badge.primary{ background:linear-gradient(90deg,#6d5efc,#1b77ff); }
@media (max-width:640px){ .cookiebar{ flex-direction:column; align-items:flex-start; gap:10px; } }

/* ====== mobile drobiazgi ====== */
html,body{ overflow-x:hidden; }

/* ====== panel (adm) minimalne poprawki widoczności ====== */
.table-wrap .ranking{ table-layout:auto; }
.table-wrap .ranking td pre,
.table-wrap .ranking .cell-pre{ white-space:pre-wrap; word-break:break-word; margin:0; }
.table-wrap .ranking td.small{ max-width:460px; }
.inline-edit{ background:#0f192b; border:1px solid #243046; border-radius:10px; padding:8px; margin-top:6px; }
.inline-edit textarea{ width:100%; min-height:80px; }
.inline-edit .row{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; align-items:end; }
@media (max-width:900px){ .inline-edit .row{ grid-template-columns:1fr; } }

/* ========= RANKING: odstępy, TOP-3, naprzemienne ramki ========= */
.rank-list{ display:flex; flex-direction:column; gap:12px; }       /* większy gap */
.rank-row{
  display:grid; grid-template-columns:44px 1fr 90px 90px 76px; gap:12px;
  align-items:center; padding:14px; border-radius:14px;
  background:var(--panel); border:1px solid var(--border);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.rank-row + .rank-row{ margin-top:0; } /* gap kontroluje odstęp */
.rank-row:hover{ background:var(--panel-2); border-color:#273247; }

/* TOP 1–3: ramka koloru „medalu” + subtelna poświata */
.rank-row.top1{ border:2px solid var(--gold); box-shadow:0 0 0 2px rgba(250,204,21,.10) inset, 0 0 18px rgba(250,204,21,.10); }
.rank-row.top2{ border:2px solid #cbd5e1; box-shadow:0 0 0 2px rgba(203,213,225,.08) inset; }
.rank-row.top3{ border:2px solid #cd7f32; box-shadow:0 0 0 2px rgba(205,127,50,.08) inset; }
.rank-row.top1 .place{ color:var(--gold); }
.rank-row.top2 .place{ color:#cbd5e1; }
.rank-row.top3 .place{ color:#cd7f32; }

/* co drugi wiersz: delikatnie jaśniejsza ramka */
.rank-row:nth-of-type(even){ border-color:#243046; }

/* nazwy wróżek: mocniejszy kontrast, bez podkreślenia */
.rank-row .title a{ color:#fff; font-weight:700; text-decoration:none; }
.rank-row .title a:hover{ color:#dfe7ff; }

/* „legenda” – pasek nagłówków tabeli */
.table-header{
  display:grid; grid-template-columns:44px 1fr 90px 90px 76px; gap:12px;
  align-items:center; padding:10px 12px; margin:0 0 12px 0;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid #223049; border-radius:12px; color:#cfd8e3; font-weight:600;
}
.table-header .center{ text-align:right; }

/* ========= BLOG: poprawa czytelności kart ========= */
.cards-posts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.post-card{
  overflow:hidden; border-radius:14px;
  background:var(--panel); border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.post-card .thumb-wrap{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.post-card .thumb{ width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .35s ease; }
.post-card:hover .thumb{ transform:scale(1.04); }
.post-card .overlay-title{
  position:absolute; left:12px; right:12px; bottom:12px;
  background:rgba(0,0,0,.55); color:#fff; padding:10px 12px; border-radius:10px; font-weight:700;
}
.post-card .inner{ padding:14px 16px; }
.post-card .inner .small{ color:#a8b3c6; }
.post-card .inner p{ color:#e7ecf5; }

/* ========= OPINIE: większa czytelność, gwiazdki w kolorze ========= */
.reviews .review{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; margin:12px 0;
}
.reviews .meta{ color:#9fb0c7; font-size:.92rem; margin-top:4px; }
.reviews .stars{ font-size:18px; color:#f6c62f; text-shadow:0 0 8px rgba(246,198,47,.2); }

/* odpowiedzi (wątek) */
.replies{ margin:10px 0 0 0; padding-left:12px; border-left:3px solid #223049; }
.reply{ background:var(--panel-2); border:1px solid #223049; border-radius:10px; padding:10px 12px; margin:8px 0; }

/* ========= HEADER: prosta ikona „półksiężyc” ========= */
.logo-mark{
  position:relative; width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffe68a, #b48a0e 65%, #7c5f00);
  box-shadow:0 0 0 2px rgba(180,138,14,.15), 0 0 18px rgba(250,204,21,.2);
  display:inline-block; overflow:hidden;
}
.logo-mark::after{ /* cień tworzący kształt księżyca */
  content:""; position:absolute; right:-4px; top:-2px; width:60%; height:120%;
  background:var(--bg); border-radius:50%;
}

/* ========= ROTUJĄCY CYTAT ========= */
.quote-rotator{ color:#dfe7f6; font-style:italic; }

/* ========= PRZEŁĄCZNIK MOTYWU ========= */
.theme-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .75rem; border-radius:10px; border:1px solid #203049;
  color:#cfe9f3; background:#0f1a2b; cursor:pointer; font-weight:600;
}
.theme-toggle:hover{ background:#13233a; }

/* MOTYW JASNY (nadpisanie zmiennych) */
:root[data-theme="light"]{
  --bg:#f6f7fb; --panel:#ffffff; --panel-2:#f2f5fb; --text:#0e1320; --muted:#5b6678; --border:#d9e0ea;
}
:root[data-theme="light"] body{ color:var(--text); background:var(--bg); }
:root[data-theme="light"] .rank-row{ background:var(--panel); border-color:#e0e6f0; }
:root[data-theme="light"] .rank-row:hover{ background:#f7f9fd; border-color:#d6dfec; }
:root[data-theme="light"] .table-header{ background:#eef3fb; border-color:#d6dfec; color:#475167; }
:root[data-theme="light"] .post-card{ background:#fff; border-color:#e5ebf4; }
:root[data-theme="light"] .post-card .inner p{ color:#3a4356; }
:root[data-theme="light"] .blackcard{ background:#0f1624; color:#fff; }


/* ===== NAV: desktop -> mobile hamburger ===== */
.header-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--text); text-decoration:none;}
.header-accent{height:2px; margin-top:10px; background:linear-gradient(90deg, var(--accent), var(--gold)); border-radius:999px;}

.main-nav{display:flex; gap:.6rem; align-items:center;}
.nav-toggle{
  display:none; position:relative; width:36px; height:36px; border-radius:10px;
  background:#0f1a2b; border:1px solid #162032; cursor:pointer;
}
.nav-toggle span{
  position:absolute; left:8px; right:8px; height:2px; background:#cfe3ff; border-radius:4px;
}
.nav-toggle span:nth-child(1){ top:11px; }
.nav-toggle span:nth-child(2){ top:17px; }
.nav-toggle span:nth-child(3){ top:23px; }

/* mobile menu panel */
@media (max-width: 860px){
  .nav-toggle{display:inline-block;}
  .main-nav{
    position:fixed; top:60px; right:16px; left:16px;
    display:block; padding:10px; border-radius:12px;
    background:#0f1624; border:1px solid #223049; box-shadow:0 10px 28px rgba(0,0,0,.35);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s ease;
  }
  .main-nav a, .main-nav button{ display:block; width:100%; text-align:left; margin:6px 0; }
  .main-nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  body.nav-open{ overflow:hidden; }
}


/* ===== RANKING: mobile-first kolumny ===== */
@media (max-width: 760px){
  /* nagłówek "tabeli" – pokazujemy tylko #, Wróżka, Ocena */
  .table-header{
    grid-template-columns: 36px 1fr 64px;
  }
  .table-header > :nth-child(3){ display:none; } /* ukryj "Strona" */
  .table-header > :nth-child(5){ display:none; } /* ukryj "Opinie" */
  .table-header .center{ text-align:right; }

  /* wiersz: miejsce | nazwa (opis pod spodem) | ocena */
  .rank-row{
    grid-template-columns: 36px 1fr 64px;
    gap:10px; padding:12px;
  }
  .rank-row .col-right{ text-align:right; }
  /* ukryj kapsułkę "strona" i "opinie" – przeniesiemy je do małej linii opisu */
  .rank-row > .col-right:nth-of-type(3),
  .rank-row > .col-right:nth-of-type(4){ display:none; }

  /* opis krótszy na 2–3 linie */
  .rank-row .desc{
    margin-top:2px; font-size:.95rem; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* pastylka "strona" – pokaż w opisie, jeśli chcesz: */
  .rank-row .desc .badge{ display:inline-block; margin-left:6px; vertical-align:baseline; }

  /* większe klikalne tytuły */
  .rank-row .title a{ font-size:1.05rem; }

  /* top ramki – cień mniej agresywny na małych */
  .rank-row.top1, .rank-row.top2, .rank-row.top3{ box-shadow:none; }
}

/* mniejsze telefony – ogranicz szerokości i cienie */
@media (max-width: 380px){
  .rank-row{ padding:10px; border-radius:12px; }
  .table-header{ padding:8px 10px; border-radius:12px; }
}


@media (max-width: 760px){
  .cards-posts{ grid-template-columns: 1fr; gap:16px; }
  .post-card .overlay-title{ font-size:1.02rem; line-height:1.25; }
  .post-card .inner{ padding:12px 14px; }
  .post-card .inner p{ font-size:1rem; }
}


:root[data-theme="light"] .btn-soft{ background:#eef3fb; border-color:#d9e0ea; color:#0e1320; }
:root[data-theme="light"] .badge{ background:#eef3fb; border-color:#d9e0ea; color:#0e1320; }
:root[data-theme="light"] .blackcard{ background:#0e1726; color:#e6edf3; }
:root[data-theme="light"] a{ color:#0f6cc8; }
:root[data-theme="light"] a:hover{ color:#0c57a2; }
:root[data-theme="light"] .rank-row .title a{ color:#0e1320; }
:root[data-theme="light"] .rank-row.top1 .title a{ color:#7a5a00; }

/* iOS safe-area for sticky header */
header.card{ padding-top: max(12px, env(safe-area-inset-top)); }
html, body{ overflow-x: hidden; }


/* ===================== */
/* NAV: hamburger & mobile sheet */
/* ===================== */
.nav-desktop { display:flex; gap:12px; }
.nav-toggle{
  display:none; position:relative; width:42px; height:36px;
  border:1px solid #203049; border-radius:10px; background:#0f1a2b; cursor:pointer;
}
.nav-toggle span{position:absolute; left:9px; right:9px; height:2px; background:#cfe3ff; border-radius:2px; transition:.2s}
.nav-toggle span:nth-child(1){ top:11px; }
.nav-toggle span:nth-child(2){ top:17px; }
.nav-toggle span:nth-child(3){ top:23px; }
body.menu-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-mobile{
  position: fixed; top:68px; right:12px; left:12px; z-index:50;
  background: var(--panel); border:1px solid var(--border); border-radius:14px;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  padding:10px; display:grid; gap:6px;
}
.nav-mobile a{ display:block; padding:12px; border-radius:10px; background:#0f1a2b; color:var(--text); text-decoration:none; }
.nav-mobile a:hover{ background:#13233a; }
@media (max-width: 880px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:inline-block; }
}

/* Fixa „szarego” paska w jasnym motywie */
:root[data-theme="light"] header.card{
  background:#ffffff; border-color:#d9e0ea;
}

/* ===================== */
/* RANKING: mobilna siatka i obcięte kolumny */
/* ===================== */
/* nazwy kolumn – wariant mobilny: tylko #, Wróżka, Ocena */
@media (max-width: 760px){
  .table-header{
    grid-template-columns:36px 1fr 72px;
  }
  .table-header .hide-sm{ display:none !important; } /* dodaj klasę hide-sm do "Strona" i "Opinie" w nagłówku */
  .rank-row{
    grid-template-columns:36px 1fr 72px;
    padding:12px;
  }
  /* ukryj kolumny pomocnicze (dodaj klasy do odpowiednich komórek) */
  .rank-row .col-site,
  .rank-row .col-opinions{ display:none; }
  .rank-row .place{ font-size:1.05rem; }
  .rank-row .desc{ font-size:.95rem; line-height:1.45; }
}
/* delikatniejsze, większe promienie na mobile by nie „obcinało” */
@media (max-width:760px){
  .rank-row{ border-radius:16px; }
}

/* odstępy między kartami (by nie „sklejało się”) */
.rank-list{ gap:14px; }

/* ===================== */
/* OPINIE – czytelny mobile, normalny font dla <pre>, mniejszy padding */
/* ===================== */
.reviews .review{ padding:12px 12px; }
.reviews .content pre{
  white-space:pre-wrap; word-break:break-word; font-family:inherit; font-size:1rem; line-height:1.6;
}
.replies{ border-left:3px solid #223049; margin-left:4px; }

/* gwiazdki – trochę większe na małych ekranach */
@media (max-width:760px){
  .reviews .stars{ font-size:20px; }
}

/* ===================== */
/* BLOG CARDS – overlay tytułu nie wychodzi poza kadr */
/* ===================== */
.post-card .overlay-title{ font-size: clamp(0.95rem, 2.4vw, 1.05rem); }
.post-card .thumb-wrap{ border-bottom:1px solid var(--border); }

/* ===================== */
/* SIDEBAR: jasny motyw – kontrast i pola wejściowe */
/* ===================== */
:root[data-theme="light"] .blackcard{
  background:#0f1624; color:#eef3ff; border-color:#0f1624;
}
:root[data-theme="light"] .card{
  background:#ffffff; border-color:#d9e0ea;
}
:root[data-theme="light"] .input, 
:root[data-theme="light"] select, 
:root[data-theme="light"] textarea{
  background:#ffffff; color:#0e1320; border-color:#cfd8e3;
}
:root[data-theme="light"] .badge,
:root[data-theme="light"] .btn-soft{ background:#f2f6ff; color:#0e1320; border-color:#d9e0ea; }
:root[data-theme="light"] .post-card .inner .small{ color:#5b6678; }

/* Widget: Ascendent/Descendent i Reklama – ramki w jasnym */
.widget, .adcard{
  background: var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px;
}
:root[data-theme="light"] .widget, 
:root[data-theme="light"] .adcard{
  background:#fff; border-color:#d9e0ea;
}

/* ===================== */
/* OGÓLNE MOBILE: kontener i odstępy, brak ucięć */
/* ===================== */
.container{ padding-left:16px; padding-right:16px; }
@media (max-width: 960px){
  .grid{ grid-template-columns: 1fr; }
  .sidebar{ order:2; }
  .content{ order:1; }
}

/* Body – zablokuj przewijanie w tle, gdy menu otwarte */
body.menu-open{ overflow:hidden; }

/* przycisk kontaktu w mobilnym menu – pełna szerokość */
.nav-mobile .btn{ width:100%; justify-content:center; }

/* ===================== */
/* Drobne kontrasty w jasnym trybie */
/* ===================== */
:root[data-theme="light"] .rank-row.top1 { box-shadow: 0 0 0 2px rgba(250,204,21,.08) inset; }
:root[data-theme="light"] .table-header { background:#f4f7fe; }

/* === FIX 0: upewnij się, że [hidden] naprawdę ukrywa === */
[hidden]{ display:none !important; }

/* === NAV – stan domyślny (desktop) === */
.nav-desktop{ display:flex; gap:12px; }
.nav-toggle{ display:none; }        /* przycisk hamburgera ukryty na desktopie */
.nav-mobile{ display:none; }        /* panel mobilny NIGDY nie pokazuje się na desktopie */

/* === NAV – mobile ≤ 880px === */
@media (max-width:880px){
  .nav-desktop{ display:none !important; }       /* znikają przyciski w rzędzie */
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:36px; border:1px solid #203049; border-radius:10px;
    background:#0f1a2b; cursor:pointer; position:relative;
  }
  .nav-toggle span{ position:absolute; left:9px; right:9px; height:2px; background:#cfe3ff; border-radius:2px; transition:.2s }
  .nav-toggle span:nth-child(1){ top:11px; } .nav-toggle span:nth-child(2){ top:17px; } .nav-toggle span:nth-child(3){ top:23px; }
  body.menu-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* panel pokazujemy tylko, gdy NIE ma atrybutu [hidden] */
  .nav-mobile:not([hidden]){
    position:fixed; top:68px; left:12px; right:12px; z-index:50;
    display:grid; gap:6px; padding:10px;
    background:var(--panel); border:1px solid var(--border); border-radius:14px;
    box-shadow:0 18px 44px rgba(0,0,0,.35);
  }
  .nav-mobile a{ display:block; padding:12px; border-radius:10px; background:#0f1a2b; color:var(--text); text-decoration:none; }
  .nav-mobile a:hover{ background:#13233a; }
  body.menu-open{ overflow:hidden; }     /* blokada przewijania tła przy otwartym menu */
}

/* === Light mode – header był „szary” === */
:root[data-theme="light"] header.card{ background:#fff; border-color:#d9e0ea; }

/* === RANKING – mobilny układ 3 kolumn (#, Wróżka, Ocena) === */
@media (max-width:760px){
  .table-header{ grid-template-columns:36px 1fr 72px; }
  .table-header .hide-sm{ display:none !important; }
  .rank-row{ grid-template-columns:36px 1fr 72px; padding:12px; border-radius:16px; }
  .rank-row .col-site, .rank-row .col-opinions{ display:none !important; }
  .rank-row .desc{ font-size:.95rem; line-height:1.45; }
}

/* HEADER – spójny układ lewo/prawo */
.header-inner{ display:flex; align-items:center; gap:16px; }
.logo{ display:flex; align-items:center; gap:.6rem; }

/* na desktopie: widoczne linki po prawej; hamburger ukryty */
.nav-desktop{ margin-left:auto; display:flex; gap:10px; }
.js-nav-toggle{ margin-left:auto; display:none; }

/* [hidden] faktycznie ukrywa panel mobilny */
[hidden]{ display:none !important; }

/* mobile ≤ 900px: tylko hamburger po prawej, nav znika */
@media (max-width:900px){
  .nav-desktop{ display:none !important; }
  .js-nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:12px;
    background:#0f1a2b; border:1px solid #203049; cursor:pointer;
  }
  .js-nav-toggle span{ width:20px; height:2px; background:#cfe3ff; border-radius:2px; position:relative; }
  .js-nav-toggle span+span{ margin-top:4px; }

  /* panel mobilny widoczny tylko bez [hidden] */
  .nav-mobile:not([hidden]){
    position:fixed; top:64px; left:12px; right:12px; z-index:60;
    display:grid; gap:6px; padding:10px;
    background:var(--panel); border:1px solid var(--border); border-radius:14px;
    box-shadow:0 18px 44px rgba(0,0,0,.35);
  }
  body.menu-open{ overflow:hidden; }
}

/* light – czysty header i widgety */
:root[data-theme="light"] header.card{ background:#fff; border-color:#d9e0ea; }
:root[data-theme="light"] .widget, 
:root[data-theme="light"] .adcard,
:root[data-theme="light"] .card{ background:#fff; border-color:#d9e0ea; }
:root[data-theme="light"] .input, 
:root[data-theme="light"] select, 
:root[data-theme="light"] textarea{ background:#fff; color:#0e1320; border-color:#cfd8e3; }

/* === RESET nawigacji – nadpisz stare reguły === */
[hidden]{ display:none !important; }

.header-inner{ display:flex; align-items:center; gap:16px; }
.logo{ display:flex; align-items:center; gap:.6rem; }

/* Desktop: linki po prawej, hamburger ukryty */
.nav-desktop{ margin-left:auto; display:flex; gap:10px; }
.js-nav-toggle{ margin-left:auto; display:none; }

/* Panel mobilny NIGDY nie pokazuje się poza mobile */
.nav-mobile{ display:none; }

/* Mobile ≤ 900px */
@media (max-width:900px){
  .nav-desktop{ display:none !important; }

  /* Hamburger – jeden, prosty wariant */
  .js-nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:12px;
    background:#0f1a2b; border:1px solid #203049; cursor:pointer; position:relative;
  }
  .js-nav-toggle span{
    position:absolute; left:10px; right:10px; height:2px;
    display:block; background:#cfe3ff; border-radius:2px; transition:.2s;
  }
  .js-nav-toggle span:nth-child(1){ top:12px; }
  .js-nav-toggle span:nth-child(2){ top:19px; }
  .js-nav-toggle span:nth-child(3){ top:26px; }
  body.menu-open .js-nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.menu-open .js-nav-toggle span:nth-child(2){ opacity:0; }
  body.menu-open .js-nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Panel mobilny – pokazuj TYLKO gdy nie ma [hidden] */
  .nav-mobile:not([hidden]){
    position:fixed; top:64px; left:12px; right:12px; z-index:60;
    display:grid; gap:8px; padding:12px;
    background:var(--panel); border:1px solid var(--border); border-radius:14px;
    box-shadow:0 18px 44px rgba(0,0,0,.35);
  }
  .nav-mobile a{ display:block; padding:12px; border-radius:10px; background:#0f1a2b; color:var(--text); text-decoration:none; }
  .nav-mobile a:hover{ background:#13233a; }

  body.menu-open{ overflow:hidden; }
}

/* Light – header nie szarzeje */
:root[data-theme="light"] header.card{ background:#fff; border-color:#d9e0ea; }


/* 1) ukrywanie atrybutem [hidden] zawsze i wszędzie */
[hidden]{ display: none !important; }

/* 2) domyślnie – na desktopie hamburger ukryty, mobile menu wyłączone */
.nav-toggle{ display:none; }
.nav-mobile{ display:none; } /* będzie włączane tylko na mobile i tylko gdy usuniemy [hidden] */

/* 3) mobile: gdy menu NIE ma atrybutu [hidden], pokaż je */
@media (max-width: 880px){
  .nav-desktop{ display:none !important; }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:36px; border:1px solid #203049; border-radius:10px;
    background:#0f1a2b; cursor:pointer; position:relative; z-index:1001;
  }
  .nav-toggle span{
    position:absolute; left:9px; right:9px; height:2px; background:#cfe3ff;
    border-radius:2px; transition:.2s;
  }
  .nav-toggle span:nth-child(1){ top:11px; }
  .nav-toggle span:nth-child(2){ top:17px; }
  .nav-toggle span:nth-child(3){ top:23px; }
  body.menu-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* klucz: menu tylko gdy BRAK [hidden] */
  .nav-mobile:not([hidden]){
    position: fixed; top:68px; left:12px; right:12px; z-index:1000;
    display: grid; gap: 6px; padding:10px;
    background: var(--panel); border:1px solid var(--border); border-radius:14px;
    box-shadow: 0 18px 44px rgba(0,0,0,.35);
  }
  .nav-mobile a{ display:block; padding:12px; border-radius:10px; background:#0f1a2b; color:var(--text); text-decoration:none; }
  .nav-mobile a:hover{ background:#13233a; }

  /* zablokuj scroll tła przy otwartym menu */
  body.menu-open{ overflow:hidden; }
}