/*
    =========================================================
    UI / THEME (identyczny styl jak w Twoim „ładnym” przykładzie)
    =========================================================
*/
:root{
    --bg: #0b0f17;
    --card: #111827;
    --card2:#0f172a;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --line: rgba(148,163,184,.18);
    --accent:#60a5fa;
    --good:#fbbf24;
    --danger:#fb7185;
    --shadow: 0 12px 40px rgba(0,0,0,.35);
    --radius: 18px;
}

*{ box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(96,165,250,.18), transparent 60%),
    radial-gradient(900px 600px at 95% 20%, rgba(251,191,36,.12), transparent 55%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  
  /* KLUCZOWA ZMIANA TUTAJ: */
  display: block; /* Zmieniamy z flex na block */
}

/* Kontener strony */
.wrap{
    width: min(980px, 100%);
    margin: 0 auto; /* To wycentruje posty pod paskiem */
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 14px 28px; /* Dodajemy padding tutaj zamiast w body */
}

/* Feed postów: odstęp między kartami (żeby nie były „sklejone”) */
#posts{
    display:flex;
    flex-direction:column;
    gap: 16px;
}

/* Karta posta */
.card{
    background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 28%),
    var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
}

/* Layout: wiersz 1 (media + content) */
.post{
    display:grid;
    grid-template-columns: 1.3fr 1fr;
}

/* Na telefonie: jedna kolumna */
@media (max-width: 880px){
    .post{ grid-template-columns: 1fr; }
}

.media{
    background: var(--card2);
    border-right: 1px solid var(--line);
    min-height: 320px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 16px;
}

@media (max-width: 880px){
    .media{ border-right:0; border-bottom:1px solid var(--line); }
}

.media img{
    width:100%;
    height:100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    display:block;
}

.content{
    padding: 18px 18px 16px;
    display:flex;
    flex-direction:column;
    gap: 12px;
}

.header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;
}

.title{
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin:0;
}

.meta{
    color: var(--muted);
    font-size: 13px;
    margin-top: 6px;
}

.badge{
    font-size: 12px;
    color: rgba(229,231,235,.95);
    background: rgba(96,165,250,.14);
    border: 1px solid rgba(96,165,250,.28);
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
    margin-top: 2px;
    user-select:none;
}

.desc{
    margin:0;
    color: rgba(229,231,235,.92);
    line-height: 1.45;
}

/* ===== Rating box (obramowanie jak w demo) ===== */
.ratingBox{
    display:flex;
    flex-direction:column;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.02);
}

.ratingTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.stars{
    display:flex;
    align-items:center;
    gap: 6px;
    user-select:none;
}

.starBtn{
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.22);
    background: rgba(255,255,255,.02);
    cursor:pointer;
    display:grid;
    place-items:center;
    transition: transform .08s ease, border-color .15s ease, background .15s ease;
    padding:0;
}
.starBtn:hover{
    transform: translateY(-1px);
    border-color: rgba(251,191,36,.55);
    background: rgba(251,191,36,.08);
}

.star{
    font-size: 18px;
    line-height: 1;
    color: rgba(148,163,184,.7);
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

.star.filled{ color: var(--good); }
.star.preview{ color: rgba(251,191,36,.65); }

.stats{
    display:flex;
    align-items:baseline;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
}

.avg{
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: .2px;
}

.hint{
    color: var(--muted);
    font-size: 13px;
    line-height: 1.3;
    margin:0;
}

.actions{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn{
    border: 1px solid rgba(148,163,184,.22);
    background: rgba(255,255,255,.02);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 12px;
    cursor:pointer;
    transition: border-color .15s ease, transform .08s ease, background .15s ease;
    font-weight: 600;
    font-size: 13px;
}
.btn:hover{
    transform: translateY(-1px);
    border-color: rgba(96,165,250,.6);
    background: rgba(96,165,250,.08);
}
.btn.danger:hover{
    border-color: rgba(251,113,133,.7);
    background: rgba(251,113,133,.08);
}

/* ===== Comments (dolny wiersz na całą szerokość) ===== */
.comments{
    padding: 16px 18px 18px;
    border-top: 1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap: 14px;
}

.commentsHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    flex-wrap:wrap;
}

.commentsHeader h2{
    margin:0;
    font-size: 16px;
    font-weight: 800;
}

.count{
    color: var(--muted);
    font-size: 13px;
}

.commentList{
    display:flex;
    flex-direction:column;
    gap: 10px;
    margin:0;
    padding:0;
    list-style:none;
}

.comment{
    border: 1px solid var(--line);
    background: rgba(255,255,255,.02);
    border-radius: 14px;
    padding: 12px 12px 10px;
    display:flex;
    flex-direction:column;
    gap: 6px;
}

.commentTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.author{
    font-weight: 800;
    font-size: 13px;
}

.time{
    color: var(--muted);
    font-size: 12px;
}

.commentText{
    margin:0;
    color: rgba(229,231,235,.92);
    line-height: 1.45;
    font-size: 14px;
    white-space: pre-wrap;
}

.form{
    display:flex;
    flex-direction:column;
    gap: 10px;
    border-top: 1px dashed rgba(148,163,184,.25);
    padding-top: 14px;
}

/* Styl dla tagu kategorii */
.categoryTag {
    display: inline-block;
    
    padding: 2px 8px;
    background: rgba(96, 165, 250, 0.1); /* Delikatny niebieski tło */
    color: var(--accent); /* Jasnoniebieski tekst */
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.author-row {
    display: block; /* Wymusza nową linię */
    margin-top: 3px; /* Dodaje trochę oddechu pod kategorią */
    color: var(--muted); /* Zachowuje przygaszony kolor tekstu */
}

/* Dodatkowo, żeby tag kategorii nie był za blisko tytułu */
.categoryTag {
    margin-bottom: 3px;
}

/* Podkomentarz - wcięcie z lewej */
.comment.is-child {
    margin-left: 30px;
    border-left: 3px solid var(--accent); /* Niebieska linia z boku */
    background: rgba(96, 165, 250, 0.03);
}

/* Stylizacja przycisku "Odpowiedz" - mniejszy i po prawej */
.replyBtn {
    align-self: flex-end; /* Przesunięcie do prawej krawędzi */
    width: fit-content;    /* Szerokość dopasowana do tekstu */
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--accent);
    font-size: 11px;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 4px;      /* Zmniejszony margines górny */
    margin-bottom: 4px;   /* Dodany margines dolny dla oddechu */
    transition: all 0.2s;
}

.replyBtn:hover {
    background: rgba(96, 165, 250, 0.2);
    border-color: var(--accent);
    transform: translateX(-2px); /* Delikatny efekt ruchu w lewo przy hoverze */
}

/* Kontener na odpowiedzi i formularz pod nimi */
.replies-container {
    display: flex;
    flex-direction: column;
}

/* Ukryty formularz odpowiedzi (pokazuje się po kliknięciu 'Odpowiedz') */
.reply-form {
    display: none;
    margin-top: 10px;
    margin-left: 30px;
}

textarea{
    width: 100%;
    min-height: 84px;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.22);
    background: rgba(15,23,42,.45);
    color: var(--text);
    outline: none;
    font-size: 14px;
    line-height: 1.4;
}
textarea:focus{
    border-color: rgba(96,165,250,.65);
    box-shadow: 0 0 0 4px rgba(96,165,250,.12);
}

.row{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items:center;
    justify-content:space-between;
}

.status{
    color: var(--muted);
    font-size: 13px;
}

.status.error{ color: var(--danger); }

/* Mały loader na końcu feedu */
.feedHint{
    text-align:center;
    color: var(--muted);
    font-size: 13px;
    padding: 10px 0 6px;
}

/* Podkomentarz wewnątrz głównej ramki */
.comment.is-child {
    margin-left: 10px; /* Mniejszy margines, bo jesteśmy już w środku */
    margin-top: 10px;
    border: none; /* Usuwamy zewnętrzną ramkę podkomentarza */
    border-left: 2px solid var(--accent); /* Zostawiamy tylko pasek z boku */
    background: rgba(255, 255, 255, 0.03); /* Bardzo delikatne tło */
    padding: 8px 12px;
}

/* Kontener na odpowiedzi wewnątrz głównego komentarza */
.replies-container {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Ukrywamy listę komentarzy i formularz domyślnie */
.comments-content {
    display: none; 
    flex-direction: column;
    gap: 14px;
}

/* Klasa, którą dodamy przez JS, żeby pokazać komentarze */
.comments-content.is-visible {
    display: flex;
    margin-top: 10px;
}
/* Styl dla przycisku rozwijania (dymek) */
.toggle-comments-btn {
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--accent);
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.toggle-comments-btn:hover {
    background: rgba(96, 165, 250, 0.2);
    transform: translateY(-1px);
}

.toggle-comments-btn .icon {
    font-size: 16px;
}
.read-more-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    margin-left: 5px;
}
.read-more-link:hover {
    text-decoration: underline;
}  

/* ----------------- NAVBAR STYLES --------------------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  background: rgba(17, 24, 39, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);

  padding: 12px 0;
  margin-bottom: 0;

  transition: transform 0.3s ease-in-out;
}

.nav-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.navbar.nav-hidden {
  transform: translateY(-100%);
}

body {
  padding-top: 74px;
}

.logo {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 1px;
}

/* Dropdown języka */
.lang-dropdown {
  position: relative;
  cursor: pointer;
  font-size: 14px;
  margin: 0 15px;
  user-select: none;
  z-index: 1001;
}

.lang-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card2, #1a1a1a);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--line, #333);
  transition: 0.2s;
  color: var(--text, white);
}

.lang-selected:hover {
  border-color: var(--accent, #60a5fa);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: #121212;
  border: 1px solid var(--line, #333);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  display: none;
  overflow: hidden;
}

.lang-search-wrapper {
  padding: 10px;
  border-bottom: 1px solid var(--line, #333);
  background: #181818;
}

#langSearch {
  width: 100%;
  background: #000;
  border: 1px solid var(--line, #333);
  border-radius: 6px;
  padding: 7px 10px;
  color: white;
  outline: none;
  font-size: 13px;
}

#langSearch:focus {
  border-color: var(--accent, #60a5fa);
}

.lang-list {
  max-height: 250px;
  overflow-y: auto;
}

.lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  text-decoration: none;
  color: var(--text, #eee);
  transition: 0.2s;
  border-bottom: 1px solid rgba(255,255,255,0.02);
}

.lang-item:hover {
  background: rgba(96, 165, 250, 0.1);
  color: var(--accent, #60a5fa);
}

.lang-item.hidden {
  display: none;
}

.lang-code-active {
  text-transform: uppercase;
  font-weight: 800;
}

.arrow {
  font-size: 9px;
  opacity: 0.5;
}

.flag {
  font-size: 1.2em;
}

.search-filter-btn {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
    transition: all .2s ease;
}

.search-filter-btn:hover {
    border-color: var(--accent);
    background: rgba(96,165,250,.08);
}

/* Wyszukiwarka */
.search-box {
  flex: 1;
  max-width: 400px;
  position: relative;
}

.search-box input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 15px 10px 40px;
  color: var(--text);
  outline: none;
  transition: all 0.2s;
}

.search-box input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
}

/* Menu Użytkownika */
.user-menu {
  display: flex;
  align-items: center;
}

.user-logged {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.nav-logout-link {
  margin-left: 10px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.nav-moderation-link {
  margin-left: 10px;

  display: inline-flex;
  align-items: center;
  gap: 5px;

  font-size: 12px;
  font-weight: 700;

  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.nav-moderation-link:hover {
  color: var(--accent);
}

.nav-logout-link:hover {
  color: var(--accent);
}

.user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
}

.btn-login-icon {
  display: none;
}

.btn-login-text {
  display: inline;
}

.avatar {
  width: 38px;
  height: 38px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  box-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
}

.btn-login {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 18px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;

  /* DODAJ TE LINIE */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}


html, body {
  overflow-x: hidden;
}


.notif-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
  margin-right: 15px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.notif-btn:hover { opacity: 1; }

/* Czerwona kropka powiadomień */
.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 999px;
  border: 2px solid var(--bg);
}

.add-post-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  margin-right: 15px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
  text-decoration: none;
}

.add-post-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(96, 165, 250, 0.3);
  filter: brightness(1.1);
}

.add-post-btn .icon {
  font-size: 18px;
}


.comment-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}

