:root {
    --bg: #f3f6fa;
    --bg-strong: #eaf0f8;
    --panel: #fff;
    --panel-soft: #f8fafc;
    --panel-alt: #eef5ff;
    --primary: #f5b700;
    --primary-strong: #e6a900;
    --primary-light: #fff4c7;
    --secondary: #193452;
    --secondary-soft: #294d73;
    --accent: #8ecae6;
    --accent-light: #e8f6fc;
    --text: #1e293b;
    --text-light: #475569;
    --muted: #64748b;
    --border: rgba(100, 116, 139, 0.18);
    --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.05);
    --shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 10% 10%, rgba(142, 202, 230, 0.14), transparent 28%),
        radial-gradient(circle at 90% 20%, rgba(245, 183, 0, 0.09), transparent 25%),
        linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
    transition: background 0.25s ease, color 0.25s ease;
}
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-soft) 100%);
    color: white;
    box-shadow: 0 8px 30px rgba(25, 52, 82, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.logo {
    color: white;
    text-decoration: none;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.logo:hover { transform: translateY(-1px); opacity: 0.92; }

.header-actions, #guest-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-actions a {
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.header-actions a:hover { transform: translateY(-2px); }

.login-btn {
    color: white;
    padding: 10px 17px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-weight: 600;
    backdrop-filter: blur(8px);
}
.login-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}


/* ==========================================
   REGISZTRÁCIÓ
========================================== */

.register-btn {
    padding: 10px 18px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #ffd96a
        );

    color: var(--secondary);

    font-weight: 700;

    box-shadow:
        0 8px 22px rgba(245, 183, 0, 0.25);
}

.register-btn:hover {
    box-shadow:
        0 12px 28px rgba(245, 183, 0, 0.35);
}


/* ==========================================
   BEJELENTKEZETT FELHASZNÁLÓ
========================================== */

#user-actions {
    display: flex;

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

    gap: 10px;

    position: relative;
}


/* ==========================================
   PROFIL MENÜ WRAPPER
========================================== */

.profile-menu-container {
    position: relative;

    display: flex;
    align-items: center;

    flex-shrink: 0;
}


/* ==========================================
   PROFIL GOMB
========================================== */

.profile-link {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 6px 12px 6px 7px;

    border-radius: 999px;

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

    border:
        1px solid rgba(255, 255, 255, 0.12);

    cursor: pointer;

    color: white;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.profile-link:hover {
    background:
        rgba(255, 255, 255, 0.14);

    transform:
        translateY(-1px);
}

.header-profile-image {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    border-radius: 50%;

    object-fit: cover;

    border:
        2px solid rgba(255, 255, 255, 0.9);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.18);
}

#header-username {
    color: white !important;

    font-size: 0.92rem;
    font-weight: 700;

    white-space: nowrap;
}


/* ==========================================
   PROFIL LENYÍLÓ MENÜ
========================================== */

.profile-dropdown {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    width: 210px;

    padding: 8px;

    background: var(--panel);

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

    border-radius: 14px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.22);

    display: none;

    z-index: 99999;
}

.profile-dropdown.active {
    display: block;
}

.profile-dropdown button {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 12px;

    border: none;

    background: transparent;

    border-radius: 9px;

    color: var(--text);

    text-align: left;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.profile-dropdown button:hover {
    background: var(--bg-strong);

    transform:
        translateX(2px);
}


/* ==========================================
   FEJLÉC ÜZENETEK
========================================== */

.header-messages {
    position: relative;

    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    padding: 0;

    border-radius: 50%;

    background: transparent;

    border:
        1px solid transparent;

    color: var(--primary);

    text-decoration: none;

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

.header-messages:hover {
    background:
        rgba(255, 255, 255, 0.10);

    border-color:
        rgba(255, 255, 255, 0.12);

    transform:
        translateY(-1px);
}


/* ==========================================
   ÜZENET IKON
========================================== */

.header-mail-icon {
    display: flex;

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

    font-size: 23px;

    line-height: 1;

    color: var(--primary);

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.header-messages:hover .header-mail-icon {
    color: #ffd34d;

    transform:
        scale(1.08);
}


/* ==========================================
   ÜZENET OLVASATLAN SZÁMLÁLÓ
========================================== */

.header-unread-count {
    position: absolute;

    top: -3px;
    right: -3px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    display: none;

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

    border-radius: 999px;

    background: #ef4444;

    color: white;

    border:
        2px solid var(--secondary);

    font-size: 10px;

    font-weight: 800;

    line-height: 1;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.25);

    z-index: 5;
}



/* ==========================================
   ÉRTESÍTÉS WRAPPER
========================================== */

.notification-container {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* ==========================================
   ÉRTESÍTÉS GOMB
========================================== */

.header-notifications,
#header-notifications {
    position: relative;

    width: 42px;
    height: 42px;

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

    padding: 0;

    border-radius: 50%;
    border: 1px solid transparent;

    background: transparent;

    color: #ffffff;

    cursor: pointer;

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

.header-notifications:hover,
#header-notifications:hover {
    background: rgba(255, 255, 255, 0.10);

    border-color:
        rgba(255, 255, 255, 0.12);

    transform: translateY(-1px);
}


/* ==========================================
   NORMÁLIS HARANG IKON
========================================== */

.header-bell-icon {
    position: relative;

    width: 22px;
    height: 22px;

    display: block;

    font-size: 0;
    line-height: 1;

    color: #ffffff;
}


/* Harang teste */

.header-bell-icon::before {
    content: "";

    position: absolute;

    left: 4px;
    top: 2px;

    width: 14px;
    height: 15px;

    border: 2px solid currentColor;

    border-bottom: 0;

    border-radius:
        9px 9px 4px 4px;

    box-sizing: border-box;
}


/* Harang alsó része */

.header-bell-icon::after {
    content: "";

    position: absolute;

    left: 2px;
    top: 16px;

    width: 18px;
    height: 4px;

    border:
        2px solid currentColor;

    border-top: 0;

    border-radius:
        0 0 10px 10px;

    box-sizing: border-box;
}


/* Harang mozgás */

.header-notifications:hover .header-bell-icon::before,
#header-notifications:hover .header-bell-icon::before {
    transform:
        rotate(-6deg);

    transition:
        transform 0.2s ease;
}


/* ==========================================
   ÉRTESÍTÉS SZÁMLÁLÓ
========================================== */

.header-notification-count,
#header-notification-count {
    position: absolute;

    top: -3px;
    right: -3px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    display: none;

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

    border-radius: 999px;

    background: #ef233c;
    color: #ffffff;

    border:
        2px solid var(--secondary);

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

    line-height: 1;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.25);

    z-index: 5;
}


/* ==========================================
   ÉRTESÍTÉS LENYÍLÓ
========================================== */

.notification-dropdown,
#notification-dropdown {
    position: fixed;

    top: 76px;

    right:
        max(
            22px,
            calc((100vw - 1150px) / 2 + 22px)
        );

    width: 350px;

    max-width:
        calc(100vw - 30px);

    background:
        var(--panel);

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

    border-radius:
        16px;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.18);

    overflow: hidden;

    display: none;

    z-index: 99999;
}


/* JS által használt aktív állapot */

.notification-dropdown.active,
#notification-dropdown.active {
    display: block;
}


/* ==========================================
   ÉRTESÍTÉS FEJLÉC
========================================== */

