:root {
        --main-bg: #000;
        --second-bg: #101010;
        --third-bg: #232323;
        
        --green-color: #81c784;
        --green-hover: rgb(129 199 132 / 30%);
    }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: var(--main-bg);
    color: #888;
    line-height: 1.6;
}

.staff-member, .message-item {
    background: var(--main-bg);
    color: #ccc;
}

/* Globalne style dla pól tekstowych */
textarea, input[type="text"], input[type="email"], input[type="password"] {
    color: #ccc !important;
    background-color: var(--second-bg) !important;
}

textarea {
    color: #ccc !important;
    background-color: var(--second-bg) !important;
}

/* Bardzo specyficzne style dla edytora tekstu */
textarea.text-editor-textarea,
textarea[data-editor="true"],
textarea#content,
textarea#edit_content,
textarea#signature,
textarea#message_content {
    color: #ccc !important;
    background-color: var(--second-bg) !important;
    border: 1px solid var(--third-bg) !important;
}

/* Dodatkowe style z najwyższym priorytetem */
body textarea,
body textarea.text-editor-textarea,
body textarea[data-editor="true"] {
    color: #ccc !important;
    background-color: var(--second-bg) !important;
    -webkit-text-fill-color: #ccc !important;
}

/* Header */
.header {
     background: linear-gradient(120deg, rgba(129, 199, 132, .3), var(--second-bg) 40%);
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo {
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
}

.logo-text {
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(45deg, #ffffff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.logo-text:before {
    margin-right: 10px;
  display: inline-block;
  width: 24.5px;
  height: 28px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 24'%3E%3Cpath fill='%2381c784' d='M10.449 0c-3.64 0-6.71.201-7.168.468c-.8.273-1.402 2.09-1.404 4.246v1.071h-.218a.5.5 0 0 0-.088-.135a.6.6 0 0 0 .146-.392v-.544a.49.49 0 0 0-.427-.535H.432a.49.49 0 0 0-.428.539v-.002v.544c0 .15.055.288.146.393l-.001-.001a.6.6 0 0 0-.146.392V8.73q-.002.023-.002.048c0 .25.187.457.429.487h.859A.42.42 0 0 0 1.658 9l.001-.003h.218v4.822c0 .191.205.368.536.463v.626c-.473.061-.8.274-.8.518v5.36a2.96 2.96 0 0 0 .542 1.863l-.006-.009v.921c0 .243.197.44.44.44h1.798a.44.44 0 0 0 .44-.44v-.631h11.247v.631c0 .243.197.44.44.44h1.798a.44.44 0 0 0 .44-.44v-.92a2.96 2.96 0 0 0 .536-1.86v.007v-5.36c0-.244-.331-.457-.8-.518v-.626c.331-.095.535-.272.536-.463v-4.82h.218c.06.152.202.259.369.268h.855a.49.49 0 0 0 .428-.539v.002v-2.686a.6.6 0 0 0-.146-.393l.001.001a.6.6 0 0 0 .146-.392V4.72a.49.49 0 0 0-.427-.535h-.859a.49.49 0 0 0-.428.539v-.002v.544c0 .15.055.288.146.393l-.001-.001a.6.6 0 0 0-.087.131l-.001.003h-.218V4.716c0-2.167-.608-3.992-1.414-4.251c-.49-.266-3.545-.463-7.157-.463zM3.101 3.107h14.695c.259 0 .475.184.525.429l.001.003c.102.51.16 1.097.16 1.698v.038v-.002V9c0 .296-.24.536-.536.536H2.949A.536.536 0 0 1 2.413 9V5.238q.001-.903.169-1.756l-.009.057a.536.536 0 0 1 .526-.432zm.651 11.786H4.9c.143 0 .259.112.267.253v.001l.191 3.482v.014c0 .148-.12.268-.268.268H3.752a.27.27 0 0 1-.268-.268v-3.482c0-.148.12-.268.268-.268m12.245 0h1.148c.148 0 .268.12.268.268v3.479c0 .148-.12.268-.268.268h-1.339a.27.27 0 0 1-.268-.268v-.015v.001l.191-3.482c.01-.14.126-.25.267-.25h.001zm-9.968.64h8.84c.074 0 .134.06.134.134v.16c0 .074-.06.134-.134.134h-8.84a.134.134 0 0 1-.134-.134v-.16c0-.074.06-.134.134-.134m.053.964h8.733c.074 0 .134.06.134.134v.16c0 .074-.06.134-.134.134H6.082a.134.134 0 0 1-.134-.134v-.16c0-.074.06-.134.134-.134m.054.964h8.626c.074 0 .134.06.134.134v.16c0 .074-.06.134-.134.134H6.136a.133.133 0 0 1-.133-.128v-.16c0-.074.06-.134.134-.134zm.054.964h8.518c.074 0 .134.06.134.134v.16c0 .074-.06.134-.134.134H6.19a.134.134 0 0 1-.134-.134v-.16c0-.074.06-.134.134-.134'/%3E%3C/svg%3E");
}

.nav-menu a > .fas {
    margin-right: 5px;
}

.logo-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #81c784, #4caf50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 24px;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.search-box {
    display: flex;
    align-items: center;
}

.search-box input {
    padding: 8px 12px;
    border: none;
    border-radius: 4px 0 0 4px;
    background: rgba(255,255,255,0.9);
    width: 200px;
}

.search-box button {
    padding: 8px 12px;
    border: none;
    border-radius: 0 4px 4px 0;
    background: #4299e1;
    color: white;
    cursor: pointer;
}

.user-menu {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-login {
    background: transparent;
    color: white;
    border: 1px solid white;
}

.btn-register {
    background: #e53e3e;
    color: white;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Navigation */
.navigation {
    background: rgba(74, 85, 104, 0.9);
    padding: 10px 0;
}

.nav-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-menu a {
    color: #ccc;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 0;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: var(--green-color);
}

/* Announcements */
.announcements {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

.announcement {
    padding: 12px 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-weight: bold;
}

.announcement.info {
    background: #bee3f8;
    color: #2c5282;
    border-left: 4px solid #3182ce;
}

.announcement.success {
    background: #c6f6d5;
    color: #22543d;
    border-left: 4px solid #38a169;
}

.announcement.warning {
    background: #fefcbf;
    color: #744210;
    border-left: 4px solid #d69e2e;
}

/* Forum Chat Container */
.forum-chat-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

/* Forum Chat Full Width (nad kategoriami) */
.forum-chat-full-width {
    width: 100%;
    margin-bottom: 20px;
}

/* Forum Chat w main content (nad kategoriami, nie nad sidebar) */
.forum-chat-in-main {
    width: 100%;
    margin-bottom: 20px;
}

/* Forum Chat */
.forum-chat-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
}

.chat-header {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: white;
    padding: 15px 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-admin-controls {
    display: flex;
    gap: 10px;
}

.btn-chat-admin {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.3s;
}

.btn-chat-admin:hover {
    background: rgba(255, 255, 255, 0.3);
}

.chat-messages {
    height: 200px;
    overflow-y: auto;
    padding: 15px;
    border-bottom: 1px solid var(--third-bg);
}

.chat-message {
    margin-bottom: 8px;
    line-height: 1.4;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--third-bg); /* Cienka linia między wiadomościami */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.chat-message:last-child {
    border-bottom: none; /* Usuń linię z ostatniej wiadomości */
}

.chat-message-content {
    flex: 1;
}

.chat-message-actions {
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.3s;
    flex-shrink: 0;
}

.chat-message:hover .chat-message-actions {
    opacity: 1;
}

.btn-delete-message {
    background: #e53e3e;
    color: white;
    border: none;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    font-weight: bold;
}

.btn-delete-message:hover {
    background: #c53030;
    transform: scale(1.1);
}

.chat-time {
    color: #718096;
    font-size: 11px;
    margin-right: 5px;
}

.chat-username {
    font-weight: bold;
    margin-right: 5px;
    text-shadow: 0px 0 12px currentColor;
}

.chat-text {
    color: #ccc;
}

.chat-input-area {
    display: flex;
    padding: 15px;
    gap: 10px;
}

.chat-input-area input {
    flex: 1;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 14px;
}

.btn-chat-send {
    background: #4299e1;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-chat-send:hover {
    background: #3182ce;
}

.mute-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mute-panel-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
}

.mute-panel-content h4 {
    margin-bottom: 15px;
    color: #2d3748;
}

.mute-panel-content input,
.mute-panel-content select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    box-sizing: border-box;
}

.mute-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.mute-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}

.mute-buttons button:first-child {
    background: #e53e3e;
    color: white;
}

.mute-buttons button:first-child:hover {
    background: #c53030;
}

.mute-buttons button:nth-child(2) {
    background: #38a169;
    color: white;
}

.mute-buttons button:nth-child(2):hover {
    background: #2f855a;
}

.mute-buttons button:last-child {
    background: #718096;
    color: white;
}

.mute-buttons button:last-child:hover {
    background: #4a5568;
}

.btn-mute {
    background: #e53e3e;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-unmute {
    background: #38a169;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-cancel {
    background: #718096;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.special-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 3px;
    vertical-align: middle;
}

/* Main Content */
.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 20px;
}