.comment-vote-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.comment-vote-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(96, 165, 250, 0.3);
    background: rgba(96, 165, 250, 0.08);
    color: var(--accent);
    cursor: pointer;
    font-weight: 900;
    line-height: 1;
}

.comment-vote-btn:hover {
    background: rgba(96, 165, 250, 0.18);
    border-color: var(--accent);
}

.comment-score {
    min-width: 24px;
    text-align: center;
    font-weight: 800;
    color: var(--text);
    font-size: 13px;
}

.comments-loading,
.comments-empty,
.comments-error,
.comment-login-info {
    color: var(--muted);
    font-size: 13px;
    padding: 10px 0;
}

.comments-error {
    color: var(--danger);
}

.expert-badge {
    display: inline;
    margin-left: 5px;
    padding: 0;
    background: none;
    border: none;
    color: var(--good);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.reputation-vote-btn.is-self-disabled {
    opacity: 0.25;
    cursor: not-allowed;
    filter: grayscale(1);
}

.author-pill .expert-badge {
    margin-left: 4px;
}

.post-reputation-actions {
    display: flex;
    justify-content: flex-start;
    padding: 0 18px 16px;
}

.reputation-vote-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.reputation-vote-btn {
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.025);
    color: var(--muted);
    padding: 7px 11px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 900;
    font-size: 12px;
    transition: all 0.18s ease;
}

.reputation-vote-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--accent);
    color: var(--text);
    background: rgba(96, 165, 250, 0.10);
}

.reputation-vote-btn.vote-plus.is-selected {
    border-color: rgba(34, 197, 94, 0.75);
    background: rgba(34, 197, 94, 0.16);
    color: #86efac;
}

.reputation-vote-btn.vote-minus.is-selected {
    border-color: rgba(251, 113, 133, 0.75);
    background: rgba(251, 113, 133, 0.14);
    color: #fda4af;
}

.reputation-vote-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.reputation-vote-btn.is-selected:disabled {
    opacity: 1;
}

.comment-actions-row .reputation-vote-box {
    margin-top: 2px;
}

.comment-language {
    margin-left: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.replies-hidden {
    display: none;
    flex-direction: column;
    gap: 5px;
}

.toggle-replies-btn {
    align-self: flex-start;
    margin-top: 8px;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    transition: all 0.2s;
}

.toggle-replies-btn:hover {
    background: rgba(96, 165, 250, 0.16);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.replyBtn-bottom {
    align-self: flex-end;
    margin-top: 8px;
}

/* =========================================================
PROFILE PAGE
========================================================= */

.profile-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-header-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 28%),
        var(--card);

    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);

    padding: 24px;

    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.profile-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.08);
}

.profile-avatar-placeholder {
    width: 140px;
    height: 140px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 48px;
    font-weight: 900;

    background: var(--accent);
    color: white;
}

.profile-main-info {
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.profile-name-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.profile-display-name {
    margin: 0;
    font-size: 32px;
    font-weight: 900;
}

.profile-username {
    color: var(--muted);
    font-size: 15px;
    margin-top: 4px;
}

.profile-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-meta-item {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--line);

    padding: 8px 12px;

    border-radius: 999px;

    color: var(--muted);
    font-size: 13px;
}

.profile-top-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    width: fit-content;

    background: rgba(251,191,36,.08);
    border: 1px solid rgba(251,191,36,.22);

    color: #fde68a;

    padding: 10px 14px;

    border-radius: 999px;

    font-weight: 700;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.profile-left-column,
.profile-right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 28%),
        var(--card);

    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);

    padding: 20px;
}

.profile-section-title {
    margin-top: 0;
    margin-bottom: 18px;

    font-size: 20px;
    font-weight: 800;
}

.profile-bio {
    line-height: 1.6;
    white-space: pre-wrap;
}

.profile-bio-language {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 10px;
}

.profile-empty {
    color: var(--muted);
    font-size: 14px;
}

.profile-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-contact-item {
    border: 1px solid var(--line);
    border-radius: 12px;

    padding: 12px;
}

.profile-contact-label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
}

.profile-contact-value {
    word-break: break-word;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.profile-stat-box {
    border: 1px solid var(--line);
    border-radius: 14px;

    padding: 16px;

    text-align: center;

    background: rgba(255,255,255,.02);
}

.profile-stat-value {
    font-size: 28px;
    font-weight: 900;
}

.profile-stat-label {
    color: var(--muted);
    font-size: 13px;
    margin-top: 6px;
}

.profile-competence-placeholder,
.profile-activity-placeholder,
.profile-following-placeholder {
    border: 2px dashed rgba(255,255,255,.08);

    border-radius: 14px;

    min-height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--muted);
}

.profile-activity-list.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

@media (max-width: 900px) {

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-header-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-name-row {
        flex-direction: column;
        align-items: center;
    }

    .profile-meta-row {
        justify-content: center;
    }

    .profile-top-category {
        margin: 0 auto;
    }

}


/* =========================================================
PROFILE COMPETENCE WHEEL MVP
========================================================= */

.competence-wheel-section {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: center;
}

.competence-wheel {
    position: relative;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, var(--card) 0 38%, transparent 39%),
        conic-gradient(
            rgba(96,165,250,.75) 0deg 22.5deg,
            rgba(96,165,250,.10) 22.5deg 360deg
        );
    border: 1px solid var(--line);
    box-shadow: inset 0 0 30px rgba(0,0,0,.35);
}

.competence-wheel-center {
    position: absolute;
    inset: 34%;
    border-radius: 50%;
    background: var(--card2);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.competence-center-title {
    font-size: 13px;
    font-weight: 900;
}

.competence-center-subtitle {
    font-size: 12px;
    color: var(--muted);
    margin-top: 3px;
}

.competence-ring-item {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, var(--card2) 0 58%, transparent 59%),
        conic-gradient(
            var(--good) 0 var(--score-percent),
            rgba(148,163,184,.16) var(--score-percent) 100%
        );
    border: 1px solid rgba(255,255,255,.10);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 900;
}

.competence-ring-item span {
    background: var(--card2);
    border-radius: 999px;
    padding: 2px 4px;
}

.competence-ring-1  { left: 108px; top: -8px; }
.competence-ring-2  { left: 158px; top: 4px; }
.competence-ring-3  { left: 202px; top: 32px; }
.competence-ring-4  { left: 228px; top: 78px; }
.competence-ring-5  { left: 228px; top: 132px; }
.competence-ring-6  { left: 202px; top: 178px; }
.competence-ring-7  { left: 158px; top: 206px; }
.competence-ring-8  { left: 108px; top: 218px; }
.competence-ring-9  { left: 58px; top: 206px; }
.competence-ring-10 { left: 14px; top: 178px; }
.competence-ring-11 { left: -12px; top: 132px; }
.competence-ring-12 { left: -12px; top: 78px; }
.competence-ring-13 { left: 14px; top: 32px; }
.competence-ring-14 { left: 58px; top: 4px; }
.competence-ring-15 { left: 82px; top: 32px; }
.competence-ring-16 { left: 134px; top: 32px; }

.competence-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.competence-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255,255,255,.02);
}

.competence-name {
    font-size: 13px;
    color: var(--text);
}

.competence-score {
    font-weight: 900;
    color: var(--good);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .competence-wheel-section {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .competence-list {
        width: 100%;
    }
}

/* =========================================================
PROFILE COMPETENCE BARS
========================================================= */

.competence-bars {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.competence-bar-row {
    display: grid;
    grid-template-columns: minmax(155px, 1.2fr) minmax(90px, 1fr) 46px;
    gap: 10px;
    align-items: center;

    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 10px;

    background: rgba(255,255,255,.02);
}

.competence-bar-label {
    font-size: 12px;
    color: var(--text);
    line-height: 1.2;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.competence-bar-track {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;

    background: rgba(148,163,184,.16);
    border: 1px solid rgba(148,163,184,.12);
}

.competence-bar-fill {
    height: 100%;
    border-radius: 999px;

    background: linear-gradient(
        90deg,
        rgba(96,165,250,.65),
        rgba(251,191,36,.85)
    );
}

.competence-bar-score {
    text-align: right;
    font-size: 12px;
    font-weight: 900;
    color: var(--good);
}

@media (max-width: 600px) {
    .competence-bar-row {
        grid-template-columns: 1fr 70px 42px;
        gap: 7px;
        padding: 7px;
    }

    .competence-bar-label {
        font-size: 11px;
    }
}

/* =========================================================
PROFILE ACTIVITY
========================================================= */

.profile-activity-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.profile-activity-tab {
    border: 1px solid var(--line);
    background: rgba(255,255,255,.02);
    color: var(--muted);
    padding: 7px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
}

.profile-activity-tab:hover {
    border-color: var(--accent);
    color: var(--text);
}

.profile-activity-tab.active {
    background: rgba(96,165,250,.14);
    border-color: rgba(96,165,250,.45);
    color: var(--accent);
}

.profile-activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-activity-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;

    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
}

.profile-activity-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(96,165,250,.10);
    border: 1px solid rgba(96,165,250,.22);
}

.profile-activity-body {
    min-width: 0;
}

.profile-activity-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.profile-activity-type {
    font-size: 12px;
    font-weight: 900;
    color: var(--accent);
}

.profile-activity-date {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

.profile-activity-title {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.profile-activity-excerpt {
    margin-top: 6px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.9;
    overflow-wrap: anywhere;
}

.profile-activity-meta {
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
}

.profile-activity-list {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 6px;
}

.profile-activity-list::-webkit-scrollbar {
    width: 8px;
}

.profile-activity-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.03);
    border-radius: 999px;
}

.profile-activity-list::-webkit-scrollbar-thumb {
    background: rgba(96,165,250,.35);
    border-radius: 999px;
}

.profile-activity-list::-webkit-scrollbar-thumb:hover {
    background: rgba(96,165,250,.55);
}

/* =========================================================
PROFILE FOLLOWING
========================================================= */

.profile-following-list {
    display: flex;
    flex-direction: column;
    gap: 10px;

    max-height: 420px;
    overflow-y: auto;
    padding-right: 6px;
}

.profile-following-item {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;

    align-items: center;

    padding: 10px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: rgba(255,255,255,.02);

    text-decoration: none;
    color: inherit;

    transition: all 0.18s ease;
}

.profile-following-item:hover {
    border-color: rgba(96,165,250,.45);
    background: rgba(96,165,250,.06);

    transform: translateY(-1px);
}

.profile-following-avatar {
    width: 54px;
    height: 54px;
}

.profile-following-avatar-img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.10);
}