.notification-header {
    min-height: 52px;

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

    gap: 12px;

    padding:
        12px 15px;

    background:
        linear-gradient(
            135deg,
            var(--secondary),
            var(--secondary-soft)
        );

    color: #ffffff;

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

.notification-header > span {
    color: #ffffff;

    font-size: 0.95rem;

    font-weight: 800;
}


/* ==========================================
   ÖSSZES OLVASOTT GOMB
========================================== */

#mark-all-notifications-read {
    padding:
        7px 9px;

    border: none;

    border-radius: 8px;

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

    color: #ffffff;

    font-size: 0.72rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

#mark-all-notifications-read:hover {
    background:
        rgba(255, 255, 255, 0.18);

    transform:
        translateY(-1px);
}


/* ==========================================
   ÉRTESÍTÉS LISTA
========================================== */

.notification-list {
    max-height: 390px;

    overflow-y: auto;
    overflow-x: hidden;

    background:
        var(--panel);
}

.notification-list::-webkit-scrollbar {
    width: 6px;
}

.notification-list::-webkit-scrollbar-track {
    background: transparent;
}

.notification-list::-webkit-scrollbar-thumb {
    background:
        rgba(100, 116, 139, 0.25);

    border-radius: 999px;
}


/* ==========================================
   EGY ÉRTESÍTÉS
========================================== */

.notification-item {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 11px;

    width: 100%;

    padding:
        13px 15px;

    border: none;

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

    background:
        var(--panel);

    color:
        var(--text);

    text-align: left;

    cursor: pointer;

    transition:
        background 0.2s ease;
}

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

.notification-item:hover {
    background:
        var(--bg-strong);
}


/* ==========================================
   OLVASATLAN ÉRTESÍTÉS
   PIROS
========================================== */

.notification-item.unread {
    background:
        rgba(239, 35, 60, 0.055);

    border-left:
        3px solid #ef233c;
}

.notification-item.unread:hover {
    background:
        rgba(239, 35, 60, 0.09);
}


/* ==========================================
   ÉRTESÍTÉS PROFILKÉP
========================================== */

.notification-avatar,
.notification-profile-image {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: 50%;

    object-fit: cover;

    border:
        2px solid var(--border);

    background:
        var(--secondary);
}


/* ==========================================
   ÉRTESÍTÉS TARTALOM
========================================== */

.notification-content {
    min-width: 0;

    flex: 1;
}


/* Felhasználónév */

.notification-username {
    margin-bottom: 3px;

    color:
        var(--text);

    font-size: 0.83rem;

    font-weight: 800;
}


/* Értesítés szövege */

.notification-message {
    color:
        var(--text);

    font-size: 0.78rem;

    line-height: 1.45;

    overflow-wrap: anywhere;
}


/* Idő */

.notification-time {
    margin-top: 5px;

    color:
        var(--muted);

    font-size: 0.68rem;
}


/* ==========================================
   PIROS OLVASATLAN PÖTTY
========================================== */

.notification-unread-dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    margin-top: 6px;

    border-radius: 50%;

    background:
        #ef233c;

    box-shadow:
        0 0 0 3px rgba(239, 35, 60, 0.12);
}


/* Ha a JS ezt az osztályt használja */

.notification-item.unread::after {
    content: "";

    position: absolute;

    top: 15px;
    right: 14px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #ef233c;
}


/* ==========================================
   NINCS ÉRTESÍTÉS
========================================== */

.notification-empty {
    padding:
        30px 20px;

    text-align: center;

    color:
        var(--muted);

    font-size: 0.82rem;
}


/* ==========================================
   ÜZENET POPUP
========================================== */

.message-notifications {
    position: fixed;

    top: 85px;
    right: 25px;

    width: 350px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    z-index: 9999;

    pointer-events: none;
}

.message-popup {
    position: relative;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px 40px 14px 14px;

    background: var(--panel);

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

    border-left:
        4px solid var(--primary);

    border-radius: 12px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18);

    cursor: pointer;

    opacity: 0;

    transform:
        translateX(30px);

    transition:
        opacity 0.3s,
        transform 0.3s;

    pointer-events: auto;
}

.message-popup.show {
    opacity: 1;

    transform:
        translateX(0);
}

.message-popup-avatar {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 50%;

    border:
        2px solid var(--border);
}

.message-popup-content {
    min-width: 0;

    flex: 1;
}

.message-popup-title {
    margin-bottom: 2px;

    font-size: 11px;

    font-weight: 600;

    color:
        var(--primary-strong);
}

.message-popup-sender {
    margin-bottom: 3px;

    font-size: 14px;

    font-weight: 700;

    color:
        var(--text);
}

.message-popup-text {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

    color:
        var(--muted);
}

.message-popup-close {
    position: absolute;

    top: 8px;
    right: 9px;

    width: 25px;
    height: 25px;

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

    padding: 0;

    border: none;

    border-radius: 50%;

    background: transparent;

    color:
        var(--muted);

    font-size: 20px;

    cursor: pointer;
}

.message-popup-close:hover {
    background:
        var(--bg-strong);

    color:
        var(--text);
}

.mention {
    display: inline;
    color: #7dd3fc;
    background: rgba(125, 211, 252, 0.14);
    border: 1px solid rgba(125, 211, 252, 0.35);
    border-radius: 6px;
    padding: 0.08rem 0.35rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.mention:hover,
.mention:focus {
    color: #bae6fd;
    text-decoration: none;
}

.mention-suggestions {
    position: fixed;
    z-index: 2000;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35);
    padding: 0.4rem;
    min-width: 220px;
}

.mention-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mention-suggestion-item {
    background: transparent;
    border: none;
    color: #e2e8f0;
    text-align: left;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mention-suggestion-item:hover,
.mention-suggestion-item:focus {
    background: rgba(96, 165, 250, 0.18);
    outline: none;
}

body.light-mode .mention {
    color: #0f766e;
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.3);
}

body.light-mode .mention-suggestions {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(148, 163, 184, 0.25);
    box-shadow: 0 15px 30px rgba(15, 23, 42, 0.12);
}

body.light-mode .mention-suggestion-item {
    color: #1f2937;
}

body.light-mode .mention-suggestion-item:hover,
body.light-mode .mention-suggestion-item:focus {
    background: rgba(59, 130, 246, 0.12);
}


/* ==========================================
   FŐ TARTALOM
========================================== */

.container {
    max-width: 1150px;

    margin: 38px auto 0;

    padding:
        0 22px 60px;
}


/* ==========================================
   ÜDVÖZLŐ PANEL
========================================== */

.welcome {
    position: relative;

    overflow: hidden;

    padding: 38px 40px;

    margin-bottom: 38px;

    border-radius: var(--radius-lg);

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

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(239, 246, 255, 0.96)
        );

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

.welcome::before {
    content: "🐝";

    position: absolute;

    right: 45px;
    top: 28px;

    font-size: 85px;

    opacity: 0.07;

    transform:
        rotate(-10deg);

    pointer-events: none;
}

.welcome::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -80px;
    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(245, 183, 0, 0.08);

    pointer-events: none;
}

.welcome h1 {
    position: relative;

    z-index: 1;

    margin: 0 0 12px;

    max-width: 750px;

    font-size:
        clamp(2rem, 4vw, 2.8rem);

    line-height: 1.12;

    letter-spacing: -0.03em;

    color:
        var(--secondary);
}