.forum-content {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
}

/* Forum Categories */
.category-section {
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.category-header {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: white;
    padding: 15px 20px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px 12px 0 0;
    transition: all 0.3s;
    position: relative;
}

.category-header:hover {
    filter: brightness(110%);
}

.category-header a {
    color: white !important;
    text-decoration: none !important;
    flex: 1;
}

.category-header a:hover {
    color: white !important;
    text-decoration: underline !important;
}

.category-icon {
    font-size: 18px;
}

/* Przycisk toggle kategorii */
.category-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    margin-left: auto;
}

.category-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.category-toggle i {
    font-size: 16px;
    transition: transform 0.3s;
}

.category-section.collapsed .category-toggle i {
    transform: rotate(180deg);
}

/* Animacja zwijania */
.category-content {
    max-height: 5000px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 1;
}

.category-section.collapsed .category-content {
    max-height: 0;
    opacity: 0;
}

.category-section.collapsed .category-header {
    border-radius: 12px;
}

/* Przyciski kontrolne kategorii */
.category-controls {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 15px;
    padding: 0 5px;
}

.btn-category-control {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-category-control:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    filter: brightness(110%);
}

.btn-category-control:active {
    transform: translateY(0);
}

.btn-category-control i {
    font-size: 14px;
}

.subcategory {
    border-bottom: 1px solid var(--third-bg);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    transition: background 0.3s;
}

.subcategory:hover {
    background: var(--third-bg);
}

.subcategory-icon {
    width: 40px;
    height: 40px;
    background: var(--third-bg);
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-weight: bold;
    margin-right: 15px;
}

.subcategory-info {
    flex: 2;
    min-width: 0;
}

.subcategory-title a {
    color: #ccc;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.subcategory-title a:hover {
    color: #fff;
}

.subcategory-desc {
    color: #999;
    font-size: 14px;
}

.subcategory-desc img,
.category-desc img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 10px 0;
    display: block;
}

.subcategory-stats {
    text-align: center;
    min-width: 60px;
    width: 60px;
    margin: 0 10px;
    flex-shrink: 0;
}

.stats-number {
    font-weight: bold;
    color: #fff;
}

.stats-label {
    font-size: 12px;
    color: #999;
}

.subcategory-last {
    min-width: 200px;
    text-align: right;
}

.last-post-title {
    font-size: 14px;
    margin-bottom: 5px;
}

.last-post-title a {
    transition: color 0.3s;
    color: #ccc !important;
}

.last-post-title a:hover {
    color: #fff !important;
}

.last-post-info {
    font-size: 12px;
    color: #999;
}

.last-post-avatar {
    width: 20px;
    height: 20px;
    border-radius: 1px;
    display: inline-block;
    margin-right: 5px;
}

/* Sidebar */
.sidebar {
    width: 300px;
}

.sidebar-widget {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.widget-header {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: white;
    padding: 15px 20px;
    font-weight: bold;
}

.widget-content {
    padding: 15px 20px;
}

.online-user {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.online-user:last-child {
    border-bottom: none;
}

.online-avatar {
    width: 30px;
    height: 30px;
    border-radius: 1px;
    margin-right: 10px;
}

.online-info {
    flex: 1;
}

.online-username {
    font-weight: bold;
    margin-bottom: 2px;
}

.online-rank {
    font-size: 12px;
}

.online-time {
    font-size: 11px;
    color: #718096;
}

/* Stats */
.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-label {
    color: #718096;
}

.stat-value {
    font-weight: bold;
    color: #2d3748;
}

/* Recent Topics */
.recent-topic {
    padding: 10px 0;
    border-bottom: 1px solid #2d3748;
}

.recent-topic:last-child {
    border-bottom: none;
}

.recent-title {
    font-size: 14px;
    margin-bottom: 5px;
}

.recent-title a {
    transition: color 0.3s;
    color: #ccc !important;
}

.recent-title a:hover {
    color: #fff !important;
}

.recent-info {
    font-size: 12px;
    color: #999;
}

/* Rank Legend */
.rank-legend {
    line-height: 1.8;
    font-size: 14px;
}

.rank-legend span {
    font-weight: bold;
}

/* Forum Viewers Section */
.forum-viewers-section {
    margin: 40px auto 0;
    max-width: 1200px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--second-bg);
}

.forum-viewers-container {
    padding: 20px;
}

.forum-viewers-container h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 16px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--third-bg);
    padding-bottom: 8px;
}

.viewers-stats p {
    margin-bottom: 10px;
    color: #999;
    line-height: 1.6;
}

.viewers-stats p > strong {
    color: #fff;
}

.online-users-list {
    margin: 15px 0;
    line-height: 1.8;
}

.online-user-item {
    margin-right: 5px;
}

.forum-stats-summary {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--third-bg);
}

/* Rank Legend Section */
.rank-legend-section {
    margin: 40px auto 0;
    max-width: 1200px;
    border-radius: 8px;
    overflow: hidden;
}

.rank-legend-container {
    padding: 20px;
}

.rank-legend-container h3 {
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
    font-size: 18px;
}

.rank-item {
    font-size: 14px;
    display: inline-block;
    margin: 0;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.rank-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Footer */
.footer {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    color: #999;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.social-links {
    margin-top: 10px;
}

.social-links a {
    color: white;
    font-size: 24px;
    margin: 0 10px;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #81c784;
}

/* Responsive */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
    }
    
    .header-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-menu {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    /* Przyciski kontrolne kategorii */
    .category-controls {
        flex-direction: column;
        gap: 8px;
    }
    
    .btn-category-control {
        width: 100%;
        justify-content: center;
    }
    
    .category-toggle {
        width: 28px;
        height: 28px;
    }
    
    .category-toggle i {
        font-size: 14px;
    }
}
/* Pod-podkategorie (trzeci poziom) */
.sub-subcategories {
    margin-top: 8px;
    padding-left: 0;
    border-left: none;
    line-height: 1.8;
    display: block;
    width: 100%;
}

.sub-subcategory {
    display: inline;
    font-size: 13px;
    white-space: normal;
}

.sub-subcategory .bullet {
    color: #718096;
    font-size: 13px;
    font-weight: normal;
    margin: 0 6px;
    display: inline;
}

.sub-subcategory i {
    margin-right: 5px;
    color: #718096;
    font-size: 12px;
}

.sub-subcategory a {
    color: #ccc;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
    font-weight: 500;
    white-space: normal;
    display: inline;
}

.sub-subcategory a:hover {
    color: #fff;
    text-decoration: none;
}

.sub-subcategory a:visited {
    color: #718096;
    font-weight: 400;
}

.sub-subcategory-stats {
    color: #718096;
    font-size: 11px;
}

/* Badge dla rang wyglądowych */
.visual-rank-badge {
    margin-left: 10px;
    font-size: 11px;
}

/* Kategorie rang w legendzie */
.rank-category {
    margin-bottom: 20px;
}

.rank-category h4 {
    color: #ffffff;
    margin-bottom: 10px;
    font-size: 14px;
    border-bottom: 1px solid #2d3748;
    padding-bottom: 5px;
}

.rank-legend-grid {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Responsywność dla pod-podkategorii */
@media (max-width: 768px) {
    .sub-subcategories {
        padding-left: 10px;
    }
    
    .sub-subcategory {
        font-size: 12px;
    }
    
    .rank-legend-grid {
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
}

/* Ekipa Forum Online */
.staff-online-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.staff-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--main-bg);
    border-radius: 6px;
    border-left: 3px solid var(--third-bg);
    border-bottom: 3px solid var(--third-bg);
}

.staff-avatar {
    flex-shrink: 0;
}

.avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 1px;
    object-fit: cover;
    border: 2px solid #2d3748;
}