.profile-following-avatar-fallback {
    width: 100%;
    height: 100%;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: var(--accent);

    color: white;

    font-weight: 900;
    font-size: 18px;
}

.profile-following-body {
    min-width: 0;
}

.profile-following-name {
    font-size: 14px;
    font-weight: 900;

    overflow-wrap: anywhere;
}

.profile-following-username {
    margin-top: 2px;

    font-size: 12px;
    color: var(--muted);
}

.profile-following-top-category {
    margin-top: 5px;

    font-size: 11px;
    color: var(--good);
    font-weight: 700;
}

.profile-empty {
    color: var(--muted);
    font-size: 13px;
    padding: 10px 0;
}

.profile-following-list::-webkit-scrollbar {
    width: 8px;
}

.profile-following-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.03);
    border-radius: 999px;
}

.profile-following-list::-webkit-scrollbar-thumb {
    background: rgba(96,165,250,.35);
    border-radius: 999px;
}

.profile-following-list::-webkit-scrollbar-thumb:hover {
    background: rgba(96,165,250,.55);
}


/* =========================================================
NAVBAR PROFILE LINK
========================================================= */

.navbar-profile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.navbar-profile-link:hover .user-name {
    color: var(--accent);
}

.navbar-profile-link:hover .avatar {
    transform: translateY(-1px);
    filter: brightness(1.08);
}
.navbar-mobile-user-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.navbar-mobile-user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 10px;

  width: 210px;

  background: rgba(15, 23, 42, 0.98);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);

  overflow: hidden;
  z-index: 1200;
}

.navbar-mobile-user-menu.is-open {
  display: block;
}

.navbar-mobile-user-menu a {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;

  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;

  border-bottom: 1px solid rgba(255,255,255,.04);
}

.navbar-mobile-user-menu a:last-child {
  border-bottom: none;
}

.navbar-mobile-user-menu a:hover {
  background: rgba(96,165,250,.10);
  color: var(--accent);
}

/* =========================================================
LINKI DO PROFILI
========================================================= */

.profile-link {
    text-decoration: none;
    color: inherit;
}

.profile-link:hover {
    color: var(--accent);
}

.author-pill.profile-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.author-pill.profile-link:hover {
    border-color: rgba(96,165,250,.55);
    background: rgba(96,165,250,.16);
}

/* =========================================================
LINKI PROFILI W KOMENTARZACH
========================================================= */

.commentTop .profile-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.commentTop .profile-link:hover {
    color: var(--accent);
}

/* =========================================================
MAŁE AVATARY UŻYTKOWNIKÓW
========================================================= */

.small-user-avatar,
.small-user-avatar-fallback {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: 0 0 24px;
}

.small-user-avatar {
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--card2);
}

.small-user-avatar-fallback {
    display: inline-grid;
    place-items: center;
    background: var(--accent);
    color: white;
    font-size: 11px;
    font-weight: 900;
}

.comment-avatar {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
}

.commentTop .author.profile-link {
    gap: 6px;
}

.author-pill.profile-link {
    gap: 6px;
}

/* =========================================================
NAVBAR AVATAR IMAGE
========================================================= */

.navbar-avatar-img {
    object-fit: cover;
    padding: 0;
    background: var(--card2);
    border: 1px solid rgba(255,255,255,.12);
}

/* =========================================================
NAVBAR MOBILE
========================================================= */

@media (max-width: 600px) {
  .nav-container {
    gap: 10px;
    padding: 0 10px;
    flex-wrap: nowrap;
    min-width: 0;
    justify-content: space-between;
  }

  .logo {
    font-size: 18px;
    flex-shrink: 0;
    letter-spacing: 0.4px;
    margin-left: 3px;
  }


  .search-panel-trigger {
    flex-shrink: 0;
  }

  .search-filter-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 999px;
    font-size: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .search-filter-btn:hover {
    background: rgba(96,165,250,.10);
  }

  .search-filter-text {
    display: none;
  }

  .lang-dropdown {
    margin: 0;
    flex-shrink: 0;
  }

  .lang-selected {
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #active-flag {
    font-size: 22px;
    line-height: 1;
  }

  .lang-selected:hover {
    background: rgba(96,165,250,.10);
  }

  .lang-code-active,
  .lang-selected .arrow {
    display: none;
  }

  .btn-login {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-size: 20px;
    box-shadow: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-login:hover {
    background: rgba(96,165,250,.10);
    color: var(--accent);
  }

  .btn-login-icon {
    display: inline;
  }

  .btn-login-text {
    display: none;
  }

  .add-post-btn {
    display: none;
  }

  .navbar-profile-link {
    display: none;
  }

  .user-name {
    display: none;
  }

  .nav-logout-link {
    display: none;
  }

  .nav-moderation-link {
    display: none;
  }

  .navbar-mobile-user-toggle {
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 999px;
    margin-right: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;
  }

  .navbar-mobile-user-toggle:hover {
    background: rgba(96,165,250,.10);
  }

  .navbar-mobile-user-toggle .avatar,
  .navbar-mobile-user-toggle .navbar-avatar-img {
    width: 38px;
    height: 38px;
    min-width: 38px;
    max-width: 38px;
    min-height: 38px;
    max-height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    object-fit: cover;
  }

  .user-logged {
    position: relative;
    gap: 0;
  }

  .lang-menu {
    right: 0;
    width: min(220px, calc(100vw - 20px));
  }
}

/* =========================================================
SKRACANIE DŁUGICH POSTÓW W FEEDZIE
========================================================= */

.home-post-body-wrap {
    position: relative;
    max-height: 760px;
    overflow: hidden;
}

.home-post-body-wrap.is-expanded {
    max-height: none;
    overflow: visible;
}

.home-post-body-wrap.is-not-overflowing {
    max-height: none;
    overflow: visible;
}

.home-post-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 150px;

    background: linear-gradient(
        to bottom,
        rgba(17, 24, 39, 0),
        rgba(17, 24, 39, 0.92) 58%,
        rgba(17, 24, 39, 1)
    );

    pointer-events: none;
}

.home-post-show-more {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);

    z-index: 2;

    border: 1px solid rgba(96, 165, 250, 0.45);
    background: rgba(96, 165, 250, 0.18);
    color: var(--text);

    padding: 10px 18px;
    border-radius: 999px;

    font-size: 13px;
    font-weight: 900;

    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,.35);

    transition: all 0.18s ease;
}

.home-post-show-more:hover {
    background: rgba(96, 165, 250, 0.28);
    border-color: var(--accent);
    transform: translateX(-50%) translateY(-1px);
}

.home-post-body-wrap.is-expanded .home-post-fade,
.home-post-body-wrap.is-expanded .home-post-show-more,
.home-post-body-wrap.is-not-overflowing .home-post-fade,
.home-post-body-wrap.is-not-overflowing .home-post-show-more {
    display: none;
}

@media (max-width: 600px) {
    .home-post-body-wrap {
        max-height: 620px;
    }

    .home-post-fade {
        height: 120px;
    }

    .home-post-show-more {
        bottom: 14px;
        padding: 9px 15px;
        font-size: 12px;
    }
}

/* =========================================================
KLIKANY TYTUŁ POSTA
========================================================= */

.home-post-title-link {
    color: inherit;
    text-decoration: none;
}

.home-post-title-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* =========================================================
STRONA POJEDYNCZEGO POSTA
========================================================= */

.single-post-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.single-post-back-link {
    width: fit-content;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.single-post-back-link:hover {
    color: var(--accent);
}

.single-post-card {
    margin-bottom: 20px;
}

.single-post-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 900;
}

.single-post-canvas {
    overflow: visible;
}

@media (max-width: 600px) {
    .single-post-title {
        font-size: 22px;
    }
}

/* =========================================================
LIGHTBOX ZDJĘĆ
========================================================= */

.home-media-clickable {
    cursor: zoom-in;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(0, 0, 0, 0.86);
    backdrop-filter: blur(8px);
}

.image-lightbox.is-visible {
    display: flex;
}

.image-lightbox-img {
    max-width: min(96vw, 1400px);
    max-height: 92vh;

    object-fit: contain;

    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,.65);
}

.image-lightbox-close {
    position: fixed;
    top: 18px;
    right: 18px;

    z-index: 5001;

    width: 42px;
    height: 42px;

    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);

    background: rgba(15, 23, 42, 0.82);
    color: var(--text);

    font-size: 22px;
    font-weight: 900;

    cursor: pointer;
}

.image-lightbox-close:hover {
    border-color: var(--accent);
    background: rgba(96, 165, 250, 0.24);
}

body.lightbox-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .image-lightbox {
        padding: 10px;
    }

    .image-lightbox-img {
        max-width: 96vw;
        max-height: 88vh;
        border-radius: 10px;
    }

    .image-lightbox-close {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
        font-size: 20px;
    }
}

/* =========================================================
UDOSTĘPNIANIE POSTÓW
========================================================= */

.post-reputation-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px 16px;
    flex-wrap: wrap;
}

.share-post-btn {
    border: 1px solid rgba(96,165,250,.25);
    background: rgba(96,165,250,.10);
    color: var(--accent);

    padding: 7px 12px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.share-post-btn:hover {
    border-color: var(--accent);
    background: rgba(96,165,250,.18);
}

.share-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;

    transform: translateX(-50%) translateY(20px);

    opacity: 0;

    background: rgba(15,23,42,.96);
    color: white;

    border: 1px solid rgba(96,165,250,.35);

    padding: 12px 18px;
    border-radius: 999px;

    z-index: 6000;

    transition: all .22s ease;
}

.share-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =========================================================
FULLSCREEN FILMÓW
========================================================= */

.home-video-local-wrap {
    position: relative;
    width: 100%;
}

.home-video-local {
    width: 100%;
    display: block;
}

.video-fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;

    z-index: 3;

    width: 34px;
    height: 34px;

    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);

    background: rgba(15,23,42,.78);
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
    line-height: 1;

    cursor: pointer;
    backdrop-filter: blur(6px);
}

.video-fullscreen-btn:hover {
    border-color: var(--accent);
    background: rgba(96,165,250,.25);
}