.welcome p {
    position: relative;

    z-index: 1;

    margin: 0;

    max-width: 700px;

    color:
        var(--muted);

    font-size: 1.04rem;

    line-height: 1.7;
}


/* ==========================================
   KERESŐ
========================================== */

.search {
    position: relative;

    z-index: 2;

    display: flex;

    margin-top: 28px;

    max-width: 760px;

    background: white;

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

    border-radius: 15px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, 0.07);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.search:focus-within {
    border-color:
        rgba(245, 183, 0, 0.65);

    box-shadow:
        0 0 0 4px rgba(245, 183, 0, 0.10),
        0 10px 30px rgba(15, 23, 42, 0.08);
}

.search input {
    flex: 1;

    min-width: 0;

    padding: 16px 19px;

    border: none;

    outline: none;

    background: transparent;

    color: var(--text);

    font-size: 1rem;
}

.search input::placeholder {
    color: #94a3b8;
}

.search button {
    border: none;

    padding: 0 26px;

    background:
        linear-gradient(
            135deg,
            var(--secondary),
            #28517e
        );

    color: white;

    cursor: pointer;

    font-weight: 700;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.search button:hover {
    background:
        linear-gradient(
            135deg,
            #142b45,
            #23476e
        );
}


/* ==========================================
   FÓRUM
========================================== */

.forum h2 {
    margin: 0 0 20px;

    font-size: 1.75rem;

    color:
        var(--secondary);

    letter-spacing:
        -0.02em;
}


/* ==========================================
   KATEGÓRIA LISTA
========================================== */

#category-list {
    display: flex;

    flex-direction: column;

    gap: 14px;

    background: transparent;

    padding: 0;
}


/* ==========================================
   KATEGÓRIA KÁRTYA
========================================== */

.category {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 96px;

    padding: 19px 22px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfdff 100%
        );

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

    border-radius: 18px;

    box-shadow:
        0 5px 16px rgba(15, 23, 42, 0.045);

    overflow: hidden;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.category::before {
    content: "";

    position: absolute;

    left: 0;
    top: 16px;
    bottom: 16px;

    width: 4px;

    border-radius:
        0 5px 5px 0;

    background:
        linear-gradient(
            180deg,
            var(--primary),
            var(--accent)
        );

    opacity: 0;

    transform:
        scaleY(0.5);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.category::after {
    content: "🐝";

    position: absolute;

    right: 85px;
    bottom: -22px;

    font-size: 75px;

    opacity: 0.025;

    transform:
        rotate(-15deg);

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.3s ease;
}

.category:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(245, 183, 0, 0.35);

    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.09);
}

.category:hover::before {
    opacity: 1;

    transform:
        scaleY(1);
}

.category:hover::after {
    opacity: 0.06;

    transform:
        rotate(-8deg)
        translateY(-4px);
}


/* ==========================================
   KATEGÓRIA IKON
========================================== */

.category-icon {
    position: relative;

    z-index: 2;

    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(245, 183, 0, 0.15),
            rgba(142, 202, 230, 0.28)
        );

    border:
        1px solid rgba(245, 183, 0, 0.10);

    color:
        var(--secondary);

    font-size: 28px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.category:hover .category-icon {
    transform:
        scale(1.06)
        rotate(-2deg);

    box-shadow:
        0 8px 18px rgba(245, 183, 0, 0.14);
}


/* ==========================================
   KATEGÓRIA INFORMÁCIÓ
========================================== */

.category-info {
    position: relative;

    z-index: 2;

    flex: 1;

    min-width: 0;

    padding-left: 18px;
}

.category-info h3 {
    margin: 0 0 6px;

    color:
        var(--secondary);

    font-size: 1.16rem;

    font-weight: 750;

    letter-spacing:
        -0.015em;

    transition:
        color 0.2s ease;
}

.category:hover .category-info h3 {
    color:
        #173b61;
}

.category-info p {
    margin: 0;

    max-width: 650px;

    color:
        var(--muted);

    font-size: 0.9rem;

    line-height: 1.55;
}


/* ==========================================
   KATEGÓRIA STATISZTIKA
========================================== */

.category-stats {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: center;

    min-width: 95px;

    padding-left: 18px;

    text-align: right;

    color:
        var(--muted);

    font-size: 0.76rem;

    line-height: 1.45;
}

.category-stats strong {
    display: block;

    margin-bottom: 2px;

    color:
        var(--secondary);

    font-size: 1.15rem;

    font-weight: 800;
}


/* ==========================================
   KATEGÓRIA LINK
========================================== */

.category-link {
    position: relative;

    display: block;

    color: inherit;

    text-decoration: none;
}

.category-link::after {
    content: "›";

    position: absolute;

    right: 20px;
    top: 50%;

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

    color:
        #94a3b8;

    font-size: 26px;

    font-weight: 300;

    opacity: 0;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease;

    pointer-events: none;
}

.category-link:hover::after {
    opacity: 1;

    color:
        var(--primary-strong);

    transform:
        translateY(-50%)
        translateX(0);
}


/* ==========================================
   KATEGÓRIA LINKEK
========================================== */

#category-list a,
#category-list a:link,
#category-list a:visited,
#category-list a:hover,
#category-list a:active {
    color: inherit !important;

    text-decoration: none !important;

    outline: none !important;
}

#category-list a h3,
#category-list a h3:link,
#category-list a h3:visited,
#category-list a h3:hover,
#category-list a h3:active {
    color:
        var(--secondary) !important;

    text-decoration:
        none !important;
}

#category-list a p {
    color:
        var(--muted) !important;

    text-decoration:
        none !important;
}

#category-list a:hover h3 {
    color:
        #173b61 !important;
}


/* ==========================================
   KIEMELT KATEGÓRIA
========================================== */

.category.featured {
    border-color:
        rgba(245, 183, 0, 0.35);

    background:
        linear-gradient(
            135deg,
            #fffdf5,
            #ffffff
        );
}

.category.featured .category-icon {
    background:
        linear-gradient(
            135deg,
            rgba(245, 183, 0, 0.25),
            rgba(255, 217, 106, 0.45)
        );
}


/* ==========================================
   MORZSASOR
========================================== */

.breadcrumb {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    color:
        var(--muted);

    font-size: 0.9rem;
}

.breadcrumb a {
    color:
        var(--secondary);

    text-decoration: none;

    font-weight: 700;

    transition:
        color 0.2s ease;
}

.breadcrumb a:hover {
    color:
        var(--primary-strong);
}


/* ==========================================
   TOPIC FEJLÉC
========================================== */

.topic-page-header {
    padding: 30px;

    margin-bottom: 22px;

    border-radius:
        var(--radius);

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

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(238, 245, 255, 0.98)
        );

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

.topic-page-header h1 {
    margin: 0 0 9px;

    color:
        var(--secondary);

    font-size:
        clamp(1.8rem, 3vw, 2.5rem);

    letter-spacing:
        -0.025em;
}

.topic-page-header p {
    margin: 0;

    color:
        var(--muted);

    line-height: 1.6;
}


/* ==========================================
   POSZTOK
========================================== */

.posts {
    display: flex;

    flex-direction: column;

    gap: 18px;
}