.staff-info {
    flex: 1;
    min-width: 0;
}

.staff-name {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 2px;
}

.staff-rank {
    font-size: 12px;
    color: #718096;
    margin-bottom: 2px;
}

.staff-activity {
    font-size: 11px;
    color: #a0aec0;
}

.no-staff-online {
    text-align: center;
    padding: 20px;
    color: #718096;
}

.no-staff-online i {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

.no-staff-online p {
    margin: 0;
    font-size: 14px;
}

/* Styles for message notifications */
.unread-messages {
    color: #e53e3e !important;
    animation: pulse 2s infinite;
}

.message-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e53e3e;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
/* BBCode Styles */
.bbcode-quote {
    background: #f8f9fa;
    border-left: 4px solid #667eea;
    padding: 15px;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

.bbcode-quote cite {
    display: block;
    font-weight: bold;
    color: #667eea;
    margin-bottom: 8px;
    font-style: normal;
}

.bbcode-code {
    background: #2d3748;
    color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    overflow-x: auto;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 14px;
    line-height: 1.4;
}

.bbcode-code code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.bbcode-highlight {
    background: #fff3cd;
    padding: 2px 4px;
    border-radius: 3px;
}

.bbcode-list {
    margin: 10px 0;
    padding-left: 30px;
}

.bbcode-list li {
    margin: 5px 0;
}

.bbcode-img {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: 10px 0;
}

.bbcode-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.bbcode-table th,
.bbcode-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #2d3748;
}

.bbcode-table th {
    background: #f8f9fa;
    font-weight: bold;
    color: #495057;
}

.bbcode-table tr:hover {
    background: #f8f9fa;
}

.bbcode-table tr:last-child td {
    border-bottom: none;
}
/* Panel Gracza - przycisk w nawigacji */
.nav-menu li a[href*="panel gracza"] {
    color: white !important;
    border-radius: 5px;
    padding: 8px 12px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.nav-menu li a[href*="panel gracza"]:hover {
    color: #81c784;
}

/* Panel Gracza - ikona w headerze */
.header-right a[href*="panel gracza"] {
    color: #667eea !important;
    font-size: 18px;
    transition: all 0.3s ease;
}

.header-right a[href*="panel gracza"]:hover {
    color: #5a67d8 !important;
    transform: scale(1.1);
}

/* Responsywność */
@media (max-width: 768px) {
    .nav-menu li a[href*="panel gracza"] {
        padding: 6px 10px;
        font-size: 14px;
    }
    
    .header-right a[href*="panel gracza"] {
        font-size: 16px;
    }
}


/* ========================================
   RESPONSYWNOŚĆ - URZĄDZENIA MOBILNE
   ======================================== */

/* Tablety i małe laptopy (1024px i mniej) */
@media (max-width: 1024px) {
    .main-container {
        padding: 0 15px;
    }
    
    .sidebar {
        width: 250px;
    }
    
    .subcategory-stats,
    .subcategory-last {
        min-width: auto;
    }
    
    .forum-chat-container {
        padding: 0 15px;
    }
}

/* Tablety pionowo i telefony poziomo (768px i mniej) */
@media (max-width: 768px) {
    /* Header */
    .header {
        padding: 10px 0;
    }
    
    .header-content {
        flex-direction: column;
        gap: 10px;
        padding: 0 10px;
    }
    
    .logo-text {
        font-size: 22px;
    }
    
    .logo-icon {
        width: 45px;
        height: 45px;
        font-size: 22px;
        margin-right: 10px;
    }
    
    .header-right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .search-box {
        width: 100%;
        order: 3;
    }
    
    .search-box input {
        width: 100%;
    }
    
    .user-menu {
        width: 100%;
        justify-content: center;
        order: 2;
    }
    
    /* Navigation */
    .navigation {
        padding: 5px 0;
    }
    
    .nav-content {
        padding: 0 10px;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
    
    .nav-menu li {
        width: 100%;
    }
    
    .nav-menu a {
        display: block;
        padding: 10px;
        border-radius: 5px;
    }
    
    /* Main Container */
    .main-container {
        flex-direction: column;
        padding: 0 10px;
        gap: 15px;
    }
    
    .sidebar {
        width: 100%;
        order: 2;
    }
    
    .forum-content {
        order: 1;
    }
    
    /* Announcements */
    .announcements {
        padding: 0 10px;
        margin: 15px auto;
    }
    
    .announcement {
        font-size: 14px;
        padding: 10px 15px;
    }
    
    /* Forum Chat */
    .forum-chat-container {
        padding: 0 10px;
    }
    
    .chat-header {
        padding: 12px 15px;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    .chat-admin-controls {
        width: 100%;
        justify-content: flex-start;
    }
    
    .chat-messages {
        height: 150px;
        padding: 10px;
    }
    
    .chat-message {
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
    }
    
    .chat-message-actions {
        opacity: 1;
        margin-left: 0;
        margin-top: 5px;
    }
    
    .chat-input-area {
        flex-direction: column;
        padding: 10px;
    }
    
    .chat-input-area input {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .btn-chat-send {
        width: 100%;
    }
    
    /* Categories */
    .category-section {
        margin-bottom: 20px;
    }
    
    .category-header {
        font-size: 14px;
        padding: 12px 15px;
    }
    
    .subcategory {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 15px;
        gap: 10px;
    }
    
    .subcategory-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
        margin-right: 0;
        margin-bottom: 5px;
    }
    
    .subcategory-info {
        width: 100%;
    }
    
    .subcategory-title {
        font-size: 15px;
    }
    
    .subcategory-desc {
        font-size: 13px;
    }
    
    .subcategory-stats {
        display: flex;
        gap: 20px;
        margin: 10px 0;
        width: 100%;
        justify-content: flex-start;
    }
    
    .subcategory-last {
        width: 100%;
        text-align: left;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #e2e8f0;
        min-width: auto;
    }
    
    .last-post-title {
        font-size: 13px;
    }
    
    .last-post-info {
        font-size: 11px;
    }
    
    /* Sub-subcategories */
    .sub-subcategories {
        padding-left: 10px;
    }
    
    .sub-subcategory {
        font-size: 12px;
    }
    
    /* Sidebar widgets */
    .sidebar-widget {
        margin-bottom: 15px;
    }
    
    .widget-header {
        padding: 12px 15px;
        font-size: 15px;
    }
    
    .widget-content {
        padding: 12px 15px;
    }
    
    .online-user {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
    }
    
    .online-avatar {
        width: 35px;
        height: 35px;
    }
    
    .staff-member {
        flex-direction: row;
        align-items: center;
        padding: 10px;
    }
    
    .avatar-small {
        width: 35px;
        height: 35px;
    }
    
    /* Forum viewers */
    .forum-viewers-section {
        margin: 30px auto 0;
    }
    
    .forum-viewers-container {
        padding: 15px;
    }
    
    .forum-viewers-container h3 {
        font-size: 15px;
    }
    
    .viewers-stats p {
        font-size: 14px;
        color: #999;
    }
    
    .online-users-list {
        font-size: 13px;
        line-height: 1.6;
    }
    
    /* Rank legend */
    .rank-legend-section {
        margin: 30px auto 0;
    }
    
    .rank-legend-container {
        padding: 15px;
    }
    
    .rank-legend-container h3 {
        font-size: 16px;
    }
    
    .rank-legend-grid {
        gap: 8px;
    }
    
    .rank-item {
        font-size: 12px;
        margin: 3px;
    }
    
    /* Buttons */
    .btn {
        padding: 6px 12px;
        font-size: 14px;
    }
    
    /* Mute panel */
    .mute-panel-content {
        width: 90%;
        padding: 15px;
    }
    
    .mute-buttons {
        flex-direction: column;
        gap: 8px;
    }
    
    .mute-buttons button {
        width: 100%;
    }
    
    /* Footer */
    .footer {
        padding: 15px 0;
        margin-top: 30px;
    }
    
    .footer-content {
        padding: 0 10px;
    }
    
    .social-links a {
        font-size: 20px;
        margin: 0 8px;
    }
}

/* Telefony pionowo (480px i mniej) */
@media (max-width: 480px) {
    /* Header */
    .header {
        padding: 8px 0;
    }
    
    .logo-text {
        font-size: 18px;
    }
    
    .logo-icon {
        width: 35px;
        height: 35px;
        font-size: 18px;
        margin-right: 8px;
    }
    
    .btn {
        padding: 6px 10px;
        font-size: 13px;
    }
    
    /* Navigation */
    .nav-menu a {
        padding: 8px;
        font-size: 14px;
    }
    
    /* Announcements */
    .announcement {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    /* Chat */
    .chat-header {
        font-size: 13px;
        padding: 10px 12px;
    }
    
    .chat-messages {
        height: 120px;
        font-size: 12px;
        padding: 8px;
    }
    
    .chat-time {
        font-size: 10px;
    }
    
    .chat-username {
        font-size: 13px;
    }
    
    .chat-text {
        font-size: 12px;
    }
    
    .btn-delete-message {
        width: 14px;
        height: 14px;
        font-size: 9px;
    }
    
    /* Categories */
    .category-header {
        font-size: 13px;
        padding: 10px 12px;
    }
    
    .category-icon {
        font-size: 16px;
    }
    
    .subcategory {
        padding: 10px 12px;
    }
    
    .subcategory-icon {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    
    .subcategory-title {
        font-size: 14px;
    }
    
    .subcategory-desc {
        font-size: 12px;
    }
    
    .stats-number {
        font-size: 14px;
    }
    
    .stats-label {
        font-size: 11px;
    }
    
    .last-post-title {
        font-size: 12px;
    }
    
    .last-post-info {
        font-size: 10px;
    }
    
    /* Sidebar */
    .widget-header {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .widget-content {
        padding: 10px 12px;
    }
    
    .online-avatar {
        width: 30px;
        height: 30px;
    }
    
    .online-username {
        font-size: 13px;
    }
    
    .online-rank {
        font-size: 11px;
    }
    
    .online-time {
        font-size: 10px;
    }
    
    .avatar-small {
        width: 30px;
        height: 30px;
    }
    
    .staff-name {
        font-size: 13px;
    }
    
    .staff-rank {
        font-size: 11px;
    }
    
    .staff-activity {
        font-size: 10px;
    }
    
    .stat-item {
        font-size: 12px;
        padding: 6px 0;
    }
    
    .recent-title {
        font-size: 13px;
    }
    
    .recent-info {
        font-size: 11px;
    }
    
    /* Forum viewers */
    .forum-viewers-container h3 {
        font-size: 14px;
    }
    
    .viewers-stats p {
        font-size: 13px;
    }
    
    .online-users-list {
        font-size: 12px;
    }
    
    /* Rank legend */
    .rank-legend-container h3 {
        font-size: 15px;
    }
    
    .rank-item {
        font-size: 11px;
        margin: 2px;
    }
    
    /* Mute panel */
    .mute-panel-content {
        width: 95%;
        padding: 12px;
    }
    
    .mute-panel-content h4 {
        font-size: 15px;
    }
    
    .mute-panel-content input,
    .mute-panel-content select {
        padding: 8px;
        font-size: 14px;
    }
    
    /* BBCode */
    .bbcode-quote {
        padding: 10px;
        font-size: 13px;
    }
    
    .bbcode-code {
        padding: 10px;
        font-size: 12px;
    }
    
    .bbcode-table th,
    .bbcode-table td {
        padding: 8px;
        font-size: 12px;
    }
    
    /* Footer */
    .footer {
        font-size: 13px;
    }
    
    .social-links a {
        font-size: 18px;
        margin: 0 6px;
    }
}

/* Bardzo małe telefony (360px i mniej) */
@media (max-width: 360px) {
    .logo-text {
        font-size: 16px;
    }
    
    .logo-icon {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    
    .category-header {
        font-size: 12px;
        padding: 8px 10px;
    }
    
    .subcategory {
        padding: 8px 10px;
    }
    
    .subcategory-title {
        font-size: 13px;
    }
    
    .subcategory-desc {
        font-size: 11px;
    }
    
    .chat-messages {
        height: 100px;
    }
    
    .rank-item {
        font-size: 10px;
    }
}


/* User Mentions (@username) */
.user-mention {
    padding: 2px 4px;
    border-radius: 3px;
    background: rgba(102, 126, 234, 0.1);
    transition: all 0.2s;
    cursor: pointer;
}

.user-mention:hover {
    background: rgba(102, 126, 234, 0.2);
    text-decoration: underline !important;
}


/* ===== STYLE DLA TREŚCI POSTÓW ===== */

/* Wyśrodkowany tekst */
.post-content div[style*="text-align: center"],
.post-content div[style*="text-align:center"] {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

/* Wyrównany do prawej */
.post-content div[style*="text-align: right"],
.post-content div[style*="text-align:right"] {
    text-align: right !important;
    display: block !important;
    width: 100% !important;
}

/* Wyrównany do lewej */
.post-content div[style*="text-align: left"],
.post-content div[style*="text-align:left"] {
    text-align: left !important;
    display: block !important;
    width: 100% !important;
}

/* Wyjustowany */
.post-content div[style*="text-align: justify"],
.post-content div[style*="text-align:justify"] {
    text-align: justify !important;
    display: block !important;
    width: 100% !important;
}

/* Listy numerowane */
.post-content ol {
    margin: 10px 0 10px 30px !important;
    padding: 0 !important;
    list-style-type: decimal !important;
    list-style-position: outside !important;
    text-align: left !important; /* Wymusza wyrównanie do lewej dla list */
}

/* Listy numerowane wewnątrz wyśrodkowanego tekstu */
.post-content div[style*="text-align: center"] ol,
.post-content div[style*="text-align:center"] ol {
    display: table !important; /* Używamy table aby lista była wyśrodkowana */
    text-align: left !important; /* Tekst wewnątrz listy jest do lewej */
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    margin-left: auto !important; /* Wyśrodkowanie */
    margin-right: auto !important; /* Wyśrodkowanie */
    padding-left: 30px !important;
    list-style-position: inside !important; /* Zmień na inside aby numeracja była wewnątrz */
}

/* Listy punktowane */
.post-content ul {
    margin: 10px 0 10px 30px !important;
    padding: 0 !important;
    list-style-type: disc !important;
    list-style-position: outside !important;
}

/* Listy punktowane wewnątrz wyśrodkowanego tekstu */
.post-content div[style*="text-align: center"] ul,
.post-content div[style*="text-align:center"] ul {
    display: table !important; /* Używamy table aby lista była wyśrodkowana */
    text-align: left !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    margin-left: auto !important; /* Wyśrodkowanie */
    margin-right: auto !important; /* Wyśrodkowanie */
    padding-left: 30px !important;
    list-style-position: inside !important; /* Zmień na inside aby kropki były wewnątrz */
}

/* Elementy list */
.post-content li {
    margin: 5px 0 !important;
    padding: 0 !important;
    display: list-item !important;
}

/* Usuń nadmiarowe <br> wewnątrz list */
.post-content ol br,
.post-content ul br {
    display: none !important;
}

/* Usuń nadmiarowe <br> wewnątrz elementów listy */
.post-content li br:first-child,
.post-content li br:last-child {
    display: none !important;
}

/* Blockquote (cytaty) */
.post-content blockquote {
    margin: 15px 0 !important;
    padding: 10px 15px !important;
    background: #f8f9fa !important;
    border-left: 4px solid #007bff !important;
    border-radius: 4px !important;
}

/* Kod */
.post-content pre {
    margin: 15px 0 !important;
    padding: 15px !important;
    background: #2d3748 !important;
    color: #fff !important;
    border-radius: 4px !important;
    overflow-x: auto !important;
}

.post-content code {
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
}

/* Obrazy */
.post-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 4px !important;
    margin: 10px 0 !important;
}

/* Linki */
.post-content a {
    color: #007bff !important;
    text-decoration: none !important;
}

.post-content a:hover {
    text-decoration: underline !important;
}

/* Usuń nadmiarowe puste linie */
.post-content br + br + br {
    display: none !important;
}


/* Prefix Badge Styles */
.prefix-badge-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 10px 0 !important;
    width: 100% !important;
    text-align: center !important;
}

.prefix-badge {
    display: inline-block !important;
    padding: 8px 16px !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* Ensure prefix badge is centered in post content */
.post-content .prefix-badge-container {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.post-content .prefix-badge {
    margin: 0 auto !important;
}

/* Center images in centered divs */
.post-content div[style*="text-align: center"] img,
.post-content div[style*="text-align:center"] img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ========================================
   DARK MODE STYLES
   ======================================== */
/* Dark Mode Styles */
body.dark-mode {
    background: #1a202c !important;
    color: #e2e8f0 !important;
}

/* Header */
.dark-mode header {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%) !important;
}

.dark-mode .logo-text {
    color: #e2e8f0 !important;
}

/* Navigation */
.dark-mode nav {
    background: rgba(45, 55, 72, 0.95) !important;
}

.dark-mode .nav-menu a {
    color: #cbd5e0 !important;
}

.dark-mode .nav-menu a:hover {
    color: #81c784 !important;
}

/* Containers */
.dark-mode .container,
.dark-mode .forum-container,
.dark-mode .topic-container,
.dark-mode .category-container {
    background: #2d3748 !important;
}

/* Topic Header */
.dark-mode .topic-header {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

.dark-mode .topic-title {
    color: #e2e8f0 !important;
}

.dark-mode .topic-meta {
    color: #a0aec0 !important;
}

/* Categories */
.dark-mode .category {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

.dark-mode .category-header {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%) !important;
    color: #e2e8f0 !important;
}

.dark-mode .subcategory {
    background: #1a202c !important;
    border-color: #4a5568 !important;
}

.dark-mode .subcategory:hover {
    background: #2d3748 !important;
}

.dark-mode .subcategory-name a {
    color: #90cdf4 !important;
}

.dark-mode .subcategory-description {
    color: #a0aec0 !important;
}

.dark-mode .subcategory-stats {
    color: #718096 !important;
}

/* Topics */
.dark-mode .topic-item {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

.dark-mode .topic-item:hover {
    background: #374151 !important;
}

.dark-mode .topic-title a {
    color: #90cdf4 !important;
}

.dark-mode .topic-meta {
    color: #a0aec0 !important;
}

/* Posts */
.dark-mode .post {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

.dark-mode .post-header {
    background: #1a202c !important;
    border-color: #4a5568 !important;
}

.dark-mode .post-author {
    background: #1a202c !important;
    border-color: #4a5568 !important;
}

.dark-mode .post-author-info {
    color: #cbd5e0 !important;
}

.dark-mode .post-content {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
}

.dark-mode .post-content * {
    color: #e2e8f0 !important;
}

.dark-mode .post-content h1,
.dark-mode .post-content h2,
.dark-mode .post-content h3,
.dark-mode .post-content h4,
.dark-mode .post-content h5,
.dark-mode .post-content h6 {
    color: #e2e8f0 !important;
}

.dark-mode .post-content p,
.dark-mode .post-content div,
.dark-mode .post-content span,
.dark-mode .post-content li,
.dark-mode .post-content strong,
.dark-mode .post-content b,
.dark-mode .post-content em,
.dark-mode .post-content i {
    color: #e2e8f0 !important;
}

.dark-mode .post-content a {
    color: #90cdf4 !important;
}

.dark-mode .post-content blockquote {
    background: #1a202c !important;
    border-left-color: #4a5568 !important;
    color: #cbd5e0 !important;
}

.dark-mode .post-content blockquote * {
    color: #cbd5e0 !important;
}

.dark-mode .post-content pre {
    background: #1a202c !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

.dark-mode .post-content code {
    background: #1a202c !important;
    color: #90cdf4 !important;
}

.dark-mode .post-footer {
    background: #1a202c !important;
    border-color: #4a5568 !important;
}

/* Override any inline color styles in posts */
.dark-mode .post-content [style*="color: #"] {
    /* Keep custom colors but ensure they're visible */
}

.dark-mode .post-content [style*="color: black"],
.dark-mode .post-content [style*="color: #000"],
.dark-mode .post-content [style*="color:#000"],
.dark-mode .post-content [style*="color: rgb(0, 0, 0)"] {
    color: #e2e8f0 !important;
}

/* Sidebar */
.dark-mode .sidebar-widget {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

.dark-mode .widget-header {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%) !important;
    color: #e2e8f0 !important;
}

.dark-mode .widget-content {
    color: #cbd5e0 !important;
    background: #2d3748 !important;
}

/* Staff Online */
.dark-mode .staff-member {
    background: #1a202c !important;
    border-left-color: #4a5568 !important;
    border-bottom-color: #4a5568 !important;
}

.dark-mode .staff-rank {
    color: #a0aec0 !important;
}

.dark-mode .staff-activity {
    color: #718096 !important;
}

/* Online Users */
.dark-mode .online-user {
    background: #1a202c !important;
}

.dark-mode .online-username {
    color: #e2e8f0 !important;
}

.dark-mode .online-time {
    color: #a0aec0 !important;
}

/* Topic Actions */
.dark-mode .topic-actions {
    background: #2d3748 !important;
}

/* Breadcrumbs */
.dark-mode .breadcrumb,
.dark-mode .breadcrumbs {
    background: #2d3748 !important;
    color: #cbd5e0 !important;
}

.dark-mode .breadcrumb a,
.dark-mode .breadcrumbs a {
    color: #90cdf4 !important;
}

/* All white backgrounds to dark */
.dark-mode div[style*="background: white"],
.dark-mode div[style*="background:white"],
.dark-mode div[style*="background-color: white"],
.dark-mode div[style*="background-color:white"],
.dark-mode div[style*="background: #fff"],
.dark-mode div[style*="background:#fff"],
.dark-mode div[style*="background-color: #fff"],
.dark-mode div[style*="background-color:#fff"] {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
}

/* Chat */
.dark-mode .forum-chat {
    background: #2d3748;
    border-color: #4a5568;
}

.dark-mode .chat-header {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
}

.dark-mode .chat-messages {
    background: #1a202c;
    border-color: #4a5568;
}

.dark-mode .chat-message {
    border-bottom-color: #4a5568;
}

.dark-mode .chat-text {
    color: #cbd5e0;
}

.dark-mode .chat-input-area {
    background: #2d3748;
}

.dark-mode #chatMessage {
    background: #1a202c;
    border-color: #4a5568;
    color: #e2e8f0;
}

/* Forms & Inputs */
.dark-mode input[type="text"],
.dark-mode input[type="password"],
.dark-mode input[type="email"],
.dark-mode textarea,
.dark-mode select {
    background: #1a202c !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #718096 !important;
}

/* Reply Form */
.dark-mode .reply-form,
.dark-mode .post-form,
.dark-mode form[method="POST"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

.dark-mode .reply-form h3,
.dark-mode .post-form h3 {
    color: #e2e8f0 !important;
}

.dark-mode .reply-form label,
.dark-mode .post-form label {
    color: #cbd5e0 !important;
}

/* Form sections */
.dark-mode .form-section,
.dark-mode .form-group {
    background: #2d3748 !important;
}

/* Override white backgrounds in forms */
.dark-mode form div[style*="background: white"],
.dark-mode form div[style*="background:white"],
.dark-mode form div[style*="background-color: white"],
.dark-mode form div[style*="background-color:white"] {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
}

/* Buttons */
.dark-mode .btn {
    background: #4a5568;
    color: #e2e8f0;
}

.dark-mode .btn:hover {
    background: #2d3748;
}

.dark-mode .btn-primary {
    background: #3182ce;
}

.dark-mode .btn-primary:hover {
    background: #2c5282;
}

.dark-mode .btn-success {
    background: #38a169;
}

.dark-mode .btn-success:hover {
    background: #2f855a;
}

.dark-mode .btn-danger {
    background: #e53e3e;
}

.dark-mode .btn-danger:hover {
    background: #c53030;
}

/* Pagination */
.dark-mode .pagination a {
    background: #2d3748;
    border-color: #4a5568;
    color: #90cdf4;
}

.dark-mode .pagination a:hover {
    background: #4a5568;
}

.dark-mode .pagination .active {
    background: #3182ce;
    color: white;
}

/* Tables */
.dark-mode table {
    background: #2d3748;
    border-color: #4a5568;
}

.dark-mode th {
    background: #1a202c;
    color: #e2e8f0;
    border-color: #4a5568;
}

.dark-mode td {
    border-color: #4a5568;
    color: #cbd5e0;
}

/* Modals */
.dark-mode .modal-content {
    background: #2d3748;
    color: #e2e8f0;
}

/* SCEditor */
.dark-mode .sceditor-container {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}

.dark-mode .sceditor-toolbar {
    background: #1a202c !important;
    border-color: #4a5568 !important;
}

.dark-mode .sceditor-button {
    color: #e2e8f0 !important;
    background: #2d3748 !important;
}

.dark-mode .sceditor-button:hover {
    background: #4a5568 !important;
}

.dark-mode .sceditor-button.active {
    background: #4a5568 !important;
}

.dark-mode iframe,
.dark-mode .sceditor-container iframe {
    background: #2d3748 !important;
}

/* SCEditor wysiwyg mode */
.dark-mode .sceditor-container iframe html {
    background: #2d3748 !important;
}

.dark-mode .sceditor-container iframe body {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
}

/* SCEditor source mode (textarea) */
.dark-mode .sceditor-container textarea {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
}

/* Announcements */
.dark-mode .announcement.info {
    background: #1e3a5f;
    color: #90cdf4;
    border-left-color: #3182ce;
}

.dark-mode .announcement.success {
    background: #1c4532;
    color: #9ae6b4;
    border-left-color: #38a169;
}

.dark-mode .announcement.warning {
    background: #5f370e;
    color: #fbd38d;
    border-left-color: #d69e2e;
}

/* Search Box */
.dark-mode .search-box input {
    background: #1a202c;
    color: #e2e8f0;
    border-color: #4a5568;
}

.dark-mode .search-box button {
    background: #4a5568;
}

/* User Popup */
.dark-mode .user-popup {
    background: #2d3748;
    border-color: #4a5568;
}

.dark-mode .user-popup-header {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
}

.dark-mode .user-popup-body {
    color: #cbd5e0;
}

/* Settings Page */
.dark-mode .settings-section {
    background: #2d3748;
    border-color: #4a5568;
}

.dark-mode .settings-section h3 {
    color: #e2e8f0;
    border-bottom-color: #4a5568;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 1px;
    background: #3182ce;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s;
    z-index: 999;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.dark-mode .dark-mode-toggle {
    background: #f59e0b;
}

/* ========================================
   USER POPUP STYLES
   ======================================== */
/* Style dla popupów użytkowników */
.user-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.user-popup.show {
    display: block;
    opacity: 1;
}

.user-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.user-popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    animation: popupSlideIn 0.3s ease;
}

@keyframes popupSlideIn {
    from {
        transform: translate(-50%, -60%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.user-popup-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-popup-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.user-popup-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
    transition: background-color 0.2s;
}

.user-popup-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.user-popup-body {
    padding: 20px;
    max-height: calc(90vh - 80px); /* 80px to wysokość headera */
    overflow-y: auto;
}

.user-popup-loading {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 16px;
}

.user-popup-loading i {
    margin-right: 10px;
    color: #667eea;
}

.user-popup-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.user-popup-user-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.user-popup-avatar {
    flex-shrink: 0;
}

.user-popup-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 1px;
    border: 3px solid #e2e8f0;
    object-fit: cover;
}

.user-popup-details {
    flex: 1;
}

.user-popup-details h4 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: #2d3748;
}

.user-popup-rank {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 600;
}

.user-popup-faction {
    font-size: 14px;
    color: #718096;
    margin-bottom: 15px;
}

.user-popup-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-row {
    display: flex;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid #f1f1f1;
    font-size: 13px;
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-label {
    font-weight: 400;
    color: #718096;
    margin-right: 8px;
    min-width: 140px;
}

.stat-value {
    font-weight: 600;
    color: #2d3748;
}

.stat-extra {
    color: #718096;
    font-weight: 400;
}

.stat-extra span {
    font-weight: 600;
    color: #2d3748;
}

.user-popup-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

.user-popup-actions .btn {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    flex: 1;
    justify-content: center;
    min-width: 140px;
}

.btn-message {
    background: #4299e1;
    color: white;
}

.btn-message:hover {
    background: #3182ce;
    transform: translateY(-1px);
}

.btn-profile {
    background: #38a169;
    color: white;
}

.btn-profile:hover {
    background: #2f855a;
    transform: translateY(-1px);
}

.btn-ban {
    background: #e53e3e;
    color: white;
}

.btn-ban:hover {
    background: #c53030;
    transform: translateY(-1px);
}

/* Style dla linków użytkowników */
.user-link {
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    position: relative;
}

.user-link:hover {
    text-decoration: underline;
    transform: translateY(-1px);
}

/* Responsywność */
@media (max-width: 768px) {
    .user-popup-content {
        width: 95%;
        margin: 20px;
    }
    
    .user-popup-user-header {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .user-popup-avatar {
        align-self: center;
    }
    
    .user-popup-actions {
        flex-direction: column;
    }
    
    .user-popup-actions .btn {
        min-width: auto;
        width: 100%;
    }
    
    .stat-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
    }
    
    .stat-label {
        min-width: auto;
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .user-popup-header {
        padding: 15px;
    }
    
    .user-popup-header h3 {
        font-size: 16px;
    }
    
    .user-popup-body {
        padding: 15px;
    }
    
    .user-popup-avatar img {
        width: 60px;
        height: 60px;
    }
    
    .user-popup-details h4 {
        font-size: 18px;
    }
}

/* Animacje */
.user-popup-content {
    animation: popupSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.user-link {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:active {
    transform: translateY(0);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .user-popup-content {
        background: #2d3748;
        color: #e2e8f0;
    }
    
    .user-popup-details h4 {
        color: #e2e8f0;
    }
    
    .stat-label {
        color: #a0aec0;
    }
    
    .stat-value {
        color: #e2e8f0;
    }
    
    .stat-item {
        border-bottom-color: #4a5568;
    }
    
    .user-popup-actions {
        border-top-color: #4a5568;
    }
}
/* ========================================
   FORCE FIX STYLES
   ======================================== */
/* FORCE FIX - NAJWYŻSZY PRIORYTET DLA TEXTAREA */

/* Resetuj wszystkie możliwe style dla textarea */
textarea,
textarea.text-editor-textarea,
textarea[data-editor="true"],
textarea#content,
textarea#edit_content,
textarea#signature,
textarea#message_content,
input[type="text"],
input[type="email"],
input[type="password"] {
    color: #000000 !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    font-size: 14px !important;
    font-family: Arial, sans-serif !important;
    padding: 8px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    -webkit-text-fill-color: #000000 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
    transform: none !important;
}

/* Wymuszenie dla wszystkich stanów */
textarea:focus,
textarea:active,
textarea:hover,
textarea:visited,
textarea:link {
    color: #000000 !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Wymuszenie dla placeholder */
textarea::placeholder,
textarea::-webkit-input-placeholder,
textarea::-moz-placeholder,
textarea:-ms-input-placeholder {
    color: #999999 !important;
    opacity: 0.7 !important;
}

/* Wymuszenie dla selection */
textarea::selection,
textarea::-moz-selection {
    background: #3399ff !important;
    color: #ffffff !important;
}

/* Nadpisz wszystkie możliwe selektory */
body textarea,
html textarea,
div textarea,
form textarea,
* textarea {
    color: #000000 !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Specjalne wymuszenie dla edytora */
.text-editor-textarea,
[data-editor="true"] {
    color: #000000 !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
    caret-color: #000000 !important;
}

/* Wymuszenie dla wszystkich elementów wewnątrz textarea */
textarea * {
    color: inherit !important;
}

/* Dodatkowe wymuszenie przez CSS variables */
textarea {
    --text-color: #000000;
    --bg-color: #ffffff;
    color: var(--text-color) !important;
    background-color: var(--bg-color) !important;
}
/* DODATKOWE WYMUSZENIE WIDOCZNOŚCI TEKSTU */

/* Bardzo agresywne wymuszenie dla textarea z zawartością */
textarea:not(:empty) {
    color: #ccc !important;
    background-color: var(--second-bg) !important;
    -webkit-text-fill-color: #ccc !important;
}

/* Wymuszenie dla textarea które mają wartość */
textarea[value]:not([value=""]) {
    color: #ccc !important;
    background-color: var(--second-bg) !important;
    -webkit-text-fill-color: #ccc !important;
}

/* Wymuszenie podczas pisania */
textarea:focus:not(:placeholder-shown) {
    color: #ccc !important;
    background-color: var(--second-bg) !important;
    -webkit-text-fill-color: #ccc !important;
}

/* Wymuszenie dla textarea z tekstem */
textarea:not([value=""]):not(:placeholder-shown) {
    color: #ccc !important;
    background-color: var(--second-bg) !important;
    -webkit-text-fill-color: #ccc !important;
}

/* Ostateczne wymuszenie przez JavaScript będzie dodane */
/* WYMUSZENIE WIDOCZNOŚCI TREŚCI POSTÓW */
.post-content,
.post-content *,
div[id^="post-content-"],
div[id^="post-content-"] * {
    color: #ccc !important;
    background-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Wymuszenie dla wszystkich elementów w treści postów */
.post-content p,
.post-content div,
.post-content span,
.post-content strong,
.post-content em,
.post-content u,
.post-content s {
    color: #999 !important;
}

/* Wymuszenie dla BBCode elementów */
.bbcode-quote,
.bbcode-code,
.bbcode-highlight {
    color: #ccc !important;
    background-color: #f8f9fa !important;
}
/* Style dla niestandardowych tagów forum */
.forum-zwrot,
.forum-blad {
    background: #e6f3ff;
    border: 1px solid #4a90e2;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
    color: #000000 !important;
}

.forum-zwrot strong,
.forum-blad strong {
    color: #2c5aa0 !important;
}

.forum-blad {
    background: #ffe6e6;
    border-color: #e24a4a;
}

.forum-blad strong {
    color: #a02c2c !important;
}
/* SPECJALNE WYMUSZENIE DLA BBCODE EDYTORA */
.text-editor-textarea,
textarea.text-editor-textarea,
textarea[data-editor="true"] {
    color: #000000 !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
    border: 1px solid #dee2e6 !important;
    font-size: 14px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    padding: 15px !important;
    line-height: 1.6 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Wymuszenie podczas różnych stanów */
.text-editor-textarea:focus,
.text-editor-textarea:active,
.text-editor-textarea:hover,
textarea.text-editor-textarea:focus,
textarea.text-editor-textarea:active,
textarea.text-editor-textarea:hover {
    color: #000000 !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Wymuszenie dla placeholder */
.text-editor-textarea::placeholder,
.text-editor-textarea::-webkit-input-placeholder,
.text-editor-textarea::-moz-placeholder,
.text-editor-textarea:-ms-input-placeholder {
    color: #999999 !important;
    opacity: 0.7 !important;
}

/* Wymuszenie dla selection */
.text-editor-textarea::selection,
.text-editor-textarea::-moz-selection {
    background: #3399ff !important;
    color: #ffffff !important;
}

/* Bardzo agresywne wymuszenie przez CSS variables */
.text-editor-textarea {
    --text-color: #000000 !important;
    --bg-color: #ffffff !important;
    color: var(--text-color) !important;
    background-color: var(--bg-color) !important;
}

/* Wymuszenie dla wszystkich textarea w kontenerze edytora */
.text-editor-toolbar + textarea,
.text-editor-toolbar ~ textarea {
    color: #000000 !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
}
/* SPECJALNE WYMUSZENIE DLA TEXTAREA EDYCJI POSTÓW */
textarea[name="edit_content"],
textarea[id^="edit_content_"] {
    color: #000000 !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
    border: 1px solid #dee2e6 !important;
    font-size: 14px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    padding: 10px !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Wymuszenie podczas różnych stanów dla edycji */
textarea[name="edit_content"]:focus,
textarea[name="edit_content"]:active,
textarea[id^="edit_content_"]:focus,
textarea[id^="edit_content_"]:active {
    color: #000000 !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Wymuszenie dla wszystkich textarea w formularzach edycji */
div[id^="edit-form-"] textarea {
    color: #000000 !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
}
/* BARDZO AGRESYWNE WYMUSZENIE DLA TEXTAREA EDYCJI */
textarea[name="edit_content"],
textarea[id^="edit_content_"],
div[id^="edit-form-"] textarea {
    color: #000000 !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
    border: 1px solid #dee2e6 !important;
    font-size: 14px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    padding: 10px !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Wymuszenie dla wszystkich stanów textarea edycji */
textarea[name="edit_content"]:focus,
textarea[name="edit_content"]:active,
textarea[name="edit_content"]:hover,
textarea[id^="edit_content_"]:focus,
textarea[id^="edit_content_"]:active,
textarea[id^="edit_content_"]:hover,
div[id^="edit-form-"] textarea:focus,
div[id^="edit-form-"] textarea:active,
div[id^="edit-form-"] textarea:hover {
    color: #000000 !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25) !important;
}

/* Wymuszenie przez CSS variables dla edycji */
textarea[name="edit_content"],
textarea[id^="edit_content_"] {
    --text-color: #000000 !important;
    --bg-color: #ffffff !important;
    color: var(--text-color) !important;
    background-color: var(--bg-color) !important;
}

/* Nadpisz wszystkie możliwe style dla textarea edycji */
body textarea[name="edit_content"],
html textarea[name="edit_content"],
* textarea[name="edit_content"],
body textarea[id^="edit_content_"],
html textarea[id^="edit_content_"],
* textarea[id^="edit_content_"] {
    color: #000000 !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
}

.announcement.warning {
    background: linear-gradient(120deg, rgb(255 165 0 / 20%), var(--second-bg) 70%);
    color: orange;
    border-left: 4px solid orange;
}

.alert-success {
    background-color: rgb(0 128 0 / 30%);
    color: #97ff97;
    border: 1px solid green;
    text-align: center;
}

.widget-header, .category-header, .table-header, .login-header, .post-header, .messages-header, .chat-header, .settings-header, .menu-item.active, .stat-card
{
    background: linear-gradient(120deg, rgba(129, 199, 132, .3), var(--third-bg) 40%);
}

.header {
    background: linear-gradient(120deg, rgba(129, 199, 132, .3), var(--second-bg) 40%);
}

.sidebar-widget, .bans-table, .login-container
{
    border: 1px solid var(--third-bg);
}

.profile-section, .settings-section, .users-header, .user-row, .sidebar-widget, .category-section, .bans-table, .footer, .login-container, .main-content, .progress-bar, .forum-chat-section, .topic-header, .post, .reputation-btn, .reputation-score, .reply-form, .navigation, .send-message-section, .messages-list-section, .message-content, .sceditor-container iframe, .sceditor-container textarea, div.sceditor-toolbar, div.sceditor-group, .admin-section, .theme-card, .subcategory, .actions, .color-category, .menu-section
{
    background: var(--second-bg);
}

.profile-section h2, .settings-section h2, .rank-legend-container h3, .viewers-stats p, .forum-viewers-container h3
{
    color: #fff;
    border-color: var(--third-bg);
}

.current-avatar-preview, .login-info, .info-card, .stat-group, .ranking, .post-footer, .sceditor-container, .subcategory-icon, .color-item, .menu-item:hover, .post-item:hover
{
    background: var(--third-bg);
}

        .profile-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
        }
        
        .profile-header {
    background: linear-gradient(120deg, rgba(129, 199, 132, .3), var(--second-bg) 40%);
            color: white;
            padding: 30px;
            border-radius: 10px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 30px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .profile-avatar-large {
            width: 150px;
            height: 150px;
            border-radius: 1px;
            border: 5px solid var(--third-bg);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        .profile-header-info {
            flex: 1;
        }
        
        .profile-header-info h1 {
            margin: 0 0 10px 0;
            font-size: 2.5em;
        }
        
        .profile-rank {
            font-size: 1.2em;
            opacity: 0.9;
            margin-bottom: 15px;
        }
        
        .profile-meta {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }
        
        .profile-meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .profile-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .profile-section {
            background: var(--second-bg);
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .profile-section h2 {
            margin: 0 0 20px 0;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--third-bg);
            color: #fff;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .stat-box {
            background: var(--second-bg);
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            border: 2px solid var(--third-bg);
            transition: all 0.3s;
        }
        
        .stat-box:hover {
            border-color: var(--green-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px var(--green-hover);
        }
        
        .stat-box i {
            font-size: 2em;
            color: var(--green-color);
            margin-bottom: 10px;
        }
        
        .stat-number {
            display: block;
            font-size: 2em;
            font-weight: bold;
            color: var(--green-color);
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: #999;
            font-size: 0.9em;
        }
        
        .info-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .info-list li {
            padding: 12px 0;
            border-bottom: 1px solid var(--third-bg);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .info-list li:last-child {
            border-bottom: none;
        }
        
        .info-label {
            color: #ccc;
            font-weight: 600;
        }
        
        .info-value {
            color: #999;
            font-weight: 500;
        }
        
        .recent-posts {
            grid-column: 1 / -1;
        }
        
        .post-item {
            background: var(--second-bg);
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            border-left: 4px solid #667eea;
            transition: all 0.3s;
        }
        
        .post-item:hover {
            background: var(--third-bg);
            transform: translateX(5px);
        }
        
        .post-item:last-child {
            margin-bottom: 0;
        }
        
        .post-title {
            font-weight: bold;
            color: #ccc;
            margin-bottom: 8px;
        }
        
        .post-title a {
            color: #ccc;
            text-decoration: none;
        }
        
        .post-title a:hover {
            color: #fff;
        }
        
        .post-excerpt {
            color: #718096;
            font-size: 0.9em;
            margin-bottom: 8px;
            line-height: 1.5;
        }
        
        .post-meta {
            display: flex;
            gap: 15px;
            font-size: 0.85em;
            color: #a0aec0;
        }
        
        .no-posts {
            text-align: center;
            padding: 40px;
            color: #718096;
        }
        
        .btn-find-posts {
            display: inline-block;
            padding: 10px 20px;
            background: #667eea;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: all 0.3s;
            margin-top: 10px;
        }
        
        .btn-find-posts:hover {
            background: #5568d3;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }
        
        @media (max-width: 768px) {
            .profile-header {
                flex-direction: column;
                text-align: center;
            }
            
            .profile-content {
                grid-template-columns: 1fr;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }

.profile-rank {
    background: var(--third-bg);
    padding: 5px 10px;
    border-radius: 50px;
    margin-bottom: 1rem;
    display: grid;
    max-width: fit-content;
}

.profile-meta-item {
    background: var(--third-bg);
    padding: 2px 10px;
    color: #ccc
}

        .settings-container {
            max-width: 900px;
            margin: 20px auto;
            padding: 20px;
        }
        
        .settings-header {
            color: white;
            padding: 30px;
            border-radius: 10px;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .settings-header h1 {
            margin: 0;
            font-size: 2em;
        }
        
        .alert {
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            animation: slideIn 0.3s ease;
        }
        
        @keyframes slideIn {
            from {
                transform: translateY(-10px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .alert-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .settings-section {
            background: var(--second-bg);
            border-radius: 10px;
            padding: 30px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .settings-section h2 {
            margin: 0 0 20px 0;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--third-bg);
            color: #fff;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #fff;
        }
        
        .form-group input[type="text"],
        .form-group input[type="email"],
        .form-group input[type="password"],
        .form-group input[type="url"],
        .form-group input[type="file"],
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid var(--third-bg);
            border-radius: 8px;
            font-size: 14px;
            box-sizing: border-box;
            transition: all 0.3s;
            font-family: inherit;
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 80px;
        }
        
        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .form-help {
            display: block;
            margin-top: 5px;
            color: #999;
            font-size: 0.85em;
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px;
            background: var(--third-bg);
            border-radius: 8px;
            margin-bottom: 15px;
        }
        
        .checkbox-group input[type="checkbox"] {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        
        .checkbox-group label {
            margin: 0;
            cursor: pointer;
            font-weight: 500;
            color: #ccc;
        }
        
        .current-avatar-preview {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 15px;
            background: var(--third-bg);
            border-radius: 8px;
            margin-bottom: 15px;
        }
        
        .current-avatar-preview img {
            width: 80px;
            height: 80px;
            border-radius: 1px;
            border: 3px solid #667eea;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        
        .btn-secondary {
            background: #e2e8f0;
            color: #2d3748;
        }
        
        .btn-secondary:hover {
            background: #cbd5e0;
        }
        
        .form-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        
        @media (max-width: 768px) {
            .settings-container {
                padding: 10px;
            }
            
            .settings-section {
                padding: 20px;
            }
            
            .form-actions {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
                justify-content: center;
            }
        }

textarea, textarea.text-editor-textarea, textarea[data-editor="true"], textarea#content, textarea#edit_content, textarea#signature, textarea#message_content, input[type="text"], input[type="email"], input[type="password"],
textarea:not([value=""]):not(:placeholder-shown), .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group input[type="url"], .form-group input[type="file"], .form-group textarea, .form-group select
 {
    background-color: var(--second-bg) !important;
    border-color: var(--third-bg) !important;
    color: #ccc !important;
    -webkit-text-fill-color: #ccc !important;
}

        /* Ukryj oryginalne textarea - SCEditor tworzy własny edytor */
        textarea[id^="edit_content_"],
        textarea#content {
            display: none !important;
            visibility: hidden !important;
            position: absolute !important;
            left: -9999px !important;
            width: 0 !important;
            height: 0 !important;
        }
        
        /* Ukryj textarea które jest wewnątrz kontenera SCEditor */
        .sceditor-container textarea {
            display: none !important;
            visibility: hidden !important;
        }
        
        .topic-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        
        .topic-header {
            background: var(--second-bg);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .topic-title {
            color: #fff;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .topic-meta {
            color: #999;
            margin-bottom: 15px;
        }
        
        .topic-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            text-decoration: none;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        
        .btn-primary {
            background: #4299e1;
            color: white;
        }
        
        .btn-success {
            background: #38a169;
            color: white;
        }
        
        .btn-warning {
            background: #d69e2e;
            color: white;
        }
        
        .btn-danger {
            background: #e53e3e;
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        .post {
            background: var(--second-bg);
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .post-header {
            padding: 15px 20px;
            border-bottom: 1px solid var(--third-bg);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .post-author {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .post-avatar {
            width: 50px;
            height: 50px;
            border-radius: 1px;
        }
        
        .author-info h4 {
            margin: 0 0 5px 0;
            color: #2d3748;
        }
        
        .author-meta {
            font-size: 12px;
            color: #999;
        }
        
        .post-date {
            font-size: 12px;
            color: #999;
        }
        
        .post-content {
            padding: 20px;
            line-height: 1.6;
            color: #2d3748;
        }
        
        .post-content img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
            margin: 10px 0;
            display: block;
        }
        
        .post-content a {
            color: #4299e1;
            text-decoration: none;
        }
        
        .post-content a:hover {
            text-decoration: underline;
        }
        
        .post-footer {
            background: var(--second-bg);
            padding: 10px 20px;
            border-top: 1px solid var(--third-bg);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .post-actions {
            display: flex;
            gap: 10px;
        }
        
        .post-number {
            font-size: 12px;
            color: #718096;
        }
        
        .reply-form {
            background: var(--second-bg);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #2d3748;
        }
        
        .form-group textarea {
            width: 100%;
            padding: 15px;
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
            height: 150px;
            resize: vertical;
            font-family: inherit;
        }
        
        .breadcrumb {
            margin-bottom: 20px;
            color: #999;
        }
        
        .breadcrumb a {
            color: #999;
            text-decoration: none;
        }
        
        .breadcrumb a:hover {
            text-decoration: none;
            color: #fff;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 20px 0;
        }
        
        .pagination a, .pagination span {
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 4px;
            text-decoration: none;
            color: #2d3748;
            border: 1px solid #e2e8f0;
        }
        
        .pagination a:hover {
            background: #4299e1;
            color: white;
        }
        
        .pagination .current {
            background: #4299e1;
            color: white;
        }
        
        .topic-locked {
            background: #fed7d7;
            color: #c53030;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .no-posts {
            text-align: center;
            padding: 40px;
            color: #718096;
        }
        
        .post-signature {
            margin-top: 15px;
        }
        
        .signature-content {
            font-size: 0.9em;
            color: #666;
            font-style: italic;
            padding: 10px;
            background: #f8f9fa;
            border-left: 3px solid #667eea;
            border-radius: 0 4px 4px 0;
        }
        
        .reputation-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .reputation-buttons {
            display: flex;
            gap: 5px;
        }
        
        .reputation-btn {
            background: none;
            border: 1px solid var(--third-bg);
            color: #ccc;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
        }
        
        .reputation-btn:hover:not(:disabled) {
            background: var(--third-bg);
            color: #fff;
            transform: translateY(-1px);
        }
        
        .reputation-btn:disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }
        
        .reputation-btn.active-like {
            background: #48bb78;
            color: white;
            border-color: #48bb78;
        }
        
        .reputation-btn.active-unlike {
            background: #f56565;
            color: white;
            border-color: #f56565;
        }
        
        .reputation-score {
            font-weight: bold;
            padding: 5px 10px;
            border-radius: 4px;
            background: var(--third-bg);
            color: #fff;
            min-width: 40px;
            text-align: center;
        }
        
        .reputation-score.positive {
            color: #38a169;
        }
        
        .reputation-score.negative {
            color: #e53e3e;
        }
        
        .reputation-tooltip {
            position: relative;
            display: inline-block;
        }
        
        .reputation-tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: #2d3748;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
        }
        
        .reputation-tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

.rounded {
    border-radius: 1px !important;
}