@media (max-width: 600px) {
    .video-fullscreen-btn {
        top: 7px;
        right: 7px;
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}

/* =========================================================
UDOSTĘPNIANIE KOMENTARZY I ODPOWIEDZI
========================================================= */

.comment-left-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.comment-share-btn {
    border: 1px solid rgba(96,165,250,.25);
    background: rgba(96,165,250,.10);
    color: var(--accent);

    padding: 6px 9px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;
}

.comment-share-btn:hover {
    border-color: var(--accent);
    background: rgba(96,165,250,.18);
}

/* =========================================================
PODŚWIETLENIE LINKOWANEGO KOMENTARZA
========================================================= */

.comment.is-linked-target {
    border-color: rgba(96,165,250,.95);
    box-shadow:
        0 0 0 1px rgba(96,165,250,.55),
        0 0 28px rgba(96,165,250,.28);
    background: rgba(96,165,250,.08);
    animation: linkedCommentPulse 1.15s ease-in-out 0s 3;
}

.comment.is-linked-parent {
    border-color: rgba(96,165,250,.45);
    background: rgba(96,165,250,.035);
}

.comment.is-child.is-linked-target {
    border-left-color: rgba(96,165,250,.95);
}

@keyframes linkedCommentPulse {
    0% {
        box-shadow:
            0 0 0 1px rgba(96,165,250,.45),
            0 0 18px rgba(96,165,250,.18);
    }

    50% {
        box-shadow:
            0 0 0 2px rgba(96,165,250,.8),
            0 0 34px rgba(96,165,250,.38);
    }

    100% {
        box-shadow:
            0 0 0 1px rgba(96,165,250,.45),
            0 0 18px rgba(96,165,250,.18);
    }
}

/* =========================================================
AKTYWNOŚĆ PROFILU - KLIKALNE LINKI
========================================================= */

.profile-activity-link {
    color: inherit;
    text-decoration: none;
}

.profile-activity-link:hover {
    color: inherit;
    text-decoration: none;
}

.profile-activity-item.profile-activity-link {
    cursor: pointer;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.profile-activity-item.profile-activity-link:hover {
    background: rgba(96,165,250,.06);
    border-color: rgba(96,165,250,.35);
    transform: translateY(-1px);
}

/* =========================================================
SEARCH PANEL
========================================================= */

.search-panel {
    display: none;

    position: fixed;

    top: 74px;
    left: 0;
    right: 0;

    z-index: 900;

    padding: 12px 14px;

    background: transparent;

    transition: transform 0.3s ease-in-out;
}

.search-panel.is-open {
    display: block;
}

.search-panel-inner {
    width: min(980px, 100%);
    margin: 0 auto;

    padding: 14px;
    padding-bottom: calc(60px + env(safe-area-inset-bottom));

    max-height: calc(100vh - 98px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    background: rgba(11,15,23,.95);
    backdrop-filter: blur(10px);

    border: 1px solid var(--line);
    border-radius: 0 0 18px 18px;

    box-shadow: var(--shadow);
}

.search-panel-inner::-webkit-scrollbar {
    width: 8px;
}

.search-panel-inner::-webkit-scrollbar-track {
    background: rgba(255,255,255,.03);
    border-radius: 999px;
}

.search-panel-inner::-webkit-scrollbar-thumb {
    background: rgba(96,165,250,.35);
    border-radius: 999px;
}

.search-panel-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(96,165,250,.55);
}

.search-panel-placeholder {
    padding: 30px;

    text-align: center;

    border: 1px dashed var(--line);
    border-radius: 14px;

    color: var(--muted);
}

.search-panel.nav-hidden {
    transform: translateY(-100%);
}


.search-filters-grid {
    display: grid;
    gap: 16px;
}

.search-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-filter-group label {
    font-size: 14px;
    font-weight: 700;
}

.search-filter-group input,
.search-filter-group select {
    padding: 10px 12px;

    border-radius: 10px;

    border: 1px solid var(--line);

    background: rgba(255,255,255,.05);

    color: var(--text);
}

/* =========================================================
SEARCH FILTERS - DARK SELECT DROPDOWNS
========================================================= */

#filterCategory,
#filterPostType {
    color-scheme: dark;
    background: var(--card2);
    color: var(--text);
}

#filterCategory option,
#filterPostType option {
    background: var(--card2);
    color: var(--text);
}

.search-panel-actions {
    display: flex;
    gap: 10px;

    margin-top: 18px;
}

.search-apply-btn,
.search-clear-btn {
    padding: 10px 14px;

    border-radius: 10px;

    cursor: pointer;

    border: 1px solid var(--line);

    color: var(--text);

    background: rgba(255,255,255,.05);
}

.search-apply-btn:hover,
.search-clear-btn:hover {
    border-color: var(--accent);
}

.search-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 12px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: rgba(255,255,255,.05);

    cursor: pointer;
}

.search-checkbox-row input {
    width: auto;
    cursor: pointer;
}

.search-checkbox-row span {
    color: var(--text);
    font-size: 14px;
}

/* =========================================================
REPUTONODE NOTIFICATIONS
========================================================= */

.rn-notice-host {
    position: fixed;
    top: 86px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(430px, calc(100vw - 28px));
    pointer-events: none;
}

.rn-notice {
    pointer-events: auto;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%),
        var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(0,0,0,.45);
    padding: 14px 14px 13px;
    animation: rnNoticeIn 0.22s ease-out;
}

.rn-notice-warning {
    border-color: rgba(251, 191, 36, 0.45);
    background:
        linear-gradient(180deg, rgba(251,191,36,.08), transparent 45%),
        var(--card);
}

.rn-notice-error {
    border-color: rgba(251, 113, 133, 0.45);
    background:
        linear-gradient(180deg, rgba(251,113,133,.08), transparent 45%),
        var(--card);
}

.rn-notice-success {
    border-color: rgba(96, 165, 250, 0.45);
    background:
        linear-gradient(180deg, rgba(96,165,250,.08), transparent 45%),
        var(--card);
}

.rn-notice-icon {
    font-size: 24px;
    line-height: 1;
    margin-top: 1px;
}

.rn-notice-body {
    flex: 1;
    min-width: 0;
}

.rn-notice-title {
    font-weight: 900;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 5px;
}

.rn-notice-message {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.rn-notice-list {
    margin: 7px 0 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.rn-notice-close {
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
}

.rn-notice-close:hover {
    color: var(--text);
}

@keyframes rnNoticeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 600px) {
    .rn-notice-host {
        top: 72px;
        left: 10px;
        right: 10px;
        transform: none;
        width: auto;
    }

    .rn-notice {
        padding: 12px;
        border-radius: 14px;
    }
}

/* =========================================================
PROFILE ACTIVITY - NEW POST HIGHLIGHT
========================================================= */

.profile-activity-new-post-highlight {
    border-color: rgba(96,165,250,.95) !important;
    background: rgba(96,165,250,.10) !important;
    box-shadow:
        0 0 0 1px rgba(96,165,250,.55),
        0 0 28px rgba(96,165,250,.30);
    animation: profileNewPostPulse 1.15s ease-in-out 0s 3;
}

@keyframes profileNewPostPulse {
    0% {
        box-shadow:
            0 0 0 1px rgba(96,165,250,.45),
            0 0 18px rgba(96,165,250,.18);
    }

    50% {
        box-shadow:
            0 0 0 2px rgba(96,165,250,.85),
            0 0 36px rgba(96,165,250,.42);
    }

    100% {
        box-shadow:
            0 0 0 1px rgba(96,165,250,.45),
            0 0 18px rgba(96,165,250,.18);
    }
}

/* =========================================================
PROFILE DRAFTS
========================================================= */

.profile-draft-item {
    border-style: dashed;
    background:
        linear-gradient(180deg, rgba(251,191,36,.045), transparent 38%),
        rgba(255,255,255,.02);
}

.profile-draft-item .profile-activity-icon {
    background: rgba(251,191,36,.10);
    border-color: rgba(251,191,36,.28);
}

.profile-draft-item .profile-activity-type {
    color: var(--good);
}

.profile-draft-hint {
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px;
    font-style: italic;
}


/* =========================================================
REPUTONODE MODAL
========================================================= */

.rn-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
}

.rn-modal-backdrop.is-visible {
    display: flex;
}

.rn-modal {
    width: min(430px, 100%);

    display: flex;
    gap: 14px;
    align-items: flex-start;

    background:
        linear-gradient(180deg, rgba(255,255,255,.045), transparent 34%),
        var(--card);

    border: 1px solid var(--line);
    border-radius: 18px;

    box-shadow: 0 24px 80px rgba(0,0,0,.62);

    padding: 18px;
}

.rn-modal-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: rgba(251, 113, 133, 0.10);
    border: 1px solid rgba(251, 113, 133, 0.28);

    font-size: 22px;
}

.rn-modal-body {
    min-width: 0;
    flex: 1;
}

.rn-modal-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
}

.rn-modal-text {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
}