.post {
    display: flex;

    overflow: hidden;

    background:
        var(--panel);

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

    border-radius:
        var(--radius);

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

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.post:hover {
    transform:
        translateY(-1px);

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


/* ==========================================
   POSZT FELHASZNÁLÓ
========================================== */

.post-user {
    width: 200px;

    flex-shrink: 0;

    padding: 24px 18px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #eef4ff
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    border-right:
        1px solid var(--border);
}

.avatar {
    width: 60px;
    height: 60px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 10px;

    background:
        linear-gradient(
            135deg,
            var(--secondary),
            var(--secondary-soft)
        );

    color: white;

    font-size: 1.05rem;

    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(25, 52, 82, 0.20);
}

.post-user strong {
    font-size: 0.98rem;

    color:
        var(--secondary);
}

.post-user span {
    margin-top: 6px;

    color:
        var(--muted);

    font-size: 0.76rem;
}


/* ==========================================
   POSZT TARTALOM
========================================== */

.post-content {
    flex: 1;

    min-width: 0;

    padding: 24px 26px;
}

.post-date {
    margin-bottom: 18px;

    color:
        var(--muted);

    font-size: 0.78rem;

    font-weight: 600;
}

.post-content p {
    margin: 0 0 14px;

    color:
        var(--text);

    line-height: 1.75;
}


/* ==========================================
   VÁLASZ DOBOZ
========================================== */

.reply-box {
    margin-top: 28px;

    padding: 25px;

    background:
        var(--panel);

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

    border-radius:
        var(--radius);

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

.reply-box h2 {
    margin:
        0 0 16px;

    color:
        var(--secondary);

    font-size: 1.4rem;
}

.reply-box textarea {
    width: 100%;

    min-height: 140px;

    padding: 15px;

    resize: vertical;

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

    border-radius: 13px;

    outline: none;

    background:
        var(--panel-soft);

    color:
        var(--text);

    font-family: inherit;

    font-size: 15px;

    line-height: 1.6;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.reply-box textarea:focus {
    border-color:
        rgba(245, 183, 0, 0.55);

    box-shadow:
        0 0 0 4px rgba(245, 183, 0, 0.10);
}

.reply-box button,
.new-topic-btn {
    margin-top: 15px;

    padding: 12px 19px;

    border: none;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #f7d870
        );

    color:
        var(--secondary);

    cursor: pointer;

    font-size: 0.95rem;

    font-weight: 700;

    box-shadow:
        0 9px 22px rgba(245, 183, 0, 0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.reply-box button:hover,
.new-topic-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 13px 27px rgba(245, 183, 0, 0.28);
}


/* ==========================================
   FŐOLDALI INFORMÁCIÓS BLOKKOK
========================================== */

.home-panels {
    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 38px;
}

.home-panel {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfdff 100%
        );

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

    border-radius:
        var(--radius);

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

.home-panel::before {
    content: "";

    position: absolute;

    left: 0;

    top: 20px;
    bottom: 20px;

    width: 4px;

    border-radius:
        0 5px 5px 0;

    background:
        linear-gradient(
            180deg,
            var(--primary),
            var(--accent)
        );
}


/* ==========================================
   PANEL FEJLÉC
========================================== */

.home-panel-header {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 23px 26px;

    border-bottom:
        1px solid rgba(148, 163, 184, 0.14);
}

.home-panel-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(245, 183, 0, 0.15),
            rgba(142, 202, 230, 0.28)
        );

    border:
        1px solid rgba(245, 183, 0, 0.10);

    font-size: 22px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.home-panel-header h2 {
    margin: 0 0 3px;

    color:
        var(--secondary);

    font-size: 1.25rem;

    font-weight: 800;

    letter-spacing:
        -0.02em;
}

.home-panel-header p {
    margin: 0;

    color:
        var(--muted);

    font-size: 0.82rem;
}


/* ==========================================
   AKTÍV FELHASZNÁLÓK
========================================== */

.active-users-list {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    padding: 22px 26px;
}

.active-user {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 13px;

    border-radius: 999px;

    background:
        #f8fafc;

    border:
        1px solid rgba(148, 163, 184, 0.18);

    color:
        var(--secondary);

    text-decoration: none;

    font-size: 0.88rem;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.active-user:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(245, 183, 0, 0.35);

    box-shadow:
        0 6px 15px rgba(15, 23, 42, 0.07);
}

.active-user:visited,
.active-user:active,
.active-user:focus {
    color: var(--secondary);
    text-decoration: none;
}

.active-user-dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        #22c55e;

    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.12);
}


/* ==========================================
   LEGUTÓBBI HOZZÁSZÓLÁSOK
========================================== */

.recent-posts-list {
    display: flex;

    flex-direction: column;
}

.recent-post {
    display: block;

    padding: 19px 26px;

    text-decoration: none;

    border-bottom:
        1px solid rgba(148, 163, 184, 0.13);

    transition:
        background 0.2s ease,
        padding-left 0.2s ease;
}

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

.recent-post:hover {
    background:
        rgba(245, 183, 0, 0.035);

    padding-left: 30px;
}

.recent-post-content {
    margin-bottom: 7px;

    color:
        var(--text);

    font-size: 0.94rem;

    line-height: 1.55;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}

.recent-post-meta {
    display: flex;

    align-items: center;

    gap: 7px;

    color:
        var(--muted);

    font-size: 0.76rem;
}

.recent-post-author {
    color:
        var(--secondary);

    font-weight: 700;
}

.recent-post-topic {
    margin-top: 4px;

    color:
        #94a3b8;

    font-size: 0.75rem;
}

.recent-post-topic strong {
    color:
        var(--secondary-soft);

    font-weight: 700;
}


/* ==========================================
   ÜRES / BETÖLTÉSI ÁLLAPOT
========================================== */

.panel-loading,
.panel-empty {
    padding: 22px 26px;

    color:
        var(--muted);

    font-size: 0.86rem;
}


/* ==========================================
   HOME CONTENT
========================================== */

.home-content {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        350px;

    gap: 24px;

    align-items: start;
}

.home-sidebar {
    display: flex;

    flex-direction: column;

    gap: 20px;
}


/* ==========================================
   KOMMENT ÉRTÉKELÉS
========================================== */

.comment-rating {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 18px;

    flex-wrap: wrap;
}

.vote-buttons {
    display: flex;

    gap: 8px;

    flex-wrap: wrap;
}

.vote-button {
    border:
        1px solid #ddd;

    background:
        #fff;

    padding: 7px 11px;

    border-radius: 8px;

    cursor: pointer;
}

.vote-button:hover {
    background:
        #f3f3f3;
}

.vote-count {
    font-weight: bold;

    margin-left: 4px;
}

.rating-circle {
    width: 52px;
    height: 52px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    border: 4px solid;
}

.rating-green {
    border-color:
        #22c55e;

    color:
        #16a34a;
}

.rating-red {
    border-color:
        #ef4444;

    color:
        #dc2626;
}

.rating-total {
    color:
        #777;

    font-size: 13px;
}


/* ==========================================
   KATTINTHATÓ FELHASZNÁLÓI PROFIL
========================================== */

.comment-profile {
    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.comment-profile:hover {
    transform:
        translateY(-2px);
}

.comment-profile:hover .comment-profile-name {
    color:
        var(--primary-strong);
}

.comment-profile-image {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.comment-profile:hover .comment-profile-image {
    transform:
        scale(1.05);

    box-shadow:
        0 6px 16px rgba(245, 183, 0, 0.25);
}


/* ==========================================
   TÉMA VÁLTÓ
========================================== */

.theme-toggle {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 50px;
    height: 50px;

    border: none;

    border-radius: 50%;

    background:
        #1d3557;

    color: white;

    font-size: 22px;

    cursor: pointer;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.2);

    z-index: 9999;

    transition:
        all 0.3s ease;
}

.theme-toggle:hover {
    transform:
        scale(1.1);
}


/* ==========================================
   VILÁGOS MÓD
========================================== */

body.light-mode {
    background:
        #f4f7fb;

    color:
        #1d3557;
}

body.light-mode .card,
body.light-mode .topic,
body.light-mode .panel {
    background:
        #ffffff;

    color:
        #1d3557;
}


/* ==========================================
   SÖTÉT MÓD
========================================== */

body.dark-mode {
    --dark-bg: #060d18;
    --dark-bg-strong: #0c1728;
    --dark-surface: rgba(17, 24, 39, 0.9);
    --dark-surface-strong: rgba(19, 33, 52, 0.96);
    --dark-surface-soft: rgba(28, 42, 62, 0.82);
    --dark-card: #101b2d;
    --dark-card-2: #16253d;
    --dark-text: #f2f7ff;
    --dark-text-strong: #e6edf8;
    --dark-text-soft: #d2deef;
    --dark-text-muted: #9babca;
    --dark-border: rgba(148, 163, 184, 0.18);
    --dark-accent: #7dd3fc;
    --dark-accent-strong: #38bdf8;
    --dark-gold: #fbbf24;
    --dark-shadow: 0 24px 60px rgba(2, 6, 23, 0.52);

    background:
        radial-gradient(
            circle at 15% 12%,
            rgba(56, 189, 248, 0.18),
            transparent 22%
        ),
        radial-gradient(
            circle at 85% 18%,
            rgba(168, 85, 247, 0.15),
            transparent 24%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(251, 191, 36, 0.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            var(--dark-bg) 0%,
            var(--dark-bg-strong) 100%
        );

    color:
        var(--dark-text-strong);
}

body.dark-mode .header {
    background:
        linear-gradient(
            135deg,
            rgba(11, 18, 32, 0.92),
            rgba(15, 23, 42, 0.96)
        );

    border-bottom:
        1px solid rgba(125, 211, 252, 0.14);

    box-shadow:
        0 12px 28px rgba(2, 6, 23, 0.35);
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode li,
body.dark-mode label,
body.dark-mode small,
body.dark-mode .meta,
body.dark-mode .description,
body.dark-mode .topic-content,
body.dark-mode .recent-post-content,
body.dark-mode .notification-message,
body.dark-mode .user-card-text,
body.dark-mode .profile-subtitle,
body.dark-mode .panel-empty,
body.dark-mode .empty-state,
body.dark-mode .topic-info p,
body.dark-mode .category-description,
body.dark-mode .search-topic-meta,
body.dark-mode .search-user-info p {
    color:
        var(--dark-text-soft);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .title,
body.dark-mode .panel-title,
body.dark-mode .topic-title,
body.dark-mode .recent-post-author,
body.dark-mode .recent-post-topic strong,
body.dark-mode .notification-username,
body.dark-mode .profile-name,
body.dark-mode .info-label,
body.dark-mode .forum-header h2,
body.dark-mode .results-section-header h2,
body.dark-mode .home-panel-header h2,
body.dark-mode .topic-info h3,
body.dark-mode .search-topic-content h3,
body.dark-mode .search-user-info h3 {
    color:
        var(--dark-text);
}

body.dark-mode a {
    color:
        #ebf5ff;
}

body.dark-mode a:hover {
    color:
        var(--dark-accent);
}

body.dark-mode .card,
body.dark-mode .topic,
body.dark-mode .panel,
body.dark-mode .home-panel,
body.dark-mode .category,
body.dark-mode .forum-panel,
body.dark-mode .results-section,
body.dark-mode .search-page-header,
body.dark-mode .no-results,
body.dark-mode .search-page-box,
body.dark-mode .notification-dropdown,
body.dark-mode .profile-dropdown,
body.dark-mode .comment,
body.dark-mode .reply,
body.dark-mode .post,
body.dark-mode .topic-card,
body.dark-mode .message-card,
body.dark-mode .user-card,
body.dark-mode .profile-card,
body.dark-mode .topic-container,
body.dark-mode .category-card,
body.dark-mode .user-profile-card {
    background:
        linear-gradient(
            180deg,
            rgba(17, 24, 39, 0.98),
            rgba(12, 20, 31, 0.98)
        );

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

    color:
        var(--dark-text-strong);

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

body.dark-mode .home-panel-header,
body.dark-mode .results-section-header,
body.dark-mode .notification-item,
body.dark-mode .notification-list,
body.dark-mode .forum-header,
body.dark-mode .topic-header,
body.dark-mode .profile-dropdown button,
body.dark-mode .notification-item {
    border-color:
        rgba(148, 163, 184, 0.12);
}

body.dark-mode .home-panel {
    background:
        linear-gradient(
            135deg,
            rgba(17, 24, 39, 0.96),
            rgba(15, 23, 42, 0.98)
        );

    border:
        1px solid rgba(125, 211, 252, 0.12);

    box-shadow:
        0 16px 40px rgba(2, 6, 23, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.dark-mode .home-panel::before {
    background:
        linear-gradient(
            180deg,
            #38bdf8,
            #fbbf24
        );

    box-shadow:
        0 0 18px rgba(56, 189, 248, 0.22);
}

body.dark-mode .calendar-day,
body.dark-mode .calendar-day.has-event,
body.dark-mode .calendar-day.today {
    color:
        #f8fafc;
}

body.dark-mode .calendar-navigation button {
    background:
        rgba(15, 23, 42, 0.9);

    border-color:
        rgba(125, 211, 252, 0.16);

    color:
        #f8fafc;
}

body.dark-mode .calendar-navigation button:hover {
    background:
        rgba(30, 41, 59, 0.96);
}

body.dark-mode .calendar-day.has-event {
    background:
        rgba(251, 191, 36, 0.18);
}

body.dark-mode .calendar-day.today {
    color:
        #ffffff;
}

body.dark-mode .home-panel-icon {
    background:
        linear-gradient(
            135deg,
            rgba(56, 189, 248, 0.18),
            rgba(251, 191, 36, 0.12)
        );

    border-color:
        rgba(125, 211, 252, 0.12);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 18px rgba(2, 6, 23, 0.18);
}

body.dark-mode .active-user,
body.dark-mode .recent-post,
body.dark-mode .category-item,
body.dark-mode .search-topic-card,
body.dark-mode .search-user-card,
body.dark-mode .topic-item,
body.dark-mode .comment-item,
body.dark-mode .reply-item {
    background:
        linear-gradient(
            180deg,
            rgba(17, 24, 39, 0.88),
            rgba(15, 23, 42, 0.96)
        );

    border:
        1px solid rgba(148, 163, 184, 0.16);

    color:
        var(--dark-text);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

body.dark-mode .active-user {
    background:
        linear-gradient(
            135deg,
            rgba(17, 24, 39, 0.92),
            rgba(24, 35, 53, 0.96)
        );

    border-color:
        rgba(125, 211, 252, 0.12);
}

body.dark-mode .active-user:hover,
body.dark-mode .recent-post:hover,
body.dark-mode .search-topic-card:hover,
body.dark-mode .search-user-card:hover,
body.dark-mode .comment-item:hover,
body.dark-mode .reply-item:hover {
    background:
        linear-gradient(
            180deg,
            rgba(30, 41, 59, 0.96),
            rgba(16, 24, 39, 0.96)
        );

    border-color:
        rgba(125, 211, 252, 0.22);

    box-shadow:
        0 14px 32px rgba(2, 6, 23, 0.38),
        inset 0 0 0 1px rgba(125, 211, 252, 0.08);
}

body.dark-mode .active-user-dot {
    background:
        #4ade80;

    box-shadow:
        0 0 0 3px rgba(74, 222, 128, 0.18);
}

body.dark-mode .recent-post {
    border-bottom-color:
        rgba(148, 163, 184, 0.12);
}

body.dark-mode .recent-post:hover {
    background:
        linear-gradient(
            90deg,
            rgba(56, 189, 248, 0.08),
            rgba(15, 23, 42, 0.92)
        );

    padding-left: 30px;
}

body.dark-mode .recent-post-content {
    color:
        var(--dark-text-strong);
}

body.dark-mode .recent-post-author,
body.dark-mode .recent-post-topic strong {
    color:
        var(--dark-text);
}

body.dark-mode .recent-post-meta,
body.dark-mode .recent-post-topic {
    color:
        #9fb4d3;
}

body.dark-mode .panel-loading,
body.dark-mode .panel-empty {
    color:
        var(--dark-text-soft);

    background:
        rgba(15, 23, 42, 0.4);
}

body.dark-mode .search-page-box {
    background:
        rgba(15, 23, 42, 0.9);

    border-color:
        rgba(148, 163, 184, 0.18);
}

body.dark-mode .welcome {
    background:
        linear-gradient(
            135deg,
            rgba(13, 20, 31, 0.98),
            rgba(20, 31, 47, 0.98)
        );

    border:
        1px solid rgba(125, 211, 252, 0.14);

    box-shadow:
        0 18px 46px rgba(2, 6, 23, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.dark-mode .welcome::before {
    opacity:
        0.12;
}

body.dark-mode .welcome::after {
    background:
        rgba(251, 191, 36, 0.08);
}

body.dark-mode .welcome h1 {
    color:
        #f8fbff;
}

body.dark-mode .welcome p {
    color:
        #d7e6fb;
}

body.dark-mode .search {
    background:
        rgba(11, 18, 30, 0.9);

    border-color:
        rgba(125, 211, 252, 0.18);

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

body.dark-mode .search:focus-within {
    border-color:
        rgba(125, 211, 252, 0.35);

    box-shadow:
        0 0 0 4px rgba(125, 211, 252, 0.10),
        0 12px 32px rgba(2, 6, 23, 0.3);
}

body.dark-mode .search input {
    background:
        transparent;

    color:
        #f8fafc;
}

body.dark-mode .search input::placeholder {
    color:
        #9db0cb;
}

body.dark-mode .search button {
    background:
        linear-gradient(
            135deg,
            #fbbf24,
            #f59e0b
        );

    color:
        #111827;
}

body.dark-mode .category {
    background:
        linear-gradient(
            135deg,
            rgba(17, 24, 39, 0.95),
            rgba(12, 20, 31, 0.98)
        );

    border-color:
        rgba(148, 163, 184, 0.16);

    box-shadow:
        0 10px 28px rgba(2, 6, 23, 0.22);
}

body.dark-mode .category:hover {
    border-color:
        rgba(251, 191, 36, 0.32);

    box-shadow:
        0 16px 30px rgba(2, 6, 23, 0.34);
}

body.dark-mode .category-icon {
    background:
        linear-gradient(
            135deg,
            rgba(56, 189, 248, 0.14),
            rgba(251, 191, 36, 0.10)
        );

    border-color:
        rgba(125, 211, 252, 0.1);

    color:
        #dff4ff;
}

body.dark-mode .category-info h3,
body.dark-mode #category-list a h3,
body.dark-mode #category-list a h3:link,
body.dark-mode #category-list a h3:visited,
body.dark-mode #category-list a h3:hover,
body.dark-mode #category-list a h3:active {
    color:
        #f2f8ff !important;
}

body.dark-mode .category-info p,
body.dark-mode #category-list a p {
    color:
        #d1dff5 !important;
}

body.dark-mode .category-stats {
    color:
        #bfcfe8;
}

body.dark-mode .category-stats strong {
    color:
        #f5f9ff;
}

body.dark-mode .category.featured {
    background:
        linear-gradient(
            135deg,
            rgba(24, 28, 39, 0.96),
            rgba(14, 20, 30, 0.99)
        );

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

body.dark-mode .category.featured .category-icon {
    background:
        linear-gradient(
            135deg,
            rgba(251, 191, 36, 0.2),
            rgba(125, 211, 252, 0.1)
        );
}

body.dark-mode #pageSearchInput,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control {
    background:
        rgba(8, 15, 25, 0.88);

    border:
        1px solid rgba(148, 163, 184, 0.2);

    color:
        var(--dark-text);

    box-shadow:
        inset 0 0 0 1px rgba(125, 211, 252, 0.04);
}

body.dark-mode #pageSearchInput::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color:
        var(--dark-text-muted);
}

body.dark-mode button,
body.dark-mode .btn,
body.dark-mode .action-btn,
body.dark-mode .submit-btn,
body.dark-mode .logout-btn {
    color:
        var(--dark-text);
}

body.dark-mode .login-btn {
    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid rgba(125, 211, 252, 0.18);

    color:
        #f8fafc;
}

body.dark-mode .register-btn {
    background:
        linear-gradient(
            135deg,
            #fbbf24,
            #f59e0b
        );

    color:
        #111827;

    box-shadow:
        0 12px 30px rgba(251, 191, 36, 0.28);
}

body.dark-mode .theme-toggle {
    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #dfeaf8
        );

    color:
        #0f172a;

    border:
        1px solid rgba(255, 255, 255, 0.32);

    box-shadow:
        0 14px 35px rgba(2, 6, 23, 0.42);
}

body.dark-mode .notification-dropdown,
body.dark-mode .profile-dropdown {
    background:
        rgba(12, 18, 28, 0.98);

    border:
        1px solid rgba(148, 163, 184, 0.18);

    box-shadow:
        0 22px 50px rgba(2, 6, 23, 0.48);
}

body.dark-mode .notification-item {
    color:
        var(--dark-text);

    background:
        rgba(15, 23, 42, 0.8);
}

body.dark-mode .notification-item:hover {
    background:
        rgba(30, 41, 59, 0.9);
}

body.dark-mode .notification-item.unread {
    background:
        linear-gradient(
            90deg,
            rgba(251, 191, 36, 0.14),
            rgba(15, 23, 42, 0.9)
        );

    border-left:
        3px solid var(--dark-gold);
}

body.dark-mode .profile-dropdown button {
    color:
        var(--dark-text);

    background:
        transparent;
}

body.dark-mode .profile-dropdown button:hover {
    background:
        rgba(30, 41, 59, 0.9);
}

body.dark-mode .recent-post-content {
    color:
        var(--dark-text-strong);
}

body.dark-mode .recent-post-author,
body.dark-mode .recent-post-topic strong {
    color:
        var(--dark-text);
}

body.dark-mode .panel-empty,
body.dark-mode .empty-state {
    background:
        rgba(15, 23, 42, 0.7);

    border:
        1px solid rgba(148, 163, 184, 0.14);

    color:
        var(--dark-text-soft);
}

body.dark-mode .topic-icon,
body.dark-mode .search-topic-icon,
body.dark-mode .category-icon,
body.dark-mode .forum-icon {
    box-shadow:
        0 0 0 1px rgba(125, 211, 252, 0.08);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

    .home-content {
        grid-template-columns: 1fr;
    }

    .home-sidebar {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 18px;
    }
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 800px) {

    .header-content {
        padding:
            14px 17px;
    }

    .container {
        margin-top: 25px;

        padding:
            0 16px 45px;
    }

    .welcome {
        padding:
            27px 23px;

        border-radius:
            20px;
    }

    .welcome::before {
        right: 20px;

        font-size:
            65px;
    }

    .category {
        padding:
            18px;

        gap: 15px;
    }

    .category-icon {
        width: 54px;
        height: 54px;

        border-radius:
            15px;
    }

    .category-stats {
        min-width: auto;
    }

    .post-user {
        width: 180px;
    }
}


/* ==========================================
   MOBIL
========================================== */

@media (max-width: 600px) {

    .header-content {
        flex-direction: column;

        align-items: stretch;

        gap: 12px;
    }

    .logo {
        justify-content: center;

        font-size:
            22px;
    }

    .header-actions {
        justify-content: center;
    }

    #guest-actions {
        width: 100%;

        justify-content: center;
    }

    #user-actions {
        width: 100%;

        justify-content: center;

        gap: 7px;
    }

    .login-btn,
    .register-btn {
        padding:
            9px 14px;

        font-size:
            0.9rem;
    }


    /* ------------------------------
       ÉRTESÍTÉSEK MOBIL
    ------------------------------ */

    .notification-dropdown {
        position: fixed;

        top: 72px;

        left: 10px;
        right: 10px;

        width: auto;

        max-width: none;
    }


    /* ------------------------------
       PROFIL MOBIL
    ------------------------------ */

    .profile-dropdown {
        right: 0;

        width: 200px;
    }


    /* ------------------------------
       ÜZENET POPUP MOBIL
    ------------------------------ */

    .message-notifications {
        top: 75px;

        left: 10px;
        right: 10px;

        width: auto;
    }

    .message-popup {
        width: 100%;
    }


    /* ------------------------------
       ÜDVÖZLŐ
    ------------------------------ */

    .welcome {
        padding:
            23px 18px;
    }

    .welcome h1 {
        font-size:
            1.9rem;
    }

    .welcome p {
        font-size:
            0.95rem;
    }


    /* ------------------------------
       KERESŐ
    ------------------------------ */

    .search {
        flex-direction:
            column;

        border-radius:
            14px;
    }

    .search input {
        padding:
            14px 15px;
    }

    .search button {
        padding:
            13px;

        border-radius:
            0;
    }


    /* ------------------------------
       FÓRUM
    ------------------------------ */

    .forum h2 {
        font-size:
            1.45rem;
    }


    /* ------------------------------
       KATEGÓRIA
    ------------------------------ */

    .category {
        align-items:
            flex-start;

        flex-wrap:
            wrap;

        padding:
            17px;
    }

    .category-icon {
        width: 54px;
        height: 54px;
    }

    .category-info {
        flex-basis:
            calc(100% - 75px);

        padding-left:
            14px;

        padding-right:
            5px;
    }

    .category-info h3 {
        font-size:
            1.05rem;
    }

    .category-info p {
        font-size:
            0.85rem;
    }

    .category-stats {
        width: 100%;

        flex-direction:
            row;

        justify-content:
            flex-start;

        gap: 8px;

        text-align:
            left;

        padding-left:
            68px;
    }

    .category-stats strong {
        font-size:
            1rem;
    }

    .category-link::after {
        display:
            none;
    }

    .category::after {
        display:
            none;
    }


    /* ------------------------------
       POSZT
    ------------------------------ */

    .post {
        flex-direction:
            column;
    }

    .post-user {
        width: 100%;

        flex-direction:
            row;

        align-items:
            center;

        gap: 12px;

        padding:
            15px 18px;

        border-right:
            none;

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

        text-align:
            left;
    }

    .avatar {
        width: 48px;
        height: 48px;

        margin:
            0;
    }

    .post-user span {
        margin-top:
            3px;
    }

    .post-content {
        padding:
            19px;
    }


    /* ------------------------------
       TOPIC FEJLÉC
    ------------------------------ */

    .topic-page-header {
        padding:
            22px 19px;
    }


    /* ------------------------------
       VÁLASZ
    ------------------------------ */

    .reply-box {
        padding:
            19px;
    }


    /* ------------------------------
       HOME
    ------------------------------ */

    .home-panels {
        margin-top:
            30px;

        gap:
            16px;
    }

    .home-sidebar {
        display:
            flex;

        flex-direction:
            column;

        gap:
            16px;
    }

    .home-panel-header {
        padding:
            19px;
    }

    .home-panel-icon {
        width: 43px;
        height: 43px;

        border-radius:
            12px;

        font-size:
            19px;
    }

    .home-panel-header h2 {
        font-size:
            1.1rem;
    }

    .home-panel-header p {
        font-size:
            0.76rem;
    }

    .active-users-list {
        padding:
            17px 19px;
    }

    .active-user {
        padding:
            7px 11px;

        font-size:
            0.82rem;
    }

    .recent-post {
        padding:
            16px 19px;
    }

    .recent-post:hover {
        padding-left:
            21px;
    }
}


/* ==========================================
   NAGYON KIS KÉPERNYŐ
========================================== */

@media (max-width: 450px) {

    .header-actions {
        flex-direction:
            column;
    }

    #guest-actions {
        flex-direction:
            column;

        width: 100%;
    }

    .login-btn,
    .register-btn {
        width: 100%;

        text-align:
            center;
    }

    #user-actions {
        flex-wrap:
            wrap;
    }

    .category {
        padding:
            15px;
    }

    .category-icon {
        width: 48px;
        height: 48px;

        font-size:
            21px;

        border-radius:
            14px;
    }

    .category-info {
        flex-basis:
            calc(100% - 65px);

        padding-left:
            12px;
    }

    .category-info h3 {
        font-size:
            0.98rem;
    }

    .category-info p {
        font-size:
            0.82rem;
    }

    .category-stats {
        padding-left:
            60px;
    }

    .notification-dropdown {
        top:
            68px;

        left:
            8px;

        right:
            8px;
    }

    .notification-header {
        padding:
            11px 12px;
    }

    .notification-item {
        padding:
            12px;
    }
}

/* Méhészeti naptár */
.calendar-panel {
    padding: 20px;
}

.calendar-header,
.calendar-navigation,
.calendar-legend {
    display: flex;
    align-items: center;
}

.calendar-header {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.calendar-eyebrow {
    margin: 0 0 3px;
    color: var(--text-muted, #718096);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.calendar-header h2 {
    margin: 0;
}

.calendar-navigation {
    gap: 6px;
}

.calendar-navigation button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 9px;
    background: var(--panel-soft, #000000);
    color: var(--text, #243447);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    transition: 0.2s ease;
}

.calendar-navigation button:hover {
    background: var(--bg-strong, #eaf0f8);
    transform: translateY(-1px);
}

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays {
    margin-bottom: 7px;
    color: var(--text-muted, #8795a8);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}

.calendar-grid {
    gap: 4px;
}

.calendar-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 33px;
    border-radius: 9px;
    color: var(--text, #243447);
    font-size: 0.79rem;
}

.calendar-day.empty {
    visibility: hidden;
}

.calendar-day.has-event {
    background: color-mix(in srgb, #f4b400 13%, var(--panel, #fff));
    color: var(--text, #243447);
    font-weight: 700;
}

.calendar-day.has-event::after {
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #e2a800;
    content: "";
}

.calendar-day.today {
    background: #f4b400;
    color: #fff;
    font-weight: 800;
}

.calendar-day.today::after {
    background: #fff;
}

.calendar-legend {
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 17px;
    padding-top: 14px;
    border-top: 1px solid var(--border, #e2e8f0);
    color: var(--text-muted, #718096);
    font-size: 0.72rem;
}

.calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.calendar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e2a800;
}

.today-dot {
    background: #f4b400;
}

@media (max-width: 600px) {
    .calendar-panel {
        padding: 16px;
    }
}

/* =========================================================
   IDŐJÁRÁS
========================================================= */

.weather-content {
    width: 100%;
    box-sizing: border-box;
}

.weather-loading,
.weather-error {
    padding: 20px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}


/* =========================================================
   IDŐJÁRÁS FEJLÉC
========================================================= */

.weather-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
}

.weather-location {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
}

.weather-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
}

.weather-main-icon {
    font-size: 52px;
    line-height: 1;
}


/* =========================================================
   AKTUÁLIS HŐMÉRSÉKLET
========================================================= */

.weather-current {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.weather-temperature {
    font-size: 38px;
    line-height: 1;
    font-weight: 800;
    color: var(--text);
}

.weather-description {
    font-size: 14px;
    color: var(--muted);
}


/* =========================================================
   IDŐJÁRÁS RÉSZLETEK
========================================================= */

.weather-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.weather-detail {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 8px;
    border-radius: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    box-sizing: border-box;
}

.weather-detail span {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

.weather-detail strong {
    font-size: 14px;
    color: var(--text);
}


/* =========================================================
   5 NAPOS ELŐREJELZÉS
========================================================= */

.weather-forecast {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: 100%;
}

.weather-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px;
    border-radius: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    box-sizing: border-box;
    min-width: 0;
}

.weather-day-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: capitalize;
}

.weather-day-icon {
    font-size: 25px;
    line-height: 1;
}

.weather-day-temp {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 600px) {

    .weather-main-icon {
        font-size: 42px;
    }

    .weather-temperature {
        font-size: 32px;
    }

    .weather-details {
        grid-template-columns: 1fr;
    }

    .weather-detail {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .weather-forecast {
        gap: 4px;
    }

    .weather-day {
        padding: 4px 2px;
    }

    .weather-day-icon {
        font-size: 21px;
    }

    .weather-day-temp {
        font-size: 10px;
    }

}

/* Weather slider styles */
.weather-panel { padding: 12px; }
.weather-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.weather-location { font-size: 12px; color: var(--muted); }
.weather-title { font-size: 14px; font-weight: 800; }
.weather-main-icon { font-size: 28px; }
.weather-current { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.weather-temperature { font-size: 20px; font-weight: 800; }
.weather-description { color: var(--muted); }
.weather-details { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.weather-detail { background: var(--panel); border: 1px solid var(--border); padding: 8px 10px; border-radius: 10px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.weather-forecast-wrap { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.forecast-nav { background: transparent; border: 1px solid var(--border); width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.forecast-nav:hover { background: var(--bg-strong); }
.weather-forecast-slider { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; padding: 6px; -webkit-overflow-scrolling: touch; }
.weather-forecast-slider::-webkit-scrollbar { height: 8px; }
.weather-forecast-slider::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.18); border-radius: 999px; }
.weather-day { min-width: 90px; flex: 0 0 auto; background: var(--panel-soft); border: 1px solid var(--border); padding: 10px; border-radius: 12px; text-align: center; }
.weather-day-name { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.weather-day-icon { font-size: 20px; margin-bottom: 6px; }
.weather-day-temp { font-weight: 800; }

@media (max-width: 320px) {
    .weather-day { min-width: 80px; }
    .weather-temperature { font-size: 18px; }
}

/* Range under forecast */
.weather-range-wrap { padding: 8px 6px 0; }
.weather-range { width: 100%; display: block; appearance: none; height: 6px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%); border-radius: 999px; outline: none; }
.weather-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--secondary); box-shadow: var(--shadow-sm); cursor: pointer; }
.weather-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--secondary); box-shadow: var(--shadow-sm); cursor: pointer; }
.dark-mode .weather-range { background: linear-gradient(90deg, #4f46e5 0%, rgba(79, 70, 229, 0.2) 100%); }
.dark-mode .weather-panel, .dark-mode .home-panel { background: #0b1220; color: #cbd5e1; border-color: rgba(255,255,255,0.04); }
.dark-mode .weather-day, .dark-mode .weather-detail { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.03); }
.dark-mode .weather-main-icon { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)); }
.dark-mode .recent-post { border-color: rgba(255,255,255,0.03); }
.dark-mode .recent-post:hover { background: rgba(255,255,255,0.02); }
.dark-mode .recent-post-author { color: #ffd966; }
.dark-mode .weather-panel, .dark-mode .home-panel.weather-panel { color: #cbd5e1; }
.dark-mode .weather-panel .weather-location, .dark-mode .weather-panel .weather-title, .dark-mode .weather-panel .weather-description, .dark-mode .weather-panel .weather-temperature, .dark-mode .weather-panel .weather-detail, .dark-mode .weather-panel .weather-day-name, .dark-mode .weather-panel .weather-day-temp, .dark-mode .weather-panel .weather-main-icon { color: #cbd5e1; }
.dark-mode .weather-panel .weather-day { background: rgba(255,255,255,0.02); color: #cbd5e1; border-color: rgba(255,255,255,0.03); }
.dark-mode .weather-detail strong { color: #ffffff; }
/* Footer styles */
.site-footer {
    background: linear-gradient(180deg, rgba(15,23,42,0.03), rgba(15,23,42,0.06));
    border-top: 1px solid var(--border);
    padding: 22px 18px;
    margin-top: 24px;
}
.site-footer-inner {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.footer-brand .logo { font-weight:800; font-size:18px; text-decoration:none; color:var(--secondary); }
.footer-desc { margin:4px 0 0; color:var(--muted); font-size:13px; }
.footer-links { display:flex; gap:12px; }
.footer-links a { color:var(--text-light); text-decoration:none; font-weight:600; font-size:14px; }
.footer-social a { margin-left:8px; font-size:18px; text-decoration:none; }
.footer-bottom { max-width:1150px; margin:8px auto 0; display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }

@media (max-width:720px) {
    .site-footer-inner { flex-direction:column; align-items:flex-start; }
    .footer-bottom { flex-direction:column; gap:6px; align-items:flex-start; }
}

/* Dark mode footer */
.dark-mode .site-footer { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-top-color: rgba(255,255,255,0.04); }
.dark-mode .footer-links a { color: #cbd5e1; }
.dark-mode .footer-desc, .dark-mode .footer-bottom { color: #94a3b8; }