.rn-modal-muted {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.rn-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.rn-modal-danger-btn {
    border-color: rgba(251, 113, 133, 0.45);
    color: #fecdd3;
    background: rgba(251, 113, 133, 0.10);
}

.rn-modal-danger-btn:hover {
    border-color: rgba(251, 113, 133, 0.80);
    background: rgba(251, 113, 133, 0.18);
}

/* =========================================================
PROFILE DRAFT DELETE ACTION
========================================================= */

.profile-draft-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.profile-draft-delete-btn {
    border: 1px solid rgba(251, 113, 133, 0.36);
    background: rgba(251, 113, 133, 0.08);
    color: #fecdd3;

    padding: 6px 10px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.profile-draft-delete-btn:hover {
    background: rgba(251, 113, 133, 0.16);
    border-color: rgba(251, 113, 133, 0.72);
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .rn-modal {
        padding: 14px;
        border-radius: 16px;
    }

    .rn-modal-actions {
        justify-content: stretch;
    }

    .rn-modal-actions .btn {
        flex: 1;
    }
}

/* =========================================================
PROFILE POST DELETE ACTION
========================================================= */

.profile-post-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-activity-main-link {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    color: inherit;
    text-decoration: none;
}

.profile-post-activity-item .profile-activity-body {
    flex: 1 1 auto;
    min-width: 0;
}

.profile-post-activity-item .profile-activity-title {
    overflow-wrap: anywhere;
    word-break: normal;
}

.profile-post-delete-btn {
    flex: 0 0 auto;
}


.profile-activity-main-link:hover .profile-activity-title {
    color: var(--accent);
}

.profile-post-delete-btn {
    align-self: center;

    border: 1px solid rgba(251, 113, 133, 0.36);
    background: rgba(251, 113, 133, 0.08);
    color: #fecdd3;

    padding: 6px 10px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.profile-post-delete-btn:hover {
    background: rgba(251, 113, 133, 0.16);
    border-color: rgba(251, 113, 133, 0.72);
    transform: translateY(-1px);
}

/* =========================================================
DELETED POST DETAIL
========================================================= */

.deleted-post-card {
    overflow: hidden;
}

.deleted-post-message {
    display: flex;
    gap: 14px;
    align-items: flex-start;

    padding: 22px 18px;

    border-bottom: 1px solid var(--line);

    background:
        linear-gradient(180deg, rgba(251,191,36,.08), transparent 55%),
        rgba(255,255,255,.015);
}

.deleted-post-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: rgba(251,191,36,.10);
    border: 1px solid rgba(251,191,36,.30);

    font-size: 24px;
}

.deleted-post-body {
    min-width: 0;
    flex: 1;
}

.deleted-post-title {
    margin: 0;
    color: var(--text);
    font-size: 20px;
    line-height: 1.25;
    font-weight: 900;
}

.deleted-post-text {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.deleted-post-meta {
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 600px) {
    .profile-post-activity-item {
        align-items: stretch;
    }

    .profile-activity-main-link {
        width: 100%;
    }

    .profile-post-delete-btn {
        align-self: flex-end;
    }

    .deleted-post-message {
        padding: 16px 12px;
    }

    .deleted-post-title {
        font-size: 17px;
    }
}

/* =========================================================
MODERATION HIDDEN POST DETAIL
========================================================= */

.moderation-hidden-post-card {
    border-color: rgba(251, 113, 133, 0.30);
}


.moderation-hidden-post-message {
    border-bottom: 0;

    background:
        linear-gradient(
            180deg,
            rgba(251, 113, 133, 0.09),
            transparent 58%
        ),
        rgba(255, 255, 255, 0.015);
}


.moderation-hidden-post-icon {
    color: #fecdd3;

    background:
        rgba(251, 113, 133, 0.10);

    border-color:
        rgba(251, 113, 133, 0.35);
}

/* =========================================================
ACCOUNT DELETE
========================================================= */

.account-delete-section {
    border-top-color: rgba(251, 113, 133, 0.35);
}

.account-delete-open-btn {
    margin-top: 12px;
    border-color: rgba(251, 113, 133, 0.45);
    background: rgba(251, 113, 133, 0.08);
    color: #fecdd3;
}

.account-delete-open-btn:hover {
    border-color: rgba(251, 113, 133, 0.80);
    background: rgba(251, 113, 133, 0.16);
}

.account-delete-modal {
    width: min(560px, 100%);
}

.account-delete-form {
    margin-top: 16px;
}

/* =========================================================
ACCOUNT DELETE PENDING
========================================================= */

.account-pending-delete-card {
    border-color: rgba(251, 191, 36, 0.45);
    background:
        linear-gradient(180deg, rgba(251,191,36,.08), transparent 45%),
        var(--card);
}

.account-pending-delete-box {
    margin: 22px 0;
    padding: 18px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 16px;
    background: rgba(251, 191, 36, 0.08);

    display: flex;
    gap: 14px;
    align-items: center;
}

.account-pending-delete-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.35);
    font-size: 24px;
}

.account-pending-delete-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.account-pending-delete-date {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
}

.account-delete-cancel-btn {
    border-color: rgba(96,165,250,.45);
    background: rgba(96,165,250,.10);
    color: var(--text);
}

/* =========================================================
ACCOUNT STATE BANNER
========================================================= */

.account-state-banner {
    width: min(980px, 100%);
    margin: 16px auto;
    padding: 0 14px;
}

.account-state-banner-content {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(251,191,36,.35);
    background:
        linear-gradient(
            180deg,
            rgba(251,191,36,.10),
            rgba(251,191,36,.04)
        );
}

.account-state-banner-icon {
    font-size: 28px;
    flex: 0 0 auto;
}

.account-state-banner-text {
    flex: 1;
    min-width: 0;
}

.account-state-banner-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 4px;
}

.account-state-banner-description {
    color: var(--muted);
    line-height: 1.45;
    font-size: 14px;
}

.account-state-banner-actions {
    flex: 0 0 auto;
}

.account-state-banner-btn {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .account-state-banner-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .account-state-banner-actions {
        width: 100%;
    }

    .account-state-banner-btn {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
LEGAL DOCUMENT PAGE
========================================================= */

.legal-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 12px;
    padding-bottom: 28px;
}

.legal-document-card {
    overflow: visible;
}

.legal-document-header {
    padding: 28px 30px 22px;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(
            180deg,
            rgba(96, 165, 250, 0.08),
            transparent 72%
        );
}

.legal-document-title {
    margin: 0;
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text);
}

.legal-document-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.legal-document-metadata-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    font-size: 12px;
}

.legal-document-metadata-label {
    color: var(--muted);
    font-weight: 700;
}

.legal-document-metadata-value {
    color: var(--text);
    font-weight: 900;
}

.legal-document-fallback {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 22px 30px 0;
    padding: 15px 16px;
    border: 1px solid rgba(251, 191, 36, 0.38);
    border-radius: 15px;
    background:
        linear-gradient(
            180deg,
            rgba(251, 191, 36, 0.10),
            rgba(251, 191, 36, 0.04)
        );
}

.legal-document-fallback-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(251, 191, 36, 0.30);
    border-radius: 12px;
    background: rgba(251, 191, 36, 0.10);
    font-size: 20px;
}

.legal-document-fallback-body {
    min-width: 0;
    flex: 1;
}

.legal-document-fallback-title {
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
}

.legal-document-fallback-text {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.legal-document-content {
    padding: 28px 30px 34px;
    color: rgba(229, 231, 235, 0.94);
    font-size: 16px;
    line-height: 1.72;
    overflow-wrap: anywhere;
}

.legal-document-content > :first-child {
    margin-top: 0;
}

.legal-document-content > :last-child {
    margin-bottom: 0;
}

.legal-document-content h2 {
    margin: 34px 0 14px;
    color: var(--text);
    font-size: 25px;
    line-height: 1.25;
    font-weight: 900;
}

.legal-document-content h3 {
    margin: 27px 0 12px;
    color: var(--text);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 850;
}

.legal-document-content h4 {
    margin: 23px 0 10px;
    color: var(--text);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 850;
}

.legal-document-content p {
    margin: 0 0 16px;
}

.legal-document-content ul,
.legal-document-content ol {
    margin: 0 0 18px;
    padding-left: 25px;
}

.legal-document-content li {
    margin-bottom: 8px;
}

.legal-document-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-document-content a:hover {
    color: #93c5fd;
}

.legal-document-content a {
    overflow-wrap: anywhere;
}

.legal-document-content strong {
    color: var(--text);
}

.legal-document-content blockquote {
    margin: 22px 0;
    padding: 14px 18px;
    border-left: 3px solid var(--accent);
    border-radius: 0 12px 12px 0;
    background: rgba(96, 165, 250, 0.07);
    color: var(--muted);
}

/* =========================================================
LEGAL DOCUMENT - MARKDOWN IMAGES
========================================================= */

.legal-document-content img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    margin: 24px auto;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--card2);

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.28);
}

/* =========================================================
LEGAL DOCUMENT - MARKDOWN HORIZONTAL RULE
========================================================= */

.legal-document-content hr {
    height: 1px;

    margin: 30px 0;

    border: 0;

    background: var(--line);
}

/* =========================================================
LEGAL DOCUMENT - MARKDOWN INLINE CODE
========================================================= */

.legal-document-content code {
    padding: 2px 6px;

    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 6px;

    background: rgba(15, 23, 42, 0.72);

    color: #cbd5e1;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    font-size: 0.92em;

    overflow-wrap: anywhere;
}

/* =========================================================
LEGAL DOCUMENT - MARKDOWN CODE BLOCKS
========================================================= */

.legal-document-content pre {
    max-width: 100%;

    margin: 22px 0;
    padding: 16px 18px;

    overflow-x: auto;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: rgba(15, 23, 42, 0.78);

    color: #cbd5e1;

    line-height: 1.55;

    -webkit-overflow-scrolling: touch;
}

.legal-document-content pre code {
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: inherit;

    font-size: 13px;

    overflow-wrap: normal;
    white-space: pre;
}

.legal-document-content table {
    width: 100%;
    margin: 22px 0;
    border-collapse: collapse;
    font-size: 14px;
}

.legal-document-content th,
.legal-document-content td {
    padding: 11px 12px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.legal-document-content th {
    background: rgba(96, 165, 250, 0.10);
    color: var(--text);
    font-weight: 900;
}

.legal-document-navigation {
    padding: 22px 24px;
    overflow: visible;
}

.legal-document-navigation-title {
    margin: 0 0 15px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 900;
}

.legal-document-navigation-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.legal-document-navigation-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 800;
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.legal-document-navigation-link:hover {
    color: var(--text);
    border-color: rgba(96, 165, 250, 0.55);
    background: rgba(96, 165, 250, 0.09);
    transform: translateY(-1px);
}

.legal-document-navigation-link.is-current {
    color: var(--accent);
    border-color: rgba(96, 165, 250, 0.48);
    background: rgba(96, 165, 250, 0.12);
    cursor: default;
}

.legal-document-back-link {
    display: inline-flex;
    align-items: center;
    margin-top: 19px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.legal-document-back-link:hover {
    color: var(--accent);
}

@media (max-width: 600px) {
    .legal-page {
        padding-top: 6px;
        padding-bottom: 20px;
        gap: 14px;
    }

    .legal-document-header {
        padding: 21px 18px 18px;
    }

    .legal-document-title {
        font-size: 28px;
    }

    .legal-document-metadata {
        margin-top: 14px;
    }

    .legal-document-fallback {
        margin: 17px 18px 0;
        padding: 13px;
    }

    .legal-document-content {
        padding: 22px 18px 26px;
        font-size: 15px;
        line-height: 1.68;
    }

    .legal-document-content img {
        margin: 19px auto;

        border-radius: 10px;
    }

    .legal-document-content pre {
        margin: 18px 0;
        padding: 13px 14px;

        border-radius: 10px;
    }

    .legal-document-content pre code {
        font-size: 12px;
    }

    .legal-document-content h2 {
        margin-top: 29px;
        font-size: 22px;
    }

    .legal-document-content h3 {
        font-size: 18px;
    }

    .legal-document-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .legal-document-navigation {
        padding: 18px;
    }

    .legal-document-navigation-links {
        flex-direction: column;
    }

    .legal-document-navigation-link {
        width: 100%;
        justify-content: center;
        text-align: center;
        border-radius: 12px;
    }
}

/* =========================================================
NAVBAR INFORMATION BUTTON
========================================================= */

.navbar-info-button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: inline-grid;
    place-items: center;

    padding: 0;

    border: 1px solid var(--line);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.04);
    color: var(--accent);


    cursor: pointer;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.information-symbol {
    width: 23px;
    height: 23px;
    display: block;
    overflow: visible;
    fill: currentColor;
}

.information-symbol-dot {
    opacity: 0.95;
}

.information-symbol-stem {
    opacity: 1;
}

.information-symbol-modal {
    width: 27px;
    height: 27px;
}

.navbar-info-button:hover {
    color: var(--text);
    border-color: rgba(96, 165, 250, 0.65);
    background: rgba(96, 165, 250, 0.12);
    transform: translateY(-1px);
}

.navbar-info-button:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16);
}

/* =========================================================
INFORMATION MODAL
========================================================= */

.information-modal {
    width: min(520px, 100%);
}

.information-modal-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(96, 165, 250, 0.32);
    border-radius: 14px;

    background: rgba(96, 165, 250, 0.11);
    color: var(--accent);

}

.information-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.information-modal-header .rn-modal-title {
    margin-bottom: 0;
}

.information-modal-close {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid transparent;
    border-radius: 999px;

    background: transparent;
    color: var(--muted);

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}

.information-modal-close:hover {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

.information-modal-close:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.14);
}

.information-modal-description {
    margin-top: 8px;
}

.information-modal-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px;
}

.information-modal-links a {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 46px;
    padding: 11px 13px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.025);
    color: var(--text);

    text-decoration: none;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.information-modal-links a:hover {
    color: var(--accent);
    border-color: rgba(96, 165, 250, 0.48);
    background: rgba(96, 165, 250, 0.08);
    transform: translateX(2px);
}

.information-modal-links a:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.13);
}

html.information-modal-open,
body.information-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

@media (max-width: 600px) {
    .navbar-info-button {
        width: 36px;
        height: 36px;
        flex-basis: 36px;

        border: none;
        background: transparent;

    }

    .navbar-info-button:hover {
        background: rgba(96, 165, 250, 0.10);
        transform: none;
    }

    .information-modal {
        gap: 11px;
    }

    .information-modal-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 12px;
        font-size: 21px;
    }

    .information-modal-links a {
        min-height: 44px;
        padding: 10px 12px;
    }
}

/* =========================================================
REQUIRED LEGAL ACCEPTANCE
========================================================= */

.required-legal-page {
    width: 100%;
    min-height: calc(100vh - 110px);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px 0 40px;
}

.required-legal-card {
    width: min(720px, 100%);
    padding: 30px;
    overflow: visible;

    border-color: rgba(251, 191, 36, 0.40);

    background:
        linear-gradient(
            180deg,
            rgba(251, 191, 36, 0.08),
            transparent 42%
        ),
        var(--card);
}

.required-legal-icon {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    margin: 0 auto 18px;

    border: 1px solid rgba(251, 191, 36, 0.34);
    border-radius: 18px;

    background: rgba(251, 191, 36, 0.10);

    font-size: 28px;
}

.required-legal-header {
    text-align: center;
}

.required-legal-title {
    margin: 0;
    color: var(--text);
    font-size: 28px;
    line-height: 1.2;
    font-weight: 900;
}

.required-legal-description {
    max-width: 590px;
    margin: 12px auto 0;

    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
}

.required-legal-form {
    margin-top: 26px;
}

.required-legal-documents {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.required-legal-document {
    padding: 18px;

    border: 1px solid var(--line);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.025);
}

.required-legal-document-main {
    min-width: 0;
}

.required-legal-document-title {
    margin: 0;

    color: var(--text);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 900;
}

.required-legal-document-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;

    margin-top: 9px;

    color: var(--muted);
    font-size: 12px;
}

.required-legal-document-meta strong {
    color: var(--text);
}

.required-legal-document-link {
    display: inline-flex;
    margin-top: 12px;

    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.required-legal-document-link:hover {
    text-decoration: underline;
}

.required-legal-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    margin-top: 16px;
    padding: 13px;

    border: 1px solid rgba(96, 165, 250, 0.26);
    border-radius: 12px;

    background: rgba(96, 165, 250, 0.07);

    cursor: pointer;
}

.required-legal-checkbox-row input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    margin: 2px 0 0;

    accent-color: var(--accent);
    cursor: pointer;
}

.required-legal-checkbox-row span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.required-legal-checkbox-row strong {
    color: var(--text);
}

.required-legal-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;

    margin-top: 22px;
}

.required-legal-submit {
    width: 100%;
    min-height: 48px;

    border-color: rgba(96, 165, 250, 0.55);
    background: var(--accent);
    color: white;

    font-size: 14px;
    font-weight: 900;
}

.required-legal-logout {
    align-self: center;

    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.required-legal-logout:hover {
    color: var(--accent);
}

.required-legal-error {
    margin-top: 22px;
    padding: 15px;

    border: 1px solid rgba(251, 113, 133, 0.40);
    border-radius: 14px;

    background: rgba(251, 113, 133, 0.08);
    color: #fecdd3;

    font-size: 14px;
    line-height: 1.5;
}

.required-legal-navbar-logout {
    display: inline-flex;
    margin-left: 0;
    font-size: 13px;
}

@media (max-width: 600px) {
    .required-legal-page {
        min-height: calc(100vh - 90px);
        padding: 10px 0 24px;
        align-items: flex-start;
    }

    .required-legal-card {
        padding: 21px 17px;
        border-radius: 16px;
    }

    .required-legal-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 14px;
        border-radius: 15px;
        font-size: 24px;
    }

    .required-legal-title {
        font-size: 23px;
    }

    .required-legal-description {
        font-size: 14px;
    }

    .required-legal-document {
        padding: 15px;
    }

    .required-legal-document-title {
        font-size: 17px;
    }
}

/* =========================================================
ZGŁASZANIE TREŚCI
========================================================= */

.report-post-btn {
    border: 1px solid rgba(251,113,133,.30);
    background: rgba(251,113,133,.08);
    color: #fda4af;

    padding: 7px 12px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.report-post-btn:hover {
    border-color: rgba(251,113,133,.75);
    background: rgba(251,113,133,.16);
    transform: translateY(-1px);
}


.comment-report-btn {
    border: 1px solid rgba(251,113,133,.30);
    background: rgba(251,113,133,.08);
    color: #fda4af;

    padding: 6px 9px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.comment-report-btn:hover {
    border-color: rgba(251,113,133,.75);
    background: rgba(251,113,133,.16);
    transform: translateY(-1px);
}


.report-modal {
    width: min(680px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
}


.report-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}


.report-modal-close {
    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: rgba(255,255,255,.03);
    color: var(--muted);

    cursor: pointer;

    font-size: 20px;
    line-height: 1;
}

.report-modal-close:hover {
    border-color: rgba(251,113,133,.60);
    color: #fda4af;
    background: rgba(251,113,133,.08);
}


.report-modal-description {
    margin-bottom: 16px;
}


.report-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.report-target-box {
    padding: 12px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: rgba(255,255,255,.025);

    display: flex;
    flex-direction: column;
    gap: 9px;
}


.report-target-row,
.report-target-url-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}


.report-target-url-row a {
    min-width: 0;

    color: var(--accent);
    text-decoration: none;

    font-size: 12px;

    overflow-wrap: anywhere;
    word-break: break-word;

    text-align: right;
}

.report-target-url-row a:hover {
    text-decoration: underline;
}


.report-field-label {
    flex: 0 0 auto;

    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}


.report-fieldset {
    margin: 0;
    padding: 0;

    border: none;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.report-fieldset legend {
    margin-bottom: 8px;

    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}


.report-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 11px 12px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: rgba(255,255,255,.02);

    cursor: pointer;
}

.report-radio-option:hover {
    border-color: rgba(96,165,250,.45);
    background: rgba(96,165,250,.05);
}

.report-radio-option input {
    margin-top: 3px;
}

.report-radio-option span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.report-radio-option strong {
    font-size: 13px;
    color: var(--text);
}

.report-radio-option small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}


.report-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.report-field label {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.report-field input {
    width: 100%;

    padding: 10px 12px;

    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.22);

    background: rgba(15,23,42,.45);
    color: var(--text);

    outline: none;
}

.report-field input:focus {
    border-color: rgba(96,165,250,.65);
    box-shadow: 0 0 0 4px rgba(96,165,250,.12);
}


.report-field-help,
.report-contact-note {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}


.report-good-faith {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 12px;

    border: 1px solid rgba(251,191,36,.28);
    border-radius: 12px;

    background: rgba(251,191,36,.06);

    color: var(--text);

    font-size: 12px;
    line-height: 1.45;
}

.report-good-faith[hidden] {
    display: none;
}

.report-good-faith input {
    margin-top: 3px;
}


.report-form-status {
    min-height: 18px;

    color: var(--muted);
    font-size: 12px;
}

.report-form-status.error {
    color: var(--danger);
}


.report-submit-btn {
    border-color: rgba(251,113,133,.45);
    background: rgba(251,113,133,.10);
    color: #fecdd3;
}

.report-submit-btn:hover:not(:disabled) {
    border-color: rgba(251,113,133,.80);
    background: rgba(251,113,133,.18);
}

.report-submit-btn:disabled {
    opacity: .55;
    cursor: wait;
}


html.report-modal-open,
body.report-modal-open {
    overflow: hidden;
}


@media (max-width: 600px) {
    .report-modal {
        max-height: calc(100vh - 20px);
    }

    .report-target-row,
    .report-target-url-row {
        flex-direction: column;
        gap: 4px;
    }

    .report-target-url-row a {
        text-align: left;
    }
}


/* =========================================================
PANEL MODERACJI
========================================================= */

.moderation-page {
    width: min(1180px, calc(100% - 32px));
    margin: 28px auto 48px;
}

.moderation-page > h1 {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.2;
}

.moderation-page > p {
    margin: 0 0 24px;
    color: var(--muted);
}


/* =========================================================
FILTRY STATUSU
========================================================= */

.moderation-status-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-bottom: 22px;
}

.moderation-status-filters a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 8px 13px;

    border: 1px solid var(--line);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.025);

    color: var(--muted);
    text-decoration: none;

    font-size: 13px;
    font-weight: 800;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.moderation-status-filters a:hover {
    color: var(--text);
    border-color: rgba(96, 165, 250, 0.55);
    background: rgba(96, 165, 250, 0.09);
    transform: translateY(-1px);
}

.moderation-status-filters a[aria-current="page"] {
    color: var(--accent);
    border-color: rgba(96, 165, 250, 0.48);
    background: rgba(96, 165, 250, 0.12);
}

/* =========================================================
KOREKTA METADANYCH POSTA
========================================================= */

.moderation-post-tool {
    margin-bottom: 28px;
    padding: 20px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--card);
    box-shadow: var(--shadow);
}

.moderation-post-tool-header {
    margin-bottom: 18px;
}

.moderation-post-tool-header h2 {
    margin: 0 0 7px;

    font-size: 20px;
    line-height: 1.25;
}

.moderation-post-tool-header p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.5;
}

.moderation-post-lookup {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.moderation-post-id-field {
    flex: 1 1 240px;
}

.moderation-post-field {
    display: flex;
    flex-direction: column;
    gap: 7px;

    min-width: 0;
}

.moderation-post-field label {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.moderation-post-field input,
.moderation-post-field select,
.moderation-post-field textarea {
    width: 100%;

    padding: 10px 12px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: rgba(15, 23, 42, 0.45);
    color: var(--text);

    font: inherit;
    outline: none;
}

.moderation-post-field textarea {
    min-height: 96px;
    resize: vertical;
}

.moderation-post-field input:focus,
.moderation-post-field select:focus,
.moderation-post-field textarea:focus {
    border-color: rgba(96, 165, 250, 0.65);

    box-shadow:
        0 0 0 3px
        rgba(96, 165, 250, 0.10);
}

.moderation-post-button {
    min-height: 41px;

    padding: 9px 15px;

    border: 1px solid
        rgba(96, 165, 250, 0.45);
    border-radius: 10px;

    background:
        rgba(96, 165, 250, 0.10);

    color: var(--accent);

    font: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.moderation-post-button:hover:not(:disabled) {
    border-color:
        rgba(96, 165, 250, 0.75);

    background:
        rgba(96, 165, 250, 0.17);
}

.moderation-post-button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.moderation-post-editor {
    margin-top: 18px;
    padding-top: 18px;

    border-top: 1px solid var(--line);
}

.moderation-post-editor[hidden] {
    display: none;
}

.moderation-post-editor h3 {
    margin: 0 0 14px;

    font-size: 17px;
}

.moderation-post-summary {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 10px;

    margin-bottom: 14px;
}

.moderation-post-summary > div {
    min-width: 0;

    padding: 11px 12px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.025);
}

.moderation-post-summary span {
    display: block;

    margin-bottom: 4px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.moderation-post-summary strong {
    display: block;

    min-width: 0;

    color: var(--text);

    font-size: 13px;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

.moderation-post-public-link {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--accent);

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}

.moderation-post-public-link:hover {
    text-decoration: underline;
}

.moderation-post-edit-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-bottom: 14px;
}

.moderation-post-status {
    min-height: 18px;

    margin-top: 10px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.4;
}

.moderation-post-status.error {
    color: var(--danger);
}

.moderation-post-status.success {
    color: #86efac;
}

.moderation-post-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 12px;
}

.moderation-post-save-button {
    min-width: 150px;
}


/* =========================================================
TABELA ZGŁOSZEŃ
========================================================= */

.moderation-report-table-wrap {
    width: 100%;
    overflow-x: auto;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--card);

    box-shadow: var(--shadow);

    -webkit-overflow-scrolling: touch;
}

.moderation-report-table {
    width: 100%;
    min-width: 760px;

    border-collapse: collapse;

    font-size: 14px;
}

.moderation-report-table th,
.moderation-report-table td {
    padding: 13px 15px;

    border-bottom: 1px solid var(--line);

    text-align: left;
    vertical-align: middle;
}

.moderation-report-table th {
    background: rgba(96, 165, 250, 0.09);

    color: var(--text);

    font-size: 12px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.04em;

    white-space: nowrap;
}

.moderation-report-table tbody tr:last-child td {
    border-bottom: none;
}

.moderation-report-table tbody tr:hover {
    background: rgba(96, 165, 250, 0.045);
}

.moderation-report-table td:first-child {
    width: 70px;

    font-weight: 900;
    color: var(--accent);
}

.moderation-report-table td:nth-child(2) {
    white-space: nowrap;

    color: var(--muted);
}

.moderation-report-table td:nth-child(5) {
    white-space: nowrap;

    font-weight: 800;
}


/* =========================================================
BRAK ZGŁOSZEŃ
========================================================= */

.moderation-reports-empty {
    padding: 22px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--card);

    color: var(--muted);

    text-align: center;
}

.moderation-mobile-label {
    display: none;
}
/* =========================================================
PANEL MODERACJI - MOBILE
========================================================= */

@media (max-width: 700px) {

    .moderation-page {
        width: calc(100% - 20px);
        margin-top: 18px;
        margin-bottom: 32px;
    }

    .moderation-page > h1 {
        font-size: 26px;
    }

    .moderation-status-filters {
        gap: 7px;
    }

    .moderation-status-filters a {
        flex: 1 1 auto;

        min-height: 40px;

        padding: 8px 11px;

        border-radius: 10px;

        font-size: 12px;
    }

    .moderation-report-table-wrap {
        border-radius: 10px;
    }

.moderation-report-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.moderation-report-table {
    display: block;
    width: 100%;
    min-width: 0;

    font-size: 13px;
}

.moderation-report-table thead {
    display: none;
}

.moderation-report-table tbody {
    display: grid;
    gap: 12px;
}

.moderation-report-table tr {
    display: block;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: var(--card);

    overflow: hidden;
}

    .moderation-report-table td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 12px;

        width: 100%;
        padding: 11px 13px;

        border-bottom: 1px solid var(--line);

        text-align: left;
        white-space: normal;
    }

    .moderation-report-table tbody tr:last-child td {
        border-bottom: 1px solid var(--line);
    }

    .moderation-report-table td:last-child {
        border-bottom: none;
    }
    .moderation-mobile-label {
        display: block;

        color: var(--muted);

        font-size: 11px;
        font-weight: 800;

        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .moderation-cell-value {
        min-width: 0;

        color: inherit;

        overflow-wrap: anywhere;
    }

    .moderation-report-table td:first-child {
        width: 100%;
    }

    .moderation-report-table td:nth-child(2),
    .moderation-report-table td:nth-child(5) {
        white-space: normal;
    }
}

@media (max-width: 700px) {

    .moderation-post-tool {
        padding: 15px;
    }

    .moderation-post-lookup {
        align-items: stretch;
        flex-direction: column;
    }

    .moderation-post-id-field {
        flex: none;
    }

    .moderation-post-edit-grid {
        grid-template-columns: 1fr;
    }

    .moderation-post-actions {
        display: block;
    }

    .moderation-post-save-button,
    .moderation-post-lookup
        .moderation-post-button {
        width: 100%;
    }
}

/* =========================================================
SZCZEGÓŁY ZGŁOSZENIA MODERACYJNEGO
========================================================= */

.moderation-report-open-link,
.moderation-report-back-link,
.moderation-report-open-target {
    color: var(--accent);
    font-weight: 800;
    text-decoration: none;
}

.moderation-report-open-link:hover,
.moderation-report-back-link:hover,
.moderation-report-open-target:hover {
    text-decoration: underline;
}

.moderation-report-detail-topbar {
    margin-bottom: 18px;
}

.moderation-report-detail-page > h1 {
    margin-bottom: 20px;
}

.moderation-report-detail-card {
    margin-bottom: 18px;
    padding: 20px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--card);
    box-shadow: var(--shadow);
}

.moderation-report-detail-card h2 {
    margin: 0 0 16px;

    font-size: 18px;
    line-height: 1.3;
}

.moderation-report-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(190px, 1fr)
        );

    gap: 10px;

    margin-bottom: 14px;
}

.moderation-report-detail-grid > div {
    min-width: 0;

    padding: 11px 12px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.025);
}

.moderation-report-detail-grid span,
.moderation-report-detail-text > span {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.moderation-report-detail-grid strong {
    display: block;

    min-width: 0;

    overflow-wrap: anywhere;
}

.moderation-report-detail-text {
    margin-top: 14px;
}

.moderation-report-detail-text p {
    margin: 0;

    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.moderation-report-detail-url {
    color: var(--muted);
}

.moderation-report-open-target {
    display: inline-block;
    margin-top: 14px;
}


@media (max-width: 700px) {

    .moderation-report-detail-card {
        padding: 15px;
    }

    .moderation-report-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
MODERACJA - SNAPSHOT VS STAN AKTUALNY
========================================================= */

.moderation-report-state-columns {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;
}

.moderation-report-state-card {
    min-width: 0;

    padding: 16px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.02);
}

.moderation-report-state-snapshot {
    border-color:
        rgba(251, 191, 36, 0.30);

    background:
        linear-gradient(
            180deg,
            rgba(251, 191, 36, 0.055),
            transparent 38%
        ),
        rgba(255, 255, 255, 0.02);
}

.moderation-report-state-current {
    border-color:
        rgba(96, 165, 250, 0.30);

    background:
        linear-gradient(
            180deg,
            rgba(96, 165, 250, 0.055),
            transparent 38%
        ),
        rgba(255, 255, 255, 0.02);
}

.moderation-report-state-card h3 {
    margin: 0 0 15px;

    font-size: 16px;
    line-height: 1.3;
}

.moderation-report-state-snapshot h3 {
    color: var(--good);
}

.moderation-report-state-current h3 {
    color: var(--accent);
}

.moderation-report-state-meta-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 9px;

    margin-bottom: 14px;
}

.moderation-report-state-meta-grid > div {
    min-width: 0;

    padding: 9px 10px;

    border: 1px solid var(--line);
    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.02);
}

.moderation-report-state-meta-grid span,
.moderation-report-state-field > span,
.moderation-report-state-block-row > span {
    display: block;

    margin-bottom: 4px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.moderation-report-state-meta-grid strong,
.moderation-report-state-block-row strong {
    display: block;

    min-width: 0;

    color: var(--text);

    font-size: 12px;
    line-height: 1.45;

    overflow-wrap: anywhere;
}

.moderation-report-state-field {
    margin-top: 14px;
}

.moderation-report-state-field > p {
    margin: 0;

    color: var(--text);

    font-size: 13px;
    line-height: 1.55;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.moderation-report-state-blocks {
    display: flex;
    flex-direction: column;

    gap: 9px;

    margin-top: 8px;
}

.moderation-report-state-block {
    min-width: 0;

    padding: 11px;

    border: 1px solid var(--line);
    border-radius: 9px;

    background:
        rgba(15, 23, 42, 0.32);
}

.moderation-report-state-block-type {
    margin-bottom: 7px;

    color: var(--accent);

    font-size: 11px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.moderation-report-state-block-content,
.moderation-report-state-link-title {
    margin: 0;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.moderation-report-state-block-content {
    color: var(--text);

    font-size: 13px;
    line-height: 1.5;
}

.moderation-report-state-link-title {
    margin-bottom: 6px;

    color: var(--text);

    font-size: 13px;
    font-weight: 900;
}

.moderation-report-state-block-row {
    margin-top: 8px;
}

.moderation-report-state-missing {
    padding: 14px;

    border: 1px dashed
        rgba(251, 113, 133, 0.40);
    border-radius: 10px;

    background:
        rgba(251, 113, 133, 0.07);

    color: #fecdd3;

    font-size: 13px;
    line-height: 1.5;
}


@media (max-width: 800px) {

    .moderation-report-state-columns {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 500px) {

    .moderation-report-state-card {
        padding: 12px;
    }

    .moderation-report-state-meta-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
MODERACJA - FORMULARZ DECYZJI
========================================================= */

.moderation-decision-card {
    border-color:
        rgba(96, 165, 250, 0.30);

    background:
        linear-gradient(
            180deg,
            rgba(96, 165, 250, 0.055),
            transparent 34%
        ),
        var(--card);
}

.moderation-decision-description {
    margin: -6px 0 16px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.5;
}

.moderation-decision-stage-notice {
    margin-bottom: 18px;
    padding: 12px 13px;

    border: 1px solid
        rgba(251, 191, 36, 0.30);
    border-radius: 10px;

    background:
        rgba(251, 191, 36, 0.07);

    color: #fde68a;

    font-size: 12px;
    line-height: 1.5;
}

.moderation-decision-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.moderation-decision-fieldset {
    margin: 0;
    padding: 0;

    border: 0;
}

.moderation-decision-fieldset legend {
    margin-bottom: 9px;

    color: var(--text);

    font-size: 13px;
    font-weight: 900;
}

.moderation-decision-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 9px;
    padding: 12px;

    border: 1px solid var(--line);
    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.02);

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}

.moderation-decision-radio-option:hover {
    border-color:
        rgba(96, 165, 250, 0.45);

    background:
        rgba(96, 165, 250, 0.05);
}

.moderation-decision-radio-option input {
    flex: 0 0 auto;

    margin-top: 3px;

    accent-color: var(--accent);
}

.moderation-decision-radio-option span {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
}

.moderation-decision-radio-option strong {
    color: var(--text);

    font-size: 13px;
}

.moderation-decision-radio-option small {
    color: var(--muted);

    font-size: 11px;
    line-height: 1.45;
}

.moderation-decision-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.moderation-decision-field label {
    color: var(--text);

    font-size: 13px;
    font-weight: 900;
}

.moderation-decision-field input,
.moderation-decision-field select,
.moderation-decision-field textarea {
    width: 100%;

    padding: 10px 12px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background:
        rgba(15, 23, 42, 0.45);

    color: var(--text);

    font: inherit;

    outline: none;
}

.moderation-decision-field select {
    color-scheme: dark;
}

.moderation-decision-field select option {
    background: var(--card2);
    color: var(--text);
}

.moderation-decision-field textarea {
    min-height: 120px;

    resize: vertical;
}

.moderation-decision-field input:focus,
.moderation-decision-field select:focus,
.moderation-decision-field textarea:focus {
    border-color:
        rgba(96, 165, 250, 0.65);

    box-shadow:
        0 0 0 3px
        rgba(96, 165, 250, 0.10);
}

.moderation-decision-field small {
    color: var(--muted);

    font-size: 11px;
    line-height: 1.45;
}

.moderation-decision-status {
    min-height: 18px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.45;
}

.moderation-decision-status.error {
    color: var(--danger);
}

.moderation-decision-status.success {
    color: #86efac;
}

.moderation-decision-actions {
    display: flex;
    justify-content: flex-end;
}

.moderation-decision-check-button {
    min-height: 41px;

    padding: 9px 15px;

    border: 1px solid
        rgba(96, 165, 250, 0.50);
    border-radius: 10px;

    background:
        rgba(96, 165, 250, 0.12);

    color: var(--accent);

    font: inherit;
    font-size: 13px;
    font-weight: 900;

    cursor: pointer;
}

.moderation-decision-check-button:hover {
    border-color:
        rgba(96, 165, 250, 0.80);

    background:
        rgba(96, 165, 250, 0.20);
}

.moderation-decision-closed {
    padding: 14px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.025);

    color: var(--muted);

    font-size: 13px;
    line-height: 1.5;
}


@media (max-width: 600px) {

    .moderation-decision-actions {
        display: block;
    }

    .moderation-decision-check-button {
        width: 100%;
    }

    .moderation-decision-radio-option {
        padding: 11px;
    }
}

/* =========================================================
MODERACJA - MODAL POTWIERDZENIA DECYZJI
========================================================= */

.moderation-decision-confirm-modal {
    width: min(520px, 100%);
}


.moderation-decision-confirm-icon {
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}


.moderation-decision-confirm-icon.is-neutral {
    color: #86efac;

    border-color:
        rgba(134, 239, 172, 0.30);

    background:
        rgba(134, 239, 172, 0.09);
}


.moderation-decision-confirm-icon.is-danger {
    color: #fecdd3;

    border-color:
        rgba(251, 113, 133, 0.35);

    background:
        rgba(251, 113, 133, 0.10);
}


.moderation-decision-confirm-button {
    min-width: 135px;
}


.moderation-decision-confirm-button:not(
    .rn-modal-danger-btn
) {
    border-color:
        rgba(96, 165, 250, 0.48);

    background:
        rgba(96, 165, 250, 0.11);

    color: var(--accent);
}


.moderation-decision-confirm-button:not(
    .rn-modal-danger-btn
):hover {
    border-color:
        rgba(96, 165, 250, 0.80);

    background:
        rgba(96, 165, 250, 0.20);
}


.moderation-decision-confirm-button:disabled {
    opacity: 0.55;
    cursor: wait;
}


html.moderation-decision-modal-open,
body.moderation-decision-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}


@media (max-width: 600px) {

    .moderation-decision-confirm-modal {
        width: 100%;
    }

    .moderation-decision-confirm-button {
        min-width: 0;
    }
}

/* =========================================================
MODERATION HIDDEN COMMENT / REPLY
========================================================= */

.comment.moderation-hidden-comment {
    border-color:
        rgba(251, 113, 133, 0.24);

    background:
        linear-gradient(
            180deg,
            rgba(251, 113, 133, 0.055),
            transparent
        ),
        rgba(255, 255, 255, 0.012);
}


.comment.is-child.moderation-hidden-comment {
    border-left-color:
        rgba(251, 113, 133, 0.40);
}


.moderation-hidden-comment-message {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 34px;
}


.moderation-hidden-comment-icon {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    border:
        1px solid
        rgba(251, 113, 133, 0.30);

    background:
        rgba(251, 113, 133, 0.08);

    font-size: 16px;
}


.moderation-hidden-comment-text {
    color: var(--muted);

    font-size: 13px;
    line-height: 1.4;

    font-style: italic;
}


.moderation-hidden-comment > .replies-container {
    margin-top: 12px;
}

/* =========================================================
   C10 - ZEWNĘTRZNE TREŚCI: CLICK-TO-LOAD YOUTUBE
   ========================================================= */

.rn-external-video-placeholder {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 180px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 8px;

    background: var(--card2);
    text-align: center;
}

.rn-external-video-thumbnail {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.rn-external-video-shade {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.52);
}

.video-container > .rn-external-video-placeholder,
.home-video-box > .rn-external-video-placeholder {
    min-height: 0;
}

.rn-external-video-content {
    position: relative;
    z-index: 1;

    max-width: 520px;
}

.rn-external-video-icon {
    margin-bottom: 8px;
    font-size: 38px;
    line-height: 1;
}

.rn-external-video-provider {
    font-size: 16px;
    font-weight: 900;
    color: var(--text);
}

.rn-external-video-notice {
    margin-top: 8px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.45;
}

.rn-external-video-load {
    margin-top: 14px;
}

iframe.rn-youtube-embed {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
    border-radius: 8px;
}


/* =========================================================
   YOUTUBE - KOMPAKTOWY WIDOK DLA BLOKU 33%
   ========================================================= */

.block-w-33 .rn-external-video-placeholder,
.home-block-w-33 .rn-external-video-placeholder {
    padding: 6px;
}

.block-w-33 .rn-external-video-content,
.home-block-w-33 .rn-external-video-content {
    width: 100%;
    max-width: 100%;
}

.block-w-33 .rn-external-video-icon,
.home-block-w-33 .rn-external-video-icon,
.block-w-33 .rn-external-video-provider,
.home-block-w-33 .rn-external-video-provider,
.block-w-33 .rn-external-video-notice,
.home-block-w-33 .rn-external-video-notice {
    display: none;
}

.block-w-33 .rn-external-video-load,
.home-block-w-33 .rn-external-video-load {
    margin-top: 0;
    padding: 8px 10px;
    font-size: 11px;
    white-space: nowrap;
}

/* =========================================================
   YOUTUBE MOBILE 33/66 - 2026-09-30

   100%:
   - bez zmian

   66% na ekranie <= 600 px:
   - nadal fizycznie 66% szerokości
   - kompaktowy placeholder
   - player nadal ładowany wewnątrz ReputoNode

   33% na ekranie <= 600 px:
   - nadal fizycznie 33% szerokości
   - nie tworzymy iframe YouTube
   - cała miniatura prowadzi do zwykłego HTTPS YouTube
   ========================================================= */

.rn-external-video-open-mobile {
    display: none;
}

@media (max-width: 600px) {

    /* 66%: zachowujemy szerokość bloku, upraszczamy tylko zawartość. */
    .block-w-66 .rn-external-video-placeholder,
    .home-block-w-66 .rn-external-video-placeholder {
        padding: 4px;
    }

    .block-w-66 .rn-external-video-content,
    .home-block-w-66 .rn-external-video-content {
        width: 100%;
        max-width: 100%;
    }

    .block-w-66 .rn-external-video-icon,
    .home-block-w-66 .rn-external-video-icon,
    .block-w-66 .rn-external-video-notice,
    .home-block-w-66 .rn-external-video-notice {
        display: none;
    }

    .block-w-66 .rn-external-video-provider,
    .home-block-w-66 .rn-external-video-provider {
        font-size: 12px;
        line-height: 1.1;
    }

    .block-w-66 .rn-external-video-load,
    .home-block-w-66 .rn-external-video-load {
        margin-top: 6px;
        padding: 6px 9px;
        font-size: 10px;
        line-height: 1.1;
        white-space: nowrap;
    }

    /* 33%: zachowujemy 33%, ale nie próbujemy uruchamiać iframe w tak małym polu. */
    .block-w-33 .rn-external-video-content,
    .home-block-w-33 .rn-external-video-content {
        display: none;
    }

    .block-w-33 .rn-external-video-open-mobile,
    .home-block-w-33 .rn-external-video-open-mobile {
        position: absolute;
        inset: 0;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 4px;

        color: var(--text);
        text-decoration: none;
        text-align: center;

        font-size: 10px;
        font-weight: 900;
        line-height: 1.15;

        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .block-w-33 .rn-external-video-open-mobile:focus-visible,
    .home-block-w-33 .rn-external-video-open-mobile:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }
}

/* =========================================================
   POST MEDIA PERFORMANCE - 2026-09-30
   ========================================================= */

.rn-local-video-placeholder {
    position: relative;
    width: 100%;
    min-height: 120px;

    display: block;
    overflow: hidden;

    padding: 0;
    border: 0;
    border-radius: 8px;

    background: #000;
    color: #fff;

    cursor: pointer;
}

.rn-local-video-placeholder:not(.has-poster) {
    aspect-ratio: 16 / 9;
}

.rn-local-video-poster {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.rn-local-video-play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 4px;

    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;

    background: rgba(15,23,42,.82);
    color: #fff;

    font-size: 28px;
    line-height: 1;

    box-shadow: 0 8px 28px rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
}

.rn-local-video-placeholder:hover .rn-local-video-play-icon,
.rn-local-video-placeholder:focus-visible .rn-local-video-play-icon {
    border-color: var(--accent);
    background: rgba(96,165,250,.35);
}

.rn-local-video-placeholder:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.video-fullscreen-btn[hidden] {
    display: none;
}

@media (max-width: 600px) {
    .rn-local-video-placeholder {
        min-height: 72px;
    }

    .rn-local-video-play-icon {
        width: 42px;
        height: 42px;
        font-size: 21px;
    }

    .home-block-w-33 .rn-local-video-play-icon {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }
}