:root {
     
    --deep: #4A3B2C;    
    --bg: #f0ebe1;       
    --surf: #ffffff;     
    --surf-2: #f9f8f6;   
    --surf-3: #f0ede6;   

    --line: #d1c9b8;       
    --line-2: #f0f0f0;     
    --line-gold: rgba(138, 98, 6, 0.18);  

    --text: #333333;       
    --text-2: #666666;     
    --muted: #888888;      

    --gold: #f1c40f;        
    --gold-2: #b8860b;      
    --gold-soft: #faf4e6;   
    --gold-line: #eadfc4;   

    --moss: #6E7B5C;        
    --moss-2: #27ae60;      
    --moss-soft: #e5f7ec;   

    --bronze: #a67c4f;   
    --silver: #8a8578;   
    --brick: #c0392b;    
    --brick-soft: #fdece8;  
}

:root {
    --primary-brown: var(--deep);
    --hover-khaki: var(--moss);
    --bg-light: var(--bg);
    --card-bg: var(--surf);
    --text-dark: var(--text);
    --border-color: var(--line);
    --text-muted: var(--muted);
    --bg-alt: var(--surf-2);
    --hv2-gold: var(--gold-2);  
}

:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.chat-messages::-webkit-scrollbar,
#activity-feed-container::-webkit-scrollbar {
    width: 6px;
}
.chat-messages::-webkit-scrollbar-thumb,
#activity-feed-container::-webkit-scrollbar-thumb {
    background: var(--hover-khaki);
    border-radius: 10px;
}
.chat-messages::-webkit-scrollbar-track,
#activity-feed-container::-webkit-scrollbar-track {
    background: transparent;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-line, .skeleton-circle, .skeleton-block {
    background: linear-gradient(90deg, var(--border-color) 25%, var(--bg-alt) 50%, var(--border-color) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-line { height: 12px; border-radius: 5px; }
.skeleton-circle { border-radius: 50%; flex-shrink: 0; }
.skeleton-block { border-radius: 10px; }
.skeleton-row { display: flex; align-items: center; gap: 12px; }
.skeleton-row + .skeleton-row { margin-top: 14px; }
 
[data-theme="dark"] .skeleton-line,
[data-theme="dark"] .skeleton-circle,
[data-theme="dark"] .skeleton-block {
    background: linear-gradient(90deg, var(--surf-2) 25%, var(--surf-3) 50%, var(--surf-2) 75%);
    background-size: 200% 100%;
}

html {
    overflow-x: hidden;  
}

body {
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    display: flex;  
    flex-direction: column;  
    min-height: 100vh;  
     
    overflow: clip;
}

main { width: 100%; min-width: 0; box-sizing: border-box; }

img { max-width: 100%; height: auto; }
p, h1, h2, h3, h4, h5, h6, span, a, li, td, div {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.hero-nav-stack {
    display: flex;
    flex-direction: column;
}

html.logged-in-nav .hero-nav-stack {
    display: contents;
}

.main-nav {
    background-color: var(--primary-brown);
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

html.logged-in-nav .main-nav {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 2px solid transparent !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
html.logged-in-nav .main-nav.nav-stuck {
    background-color: var(--primary-brown) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15) !important;

    border-bottom: 2px solid var(--hover-khaki) !important;
}

.nav-inner {
    display: flex;
    align-items: center;
    width: 100%;
     
    max-width: 1200px;
    margin: 0 auto;
}

.main-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
     
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 18px;
}

.nav-logo img, .nav-logo svg {
    height: 26px;
    width: auto;
    display: block;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
}
.nav-slot {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nav-icon-btn, .nav-profile-wrap #nav-profile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #fff;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color 0.15s;
}
.nav-icon-btn:hover, .nav-profile-wrap #nav-profile-toggle:hover { background: rgba(255,255,255,0.14); }
@media (max-width: 768px) {
    .nav-right { display: none !important; }
}

@media (min-width: 769px) {
    .main-nav ul { flex: 1 1 auto; }
    .nav-search-item { flex: 1 1 auto; min-width: 60px; }
    .nav-search-box { width: 100%; box-sizing: border-box; }
    .nav-search-box input { flex: 1; width: auto; min-width: 0; }
     
    html.guest-hero-v2 .main-nav ul { flex: none !important; }
    html.guest-hero-v2 .nav-search-item { flex: none !important; }
    html.guest-hero-v2 .nav-search-box { width: auto !important; }
}
 
.nav-search-item { display: none; }
html.logged-in-nav .nav-search-item { display: flex !important; }
.nav-search-box {
    position: relative; display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16);
    border-radius: 20px; padding: 7px 12px; margin: 0 2px;
}
.nav-search-box i.fa-magnifying-glass { color: rgba(255,255,255,0.65); font-size: 0.82rem; margin-right: 0 !important; flex-shrink: 0; }
.nav-search-box input {
    background: transparent !important; background-color: transparent !important;
    border: none !important; outline: none !important; box-shadow: none !important;
    -webkit-appearance: none; appearance: none; color: #fff;
    font-size: 0.85rem; width: 118px; font-family: inherit;
}
 
.nav-search-box input:focus,
.nav-search-box input:-webkit-autofill {
    background: transparent !important; background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
}
.nav-search-box input::placeholder { color: rgba(255,255,255,0.55); }

.nav-search-results {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; width: 320px;
    max-height: 420px; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,0.25); z-index: 2000; text-align: left;
}
.nav-search-results.open { display: block; }
.nav-search-group-title {
    padding: 10px 14px 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted);
}
.nav-search-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px; text-decoration: none;
    color: var(--text-dark); font-size: 0.9rem;
}
.nav-search-row:hover { background: var(--bg-alt); }
.nav-search-row i { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-alt); color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.8rem; margin-right: 0 !important; }
.nav-search-row small { color: var(--text-muted); font-weight: normal; }
.nav-search-thumb { width: 28px; height: 28px; border-radius: 6px; background-size: cover; background-position: center; flex-shrink: 0; }
.nav-search-empty { padding: 18px 14px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

@media (max-width: 768px) {
    .nav-search-item { width: 100%; padding: 10px 20px; box-sizing: border-box; }
    .nav-search-box { width: 100%; box-sizing: border-box; }
    .nav-search-box input { width: 100%; flex: 1; }
    .nav-search-results {
        position: fixed !important; left: 20px; right: 20px; width: auto;
        max-height: 50vh; z-index: 10050;
    }
}

.shop-soon-card {
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08); padding: 32px 30px; text-align: center;
    max-width: 480px; width: 100%;
}
.shop-soon-ic {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px; display: flex;
    align-items: center; justify-content: center; background: var(--gold-soft);
    color: var(--gold-2); font-size: 1.5rem; border: 1px solid var(--gold-line);
}
[data-theme="dark"] .shop-soon-ic { background: rgba(241,196,15,0.14); color: var(--gold); border-color: rgba(241,196,15,0.3); }
.shop-soon-card h2 { margin: 0 0 8px; font-size: 1.4rem; color: var(--text-dark); letter-spacing: 0.2px; }
.shop-soon-card p { font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); max-width: 380px; margin: 0 auto; }
.shop-soon-btn {
    margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; background: var(--primary-brown);
    color: #fff; text-decoration: none; padding: 9px 20px; border-radius: 10px; font-weight: 600;
    font-size: 0.9rem; transition: background-color 0.15s;
}
.shop-soon-btn:hover { filter: brightness(0.9); }

@media (min-width: 769px) {
    .main-nav {
        display: flex;
        align-items: center;
    }
    .main-nav ul {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .main-nav .nav-logo {
        display: none !important;
    }
}

.main-nav li a {
    display: block;
    padding: 9px 11px;
    color: white;
    text-decoration: none;
     
    font-family: 'Figtree', system-ui, sans-serif;
    font-weight: 500;
    font-size: 14.5px;
    border-radius: 8px;
    white-space: nowrap;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.main-nav li.nav-item-login a,
.main-nav li.nav-item-register a,
.main-nav li.guest-menu a {
    padding-left: 6px;
    padding-right: 6px;
}

.main-nav li a:hover::after {
    content: "";
    position: absolute;
    left: 13px; right: 13px; bottom: 2px;
    height: 2px; border-radius: 2px;
    background: var(--hover-khaki);
}

.main-nav li a.active::after {
    content: "";
    position: absolute;
    left: 13px; right: 13px; bottom: 2px;
    height: 2px; border-radius: 2px;
    background: var(--hover-khaki);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-brown);
    min-width: 230px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-radius: 0 0 8px 8px;
    z-index: 9999;
    overflow: hidden;
}

.nav-dropdown-content a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: left;
    font-size: 0.9rem !important;
}

.nav-dropdown-content a:hover {
    background-color: var(--hover-khaki) !important;
}

.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}

@media (max-width: 768px) {
    .nav-dropdown-content {
        position: static;
        transform: none;
        box-shadow: none;
        background-color: rgba(0,0,0,0.2);
        border-radius: 0;
        width: 100%;
    }
    .nav-dropdown-content a {
        padding-left: 40px !important;
    }
}

.page-heading {
    font-family: 'Archivo', system-ui, sans-serif; font-stretch: 110%; font-weight: 800;
    font-size: 1.6rem; line-height: 1.2; color: var(--text-dark);
     
    margin: -14px 0 14px 0;
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.page-heading-count {
    font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 0.85rem;
    letter-spacing: 0.03em; color: var(--text-muted);
}

.content-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    flex: 1;
    width: 100%;
}

.rl-wrap.hv2-page-frame { margin-top: 40px; }

.hv2-page-frame {
    background: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 20px -6px rgba(0, 0, 0, 0.08),
        0 24px 48px -16px rgba(0, 0, 0, 0.12);
    padding: 30px;
    align-items: start;
}
@media (min-width: 769px) {
    [data-theme="dark"] .hv2-page-frame {
        border-color: rgba(255, 255, 255, 0.045);
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
            0 2px 4px rgba(0, 0, 0, 0.2),
            0 12px 28px -8px rgba(0, 0, 0, 0.35),
            0 32px 60px -16px rgba(0, 0, 0, 0.4);
    }
}
.hv2-page-frame .sidebar {
    position: relative;
    padding-left: 30px;
}
.hv2-page-frame .sidebar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent 0, var(--divider) 7%, var(--divider) 93%, transparent 100%);
}
@media (max-width: 768px) {
    .hv2-page-frame {
        /* A ligák oldalon a küldő <main> maga nem doboz - csak a benne lévő lista/kártyák azok.
           Itt is így legyen: a keret maradjon háttér nélküli, csak a belső elemek (kereső, kártyák)
           tartsák meg a saját doboz-kinézetüket - így nincs "doboz a dobozban" duplikáció. */
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 10px;
        align-items: stretch;
    }
    .hv2-page-frame .sidebar {
        border-left: 0;
        padding-left: 0;
    }
    .hv2-page-frame .sidebar::before {
        display: none;
    }
}

.pf-ach-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 10px 0 0; }
.pf-ach-row:empty { display: none; }
.pf-ach-label {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700;
    color: var(--text-muted); text-decoration: none; transition: color 0.15s;
}
.pf-ach-label:hover { color: var(--hv2-gold); }
.pf-ach-stack { display: flex; }
.pf-ach-badge {
    width: 34px; height: 34px; flex: none; border-radius: 50%; margin-left: -11px;
    border: 2px solid var(--card-bg); background: var(--card-bg); display: block;
    position: relative; cursor: pointer; transition: transform 0.15s ease, z-index 0s;
}
.pf-ach-badge:first-child { margin-left: 0; }
.pf-ach-badge svg { width: 100%; height: 100%; display: block; }
.pf-ach-badge:hover { transform: translateY(-4px) scale(1.08); z-index: 2; }
.pf-ach-more {
    display: flex; align-items: center; justify-content: center; background: var(--bg-alt);
    color: var(--text-muted); font-size: 0.68rem; font-weight: 700; text-decoration: none;
}

.tlj-wrap { max-width: 1100px; margin: 40px auto; }
.tlj-wrap.hv2-page-frame { margin-top: 40px; }
.tlj-section-head { display: flex; align-items: center; gap: 14px; margin: 32px 0 0; }
.tlj-section-head:first-of-type { margin-top: 8px; }
.tlj-section-head h2 {
    font-family: 'Archivo', system-ui, sans-serif; font-stretch: 108%; font-weight: 800;
    font-size: 1.15rem; color: var(--text-dark); flex: none;
}
.tlj-section-head .tlj-rule { flex: 1; height: 1px; background: var(--divider); }
.tlj-section-sub { color: var(--text-muted); font-size: 0.9rem; margin-top: 6px; max-width: 56ch; line-height: 1.6; }
.tlj-list { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.tlj-tile {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    width: 130px; padding: 16px 10px 14px;
    border-radius: 16px; background: var(--bg-alt);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 20px -6px rgba(0, 0, 0, 0.08),
        0 24px 48px -16px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease;
}
.tlj-tile:hover { transform: translateY(-2px); }
.tlj-tile.is-clickable { cursor: pointer; }
.tlj-tile.is-clickable:hover { box-shadow: 0 8px 20px -4px rgba(0,0,0,0.2); }
@media (min-width: 640px) {
    [data-theme="dark"] .tlj-tile {
        border-color: rgba(255, 255, 255, 0.045);
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
            0 2px 4px rgba(0, 0, 0, 0.2),
            0 12px 28px -8px rgba(0, 0, 0, 0.35),
            0 32px 60px -16px rgba(0, 0, 0, 0.4);
    }
}
.tlj-badge-wrap { flex: none; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.tlj-badge { position: relative; width: 68px; height: 68px; }
.tlj-badge svg { width: 100%; height: 100%; display: block; }
.tlj-badge-lock {
    position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg-alt); border: 2px solid var(--card-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; color: var(--text-muted);
}
.tlj-badge-lock i.fa-solid { margin-right: 0; }
.tlj-badge.is-maxed svg { animation: tljMaxedGlow 2.6s ease-in-out infinite; }
@keyframes tljMaxedGlow {
    0%, 100% { filter: drop-shadow(0 6px 12px var(--tlj-accent, rgba(241,196,15,.4))); }
    50% { filter: drop-shadow(0 6px 18px var(--tlj-accent, rgba(241,196,15,.85))); }
}
.tlj-tile-title { font-weight: 800; font-size: 0.86rem; color: var(--text-dark); line-height: 1.25; }
.tlj-tile-date { font-size: 0.7rem; color: var(--text-muted); margin-top: 6px; }

.content-container.with-chat {
    max-width: 1400px;
    grid-template-columns: 300px 1fr 300px;
}

@media (max-width: 1100px) {
    .content-container.with-chat {
        grid-template-columns: 1fr 300px;  
    }
    .left-sidebar { display: none; }
}

@media (max-width: 768px) {
    .content-container,
    .content-container.with-chat {
        display: flex;
        flex-direction: column;
        padding: 10px;
        margin-top: 14px;
    }
    .rl-wrap.hv2-page-frame,
    .tlj-wrap.hv2-page-frame {
        margin-top: 14px;
    }
    .left-sidebar {
        display: block;
        order: 10;  
        margin-top: 30px;
    }
}

.welcome-message {
    background-color: var(--card-bg);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-left: 5px solid var(--primary-brown);  
    margin-bottom: 30px;
}

.welcome-message h2 {
    color: var(--primary-brown);
    margin-bottom: 10px;
}

.guest-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--gold-soft); color: var(--hv2-gold); border: 1px solid var(--gold-line);
    font-size: 0.75rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.guest-hero-avatars { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.guest-hero-avatars .feed-liker-avatar { width: 30px; height: 30px; font-size: 0.7rem; }
.guest-hero-avatars span { font-size: 0.85rem; color: var(--text-muted); }
.guest-hero-stats {
    display: flex; background: var(--bg-alt); border-top: 1px solid var(--border-color);
    margin: 20px -25px -25px; border-radius: 0 0 10px 10px; overflow: hidden;
}
.guest-hero-stats > div { flex: 1; padding: 13px 6px; text-align: center; border-right: 1px solid var(--border-color); }
.guest-hero-stats > div:last-child { border-right: none; }
.guest-hero-stats strong { display: block; font-size: 1.1rem; font-weight: 700; color: var(--primary-brown); }
.guest-hero-stats span { display: block; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

.about-head { text-align: center; margin-bottom: 20px; }
.about-head h3 { font-size: 1.5rem; font-weight: 800; color: var(--primary-brown); letter-spacing: -0.02em; }
.about-head p { font-size: 0.85rem; color: var(--text-muted); margin-top: 6px; max-width: 460px; margin-left: auto; margin-right: auto; line-height: 1.55; }

.about-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.about-pillar { text-align: center; padding: 6px 12px; }
.about-picon { width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft); border: 1px solid var(--gold-line); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 1.05rem; color: var(--gold-2); }
.about-picon i.fa-solid { margin-right: 0; }
.about-wtag i.fa-solid { font-size: 0.72rem; color: var(--gold-2); }
.about-pstep { font-size: 0.65rem; color: var(--gold-2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.about-pillar h4 { font-size: 0.92rem; font-weight: 800; color: var(--text-dark); letter-spacing: -0.01em; }
.about-pillar p { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

.about-who { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.about-wtag { font-size: 0.78rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border-color); color: var(--text-dark); }

@media (max-width: 640px) {
    .about-pillars { grid-template-columns: 1fr; }
}

.feed-column {
     
    min-width: 0;
}

.feed-column h3 {
    margin-bottom: 20px;
    color: var(--primary-brown);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 5px;
}

.feed-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.card-header {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-2);
}

.card-header strong {
    color: var(--primary-brown);
    font-size: 1rem;
}

.card-content {
    padding: 15px;
}

.image-placeholder {
    width: 100%;
    height: 200px;
    background-color: #e2dfd8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    margin-top: 15px;
    border-radius: 5px;
}

.card-footer {
    padding: 10px 15px;
    background-color: var(--bg-alt);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
}

.action-btn {
    background: none;
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    color: var(--text-dark);
    transition: all 0.2s;
}

.action-btn:hover {
    background-color: var(--primary-brown);
    color: white;
    border-color: var(--primary-brown);
}

.sidebar-widget {
    background-color: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-widget:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.sidebar-widget h3 {
    color: var(--primary-brown);
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-header {
    color: var(--primary-brown);
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: none;
    padding-bottom: 0;
}

.widget-icon-chip {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.95rem;
}

.sidebar-widget.accent-gold { border-left: 4px solid var(--gold); }
.chip-gold { background-color: var(--gold-soft); color: var(--gold-2); }

.sidebar-widget.accent-blue { border-left: 4px solid #3498db; }
.chip-blue { background-color: #e8f2fc; color: #2472a4; }

.sidebar-widget.accent-green { border-left: 4px solid var(--moss-2); }
.chip-green { background-color: var(--moss-soft); color: var(--moss-2); }

.sidebar-widget.accent-orange { border-left: 4px solid #e67e22; }
.chip-orange { background-color: #fdf0e3; color: #b8621b; }

.sidebar-widget.accent-red { border-left: 4px solid #e74c3c; }
.chip-red { background-color: #fdecea; color: var(--brick); }

.sidebar-widget.accent-purple { border-left: 4px solid #9b59b6; }
.chip-purple { background-color: #f3ecf9; color: #7d3c98; }

.sidebar-widget.accent-amber { border-left: 4px solid #f39c12; }
.chip-amber { background-color: #fef6e0; color: #b7791f; }

.sidebar-widget.accent-brown { border-left: 4px solid var(--primary-brown); }
.chip-brown { background-color: var(--bg-light); color: var(--primary-brown); }

.feed-info-widget { padding: 16px 18px; }
.feed-info-row { display: flex; align-items: center; gap: 14px; }
.feed-info-body { flex: 1; min-width: 0; }
.feed-info-title { display: block; font-size: 0.95rem; color: var(--text-dark); }
.feed-info-meta { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 3px; }
.feed-info-stat {
    flex-shrink: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--primary-brown);
}
.feed-info-cta {
    flex-shrink: 0;
    background: var(--primary-brown);
    color: #fff;
    padding: 8px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stat-tile {
    background-color: #f8f6f1;
    border-radius: 8px;
    padding: 10px 12px;
}

.stat-tile.accent {
    background-color: #fdf3ea;
}

.stat-tile-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-brown);
}

.stat-tile.accent .stat-tile-value {
    color: #b8621b;
}

.stat-tile-label {
    font-size: 0.75rem;
    color: #918e83;
    margin-top: 2px;
}

.stat-tile.accent .stat-tile-label {
    color: #c9793a;
}

.feed-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #a89c88;
    margin: 32px 0 14px;
}
.feed-kicker:first-child { margin-top: 0; }

.feed-pair-grid, .feed-trio-grid {
    display: grid;
    gap: 18px;
    margin-bottom: 4px;
}
.feed-pair-grid { grid-template-columns: 1fr 1fr; }
.feed-trio-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
    .feed-pair-grid, .feed-trio-grid { grid-template-columns: 1fr; }
}

.cond-row { display: grid; grid-template-columns: 1fr 1fr; row-gap: 14px; column-gap: 10px; margin-bottom: 16px; }
.cond-item { text-align: left; }
.cond-item-lbl { font-size: 0.74rem; color: #918e83; white-space: nowrap; margin-bottom: 5px; }
.cond-item-lbl i { font-size: 0.85rem; margin-right: 3px !important; width: 14px; text-align: center; }
.cond-item-val { font-size: 1.15rem; font-weight: bold; color: var(--text-dark); }
.cond-item.accent .cond-item-val { color: #2980b9; }
.cond-item.accent .cond-item-lbl { color: #2980b9; font-weight: 600; }

.moon-strip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(135deg, #1e272e, #2c3e50);
    color: #ecf0f1;
    border-radius: 10px;
    padding: 14px 18px;
}
.moon-strip .moon-icon { font-size: 1.8rem; color: var(--gold); flex-shrink: 0; }
.moon-strip .moon-text strong { display: block; font-size: 0.98rem; }
.moon-strip .moon-text span { font-size: 0.78rem; color: #bdc3c7; }
.moon-strip .moon-times { display: flex; gap: 18px; font-size: 0.82rem; flex-wrap: wrap; }
.moon-strip .moon-times b { color: var(--gold); }

.widget-dark-head {
     
    background: var(--deep); padding: 13px 17px; display: flex; align-items: center;
    justify-content: space-between; border-radius: 12px 12px 0 0;
}
.widget-dark-head .t { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 0.95rem; font-weight: 800; }
.widget-dark-head .actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.widget-dark-head .actions a { font-size: 0.78rem; font-weight: 700; color: #f2c230; white-space: nowrap; }
.widget-dark-head .actions button {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #e6ddd0;
    border-radius: 6px; font-size: 0.7rem; padding: 4px 8px; cursor: pointer;
}
.widget-a-body { padding: 15px 17px; }

.cond-a-gauge { padding: 18px 17px 15px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border-color); }
.cond-a-ring { position: relative; width: 78px; height: 78px; flex-shrink: 0; }
.cond-a-ring svg { transform: rotate(-90deg); }
.cond-a-ring .num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cond-a-ring .num b { font-size: 1.5rem; font-weight: 800; color: var(--text-dark); line-height: 1; }
.cond-a-ring .num span { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.cond-a-info h4 { font-size: 0.95rem; font-weight: 800; color: var(--text-dark); }
.cond-a-info p { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
.cond-a-verdict { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; margin-top: 7px; }
.cond-a-verdict.v-weak { background: #f5efe6; color: #8a6a45; border: 1px solid #e5d9c6; }
.cond-a-verdict.v-good { background: var(--moss-soft); color: #5c6a40; border: 1px solid #dde3cd; }

.cond-a-grid { display: grid; grid-template-columns: 1fr 1fr; }
.cond-a-cell { padding: 12px 17px; border-bottom: 1px solid var(--border-color); }
.cond-a-cell:nth-child(odd) { border-right: 1px solid var(--border-color); }
.cond-a-cell .lab { display: flex; align-items: center; gap: 6px; font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.cond-a-cell .val { font-size: 1.2rem; font-weight: 800; color: var(--text-dark); margin-top: 4px; }
.cond-a-cell .val small { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); }
.cond-a-cell .sub { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }

.cond-a-moon { background: linear-gradient(140deg, #2e2318, #1c1610); padding: 15px 17px; position: relative; overflow: hidden; }
.cond-a-moon-row { display: flex; align-items: center; gap: 12px; }
.cond-a-moon-vis {
    width: 44px; height: 44px; border-radius: 50%; background: #3a3026; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #f2c230;
    box-shadow: inset 0 0 0 1px rgba(242,194,48,0.2);
}
.cond-a-moon-row h5 { color: #fff; font-size: 0.9rem; font-weight: 800; }
.cond-a-moon-row p { color: #b6a891; font-size: 0.7rem; margin-top: 2px; }
.cond-a-moon-pct { margin-left: auto; text-align: right; }
.cond-a-moon-pct b { display: block; font-size: 0.95rem; font-weight: 700; color: #f2c230; }
.cond-a-moon-pct span { font-size: 0.58rem; color: #8a7d6d; text-transform: uppercase; letter-spacing: 0.06em; }

.cond-a-slots { display: flex; border-top: 1px solid rgba(242,194,48,0.14); margin-top: 13px; padding-top: 12px; }
.cond-a-slot { flex: 1; }
.cond-a-slot .k { font-size: 0.58rem; color: #8a7d6d; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.cond-a-slot .v { color: #fff; font-size: 0.85rem; font-weight: 700; margin-top: 2px; }
.cond-a-slot.hot .v { color: #f2c230; }

.cond-a-foot { padding: 9px 17px; background: var(--bg-alt); display: flex; justify-content: flex-end; align-items: center; border-radius: 0 0 12px 12px; }
.cond-a-foot span { font-size: 0.68rem; color: var(--text-muted); }

.promo-feed-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card-bg);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.promo-feed-card.accent-gold { background: linear-gradient(155deg, rgba(241,196,15,0.07), var(--card-bg) 55%); }
.promo-feed-card.accent-blue { background: linear-gradient(155deg, rgba(52,152,219,0.07), var(--card-bg) 55%); }
.promo-feed-card.accent-green { background: linear-gradient(155deg, rgba(90,153,90,0.08), var(--card-bg) 55%); }
.promo-feed-card.accent-orange { background: linear-gradient(155deg, rgba(230,126,34,0.07), var(--card-bg) 55%); }
.promo-feed-card.accent-red { background: linear-gradient(155deg, rgba(231,76,60,0.07), var(--card-bg) 55%); }
.promo-feed-card.accent-purple { background: linear-gradient(155deg, rgba(155,89,182,0.07), var(--card-bg) 55%); }
.promo-feed-card.accent-amber { background: linear-gradient(155deg, rgba(243,156,18,0.07), var(--card-bg) 55%); }
.promo-feed-card.accent-brown { background: linear-gradient(155deg, rgba(107,79,53,0.08), var(--card-bg) 55%); }
.promo-feed-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.promo-feed-icon i.fa-solid { margin-right: 0; }
.promo-feed-body { flex: 1; min-width: 0; }
.promo-feed-body strong { display: block; color: var(--text-dark); font-size: 0.98rem; margin-bottom: 2px; }
.promo-feed-body span { font-size: 0.85rem; color: var(--text-muted); }
.promo-feed-cta {
    flex-shrink: 0;
    background: var(--primary-brown);
    color: #fff;
    padding: 8px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .promo-feed-card { flex-wrap: wrap; }
    .promo-feed-body { flex: 1 1 100%; }
    .promo-feed-cta { flex: 1 1 100%; margin-left: 0; margin-top: 10px; text-align: center; }
}

.fk-promo-box {
    background: var(--card-bg); border-radius: 16px; padding: 20px 22px;
    display: flex; flex-direction: column; gap: 8px;
}
.fk-promo-box h3 {
    margin: 0; font-family: 'Archivo', system-ui, sans-serif; font-stretch: 108%; font-weight: 800;
    font-size: 1rem; color: var(--text-dark);
}
.fk-promo-box p { margin: 0 0 4px; font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }
.fk-promo-box .fk-promo-cta {
    display: block; text-align: center; background: var(--primary-brown); color: #fff;
    padding: 10px; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.fk-promo-box--red { background: linear-gradient(155deg, rgba(231,76,60,0.07), var(--card-bg) 55%); }
.fk-promo-box--blue { background: linear-gradient(155deg, rgba(52,152,219,0.07), var(--card-bg) 55%); }

.freshcatch-wrap { margin: 0 -20px -20px; border-radius: 0 0 10px 10px; overflow: hidden; }

.freshcatch-thumb {
    position: relative; border-radius: 11px; overflow: hidden; flex-shrink: 0;
    background-color: #2c2c2a; background-size: cover; background-position: center;
}
.freshcatch-badge {
    position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    color: #fff; font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}

.freshcatch-featured {
    display: flex; gap: 15px; padding: 16px 18px; background: var(--bg-alt);
    border-bottom: 1px solid var(--border-color); text-decoration: none; color: inherit;
}
.freshcatch-featured .freshcatch-thumb { width: 130px; height: 110px; }
.freshcatch-title { font-size: 1.05rem; font-weight: 800; margin-top: 7px; color: var(--text-dark); }
.freshcatch-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 0.8rem; color: var(--text-muted); }
.freshcatch-reactions { display: flex; gap: 7px; margin-top: 11px; }
.freshcatch-pill {
    display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600;
    color: var(--text-muted); background: var(--card-bg); border: 1px solid var(--border-color);
    padding: 5px 11px; border-radius: 999px; flex-shrink: 0;
}
.freshcatch-pill.liked { background: var(--gold-soft); border-color: var(--gold-line); color: var(--hv2-gold); }

.freshcatch-row {
    display: flex; align-items: center; gap: 13px; padding: 12px 18px;
    border-bottom: 1px solid var(--border-color); text-decoration: none; color: inherit; transition: background 0.15s;
}
.freshcatch-row:hover { background: var(--bg-alt); }
.freshcatch-row .freshcatch-thumb { width: 48px; height: 48px; }
.freshcatch-row-title { font-size: 0.88rem; font-weight: 700; color: var(--text-dark); }
.freshcatch-row-title span { color: var(--primary-brown); font-weight: 700; }
.freshcatch-row-meta { font-size: 0.76rem; color: var(--text-muted); margin-top: 1px; }

.freshcatch-gate { position: relative; }
.freshcatch-gate .freshcatch-row { border-bottom: none; }
.freshcatch-gate-veil {
    position: absolute; inset: 0; backdrop-filter: blur(5px); background: rgba(255,255,255,0.55);
    display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 12px;
    border-bottom: 1px solid var(--border-color);
}
[data-theme="dark"] .freshcatch-gate-veil { background: rgba(27,26,23,0.65); }

.freshcatch-foot { padding: 11px 16px; text-align: center; background: var(--bg-alt); }
.freshcatch-foot a { font-size: 0.8rem; font-weight: 700; color: var(--primary-brown); text-decoration: none; }

.feed-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.feed-card-head .feed-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-brown);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.card-tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 18px; }
.card-tabbtn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Figtree', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-muted);
    padding: 10px 14px;
    position: relative;
}
.card-tabbtn.active { color: var(--text-dark); }
.card-tabbtn.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--hv2-gold); }
.card-tabbtn:not(.active):hover { color: var(--text-dark); }
.card-tabpanel { display: none; }
.card-tabpanel.active { display: block; }

.forum-composer {
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04); padding: 20px; margin-bottom: 25px;
    position: relative; z-index: 30;  
}
.forum-composer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.forum-composer-head .avatar-icon {
    width: 42px; height: 42px; border-radius: 50%; background: var(--primary-brown); color: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.forum-composer-headtext h3 { margin: 0; color: var(--text-dark); font-size: 1.05rem; font-weight: 800; }
.forum-composer-headtext p { margin: 2px 0 0; color: var(--text-muted); font-size: 0.8rem; }
.forum-composer-input {
    width: 100%; padding: 13px 16px; margin-bottom: 10px; border: 1px solid var(--border-color);
    border-radius: 10px; background: var(--bg-alt); font-weight: 700; font-size: 0.98rem;
    box-sizing: border-box; color: var(--text-dark); transition: border-color 0.15s, background 0.15s;
}
.forum-composer-textarea {
    width: 100%; padding: 13px 16px; margin-bottom: 12px; border: 1px solid var(--border-color);
    border-radius: 10px; background: var(--bg-alt); resize: none; font-size: 0.92rem; line-height: 1.5;
    box-sizing: border-box; font-family: inherit; color: var(--text-dark); transition: border-color 0.15s, background 0.15s;
}
.forum-composer-input:focus, .forum-composer-textarea:focus {
    outline: none; border-color: var(--primary-brown); background: var(--card-bg);
}
.forum-composer-input::placeholder, .forum-composer-textarea::placeholder { color: var(--text-muted); font-weight: 400; }
.forum-composer-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.forum-composer-catpicker { position: relative; flex: 1; min-width: 160px; }
.forum-composer-select-wrap {
    width: 100%; display: flex; align-items: center; gap: 8px;
    background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: 999px; padding: 11px 14px;
    font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text-dark); cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.forum-composer-select-wrap:hover { border-color: var(--hover-khaki); }
.forum-composer-catpicker.open .forum-composer-select-wrap { border-color: var(--primary-brown); background: var(--card-bg); }
.forum-composer-select-wrap > i.fa-tag { color: var(--text-muted); font-size: 0.8rem; }
.forum-composer-select-label { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-weight: 400; }
.forum-composer-select-wrap.has-value .forum-composer-select-label { color: var(--text-dark); font-weight: 600; }
.forum-composer-select-chevron { font-size: 0.65rem; color: var(--text-muted); transition: transform 0.15s; margin: 0 !important; }
.forum-composer-catpicker.open .forum-composer-select-chevron { transform: rotate(180deg); }

.forum-cat-dropdown-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12); padding: 6px; max-height: 240px; overflow-y: auto;
    display: none; flex-direction: column; gap: 2px;
}
.forum-composer-catpicker.open .forum-cat-dropdown-menu { display: flex; }
.forum-cat-dropdown-item {
    display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px;
    font-size: 0.85rem; font-weight: 600; color: var(--text-dark); cursor: pointer; transition: background 0.12s;
}
.forum-cat-dropdown-item:hover { background: var(--bg-alt); }
.forum-cat-dropdown-item.selected { background: #f4ede0; color: var(--primary-brown); }
.forum-cat-dropdown-item i { width: 16px; text-align: center; color: var(--primary-brown); font-size: 0.85rem; margin: 0 !important; }
.forum-composer-submit {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--primary-brown);
    color: #fff; border: none; padding: 12px 22px; border-radius: 10px; font-size: 0.88rem; font-weight: 700;
    cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,0.15); transition: background 0.15s, transform 0.15s;
}
.forum-composer-submit:hover { filter: brightness(0.9); transform: translateY(-1px); }
.forum-composer-submit i.fa-solid { margin-right: 0; }

.forum-starter { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--border-color); text-decoration: none; }
.forum-starter .fake { flex: 1; min-width: 0; background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: 999px; padding: 10px 15px; font-size: 0.82rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-starter .avatar-icon {
    width: 34px; height: 34px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--border-color);
    color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.9rem;
}
.forum-starter .btn-new-topic {
    flex-shrink: 0; white-space: nowrap; background: var(--primary-brown); color: #fff; padding: 10px 16px;
    border-radius: 10px; font-size: 0.78rem; font-weight: 700;
}

.forum-topic-row { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border-color); text-decoration: none; color: inherit; transition: background 0.15s; }
.forum-topic-row:last-child { border-bottom: none; }
.forum-topic-row:hover { background: var(--bg-alt); margin: 0 -14px; padding: 16px 14px; }
.forum-topic-body { flex: 1; min-width: 0; }
.forum-topic-tags { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; flex-wrap: wrap; }
.forum-tag { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-2); border: 1px solid var(--gold-line); }
 
.forum-tag.hot { background: var(--deep); color: #f2c230; border-color: var(--deep); }
.forum-tag.new { background: var(--moss-soft); color: #5c6a40; border-color: #dde3cd; }
.forum-topic-title { font-size: 0.92rem; font-weight: 700; line-height: 1.35; color: var(--text-dark); }
.forum-topic-preview {
    font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; margin-top: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.forum-topic-faces { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.forum-topic-faces .row { display: flex; }
.forum-topic-faces .row > * { border: 2px solid var(--card-bg); margin-left: -7px; }
.forum-topic-faces .row > *:first-child { margin-left: 0; }
.forum-topic-faces span { font-size: 0.7rem; color: var(--text-muted); }
.forum-topic-meta { display: flex; align-items: center; gap: 13px; margin-top: 9px; font-size: 0.73rem; color: var(--text-muted); flex-wrap: wrap; }
.forum-topic-meta b { color: var(--text-dark); font-weight: 600; }
.forum-topic-meta .mitem { display: flex; align-items: center; gap: 5px; }
.forum-topic-count {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 52px; flex-shrink: 0;
    background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: 11px; padding: 9px 4px; align-self: flex-start;
}
.forum-topic-count b { font-size: 1rem; font-weight: 700; color: var(--text-dark); line-height: 1; }
.forum-topic-count span { font-size: 0.56rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.angler-period {
    font-family: 'JetBrains Mono', monospace, monospace; font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.05em;
    padding: 8px 17px; border-bottom: 1px solid var(--border-color); background: var(--bg-alt);
    display: flex; justify-content: space-between; align-items: center; text-transform: uppercase;
}
.angler-period b { color: var(--text-dark); }

.angler-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 20px 16px 16px; }
.angler-pod { text-align: center; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.angler-pod .avw { position: relative; display: inline-block; }
.angler-pod .crown { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 17px; }
.angler-pod .medal {
    position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 999px;
    border: 2.5px solid var(--card-bg); font-family: 'JetBrains Mono', monospace, monospace; font-weight: 700; font-size: 0.6rem;
    display: flex; align-items: center; justify-content: center;
}
.angler-m1 { background: #f2c230; color: #33271b; }
.angler-m2 { background: #d8cec0; color: #4a3a2a; }
.angler-m3 { background: #c9a878; color: #fff; }
.angler-pod .nm { font-size: 0.75rem; font-weight: 700; margin-top: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dark); }
.angler-pod .pt { font-family: 'JetBrains Mono', monospace, monospace; font-size: 0.78rem; font-weight: 700; color: var(--gold-2); margin-top: 2px; }
.angler-pod .sub { font-size: 0.62rem; color: var(--text-muted); margin-top: 1px; }

.angler-row { display: flex; align-items: center; gap: 10px; padding: 10px 17px; border-bottom: 1px solid var(--border-color); text-decoration: none; color: inherit; }
.angler-row:last-child { border-bottom: none; }
.angler-rank { width: 20px; text-align: center; font-family: 'JetBrains Mono', monospace, monospace; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.angler-rt { flex: 1; min-width: 0; }
.angler-rt b { font-size: 0.8rem; font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dark); }
.angler-rt span { font-size: 0.68rem; color: var(--text-muted); }
.angler-pts { font-family: 'JetBrains Mono', monospace, monospace; font-size: 0.75rem; font-weight: 700; color: var(--text-dark); white-space: nowrap; }

.angler-row.me { background: var(--gold-soft); border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); }
.angler-row.me .angler-rt b, .angler-row.me .angler-pts, .angler-row.me .angler-rank { color: var(--gold-2); }

.stat-row { display: flex; align-items: center; gap: 12px; padding: 11px 17px; border-bottom: 1px solid var(--border-color); text-decoration: none; color: inherit; }
.stat-row:last-child { border-bottom: none; }
.stat-rank {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace, monospace; font-weight: 700; font-size: 0.68rem; background: var(--bg-alt); color: var(--text-muted);
}
.stat-rank.g1 { background: #f2c230; color: #33271b; }
.stat-rank.g2 { background: #e0d5c2; color: #4a3a2a; }
.stat-rank.g3 { background: #e8dcc8; color: #8a6a45; }
.stat-thumb { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; background-size: cover; background-position: center; background-color: #2c2c2a; }
.stat-rt { flex: 1; min-width: 0; }
.stat-rt b { font-size: 0.82rem; font-weight: 700; display: block; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-rt b .kg { font-family: 'JetBrains Mono', monospace, monospace; font-weight: 600; color: var(--text-muted); font-size: 0.72rem; }
.stat-rt span { font-size: 0.7rem; color: var(--text-muted); }
.stat-count {
    display: flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace, monospace; font-size: 0.75rem; font-weight: 700;
    color: var(--gold-2); background: var(--gold-soft); border: 1px solid var(--gold-line); padding: 4px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}

.stat-wrow { padding: 12px 17px; border-bottom: 1px solid var(--border-color); }
.stat-wrow:last-child { border-bottom: none; }
.stat-wtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat-wname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.stat-wname b { font-size: 0.82rem; font-weight: 700; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-wnum { font-family: 'JetBrains Mono', monospace, monospace; font-size: 0.75rem; font-weight: 700; color: var(--text-dark); white-space: nowrap; }
.stat-wnum span { font-size: 0.66rem; color: var(--text-muted); font-weight: 500; }
.stat-wbar { height: 6px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; margin-top: 8px; }
.stat-wbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #b98552, #8a5a35); }

.stat-srow { padding: 11px 17px; border-bottom: 1px solid var(--border-color); }
.stat-srow:last-child { border-bottom: none; }
.stat-stop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.stat-stop b { font-size: 0.82rem; font-weight: 700; color: var(--text-dark); }
.stat-stop .n { font-family: 'JetBrains Mono', monospace, monospace; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.stat-sbar { height: 7px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; margin-top: 7px; }
.stat-sbar i { display: block; height: 100%; border-radius: 99px; }

#home-main {
    display: grid; grid-template-columns: 1fr; max-width: 860px; gap: 30px;
    margin: 40px auto; padding: 0 20px; width: 100%;
}
#home-main.is-logged-in-layout { grid-template-columns: 1fr 340px; max-width: 1220px; align-items: start; gap: 0; }
#home-main #home-col-right { position: sticky; top: 20px; }
 
#home-main.is-logged-in-layout .feed-column { padding-right: 30px; }
#home-main.is-logged-in-layout #home-col-right { border-left: 1px solid var(--border-color); padding-left: 30px; }
@media (max-width: 768px) {
    #home-main, #home-main.is-logged-in-layout {
        display: flex; flex-direction: column; padding: 10px; max-width: 100%;
        align-items: stretch; gap: 26px;
    }
    #home-main #home-col-right { position: static; }

    #home-main .feed-column { display: contents; }
    #home-main.is-logged-in-layout #home-col-right { display: contents !important; }

    #home-main .feed-column > *,
    #home-main #home-col-right > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #news-announce-banner { order: 1; }
    #welcome-message-container { order: 2; }
    #home-block-welcome { order: 3; }
    #home-block-hero-catch { order: 4; }
    #home-block-trending { order: 5; }
    #home-block-suggested { order: 5; }
    #home-block-records { order: 6; }
    #home-block-magazine-feed { order: 7; }
    #home-block-forum-feed { order: 8; }
    #home-block-active-anglers { order: 9; }
    #home-block-stats { order: 10; }
    #home-block-forecast { order: 11; }
    #home-block-news { order: 12; }

    #home-block-magazin { order: 13; }

    #home-block-top-anglers { order: 14; }
    #home-block-weather { order: 15; }
    #home-block-online { order: 16; }
    #fresh-catches-section { order: 6; }
    #hs-magazine { order: 7; }
    #hs-rank { order: 8; }
    #showcase-forum { order: 9; }
    #showcase-league { order: 10; }
    #hs-about { order: 11; }
    #showcase-facebook { order: 12; }
    #hs-faq { order: 13; }
    #guest-closing-cta { order: 14; }
}

.full-bleed-section {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.guest-photo-strip {
    background: var(--bg-light);
    padding: 30px 20px;
    text-align: center;
}
.guest-photo-strip__label {
    font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-muted); font-weight: 700; margin-bottom: 16px;
}
.guest-photo-strip__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    max-width: 900px; margin: 0 auto;
}
.guest-photo-strip__thumb {
    display: block; aspect-ratio: 1; border-radius: 10px;
    background-size: cover; background-position: center; background-color: var(--bg-alt);
}
@media (max-width: 640px) {
    .guest-photo-strip__grid { grid-template-columns: repeat(2, 1fr); }
}

.cover-guest-stats-wrap {
    margin-top: 26px;
    width: 100%;
}
.cover-guest-stats {
    display: flex;
    gap: 32px;
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: 16px;
    width: 100%;
}
.cover-guest-stat {
    flex: 0 0 auto;
    min-width: 0;
}
.cover-guest-stat__num {
    font-family: 'JetBrains Mono', monospace, monospace;
    font-size: 1.55rem; font-weight: 700; color: #fff; line-height: 1;
}
.cover-guest-stat__label {
    font-size: 0.7rem; color: rgba(255,255,255,0.68); margin-top: 4px; letter-spacing: 0.02em;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .cover-guest-stats { gap: 8px; padding-top: 14px; }
    .cover-guest-stat { flex: 1 1 0; min-width: 0; }
    .cover-guest-stat > div { min-width: 0; overflow: hidden; }
    .cover-guest-stat__num { font-size: 1.05rem; }
    .cover-guest-stat__label {
        font-size: 0.58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
}

html.guest-hero-v2 {
    --gh-ink: #14110C; --gh-ink-2: #191510; --gh-panel: #221C14;
    --gh-line: rgba(255,255,255,0.09); --gh-line-strong: rgba(245,197,24,0.28);
    --gh-gold: #F5C518; --gh-gold-2: #FFD84D; --gh-gold-deep: #A8790A;
     
    --gh-khaki: #8C9B76; --gh-khaki-2: #A3B18C;
    --gh-bone: #F4EFE4; --gh-muted: #A2977F;
    --gh-disp: 'Archivo', system-ui, sans-serif;
    --gh-body: 'Figtree', system-ui, sans-serif;
    --gh-mono: 'IBM Plex Mono', monospace;
    --gh-tick: 44px;
}

html.guest-hero-v2 .cover-section { margin-bottom: 0 !important; }
html.guest-hero-v2 body { background: var(--gh-ink) !important; }

html.guest-hero-v2 .ticker-v2 {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
    height: var(--gh-tick) !important; z-index: 60 !important;
    background: rgba(12,10,7,0.92) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gh-line) !important;
    overflow: hidden !important;
}
html.guest-hero-v2 .ticker-v2__inner {
    display: flex !important; align-items: center !important; height: 100% !important;
}
html.guest-hero-v2 .ticker-v2__label {
    flex: none !important; flex-shrink: 0 !important; white-space: nowrap !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
    height: 100% !important; padding: 0 16px !important;
    font-family: var(--gh-mono) !important; font-size: 10.5px !important; letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--gh-gold) !important; border-right: 1px solid var(--gh-line) !important;
    background: rgba(245,197,24,0.06) !important;
}
html.guest-hero-v2 .ticker-v2__pulse {
    width: 6px; height: 6px; border-radius: 50%; background: #8AA04A; animation: ghPulse 2s infinite;
}
@keyframes ghPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(138,160,74,0.5); }
    50% { box-shadow: 0 0 0 5px rgba(138,160,74,0); }
}
html.guest-hero-v2 .ticker-v2__viewport {
    flex: 1 1 auto !important; min-width: 0 !important; height: 100% !important;
    overflow: hidden !important; position: relative !important;
}
html.guest-hero-v2 .ticker-v2__track {
    display: flex !important; flex-shrink: 0 !important; white-space: nowrap !important; gap: 0;
    animation: ghTickerSlide 46s linear infinite;
    will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden;
}
html.guest-hero-v2 .ticker-v2:hover .ticker-v2__track { animation-play-state: paused; }
 
@keyframes ghTickerSlide {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-1 * var(--tw, 50%)), 0, 0); }
}
html.guest-hero-v2 .ticker-v2__item {
    display: inline-flex; align-items: center; gap: 9px; padding: 0 22px; height: var(--gh-tick);
    font-family: var(--gh-mono); font-size: 11.5px; color: var(--gh-muted);
    border-right: 1px solid rgba(255,255,255,0.05); text-decoration: none; transition: background 0.25s;
}
html.guest-hero-v2 .ticker-v2__item:hover { background: rgba(255,255,255,0.04); }
html.guest-hero-v2 .ticker-v2__item i { color: var(--gh-gold); font-size: 0.72rem; opacity: 0.85; }
html.guest-hero-v2 .ticker-v2__item .u { color: var(--gh-gold); font-weight: 500; }
html.guest-hero-v2 .ticker-v2__item .kg { color: var(--gh-bone); font-weight: 600; }
@media (max-width: 760px) {
    html.guest-hero-v2 .ticker-v2__label { display: none !important; }
}
 
@media (max-width: 1099px) {
    html.guest-hero-v2 .main-nav { margin-top: var(--gh-tick) !important; }

    html.guest-hero-v2 .main-nav .nav-logo { display: none !important; }
    html.guest-hero-v2 #mobile-header-bar {
        display: flex !important; background: rgba(12,10,7,0.94) !important;
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--gh-line) !important; padding: 13px 18px !important;
        position: relative !important;
    }
     
    html.guest-hero-v2 #mobile-header-bar .mobile-nav-logo-slot {
        position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
        margin: 0;
    }
    html.guest-hero-v2 #mobile-menu-toggle { color: var(--gh-bone) !important; gap: 12px !important; }
     
    html.guest-hero-v2 #mobile-menu-icon {
        display: flex !important; align-items: center; justify-content: center;
        width: 34px; height: 34px; font-size: 1rem !important;
        border: 1px solid var(--gh-line) !important; border-radius: 9px !important;
        background: rgba(255,255,255,0.03) !important;
    }
     
    html.guest-hero-v2 #gh-mnav-reg-btn {
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 34px !important; height: 34px !important; font-size: 0.95rem !important;
        color: var(--gh-bone) !important; background: rgba(255,255,255,0.03) !important;
        border: 1px solid var(--gh-line) !important; border-radius: 50% !important;
        text-decoration: none !important;
    }
    html.guest-hero-v2 #gh-mnav-reg-btn i { margin-right: 0 !important; }

    html.guest-hero-v2 .main-nav ul {
        display: none !important;
        background: var(--gh-ink) !important;
        position: absolute !important; top: 100% !important; left: 0 !important;
        width: 100% !important; max-height: 80vh !important; z-index: 9999 !important;
        padding: 0 !important; box-shadow: 0 15px 25px rgba(0,0,0,0.5) !important;
        overflow-y: auto !important; -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        border-top: 1px solid var(--gh-line) !important;
    }
    html.guest-hero-v2 .main-nav ul.active {
        display: flex !important; flex-direction: column !important;
    }
    html.guest-hero-v2 .main-nav ul li { width: 100%; margin: 0 !important; }
    html.guest-hero-v2 .main-nav ul li a {
        font-family: var(--gh-body) !important; font-weight: 500 !important; font-size: 14.5px !important;
        color: var(--gh-bone) !important; padding: 15px 20px !important;
        border-bottom: 1px solid var(--gh-line) !important; background: transparent !important;
        border-left: 3px solid transparent !important; border-radius: 0 !important;
        -webkit-tap-highlight-color: transparent !important;
    }
     
    html.guest-hero-v2 .main-nav ul li a:hover,
    html.guest-hero-v2 .main-nav ul li a.active {
        background: rgba(140, 155, 118, 0.14) !important;
        border-left-color: var(--gh-khaki) !important;
        padding-left: 17px !important;
    }
    html.guest-hero-v2 .main-nav ul li.nav-secondary {
        display: block !important;  
    }
    html.guest-hero-v2 .main-nav ul li.nav-secondary a {
        font-size: 13.5px !important; color: var(--gh-muted) !important;
    }
     
    html.guest-hero-v2 .main-nav ul li.nav-item-register { display: none !important; }
    html.guest-hero-v2 .main-nav ul li.nav-item-login {
        padding: 14px 20px !important; border-bottom: none !important;
    }
    html.guest-hero-v2 .main-nav ul li.nav-item-login a {
        border: 1px solid var(--gh-line) !important; border-radius: 10px !important;
        border-left: 1px solid var(--gh-line) !important;
        text-align: center !important; padding: 12px !important; background: transparent !important;
    }
    html.guest-hero-v2 .main-nav ul li.nav-item-login a:hover {
        background: rgba(140, 155, 118, 0.14) !important; border-color: var(--gh-khaki) !important;
        padding-left: 12px !important;
    }
}

@media (min-width: 1100px) {
     
    html.guest-hero-v2 .main-nav {
        position: fixed !important; top: var(--gh-tick) !important; left: 0 !important; right: 0 !important;
        width: 100% !important; z-index: 55 !important;
        background: transparent !important; box-shadow: none !important; border-bottom: 1px solid transparent !important;
        padding: 18px 0 !important; font-family: var(--gh-body) !important;
        transition: background 0.35s, backdrop-filter 0.35s, border-color 0.35s, padding 0.35s;
    }
    html.guest-hero-v2 .main-nav.nav-stuck {
        background: rgba(18,15,10,0.88) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-bottom-color: var(--gh-line) !important; padding: 11px 0 !important;
    }
    html.guest-hero-v2 .main-nav ul {
        justify-content: flex-start !important; max-width: none !important; margin: 0 !important;
        padding-left: 8px !important; gap: 4px !important; flex: 1 1 auto !important;
        padding-right: max(28px, calc((100vw - 1320px) / 2 + 28px)) !important;
    }

    html.guest-hero-v2 .main-nav .nav-inner {
        max-width: none !important; margin: 0 !important; width: 100% !important;
    }
    html.guest-hero-v2 .main-nav .nav-secondary { display: none !important; }
    html.guest-hero-v2 .main-nav li a {
        font-family: var(--gh-body) !important; font-size: 14.5px !important; font-weight: 500 !important;
        color: rgba(244,239,228,0.82) !important; padding: 9px 13px !important; border-radius: 8px !important;
        background: transparent !important; position: relative;
    }
     
    html.guest-hero-v2 .main-nav li a.active {
        color: var(--gh-khaki) !important; background: transparent !important;
    }
    html.guest-hero-v2 .main-nav li a.active::after {
        content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px;
        background: var(--gh-khaki); border-radius: 2px;
    }
    html.guest-hero-v2 .main-nav li.nav-item-login { margin-left: auto !important; }
     
    html.guest-hero-v2 .main-nav li.nav-item-login a, html.guest-hero-v2 .main-nav li.nav-item-register a {
        font-family: var(--gh-body) !important; font-weight: 700 !important; font-size: 14.5px !important;
        padding: 11px 19px !important; border-radius: 10px !important; margin: 0 2px !important;
    }
    html.guest-hero-v2 .main-nav li.nav-item-login a {
        border: 1px solid var(--gh-line) !important; color: var(--gh-bone) !important;
        background: rgba(255,255,255,0.03) !important;
    }
    html.guest-hero-v2 .main-nav li.nav-item-login a:hover {
        filter: brightness(1.3);
    }
    html.guest-hero-v2 .main-nav li.nav-item-register a {
        background: var(--gold) !important; color: #1B1400 !important; border: 1px solid transparent !important;
    }
    html.guest-hero-v2 .main-nav li.nav-item-register a:hover { filter: brightness(0.9); }

    html.guest-hero-v2 .main-nav .nav-logo {
        padding-left: max(28px, calc((100vw - 1320px) / 2 + 28px)) !important;
         
        padding-top: 2px !important;
    }
    html.guest-hero-v2 .main-nav li.nav-item-login a, html.guest-hero-v2 .main-nav li.nav-item-register a {
        font-size: 13px !important; padding: 8px 15px !important;
    }
}

html.guest-hero-v2 .cover-guest-title { font-family: var(--gh-disp) !important; font-stretch: 112%; }
html.guest-hero-v2 .cover-subtitle,
html.guest-hero-v2 .cover-cta-row a { font-family: var(--gh-body) !important; }
 
html.guest-hero-v2 .cover-subtitle { display: block !important; }
html.guest-hero-v2 .cover-guest-stat__num,
html.guest-hero-v2 .cover-guest-stat__label { font-family: var(--gh-mono) !important; }

html.guest-hero-v2 .kicker-pill {
    margin-bottom: 4px !important;
    font-family: var(--gh-mono) !important; font-size: 11px !important; letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--gh-gold) !important; border: 1px solid var(--gh-line-strong) !important; border-radius: 999px !important;
    padding: 7px 14px !important; background: rgba(245,197,24,0.07) !important;
}
 
html.guest-hero-v2 #kicker-pill { display: none !important; }
 
html.guest-hero-v2 .gh-hero-logo-spacer {
    display: block !important;
    height: 64px;
    margin-bottom: 30px;  
}
 
html.guest-hero-v2 .gh-hero-logo {
    display: block !important;
    position: fixed; z-index: 200; opacity: 1;
    top: var(--gh-hlogo-top, 40px); left: var(--gh-hlogo-left, 20px); height: var(--gh-hlogo-h, 64px);
     
    transition: top 0.5s cubic-bezier(.4,0,.2,1), left 0.5s cubic-bezier(.4,0,.2,1),
        height 0.5s cubic-bezier(.4,0,.2,1), opacity 0.2s ease;
}
html.guest-hero-v2 .gh-hero-logo .gh-hero-logo-svg-slot,
html.guest-hero-v2 .gh-hero-logo .gh-hero-logo-svg-slot svg {
    height: 100% !important; width: auto; display: block;
}
 
html.guest-hero-v2 .gh-hero-logo.docked {
    top: var(--gh-hlogo-dock-top) !important;
    left: var(--gh-hlogo-dock-left) !important;
    height: var(--gh-hlogo-dock-h) !important;
    opacity: 0; pointer-events: none;
    transition: top 0.5s cubic-bezier(.4,0,.2,1), left 0.5s cubic-bezier(.4,0,.2,1),
        height 0.5s cubic-bezier(.4,0,.2,1), opacity 0.15s ease 0.35s;
}
 
html.guest-hero-v2 .main-nav .nav-logo,
html.guest-hero-v2 #mobile-header-bar .mobile-nav-logo-slot {
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s ease;
}
html.guest-hero-v2 .main-nav.nav-stuck .nav-logo,
html.guest-hero-v2 .main-nav.nav-stuck #mobile-header-bar .mobile-nav-logo-slot {
    opacity: 1; pointer-events: auto;
    transition: opacity 0.15s ease 0.35s;
}

html.guest-hero-v2 .cover-cta-note {
    font-family: var(--gh-mono) !important; font-size: 11.5px !important; color: var(--gh-muted) !important;
    margin-left: 4px !important;
}
html.guest-hero-v2 .livecard {
    position: absolute !important; right: 6% !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 260px !important; text-decoration: none !important; display: block !important; z-index: 3 !important;
    background: rgba(24,20,14,0.62) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--gh-line) !important; border-radius: 16px !important; overflow: hidden !important;
    box-shadow: 0 30px 70px -30px rgba(0,0,0,0.9) !important;
}
html.guest-hero-v2 .livecard__head {
    display: flex !important; align-items: center !important; gap: 9px !important; padding: 13px 16px !important;
    border-bottom: 1px solid var(--gh-line) !important;
    font-family: var(--gh-mono) !important; font-size: 10.5px !important; letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--gh-muted) !important;
}
html.guest-hero-v2 .livecard__pulse {
    width: 6px; height: 6px; border-radius: 50%; background: #8AA04A; flex-shrink: 0; animation: ghPulse 2s infinite;
}
html.guest-hero-v2 .livecard__shot {
    position: relative !important; aspect-ratio: 16 / 10 !important; background-size: cover !important;
    background-position: center !important;
    background-color: var(--gh-panel) !important;
}
html.guest-hero-v2 .livecard__badge {
    position: absolute !important; right: 12px !important; bottom: 12px !important;
    background: var(--gh-gold) !important; color: #1b1400 !important;
    font-family: var(--gh-mono) !important; font-weight: 600 !important; font-size: 14px !important;
    padding: 6px 10px !important; border-radius: 8px !important;
    box-shadow: 0 8px 22px -8px rgba(245,197,24,0.9) !important;
}
html.guest-hero-v2 .livecard__body { padding: 14px 16px !important; }
html.guest-hero-v2 .livecard__species {
    font-family: var(--gh-disp) !important; font-weight: 700 !important; font-size: 18px !important;
    color: var(--gh-bone) !important;
}
html.guest-hero-v2 .livecard__meta {
    font-family: var(--gh-mono) !important; font-size: 11px !important; color: var(--gh-muted) !important;
    margin-top: 4px !important;
}
html.guest-hero-v2 .livecard__foot {
    display: flex !important; align-items: center !important; gap: 9px !important; padding: 12px 16px !important;
    border-top: 1px solid var(--gh-line) !important;
}
html.guest-hero-v2 .livecard__avatar {
    width: 25px !important; height: 25px !important; border-radius: 50% !important; flex-shrink: 0; overflow: hidden !important;
    background: linear-gradient(140deg, var(--gh-gold-deep), #4a3a12) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-family: var(--gh-mono) !important; font-size: 10px !important; color: #fff8e0 !important;
}
html.guest-hero-v2 .livecard__avatar img { width: 100%; height: 100%; object-fit: cover; }
html.guest-hero-v2 .livecard__foot b {
    font-family: var(--gh-body) !important; font-size: 13.5px !important; font-weight: 600 !important;
    color: var(--gh-bone) !important;
}
html.guest-hero-v2 .livecard__ago {
    margin-left: auto !important; font-family: var(--gh-mono) !important; font-size: 10.5px !important;
    color: var(--gh-muted) !important;
}
@media (max-width: 1100px) {
    html.guest-hero-v2 #cover-catch-float { display: none !important; }
}

html.guest-hero-v2 .credit-v2 {
    position: absolute !important; right: 28px !important; bottom: 80px !important; z-index: 4 !important;
    text-align: right !important;
    font-family: var(--gh-mono) !important; font-size: 10.5px !important; letter-spacing: 0.06em !important;
    color: rgba(244,239,228,0.55) !important;
}
html.guest-hero-v2 .credit-v2 b {
    display: block !important; color: rgba(244,239,228,0.9) !important; font-weight: 500 !important;
    font-size: 11.5px !important; margin-bottom: 3px !important;
}
html.guest-hero-v2 .credit-v2__dots {
    margin-top: 11px !important; white-space: nowrap;
}
html.guest-hero-v2 .credit-v2__dots .cover-dot {
    display: inline-block !important; vertical-align: middle !important; margin-right: 7px !important;
    width: 22px !important; height: 3px !important; border-radius: 99px !important;
    background: rgba(255,255,255,0.22) !important;
    border: 0 !important; padding: 0 !important; cursor: pointer; transition: background 0.3s, width 0.3s;
}
html.guest-hero-v2 .credit-v2__dots .cover-dot:last-child { margin-right: 0 !important; }
html.guest-hero-v2 .credit-v2__dots .cover-dot.active { background: var(--gh-gold) !important; width: 34px !important; }
html.guest-hero-v2 .scrollcue {
    position: absolute !important; left: 50% !important; bottom: 26px !important; transform: translateX(-50%) !important;
    z-index: 4 !important;
    text-align: center !important;
    font-family: var(--gh-mono) !important; font-size: 10px !important; letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--gh-muted) !important;
}
html.guest-hero-v2 .scrollcue > span:first-child { display: block !important; margin-bottom: 9px !important; }
html.guest-hero-v2 .scrollcue__line {
    display: inline-block !important;
    width: 1px !important; height: 34px !important;
    background: linear-gradient(to bottom, var(--gh-gold), transparent) !important;
    animation: ghScrollDrop 2.2s infinite;
}
@keyframes ghScrollDrop {
    0% { opacity: 0; transform: scaleY(0.2); transform-origin: top; }
    40% { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}
@media (max-width: 760px) {
    html.guest-hero-v2 .credit-v2, html.guest-hero-v2 .scrollcue { display: none !important; }

    html.guest-hero-v2 .cover-guest-stats {
        display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px 12px !important;
    }
    html.guest-hero-v2 .cover-guest-stat__label {
        white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    }

    html.guest-hero-v2 .cover-cta-row {
        flex-direction: column !important; align-items: stretch !important;
    }
    html.guest-hero-v2 .cover-cta-row a {
        width: 100% !important; box-sizing: border-box !important; text-align: center !important;
        padding: 15px !important; font-size: 16px !important;
    }

    html.guest-hero-v2 .cover-guest-title {
        font-size: clamp(28px, 8vw, 34px) !important; line-height: 1.06 !important;
    }

    html.guest-hero-v2 .kicker-pill {
        font-size: 10px !important; letter-spacing: 0.12em !important; padding: 6px 12px !important;
    }

    html.guest-hero-v2 { --gh-tick: 36px; }
    html.guest-hero-v2 .ticker-v2__item {
        font-size: 10.5px !important; padding: 0 14px !important;
    }

    html.guest-hero-v2 #mobile-header-bar .mobile-nav-logo-slot svg { height: 28px !important; }

    html.guest-hero-v2 .hero-nav-stack { height: auto !important; }
    html.guest-hero-v2 .cover-section,
    html.guest-hero-v2 #dynamic-cover {
        height: auto !important; min-height: 0 !important; overflow: visible !important;
        flex: 0 0 auto !important;
    }
    html.guest-hero-v2 .cover-overlay {
        height: auto !important; padding: 28px 0 40px !important;
    }

    html.guest-hero-v2 .guest-hero-grid {
        display: flex !important; flex-direction: column !important;
        padding: 0 20px !important; gap: 14px !important;
    }
    html.guest-hero-v2 .cover-content { display: contents !important; }
    html.guest-hero-v2 .kicker-pill { order: 1 !important; }
     
    html.guest-hero-v2 .gh-hero-logo-spacer {
        order: 1 !important; width: 230px; margin: 0 auto 30px !important;
    }
    html.guest-hero-v2 .cover-guest-title { order: 2 !important; }
    html.guest-hero-v2 .cover-subtitle { order: 3 !important; }
    html.guest-hero-v2 #cover-cta-wrap { order: 4 !important; }
     
    html.guest-hero-v2 .livecard,
    html.guest-hero-v2 #cover-catch-float {
        order: 5 !important;
        position: static !important; right: auto !important; top: auto !important; transform: none !important;
        width: 100% !important; display: block !important; margin-top: 22px !important;
    }
    html.guest-hero-v2 .livecard__shot { aspect-ratio: 16 / 9 !important; }
    html.guest-hero-v2 #cover-guest-stats { order: 6 !important; }

    html.guest-hero-v2 .hs-catch-grid { grid-template-columns: 1fr !important; }
    html.guest-hero-v2 .hs-catch-grid .fresh-catch-card:nth-child(1) {
        grid-column: span 1 !important; grid-row: span 1 !important;
    }
    html.guest-hero-v2 .hs-catch-grid .fresh-catch-photo,
    html.guest-hero-v2 .hs-catch-grid .fresh-catch-card:nth-child(1) .fresh-catch-photo {
        aspect-ratio: 4 / 3 !important; height: auto !important; background-size: cover !important;
    }

    html.guest-hero-v2 .main-nav ul li.nav-item-login {
        display: flex !important; align-items: center !important; gap: 12px !important;
    }
    html.guest-hero-v2 .main-nav ul li.nav-item-login a { flex: 1 1 auto !important; border-bottom: none !important; }

    html.guest-hero-v2 body { background: var(--gh-ink) !important; }
}
@media (prefers-reduced-motion: reduce) {
    html.guest-hero-v2 .ticker-v2__track,
    html.guest-hero-v2 .ticker-v2__pulse,
    html.guest-hero-v2 .livecard__pulse,
    html.guest-hero-v2 .scrollcue__line { animation: none; }
}

html.guest-hero-v2 .guest-hero-grid { width: 100%; }
@media (min-width: 1100px) {
     
    html.guest-hero-v2 .guest-hero-grid {
        max-width: 1320px !important; margin: 0 auto !important; padding: 0 28px !important;
        display: grid !important; grid-template-columns: minmax(0,1fr) 360px !important;
        gap: 48px !important; align-items: center !important; width: 100% !important;
    }
    html.guest-hero-v2 .cover-overlay { justify-content: center !important; }
    html.guest-hero-v2 .cover-content { padding-left: 0 !important; max-width: none !important; }
    html.guest-hero-v2 .livecard {
        position: static !important; right: auto !important; top: auto !important; transform: none !important;
        width: 100% !important;
    }

    html.guest-hero-v2 .cover-guest-title {
        font-size: clamp(40px, 5.6vw, 74px) !important; line-height: 1.02 !important;
        letter-spacing: -0.025em !important;
    }

    html.guest-hero-v2 .hero-nav-stack { height: auto !important; }
    html.guest-hero-v2 #dynamic-cover {
        flex: 0 1 auto !important; min-height: min(94vh, 940px) !important;
    }
    html.guest-hero-v2 .cover-overlay {
        padding-top: 224px !important; padding-bottom: 64px !important;
    }
}

html.guest-hero-v2 .theme-toggle-btn {
    background: rgba(24,20,14,0.8) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--gh-line) !important; color: var(--gh-gold) !important;
}

html.guest-hero-v2 {
    --gh-panel-2: #2B2318;
    --gh-moss: #8AA04A;
    --gh-fb: #1877F2;
    --gh-down: #B4633F;
}

.hs-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
html.guest-hero-v2 .hs-sec {
    background: var(--gh-ink) !important;
    padding: clamp(56px, 8vw, 100px) 0 !important;
    position: relative;
}
html.guest-hero-v2 .hs-sec--alt {
    background: var(--gh-ink-2) !important;
    border-top: 1px solid var(--gh-line);
    border-bottom: 1px solid var(--gh-line);
}
html.guest-hero-v2 .hs-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--gh-mono); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gh-gold) !important; margin-bottom: 14px;
}
html.guest-hero-v2 .hs-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--gh-gold); flex: none;
    box-shadow: 0 0 0 4px rgba(245,197,24,0.14);
}
html.guest-hero-v2 .hs-h2 {
    font-family: var(--gh-disp) !important; font-size: clamp(26px, 3.6vw, 42px) !important;
    font-weight: 800 !important; font-stretch: 110%; color: var(--gh-bone) !important;
    letter-spacing: -0.02em; margin: 0; line-height: 1.1;
}
html.guest-hero-v2 .hs-h2 em { font-style: italic; color: var(--gh-gold); font-stretch: 100%; }
html.guest-hero-v2 .hs-lede {
    color: var(--gh-muted) !important; margin-top: 12px; max-width: 56ch; font-size: 15.5px;
    font-family: var(--gh-body) !important; line-height: 1.6;
}
html.guest-hero-v2 .hs-head { margin-bottom: 30px; }
html.guest-hero-v2 .hs-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
html.guest-hero-v2 .hs-more {
    font-family: var(--gh-mono) !important; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--gh-bone) !important; border-bottom: 1px solid var(--gh-line-strong); padding-bottom: 4px;
    text-decoration: none; white-space: nowrap;
}
html.guest-hero-v2 .hs-more:hover { color: var(--gh-gold) !important; border-color: var(--gh-gold); }

html.guest-hero-v2 .hs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--gh-body) !important; font-weight: 700; font-size: 14px;
    padding: 12px 20px; border-radius: 10px; border: 1px solid transparent;
    text-decoration: none; cursor: pointer;
}
html.guest-hero-v2 .hs-btn--gold { background: var(--gh-gold) !important; color: #1b1400 !important; }
html.guest-hero-v2 .hs-btn--gold:hover { background: var(--gh-gold-2) !important; }
html.guest-hero-v2 .hs-btn--ghost { border-color: var(--gh-line) !important; color: var(--gh-bone) !important; background: transparent !important; }
html.guest-hero-v2 .hs-btn--ghost:hover { border-color: var(--gh-gold) !important; color: var(--gh-gold) !important; }
html.guest-hero-v2 .hs-btn--fb { background: var(--gh-fb) !important; color: #fff !important; }
html.guest-hero-v2 .hs-btn--fb:hover { background: #3B8BF5 !important; }
html.guest-hero-v2 .hs-btn--wide { width: 100%; margin-top: 18px; }

html.guest-hero-v2 .hs-catch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
html.guest-hero-v2 .hs-catch-grid .fresh-catch-card {
    width: auto !important; background: var(--gh-panel) !important; border: 1px solid var(--gh-line) !important;
    border-radius: 14px !important; box-shadow: none !important; transition: transform 0.3s, border-color 0.3s;
}
html.guest-hero-v2 .hs-catch-grid .fresh-catch-card:hover { transform: translateY(-4px); border-color: var(--gh-line-strong) !important; }
html.guest-hero-v2 .hs-catch-grid .fresh-catch-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
html.guest-hero-v2 .hs-catch-grid .fresh-catch-photo { height: auto !important; aspect-ratio: 4/3; }
html.guest-hero-v2 .hs-catch-grid .fresh-catch-card:nth-child(1) .fresh-catch-photo { aspect-ratio: 4/3.3; }
html.guest-hero-v2 .hs-catch-grid .fresh-catch-badge-species { font-family: var(--gh-body) !important; }
html.guest-hero-v2 .hs-catch-grid .fresh-catch-badge-weight {
    background: var(--gh-gold) !important; color: #1b1400 !important; font-family: var(--gh-mono) !important;
}
html.guest-hero-v2 .hs-catch-grid .fresh-catch-info { background: transparent !important; }
html.guest-hero-v2 .hs-catch-grid .fresh-catch-meta .name { color: var(--gh-bone) !important; }
html.guest-hero-v2 .hs-catch-grid .fresh-catch-meta .place { color: var(--gh-muted) !important; font-family: var(--gh-mono) !important; }
@media (max-width: 1080px) { html.guest-hero-v2 .hs-catch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
    html.guest-hero-v2 .hs-catch-grid { grid-template-columns: 1fr; }
    html.guest-hero-v2 .hs-catch-grid .fresh-catch-card:nth-child(1) { grid-column: span 1; grid-row: span 1; }
}

html.guest-hero-v2 .hs-mag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
html.guest-hero-v2 .hs-mag-card {
    background: var(--gh-panel) !important; border: 1px solid var(--gh-line) !important;
    border-radius: 14px !important; overflow: hidden; text-decoration: none; display: block;
    transition: transform 0.3s, border-color 0.3s;
}
html.guest-hero-v2 .hs-mag-card:hover { transform: translateY(-4px); border-color: var(--gh-line-strong) !important; }
html.guest-hero-v2 .hs-mag-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
html.guest-hero-v2 .hs-mag-photo {
    position: relative; aspect-ratio: 4/3; background-size: cover; background-position: center;
    background-color: var(--gh-panel-2);
}
html.guest-hero-v2 .hs-mag-card:nth-child(1) .hs-mag-photo { aspect-ratio: 4/3.3; }
html.guest-hero-v2 .hs-mag-cat {
    position: absolute; top: 12px; left: 12px; background: rgba(20,14,8,0.65); backdrop-filter: blur(4px);
    color: var(--gh-bone) !important; font-family: var(--gh-mono) !important; font-size: 0.68rem; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 5px 11px; border-radius: 8px; font-weight: 600;
}
html.guest-hero-v2 .hs-mag-body { padding: 14px 16px 16px; }
html.guest-hero-v2 .hs-mag-title {
    font-family: var(--gh-body) !important; font-size: 0.95rem; font-weight: 700; line-height: 1.35;
    color: var(--gh-bone) !important; margin: 0 0 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.guest-hero-v2 .hs-mag-card:nth-child(1) .hs-mag-title { font-size: 1.15rem; -webkit-line-clamp: 3; }
html.guest-hero-v2 .hs-mag-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-family: var(--gh-mono) !important; font-size: 0.72rem; color: var(--gh-muted) !important;
}
html.guest-hero-v2 .hs-mag-stats { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 1080px) { html.guest-hero-v2 .hs-mag-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
    html.guest-hero-v2 .hs-mag-grid {
        display: flex; grid-template-columns: none; overflow-x: auto; gap: 14px;
        scroll-snap-type: x mandatory; padding-bottom: 4px; margin: 0 -24px; padding-left: 24px; padding-right: 24px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    html.guest-hero-v2 .hs-mag-grid::-webkit-scrollbar { display: none; }
    html.guest-hero-v2 .hs-mag-card {
        flex: 0 0 220px; scroll-snap-align: start;
    }
    html.guest-hero-v2 .hs-mag-card:nth-child(1) { grid-column: unset; grid-row: unset; flex-basis: 250px; }
    html.guest-hero-v2 .hs-mag-card:nth-child(1) .hs-mag-photo { aspect-ratio: 4/3; }
    html.guest-hero-v2 .hs-mag-card:nth-child(1) .hs-mag-title { font-size: 0.95rem; -webkit-line-clamp: 2; }
}

html.guest-hero-v2 .hs-podium { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 18px; align-items: end; }
html.guest-hero-v2 .hs-podium--few { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: stretch; }
html.guest-hero-v2 .hs-pod {
    background: var(--gh-panel) !important; border: 1px solid var(--gh-line) !important; border-radius: 14px !important;
    padding: 26px 20px 22px; text-align: center; position: relative; overflow: hidden;
    text-decoration: none; display: block;
}
html.guest-hero-v2 .hs-pod::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--gh-line); }
html.guest-hero-v2 .hs-pod--winner {
    padding-top: 34px; padding-bottom: 30px; border-color: var(--gh-line-strong) !important;
    background: linear-gradient(180deg, rgba(245,197,24,0.09), rgba(245,197,24,0) 45%), var(--gh-panel) !important;
}
html.guest-hero-v2 .hs-pod--winner::before { background: linear-gradient(90deg, var(--gh-gold-deep), var(--gh-gold), var(--gh-gold-deep)); }
html.guest-hero-v2 .hs-pod-rank { font-family: var(--gh-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gh-muted); }
html.guest-hero-v2 .hs-pod--winner .hs-pod-rank { color: var(--gh-gold); }
html.guest-hero-v2 .hs-pod > div:nth-child(2) { margin: 14px auto 10px; }
html.guest-hero-v2 .hs-pod-name { font-family: var(--gh-disp); font-weight: 700; font-size: 16px; color: var(--gh-bone); margin-top: 8px; }
html.guest-hero-v2 .hs-pod-fishline { font-family: var(--gh-mono); font-size: 11px; color: var(--gh-muted); margin-top: 4px; }
html.guest-hero-v2 .hs-pod-kg {
    font-family: var(--gh-mono); font-weight: 600; font-size: clamp(26px, 3vw, 36px); color: var(--gh-bone);
    line-height: 1; margin-top: 16px; letter-spacing: -0.02em;
}
html.guest-hero-v2 .hs-pod--winner .hs-pod-kg { color: var(--gh-gold); font-size: clamp(32px, 3.8vw, 44px); }
html.guest-hero-v2 .hs-pod-kg small { font-size: 0.38em; letter-spacing: 0.1em; color: var(--gh-muted); margin-left: 5px; font-weight: 500; }
html.guest-hero-v2 .hs-pod-when { font-family: var(--gh-mono); font-size: 10.5px; color: var(--gh-muted); margin-top: 10px; }
@media (max-width: 720px) {
    html.guest-hero-v2 .hs-podium { grid-template-columns: 1fr; }
    html.guest-hero-v2 .hs-pod--winner { order: -1; }
}
html.guest-hero-v2 .hs-weekbar {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px;
    background: var(--gh-line); border: 1px solid var(--gh-line); border-radius: 14px; overflow: hidden;
}
html.guest-hero-v2 .hs-weekbar > div { background: var(--gh-ink); padding: 16px 18px; }
html.guest-hero-v2 .hs-weekbar-k { font-family: var(--gh-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gh-muted); }
html.guest-hero-v2 .hs-weekbar-v { font-family: var(--gh-disp); font-weight: 700; font-size: 16px; color: var(--gh-bone); margin-top: 6px; }
@media (max-width: 720px) { html.guest-hero-v2 .hs-weekbar { grid-template-columns: 1fr; } }

html.guest-hero-v2 .hs-board { border: 1px solid var(--gh-line) !important; border-radius: 14px; overflow: hidden; background: var(--gh-panel) !important; }
html.guest-hero-v2 .hs-row {
    display: grid; grid-template-columns: 44px 34px 1fr 110px 78px; align-items: center; gap: 14px;
    padding: 13px 20px; border-top: 1px solid var(--gh-line); text-decoration: none; transition: background 0.2s;
}
html.guest-hero-v2 .hs-row:first-child { border-top: 0; }
html.guest-hero-v2 .hs-row:hover { background: var(--gh-panel-2); }
html.guest-hero-v2 .hs-pos { font-family: var(--gh-mono); font-size: 14px; color: var(--gh-muted); }
html.guest-hero-v2 .hs-row--gold .hs-pos { color: var(--gh-gold); font-weight: 600; }
html.guest-hero-v2 .hs-player { font-weight: 600; font-size: 14.5px; color: var(--gh-bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.guest-hero-v2 .hs-bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
html.guest-hero-v2 .hs-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gh-gold-deep), var(--gh-gold)); border-radius: 99px; }
html.guest-hero-v2 .hs-catches { font-family: var(--gh-mono); font-size: 14px; text-align: right; color: var(--gh-bone); }
html.guest-hero-v2 .hs-catches small { color: var(--gh-muted); font-size: 10.5px; margin-left: 4px; }
html.guest-hero-v2 .hs-board-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 15px 20px; border-top: 1px solid var(--gh-line); background: var(--gh-ink-2);
}
html.guest-hero-v2 .hs-board-foot p { font-family: var(--gh-mono); font-size: 11.5px; color: var(--gh-muted); margin: 0; }
@media (max-width: 640px) {
    html.guest-hero-v2 .hs-row { grid-template-columns: 30px 1fr 66px; gap: 10px; }
    html.guest-hero-v2 .hs-row > :nth-child(2), html.guest-hero-v2 .hs-row .hs-bar { display: none; }
}

html.guest-hero-v2 .hs-forum { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; }
html.guest-hero-v2 .hs-topics { border: 1px solid var(--gh-line) !important; border-radius: 14px; overflow: hidden; background: var(--gh-panel) !important; }
html.guest-hero-v2 .hs-side { display: flex; flex-direction: column; gap: 18px; }
html.guest-hero-v2 .hs-panel { border: 1px solid var(--gh-line) !important; border-radius: 14px; background: var(--gh-panel) !important; padding: 20px; }
html.guest-hero-v2 .hs-panel h5 {
    font-family: var(--gh-mono) !important; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gh-muted) !important; margin: 0 0 16px; font-weight: 500;
}
html.guest-hero-v2 .hs-panel-stats { display: flex; gap: 24px; }
html.guest-hero-v2 .hs-panel-stats b { display: block; font-family: var(--gh-mono); font-size: 24px; color: var(--gh-gold); font-weight: 600; }
html.guest-hero-v2 .hs-panel-stats span { font-family: var(--gh-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gh-muted); }
html.guest-hero-v2 .hs-quote { font-family: var(--gh-body); font-size: 14px; line-height: 1.55; color: var(--gh-bone); margin: 0; }
html.guest-hero-v2 .hs-quote em { display: block; font-family: var(--gh-mono); font-style: normal; font-size: 11px; color: var(--gh-muted); margin-top: 12px; }
 
html.guest-hero-v2 #showcase-forum .showcase-forum-row { padding: 16px 18px !important; border-top: 1px solid var(--gh-line) !important; border-bottom: 0 !important; }
html.guest-hero-v2 #showcase-forum .showcase-forum-row:first-child { border-top: 0 !important; }
html.guest-hero-v2 #showcase-forum .showcase-forum-row:hover { background: var(--gh-panel-2) !important; }
html.guest-hero-v2 #showcase-forum .sf-tag { color: var(--gh-gold) !important; border: 1px solid var(--gh-line-strong) !important; background: transparent !important; border-radius: 999px; padding: 1px 8px; font-family: var(--gh-mono); }
html.guest-hero-v2 #showcase-forum .sf-main h4 { color: var(--gh-bone) !important; font-family: var(--gh-disp); }
html.guest-hero-v2 #showcase-forum .showcase-forum-row:hover .sf-main h4 { color: var(--gh-gold) !important; }
html.guest-hero-v2 #showcase-forum .sf-meta { color: var(--gh-muted) !important; font-family: var(--gh-mono); }
html.guest-hero-v2 #showcase-forum .sf-stats, html.guest-hero-v2 #showcase-forum .sf-chevron { color: var(--gh-muted) !important; }
@media (max-width: 1080px) { html.guest-hero-v2 .hs-forum { grid-template-columns: 1fr; } }

html.guest-hero-v2 .hs-leagues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
html.guest-hero-v2 .hs-league {
    border: 1px solid var(--gh-line) !important; border-radius: 14px; background: var(--gh-panel) !important;
    padding: 24px; display: flex; flex-direction: column; transition: border-color 0.3s, transform 0.3s;
}
html.guest-hero-v2 .hs-league:hover { border-color: var(--gh-line-strong) !important; transform: translateY(-3px); }
html.guest-hero-v2 .hs-league-badge {
    font-family: var(--gh-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; display: inline-block; align-self: flex-start; color: #fff;
}
html.guest-hero-v2 .hs-league h3 { font-family: var(--gh-disp); font-size: 20px; font-weight: 700; color: var(--gh-bone); margin: 16px 0 4px; }
html.guest-hero-v2 .hs-league-sub { font-family: var(--gh-mono); font-size: 11px; color: var(--gh-muted); }
html.guest-hero-v2 .hs-league-mini { margin-top: 18px; border-top: 1px solid var(--gh-line); padding-top: 14px; }
html.guest-hero-v2 .hs-league-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13.5px; color: var(--gh-bone); }
html.guest-hero-v2 .hs-league-n { font-family: var(--gh-mono); font-size: 11px; color: var(--gh-muted); width: 16px; }
html.guest-hero-v2 .hs-league-p { margin-left: auto; font-family: var(--gh-mono); font-size: 12px; color: var(--gh-muted); }
html.guest-hero-v2 .hs-league-row--lead .hs-league-p { color: var(--gh-gold); }
@media (max-width: 1080px) { html.guest-hero-v2 .hs-leagues { grid-template-columns: 1fr; } }

html.guest-hero-v2 .hs-about { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
html.guest-hero-v2 .hs-about-p { color: var(--gh-muted) !important; font-family: var(--gh-body); font-size: 15.5px; margin-top: 16px; max-width: 54ch; line-height: 1.6; }
html.guest-hero-v2 .hs-about-p strong { color: var(--gh-bone); font-weight: 600; }
html.guest-hero-v2 .hs-about-row { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
html.guest-hero-v2 .hs-pull {
    font-family: var(--gh-disp); font-weight: 700; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.28;
    font-stretch: 106%; color: var(--gh-bone); border-left: 2px solid var(--gh-gold); padding-left: 22px;
}
html.guest-hero-v2 .hs-vals { display: grid; gap: 1px; background: var(--gh-line); border: 1px solid var(--gh-line); border-radius: 14px; overflow: hidden; margin-top: 26px; }
html.guest-hero-v2 .hs-vals > div { background: var(--gh-panel); padding: 18px 20px; }
html.guest-hero-v2 .hs-vals b { font-family: var(--gh-disp); font-size: 15px; color: var(--gh-bone); display: block; }
html.guest-hero-v2 .hs-vals span { color: var(--gh-muted); font-size: 13.5px; display: block; margin-top: 4px; }
@media (max-width: 1080px) { html.guest-hero-v2 .hs-about { grid-template-columns: 1fr; } }

html.guest-hero-v2 .hs-fbwrap {
    border: 1px solid var(--gh-line) !important; border-radius: 18px; padding: clamp(28px, 4vw, 46px);
    background: radial-gradient(80% 130% at 88% 0%, rgba(24,119,242,0.16), transparent 62%), var(--gh-panel) !important;
}
html.guest-hero-v2 .hs-fbtext { max-width: 560px; }
@media (max-width: 640px) {
    html.guest-hero-v2 .hs-fbwrap { text-align: center; }
    html.guest-hero-v2 .hs-fbtext .hs-about-row { justify-content: center; }
}

html.guest-hero-v2 .hs-faq { max-width: 840px; }
html.guest-hero-v2 .hs-q { border-top: 1px solid var(--gh-line); }
html.guest-hero-v2 .hs-q:last-child { border-bottom: 1px solid var(--gh-line); }
html.guest-hero-v2 .hs-qbtn {
    width: 100%; background: none; border: 0; color: var(--gh-bone); cursor: pointer; text-align: left;
    display: flex; align-items: center; gap: 18px; padding: 20px 4px; font-family: var(--gh-disp);
    font-weight: 700; font-size: clamp(15px, 1.7vw, 17px); transition: color 0.2s;
}
html.guest-hero-v2 .hs-qbtn:hover { color: var(--gh-gold); }
html.guest-hero-v2 .hs-qnum { font-family: var(--gh-mono); font-size: 11px; color: var(--gh-muted); font-weight: 400; flex: none; }
html.guest-hero-v2 .hs-qic { margin-left: auto; flex: none; width: 20px; height: 20px; position: relative; }
html.guest-hero-v2 .hs-qic::before, html.guest-hero-v2 .hs-qic::after {
    content: ""; position: absolute; background: var(--gh-gold); border-radius: 2px; transition: transform 0.3s, opacity 0.25s;
}
html.guest-hero-v2 .hs-qic::before { left: 0; top: 9px; width: 20px; height: 2px; }
html.guest-hero-v2 .hs-qic::after { left: 9px; top: 0; width: 2px; height: 20px; }
html.guest-hero-v2 .hs-q.open .hs-qic::after { transform: rotate(90deg); opacity: 0; }
html.guest-hero-v2 .hs-ans { overflow: hidden; height: 0; transition: height 0.35s ease; }
html.guest-hero-v2 .hs-ans p { padding: 0 40px 22px 30px; color: var(--gh-muted); margin: 0; max-width: 62ch; font-family: var(--gh-body); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 640px) { html.guest-hero-v2 .hs-ans p { padding: 0 0 20px 30px; } }

html.guest-hero-v2 .hs-closing {
    background: linear-gradient(140deg, var(--gh-ink-2), #241c10) !important; text-align: center; padding: 56px 26px !important;
    border-top: 1px solid var(--gh-line);
}
html.guest-hero-v2 .hs-closing h2 { font-family: var(--gh-disp); font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; color: var(--gh-bone); margin: 0; }
html.guest-hero-v2 .hs-closing p { font-family: var(--gh-body); font-size: 14.5px; color: var(--gh-muted); margin: 8px 0 0; }
html.guest-hero-v2 .hs-closing-btn { display: inline-block; max-width: 260px; margin: 20px auto 0; }
 
html.guest-hero-v2 main.content-container { margin-bottom: 0 !important; }
html.guest-hero-v2 footer { margin-top: 0 !important; }

@keyframes coverFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
.cover-fade-in {
    animation: coverFadeUp 0.7s ease-out both;
}
.cover-fade-in-1 { animation-delay: 0.1s; }
.cover-fade-in-2 { animation-delay: 0.25s; }
.cover-fade-in-3 { animation-delay: 0.4s; }
.cover-fade-in-4 { animation-delay: 0.55s; }
@media (prefers-reduced-motion: reduce) {
    .cover-fade-in { animation: none; }
}

.showcase-section {
    padding: 54px 20px;
}
 
.showcase-section__inner {
    display: flex; align-items: center; justify-content: center; gap: 60px; flex-wrap: wrap;
    max-width: 1100px; margin: 0 auto;
}
.showcase-section__inner.reverse { flex-direction: row-reverse; }
.showcase-section__text { flex: 1 1 380px; max-width: 440px; }
.showcase-section__eyebrow { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-2); font-weight: 800; }
.showcase-section__text h3 { font-size: 1.5rem; font-weight: 800; color: var(--text-dark); margin-top: 8px; letter-spacing: -0.02em; }
.showcase-section__text p { font-size: 0.9rem; color: var(--text-muted); margin-top: 10px; line-height: 1.6; }
.showcase-section__text a { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--primary-brown); font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.showcase-section__visual { flex: 1 1 380px; max-width: 400px; }

.showcase-forum-list { border-top: 1px solid var(--border-color); }
.showcase-forum-row {
    display: flex; align-items: center; gap: 16px; padding: 17px 4px;
    border-bottom: 1px solid var(--border-color); text-decoration: none; transition: background 0.15s ease;
}
.showcase-forum-row:hover { background: var(--bg-alt); }
.sf-tag {
    font-family: 'JetBrains Mono', monospace, monospace; font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 8px; font-weight: 700; background: rgba(184,137,26,0.13); color: var(--gold-2); flex-shrink: 0;
}
.sf-main { flex: 1; min-width: 0; }
.sf-main h4 {
    font-size: 0.92rem; font-weight: 700; color: var(--text-dark); margin: 0;
    display: flex; align-items: center; gap: 7px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-new-dot { width: 7px; height: 7px; border-radius: 50%; background: #c7524a; flex-shrink: 0; box-shadow: 0 0 6px rgba(199,82,74,0.6); }
.sf-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
.sf-stats { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-muted); flex-shrink: 0; }
.sf-stats i { color: var(--gold-2); }
.sf-chevron { color: var(--text-muted); opacity: 0.6; flex-shrink: 0; font-size: 0.8rem; }
@media (max-width: 640px) {
    .sf-tag { display: none; }
    .sf-stats span.slabel { display: none; }
}

.showcase-quest-card {
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px;
    padding: 24px 22px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    display: flex; flex-direction: column; gap: 14px; max-width: 340px;
}
.showcase-quest-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.showcase-quest-icon {
    width: 42px; height: 42px; border-radius: 12px; background: var(--primary-brown); color: var(--gold);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem;
}
.showcase-quest-status {
    font-family: 'JetBrains Mono', monospace, monospace; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 99px; border: 1px solid var(--gold-2); color: var(--gold-2);
    white-space: nowrap; height: fit-content; flex-shrink: 0;
}
.showcase-quest-card h4 { font-size: 1.1rem; font-weight: 800; color: var(--text-dark); line-height: 1.3; margin: 0; }
.showcase-quest-card p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.showcase-quest-foot {
    display: flex; align-items: center; gap: 6px; margin-top: 2px; padding-top: 14px;
    border-top: 1px dashed var(--border-color); font-size: 0.75rem; color: var(--text-muted);
}

.league-stack { position: relative; width: 300px; min-height: 250px; margin: 0 auto; }
.league-stack-card {
    position: absolute; width: 200px; background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: 16px; padding: 22px 18px 18px; box-shadow: 0 20px 40px rgba(0,0,0,0.16);
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    text-decoration: none; transition: transform 0.2s ease;
}
.league-stack-card--back { top: 44px; left: 44px; transform: rotate(8deg); z-index: 1; opacity: 0.88; }
.league-stack-card--front { top: 0; left: 0; transform: rotate(-5deg); z-index: 2; }
.league-stack-card--front:hover { transform: rotate(-5deg) translateY(-4px); }
.league-stack-tier {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace, monospace; font-size: 0.6rem; letter-spacing: 0.06em;
    text-transform: uppercase; font-weight: 800; color: #fff;
    padding: 4px 12px; border-radius: 20px; white-space: nowrap;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
.league-stack-avatar { margin-bottom: 4px; }
.league-stack-name { font-weight: 800; font-size: 0.9rem; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.league-stack-pts { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; }
@media (max-width: 640px) {
    .league-stack { width: 250px; min-height: 220px; }
    .league-stack-card { width: 170px; padding: 18px 14px 14px; }
    .league-stack-card--back { top: 38px; left: 38px; }
}

@media (max-width: 640px) {
    .showcase-section { padding: 40px 20px; }
    .showcase-section__inner, .showcase-section__inner.reverse { flex-direction: column; gap: 26px; }
}

#showcase-facebook { background: linear-gradient(100deg, #d4a017, var(--gold) 55%, #f7d774); }
.fb-cta-wrap {
    max-width: 1100px; margin: 0 auto; padding: 30px 26px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.fb-cta-left { display: flex; align-items: center; gap: 16px; }
.fb-cta-icon {
    width: 50px; height: 50px; border-radius: 14px; background: #241a00; color: #f7d774;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.3rem;
}
.fb-cta-left h3 { font-size: 1.05rem; font-weight: 800; color: #241a00; margin: 0 0 2px; }
.fb-cta-left p { font-size: 0.8rem; color: rgba(36,26,0,0.7); font-family: 'JetBrains Mono', monospace, monospace; margin: 0; }
.fb-cta-btn {
    background: #241a00; color: #f7d774; font-weight: 800; font-size: 0.85rem; padding: 12px 22px;
    border-radius: 10px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
    white-space: nowrap; transition: transform 0.15s ease;
}
.fb-cta-btn:hover { transform: translateY(-2px); }
@media (max-width: 640px) {
    .fb-cta-wrap { padding: 26px 20px; justify-content: center; text-align: center; }
    .fb-cta-left { flex-direction: column; text-align: center; gap: 10px; }
}

.fresh-catches-inner {
    max-width: 1100px; margin: 0 auto; padding: 54px 20px;
}
.fresh-catches-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    margin-bottom: 26px;
}
.fresh-catches-eyebrow { display: block; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-2); font-weight: 800; margin-bottom: 6px; }
.fresh-catches-head h3 { font-size: 1.5rem; font-weight: 800; color: var(--text-dark); letter-spacing: -0.02em; margin: 0; }
.fresh-catches-link {
    font-family: 'JetBrains Mono', monospace, monospace; font-size: 0.78rem; letter-spacing: 0.02em;
    color: var(--primary-brown); text-decoration: none; font-weight: 700; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.fresh-catches-scroll {
    display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory;
    -ms-overflow-style: none; scrollbar-width: none;
}
.fresh-catches-scroll::-webkit-scrollbar { display: none; }
.fresh-catches-scroll > * { scroll-snap-align: start; flex-shrink: 0; }
.fresh-catch-card {
    width: 250px; background: var(--card-bg); border-radius: 16px; overflow: hidden;
    border: 1px solid var(--border-color); box-shadow: 0 10px 24px rgba(36,27,18,0.06);
    text-decoration: none; display: block; flex-shrink: 0;
}
.fresh-catch-photo {
    position: relative; height: 180px; background-size: cover; background-position: center;
    background-color: var(--bg-alt);
}
.fresh-catch-badge-weight {
    position: absolute; top: 12px; right: 12px; background: linear-gradient(180deg, #f2c230, #dda30e);
    color: #241a00; font-family: 'JetBrains Mono', monospace, monospace; font-weight: 700; font-size: 0.78rem;
    padding: 5px 11px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.fresh-catch-badge-species {
    position: absolute; top: 12px; left: 12px; background: rgba(20,14,8,0.65); backdrop-filter: blur(4px);
    color: #fff; font-size: 0.72rem; padding: 5px 11px; border-radius: 8px; letter-spacing: 0.02em; font-weight: 600;
}
.fresh-catch-info { padding: 13px 15px 15px; display: flex; align-items: center; gap: 9px; }
.fresh-catch-meta .name { font-size: 0.82rem; font-weight: 700; color: var(--text-dark); }
.fresh-catch-meta .place { font-size: 0.7rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
@media (max-width: 640px) {
    .fresh-catches-inner { padding: 40px 20px; }
    .fresh-catch-card { width: 210px; }
    .fresh-catch-photo { height: 150px; }
}

.week-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; }
@media (max-width: 880px) {
    .week-grid { grid-template-columns: 1fr; }
}
.week-card {
    position: relative; border-radius: 16px;
    background: linear-gradient(155deg, #2c1e16, #1b140c);
    color: #fff; padding: 26px 22px; overflow: hidden; min-height: 190px;
    display: flex; flex-direction: column; justify-content: flex-end;
    border: 1px solid rgba(241,196,15,0.15);
}
.week-seal {
    position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #f2d98a, #d99a1e 60%, #9c7325 100%);
    display: flex; align-items: center; justify-content: center; color: #241a00; font-size: 1.05rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.week-kicker {
    font-family: 'JetBrains Mono', monospace, monospace; font-size: 0.66rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.week-card h4 { font-size: 1.15rem; color: #fff; margin: 0 0 6px; font-weight: 800; line-height: 1.25; }
.week-desc { font-size: 0.78rem; color: rgba(255,255,255,0.65); line-height: 1.5; }
@media (max-width: 640px) {
    .week-card { padding: 20px 18px; min-height: 150px; }
}

.hv2-poll {
     
}
.hv2-poll-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hv2-poll-top .poll-live-badge { margin-left: auto; }
.hv2-poll-k {
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--hv2-gold);
}

.poll-live-badge {
     
    display: inline-flex; align-items: center; gap: 6px; background: var(--gold-soft); color: var(--hv2-gold);
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 5px 10px; border-radius: 20px; flex-shrink: 0;
}
.poll-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hv2-gold); animation: pollPulse 1.8s infinite; }
@keyframes pollPulse {
    0% { box-shadow: 0 0 0 0 rgba(241,196,15,0.5); }
    70% { box-shadow: 0 0 0 6px rgba(241,196,15,0); }
    100% { box-shadow: 0 0 0 0 rgba(241,196,15,0); }
}

.poll-question { font-size: 1.12rem; font-weight: 800; color: var(--text-dark); margin: 0 0 16px; line-height: 1.4; }
.poll-options { display: flex; flex-direction: column; gap: 10px; }

.poll-option-btn {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: 10px;
    padding: 13px 16px; font-size: 0.95rem; font-weight: 600; color: var(--text-dark);
    cursor: pointer; transition: 0.2s;
}
.poll-option-btn:hover { border-color: var(--hv2-gold); background: var(--gold-soft); transform: translateX(2px); }
.poll-opt-icon {
    width: 32px; height: 32px; border-radius: 8px; background: var(--gold-soft); color: var(--hv2-gold);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.95rem;
}
.poll-opt-icon i.fa-solid { margin: 0 !important; }
.poll-opt-text { flex: 1; min-width: 0; }
.poll-opt-arrow { color: var(--text-muted); font-size: 0.8rem; flex-shrink: 0; transition: transform 0.2s; }
.poll-option-btn:hover .poll-opt-arrow { transform: translateX(3px); color: var(--hv2-gold); }

.poll-result-row {
    position: relative; border: 1px solid var(--border-color); border-radius: 10px;
    padding: 12px 16px; overflow: hidden; background: var(--bg-alt);
}
 
.poll-result-row.is-mine { border-color: var(--moss-2); }
.poll-result-row.is-top { border-color: var(--gold); }
.poll-result-fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
    background: linear-gradient(90deg, rgba(140,155,118,0.22), rgba(140,155,118,0.08));
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); z-index: 0;
}
.poll-result-row.is-top .poll-result-fill { background: linear-gradient(90deg, rgba(241,196,15,0.3), rgba(241,196,15,0.1)); }
.poll-result-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.poll-result-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.93rem; color: var(--text-dark); min-width: 0; }
.poll-result-label i.fa-solid { margin: 0 !important; }
.poll-mine-check { color: var(--moss-2) !important; font-size: 0.85rem; }
.poll-crown { color: var(--gold) !important; font-size: 0.85rem; }
.poll-result-pct { font-weight: 800; font-size: 0.98rem; color: var(--text-dark); flex-shrink: 0; }
.poll-result-sub { position: relative; z-index: 1; font-size: 0.76rem; color: var(--text-muted); margin-top: 3px; }

.poll-footnote {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 16px; font-size: 0.85rem; font-weight: 700; color: var(--moss-2);
}

.quest-row-plain {
    display: flex; align-items: center; gap: 9px; padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.quest-row-plain .quest-icon {
    width: 22px; height: 22px; border-radius: 6px; background: rgba(39,174,96,0.15); color: var(--moss-2);
    display: flex; align-items: center; justify-content: center; font-size: 0.68rem; flex-shrink: 0;
}

.todo-row-plain {
    display: flex; align-items: center; gap: 9px; padding: 5px 0; text-decoration: none; color: inherit;
}
.todo-check {
    width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border-color); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: transparent;
}
.todo-row-plain.is-done .todo-check { background: var(--primary-brown); border-color: var(--primary-brown); color: #fff; }
.todo-row-plain .todo-label { font-size: 0.82rem; color: var(--text-dark); flex: 1; min-width: 0; }
.todo-row-plain.is-done .todo-label { color: var(--text-muted); text-decoration: line-through; }
.todo-row-plain .todo-reward { font-size: 0.72rem; color: var(--primary-brown); font-weight: 700; white-space: nowrap; flex-shrink: 0; }

.hv2-top4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.weekly-carousel-card {
    position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 12px;
    overflow: hidden; text-decoration: none; display: block;
    background-color: #2c2c2a; background-size: cover; background-position: center;
}
.weekly-rank-badge {
    position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(20,15,9,0.75); color: #F4EFE4; font-family: 'IBM Plex Mono', monospace;
    font-weight: 600; font-size: 11px; display: flex; align-items: center; justify-content: center; z-index: 2;
}
 
.weekly-rank-badge.rank-1 { background: var(--gold); color: #241B02; font-weight: 700; }
.weekly-rank-badge.is-outside-top3 { background: rgba(20,15,9,0.75); color: #F4EFE4; }
@media (max-width: 640px) { .hv2-top4 { grid-template-columns: repeat(2, 1fr); } }

.weekly-summary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0; margin-top: 14px; }
.weekly-summary-box {
    display: block; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 12px;
    background: var(--card-bg); text-decoration: none; color: inherit;
}
.weekly-summary-label { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; }
.weekly-summary-value { font-family: 'Archivo', system-ui, sans-serif; font-stretch: 108%; font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weekly-summary-sub { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 640px) { .weekly-summary-row { grid-template-columns: 1fr; } }

.podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    padding: 6px 0 2px;
}

.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 100px;
    min-width: 0;
    text-decoration: none;
}

.podium-avatar {
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.podium-place.rank-1 .podium-avatar {
     
    box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px #fff;
}

.podium-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-brown);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podium-catches {
    font-size: 0.7rem;
    color: #918e83;
    margin: 2px 0 8px;
}

.podium-base {
    width: 100%;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.podium-place.rank-1 .podium-base {
    height: 48px;
    font-size: 1.3rem;
    background: var(--gold-soft);
    color: var(--gold-2);
}

.podium-place.rank-2 .podium-base {
    height: 34px;
    font-size: 1.1rem;
    background: #f1ede3;
    color: var(--silver);
}

.podium-place.rank-3 .podium-base {
    height: 24px;
    font-size: 1rem;
    background: #f7efe4;
    color: var(--bronze);
}

.leaderboard {
    list-style: none;
}

.leaderboard li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-color);
    font-weight: bold;
}

.adsense-placeholder {
    background-color: #e0e0e0;
    border: 2px dashed #999;
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.banner-ad {
    height: 100px;
    margin-bottom: 20px;
}

.vertical-ad {
    height: 400px;
}

footer {
    background-color: var(--primary-brown);
    color: white;
    padding: 44px 20px 0;
    margin-top: 50px;
    font-size: 0.9rem;
    width: 100%;
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.footer-col { display: flex; flex-direction: column; min-width: 0; }
.footer-col h4 {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255,255,255,0.55); margin: 0 0 12px; font-weight: 700;
}
.footer-col a {
    color: #e2dfd8;
    text-decoration: none;
    font-size: 0.88rem;
    padding: 5px 0;
    transition: color 0.2s;
}
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-col a.footer-bug-link { color: #ff9080; font-weight: 700; }
.footer-col a.footer-bug-link:hover { color: #ffb0a4; }

.footer-brand .footer-logo { display: inline-block; margin-bottom: 12px; line-height: 0; }
.footer-brand .footer-logo-svg-slot { display: block; }
.footer-brand .footer-logo-svg-slot svg { display: block; height: 32px; width: auto; }
.footer-brand p { opacity: 0.75; font-size: 0.85rem; line-height: 1.55; margin: 0 0 16px; max-width: 32ch; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
    width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem;
    transition: background 0.2s;
}
.footer-social a:hover { background: rgba(255,255,255,0.24); }

.footer-bottom { max-width: 1200px; margin: 0 auto; padding: 16px 0; text-align: center; }
.footer-bottom p { margin: 0; opacity: 0.6; font-size: 0.8rem; }

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 768px) {
    .content-container {
        grid-template-columns: 1fr;
    }
}

.stats-list {
    list-style: none;
}

.stats-list li {
    display: flex;
    justify-content: space-between;  
    padding: 10px 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: 0.95rem;
    color: var(--text-dark);
}

.stats-list li:last-child {
    border-bottom: none;  
}

.stats-list strong {
    color: var(--primary-brown);
}
 
i.fa-solid {
    margin-right: 8px;  
}

.action-btn i.fa-solid {
    margin-right: 5px;
}

.widget-icon-chip i.fa-solid {
    margin-right: 0;
}

.toast-icon i.fa-solid {
    margin-right: 0;
}

.text-green {
    color: #2ecc71;
}

.form-page-container {
    display: block;  
    max-width: 800px;
}
 
.upload-form {
    margin-top: 20px;
}

.file-upload-box {
    border: 2px dashed var(--primary-brown);
    padding: 40px 20px;
    text-align: center;
    background-color: var(--bg-alt);
    border-radius: 8px;
    margin-bottom: 25px;
    transition: all 0.3s;
}

.file-upload-box:hover {
    background-color: #f1ede6;
    border-color: var(--hover-khaki);
}

.file-upload-box i.fa-cloud-arrow-up {
    font-size: 3.5rem;
    color: var(--primary-brown);
    margin-bottom: 15px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.half-width {
    flex: 1;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--primary-brown);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    background-color: var(--bg-alt);
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--hover-khaki);
    box-shadow: 0 0 5px rgba(110, 123, 92, 0.3);
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

.auth-split-card {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.auth-brand-panel {
    flex: 1;
    min-width: 220px;
    background: linear-gradient(160deg, var(--primary-brown), #2f2519);
    position: relative;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    overflow: hidden;
}

.auth-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(110, 123, 92, 0.4), transparent 60%);
}

.auth-brand-content {
    position: relative;
}

.auth-brand-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 1.4rem;
}

.auth-brand-title {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4;
}

.auth-brand-stats {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.82rem;
    opacity: 0.9;
}

.auth-brand-stats i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

.auth-form-panel {
    flex: 1.3;
    min-width: 280px;
    padding: 36px 32px;
}

.auth-form-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-dark);
    margin: 0 0 4px 0;
}

.auth-form-subtitle {
    font-size: 0.9rem;
    color: #918e83;
    margin: 0 0 22px 0;
}

.auth-input-wrapper {
    position: relative;
}

.auth-input-wrapper .auth-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 0.95rem;
    pointer-events: none;
}

.auth-input-wrapper input {
    padding-left: 38px !important;
}

.auth-input-wrapper.has-toggle input {
    padding-right: 40px !important;
}

.auth-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 4px;
    transition: color 0.2s;
}

.auth-toggle-password:hover {
    color: var(--primary-brown);
}

.auth-field-hint {
    font-size: 0.78rem;
    margin-top: 6px;
    display: none;
    align-items: center;
    gap: 5px;
}

.auth-field-hint.is-visible {
    display: flex;
}

.auth-field-hint.hint-error { color: var(--brick); }
.auth-field-hint.hint-success { color: var(--moss-2); }

.form-group input.field-error {
    border-color: #e74c3c !important;
}

.form-group input.field-success {
    border-color: var(--moss-2) !important;
}

.auth-strength-bar {
    display: none;
    height: 5px;
    background: var(--surf-3);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.auth-strength-bar.is-visible {
    display: block;
}

.auth-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.auth-strength-label {
    font-size: 0.75rem;
    margin-top: 4px;
    color: #918e83;
    display: none;
}

.auth-strength-label.is-visible {
    display: block;
}

.auth-inline-error {
    display: none;
    align-items: center;
    gap: 8px;
    background: #fdecea;
    color: var(--brick);
    border: 1px solid #f5c6cb;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    margin-bottom: 18px;
}

.auth-inline-error.is-visible {
    display: flex;
}

@media (max-width: 700px) {
    .auth-split-card {
        border-radius: 12px;
    }
    .auth-brand-panel {
        display: none;
    }
    .auth-form-panel {
        padding: 26px 20px;
    }
}

.forum-category-box {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.forum-cat-header {
    background-color: var(--primary-brown);
    color: white;
    padding: 15px 20px;
}

.forum-cat-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.forum-row {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

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

.forum-row:hover {
    background-color: var(--bg-alt);
}

.forum-icon {
    font-size: 2rem;
    color: #b5ac9d;
    width: 60px;
    text-align: center;
}

.forum-details {
    flex: 2;
    padding-right: 20px;
}

.forum-details h4 {
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.forum-details h4 a {
    color: var(--primary-brown);
    text-decoration: none;
    transition: color 0.2s;
}

.forum-details h4 a:hover {
    color: var(--hover-khaki);
    text-decoration: underline;
}

.forum-details p {
    color: var(--text-2);
    font-size: 0.9rem;
    margin: 0;
}

.forum-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #555;
    font-size: 0.9rem;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 0 15px;
}

.forum-stats strong {
    color: var(--text-dark);
}

.forum-last-post {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: right;
    font-size: 0.9rem;
    padding-left: 15px;
}

.forum-last-post span {
    font-weight: bold;
    color: var(--primary-brown);
}

.forum-last-post small {
    color: var(--muted);
}

@media (max-width: 768px) {
    .forum-row {
        flex-wrap: wrap;
    }
    
    .forum-icon {
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }
    
    .forum-details {
        width: 100%;
        padding-right: 0;
        margin-bottom: 15px;
    }
    
    .forum-stats, .forum-last-post {
        flex: unset;
        width: 50%;
        border: none;
        padding: 0;
        text-align: left;
    }
    
    .forum-last-post {
        text-align: right;
    }
}
 
.breadcrumb {
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: var(--text-2);
}

.breadcrumb a {
    color: var(--primary-brown);
    text-decoration: none;
    font-weight: bold;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb i.fa-angle-right {
    margin: 0 8px;
    font-size: 0.8rem;
}

.forum-post {
    display: flex;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.post-user-info {
    width: 200px;
    background-color: var(--bg-alt);
    border-right: 1px solid var(--border-color);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.user-avatar {
    width: 60px;
    height: 60px;
    background-color: #e2dfd8;
    color: var(--muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.post-user-info strong {
    color: var(--primary-brown);
    font-size: 1.1rem;
}

.user-rank {
    font-size: 0.85rem;
    color: var(--text-2);
    margin-bottom: 10px;
}

.user-points {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--hover-khaki);
}

.post-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-header {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
}

.post-content {
    padding: 20px;
    flex: 1;
}

.post-content p {
    margin-bottom: 10px;
}

.post-footer {
    padding: 10px 20px;
    background-color: var(--bg-alt);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.reply-box {
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px;
}

.reply-box h3 {
    color: var(--primary-brown);
    margin-bottom: 15px;
}

.reply-box textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    resize: vertical;
}

.reply-box textarea:focus {
    outline: none;
    border-color: var(--hover-khaki);
}

@media (max-width: 600px) {
    .forum-post {
        flex-direction: column;
    }
    .post-user-info {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 15px;
    }
}

.points-balance-card {
    background: linear-gradient(135deg, var(--primary-brown) 0%, #30261c 100%);
    color: white;
    padding: 30px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.balance-info h2 {
    margin-bottom: 5px;
    font-size: 1.8rem;
}

.balance-info p {
    color: #e2dfd8;
}

.balance-amount {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.balance-amount span {
    font-size: 3rem;
    font-weight: bold;
}

.balance-amount i {
    font-size: 2.5rem;
    color: var(--hover-khaki);
}

.earn-points-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.earn-item {
    background-color: var(--bg-alt);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.earn-item i {
    font-size: 1.5rem;
    color: var(--primary-brown);
    width: 30px;
}

.earn-item span {
    flex: 1;
    font-size: 0.95rem;
}

.earn-item strong {
    color: #2ecc71;  
    font-size: 1.1rem;
}

.rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.reward-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.reward-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.reward-image {
    height: 180px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.reward-info {
    padding: 20px;
    text-align: center;
}

.reward-info h4 {
    color: var(--primary-brown);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.reward-info p {
    font-size: 0.9rem;
    color: var(--text-2);
    margin-bottom: 15px;
    min-height: 40px;
}

.reward-cost {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--hover-khaki);
    margin-bottom: 15px;
}

.btn-redeem {
    width: 100%;
    background-color: var(--hover-khaki);
    color: white;
    padding: 10px;
    font-size: 1.1rem;
    transition: background-color 0.3s;
}

.btn-redeem:hover {
    background-color: var(--primary-brown);
}

@media (max-width: 600px) {
    .points-balance-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .earn-points-grid {
        grid-template-columns: 1fr;
    }
}

a.action-btn {
    text-decoration: none;
}

.profile-header {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.profile-avatar {
    width: 100px;
    height: 100px;
    background-color: var(--hover-khaki);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.profile-info-main {
    flex: 1;
}

.profile-info-main h3 {
    font-size: 1.8rem;
    color: var(--primary-brown);
    margin-bottom: 5px;
}

.profile-points-box {
    background-color: var(--bg-alt);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    min-width: 150px;
}

.profile-points-box span {
    display: block;
    color: var(--text-2);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.profile-points-box strong {
    font-size: 2rem;
    color: var(--hover-khaki);
}

.profile-menu {
    list-style: none;
}

.profile-menu li {
    margin-bottom: 5px;
}

.profile-menu a {
    display: block;
    padding: 10px 15px;
    color: var(--text-dark);
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.profile-menu a i {
    width: 25px;
    color: var(--muted);
}

.profile-menu a:hover {
    background-color: var(--bg-alt);
}

.profile-menu a.active {
    background-color: var(--primary-brown);
    color: white;
}

.profile-menu a.active i {
    color: white;
}

@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    .profile-bottom-grid {
        grid-template-columns: 1fr !important;
    }
}

.feed-card {
    text-align: left; 
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-box {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 35px;
    overflow: hidden;  
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.news-box-header {
    background: linear-gradient(135deg, var(--primary-brown) 0%, #2c231a 100%);
    color: white !important;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 18px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 4px solid var(--hover-khaki);
}

.news-box-header #btn-show-news-form {
    background: rgba(255,255,255,0.1) !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}
.news-box-header #btn-show-news-form:hover {
    background: var(--hover-khaki) !important;
}

@keyframes ringBullhorn {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(15deg) scale(1.1); }
    20% { transform: rotate(-10deg) scale(1.1); }
    30% { transform: rotate(5deg) scale(1.1); }
    40% { transform: rotate(-5deg) scale(1.1); }
    50% { transform: rotate(0deg) scale(1); }
}

.news-box-header i.fa-bullhorn {
    color: var(--gold);  
    animation: ringBullhorn 4s ease-in-out infinite;
    transform-origin: left center;
}

.cat-hir          { --cat-color:#3498db; --cat-bg:#e8f2fc; --cat-fg:#2472a4; }
.cat-fejlesztes   { --cat-color:#9b59b6; --cat-bg:#f3ecf9; --cat-fg:#7d3c98; }
.cat-ujdonsag     { --cat-color:var(--moss-2); --cat-bg:var(--moss-soft); --cat-fg:var(--moss-2); }
.cat-esemeny      { --cat-color:#e67e22; --cat-bg:#fdf0e3; --cat-fg:#b8621b; }
.cat-karbantartas { --cat-color:#e74c3c; --cat-bg:#fdecea; --cat-fg:var(--brick); }
 
[data-theme="dark"] .cat-hir          { --cat-color:#3498db; --cat-bg:rgba(52,152,219,.14); --cat-fg:#6cb6e8; }
[data-theme="dark"] .cat-fejlesztes   { --cat-color:#a06cc2; --cat-bg:rgba(155,89,182,.16); --cat-fg:#c9a0dd; }
[data-theme="dark"] .cat-esemeny      { --cat-color:#e67e22; --cat-bg:rgba(230,126,34,.16); --cat-fg:#f0a868; }
[data-theme="dark"] .cat-karbantartas { --cat-color:#e74c3c; --cat-bg:rgba(231,76,60,.16); --cat-fg:#f1948a; }

.cat-badge {
    background: var(--cat-bg, #f4f2ee);
    color: var(--cat-fg, var(--muted));
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.alert-banner {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 18px;
    border-radius: 13px;
    background: linear-gradient(90deg, var(--cat-bg, var(--gold-soft)), transparent 75%, var(--card-bg));
    border: 1px solid var(--cat-color, var(--gold-line));
    margin-bottom: 18px;
    animation: alertIn 0.5s cubic-bezier(0.22, 0.68, 0.24, 1);
}
@keyframes alertIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.alert-pulse {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--cat-color, var(--gold));
    color: var(--cat-color, var(--gold));
    animation: alertPulse 2.4s infinite;
}
@keyframes alertPulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { box-shadow: 0 0 0 7px currentColor; opacity: 0; } }
.alert-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cat-fg, var(--muted));
    background: var(--cat-bg, #f4f2ee);
    padding: 3px 8px;
    border-radius: 5px;
    flex-shrink: 0;
}
.alert-text { font-size: 0.9rem; font-weight: 600; color: var(--cat-fg, var(--text-dark)); min-width: 0; }
.alert-go {
    margin-left: auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--cat-color, var(--hv2-gold));
    flex-shrink: 0;
    text-decoration: none;
}
.alert-close {
    background: none; border: 0; color: var(--text-muted); padding: 6px; border-radius: 8px;
    flex-shrink: 0; display: grid; place-items: center; transition: 0.2s; font-size: 0.8rem;
}
.alert-close:hover { background: rgba(0,0,0,0.06); color: var(--text-dark); }
 
.alert-banner.cat-karbantartas .alert-close { display: none; }
 
@media (max-width: 700px) {
    .alert-banner { flex-wrap: wrap; }
    .alert-tag { order: 1; }
    .alert-text { order: 2; }
    .alert-close { order: 3; }
    .alert-go {
        order: 4; margin-left: 0; width: 100%; padding-top: 2px;
        font-size: 0.72rem;
    }
}

.news-new-badge {
    background: #e74c3c;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 8px;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

#news-feed {
    padding: 0;
}
.news-compact-row {
    display: flex;
    gap: 10px;
    padding: 7px 0;
    text-decoration: none;
    color: inherit;
    border-top: 1px solid var(--border-color);
}
.news-compact-row:first-child { border-top: none; }
.news-compact-date {
    font-size: 0.68rem;
    color: var(--hv2-gold);
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 1px;
}
.news-compact-title {
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-dark);
}

.news-shell {
    max-width: 1180px; margin: 40px auto; padding: 0 20px 60px;
    display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start;
}
.news-page-head { margin-bottom: 6px; }
.news-page-head h1 { margin: 0 0 8px; font-size: 2rem; color: var(--primary-brown); }
.news-page-head p { margin: 0; color: var(--text-muted); font-size: 0.98rem; max-width: 56ch; line-height: 1.6; }

.news-feat {
    position: relative; overflow: hidden; border-radius: 18px; margin: 22px 0 20px; padding: 30px 32px;
    border: 1px solid var(--cat-color, var(--gold-line));
    background: radial-gradient(ellipse 480px 260px at 88% 12%, var(--cat-bg, var(--gold-soft)), transparent 70%), var(--card-bg);
}
.news-feat-ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 7.5rem; color: var(--cat-color, var(--gold)); opacity: 0.08; pointer-events: none; }
.news-feat-top { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.news-feat-dt { font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; color: var(--text-muted); }
.news-feat h2 { position: relative; margin: 0 0 10px; font-size: 1.5rem; color: var(--primary-brown); max-width: 46ch; }
.news-feat p { position: relative; margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--text-dark); max-width: 62ch; }
.news-feat-meta {
    position: relative; display: flex; align-items: center; gap: 10px; margin-top: 16px;
    font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; color: var(--text-muted);
}
.news-feat-meta b { color: var(--text-dark); font-family: inherit; font-weight: 600; }
.news-feat-latest { margin-left: auto; color: var(--cat-color, var(--hv2-gold)); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }

.news-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 4px 0 16px; }
.news-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill {
    background: var(--bg-alt); color: var(--text-muted); border: 1px solid var(--border-color);
    padding: 7px 14px; border-radius: 99px; font-size: 0.82rem; font-weight: 700; cursor: pointer;
    transition: 0.15s; font-family: inherit; display: inline-flex; align-items: center; gap: 7px;
}
.filter-pill:hover { border-color: var(--hover-khaki); color: var(--text-dark); }
.filter-pill.active { background: var(--cat-color, var(--primary-brown)); color: #fff; border-color: var(--cat-color, var(--primary-brown)); }
.filter-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--cat-color, var(--muted)); flex-shrink: 0; }
 
.filter-count { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; opacity: 0.75; }
.news-search {
    margin-left: auto; display: flex; align-items: center; gap: 9px; background: var(--bg-alt);
    border: 1px solid var(--border-color); border-radius: 99px; padding: 0 15px; height: 38px; min-width: 200px;
}
.news-search i { color: var(--text-muted); font-size: 0.82rem; flex-shrink: 0; }
.news-search input { border: 0; background: none; outline: none; color: var(--text-dark); font-family: inherit; font-size: 0.88rem; width: 100%; }
.news-search input::placeholder { color: var(--text-muted); }

#news-filter-empty { text-align: center; color: var(--text-muted); padding: 30px 0; display: none; grid-column: 1 / -1; }

.month-divider {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 30px 0 14px;
}
.month-divider:first-child { margin-top: 0; }
.month-divider .line { flex: 1; height: 1px; background: var(--border-color); }
.month-divider span {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}

#full-news-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 6px 0 10px; }
.news-tl-item.news-card {
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 15px; padding: 18px 19px;
    display: flex; flex-direction: column; transition: 0.2s;
}
.news-tl-item.wide { grid-column: 1 / -1; }
.news-tl-item.news-card:hover { border-color: var(--cat-color, var(--gold-line)); transform: translateY(-2px); }
.news-tl-item.new.news-card { border-color: var(--cat-color, var(--gold-line)); }
.news-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; flex-wrap: wrap; }
.news-card-dt { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--text-muted); }
.news-card-newtag {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: 'IBM Plex Mono', monospace;
    font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cat-color, var(--gold-2));
}
.news-card-newtag i { width: 6px; height: 6px; border-radius: 50%; background: var(--cat-color, var(--gold)); display: block; }
.news-card.news-tl-item h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; color: var(--text-dark); line-height: 1.3; }
.news-tl-item.news-card:hover h3 { color: var(--cat-color, var(--primary-brown)); }
.news-card.news-tl-item p { margin: 0; font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }
.news-card-meta {
    display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 14px;
    border-top: 1px solid var(--border-color); font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem; color: var(--text-muted);
}
.news-card-meta b { color: var(--text-dark); font-family: inherit; font-weight: 600; }
.news-card-rt { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.news-card-rt i { margin-right: 0 !important; }

.news-side { position: sticky; top: 24px; }
.news-side-box { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border-color); }
.news-side-box:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.news-side-box h5 {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-muted); margin: 0 0 13px;
}
.news-legend { display: flex; flex-direction: column; gap: 12px; }
.news-legend-row { display: flex; gap: 10px; align-items: flex-start; }
.news-legend-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--cat-color, var(--muted)); flex-shrink: 0; margin-top: 5px; }
.news-legend-row b { font-size: 0.9rem; font-weight: 700; color: var(--text-dark); display: block; }
.news-legend-row span { font-size: 0.82rem; color: var(--text-muted); display: block; margin-top: 2px; line-height: 1.5; }
.news-archive { display: flex; flex-direction: column; }
.news-archive a {
    display: flex; align-items: center; padding: 8px 0; font-size: 0.88rem; color: var(--text-dark);
    border-bottom: 1px solid var(--border-color); text-decoration: none;
}
.news-archive a:last-child { border-bottom: 0; }
.news-archive a:hover { color: var(--hover-khaki); }
.news-archive a .c { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; color: var(--text-muted); }
.news-tip { background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: 13px; padding: 16px; }
.news-tip b { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); display: block; }
.news-tip p { font-size: 0.84rem; color: var(--text-muted); margin: 7px 0 0; line-height: 1.55; }
.news-tip a {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hover-khaki); text-decoration: none;
}

@media (max-width: 980px) {
    .news-shell { grid-template-columns: 1fr; }
    .news-side { position: static; border-top: 1px solid var(--border-color); padding-top: 26px; }
}
@media (max-width: 640px) {
    .news-shell { padding: 0 16px 50px; }
    .news-feat { padding: 22px 20px; }
    .news-feat-ic { display: none; }
    #full-news-list { grid-template-columns: 1fr; }
    .news-tl-item.news-card { padding: 18px 18px; }
    .news-search { margin-left: 0; width: 100%; }
    .news-card-meta { font-size: 0.7rem; }
}

.mcat-hirek      { --cat-color: var(--gold-2); --cat-bg: var(--gold-soft); --cat-fg: var(--gold-2); }
.mcat-technika   { --cat-color: var(--moss-2); --cat-bg: var(--moss-soft); --cat-fg: var(--moss-2); }
.mcat-vizallas   { --cat-color: #3498db; --cat-bg: #e8f2fc; --cat-fg: #2472a4; }
.mcat-jogszabaly { --cat-color: #7e93a6; --cat-bg: #eaeff2; --cat-fg: #5c7186; }
.mcat-tesztek    { --cat-color: var(--brick); --cat-bg: #fbebe7; --cat-fg: var(--brick); }
.mcat-versenyek  { --cat-color: #9b59b6; --cat-bg: #f3ecf9; --cat-fg: #7d3c98; }
.mcat-halfajok   { --cat-color: #16a085; --cat-bg: #e3f6f2; --cat-fg: #128a72; }
[data-theme="dark"] .mcat-vizallas   { --cat-color: #3498db; --cat-bg: rgba(52,152,219,.16); --cat-fg: #6cb6e8; }
[data-theme="dark"] .mcat-jogszabaly { --cat-color: #93a8ba; --cat-bg: rgba(126,147,166,.18); --cat-fg: #b6c4cf; }
[data-theme="dark"] .mcat-tesztek    { --cat-bg: rgba(196,112,74,.18); --cat-fg: #e0a184; }
[data-theme="dark"] .mcat-versenyek  { --cat-color: #a06cc2; --cat-bg: rgba(155,89,182,.18); --cat-fg: #c9a0dd; }
[data-theme="dark"] .mcat-halfajok   { --cat-color: #2fc4a6; --cat-bg: rgba(22,160,133,.18); --cat-fg: #5fd6bc; }

.mag-rovat { background: var(--card-bg); border-bottom: 1px solid var(--border-color); position: sticky; top: var(--mag-nav-h, 60px); z-index: 45; }
.mag-rovat-in { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.mag-rovat-in::-webkit-scrollbar { display: none; }
.mag-rovat-in a { font-size: 0.85rem; font-weight: 600; padding: 13px 14px; color: var(--text-muted); white-space: nowrap; position: relative; text-decoration: none; transition: color 0.2s; }
.mag-rovat-in a:hover { color: var(--text-dark); }
.mag-rovat-in a.on { color: var(--hover-khaki); }
.mag-rovat-in a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--hover-khaki); }

.mag-shell { max-width: 1200px; margin: 30px auto; padding: 0 20px 60px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.mag-ph { margin-bottom: 22px; }
.mag-ph h1 { margin: 0 0 8px; font-size: 2rem; color: var(--primary-brown); }
.mag-ph p { margin: 0; color: var(--text-muted); font-size: 0.98rem; max-width: 64ch; line-height: 1.6; }

.mag-lead {
    display: flex; flex-direction: column; justify-content: flex-end;
    border-radius: 18px; overflow: hidden; position: relative; margin-bottom: 16px; min-height: 340px;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    text-decoration: none;
}
.mag-lead.no-lead-img { border: 1px solid var(--border-color); }
.mag-lead:not(.no-lead-img) { border: none !important; }
.mag-lead:not(.no-lead-img)::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(10,8,5,.96), rgba(10,8,5,.3) 58%, rgba(10,8,5,.05));
}
.mag-lead-in { padding: 26px 28px; position: relative; z-index: 2; }
.mag-lead-top { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.mag-lead-dt { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: rgba(255,255,255,0.75); }
.mag-lead h2 { margin: 0; font-size: 1.85rem; font-weight: 800; color: #fff; max-width: 20ch; line-height: 1.2; }
.mag-lead p { font-size: 0.95rem; color: rgba(255,255,255,0.82); margin-top: 10px; max-width: 60ch; line-height: 1.55; }
.mag-lead-meta { display: flex; align-items: center; gap: 8px; margin-top: 15px; font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: rgba(255,255,255,0.75); }

.mag-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 30px; }
.mag-sec { display: block; border-radius: 15px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border-color); transition: 0.22s; text-decoration: none; }
.mag-sec:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.mag-sec-img { line-height: 0; position: relative; aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--bg-alt); padding: 12px; box-sizing: border-box; }
.mag-sec-img .cat-badge { position: relative; }
.mag-sec-bd { padding: 16px 18px; }
.mag-sec-bd h3 { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.3; color: var(--text-dark); }
.mag-sec:hover h3 { color: var(--hover-khaki); }
.mag-sec-bd p { font-size: 0.88rem; color: var(--text-muted); margin-top: 8px; line-height: 1.55; }

.mag-rh { display: flex; align-items: center; gap: 12px; margin: 30px 0 16px; }
.mag-rh h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--text-dark); }
.mag-rh .mag-bar { flex: 1; height: 1px; background: var(--border-color); }

.mag-rows { display: flex; flex-direction: column; }
.mag-row { display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 16px 12px; border-bottom: 1px solid var(--border-color); margin: 0 -12px; border-radius: 12px; transition: background 0.2s; text-decoration: none; }
.mag-row:hover { background: var(--bg-alt); }
.mag-row-th { border-radius: 11px; overflow: hidden; aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: var(--bg-alt); display: block; }
 
.mag-sec-img.no-img, .mag-row-th.no-img {
    background-image: linear-gradient(135deg, var(--cat-color, var(--primary-brown)), var(--primary-brown)) !important;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.mag-sec-img.no-img::after, .mag-row-th.no-img::after {
    content: '\f1ea'; font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: rgba(255,255,255,0.4); font-size: 2.4rem;
}
.mag-row-th.no-img::after { font-size: 1.7rem; }
.mag-lead.no-lead-img { position: relative; }
.mag-lead.no-lead-img::after {
    content: '\f1ea'; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; right: 24px; top: 24px; font-size: 5rem; color: rgba(255,255,255,0.16);
}
.mag-row-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.mag-row-dt { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--text-muted); }
.mag-row h3 { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.3; color: var(--text-dark); }
.mag-row:hover h3 { color: var(--hover-khaki); }
.mag-row p { font-size: 0.88rem; color: var(--text-muted); margin-top: 8px; line-height: 1.6; max-width: 70ch; }
.mag-row-meta, .mag-sec .mag-row-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--text-muted); }

.mag-side { position: sticky; top: var(--mag-side-top, 90px); }
.mag-side-box { position: relative; margin-bottom: 26px; padding-bottom: 26px; }
.mag-side-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent 0, var(--divider) 8%, var(--divider) 92%, transparent 100%); }
.mag-side-box:last-child::after { content: none; }
.mag-side-box h5 { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.mag-side-box h5 i { color: var(--hv2-gold); }

.mag-top5 a { display: grid; grid-template-columns: 22px 1fr; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--border-color); align-items: start; text-decoration: none; }
.mag-top5 a:last-child { border-bottom: 0; }
.mag-top5-n { font-family: 'IBM Plex Mono', monospace; font-size: 1rem; font-weight: 600; color: var(--border-color); line-height: 1.1; }
.mag-top5 a:nth-child(1) .mag-top5-n { color: var(--hv2-gold); }
.mag-top5 b { font-size: 0.88rem; font-weight: 600; color: var(--text-dark); display: block; line-height: 1.4; }
.mag-top5 a:hover b { color: var(--hover-khaki); }
.mag-top5 span span { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--text-muted); display: block; margin-top: 5px; }

.mag-nl { background: linear-gradient(160deg, var(--bg-alt), var(--card-bg)); border: 1px solid var(--gold-line); border-radius: 14px; padding: 18px; }
.mag-nl b { font-size: 1rem; font-weight: 800; color: var(--text-dark); display: block; }
.mag-nl p { font-size: 0.84rem; color: var(--text-muted); margin-top: 7px; line-height: 1.55; }
.mag-nl-f { margin-top: 13px; display: flex; gap: 8px; }
.mag-nl-f input { flex: 1; min-width: 0; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 11px 13px; color: var(--text-dark); font-family: inherit; font-size: 0.88rem; outline: none; }
.mag-nl-f input:focus { border-color: var(--gold-line); }
.mag-nl-f button { background: var(--primary-brown); color: #fff; border: 0; border-radius: 10px; padding: 0 15px; font-weight: 700; font-size: 0.88rem; flex: none; cursor: pointer; }
.mag-nl-f button:hover { filter: brightness(0.9); }
.mag-nl-sm { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--text-muted); margin-top: 9px; }

.mag-tags2 { display: flex; gap: 7px; flex-wrap: wrap; }
.mag-tags2 a { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; background: var(--bg-alt); color: var(--text-dark); border: 1px solid var(--border-color); border-radius: 7px; padding: 5px 9px; transition: 0.2s; text-decoration: none; }
.mag-tags2 a:hover { border-color: var(--gold-line); color: var(--hover-khaki); }

@media (max-width: 1020px) {
    .mag-shell { grid-template-columns: 1fr; }
    .mag-side { position: relative; border-top: 0; padding-top: 28px; }
    .mag-side::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 0, var(--divider) 8%, var(--divider) 92%, transparent 100%); }
}
@media (max-width: 768px) {
    .mag-rovat-in { display: none; }
}
@media (max-width: 680px) {
    .mag-pair { grid-template-columns: 1fr; }
    .mag-row { grid-template-columns: 1fr; }
    .mag-row-th { order: -1; }
    .mag-lead h2 { font-size: 1.4rem; }
    .mag-ph h1 { font-size: 1.6rem; }
}

.art-shell { max-width: 1160px; margin: 30px auto; padding: 0 20px 60px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.art-main { max-width: 760px; }
.art-crumb { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 16px; }
.art-crumb a { color: var(--text-muted); text-decoration: none; }
.art-crumb a:hover { color: var(--hover-khaki); }
.art-crumb span { margin: 0 6px; opacity: 0.5; }
.art-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.art-dt { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--text-muted); }
.art-h1 { margin: 0 0 12px; font-size: 2.1rem; font-weight: 800; color: var(--primary-brown); line-height: 1.2; text-wrap: balance; }
.art-lead-p { font-size: 1.08rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 18px; }
.art-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0; margin-bottom: 22px;
    border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
    font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--text-muted);
}
.art-meta b { color: var(--text-dark); font-family: inherit; font-weight: 600; }
.art-share { margin-left: auto; display: flex; gap: 8px; }
.art-share a { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-alt); color: var(--text-dark); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: 0.2s; }
.art-share a:hover { background: var(--primary-brown); color: #fff; }
.art-cover { border-radius: 16px; overflow: hidden; margin-bottom: 24px; line-height: 0; }
.art-cover img { width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; }
.art-body { font-size: 1.05rem; line-height: 1.8; color: var(--text-dark); }
.art-body p { margin: 0 0 20px; }
.art-body p:last-child { margin-bottom: 0; }
.art-body strong, .art-body b { font-weight: 700; color: var(--text-dark); }
.art-body mark {
    background: var(--gold-soft); color: inherit; padding: 0.05em 0.3em; border-radius: 4px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.art-body blockquote {
    margin: 22px 0; padding: 14px 20px; border-left: 3px solid var(--primary-brown);
    background: var(--bg-alt); border-radius: 0 8px 8px 0; font-style: italic; color: var(--text-muted);
}
.art-body blockquote p:last-child { margin-bottom: 0; }
.art-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border-color); }
.art-tags a { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; background: var(--bg-alt); color: var(--text-dark); border: 1px solid var(--border-color); border-radius: 7px; padding: 5px 10px; text-decoration: none; transition: 0.2s; }
.art-tags a:hover { border-color: var(--gold-line); color: var(--hover-khaki); }

.art-comments { margin-top: 34px; }
.art-cmt-count { font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.art-cmt-login { background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 16px; margin-bottom: 22px; font-size: 0.9rem; color: var(--text-muted); }
.art-cmt-login a { color: var(--hover-khaki); font-weight: 700; text-decoration: none; }
.art-cmt-form { display: flex; gap: 12px; margin-bottom: 24px; align-items: flex-start; }
.art-cmt-form .av { flex: none; margin-top: 4px; }
.art-cmt-form-body { flex: 1; min-width: 0; }
 
.art-cmt-form textarea {
    width: 100%; height: 42px; min-height: 42px; resize: none; background: var(--bg-alt); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 10px 14px; color: var(--text-dark); font-family: inherit; font-size: 0.92rem;
    outline: none; box-sizing: border-box; transition: height 0.15s ease;
}
.art-cmt-form textarea.expanded { height: 76px; resize: vertical; }
.art-cmt-form textarea:focus { border-color: var(--gold-line); }
.art-cmt-form-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.art-cmt-form button {
    background: var(--primary-brown); color: #fff; border: 0; border-radius: 10px; padding: 9px 18px;
    font-weight: 700; font-size: 0.85rem; cursor: pointer; white-space: nowrap;
}
.art-cmt-form button:hover { filter: brightness(0.9); }
.art-cmt-form button:disabled { opacity: 0.6; cursor: default; }
 
.art-cmt-row { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border-color); }
.art-cmt-row:first-child { border-top: 0; padding-top: 0; }
.art-cmt-row .av { flex: none; }
.art-cmt-bubble { flex: 1; min-width: 0; }
.art-cmt-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.art-cmt-name { color: var(--text-dark); font-weight: 700; font-size: 0.88rem; text-decoration: none; }
.art-cmt-name:hover { color: var(--hover-khaki); }
.art-cmt-when { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.art-cmt-time { color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; }
.art-cmt-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.78rem; padding: 0; }
.art-cmt-del:hover { color: #e74c3c; }

.art-cmt-menu-wrap { position: relative; }
.art-cmt-menu-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; padding: 2px 4px; line-height: 1; }
.art-cmt-menu-btn:hover { color: var(--text-dark); }
.art-cmt-menu {
    position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.15); z-index: 50; min-width: 150px; overflow: hidden;
}
.art-cmt-menu a {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--text-dark); text-decoration: none;
    font-size: 0.85rem; font-weight: 600;
}
.art-cmt-menu a:hover { background: var(--bg-alt); }
.art-cmt-menu a.danger { color: #e74c3c; }

.art-cmt-text { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; margin-top: 3px; }
.art-cmt-empty { color: var(--text-muted); font-size: 0.88rem; padding: 6px 0 10px; }
.art-cmt-act { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.art-cmt-act button {
    background: none; border: none; padding: 0; cursor: pointer; font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; transition: color 0.15s;
}
.art-cmt-like:hover, .art-cmt-reply:hover { color: var(--hover-khaki); }
.art-cmt-like.on { color: #e74c3c; }
.art-cmt-like.on i { font-weight: 900; }

.fvote { display: inline-flex; align-items: center; gap: 16px; font-family: 'IBM Plex Mono', monospace; }
.fvote-btn {
    background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
    font-size: 0.78rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px;
    transition: color 0.15s;
}
.fvote-btn:hover { color: var(--hover-khaki); }
.fvote-btn.up.on { color: #27ae60; }
.fvote-btn.down.on { color: #e74c3c; }
.fvote-btn.up.on i, .fvote-btn.down.on i { font-weight: 900; }
.fvote-count { font-weight: 700; }

.ftd-opening-box {
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px;
    padding: 22px 24px; margin: 14px 0 26px;
}
.ftd-op-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.ftd-op-who { flex: 1; min-width: 0; }
.ftd-op-nameline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ftd-op-name { color: var(--text-dark); font-weight: 800; font-size: 0.96rem; text-decoration: none; }
.ftd-op-name:hover { color: var(--hover-khaki); }
.ftd-op-time { display: flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 0.76rem; margin-top: 3px; }
.ftd-op-title { margin: 0 0 14px; font-size: 1.45rem; font-weight: 800; line-height: 1.35; color: var(--text-dark); }
.ftd-opening-box .ftd-opening-body {
    color: var(--text-dark); font-size: 0.95rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
}
.ftd-opening-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.ftd-op-stats { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.ftd-op-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--text-muted); font-family: 'IBM Plex Mono', monospace; }
@media (max-width: 640px) {
    .ftd-opening-box { padding: 18px; }
    .ftd-op-title { font-size: 1.2rem; }
    .ftd-opening-foot { justify-content: flex-start; }
}

.art-cmt-replies-toggle:hover { color: var(--hover-khaki); }
.art-cmt-replies-toggle.open { color: var(--hover-khaki); }
 
.art-cmt-children { margin-top: 10px; padding-left: 18px; border-left: 2px solid var(--border-color); }
.art-cmt-children .art-cmt-row { padding: 12px 0; }
.art-cmt-children .art-cmt-row:first-child { padding-top: 0; }

#art-prog { position: fixed; top: var(--mag-nav-h, 41px); left: 0; height: 3px; background: var(--gold); z-index: 9998; width: 0; transition: width 0.1s linear; }

@media (max-width: 1020px) {
    .art-shell { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .art-h1 { font-size: 1.5rem; }
    .art-lead-p { font-size: 0.95rem; }
    .art-body { font-size: 0.98rem; }
}

#add-news-form {
    margin: 20px 25px 0 25px;
}

.user-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: bold;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.role-icon-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px; border-radius: 6px; flex: none;
    font-size: 0.62rem; color: #fff; vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
    cursor: default;
}
.role-icon-badge i.fa-solid { margin-right: 0; }
.role-icon-togazda { background: linear-gradient(135deg, #e08a2e, #5c3a21); border: 1px solid #f1c40f; }
.role-icon-halor { background: linear-gradient(135deg, #2ecc71, #1e8449); border: 1px solid rgba(255,255,255,0.25); }

.role-vezetőségi-tag {
    background-color: var(--brick);  
    color: white;
}

.role-veterán-tag {
    background-color: #d35400;  
    color: white;
}

.role-új-tag {
    background-color: #95a5a6;  
    color: white;
}

@media screen and (max-width: 768px) {
     
    .content-container {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }
     
    .desktop-logo {
        display: none !important;
    }

    .cover-section h1 {
        font-size: 1.8rem;
        padding: 0 15px;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 5px;
        padding: 10px;
    }
    
    .main-nav li {
        width: 100%;
        text-align: center;
    }
    
    .main-nav a {
        display: block;
        padding: 12px;
    }

    .feed-card, .news-box, .sidebar-widget {
        margin-bottom: 20px;
        border-radius: 8px;
    }
    
    .feed-card, .news-box {
        padding: 0 !important;
    }

    .sidebar-widget {
        padding: 15px;
    }

    .feed-card .card-content div[style*="display: flex"] {
        flex-direction: column;
        gap: 8px !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .card-footer {
        flex-direction: column;
    }

    .card-footer button {
        width: 100%;
        margin-bottom: 8px;
    }
    
    #add-news-form .action-btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .file-upload-box {
        padding: 20px 10px;
    }
    
    .upload-form input, 
    .upload-form select, 
    .upload-form textarea {
        font-size: 16px;  
    }
}

.card-content img {
    width: 100% !important;
    height: 400px !important;  
    object-fit: cover !important;  
    border-radius: 5px;
}

@media screen and (max-width: 768px) {
     
    .main-nav {
        padding: 10px;
        box-sizing: border-box;  
        width: 100%;
        overflow-x: hidden;
    }
    
    .main-nav ul {
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    .main-nav li {
        margin-bottom: 5px;  
    }
    
    .card-content img {
        height: 280px !important;
    }
}

.cover-section {
     
    height: 350px !important;
    position: relative;
    overflow: hidden;  
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-bottom: 20px;
}

.cover-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.cover-bg-layer.active {
    opacity: 1;
    animation: coverKenBurns 8s ease-out forwards;
}

@keyframes coverKenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

.cover-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.cover-overlay h1 {
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
    margin: 0;
    padding: 0 20px;
    letter-spacing: 1px;
}
.cover-guest-title {
    font-size: 2.7rem !important;
    line-height: 1.15 !important;
    padding: 0 !important;
}

.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 5;
}

.cover-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    border: 2px solid transparent;
}

.cover-dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.cover-dot.active {
    background-color: var(--card-bg);
    transform: scale(1.2);
    border: 2px solid var(--primary-brown);
}

@media screen and (max-width: 768px) {
    .cover-section {
        height: 220px !important;
    }
    .cover-overlay h1 {
        font-size: 1.8rem;
    }
    .cover-guest-title {
        font-size: 1.62rem !important;
    }
    .slider-dots {
        bottom: 10px;  
    }
}

@media screen and (max-width: 768px) {
    .cover-section {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .feed-card .card-content div[style*="align-items: center"] {
        flex-direction: row !important;
    }
}

.cover-section {
    margin-bottom: 0 !important;
}

.cover-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 700px;
    padding: 0 20px;
}

.cover-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

.cover-subtitle {
    font-size: 1.05rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.9);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    margin: 0;
    max-width: 550px;
}

.cover-stats {
     
    display: none;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

.cover-stat-chip {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.85rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 7px;
}

.cover-stat-chip strong {
    font-weight: 900;
}

@media screen and (max-width: 600px) {
    .cover-eyebrow { font-size: 0.7rem; letter-spacing: 2px; }
    .cover-subtitle {
        display: none;
    }
     
    .cover-stats {
        margin-top: 2px;
    }
    .cover-stat-chip {
        display: none;
    }
    .cover-stat-chip:last-child {
        display: flex;
        font-size: 0.78rem;
        padding: 5px 14px;
    }
}

.main-nav {
    margin-top: 0 !important;
}

.main-nav ul {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#mobile-header-bar {
    display: none !important;
}
.mobile-user-info {
    display: none !important;
}
.main-nav ul {
    display: flex !important;
}

@media screen and (max-width: 768px) {
    
    .main-nav {
        padding: 0 !important; 
        overflow: visible !important;  
    }

    #top-user-bar { 
        display: none !important; 
    }
    
    #mobile-header-bar {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        background: var(--primary-brown);
        padding: 12px 20px;
        border-bottom: 2px solid var(--hover-khaki);
    }
     
    #mobile-header-bar .mobile-nav-logo-slot { margin-left: 10px; margin-right: auto; }

    html.logged-in-nav #mobile-header-bar {
        background: transparent !important;
        border-bottom-color: transparent !important;
        transition: background-color 0.25s ease, border-color 0.25s ease;
    }
    html.logged-in-nav .main-nav.nav-stuck #mobile-header-bar {
        background: var(--primary-brown) !important;
        border-bottom-color: var(--hover-khaki) !important;
    }

    #mobile-menu-toggle {
        background: transparent;
        color: white;
        border: none;
        font-size: 1.1rem;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0;
    }

    .main-nav ul {
        display: none !important; 
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: var(--primary-brown);  
    }

    .main-nav ul.active { 
        display: flex !important; 
    }

    .main-nav ul li {
        width: 100%;
        text-align: left;
        display: block;
        margin-bottom: 0;
    }

    .main-nav ul li a {
        padding: 15px 20px !important;
        display: block;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
     
    .main-nav ul li a:hover::after,
    .main-nav ul li a.active::after {
        display: none !important;
    }
    .main-nav ul li a:hover,
    .main-nav ul li a.active {
        background: rgba(110, 123, 92, 0.14) !important;
        border-left: 3px solid var(--hover-khaki) !important;
        padding-left: 17px !important;
    }

    .mobile-user-info { 
        display: block !important; 
    }
}

.main-nav {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    position: sticky !important; 
    top: 0 !important;           
    z-index: 9999 !important;
}

@media screen and (max-width: 768px) {
    .main-nav ul {
        display: none !important; 
        background-color: var(--primary-brown) !important;
        
        position: absolute !important;     
        top: 100% !important;              
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        box-shadow: 0 15px 25px rgba(0,0,0,0.5) !important; 
        
        max-height: 80vh !important; 
        overflow-y: auto !important;               
        -webkit-overflow-scrolling: touch !important;
        
        touch-action: pan-y !important; 
    }
    
    .main-nav ul.active {
        display: flex !important; 
    }
    
    .main-nav ul li a {
        -webkit-tap-highlight-color: transparent !important;
    }
    
    #mobile-notif-dropdown {
        z-index: 10000 !important;
    }
}

.modern-feed-card {
    padding: 0 !important;  
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
    margin-bottom: 25px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.feed-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line-2);
}
.feed-user-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1; 
    min-width: 0;
}
.feed-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-brown), var(--hover-khaki));
    color: white; display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.avatar-fallback {
    font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-stretch: 105%;
    color: #F5F0E6; letter-spacing: 0.02em;
}
.avatar-fallback-g1 { background: linear-gradient(145deg, #5C6B45, #3C462C); }  
.avatar-fallback-g2 { background: linear-gradient(145deg, #7A5A2E, #4A371B); }  
.avatar-fallback-g3 { background: linear-gradient(145deg, #4A5A66, #2C363E); }  
.avatar-fallback-g4 { background: linear-gradient(145deg, #6B4A50, #3E2B2F); }  
.avatar-fallback-g5 { background: linear-gradient(145deg, #5E5535, #3A341F); }  
.feed-user-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.feed-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.feed-username {
    font-weight: bold; font-size: 1rem; color: var(--text-dark); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 150px;
}
.feed-rank-badge {
    margin: 0 !important; font-size: 0.65rem !important; padding: 2px 6px !important;
    white-space: nowrap; flex-shrink: 0;
}
.feed-ponty-badge {
    color: #e67e22; font-weight: bold; background: #fff4e6; padding: 2px 6px; border-radius: 8px;
    font-size: 0.7rem; white-space: nowrap; flex-shrink: 0;
}
.feed-header-right {
    text-align: right; flex-shrink: 0; margin-left: 5px;
}
.feed-date { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-btn { background: none; border: none; cursor: pointer; margin-left: 5px; font-size: 0.9rem; }
.text-orange { color: #f39c12; } .text-red { color: #e74c3c; } .text-blue { color: #2980b9; } .text-gray { color: #95a5a6; }

.feed-image-wrapper {
    position: relative;
    width: 100%;
    background-color: #000;
    aspect-ratio: 4 / 5;  
    max-height: 70vh;
    overflow: hidden;
}
.feed-image-blur {
    position: absolute; top: -10%; left: -10%; width: 120%; height: 120%;
    background-size: cover; background-position: center; filter: blur(15px); opacity: 0.6; z-index: 1;
}
.feed-image-link {
    display: block; width: 100%; height: 100%; position: relative; z-index: 2;
}
.feed-main-image {
    width: 100% !important; height: 100% !important; object-fit: contain !important;
}
 
.feed-image-veil {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, rgba(10,8,6,0.75) 0%, rgba(10,8,6,0.25) 32%, transparent 55%);
}
 
.feed-onimg-bar {
    position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
}
.feed-onimg-bar span {
    display: flex; align-items: center; gap: 5px; color: #fff; font-weight: 600; font-size: 0.82rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7); white-space: nowrap;
}
.feed-onimg-bar span i { opacity: 0.9; font-size: 0.78rem; }
 
.feed-onimg-bar span.rel { color: var(--moss-2); text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
 
.feed-fish-name {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    background: rgba(0,0,0,0.6); color: white; padding: 5px 12px; border-radius: 20px;
    font-weight: bold; text-transform: uppercase; font-size: 0.85rem;
    backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.2);
}
 
.feed-weight-badge {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    background: var(--gold-soft); border-radius: 12px; padding: 6px 13px; text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
}
 
.feed-fish-name.has-ribbon { top: 98px; }
.feed-weight-badge.has-ribbon { top: 98px; }
.feed-weight-badge .value { display: block; font-size: 1.2rem; font-weight: 800; line-height: 1; color: var(--gold-2); }
.feed-weight-badge .value small { font-size: 0.68rem; font-weight: 700; }
.feed-weight-badge .label {
    font-size: 0.6rem; font-weight: 700; color: #a3821f; opacity: 0.85;
    letter-spacing: 0.4px; text-transform: uppercase; margin-top: 2px;
}
 
[data-theme="dark"] .feed-weight-badge { background: var(--gold); }
[data-theme="dark"] .feed-weight-badge .value,
[data-theme="dark"] .feed-weight-badge .label { color: #1B1400; }
 
.capital-ribbon {
    position: absolute; top: 0; left: 0; width: 92px; height: 92px; z-index: 4;
    overflow: hidden; pointer-events: none;
}
.capital-ribbon span {
    position: absolute; top: 16px; left: -28px; width: 130px;
    background: linear-gradient(135deg, var(--gold), #e8ab0a); color: #5c4400;
    text-align: center; font-size: 0.65rem; font-weight: bold; letter-spacing: 0.5px;
    padding: 5px 0; transform: rotate(-45deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
 
.new-catch-ribbon {
    position: absolute; top: 0; right: 0; width: 92px; height: 92px; z-index: 4;
    overflow: hidden; pointer-events: none;
}
.new-catch-ribbon span {
    position: absolute; top: 16px; right: -28px; width: 130px;
    background: linear-gradient(135deg, #e74c3c, var(--brick)); color: #fff;
    text-align: center; font-size: 0.65rem; font-weight: bold; letter-spacing: 0.5px;
    padding: 5px 0; transform: rotate(45deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

.feed-card-content { padding: 15px; }

.detail-hero-stats { display: flex; align-items: stretch; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.detail-stat-box { background: var(--gold-soft); border-radius: 10px; padding: 10px 18px; text-align: center; flex-shrink: 0; }
.detail-stat-box .value { font-size: 1.4rem; font-weight: bold; color: var(--gold-2); line-height: 1; white-space: nowrap; }
.detail-stat-box .value small { font-size: 0.75rem; }
.detail-stat-box .label { font-size: 0.68rem; color: #a3821f; font-weight: bold; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.detail-stat-box.neutral { background: var(--bg-alt); }
.detail-stat-box.neutral .value { color: var(--text-dark); font-size: 1.15rem; }
.detail-stat-box.neutral .label { color: #918e83; }
@media (max-width: 600px) {
    .detail-hero-stats { padding: 14px; gap: 8px; }
    .detail-stat-box { padding: 8px 12px; flex: 1; min-width: 80px; }
}

.feed-description { margin: 0; line-height: 1.5; color: var(--text-dark); font-size: 0.95rem; }

.feed-likers-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.feed-liker-avatars { display: flex; flex-shrink: 0; }
.feed-liker-avatar {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--card-bg);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    color: #fff; font-size: 0.6rem; margin-left: -8px; flex-shrink: 0;
}
.feed-liker-avatar:first-child { margin-left: 0; }
.feed-likers-text { font-size: 0.78rem; color: #918e83; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.feed-reaction-bar {
    padding: 6px 15px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 14px; background: var(--card-bg); margin-top: 4px;
}
 
.feed-image-wrapper + .feed-reaction-bar { margin-top: 0; }
.feed-reaction-btn {
    background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 5px;
    padding: 4px 2px; border-radius: 10px; transition: 0.2s; font-weight: bold; font-size: 0.85rem;
    flex-shrink: 0;
}
.feed-reaction-btn:hover { background: var(--bg-alt); }
.feed-reaction-btn i { font-size: 1rem; }

.forum-inter-btn {
    background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 5px;
    padding: 4px 2px; border-radius: 10px; transition: background-color 0.2s; font-weight: bold; font-size: 0.85rem;
}
.forum-inter-btn:hover { background: var(--bg-alt); }
 
.forum-inter-btn i { display: inline-block; width: 16px; text-align: center; flex-shrink: 0; font-size: 1rem; margin-right: 0 !important; }

.forum-cat-badge {
    display: inline-block;
    background: #eef7fc;
    color: #2980b9;
    border: 1px solid #d6eaf8;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap;
}
[data-theme="dark"] .forum-cat-badge {
    background: rgba(52, 152, 219, 0.14);
    color: #6cb6e8;
    border-color: rgba(52, 152, 219, 0.3);
}
 
.feed-reaction-right { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.feed-share-btn {
    background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center;
    padding: 4px; border-radius: 10px; transition: 0.2s; font-size: 0.95rem; flex-shrink: 0;
}
.feed-share-btn:hover { background: var(--bg-alt); }

.feed-card-footer { display: flex; padding: 10px 15px; background: var(--bg-alt); border-top: 1px solid var(--line-2); gap: 10px; }
.feed-card-footer .action-btn { flex: 1; padding: 10px; font-size: 0.85rem; display: flex; justify-content: center; align-items: center; }
.feed-card-footer .share-btn { background: var(--bg-alt); border-color: var(--border-color); color: var(--text); }
.feed-card-footer .like-btn.liked { color: #e67e22; }

.feed-comments-section { padding: 15px; background: var(--card-bg); border-top: 1px solid var(--border-color); }
.feed-comment-bubble { margin-bottom: 8px; font-size: 0.85rem; padding: 8px 10px; background: var(--bg-alt); border-radius: 8px; border-left: 3px solid var(--hover-khaki); clear: both; overflow: hidden; }
.feed-show-more-btn { background: none; border: none; color: var(--primary-brown); font-weight: bold; font-size: 0.85rem; cursor: pointer; padding: 5px 0; margin-bottom: 5px; }
.feed-empty-comment { margin-bottom: 8px; font-size: 0.85rem; color: var(--muted); font-style: italic; }
.feed-comment-input-row { display: flex; gap: 8px; margin-top: 12px; }
.feed-comment-input-row input { flex: 1; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; font-family: inherit; font-size: 0.9rem; }
.feed-comment-input-row .send-btn { background-color: var(--primary-brown); color: white; border-radius: 10px; padding: 0 20px; }

@media (max-width: 768px) {
     
    .feed-card-header { padding: 10px; }
    .feed-user-left { gap: 8px; }
    .feed-avatar { width: 35px; height: 35px; font-size: 1rem; }

    .feed-username {
        font-size: 0.95rem;
        max-width: 120px;  
    }

    .feed-card-header {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .feed-user-left {
        min-width: 160px;
    }
    .feed-header-right {
        margin-left: auto;
    }

    .feed-card-footer { gap: 5px; padding: 10px; flex-wrap: nowrap !important; }
    .feed-card-footer .action-btn { padding: 8px 5px; font-size: 0.75rem; }
    
    .feed-weight-badge { padding: 5px 10px; }
    .feed-weight-badge .value { font-size: 1.05rem; }
}

.global-chat-widget {
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px;
    overflow: hidden; display: flex; flex-direction: column;
    height: 600px;  
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    position: sticky; top: 20px;  
}
.chat-header {
    background: var(--primary-brown); color: white; padding: 15px;
    font-weight: bold; font-size: 1.1rem; display: flex; align-items: center; gap: 10px;
}
.chat-messages {
    flex: 1; padding: 15px; overflow-y: auto; background: var(--bg-alt);
    display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth;
}
.chat-message-row { display: flex; width: 100%; }
.row-me { justify-content: flex-end; }
.row-other { justify-content: flex-start; }
.chat-bubble-me {
    background: #e8f8f5; color: #16a085; padding: 10px 15px;
    border-radius: 15px 15px 0 15px; max-width: 85%; border: 1px solid #d1f2eb;
}
.chat-bubble-other {
    background: var(--card-bg); color: var(--text-dark); padding: 10px 15px;
    border-radius: 15px 15px 15px 0; max-width: 85%; border: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.chat-input-area {
    padding: 15px; background: var(--card-bg); border-top: 1px solid var(--border-color); display: flex; gap: 10px;
}
.chat-input-area input {
    flex: 1; padding: 10px 15px; border: 1px solid var(--border-color); border-radius: 20px; outline: none;
}
.chat-input-area button {
    background: var(--primary-brown); color: white; border: none;
    width: 42px; height: 40px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

#nav-desktop-dropdown.desktop-profile-dropdown {
    display: none !important;  
    position: absolute;
    top: 100%;
     
    right: 0;
    background: var(--primary-brown);
    min-width: 200px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-radius: 0 0 8px 8px;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1000;
    flex-direction: column;
}

#nav-desktop-dropdown.desktop-profile-dropdown.show {
    display: flex !important;  
}

#nav-desktop-dropdown .dropdown-header {
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    cursor: default;
    line-height: 1.4;
    text-align: left;
}

#nav-desktop-dropdown .dropdown-header strong {
    display: block;
    color: #fff;
    font-size: 1.05rem;
}

#nav-desktop-dropdown .dropdown-header span {
    color: #e67e22;
    font-size: 0.85rem;
    font-weight: bold;
}

#nav-desktop-dropdown a {
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    font-size: 0.95rem;
    text-transform: none;
    color: white;
    text-decoration: none;
    display: block;
}

#nav-desktop-dropdown a.text-red {
    color: #e74c3c !important;
}

#nav-desktop-dropdown a:hover {
    background-color: var(--hover-khaki) !important;
}

@media (max-width: 768px) {
    #nav-desktop-dropdown.desktop-profile-dropdown {
        position: relative !important;
        box-shadow: none !important;
        background: rgba(0,0,0,0.2) !important;
        border-radius: 0 !important;
        width: 100%;
    }
    #nav-desktop-dropdown a {
        padding-left: 40px !important;
    }
    #nav-desktop-dropdown .dropdown-header {
        padding-left: 40px !important;
    }
}

.chat-container {
    display: flex;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    height: 600px;  
    margin-top: 20px;
    grid-column: 1 / -1;  
}
.chat-sidebar {
    width: 300px;
    background: #f9f9f9;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}
.chat-sidebar h3 {
    padding: 20px;
    margin: 0;
    background: var(--primary-brown);
    color: #fff;
    font-size: 1.1rem;
}
.chat-contact-search {
    position: relative;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.chat-contact-search i {
    position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 0.85rem; pointer-events: none;
}
.chat-contact-search input {
    width: 100%; padding: 9px 12px 9px 32px; border-radius: 20px; border: 1px solid #e2e2e2;
    font-size: 0.85rem; box-sizing: border-box; outline: none; background: var(--card-bg);
}
.chat-contact-search input:focus { border-color: var(--hover-khaki); }
.chat-contacts {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
}
.chat-contact-avatar { position: relative; flex-shrink: 0; }
.chat-contact-dot {
    position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%;
    background: #2ecc71; border: 2px solid var(--border-color);
}
.chat-contact-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; }
.chat-contacts li {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    color: var(--text-dark);
}
.chat-contacts li:hover {
    background: #eaeaea;
}
.chat-contacts li.active {
    background: var(--hover-khaki);
    color: #fff;
}
.chat-contacts li .unread-badge {
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    padding: 2px 8px;
    font-size: 0.8rem;
    font-weight: bold;
}
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.chat-header {
    padding: 20px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--primary-brown);
}
.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surf-3);  
}
.msg-bubble {
    max-width: 70%;
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 0.95rem;
    line-height: 1.4;
    word-wrap: break-word;
}
.msg-partner {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}
.msg-me {
    background: var(--hover-khaki);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}
.msg-time {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 5px;
    text-align: right;
    display: block;
}
.chat-input-area {
    display: none;  
    padding: 15px;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    gap: 10px;
}
.chat-input-area input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    outline: none;
    font-size: 1rem;
}
.chat-input-area button {
    border-radius: 50%;
    width: 45px;
    height: 45px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .chat-container {
        flex-direction: column;
        height: calc(100vh - 120px);  
        position: relative;  
        margin-top: 10px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .chat-sidebar {
        width: 100%;
        height: 100%;  
        border-right: none;
        border-bottom: none;
        display: flex;  
    }
    
    .chat-main {
        display: none;  
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: var(--card-bg);
        z-index: 10;
    }

    .chat-container.chat-open .chat-sidebar {
        display: none !important;  
    }
    .chat-container.chat-open .chat-main {
        display: flex !important;  
    }
    
    .chat-header { 
        padding: 15px; 
        font-size: 1.1rem; 
        display: flex;
        align-items: center;
    }
    .chat-messages { padding: 10px; }
    .msg-bubble { max-width: 85%; }
}

.global-chat-widget .chat-input-area {
    display: flex !important;
}

#cookie-consent-banner {
    position: fixed;
    bottom: -150px;  
    left: 0;
    width: 100%;
    background-color: rgba(30, 30, 30, 0.95);
    color: #fff;
    padding: 15px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 10000;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    transition: bottom 0.5s ease-in-out;
}

#cookie-consent-banner.show {
    bottom: 0;  
}

#cookie-consent-banner p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 900px;
}

#cookie-consent-banner a {
    color: var(--gold);
    text-decoration: underline;
    font-weight: bold;
}

#cookie-consent-btn {
    background-color: var(--primary-brown);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 10px 25px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

#cookie-consent-btn:hover {
    filter: brightness(0.9);
}

@media (max-width: 768px) {
    #cookie-consent-banner {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px;
    }
    #cookie-consent-btn {
        width: 100%;
        justify-content: center;
    }
}

.profile-theme-root.theme-ocean .card-header-cover    { background: linear-gradient(135deg, #0f3460, #16537e, #1e88a8) !important; }
.profile-theme-root.theme-sunset .card-header-cover   { background: linear-gradient(135deg, var(--brick), #ff6a3d, #ffb347) !important; }
.profile-theme-root.theme-forest .card-header-cover   { background: linear-gradient(135deg, #10331a, #2d6a4f, #52b788) !important; }
.profile-theme-root.theme-midnight .card-header-cover { background: linear-gradient(135deg, #0d0221, #240750, #3a1c71) !important; }

.profile-theme-root.theme-carbon .card-header-cover {
    background: linear-gradient(120deg, #0f0f0f, #2b2b2b, #3a3a3a, #1a1a1a) !important;
    background-size: 300% 300% !important;
    animation: fogdkiBannerShift 7s ease infinite;
}
.profile-theme-root.theme-gold .card-header-cover {
    background: linear-gradient(120deg, #a67c00, var(--gold), #fff3b0, var(--gold), #a67c00) !important;
    background-size: 300% 300% !important;
    animation: fogdkiBannerShift 5s ease infinite;
}
.profile-theme-root.theme-aurora .card-header-cover {
    background: linear-gradient(120deg, #00c9a7, #3498db, #9b59b6, #ff6a3d, #00c9a7) !important;
    background-size: 400% 400% !important;
    animation: fogdkiBannerShift 8s ease infinite;
}
.profile-theme-root.theme-legendary .card-header-cover {
    background: linear-gradient(120deg, #ff6a3d, var(--gold), #00c9a7, #9b59b6, #ff6a3d) !important;
    background-size: 400% 400% !important;
    animation: fogdkiBannerShift 4s linear infinite;
}
.profile-theme-root.theme-diamond .card-header-cover {
    background: linear-gradient(120deg, #74ebd5, #ACB6E5, #d9f4ff, #74ebd5) !important;
    background-size: 300% 300% !important;
    animation: fogdkiBannerShift 5s ease infinite;
}
@keyframes fogdkiBannerShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.profile-theme-root.theme-ocean .profile-body     { background: linear-gradient(180deg, #eaf6fb, #ffffff); }
.profile-theme-root.theme-sunset .profile-body    { background: linear-gradient(180deg, #fff3ea, #ffffff); }
.profile-theme-root.theme-forest .profile-body    { background: linear-gradient(180deg, #eafbf0, #ffffff); }
.profile-theme-root.theme-midnight .profile-body  { background: linear-gradient(180deg, #1c1640, #0d0221); }
.profile-theme-root.theme-carbon .profile-body    { background: linear-gradient(180deg, #242424, #131313); }
.profile-theme-root.theme-gold .profile-body      { background: linear-gradient(180deg, #fffaf0, #ffffff); }
.profile-theme-root.theme-aurora .profile-body    { background: linear-gradient(180deg, #101a22, #0a1116); }
.profile-theme-root.theme-legendary .profile-body { background: linear-gradient(180deg, rgba(26,20,44,0.96), rgba(10,8,20,0.98)); }
.profile-theme-root.theme-diamond .profile-body   { background: linear-gradient(180deg, #eaf6ff, #ffffff); }

.profile-theme-root.theme-ocean .inst-username    { color: #16537e !important; }
.profile-theme-root.theme-sunset .inst-username   { color: #d35400 !important; }
.profile-theme-root.theme-forest .inst-username   { color: #1e6f42 !important; }
.profile-theme-root.theme-gold .inst-username     { color: var(--gold-2) !important; }
.profile-theme-root.theme-diamond .inst-username  { color: #2980b9 !important; }

.profile-theme-root.theme-ocean #progress-bar-fill     { background: linear-gradient(90deg,#1e88a8,#3498db) !important; }
.profile-theme-root.theme-sunset #progress-bar-fill    { background: linear-gradient(90deg,#ff6a3d,#ffb347) !important; }
.profile-theme-root.theme-forest #progress-bar-fill    { background: linear-gradient(90deg,#2d6a4f,#52b788) !important; }
.profile-theme-root.theme-midnight #progress-bar-fill  { background: linear-gradient(90deg,#6a3fc9,#a06cf5) !important; }
.profile-theme-root.theme-carbon #progress-bar-fill    { background: linear-gradient(90deg,var(--muted),#ccc) !important; }
.profile-theme-root.theme-gold #progress-bar-fill      { background: linear-gradient(90deg,#d4af37,#fff3b0) !important; }
.profile-theme-root.theme-aurora #progress-bar-fill    { background: linear-gradient(90deg,#00c9a7,#9b59b6) !important; }
.profile-theme-root.theme-diamond #progress-bar-fill   { background: linear-gradient(90deg,#74ebd5,#ACB6E5) !important; }
.profile-theme-root.theme-legendary #progress-bar-fill {
    background: linear-gradient(90deg,#ff6a3d,var(--gold),#00c9a7,#9b59b6) !important;
    background-size: 300% 100% !important;
    animation: fogdkiBannerShift 4s linear infinite;
}

.profile-theme-root.profile-theme-dark .inst-username { color: #fff !important; }
.profile-theme-root.profile-theme-dark .inst-bio { color: #d8d8e8 !important; }
.profile-theme-root.profile-theme-dark .inst-meta-text,
.profile-theme-root.profile-theme-dark .inst-meta-text span { color: #b8b8cc !important; }
.profile-theme-root.profile-theme-dark .inst-stat-item { color: #b8b8cc !important; }
.profile-theme-root.profile-theme-dark .inst-stat-item strong { color: #fff !important; }
.profile-theme-root.profile-theme-dark .profile-gear-line,
.profile-theme-root.profile-theme-dark .profile-gear-line strong,
.profile-theme-root.profile-theme-dark .mini-preview-username { color: #fff !important; }
.profile-theme-root.profile-theme-dark #progress-container { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; }
.profile-theme-root.profile-theme-dark #progress-text { color: #ddd !important; }

/* A régi téma-alapú, színes/villogó kártya-keret kikapcsolva – a .pf-card / .pub-card
   saját, letisztult árnyékát használjuk minden háttérnél. */

.profile-theme-root.profile-theme-3d {
    transition: transform 0.15s ease-out;
    will-change: transform;
}

@keyframes fogdkiRingSpin { to { transform: rotate(360deg); } }

.profile-theme-root.profile-theme-premium #avatar-upload-box::before,
.profile-theme-root.profile-theme-premium .cp-avatar-box::before,
.profile-theme-root.profile-theme-premium .mini-preview-avatar::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    z-index: -1;
    animation: fogdkiRingSpin 4s linear infinite;
}
.profile-theme-root.theme-carbon #avatar-upload-box::before,
.profile-theme-root.theme-carbon .cp-avatar-box::before,
.profile-theme-root.theme-carbon .mini-preview-avatar::before {
    background: conic-gradient(from 0deg, var(--text-2), #eee, var(--text-2), #999, var(--text-2));
}
.profile-theme-root.theme-gold #avatar-upload-box::before,
.profile-theme-root.theme-gold .cp-avatar-box::before,
.profile-theme-root.theme-gold .mini-preview-avatar::before {
    background: conic-gradient(from 0deg, #a67c00, #fff3b0, var(--gold), #a67c00);
}
.profile-theme-root.theme-aurora #avatar-upload-box::before,
.profile-theme-root.theme-aurora .cp-avatar-box::before,
.profile-theme-root.theme-aurora .mini-preview-avatar::before {
    background: conic-gradient(from 0deg, #00c9a7, #3498db, #9b59b6, #ff6a3d, #00c9a7);
}
.profile-theme-root.theme-legendary #avatar-upload-box::before,
.profile-theme-root.theme-legendary .cp-avatar-box::before,
.profile-theme-root.theme-legendary .mini-preview-avatar::before {
    background: conic-gradient(from 0deg, #ff6a3d, var(--gold), #00c9a7, #9b59b6, #ff6a3d);
    animation: fogdkiRingSpin 2.5s linear infinite;
}
.profile-theme-root.theme-diamond #avatar-upload-box::before,
.profile-theme-root.theme-diamond .cp-avatar-box::before,
.profile-theme-root.theme-diamond .mini-preview-avatar::before {
    background: conic-gradient(from 0deg, #74ebd5, #ACB6E5, #d9f4ff, #74ebd5);
}

.profile-theme-root.theme-gold #avatar-upload-box,
.profile-theme-root.theme-gold .cp-avatar-box,
.profile-theme-root.theme-gold .mini-preview-avatar { animation: fogdkiGoldEmber 2.2s ease-in-out infinite; }
@keyframes fogdkiGoldEmber {
    0%, 100% { box-shadow: 0 0 10px 2px rgba(241,196,15,0.5); }
    50%      { box-shadow: 0 0 18px 5px rgba(241,196,15,0.8); }
}
.profile-theme-root.theme-legendary #avatar-upload-box,
.profile-theme-root.theme-legendary .cp-avatar-box,
.profile-theme-root.theme-legendary .mini-preview-avatar { animation: fogdkiFireEmber 1.5s ease-in-out infinite; }
@keyframes fogdkiFireEmber {
    0%, 100%  { box-shadow: 0 0 14px 3px rgba(255,106,61,0.75), 0 0 26px 8px rgba(241,196,15,0.4); }
    50%       { box-shadow: 0 0 20px 6px rgba(241,196,15,0.9), 0 0 32px 12px rgba(255,106,61,0.5); }
}
.profile-theme-root.theme-diamond #avatar-upload-box,
.profile-theme-root.theme-diamond .cp-avatar-box,
.profile-theme-root.theme-diamond .mini-preview-avatar { animation: fogdkiIceEmber 2.4s ease-in-out infinite; }
@keyframes fogdkiIceEmber {
    0%, 100% { box-shadow: 0 0 10px 2px rgba(116,235,213,0.55); }
    50%      { box-shadow: 0 0 20px 6px rgba(172,182,229,0.8); }
}

.profile-theme-root.theme-legendary #avatar-upload-box::after,
.profile-theme-root.theme-legendary .cp-avatar-box::after,
.profile-theme-root.theme-gold #avatar-upload-box::after,
.profile-theme-root.theme-gold .cp-avatar-box::after {
    content: '\f578';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: -4px; left: -4px;
    width: 24px; height: 24px;
    background: linear-gradient(135deg, var(--gold), #e67e22);
    color: #fff;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    z-index: 16;
    animation: fogdkiFishBob 2s ease-in-out infinite;
}
@keyframes fogdkiFishBob {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50%      { transform: translateY(-3px) rotate(10deg); }
}

.profile-theme-root.profile-theme-premium .inst-stat-item {
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: transform 0.2s;
}
.profile-theme-root.profile-theme-premium .inst-stat-item:hover { transform: translateY(-2px); }

.profile-theme-root.theme-carbon .inst-stat-item    { border-color: rgba(220,220,220,0.3); background: rgba(255,255,255,0.04); }
.profile-theme-root.theme-aurora .inst-stat-item    { border-color: rgba(0,201,167,0.4); background: rgba(0,201,167,0.07); }
.profile-theme-root.theme-gold .inst-stat-item {
    border-color: rgba(241,196,15,0.45); background: rgba(241,196,15,0.08);
    animation: fogdkiStatPulseGold 2.4s ease-in-out infinite;
}
@keyframes fogdkiStatPulseGold {
    0%, 100% { box-shadow: 0 0 4px 0 rgba(241,196,15,0.3); }
    50%      { box-shadow: 0 0 10px 1px rgba(241,196,15,0.6); }
}
.profile-theme-root.theme-legendary .inst-stat-item {
    border-color: rgba(255,106,61,0.5); background: rgba(255,106,61,0.09);
    animation: fogdkiStatPulseFire 1.8s ease-in-out infinite;
}
@keyframes fogdkiStatPulseFire {
    0%, 100% { box-shadow: 0 0 5px 0 rgba(255,106,61,0.4); }
    50%      { box-shadow: 0 0 12px 2px rgba(241,196,15,0.65); }
}
.profile-theme-root.theme-diamond .inst-stat-item {
    border-color: rgba(116,235,213,0.5); background: rgba(116,235,213,0.09);
    animation: fogdkiStatPulseIce 2.2s ease-in-out infinite;
}
@keyframes fogdkiStatPulseIce {
    0%, 100% { box-shadow: 0 0 4px 0 rgba(116,235,213,0.35); }
    50%      { box-shadow: 0 0 10px 1px rgba(172,182,229,0.6); }
}

.pinned-badges-row {
    position: absolute;
    top: 12px;
    right: 15px;
    display: flex;
    gap: 6px;
    z-index: 10;
}
.pinned-badge {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.92);
    display: flex; align-items: center; justify-content: center;
    color: #e67e22; font-size: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.7);
}

.streak-badge {
    display: inline-flex; align-items: center; gap: 4px; font-family: 'IBM Plex Mono', monospace;
    font-weight: 700; border-radius: 999px; white-space: nowrap; vertical-align: middle;
    line-height: 1;
}
.streak-badge i { margin-right: 0 !important; }
.streak-tier-1 {
    padding: 4px 9px; font-size: 0.72rem;
    background: rgba(230,126,34,0.14); color: #e67e22; border: 1px solid rgba(230,126,34,0.32);
}
.streak-tier-2 {
    padding: 4px 10px; font-size: 0.76rem;
    background: rgba(231,126,34,0.16); color: #e05a1c; border: 1px solid rgba(231,126,34,0.4);
    box-shadow: 0 0 8px rgba(230,126,34,0.28);
}
.streak-tier-3 {
    padding: 5px 11px; font-size: 0.8rem;
    background: rgba(231,76,60,0.18); color: #e74c3c; border: 1px solid rgba(231,76,60,0.42);
    box-shadow: 0 0 12px rgba(231,76,60,0.4);
    animation: streakFlicker 1.6s ease-in-out infinite;
}
.streak-tier-4 {
    padding: 5px 12px; font-size: 0.85rem;
    background: linear-gradient(135deg, rgba(231,76,60,0.22), rgba(241,196,15,0.26));
    color: #ff5722; border: 1px solid rgba(241,196,15,0.55);
    box-shadow: 0 0 18px rgba(241,196,15,0.5);
    animation: streakFlicker 1.1s ease-in-out infinite;
}
.streak-tier-4 i { color: var(--gold); }
[data-theme="dark"] .streak-tier-1 { background: rgba(230,126,34,0.2); color: #f0a868; border-color: rgba(230,126,34,0.4); }
[data-theme="dark"] .streak-tier-2 { background: rgba(230,126,34,0.24); color: #f5a24a; border-color: rgba(230,126,34,0.48); }
[data-theme="dark"] .streak-tier-3 { background: rgba(231,76,60,0.24); color: #ff7a63; border-color: rgba(231,76,60,0.5); }
[data-theme="dark"] .streak-tier-4 { color: #ffb066; border-color: rgba(241,196,15,0.65); }
@keyframes streakFlicker {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50%      { transform: scale(1.08); filter: brightness(1.18); }
}
@media (prefers-reduced-motion: reduce) {
    .streak-tier-3, .streak-tier-4 { animation: none; }
}

.mini-profile-preview {
    background: var(--card-bg); border-radius: 16px; border: 1px solid var(--border-color);
    overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.05); margin-bottom: 22px;
}
.mini-preview-cover.card-header-cover {
    height: 110px !important; border-radius: 0 !important; position: relative;
}
.mini-preview-body {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px; position: relative;
}
.mini-preview-avatar {
    width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--border-color);
    background: var(--bg-light); box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; color: var(--primary-brown); flex-shrink: 0;
    margin-top: -32px; position: relative;
}
.mini-preview-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mini-preview-username { font-weight: 800; font-size: 1.1rem; color: var(--text-dark); display: block; }
.mini-preview-stats { font-size: 0.8rem; color: var(--muted); margin-top: 3px; }

.banner-shop-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px;
}
.banner-shop-card {
    border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden;
    background: var(--card-bg); transition: 0.2s; position: relative;
}
.banner-shop-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.banner-shop-card.tier-epic { border-color: var(--gold); }
.banner-shop-tier-tag {
    position: absolute; top: 6px; left: 6px; z-index: 5;
    font-size: 0.62rem; font-weight: 900; letter-spacing: 0.03em;
    padding: 3px 8px; border-radius: 20px; text-transform: uppercase;
    background: rgba(0,0,0,0.55); color: #fff; backdrop-filter: blur(2px);
}
.banner-shop-card.tier-epic .banner-shop-tier-tag { background: linear-gradient(120deg,var(--gold),#ff6a3d); color: #241a00; }
.banner-shop-swatch {
    height: 70px; position: relative; overflow: hidden;
}
.banner-shop-swatch .card-header-cover {
    height: 100% !important; border-radius: 0 !important;
}
.banner-shop-info { padding: 10px 12px; }
.banner-shop-info strong { display: block; font-size: 0.88rem; color: var(--text-dark); margin-bottom: 2px; }
.banner-shop-info span { font-size: 0.75rem; color: var(--muted); }
.banner-shop-btn {
    width: 100%; border: none; padding: 9px 0; font-weight: 800; font-size: 0.8rem;
    cursor: pointer; transition: 0.2s; border-top: 1px solid var(--border-color);
}
.banner-shop-btn.buy { background: #fff8ec; color: #e67e22; }
.banner-shop-btn.buy:hover { background: #ffedcc; }
.banner-shop-btn.activate { background: #eef7fc; color: #2980b9; }
.banner-shop-btn.activate:hover { background: #d6eaf8; }
.banner-shop-btn.active-state { background: #e8f8ee; color: var(--moss-2); cursor: default; }
.banner-shop-btn:disabled { opacity: 0.6; cursor: default; }

.pin-trophy-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px;
}
.pin-trophy-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; border-radius: 10px; border: 2px solid var(--border-color);
    cursor: pointer; transition: 0.2s; text-align: center;
}
.pin-trophy-item:hover { border-color: var(--gold); }
.pin-trophy-item.selected { border-color: var(--gold); background: #fffbee; }
.pin-trophy-item.disabled { opacity: 0.45; cursor: not-allowed; }
.pin-trophy-item .pin-trophy-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), #e67e22); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    box-shadow: 0 3px 8px rgba(230,126,34,0.35);
}
.pin-trophy-item.disabled .pin-trophy-icon { background: #eceff1; color: #b0bec5; box-shadow: none; }
.pin-trophy-item .pin-trophy-name { font-size: 0.75rem; font-weight: 700; color: #555; line-height: 1.25; }

.overview-showcase {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(135deg, var(--primary-brown), #2c1e16);
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.overview-showcase::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%);
    pointer-events: none;
}
.overview-showcase-content {
    position: relative; z-index: 2;
    padding: 20px 22px;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
}
.overview-showcase-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, var(--gold), #e67e22);
    color: #241a00; font-weight: 900; font-size: 0.68rem; letter-spacing: 0.03em;
    text-transform: uppercase; padding: 4px 10px; border-radius: 20px;
    margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.overview-showcase-fish {
    font-size: 1.5rem; font-weight: 900; margin-bottom: 6px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6); text-transform: capitalize;
}
.overview-showcase-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.85rem; opacity: 0.95; position: relative; z-index: 2; }
.overview-showcase-meta span { display: flex; align-items: center; gap: 6px; text-transform: capitalize; }
.overview-showcase-empty {
    position: relative; z-index: 2; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 40px 20px; text-align: center; color: rgba(255,255,255,0.85); font-size: 0.9rem;
}

.overview-stats-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
    margin-bottom: 20px;
}
.overview-stat-pill {
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px;
    padding: 14px 16px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: 0.2s;
}
.overview-stat-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
.overview-stat-pill i {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #fff;
}
.overview-stat-label { font-size: 0.68rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.overview-stat-value { font-size: 1.02rem; font-weight: 800; color: var(--text-dark); text-transform: capitalize; }

.overview-activity-card {
    background: var(--card-bg); padding: 20px; border-radius: 12px; border: 1px solid var(--border-color);
}
.overview-activity-list { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.overview-activity-item {
    flex: 0 0 auto; width: 110px; text-decoration: none; color: inherit;
    border-radius: 10px; overflow: hidden; border: 1px solid var(--border-color); transition: 0.2s;
    display: block;
}
.overview-activity-item:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.12); }
.overview-activity-item img { width: 100%; height: 80px; object-fit: cover; display: block; }
.overview-activity-info { padding: 6px 8px; }
.overview-activity-fish {
    font-size: 0.75rem; font-weight: 700; color: var(--text-dark); text-transform: capitalize;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.overview-activity-date { font-size: 0.65rem; color: #999; }
.overview-activity-empty { color: var(--muted); font-size: 0.85rem; font-style: italic; }

@media (max-width: 600px) {
    .overview-showcase { min-height: 170px; }
    .overview-showcase-fish { font-size: 1.25rem; }
}
 
.catch-filterbar { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }

.catch-search-pill {
    flex: 1; min-width: 160px; display: flex; align-items: center; gap: 9px;
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 999px;
    padding: 10px 16px; transition: border-color 0.2s, background 0.2s;
    overflow: hidden;
}
.catch-search-pill:focus-within { border-color: var(--hover-khaki); }
.catch-search-pill i { color: var(--text-muted); font-size: 0.85rem; flex-shrink: 0; }
.catch-search-pill input {
    border: none; outline: none; background: transparent !important; width: 100%;
    font-family: inherit; font-size: 0.9rem; color: var(--text-dark);
    -webkit-appearance: none; appearance: none;
}
/* JAVÍTÁS: a böngésző natív "kitöltés" (autofill) kiemelése enélkül egy világos barna/sárgás
   csíkot rajzol az input mögé, ami kilóg a kerekített, sötét kereső-pill mögül. */
.catch-search-pill input:-webkit-autofill,
.catch-search-pill input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: var(--text-dark) !important;
    background-color: transparent !important;
    transition: background-color 9999s ease-in-out 0s;
}

#user-search-input:-webkit-autofill,
#user-search-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: var(--text-dark) !important;
    background-color: transparent !important;
    transition: background-color 9999s ease-in-out 0s;
}

.catch-filter-toggle {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; position: relative;
    background: var(--card-bg); border: 1px solid var(--border-color); color: var(--primary-brown);
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.catch-filter-toggle i.fa-solid { margin-right: 0; }
.catch-filter-toggle:hover { transform: translateY(-1px); }
.catch-filter-toggle.is-open { background: var(--primary-brown); color: #fff; }
.catch-filter-dot {
    position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%;
    background: #f2c230; border: 1.5px solid var(--card-bg); display: none;
}
.catch-filter-toggle.has-active-filter .catch-filter-dot { display: block; }

.catch-chip-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 25px; }
.catch-chip-row.is-collapsed { display: none; }

@media (max-width: 600px) {
    .catch-search-pill { padding: 9px 14px; }
    .catch-filter-toggle { width: 40px; height: 40px; }
}

.new-catch-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 997;
    display: flex; align-items: center; gap: 8px;
    background: var(--primary-brown); color: #fff; padding: 14px 22px; border-radius: 10px;
    font-weight: 700; font-size: 0.92rem; text-decoration: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.26); transition: background 0.2s, transform 0.2s;
}
.new-catch-fab:hover { filter: brightness(0.9); transform: translateY(-2px); }
 
body:has(.new-catch-fab) .theme-toggle-btn { bottom: 84px; }
@media (max-width: 600px) {
    .new-catch-fab { right: 14px; bottom: 14px; padding: 12px 18px; font-size: 0.85rem; }
    body:has(.new-catch-fab) .theme-toggle-btn { bottom: 72px; }
}

.upload-hero {
    background: linear-gradient(135deg, var(--primary-brown), #2c1e16);
    border-radius: 12px; padding: 25px 30px; margin-bottom: 25px; color: #fff;
    display: flex; align-items: center; gap: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.15); flex-wrap: wrap;
}
.upload-hero-icon {
    background: rgba(255,255,255,0.15); width: 55px; height: 55px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0;
}
.upload-hero-icon i.fa-solid { margin-right: 0; }

.hib-box { background: var(--card-bg); border-radius: 16px; padding: 28px 26px; }
.hib-box h2 { text-align: center; margin: 0 0 12px; color: var(--primary-brown); font-size: 1.3rem; }
.hib-box .hib-lede { text-align: center; color: var(--text-muted); margin: 0 0 26px; line-height: 1.5; }

.info-box { background: var(--card-bg); border-radius: 16px; padding: 40px; }
@media (max-width: 640px) { .info-box { padding: 26px 20px; } }
.upload-hero-text { flex: 1; min-width: 200px; }
.upload-hero h1 { margin: 0 0 6px 0; font-size: 1.5rem; color: #fff; }
.upload-hero p { margin: 0; opacity: 0.9; font-size: 0.95rem; line-height: 1.5; }
.upload-hero-badge {
    margin-left: auto; flex-shrink: 0; background: rgba(255,255,255,0.18); padding: 8px 16px;
    border-radius: 20px; font-size: 0.9rem; font-weight: bold; white-space: nowrap; display: flex; align-items: center; gap: 6px;
}

.upload-card {
    background: var(--card-bg); border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color); padding: 25px;
}
.upload-cols { display: grid; grid-template-columns: 240px 1fr; gap: 30px; align-items: start; }
.upload-section { margin-bottom: 25px; }
.upload-section:last-child { margin-bottom: 0; }
.upload-section-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    font-size: 1rem; font-weight: bold; color: var(--primary-brown);
}

.upload-photo-main {
    border: 2px dashed var(--primary-brown); border-radius: 8px; height: 170px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; background: #fdfbf7; position: relative; overflow: hidden; transition: 0.2s; margin-bottom: 12px;
}
.upload-photo-main:hover { background: #f1ede6; border-color: var(--hover-khaki); }
.upload-photo-main i { font-size: 2.4rem; color: var(--primary-brown); margin-bottom: 8px; }
.upload-photo-main span { font-weight: bold; color: var(--primary-brown); font-size: 0.9rem; text-align: center; padding: 0 10px; }

.upload-photo-row { display: flex; gap: 12px; }
.upload-photo-small {
    flex: 1; border: 2px dashed var(--border-color); border-radius: 8px; height: 75px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; background: #f9f9f9; position: relative; overflow: hidden; transition: 0.2s;
}
.upload-photo-small:hover { background: #f1f1f1; }
.upload-photo-small i { font-size: 1.3rem; color: #aaa; margin-bottom: 4px; }
.upload-photo-small span { font-size: 0.7rem; color: var(--muted); }

.release-toggle-group { display: flex; gap: 10px; margin-top: 8px; }
.release-toggle-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-alt);
    color: #777; font-weight: bold; font-size: 0.9rem; cursor: pointer; transition: 0.2s;
}
.release-toggle-btn:hover { border-color: var(--hover-khaki); }
.release-toggle-btn.active-release { background: var(--moss-soft); border-color: var(--moss-2); color: var(--moss-2); }
.release-toggle-btn.active-kept { background: #fdf0e3; border-color: #e67e22; color: #b8621b; }

@media (max-width: 760px) {
    .upload-cols { grid-template-columns: 1fr; }
    .upload-hero { padding: 20px; }
    .upload-hero-badge { margin-left: 0; }
    .upload-card { padding: 18px; }
}

main.up2-page.form-page-container { max-width: 1180px; }

.up2-shell { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 26px; align-items: start; padding-bottom: 40px; }
@media (max-width: 980px) {
    .up2-shell { grid-template-columns: 1fr; }
     
    .up2-side { position: static; top: auto; }
}

.up2-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; margin-bottom: 18px; }
.up2-card-head { display: flex; align-items: center; gap: 10px; padding: 16px 19px; border-bottom: 1px solid var(--border-color); }
.up2-card-head .ic { width: 28px; height: 28px; border-radius: 9px; background: var(--gold-soft); color: var(--hv2-gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.85rem; }
 
.up2-card-head .ic i.fa-solid,
.up2-photo-empty i.fa-solid,
.up2-photo-rm i.fa-solid,
.up2-pv-placeholder i.fa-solid,
.up2-tips .r i.fa-solid {
    margin-right: 0;
}
.up2-card-head h3 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--text-dark); }
.up2-card-head .tag { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hv2-gold); }
.up2-card-head .tag.opt { color: var(--text-muted); }
.up2-card-body { padding: 19px; }

.up2-photos { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.up2-photo { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: var(--bg-alt); border: 1.5px dashed var(--border-color); cursor: pointer; transition: 0.2s; }
.up2-photo:hover { border-color: var(--hover-khaki); }
.up2-photo.has-img { border-style: solid; }
 
.up2-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.up2-photo-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-muted); }
.up2-photo-empty i { font-size: 1.4rem; }
.up2-photo-empty span { font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: 0 6px; }
.up2-photo-rm { position: absolute; right: 6px; top: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 8px; background: rgba(10,8,5,0.72); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.up2-photo-main-badge { position: absolute; left: 6px; bottom: 6px; z-index: 2; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--hv2-gold); color: #1B1400; padding: 3px 7px; border-radius: 6px; font-weight: 700; }
.up2-photo-note { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--text-muted); margin-top: 12px; line-height: 1.6; }

.up2-field { margin-bottom: 16px; }
.up2-field:last-child { margin-bottom: 0; }
.up2-field label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.up2-field label .req { color: var(--hv2-gold); }
.up2-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .up2-grid2 { grid-template-columns: 1fr; } }
.up2-input, .up2-textarea {
    width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; background: var(--bg-alt); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 12px 14px; color: var(--text-dark); font-size: 0.95rem; font-family: inherit; outline: none; transition: 0.15s;
}
.up2-input:focus, .up2-textarea:focus { border-color: var(--primary-brown); background: var(--card-bg); }
 
input[type="date"].up2-input { -webkit-appearance: none; appearance: none; }
@media (max-width: 480px) {
    input[type="date"].up2-input { padding: 10px 8px; font-size: 0.86rem; }
}
.up2-textarea { resize: none; min-height: 90px; line-height: 1.6; }
.up2-unit { position: relative; }
.up2-unit .up2-input { padding-right: 42px; font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
.up2-unit .u { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; color: var(--text-muted); pointer-events: none; }
.up2-hint { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--text-muted); margin-top: 7px; line-height: 1.6; }
.up2-counter { text-align: right; }

.up2-catpicker .forum-composer-select-wrap { width: 100%; border-radius: 10px; background: var(--bg-alt); }
.up2-catpicker .forum-cat-dropdown-group {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted); padding: 9px 10px 4px; font-weight: 700;
}
.up2-catpicker .forum-cat-dropdown-group:not(:first-child) { border-top: 1px solid var(--border-color); margin-top: 4px; padding-top: 10px; }

.up2-card-body .release-toggle-group { margin-top: 0; }

.up2-footbar {
    position: sticky; bottom: 0; z-index: 40; background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 14px 20px; margin-top: 4px;
}
.up2-footbar-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%; }
.up2-footbar-pts { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }
.up2-footbar-pts b { color: var(--hv2-gold); }
.up2-footbar-submit { margin-left: auto; }

.up2-side { position: sticky; top: 90px; }
.up2-side-block { margin-bottom: 22px; }
.up2-side-block h5 { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.up2-pv-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 15px; overflow: hidden; }
.up2-pv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.up2-pv-who b { font-size: 0.9rem; font-weight: 700; display: block; color: var(--text-dark); }
.up2-pv-who span { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: var(--text-muted); display: block; margin-top: 2px; }
.up2-pv-pic { position: relative; aspect-ratio: 4/5; background: var(--bg-alt); overflow: hidden; }
.up2-pv-pic img { width: 100%; height: 100%; object-fit: cover; display: none; }
.up2-pv-pic .up2-pv-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.8rem; }
.up2-pv-species { position: absolute; left: 10px; top: 10px; z-index: 2; background: rgba(10,8,5,0.72); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 10px; border-radius: 7px; }
.up2-pv-kg { position: absolute; right: 10px; top: 10px; z-index: 2; background: var(--hv2-gold); color: #1B1400; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 0.8rem; padding: 5px 9px; border-radius: 8px; }
.up2-pv-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: 6px; padding: 12px 10px 10px; background: linear-gradient(to top, rgba(10,8,5,0.9), transparent); flex-wrap: wrap; }
.up2-pv-chip { display: inline-flex; align-items: center; gap: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); padding: 4px 8px; border-radius: 99px; color: #fff; }
.up2-pv-chip.rel { color: var(--moss-2); border-color: rgba(140,155,118,0.4); }
.up2-pv-note { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: var(--text-muted); margin-top: 10px; line-height: 1.6; }

.up2-tips { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px; }
.up2-tips .r { display: flex; gap: 10px; padding: 9px 0; font-size: 0.85rem; color: var(--text-dark); line-height: 1.55; }
.up2-tips .r + .r { border-top: 1px solid var(--border-color); }
.up2-tips .r i { color: var(--moss-2); flex-shrink: 0; margin-top: 3px; font-size: 0.85rem; }
.up2-tips .r b { color: var(--primary-brown); }

@media (max-width: 640px) {
    .up2-footbar-pts { display: none; }
    .up2-footbar-submit { margin-left: 0; width: 100%; }
    .up2-footbar-submit .action-btn { width: 100%; }
}

.rotator-widget { position: relative; }
.rotator-slide { display: none; }
.rotator-slide.active { display: block; animation: rotatorFadeIn 0.4s ease; }
@keyframes rotatorFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.rotator-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.rotator-dot { width: 7px; height: 7px; border-radius: 50%; background: #e0ddd3; cursor: pointer; transition: 0.25s; }
.rotator-dot.active { background: var(--primary-brown); width: 16px; border-radius: 4px; }
.rotator-dot:hover { background: var(--hover-khaki); }

.notif-page-item {
    display: block; text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--line-2); transition: background 0.2s;
}
.notif-page-item:last-child { border-bottom: none; }
.notif-page-item:hover { background: #fdfbf7; }
.notif-page-item-inner { display: flex; align-items: flex-start; gap: 14px; padding: 16px 10px; }
.notif-page-icon {
    width: 40px; height: 40px; border-radius: 50%; background: #f4f0e8; color: var(--primary-brown);
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0;
}
.notif-page-item.is-unread .notif-page-icon { background: var(--gold-soft); color: var(--gold-2); }
.notif-page-body { flex: 1; min-width: 0; }
.notif-page-message { font-size: 0.95rem; color: var(--text-dark); line-height: 1.5; overflow-wrap: break-word; word-break: break-word; }
.notif-page-item.is-unread .notif-page-message { font-weight: bold; }
.notif-page-time { font-size: 0.78rem; color: #999; margin-top: 5px; }
.notif-page-dot { width: 9px; height: 9px; border-radius: 50%; background: #e74c3c; flex-shrink: 0; margin-top: 6px; }

.notif-page-pagebtn {
    background: var(--card-bg); border: 1px solid var(--border-color); padding: 9px 16px; border-radius: 10px; cursor: pointer;
    color: var(--primary-brown); font-weight: bold; transition: 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.notif-page-pagebtn:hover { background: #f4f6f9; }
.notif-page-pagebtn:disabled { opacity: 0.4; cursor: default; }
.notif-page-pagebtn:disabled:hover { background: var(--card-bg); }

.podium-card {
    background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-color);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); padding: 25px 20px 15px; margin-bottom: 20px;
}
.podium-lg { gap: 20px; padding: 10px 0 4px; }
.podium-lg .podium-place { max-width: 140px; }
.podium-lg .podium-name { font-size: 1rem; }
.podium-lg .podium-catches { font-size: 0.8rem; margin: 4px 0 12px; }
.podium-lg .podium-base { border-radius: 8px 8px 0 0; }
.podium-lg .podium-place.rank-1 .podium-base { height: 70px; font-size: 1.8rem; }
.podium-lg .podium-place.rank-2 .podium-base { height: 50px; font-size: 1.5rem; }
.podium-lg .podium-place.rank-3 .podium-base { height: 38px; font-size: 1.4rem; }

.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-row {
    display: flex; align-items: center; gap: 14px; background: var(--card-bg); border-radius: 10px;
    border: 1px solid var(--border-color); padding: 12px 18px; text-decoration: none; transition: 0.2s;
    min-width: 0; box-sizing: border-box;
}
.rank-row:hover { transform: translateX(4px); box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.rank-row-number { width: 28px; text-align: center; font-weight: 800; color: #918e83; font-size: 1rem; flex-shrink: 0; }
.rank-row-name { flex: 1; min-width: 0; }
.rank-row-name strong { display: block; color: var(--text-dark); font-size: 1.05rem; overflow-wrap: break-word; word-break: break-word; }
.rank-row-rank { margin-top: 3px; }
.rank-row-pill { font-weight: bold; padding: 6px 15px; border-radius: 20px; font-size: 0.95rem; flex-shrink: 0; white-space: nowrap; }

.species-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.species-card {
    position: relative; display: flex; align-items: center; gap: 12px; background: var(--card-bg);
    border: 1px solid var(--border-color); border-left: 4px solid #F0B441; border-radius: 10px; padding: 14px;
    text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 0; box-sizing: border-box;
}
.species-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.species-card-avatar-wrap { position: relative; flex-shrink: 0; }
.species-card-trophy {
    position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%;
    background: #F0B441; color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 0.62rem; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border: 2px solid var(--card-bg); z-index: 2;
}
.species-card-trophy i.fa-solid { margin-right: 0; }
.species-card-info { flex: 1; min-width: 0; }
.species-card-fish {
    display: inline-block; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    color: #b8621b; background: #fdf0e3; padding: 2px 8px; border-radius: 999px;
}
.species-card-name { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.species-card-weight {
    flex-shrink: 0; font-size: 0.85rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #d35400, #e67e22); padding: 5px 12px; border-radius: 20px; white-space: nowrap;
}

@media (max-width: 600px) {
    .podium-lg { gap: 8px; }
    .podium-lg .podium-place { max-width: 90px; }
    .podium-lg .podium-name { font-size: 0.85rem; }
    .rank-row { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
    .species-grid { grid-template-columns: 1fr; }
}

.rl-wrap { max-width: 1220px; margin: 0 auto; padding: 34px 30px 84px; }

.rl-head p { color: var(--text-muted); font-size: 0.95rem; margin-top: 6px; max-width: 56ch; line-height: 1.6; }

.rl-you {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 14px;
    background: radial-gradient(130% 160% at 100% 0%, var(--gold-soft) 0%, var(--surf-2) 60%);
    border: 1px solid var(--border-color);
    border-radius: 12px; padding: 15px 18px; margin-bottom: 26px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.rl-you:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); border-color: var(--gold-line); }
.rl-you-ic { position: absolute; right: -8px; top: -12px; font-size: 3.6rem; color: var(--hv2-gold); opacity: 0.22; transform: rotate(-10deg); pointer-events: none; margin-right: 0; }
.rl-you .rl-av { position: relative; z-index: 1; width: 32px; height: 32px; flex-shrink: 0; }
.rl-you > div { position: relative; z-index: 1; }
.rl-k {
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--text-muted);
}
.rl-you b {
    font-family: 'Archivo', system-ui, sans-serif; font-stretch: 110%; font-size: 1.15rem; font-weight: 800;
    display: block; margin-top: 4px; color: var(--text-dark); overflow-wrap: break-word;
}
.rl-you b em { font-style: normal; color: var(--hv2-gold); }
.rl-you .rl-rt { margin-left: auto; text-align: right; flex-shrink: 0; }
.rl-you .rl-rt .rl-v { font-family: 'IBM Plex Mono', monospace; font-size: 1.25rem; font-weight: 600; color: var(--hv2-gold); line-height: 1; }
.rl-you .rl-rt .rl-s { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; }

.rl-tabs {
    display: flex; gap: 2px; border-bottom: 1px solid var(--border-color); margin-bottom: 6px;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.rl-tabs::-webkit-scrollbar { display: none; }
.rl-tab {
    background: none; border: 0; color: var(--text-muted); font-family: 'Figtree', system-ui, sans-serif;
    font-size: 0.92rem; font-weight: 600; padding: 12px 16px; position: relative;
    transition: color 0.2s; white-space: nowrap; flex-shrink: 0;
}
.rl-tab:hover { color: var(--text-2); }
.rl-tab.on { color: var(--text-dark); }
.rl-tab.on::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--gold); }
.rl-sub {
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--text-muted);
    letter-spacing: 0.06em; padding: 14px 2px 4px; display: flex; align-items: center; gap: 8px;
}
.rl-sub .rl-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }

.rl-colhead {
    display: grid; grid-template-columns: 30px 30px 1fr 190px; gap: 14px; align-items: end;
    padding: 0 10px 8px; margin-top: 4px;
}
.rl-colhead span { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.rl-ch-n { overflow: visible; }
.rl-ch-vals { display: flex; justify-content: flex-end; gap: 18px; }
.rl-ch-vgrp { width: 86px; text-align: right; }

.rl-list { margin-top: 6px; }
.rl-row {
    display: grid; grid-template-columns: 30px 30px 1fr 190px; gap: 14px; align-items: center;
    padding: 12px 10px; border-bottom: 1px solid var(--line); transition: background 0.2s;
    margin: 0 -10px; border-radius: 10px; text-decoration: none; color: inherit;
}
.rl-row:hover { background: var(--surf-2); }
.rl-row .rl-n { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--text-muted); text-align: center; font-variant-numeric: tabular-nums; }
.rl-row .rl-av { width: 30px; height: 30px; flex-shrink: 0; }
.rl-who { min-width: 0; }
.rl-who .rl-nm { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rl-who b { font-size: 0.97rem; font-weight: 700; color: var(--text-dark); }
.rl-tag {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase;
    border: 1px solid var(--border-color); border-radius: 99px; padding: 2px 8px; color: var(--text-muted); white-space: nowrap;
}
.rl-tag.moss { color: var(--moss-2); border-color: rgba(140,155,118,0.4); }
.rl-who .rl-bar { height: 3px; border-radius: 99px; background: var(--surf-3); margin-top: 8px; overflow: hidden; max-width: 280px; }
.rl-who .rl-bar i { display: block; height: 100%; border-radius: 99px; background: var(--gold); opacity: 0.55; }

.rl-vals { display: flex; justify-content: flex-end; gap: 18px; flex-shrink: 0; }
.rl-vgrp { width: 86px; text-align: right; }
.rl-vgrp .rl-v { font-family: 'IBM Plex Mono', monospace; font-size: 0.95rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; color: var(--text-2); }
.rl-vgrp .rl-u { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.rl-vgrp.is-primary .rl-v { font-size: 1.05rem; font-weight: 600; color: var(--text-dark); }

.rl-row.p1 .rl-n, .rl-row.p2 .rl-n, .rl-row.p3 .rl-n { font-weight: 600; }
.rl-row.p1 .rl-n { color: var(--gold); }
.rl-row.p2 .rl-n { color: var(--silver); }
.rl-row.p3 .rl-n { color: var(--bronze); }
.rl-row.p1 .rl-av { box-shadow: 0 0 0 2px var(--gold); border-radius: 50%; }
.rl-row.p2 .rl-av { box-shadow: 0 0 0 2px var(--silver); border-radius: 50%; }
.rl-row.p3 .rl-av { box-shadow: 0 0 0 2px var(--bronze); border-radius: 50%; }
.rl-row.p1 .rl-vgrp.is-primary .rl-v { color: var(--hv2-gold); }
.rl-row.p1 .rl-who .rl-bar i { opacity: 1; }

.rl-row.me { background: var(--gold-soft); border-bottom-color: transparent; }
.rl-row.me .rl-who b::after {
    content: "TE"; font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; letter-spacing: 0.12em;
    background: var(--gold); color: #241B02; padding: 2px 6px; border-radius: 4px; margin-left: 9px; position: relative; top: -1px;
}

.rl-row.zero .rl-vgrp.is-primary .rl-v { color: var(--text-muted); }
.rl-row.zero .rl-who b { color: var(--text-2); }

.rl-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 0.9rem; }

.rl-foot { margin-top: 26px; display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.rl-foot p { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--text-muted); line-height: 1.7; }
.rl-foot p b { color: var(--hv2-gold); }
.rl-btn {
    margin-left: auto; background: var(--gold); color: #241B02; font-weight: 700; font-size: 0.92rem;
    padding: 12px 20px; border-radius: 10px; border: 0; white-space: nowrap; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
}

@media (max-width: 640px) {
    .rl-wrap { padding: 26px 16px 80px; }
    .rl-colhead { display: none; }
    .rl-row { grid-template-columns: 18px 30px 1fr auto; gap: 10px; padding: 12px 8px; }
    .rl-row .rl-av { width: 30px; height: 30px; }
    .rl-who .rl-bar { display: none; }
    .rl-vals { gap: 12px; }
    .rl-vgrp { width: auto; min-width: 44px; }
    .rl-vgrp .rl-v { font-size: 0.92rem; }
    .rl-foot { flex-direction: column; align-items: stretch; gap: 14px; }
    .rl-btn { margin-left: 0; width: 100%; justify-content: center; }
}

#toast-container {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    z-index: 100000; display: flex; flex-direction: column; gap: 10px;
    align-items: center; pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 10px; background: var(--card-bg); border-radius: 10px;
    border: 1px solid var(--border-color); box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    padding: 12px 16px; max-width: 380px; min-width: 260px; pointer-events: auto;
    opacity: 0; transform: translateY(-15px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.toast-show { opacity: 1; transform: translateY(0); }
.toast-icon {
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 0.95rem; flex-shrink: 0;
}
.toast-success .toast-icon { background: #eafaf1; color: var(--moss-2); }
.toast-error .toast-icon { background: #fdedec; color: var(--brick); }
.toast-info .toast-icon { background: #eef7fc; color: #2980b9; }
.toast-text { font-size: 0.9rem; color: var(--text-dark); line-height: 1.4; flex: 1; }
.toast-close { background: none; border: none; color: #bbb; cursor: pointer; font-size: 0.85rem; padding: 2px; flex-shrink: 0; }
.toast-close:hover { color: var(--muted); }

@media (max-width: 600px) {
    #toast-container { top: 12px; width: calc(100% - 24px); }
    .toast { max-width: none; width: 100%; box-sizing: border-box; }
}

.levelup-overlay {
    position: fixed; inset: 0; background: rgba(20,16,12,0.6); z-index: 100001;
    display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease;
    padding: 20px; box-sizing: border-box;
}
.levelup-overlay.levelup-show { opacity: 1; }
.levelup-card {
    background: var(--card-bg); border-radius: 18px; padding: 35px 30px; text-align: center; max-width: 320px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); transform: scale(0.7); transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.levelup-overlay.levelup-show .levelup-card { transform: scale(1); }
.levelup-badge {
    width: 90px; height: 90px; border-radius: 50%; margin: 0 auto 18px; display: flex;
    align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 900; color: #fff;
}
.levelup-title { font-size: 1.3rem; font-weight: 800; color: var(--primary-brown); margin: 0 0 6px; }
.levelup-sub { font-size: 0.95rem; color: var(--muted); margin: 0 0 22px; }
.levelup-btn {
    background: var(--primary-brown); color: #fff; border: none; padding: 11px 28px; border-radius: 10px;
    font-size: 1rem; font-weight: bold; cursor: pointer; transition: 0.2s;
}
.levelup-btn:hover { filter: brightness(0.9); }
.levelup-badge i.fa-solid { margin-right: 0; }
.levelup-btn.onboarding-modal-cta { display: inline-block; text-decoration: none; }
.levelup-close-x {
    position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%;
    border: none; background: var(--bg-alt); color: var(--text-muted); font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.15s;
}
.levelup-close-x:hover { background: var(--border-color); color: var(--text-dark); }
.levelup-close-x i.fa-solid { margin-right: 0; }
.onboarding-modal-skip {
    display: block; margin: 12px auto 0; background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 0.84rem; text-decoration: underline; text-underline-offset: 2px;
}
.onboarding-modal-skip:hover { color: var(--text-dark); }

.lvup-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 1; }
.lvup-spark {
    position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%;
    background: var(--c, #f1c40f); opacity: 0; pointer-events: none;
    animation: lvup-spark-fly 0.9s ease-out forwards; animation-delay: var(--d, 0s);
}
.lvup-spark.star {
    width: 10px; height: 10px; border-radius: 0; background: none;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background-color: var(--c, #f1c40f);
}
@keyframes lvup-spark-fly {
    0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 1; }
    15% { transform: translate(-50%, -50%) scale(1) rotate(45deg); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.4) rotate(180deg); opacity: 0; }
}

.levelup-card { position: relative; overflow: visible; }
.lvup-badges { position: relative; width: 150px; height: 78px; margin: 0 auto 18px; z-index: 2; }
.lvup-badges .levelup-badge {
    position: absolute; inset: 0; margin: 0; width: 100%; height: 100%;
    border-radius: 16px; font-size: 2rem;
}
.lvup-badge-new { opacity: 0; }
.lvup-badges.lvup-anim .lvup-badge-old { animation: lvup-badge-out 0.5s ease forwards; }
.lvup-badges.lvup-anim .lvup-badge-new { animation: lvup-badge-in 0.55s cubic-bezier(.34,1.56,.64,1) 0.2s forwards; }
@keyframes lvup-badge-out {
    0% { transform: translateX(0) scale(1) rotate(0); opacity: 1; }
    100% { transform: translateX(-130px) scale(0.35) rotate(-18deg); opacity: 0; }
}
@keyframes lvup-badge-in {
    0% { transform: translateX(130px) scale(0.35) rotate(18deg); opacity: 0; }
    100% { transform: translateX(0) scale(1) rotate(0); opacity: 1; }
}
.lvup-badges--emblem { width: 108px; height: 124px; }
.lvup-badges--emblem .levelup-badge { border-radius: 0; display: flex; align-items: center; justify-content: center; }
.levelup-title.lvup-congrats { font-size: 1.5rem; }
.levelup-sub.lvup-leveled { font-weight: 700; color: var(--text-dark); font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) {
    .lvup-spark { display: none; }
    .lvup-badges.lvup-anim .lvup-badge-old,
    .lvup-badges.lvup-anim .lvup-badge-new { animation: none; }
    .lvup-badge-new { opacity: 1; }
    .lvup-badge-old { display: none; }
}

.likers-modal-overlay {
    position: fixed; inset: 0; background: rgba(20,16,12,0.6); z-index: 100001;
    display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease;
    padding: 20px; box-sizing: border-box;
}
.likers-modal-overlay.likers-modal-show { opacity: 1; }
.likers-modal-card {
    background: var(--card-bg); border-radius: 16px; width: 100%; max-width: 340px; max-height: 70vh;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); transform: scale(0.9); transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
    display: flex; flex-direction: column; overflow: hidden;
}
.likers-modal-overlay.likers-modal-show .likers-modal-card { transform: scale(1); }
.likers-modal-header {
    display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
    border-bottom: 1px solid var(--border-color); font-weight: 800; color: var(--text-dark); font-size: 1.05rem; flex-shrink: 0;
}
.likers-modal-close {
    background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer;
    padding: 4px 8px; border-radius: 6px; transition: 0.2s;
}
.likers-modal-close:hover { background: var(--bg-alt); }
.likers-modal-body { overflow-y: auto; padding: 6px 0; }
.likers-modal-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 18px; text-decoration: none;
    color: var(--text-dark); font-weight: 600; font-size: 0.95rem; transition: background 0.15s;
}
.likers-modal-row:hover { background: var(--bg-alt); }

.theme-toggle-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9998;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    -webkit-appearance: none;
    appearance: none;
    color: var(--primary-brown);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease;
}
.theme-toggle-btn:hover { transform: scale(1.08); }
@media (max-width: 600px) {
    .theme-toggle-btn { right: 14px; bottom: 14px; width: 42px; height: 42px; font-size: 0.95rem; }
}

.dropdown-theme-row {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 13px 20px; border-top: 1px solid rgba(255,255,255,0.1);
}
.dropdown-theme-row i { font-size: 0.85rem; color: rgba(255,255,255,0.55); width: 16px; text-align: center; flex-shrink: 0; }
.dropdown-theme-row i.fa-sun { color: #F5C518; }
.theme-switch {
    position: relative; width: 42px; height: 23px; border-radius: 99px; flex-shrink: 0;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
    cursor: pointer; padding: 0; -webkit-appearance: none; appearance: none;
}
.theme-switch .knob {
    position: absolute; top: 1px; left: 1px; width: 17px; height: 17px; border-radius: 50%;
    background: #F5C518; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-switch.is-dark .knob { transform: translateX(19px); }

[data-theme="dark"] {
    --deep: #100D09;
    --bg: #191510;
    --surf: #221D16;
    --surf-2: #2B2419;
    --surf-3: #342C1F;

    --line: rgba(255, 255, 255, .07);
    --line-2: rgba(255, 255, 255, .12);
    --line-gold: rgba(245, 197, 24, .28);

    --text: #F5F0E6;
    --text-2: #CFC6B3;
    --muted: #8F8574;

    --gold: #F5C518;
    --gold-2: #FFD84D;
    --gold-soft: rgba(245, 197, 24, .12);
    --gold-line: rgba(245, 197, 24, .3);

    --moss: #8C9B76;
    --moss-2: #A6B58C;
    --moss-soft: rgba(140, 155, 118, .14);

    --bronze: #C08B4A;
    --silver: #C8C3B4;
    --brick: #C4704A;
    --brick-soft: rgba(196, 112, 74, .14);

    --border-color: var(--line-2);

    --primary-brown: #d9b98a;
}

[data-theme="dark"]:not(.guest-hero-v2):not(.logged-in-nav) .main-nav,
[data-theme="dark"] .nav-dropdown-content,
[data-theme="dark"]:not(.logged-in-nav) #mobile-header-bar,
[data-theme="dark"]:not(.guest-hero-v2):not(.logged-in-nav) .main-nav ul {
    background-color: var(--deep) !important;
}
 
html.logged-in-nav[data-theme="dark"] .main-nav.nav-stuck,
html.logged-in-nav[data-theme="dark"] .main-nav.nav-stuck #mobile-header-bar {
    background-color: var(--deep) !important;
}
 
@media screen and (max-width: 768px) {
    html.logged-in-nav[data-theme="dark"] .main-nav ul {
        background-color: var(--deep) !important;
    }
}

[data-theme="dark"] [style*="background: var(--primary-brown)"],
[data-theme="dark"] [style*="background:var(--primary-brown)"],
[data-theme="dark"] [style*="background-color: var(--primary-brown)"],
[data-theme="dark"] [style*="background-color:var(--primary-brown)"],
[data-theme="dark"] [style*="background: var(--hover-khaki)"],
[data-theme="dark"] [style*="background:var(--hover-khaki)"],
[data-theme="dark"] [style*="background-color: var(--hover-khaki)"],
[data-theme="dark"] [style*="background-color:var(--hover-khaki)"] {
    background: var(--gold) !important;
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #1B1400 !important;
}
[data-theme="dark"] .action-btn:hover {
    background-color: var(--gold);
    color: #1B1400;
    border-color: var(--gold);
}

[data-theme="dark"] footer,
[data-theme="dark"] .forum-cat-header,
[data-theme="dark"] #nav-desktop-dropdown.desktop-profile-dropdown,
[data-theme="dark"] .chat-header,
[data-theme="dark"] .chat-sidebar h3 {
    background: var(--deep) !important;
}

[data-theme="dark"] .forum-composer-submit,
[data-theme="dark"] .forum-starter .btn-new-topic,
[data-theme="dark"] .btn-redeem:hover,
[data-theme="dark"] .profile-menu a.active,
[data-theme="dark"] .feed-comment-input-row .send-btn,
[data-theme="dark"] .chat-input-area button,
[data-theme="dark"] .catch-filter-toggle.is-open,
[data-theme="dark"] .new-catch-fab,
[data-theme="dark"] .levelup-btn,
[data-theme="dark"] .todo-row-plain.is-done .todo-check {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #1B1400 !important;
}
[data-theme="dark"] .rotator-dot.active { background: var(--gold) !important; }

[data-theme="dark"] .forum-composer-head .avatar-icon,
[data-theme="dark"] .showcase-quest-icon {
    background: var(--surf-3) !important;
}

[data-theme="dark"] .forum-cat-dropdown-item.selected { background: var(--gold-soft) !important; }

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--bg-alt);
    color: var(--text-dark);
    border-color: var(--border-color);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .card-footer,
[data-theme="dark"] .image-placeholder,
[data-theme="dark"] .card-tabbtn,
[data-theme="dark"] .mini-preview-stats,
[data-theme="dark"] .banner-shop-info span,
[data-theme="dark"] .overview-stat-label,
[data-theme="dark"] .overview-activity-date,
[data-theme="dark"] .overview-activity-empty,
[data-theme="dark"] .rank-row-number,
[data-theme="dark"] .notif-page-time,
[data-theme="dark"] .toast-close,
[data-theme="dark"] .levelup-sub,
[data-theme="dark"] .feed-date,
[data-theme="dark"] .feed-likers-text,
[data-theme="dark"] .feed-empty-comment,
[data-theme="dark"] .detail-stat-box.neutral .label,
[data-theme="dark"] #news-filter-empty,
[data-theme="dark"] .news-page-head p,
[data-theme="dark"] .month-divider span,
[data-theme="dark"] .filter-pill:not(.active),
[data-theme="dark"] .auth-form-subtitle,
[data-theme="dark"] .upload-photo-small span {
    color: var(--text-muted);
}
 
[data-theme="dark"] .filter-pill.active {
    color: #fff;
}

[data-theme="dark"] .modern-feed-card,
[data-theme="dark"] .global-chat-widget,
[data-theme="dark"] .chat-bubble-other,
[data-theme="dark"] .chat-container,
[data-theme="dark"] .chat-contact-search input,
[data-theme="dark"] .chat-header,
[data-theme="dark"] .mini-profile-preview,
[data-theme="dark"] .banner-shop-card,
[data-theme="dark"] .overview-stat-pill,
[data-theme="dark"] .overview-activity-card,
[data-theme="dark"] .feed-toolbar,
[data-theme="dark"] .upload-card,
[data-theme="dark"] .notif-page-pagebtn,
[data-theme="dark"] .notif-page-pagebtn:disabled:hover,
[data-theme="dark"] .podium-card,
[data-theme="dark"] .rank-row,
[data-theme="dark"] .toast,
[data-theme="dark"] .levelup-card,
[data-theme="dark"] .feed-comments-section,
[data-theme="dark"] .news-box,
[data-theme="dark"] .news-card,
[data-theme="dark"] .msg-partner {
    background-color: var(--card-bg);
}

[data-theme="dark"] .card-footer,
[data-theme="dark"] .card-tabbar,
[data-theme="dark"] .card-tabbtn:not(.active):hover,
[data-theme="dark"] .feed-card-header,
[data-theme="dark"] .feed-card-footer,
[data-theme="dark"] .feed-card-footer .share-btn,
[data-theme="dark"] .feed-comment-bubble,
[data-theme="dark"] .stat-tile,
[data-theme="dark"] .chat-messages,
[data-theme="dark"] .chat-sidebar,
[data-theme="dark"] .chat-contacts li:hover,
[data-theme="dark"] .notif-page-item:hover,
[data-theme="dark"] .notif-page-icon,
[data-theme="dark"] .notif-page-pagebtn:hover,
[data-theme="dark"] .feed-toolbar-search input,
[data-theme="dark"] .feed-toolbar-select select,
[data-theme="dark"] .upload-photo-main,
[data-theme="dark"] .upload-photo-small,
[data-theme="dark"] .release-toggle-btn,
[data-theme="dark"] .detail-stat-box.neutral,
[data-theme="dark"] .filter-pill:not(.active),
[data-theme="dark"] .file-upload-box {
    background-color: var(--bg-alt);
}
[data-theme="dark"] .feed-toolbar-search input:focus {
    background-color: var(--card-bg);
}
[data-theme="dark"] .upload-photo-main:hover,
[data-theme="dark"] .upload-photo-small:hover,
[data-theme="dark"] .file-upload-box:hover {
    background-color: var(--border-color);
}

[data-theme="dark"] .chip-gold,
[data-theme="dark"] .chip-blue,
[data-theme="dark"] .chip-green,
[data-theme="dark"] .chip-orange,
[data-theme="dark"] .chip-red,
[data-theme="dark"] .chip-purple,
[data-theme="dark"] .chip-amber,
[data-theme="dark"] .cat-badge,
[data-theme="dark"] .stat-tile.accent,
[data-theme="dark"] .feed-ponty-badge,
[data-theme="dark"] .detail-stat-box,
[data-theme="dark"] .notif-page-item.is-unread .notif-page-icon,
[data-theme="dark"] .toast-success .toast-icon,
[data-theme="dark"] .toast-error .toast-icon,
[data-theme="dark"] .toast-info .toast-icon,
[data-theme="dark"] .banner-shop-btn.buy,
[data-theme="dark"] .banner-shop-btn.activate,
[data-theme="dark"] .banner-shop-btn.active-state,
[data-theme="dark"] .release-toggle-btn.active-release,
[data-theme="dark"] .release-toggle-btn.active-kept,
[data-theme="dark"] .pin-trophy-item.selected,
[data-theme="dark"] .guest-hero-eyebrow,
[data-theme="dark"] .about-picon,
[data-theme="dark"] .about-wtag,
[data-theme="dark"] .freshcatch-pill.liked,
[data-theme="dark"] .ponty-balance-box,
[data-theme="dark"] .cond-a-verdict,
[data-theme="dark"] .forum-tag:not(.hot):not(.new),
[data-theme="dark"] .forum-tag.new,
[data-theme="dark"] .angler-row.me,
[data-theme="dark"] .stat-count,
[data-theme="dark"] .chat-bubble-me {
    background-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .pin-trophy-item.disabled .pin-trophy-icon {
    background-color: rgba(255,255,255,0.05) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .sidebar-widget h3,
[data-theme="dark"] .card-tabbar,
[data-theme="dark"] .feed-toolbar-title,
[data-theme="dark"] .chat-sidebar,
[data-theme="dark"] .chat-contact-search,
[data-theme="dark"] .chat-contacts li,
[data-theme="dark"] .chat-header,
[data-theme="dark"] .chat-input-area,
[data-theme="dark"] .msg-partner,
[data-theme="dark"] .notif-page-item,
[data-theme="dark"] .notif-page-pagebtn,
[data-theme="dark"] .upload-photo-small,
[data-theme="dark"] .feed-comment-input-row input {
    border-color: var(--border-color);
}

[data-theme="dark"] .rotator-dot {
    background: var(--border-color);
}

[data-theme="dark"] .feed-liker-avatar,
[data-theme="dark"] .mini-preview-avatar {
    border-color: var(--card-bg);
}

.skel-shimmer {
    display: block;
    border-radius: 6px;
    background: linear-gradient(100deg, #e7ded0 30%, #f3ecdf 45%, #e7ded0 60%);
    background-size: 300% 100%;
    animation: skel-shimmer-move 1.3s ease-in-out infinite;
}
[data-theme="dark"] .skel-shimmer {
    background: linear-gradient(100deg, var(--surf-2) 30%, var(--surf-3) 45%, var(--surf-2) 60%);
    background-size: 300% 100%;
}
 
.skel-shimmer-dark {
    display: block;
    border-radius: 6px;
    background: linear-gradient(100deg, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.2) 45%, rgba(255,255,255,0.08) 60%);
    background-size: 300% 100%;
    animation: skel-shimmer-move 1.3s ease-in-out infinite;
}
@keyframes skel-shimmer-move {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.cond-loading .cond-a-gauge,
.cond-loading .cond-a-grid {
    display: none !important;
}
.cond-skel-wrap { display: none; }

.fk-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.fk-tile {
    position: relative;
    background: linear-gradient(155deg, var(--card-bg) 0%, var(--bg-alt) 100%);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    overflow: hidden;
    transition: transform 0.15s, border-color 0.15s;
}
.fk-tile:hover { transform: translateY(-2px); border-color: var(--primary-brown); }
.fk-tile__icon {
    position: absolute;
    top: -14px;
    right: -14px;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: var(--primary-brown);
    font-size: 4rem;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-8deg);
}
[data-theme="dark"] .fk-tile__icon { color: var(--gold); opacity: 0.09; }
.fk-tile__label {
    position: relative;
    z-index: 1;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 30px 10px 0;
    line-height: 1.35;
}
.fk-tile__value {
    position: relative;
    z-index: 1;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    color: var(--text-dark);
    font-variant-numeric: tabular-nums;
}
.fk-tile__unit { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.fk-tile__sub { position: relative; z-index: 1; font-size: 0.72rem; color: var(--text-muted); margin: 6px 0 0; }
.fk-tile__sub b { color: var(--gold-2); font-weight: 700; }

.mystat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.mystat-tile {
    padding: 13px 6px;
    text-align: center;
    border-right: 1px solid var(--border-color);
}
.mystat-tile:last-child { border-right: 0; }
.mystat-tile__value {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    color: var(--text-dark);
    font-variant-numeric: tabular-nums;
}
.mystat-tile__unit { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); margin-left: 1px; }
.mystat-tile__label {
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 5px 0 0;
}

html.is-logged-in #hv2-hello {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}
#hv2-hello::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -46px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--gold-soft), transparent 62%);
    pointer-events: none;
}
#hv2-avatar, #hv2-name-wrap, #hv2-rank, #hv2-liga { position: relative; z-index: 1; }
 
#hv2-avatar {
    flex-shrink: 0;
    padding: 3px;
    border-radius: 50%;
    background: conic-gradient(var(--hv2-gold) calc(var(--lvl-pct, 0) * 1%), var(--border-color) 0);
}
 
#hv2-name-wrap { flex: 1 1 0; min-width: 0; }
#hv2-avatar img, #hv2-avatar .avatar-icon { width: 54px !important; height: 54px !important; font-size: 1.3rem !important; }
#hv2-hello-title {
    font-family: 'Archivo', system-ui, sans-serif;
    font-stretch: 108%;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--text-dark);
}
#hv2-hello-title span { color: var(--text-muted); font-weight: 400; }
 
#hv2-hello-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.hv2-hello-meta-txt {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
 
#hv2-liga { order: 1; margin-left: auto; width: 190px; text-decoration: none; display: block; flex-shrink: 0; }
#hv2-liga-toprow {
    display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--text-muted); margin-bottom: 6px;
}
#hv2-liga-toprow b { color: #A6733C; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
#hv2-liga-bar { height: 5px; border-radius: 99px; background: var(--bg-alt); border: 1px solid var(--border-color); overflow: hidden; }
#hv2-liga-bar-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8A5A28, #A6733C); width: 0%; transition: width 1s; }
 
#hv2-rank {
    order: 2; text-align: center; margin-left: 26px; flex-shrink: 0;
    background: var(--gold-soft); border: 1px solid var(--gold-line);
    border-radius: 11px; padding: 8px 15px;
}
#hv2-rank-num {
    font-family: 'IBM Plex Mono', monospace; font-size: 1.5rem; font-weight: 600; line-height: 1;
    color: var(--hv2-gold); display: block;
}
#hv2-rank span {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted); display: block; margin-top: 4px;
}
 
html.is-logged-in #hv2-actions { display: flex !important; gap: 12px; }
#hv2-actions a {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: 'Figtree', system-ui, sans-serif; font-weight: 700; font-size: 15px;
    padding: 13px 22px; border-radius: 10px; text-decoration: none; border: 1px solid transparent;
}
#hv2-btn-upload { background: var(--gold); color: #241B02; box-shadow: 0 8px 22px -12px rgba(138,98,6,0.5); }
#hv2-btn-forum { border-color: var(--border-color); color: var(--text-dark); background: var(--card-bg); }
 
#hv2-btn-forum-mobile {
    display: none; align-items: center; justify-content: center; gap: 9px; width: 100%;
    font-family: 'Figtree', system-ui, sans-serif; font-weight: 700; font-size: 15px;
    padding: 13px 22px; border-radius: 10px; text-decoration: none;
    border: 1px solid var(--border-color); color: var(--text-dark); background: var(--card-bg);
    margin-top: 18px;
}
 
html.is-logged-in #hv2-day-toggle {
    display: flex !important;
    align-items: center; gap: 9px; width: 100%; margin: -8px 0 20px;
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 11px;
    padding: 11px 16px; font-family: 'Figtree', system-ui, sans-serif; font-weight: 700; font-size: 0.88rem;
    color: var(--text-dark); cursor: pointer; text-align: left; transition: border-color 0.15s;
}
#hv2-day-toggle:hover { border-color: var(--gold-line); }
#hv2-day-toggle i:first-child { color: var(--hv2-gold); }
#hv2-day-toggle span { flex: 1; }
.hv2-day-chevron { transition: transform 0.2s ease; color: var(--text-muted); font-size: 0.78rem; }
#hv2-day-toggle.open .hv2-day-chevron { transform: rotate(180deg); }
 
#hv2-day-toggle.has-pending i:first-child { position: relative; }
#hv2-day-toggle.has-pending i:first-child::after {
    content: ""; position: absolute; top: -3px; right: -4px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--gold); border: 1.5px solid var(--card-bg);
}
.hv2-day-collapse { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.hv2-day-collapse.open { max-height: 600px; }
.hv2-day-collapse #profile-widget.hv2-w { margin-bottom: 20px; padding-bottom: 0; border-bottom: 0; }

@media (max-width: 760px) {
     
    #hv2-hello { flex-wrap: wrap; gap: 12px; }
    #hv2-rank { order: 1; margin-left: auto; }
    #hv2-liga { order: 2; flex-basis: 100%; width: auto; margin-left: 0; margin-top: 4px; }
     
    #hv2-btn-forum { display: none !important; }
    #hv2-actions a { width: 100%; }
    #hv2-btn-forum-mobile { display: flex; }
}

.hv2-sec { padding-top: 56px; }
.hv2-shead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.hv2-shead h2 {
    font-family: 'Archivo', system-ui, sans-serif; font-stretch: 110%; font-weight: 800;
    font-size: 1.3rem; color: var(--text-dark);
}
.hv2-shead a {
    margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--hv2-gold); text-decoration: none;
    white-space: nowrap;
}
.hv2-eye {
    display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--hv2-gold); margin-bottom: 9px;
}

.hv2-sub { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 18px; }

.hv2-welcome { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hv2-welcome-av { flex: none; }
.hv2-welcome-tx { min-width: 0; }
.hv2-welcome-tx h2 {
    font-family: 'Archivo', system-ui, sans-serif; font-stretch: 110%; font-weight: 800; font-size: 1.3rem; color: var(--text-dark);
}
.hv2-welcome-tx p { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; }
.hv2-welcome-stats { display: flex; align-items: flex-start; gap: 24px; margin-left: auto; }
.hv2-welcome-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hv2-welcome-stat b {
    display: block; font-family: 'IBM Plex Mono', monospace; font-size: 1.3rem; font-weight: 800; color: var(--text-dark); line-height: 1.2;
}
.hv2-welcome-stat span {
    display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted); margin-top: 3px;
}
.hv2-welcome-btn {
    flex: none; display: inline-flex; align-items: center; gap: 8px; background: var(--primary-brown); color: #fff;
    font-weight: 700; font-size: 0.88rem; padding: 11px 20px; border-radius: 10px; text-decoration: none;
}
.hv2-welcome-btn:hover { filter: brightness(0.9); }
@media (max-width: 640px) {
    .hv2-welcome { gap: 14px; }
    .hv2-welcome-stats { margin-left: 0; gap: 16px; order: 3; width: 100%; justify-content: space-between; }
    .hv2-welcome-btn { order: 4; width: 100%; justify-content: center; margin-bottom: 14px; }
}

.hv2-catch-card {
    position: relative; border-radius: 16px; overflow: hidden; background: var(--bg-alt);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 20px -6px rgba(0,0,0,0.10), 0 22px 44px -18px rgba(0,0,0,0.16);
}
[data-theme="dark"] .hv2-catch-card {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.22), 0 14px 30px -10px rgba(0,0,0,0.42);
}
.hv2-cc { position: relative; display: block; text-decoration: none; color: inherit; }
.hv2-cc-img {
    position: relative; aspect-ratio: 1 / 1; background-size: cover; background-position: center;
    background-color: var(--bg-alt);
    transition: transform 0.5s ease;
}
.hv2-cc-img img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hv2-cc:hover .hv2-cc-img { transform: scale(1.04); }
.hv2-cc-img::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(14,10,6,0.94) 0%, rgba(14,10,6,0.6) 26%, rgba(14,10,6,0.08) 58%, rgba(14,10,6,0.28) 100%);
}
.hv2-cc-kg {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    background: var(--gold); color: #241B02; font-family: 'IBM Plex Mono', monospace; font-weight: 700;
    font-size: 0.85rem; padding: 5px 11px; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.hv2-cc-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 18px 16px; }
.hv2-cc-foot h3 {
    font-family: 'Archivo', system-ui, sans-serif; font-stretch: 110%; font-weight: 800;
    font-size: 1.5rem; line-height: 1.15; color: #fff; letter-spacing: -0.01em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.hv2-cc-meta {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: rgba(255,255,255,0.82);
    margin-top: 7px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0;
}
.hv2-cc-meta .hv2-rx { color: rgba(255,255,255,0.82); }

.hv2-rx { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); margin-left: 10px; }
.hv2-rx i { font-size: 0.85em; }
.hv2-rx .fa-fish { margin-right: -2px; }

.hv2-fc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 700px) {
    .hv2-fc-layout { grid-template-columns: 1fr; }
}

.hv2-trend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) {
    .hv2-trend-grid { grid-template-columns: repeat(2, 1fr); }
}

.suggested-catch-card { border-radius: 16px; overflow: hidden; max-width: 420px; margin: 0 auto; }
.suggested-img-error { display: flex; align-items: center; justify-content: center; height: 100%; color: #888; font-size: 0.85rem; }
.suggested-catch-empty {
    display: flex; align-items: center; gap: 10px; padding: 22px 20px; background: var(--card-bg);
    border: 1px solid var(--border-color); border-radius: 16px; color: var(--text-muted); font-size: 0.92rem;
    max-width: 420px; margin: 0 auto;
}
.suggested-catch-empty i { color: var(--hv2-gold); font-size: 1.3rem; }
.suggested-catch-actions {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    border-top: 1px solid var(--border-color);
}
.suggested-catch-like-btn {
    display: inline-flex; align-items: center; gap: 8px; background: var(--bg-alt); color: var(--text-dark);
    border: 1px solid var(--border-color); padding: 9px 16px; border-radius: 10px; font-weight: 700;
    font-size: 0.88rem; cursor: pointer; transition: 0.15s; font-family: inherit;
}
.suggested-catch-like-btn:hover { border-color: #e67e22; color: #e67e22; }
.suggested-catch-like-btn.liked { background: #fdebd0; color: #d35400; border-color: #e67e22; }
.suggested-catch-comment-btn {
    display: inline-flex; align-items: center; gap: 8px; background: var(--primary-brown); color: #fff;
    padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: 0.88rem; text-decoration: none; transition: 0.15s;
}
.suggested-catch-comment-btn:hover { background: var(--hover-khaki); }
.suggested-catch-like-btn i.fa-solid, .suggested-catch-comment-btn i.fa-solid { margin-right: 0; }
.hv2-trend-card {
    position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
    background-size: cover; background-position: center; background-color: var(--bg-alt);
}
.hv2-trend-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20,15,9,0.92), rgba(20,15,9,0.2) 55%, transparent 78%);
}
.hv2-trend-rank {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: 'IBM Plex Mono', monospace; font-weight: 800; font-size: 0.78rem; color: #241B02;
    background: rgba(255,255,255,0.7);
}
.hv2-trend-rank.r1 { background: linear-gradient(150deg,#f5d149,#c79a18); }
.hv2-trend-rank.r2 { background: linear-gradient(150deg,#dce2e8,#98a3ae); }
.hv2-trend-rank.r3 { background: linear-gradient(150deg,#d08f52,#96602c); }
.hv2-trend-kg {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    background: var(--gold); color: #241B02; font-family: 'IBM Plex Mono', monospace; font-weight: 700;
    font-size: 0.78rem; padding: 4px 8px; border-radius: 999px;
}
.hv2-trend-in { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; z-index: 2; color: #F4EFE4; }
.hv2-trend-in b {
    display: block; font-family: 'Archivo', system-ui, sans-serif; font-stretch: 108%; font-weight: 800;
    font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv2-trend-who {
    display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.64rem; color: #D5C9B2; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv2-trend-rx {
    display: flex; align-items: center; gap: 10px; margin-top: 5px;
    font-family: 'IBM Plex Mono', monospace; font-size: 0.64rem;
}
.hv2-trend-rx .hv2-rx { color: #E3D9C2; margin-left: 0; }

.hv2-rec-wrap { position: relative; }
.hv2-rec-scroll {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding: 2px 2px 6px;
}
.hv2-rec-scroll::-webkit-scrollbar { display: none; }
.hv2-rec-card {
    position: relative; flex: 0 0 150px; scroll-snap-align: start; display: block;
    aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
    background-size: cover; background-position: center; background-color: var(--bg-alt);
}
.hv2-rec-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20,15,9,0.92), rgba(20,15,9,0.15) 55%, transparent 78%);
}
.hv2-rec-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
    color: #241B02; background: var(--gold); padding: 4px 8px; border-radius: 999px; font-weight: 700;
}
.hv2-rec-in { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; z-index: 2; color: #F4EFE4; }
.hv2-rec-in b {
    display: block; font-family: 'Archivo', system-ui, sans-serif; font-stretch: 108%; font-weight: 800;
    font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv2-rec-kg { display: block; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 1.05rem; color: var(--hv2-gold); margin-top: 2px; }
.hv2-rec-who {
    display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; color: #D5C9B2; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv2-rec-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-color);
    background: var(--card-bg); color: var(--text-dark); display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.15); font-size: 0.8rem;
}
.hv2-rec-nav:hover { color: var(--hv2-gold); }
.hv2-rec-nav.prev { left: -16px; }
.hv2-rec-nav.next { right: -16px; }
.hv2-rec-nav i.fa-solid { margin-right: 0; }
@media (max-width: 700px) {
    .hv2-rec-nav { display: none; }
}

.hv2-active-scroll {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding: 2px 2px 6px;
}
.hv2-active-scroll::-webkit-scrollbar { display: none; }
.hv2-active-card {
    position: relative; flex: 0 0 108px; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    text-decoration: none; color: inherit; padding: 16px 10px 14px;
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px;
    transition: transform 0.15s, border-color 0.15s;
}
.hv2-active-card:hover { transform: translateY(-2px); border-color: var(--primary-brown); }
.hv2-active-card .nm {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font-size: 0.8rem; font-weight: 700; margin-top: 10px; max-width: 100%; color: var(--text-dark);
}
.hv2-active-card .nm .nm-txt {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.hv2-active-card .nm .modern-rank-badge {
    padding: 1px 5px !important;
    font-size: 0.55rem !important;
    border-radius: 4px !important;
    flex: none;
}
.hv2-active-card .ct { font-size: 0.68rem; color: var(--text-muted); margin-top: 3px; }
.hv2-active-card .ct b { font-family: 'IBM Plex Mono', monospace; color: var(--gold-2); font-weight: 700; }

.hv2-magf-scroll {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding: 2px 2px 6px;
}
.hv2-magf-scroll::-webkit-scrollbar { display: none; }
.hv2-magf-card {
    flex: 0 0 240px; scroll-snap-align: start; display: block; text-decoration: none; color: inherit;
    border-radius: 14px; overflow: hidden;
}
.hv2-magf-img { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; background-size: cover; background-position: center; background-color: var(--bg-alt); }
.hv2-magf-newtag {
    position: absolute; top: 9px; left: 9px; display: inline-flex; align-items: center; gap: 5px;
    background: var(--hv2-gold); color: #1a1408; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem;
    font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.hv2-magf-newtag i { width: 6px; height: 6px; border-radius: 50%; background: #1a1408; display: block; }
.hv2-magf-body { padding: 10px 2px 0; }
.hv2-magf-body b {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-family: 'Archivo', system-ui, sans-serif; font-stretch: 108%; font-weight: 800; font-size: 0.92rem;
    line-height: 1.32; color: var(--text-dark);
}
.hv2-magf-foot {
    display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
}
.hv2-magf-author {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.hv2-magf-stats { display: flex; gap: 10px; flex-shrink: 0; font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; color: var(--text-muted); }
.hv2-magf-stats .hv2-rx { margin-left: 0; }

.hv2-wxf-scroll {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding: 2px 2px 6px;
}
.hv2-wxf-scroll::-webkit-scrollbar { display: none; }
.hv2-wxf-card {
    flex: 0 0 118px; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px;
    padding: 14px 8px; transition: transform 0.15s, border-color 0.15s;
}
.hv2-wxf-card:hover { transform: translateY(-2px); border-color: var(--primary-brown); }
.hv2-wxf-card.is-today {
    border-color: var(--primary-brown);
    background: linear-gradient(155deg, var(--card-bg) 0%, var(--bg-alt) 100%);
}
.hv2-wxf-day {
    font-size: 0.68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-dark);
}
.hv2-wxf-date { font-size: 0.62rem; color: var(--text-muted); margin-top: 1px; font-family: 'IBM Plex Mono', monospace; }
.hv2-wxf-ring {
    width: 46px; height: 46px; border-radius: 50%; position: relative;
    display: flex; align-items: center; justify-content: center; margin: 10px 0 7px;
}
.hv2-wxf-ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--card-bg); }
.hv2-wxf-card.is-today .hv2-wxf-ring::after { background: var(--bg-alt); }
.hv2-wxf-ring b { position: relative; z-index: 1; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 0.85rem; color: var(--text-dark); }
.hv2-wxf-heading { font-size: 0.68rem; font-weight: 700; }
.hv2-wxf-heading i { font-size: 0.55rem; margin-left: 2px; }
.hv2-wxf-meta {
    font-size: 0.64rem; color: var(--text-muted); margin-top: 5px;
    display: flex; align-items: center; gap: 4px; font-family: 'IBM Plex Mono', monospace;
}

.hv2-fr-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.hv2-fr-col, .hv2-fr-activity { min-width: 0; }
.hv2-fr-divider {
    position: absolute; top: 0; bottom: -28px; left: 50%; width: 1px;
    background: var(--border-color); transform: translateX(-50%);
}
@media (max-width: 760px) {
    .hv2-fr-layout { grid-template-columns: 1fr; }
    .hv2-fr-divider { display: none; }
}
.hv2-fr-topics { display: flex; flex-direction: column; }
.hv2-fr-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--border-color); text-decoration: none; color: inherit;
}
.hv2-fr-row:last-child { border-bottom: 0; }
.hv2-fr-row:hover .who b { color: var(--hv2-gold); }
.hv2-fr-row .who { min-width: 0; flex: 1; }
.hv2-fr-row .who b {
    display: block; font-size: 0.88rem; font-weight: 700; color: var(--text-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s;
}
.hv2-fr-row .who span {
    display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: var(--text-muted); margin-top: 3px;
}
.hv2-fr-thumb {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
    background-size: cover; background-position: center; background-color: var(--bg-alt);
}
.hv2-fr-thumb-ic {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary-brown), var(--hover-khaki)); color: #fff; font-size: 1.05rem;
}
.hv2-fr-thumb-ic i.fa-solid { margin-right: 0; }

.hv2-fc-list { display: flex; flex-direction: column; }
.hv2-fc-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--border-color); text-decoration: none; color: inherit;
}
.hv2-fc-row:last-child { border-bottom: 0; }
.hv2-fc-row:hover .who b { color: var(--hv2-gold); }
.hv2-fc-thumb {
    width: 52px !important; height: 52px !important; min-width: 52px; min-height: 52px; max-width: 52px; max-height: 52px;
    border-radius: 10px; object-fit: cover; flex: none; background: var(--bg-alt); display: block;
}
.hv2-fc-row .who { min-width: 0; flex: 1; }
.hv2-fc-row .who b {
    display: block; font-size: 0.88rem; font-weight: 700; color: var(--text-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s;
}
.hv2-fc-row .who span {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: var(--text-muted); margin-top: 3px;
}
.hv2-fc-row .kg { flex: none; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 0.82rem; color: var(--hv2-gold); }

.hv2-feed { display: flex; flex-direction: column; }
.hv2-feed-row {
    display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border-color);
    font-size: 0.92rem; text-decoration: none; color: inherit;
}
.hv2-feed-row:last-child { border-bottom: 0; }
.hv2-feed-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(138,98,6,0.35); flex-shrink: 0; transform: translateY(-2px); }
.hv2-feed-row.is-new .hv2-feed-dot { background: var(--hv2-gold); box-shadow: 0 0 0 3px rgba(241,196,15,0.25); }
.hv2-feed-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hv2-feed-text em { font-style: normal; color: var(--text-muted); }
.hv2-feed-time { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
@media (max-width: 760px) {
    .hv2-sec { padding-top: 34px; }
}

.hv2-w { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--border-color); }
.hv2-w:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.hv2-wh { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.hv2-wh h3 { font-family: 'Archivo', system-ui, sans-serif; font-stretch: 108%; font-weight: 800; font-size: 0.95rem; color: var(--text-dark); }
.hv2-mag-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hv2-gold);
    margin-left: 6px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(241,196,15,0.25);
}
.hv2-wh .a, .hv2-w .a {
    margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--hv2-gold); text-decoration: none; white-space: nowrap;
}

.hv2-quest-title { display: block; font-size: 0.95rem; font-weight: 800; color: var(--text-dark); margin-bottom: 6px; }
.hv2-quest-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 16px; }
.hv2-quest-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hv2-quest-foot > span { font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; color: var(--text-muted); }
.hv2-quest-btn {
    display: inline-flex; align-items: center; gap: 6px; background: var(--primary-brown); color: #fff;
    padding: 8px 15px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 0.8rem;
    transition: background 0.15s, transform 0.15s; white-space: nowrap;
}
.hv2-quest-btn:hover { background: var(--hover-khaki); transform: translateY(-1px); }

.hv2-napod { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; }
.hv2-pp { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-bottom: 1px solid var(--border-color); text-decoration: none; color: inherit; }
.hv2-k { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); display: block; }
.hv2-pp b { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 1.3rem; display: block; margin-top: 3px; color: var(--text-dark); }
.hv2-go { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hv2-gold); white-space: nowrap; }
.hv2-streak {
    display: flex; align-items: center; gap: 6px; padding: 11px 16px; border-bottom: 1px solid var(--border-color);
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--text-muted); letter-spacing: 0.04em;
}
.hv2-streak b { color: var(--brick); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.hv2-todo { display: flex; align-items: center; gap: 11px; padding: 11px 16px; font-size: 0.88rem; text-decoration: none; color: inherit; }
.hv2-todo + .hv2-todo { border-top: 1px solid var(--border-color); }
.hv2-todo-box {
    width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid rgba(58,47,34,0.28); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.hv2-todo.done .hv2-todo-box { background: var(--hv2-gold); border-color: var(--hv2-gold); }
.hv2-todo.done .hv2-todo-box svg { width: 12px; height: 12px; stroke: var(--card-bg); fill: none; stroke-width: 2.6; }
.hv2-todo.done span:not(.hv2-todo-box) { color: var(--text-muted); text-decoration: line-through; }
.hv2-todo-cta { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.04em; color: var(--hv2-gold); white-space: nowrap; flex-shrink: 0; }
.hv2-todo-collapsed {
    display: flex; align-items: center; gap: 9px; padding: 13px 16px; font-size: 0.85rem; font-weight: 600;
    color: #4E5C2E;
}
.hv2-todo-collapsed i { color: #6E7F42; }

.hv2-mag-row {
    display: flex; gap: 11px; align-items: center; padding: 11px 16px; text-decoration: none;
    border-top: 1px solid var(--border-color); transition: background 0.15s;
}
.hv2-mag-row:first-child { border-top: 0; }
.hv2-mag-row:hover { background: var(--bg-alt); }
.hv2-mag-thumb {
    width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; background-size: cover;
    background-position: center; background-color: var(--bg-alt);
}
.hv2-mag-thumb.no-img { display: flex; align-items: center; justify-content: center; }
 
.hv2-mag-thumb.no-img i { font-size: 1rem; opacity: 0.7; margin-right: 0; }
.hv2-mag-body { min-width: 0; flex: 1; }
.hv2-mag-body b {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 0.85rem; font-weight: 700; color: var(--text-dark); line-height: 1.32;
}
.hv2-mag-row:hover .hv2-mag-body b { color: var(--hover-khaki); }
.hv2-mag-body span {
    display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: var(--text-muted);
    margin-top: 5px;
}
.hv2-mag-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

.hv2-online-count { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--text-muted); }
.hv2-online-row { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 2px; }
.hv2-online-av { position: relative; display: block; width: 38px; height: 38px; flex-shrink: 0; transition: transform 0.15s; }
.hv2-online-av:hover { transform: translateY(-2px); }
.hv2-online-av img, .hv2-online-av .avatar-icon { width: 38px !important; height: 38px !important; font-size: 0.85rem !important; }
.hv2-online-dot {
    position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--moss-2); border: 2px solid var(--card-bg);
}

.hv2-wx { background: #3A2F22; color: #F4EFE4; border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 14px; }
.hv2-wx-ring {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; position: relative;
    display: flex; align-items: center; justify-content: center;
    background: conic-gradient(var(--gold) 0 0%, rgba(255,255,255,0.16) 0% 100%);
}
.hv2-wx-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #3A2F22; }
.hv2-wx-ring b { position: relative; z-index: 2; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 1.05rem; }
.hv2-wx-tt { font-family: 'Archivo', system-ui, sans-serif; font-stretch: 108%; font-size: 0.95rem; font-weight: 700; display: block; }
.hv2-wx-meta { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: #B9AE99; display: block; margin-top: 5px; line-height: 1.65; }

.hv2-ra { display: flex; flex-direction: column; }
.hv2-ra-row {
    display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: baseline;
    padding: 9px 0; text-decoration: none; color: inherit; position: relative;
}
.hv2-ra-row + .hv2-ra-row { border-top: 1px solid var(--border-color); }
.hv2-ra-n { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hv2-ra-row.p1 .hv2-ra-n { color: var(--hv2-gold); font-weight: 600; }
 
.hv2-ra-nm { font-size: 0.92rem; font-weight: 600; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hv2-ra-v { font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; color: var(--text-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv2-ra-v small { color: var(--text-muted); font-size: 0.65rem; margin-left: 3px; }
.hv2-ra-row.you {
    background: linear-gradient(90deg, rgba(245,197,24,0.2), rgba(245,197,24,0));
    margin: 0 -12px; padding: 9px 12px; border-radius: 8px;
}
.hv2-ra-row.you + .hv2-ra-row { border-top-color: transparent; }
.hv2-ra-tag {
    font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; letter-spacing: 0.12em;
    background: var(--gold); color: #241B02; padding: 2px 5px; border-radius: 4px; margin-left: 7px;
}
.hv2-ra-track { grid-column: 2 / 4; height: 3px; border-radius: 99px; background: var(--border-color); overflow: hidden; margin-top: 6px; }
.hv2-ra-track i { display: block; height: 100%; border-radius: 99px; background: rgba(138,98,6,0.45); }
.hv2-ra-row.p1 .hv2-ra-track i { background: var(--hv2-gold); }
.hv2-ra-sep { text-align: center; color: var(--text-muted); font-size: 0.7rem; letter-spacing: 3px; padding: 6px 0; }

.hv2-pin {
    position: relative; display: block; overflow: hidden;
    background: linear-gradient(155deg, var(--gold-soft) 0%, var(--card-bg) 100%);
    border: 1px solid var(--gold-line); border-radius: 14px;
    padding: 14px 16px; margin-bottom: 12px; text-decoration: none; color: inherit;
    transition: transform 0.15s, border-color 0.15s;
}
.hv2-pin:hover { transform: translateY(-2px); }
.hv2-pin-ic {
    position: absolute; top: -10px; right: -8px; font-size: 3.4rem; color: var(--gold-2);
    opacity: 0.12; transform: rotate(18deg); pointer-events: none;
}
.hv2-pin .hv2-news-top { position: relative; z-index: 1; margin-bottom: 6px; }
.hv2-pin h4 { position: relative; z-index: 1; font-size: 0.92rem; }
.hv2-pin .hv2-news-ex { position: relative; z-index: 1; color: var(--text-dark); opacity: 0.75; }
[data-theme="dark"] .hv2-pin { background: linear-gradient(155deg, rgba(245,197,24,0.1) 0%, var(--card-bg) 100%); }
.hv2-news-item {
    display: block; padding: 13px 14px; margin-bottom: 8px;
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px;
    text-decoration: none; color: inherit; transition: transform 0.15s, border-color 0.15s;
}
.hv2-news-item:last-child { margin-bottom: 0; }
.hv2-news-item:hover { transform: translateY(-2px); border-color: var(--primary-brown); }
.hv2-news-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.hv2-news-date { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--text-muted); }
.hv2-news-newtag {
    margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--hv2-gold); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.hv2-news-newtag i { width: 6px; height: 6px; border-radius: 50%; background: var(--hv2-gold); display: block; }
.hv2-news-item h4 { font-family: 'Archivo', system-ui, sans-serif; font-stretch: 104%; font-size: 0.9rem; font-weight: 700; line-height: 1.35; color: var(--text-dark); }
.hv2-news-item:hover h4 { color: var(--hv2-gold); }
.hv2-news-ex { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
 
.hv2-news-footer {
    display: block;
    width: 100%;
    text-align: center;
    padding: 13px;
    margin-top: 14px;
    background: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hv2-gold);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s;
}
.hv2-news-footer:hover { border-color: var(--gold-line); }

.hv2-tip { background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: 12px; padding: 15px; }
.hv2-tip-k { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hv2-gold); margin-bottom: 8px; }
.hv2-tip p { font-size: 0.85rem; line-height: 1.6; color: var(--text-dark); margin: 0; }
.hv2-tip p strong { color: var(--text-dark); }

@media (max-width: 760px) {
    .hv2-wh h3 { font-size: 1.3rem; }
    .hv2-wh { margin-bottom: 18px; }
    .hv2-w {
        padding-top: 34px; padding-bottom: 0; margin-bottom: 0; border-bottom: 0;
    }
    .hv2-pp { padding: 16px; }
    .hv2-streak { padding: 12px 16px; }
    .hv2-todo { padding: 13px 16px; font-size: 0.92rem; }
    .hv2-ra-row { padding: 11px 0; }
    .hv2-ra-nm { font-size: 0.96rem; }
    .hv2-news-item { padding: 14px 16px; }
    .hv2-news-item h4 { font-size: 0.95rem; }
    .hv2-tip { padding: 17px; }
    .hv2-tip p { font-size: 0.9rem; }
     
    .hv2-ra-row.you { margin: 0 -10px; padding: 9px 10px; }
}

.fk-species { padding: 16px 18px 18px; }
.fk-species__label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.fk-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--border-color); }
.fk-bar__seg { height: 100%; transition: width .5s ease; }
.fk-legend { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.fk-legend li { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-dark); }
.fk-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fk-legend .pct { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.fk-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    background: var(--bg-alt);
    border-top: 1px solid var(--border-color);
    padding: 12px 18px;
}
 
.hv2-rec {
    margin-top: 14px; border-radius: 12px; border-top: 0;
    background: #FBF0C4; border: 1px solid rgba(138,98,6,0.18);
}
.hv2-rec .fk-foot__badge { background: transparent; border: 1px solid rgba(138,98,6,0.3); border-radius: 99px; color: #8A6206; }
 
[data-theme="dark"] .hv2-rec { background: #3d3016; border-color: rgba(212,169,74,0.3); }
[data-theme="dark"] .hv2-rec .fk-foot__badge { color: #e0be6e; border-color: rgba(224,190,110,0.35); }
.hv2-rec .fk-foot__text { font-family: 'IBM Plex Mono', monospace; }
.hv2-rec .fk-foot__who { margin-left: auto; }
.fk-foot__badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gold-2);
    background: var(--gold-soft);
    padding: 3px 8px;
    border-radius: 5px;
}
[data-theme="dark"] .fk-foot__badge { background: rgba(255,255,255,0.08); }
.fk-foot__text { font-size: 0.85rem; margin: 0; color: var(--text-dark); }
.fk-foot__text b { font-weight: 700; }
.fk-foot__who { color: var(--text-muted); }

@media (max-width: 620px) {
    .fk-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 769px) and (max-width: 1060px) {
    .fk-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .fk-bar__seg { transition: none; }
}
.cond-loading .cond-skel-wrap { display: block; }

@keyframes fogdkiEmblemPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes fogdkiEmblemSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    [style*="fogdkiEmblemPulse"], [style*="fogdkiEmblemSpin"] { animation: none !important; }
}

/* === Bejelentkezett főoldal kerete - csak logged-in-nav esetén, a kijelentkezett nézetet nem érinti === */
html.logged-in-nav #home-main.home-v2-framed {
    align-items: stretch !important;
    background: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 20px -6px rgba(0, 0, 0, 0.08),
        0 24px 48px -16px rgba(0, 0, 0, 0.12);
    padding: 30px;
}
@media (min-width: 769px) {
    html.logged-in-nav[data-theme="dark"] #home-main.home-v2-framed {
        border-color: rgba(255, 255, 255, 0.045);
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
            0 2px 4px rgba(0, 0, 0, 0.2),
            0 12px 28px -8px rgba(0, 0, 0, 0.35),
            0 32px 60px -16px rgba(0, 0, 0, 0.4);
    }
}
html.logged-in-nav #home-main.home-v2-framed .feed-column {
    padding-right: 30px !important;
}
html.logged-in-nav #home-main.home-v2-framed {
    --hv2-divider: rgba(0, 0, 0, 0.08);
}
html.logged-in-nav[data-theme="dark"] #home-main.home-v2-framed {
    --hv2-divider: rgba(255, 255, 255, 0.09);
}
html.logged-in-nav #home-main.home-v2-framed #home-col-right {
    border-left: 0 !important;
    padding-left: 30px !important;
}
html.logged-in-nav #home-main.home-v2-framed #home-col-right::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent 0, var(--hv2-divider) 7%, var(--hv2-divider) 93%, transparent 100%);
}
html.logged-in-nav #home-main.home-v2-framed .hv2-sec {
    position: relative;
    margin-top: 28px;
    padding-top: 29px !important;
}
html.logged-in-nav #home-main.home-v2-framed .hv2-sec::before {
    content: "";
    position: absolute;
    top: 0;
    left: -30px;
    right: -30px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0, var(--hv2-divider) 11%, var(--hv2-divider) 89%, transparent 100%);
}
html.logged-in-nav #home-main.home-v2-framed .hv2-sec::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--hv2-gold);
    opacity: 0.6;
}
html.logged-in-nav #home-main.home-v2-framed #home-block-welcome::after {
    content: none;
}
html.logged-in-nav #home-main.home-v2-framed #home-block-welcome {
    margin-top: 0;
    padding-top: 0 !important;
}
html.logged-in-nav #home-main.home-v2-framed #home-block-welcome::before {
    content: none;
}
html.logged-in-nav #home-main.home-v2-framed #home-col-right .hv2-w {
    position: relative;
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 28px;
    padding-top: 28px !important;
}
html.logged-in-nav #home-main.home-v2-framed #home-col-right .hv2-w::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: -30px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0, var(--hv2-divider) 9%, var(--hv2-divider) 90%, transparent 100%);
}
html.logged-in-nav #home-main.home-v2-framed #home-col-right .hv2-w:first-child {
    margin-top: 0;
    padding-top: 0 !important;
}
html.logged-in-nav #home-main.home-v2-framed #home-col-right .hv2-w:first-child::before {
    content: none;
}
@media (max-width: 768px) {
    html.logged-in-nav #home-main.home-v2-framed {
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 10px;
    }
    html.logged-in-nav #home-main.home-v2-framed .feed-column {
        padding-right: 0 !important;
    }
    html.logged-in-nav #home-main.home-v2-framed #home-col-right {
        border-left: 0 !important;
        padding-left: 0 !important;
    }
    html.logged-in-nav #home-main.home-v2-framed .hv2-sec {
        margin-top: 17px;
        padding-top: 17px !important;
    }
    html.logged-in-nav #home-main.home-v2-framed .hv2-sec::before {
        left: -10px;
        right: -10px;
    }
    html.logged-in-nav #home-main.home-v2-framed #home-block-welcome {
        padding-top: 0 !important;
    }
    html.logged-in-nav #home-main.home-v2-framed #home-col-right .hv2-w {
        margin-top: 17px;
        padding-top: 17px !important;
    }
    html.logged-in-nav #home-main.home-v2-framed #home-col-right .hv2-w::before {
        left: -10px;
        right: -10px;
    }
}

/* ============================================================
   Egységes "kiemelt kártya" térhatás – a profil doboz stílusa
   a többi oldal fő tartalomdobozain (nem a widgeteken/mezőkön)
   ============================================================ */
.fk-tile,
.hv2-active-card,
.hv2-wxf-card,
.hv2-news-item,
.feed-card,
.mag-lead,
.mag-sec,
.news-tl-item.news-card,
.promo-feed-card,
.fk-promo-box,
.hib-box,
.info-box,
.ftd-opening-box {
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 6px 16px -6px rgba(0, 0, 0, 0.08),
        0 18px 34px -14px rgba(0, 0, 0, 0.10);
}
.fk-tile,
.hv2-active-card,
.hv2-wxf-card,
.feed-card {
    border-radius: 16px;
}

[data-theme="dark"] .fk-tile,
[data-theme="dark"] .hv2-active-card,
[data-theme="dark"] .hv2-wxf-card,
[data-theme="dark"] .hv2-news-item,
[data-theme="dark"] .feed-card,
[data-theme="dark"] .mag-lead,
[data-theme="dark"] .mag-sec,
[data-theme="dark"] .news-tl-item.news-card,
[data-theme="dark"] .promo-feed-card,
[data-theme="dark"] .fk-promo-box,
[data-theme="dark"] .hib-box,
[data-theme="dark"] .info-box,
[data-theme="dark"] .ftd-opening-box {
    border-color: rgba(255, 255, 255, 0.045);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.045),
        0 2px 4px rgba(0, 0, 0, 0.18),
        0 10px 24px -8px rgba(0, 0, 0, 0.30),
        0 24px 44px -16px rgba(0, 0, 0, 0.34);
}

/* Bejelentkezett főoldal – az üdvözlő "nagy box" is kártyát kap */
#home-block-welcome .hv2-welcome {
    background: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 6px 16px -6px rgba(0, 0, 0, 0.08),
        0 18px 34px -14px rgba(0, 0, 0, 0.10);
}
[data-theme="dark"] #home-block-welcome .hv2-welcome {
    border-color: rgba(255, 255, 255, 0.045);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.045),
        0 2px 4px rgba(0, 0, 0, 0.18),
        0 10px 24px -8px rgba(0, 0, 0, 0.30),
        0 24px 44px -16px rgba(0, 0, 0, 0.34);
}
@media (max-width: 768px) {
    #home-block-welcome .hv2-welcome { padding: 16px; }
}

/* Egységes elválasztó-szín a fade-out hajszálvonalakhoz (több oldalon) */
:root { --divider: rgba(0, 0, 0, 0.08); }
[data-theme="dark"] { --divider: rgba(255, 255, 255, 0.09); }

/* ============================================================
   Ambient háttér – finom fény-gradiens + alig látható szemcse.
   A cél: a lapos, egytónusú felület helyett kis mélység/textúra.
   ============================================================ */
body {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
        radial-gradient(1100px 640px at 50% -80px, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%);
    background-repeat: repeat, no-repeat;
    background-size: 140px 140px, 100% 100%;
    background-position: 0 0, 50% 0;
    background-attachment: fixed, fixed;
}
[data-theme="dark"] body {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
        radial-gradient(1200px 720px at 50% -110px, rgba(255, 234, 200, 0.085), rgba(255, 234, 200, 0) 60%);
}

/* Vendég (kijelentkezett) hero-oldal – ott is legyen ambient háttér */
html.guest-hero-v2 body {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
        radial-gradient(1200px 720px at 50% -110px, rgba(255, 234, 200, 0.06), rgba(255, 234, 200, 0) 60%) !important;
    background-repeat: repeat, no-repeat !important;
    background-size: 140px 140px, 100% 100% !important;
    background-position: 0 0, 50% 0 !important;
    background-attachment: fixed, fixed !important;
}

/* Mobilon a fenti fény-gradiens a szűk kijelzőn nem elmosódik, hanem szinte az egész
   szélességet belepi, és jól látható világos "foltot" ad pont az oldalfejléc mögé - ezért
   mobilon csak a szemcse-textúrát tartjuk meg, a fény-gradienst kikapcsoljuk. */
@media (max-width: 768px) {
    body {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E") !important;
        background-repeat: repeat !important;
        background-size: 140px 140px !important;
        background-position: 0 0 !important;
        background-attachment: fixed !important;
    }
    [data-theme="dark"] body,
    html.guest-hero-v2 body {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E") !important;
        background-repeat: repeat !important;
        background-size: 140px 140px !important;
        background-position: 0 0 !important;
        background-attachment: fixed !important;
    }
}

/* Whisper-gradiens a nagy frame-ek tetején – csak sötét témában */
[data-theme="dark"] .hv2-page-frame,
html.logged-in-nav[data-theme="dark"] #home-main.home-v2-framed,
[data-theme="dark"] .pf-card,
[data-theme="dark"] .pub-card {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0) 190px);
}

/* ============================================================
   Generatív profil-fejléc háttér + liga-tier avatar gyűrű
   ============================================================ */
.pf-head, .pub-head { position: relative; overflow: hidden; isolation: isolate; }
.pf-head > *, .pub-head > * { position: relative; z-index: 1; }
.pf-head > .profile-headbg, .pub-head > .profile-headbg { z-index: 0; }

.profile-headbg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.profile-headbg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.profile-headbg-g { transform-origin: 50% 50%; }
.profile-headbg-glow {
    position: absolute; top: -55%; left: 4%; width: 52%; height: 210%;
    background: radial-gradient(closest-side, var(--glow), transparent 72%);
    filter: blur(14px);
}

/* Pontyból vásárolható háttér-bannerek */
.profile-headbg--banner .profile-headbg-wash {
    position: absolute; inset: 0;
    background: var(--bnr-bg, #333);
    opacity: 0.9;
}
.profile-headbg--banner::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(170% 150% at 1% 44%, var(--card-bg) 0%, var(--card-bg) 14%, rgba(0, 0, 0, 0) 64%);
    z-index: 2;
}

/* ---- Banner-motívumok (minden háttérnek saját animált grafikája) ---- */
.bmotif { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.bmotif * { transform-box: fill-box; }

@keyframes bmSwim { from { transform: translateX(-160px); } to { transform: translateX(1380px); } }
@keyframes bmBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes bmRise { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .55; } 88% { opacity: .3; } 100% { transform: translateY(-260px); opacity: 0; } }
@keyframes bmFall { 0% { transform: translateY(-50px) rotate(0); opacity: 0; } 10% { opacity: .5; } 90% { opacity: .4; } 100% { transform: translateY(380px) rotate(260deg); opacity: 0; } }
@keyframes bmTwinkle { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }
@keyframes bmGlint { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(50deg); } }
@keyframes bmDriftUp { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .7; } 100% { transform: translate(50px, -220px); opacity: 0; } }
@keyframes bmBandWave { 0%, 100% { transform: translateX(-26px) scaleY(1); } 50% { transform: translateX(26px) scaleY(1.22); } }
@keyframes bmSpin { to { transform: rotate(360deg); } }
@keyframes bmSweep { 0% { transform: translateX(-360px); } 100% { transform: translateX(1400px); } }
@keyframes bmBird { from { transform: translate(1320px, 0); } to { transform: translate(-180px, -55px); } }
@keyframes bmArc {
    0% { transform: translate(1150px, 250px) rotate(-42deg); opacity: 0; }
    12% { opacity: .55; }
    50% { transform: translate(720px, 46px) rotate(0deg); }
    88% { opacity: .4; }
    100% { transform: translate(320px, 240px) rotate(42deg); opacity: 0; }
}

.bm-fish { animation: bmSwim var(--s, 26s) linear infinite; animation-delay: var(--d, 0s); }
.bm-fish > * { animation: bmBob 3.4s ease-in-out infinite; }
.bm-bub { animation: bmRise var(--s, 9s) linear infinite; animation-delay: var(--d, 0s); }
.bm-leaf { animation: bmFall var(--s, 11s) linear infinite; animation-delay: var(--d, 0s); transform-origin: 50% 50%; }
.bm-star { animation: bmTwinkle var(--s, 4s) ease-in-out infinite; animation-delay: var(--d, 0s); }
.bm-glint { animation: bmGlint var(--s, 3.6s) ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: 50% 50%; }
.bm-fleck { animation: bmDriftUp var(--s, 10s) linear infinite; animation-delay: var(--d, 0s); }
.bm-band { animation: bmBandWave var(--s, 14s) ease-in-out infinite alternate; animation-delay: var(--d, 0s); transform-origin: 50% 0; }
.bm-rays { animation: bmSpin var(--s, 44s) linear infinite; transform-origin: 50% 50%; }
.bm-sweep { animation: bmSweep var(--s, 7s) ease-in-out infinite; }
.bm-bird { animation: bmBird var(--s, 30s) linear infinite; animation-delay: var(--d, 0s); }
.bm-jump { animation: bmArc var(--s, 15s) ease-in-out infinite; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: reduce) {
    .bmotif *, .bmotif { animation: none !important; }
}

.pf-ring, .pub-ring { position: relative; }
.profile-ring-halo {
    position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
    border: 2px solid var(--halo);
    box-shadow: 0 0 0 4px var(--halo-soft), 0 0 18px var(--halo-glow);
}

/* ============================================================
   Közös profil-szekció elemek (pfx-) – szint-bar, heatmap,
   rekord-kártyák, statisztika. pf + pub egyaránt használja.
   ============================================================ */
.pfx-empty { display: flex; align-items: center; gap: 10px; padding: 20px 16px; border: 1px dashed var(--border-color); border-radius: 12px; color: var(--text-muted); font-size: 0.86rem; }
.pfx-empty i { color: var(--hv2-gold); font-size: 1.1rem; flex: none; }
.pfx-empty-sm { font-size: 0.82rem; color: var(--text-muted); }
.pfx-cap { font-family: 'IBM Plex Mono', monospace; font-size: 0.63rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 11px; }

/* Áttekintés (kiemelt statisztika-boxok) */
.pfx-ov { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 11px; }
.pfx-ov-c { position: relative; overflow: hidden; background: radial-gradient(130% 130% at 100% 0%, var(--ov-wash, rgba(245,197,24,.18)) 0%, var(--bg-alt) 62%); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px 16px 14px; min-height: 84px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.pfx-ov-c:hover { border-color: var(--ov-accent, var(--gold-line)); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
.pfx-ov-ic { position: absolute; right: -8px; top: -10px; font-size: 3.4rem; color: var(--ov-accent, var(--hv2-gold)); opacity: 0.24; transform: rotate(-10deg); }
.pfx-ov-v { position: relative; z-index: 1; font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 800; color: var(--text-dark); letter-spacing: -0.02em; line-height: 1.15; }
.pfx-ov-l { position: relative; z-index: 1; margin-top: 5px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.pfx-ov-s { position: relative; z-index: 1; margin-top: 3px; font-size: 0.74rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Fogások rácsos nézete (pf + pub közös) — a kép mindig tiszta, semmilyen adat nem lóg bele */
.pfx-cg { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-top: 4px; }
.pfx-cg-c { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; background: var(--bg-alt); text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.pfx-cg-c:hover { transform: translateY(-3px); border-color: var(--gold-line); box-shadow: 0 8px 18px rgba(0,0,0,0.1); }
.pfx-cg-c.is-best { border-color: var(--gold-line); background: var(--gold-soft); }
.pfx-cg-img { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--border-color); }
.pfx-cg-b { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.pfx-cg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pfx-cg-top b { min-width: 0; font-size: 0.96rem; font-weight: 800; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfx-cg-kg { flex: none; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 0.88rem; color: var(--hv2-gold); }
.pfx-cg-meta { display: flex; align-items: center; gap: 9px; font-size: 0.74rem; color: var(--text-muted); }
.pfx-cg-rec { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--hv2-gold); flex: none; }
.pfx-cg-time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfx-cg-likes { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; }
.pfx-cg-likes i { color: #e67e22; }
.pfx-cg-rec i, .pfx-cg-likes i, .pfx-cg-add-ic i { margin-right: 0; }
.pfx-cg-add-ic { display: flex; align-items: center; justify-content: center; background: transparent; border-bottom: 1px dashed var(--border-color); }
.pfx-cg-add-ic i { font-size: 1.8rem; color: var(--hv2-gold); }
.pfx-cg-add .pfx-cg-b { align-items: center; justify-content: center; text-align: center; }
.pfx-cg-add .pfx-cg-b b { font-size: 0.84rem; color: var(--text-muted); font-weight: 700; white-space: normal; }
@media (max-width: 640px) {
    .pfx-cg { grid-template-columns: repeat(2, 1fr); gap: 11px; }
}

/* Szint-bar */
.pfx-lvl { margin-top: 12px; max-width: 360px; }
.pfx-lvl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pfx-lvl-n { font-size: 0.82rem; font-weight: 800; color: var(--text-dark); }
.pfx-lvl-next { font-size: 0.7rem; color: var(--text-muted); text-align: right; }
.pfx-lvl-bar { height: 6px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; border: 1px solid var(--border-color); }
.pfx-lvl-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--hv2-gold), #f3d574); }

/* Statisztika oldal – nagy szint-sáv, aktuális/következő szint badge-ekkel */
.st-lvl-row { display: flex; align-items: center; gap: 16px; }
.st-lvl-badge { flex: none; display: flex; }
.st-lvl-badge .modern-rank-badge { font-size: 1.15rem !important; padding: 11px 17px !important; border-radius: 12px !important; }
.st-lvl-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--bg-alt); border: 1px solid var(--border-color); overflow: hidden; }
.st-lvl-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--hv2-gold), #f3d574); transition: width 0.5s ease; }
.st-lvl-text { margin-top: 16px; font-size: 0.9rem; color: var(--text-muted); text-align: center; }
.st-lvl-text b { color: var(--hv2-gold); }
.pf-name-lvl-link { text-decoration: none; display: inline-flex; transition: transform 0.15s ease; }
.pf-name-lvl-link:hover { transform: scale(1.08); }
@media (max-width: 480px) {
    .st-lvl-row { gap: 10px; }
    .st-lvl-badge .modern-rank-badge { font-size: 0.95rem !important; padding: 8px 12px !important; }
}

/* Aktivitási heatmap */
.pfx-hm-scroll { overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.pfx-hm-grid { display: inline-flex; gap: 3px; }
.pfx-hm-w { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.pfx-hm-c { width: 13px; height: 13px; border-radius: 3px; display: block; }
.pfx-hm-e { background: transparent; }
.pfx-hm-l0 { background: var(--bg-alt); border: 1px solid var(--border-color); }
.pfx-hm-l1 { background: rgba(241, 196, 15, 0.24); }
.pfx-hm-l2 { background: rgba(241, 196, 15, 0.52); }
.pfx-hm-l3 { background: rgba(241, 196, 15, 0.92); }
.pfx-hm-foot { margin-top: 9px; }
.pfx-hm-leg { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; color: var(--text-muted); }
.pfx-hm-leg .pfx-hm-c { width: 11px; height: 11px; }
.pfx-hm-stats { display: flex; gap: 26px; margin-top: 16px; flex-wrap: wrap; }
.pfx-hm-stats > div { display: flex; flex-direction: column; }
.pfx-hm-stats b { font-size: 1.25rem; font-weight: 800; color: var(--text-dark); letter-spacing: -0.02em; }
.pfx-hm-stats span { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

/* Rekord-kártyák */
.pfx-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pfx-rec { border: 1px solid var(--border-color); border-radius: 13px; padding: 13px 14px; background: var(--bg-alt); display: flex; flex-direction: column; gap: 6px; text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,0.06); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.pfx-rec:hover { transform: translateY(-4px); box-shadow: 0 14px 24px rgba(0,0,0,0.14); border-color: var(--gold-line); }
.pfx-rec.is-site { border-color: var(--gold-line); background: var(--gold-soft); box-shadow: 0 2px 8px rgba(241,196,15,0.14); }
.pfx-rec.is-site:hover { box-shadow: 0 16px 28px rgba(241,196,15,0.24); border-color: var(--hv2-gold); }
.pfx-rec-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pfx-rec-fish { font-size: 0.9rem; font-weight: 800; color: var(--text-dark); }
.pfx-rec-badge { font-family: 'IBM Plex Mono', monospace; font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hv2-gold); border: 1px solid var(--gold-line); border-radius: 4px; padding: 2px 5px; }
.pfx-rec-kg { font-size: 1.6rem; font-weight: 800; color: var(--text-dark); letter-spacing: -0.03em; line-height: 1; }
.pfx-rec-kg small { font-size: 0.62rem; font-weight: 600; color: var(--text-muted); margin-left: 2px; letter-spacing: 0; }
.pfx-rec.is-site .pfx-rec-kg { color: var(--hv2-gold); }
.pfx-rec-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: var(--text-muted); line-height: 1.4; }

/* Statisztika */
.pfx-stats { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 26px; }
.pfx-stats-col { min-width: 0; }
.pfx-seg { display: flex; height: 9px; border-radius: 99px; overflow: hidden; background: var(--bg-alt); }
.pfx-seg i { display: block; height: 100%; }
.pfx-sl-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pfx-sl { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; }
.pfx-sl-d { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.pfx-sl-n { flex: 1; min-width: 0; color: var(--text-dark); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfx-sl-v { font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem; color: var(--text-muted); flex: none; }
.pfx-wr-list { display: flex; flex-direction: column; gap: 11px; }
.pfx-wr { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; }
.pfx-wr-n { font-size: 0.82rem; font-weight: 600; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfx-wr-v { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--text-muted); }
.pfx-wr-b { grid-column: 1 / -1; height: 4px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; }
.pfx-wr-b i { display: block; height: 100%; border-radius: 99px; background: #5b8bb0; }
.pfx-kv { display: flex; flex-direction: column; }
.pfx-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--divider); font-size: 0.83rem; }
.pfx-kv > div:last-child { border-bottom: 0; }
.pfx-kv span { color: var(--text-muted); }
.pfx-kv b { color: var(--text-dark); font-weight: 700; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px) {
    .pfx-stats { grid-template-columns: 1fr; gap: 22px; }
    .pfx-lvl { max-width: none; }
    .pfx-hm-stats { gap: 20px; }
    .pfx-recs { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
    .pfx-rec-kg { font-size: 1.4rem; }
    .pfx-ov { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .pfx-ov-c { padding: 13px 13px 11px; min-height: 74px; }
    .pfx-ov-ic { font-size: 2.7rem; }
    .pfx-ov-v { font-size: 1.2rem; }
}

/* Borító feletti gombok (szerkesztés + háttér-választó) – pf + pub közös */
.pf-head-actions, .pub-head-actions {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    display: flex; align-items: center; gap: 8px;
}
.pf-edit-fab, .pf-cover-fab, .pub-edit-fab, .pub-cover-fab {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 16, 10, 0.55); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.28); color: #fff;
    font-size: 0.84rem; text-decoration: none; transition: 0.2s;
    cursor: pointer; padding: 0;
}
.pf-edit-fab i, .pf-cover-fab i, .pub-edit-fab i, .pub-cover-fab i { margin-right: 0; }
.pf-edit-fab:hover, .pf-cover-fab:hover, .pub-edit-fab:hover, .pub-cover-fab:hover {
    background: var(--hv2-gold); color: #1B1400; border-color: var(--hv2-gold);
}
.pub-edit-fab.is-active { background: var(--moss-soft); border-color: rgba(140, 155, 118, 0.45); color: var(--moss-2); }
.pub-edit-fab.is-active:hover { background: var(--hv2-gold); color: #1B1400; border-color: var(--hv2-gold); }

/* ---- Borító-háttér választó modal (liga + Pontyból vásárolt hátterek) ---- */
.bpk-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(10, 8, 5, 0.6); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.bpk-overlay.open { opacity: 1; pointer-events: auto; }
.bpk-box {
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); width: 100%; max-width: 640px; max-height: 82vh;
    display: flex; flex-direction: column; overflow: hidden;
    transform: scale(0.96) translateY(6px); transition: transform 0.2s ease;
}
.bpk-overlay.open .bpk-box { transform: scale(1) translateY(0); }
.bpk-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border-color); flex: none; }
.bpk-head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--text-dark); display: flex; align-items: center; gap: 9px; }
.bpk-head h3 i { color: var(--hv2-gold); }
.bpk-close {
    background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: 50%;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-muted); flex: none;
}
.bpk-close i.fa-solid { margin-right: 0; }
.bpk-close:hover { color: var(--text-dark); border-color: var(--hover-khaki); }
.bpk-bal {
    margin: 16px 20px 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem;
    color: var(--text-muted); background: var(--bg-alt); border: 1px solid var(--border-color);
    border-radius: 99px; padding: 6px 14px; align-self: flex-start; flex: none;
}
.bpk-bal b { color: var(--hv2-gold); font-weight: 800; }
.bpk-grid { padding: 16px 20px 20px; overflow-y: auto; }
.bpk-sec { margin-bottom: 22px; }
.bpk-sec:last-child { margin-bottom: 0; }
.bpk-sec-h {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.bpk-sec-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.bpk-card { border: 1px solid var(--border-color); border-radius: 13px; overflow: hidden; background: var(--bg-alt); display: flex; flex-direction: column; }
.bpk-card.is-active { border-color: var(--hv2-gold); box-shadow: 0 0 0 1px var(--hv2-gold); }
.bpk-prev { height: 64px; position: relative; }
.bpk-prev--league { background: var(--card-bg); }
.bpk-prev--plain { background: var(--bg-alt); }
.bpk-bd { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bpk-nm { font-size: 0.82rem; font-weight: 800; color: var(--text-dark); }
.bpk-btn {
    margin-top: auto; width: 100%; border: 1px solid var(--border-color); border-radius: 8px; padding: 7px 9px;
    font-size: 0.76rem; font-weight: 700; color: var(--text-dark); background: var(--card-bg);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.bpk-btn:hover:not(:disabled) { border-color: var(--hover-khaki); }
.bpk-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bpk-btn.buy { background: var(--primary-brown); color: #fff; border-color: var(--primary-brown); }
.bpk-btn.equip { background: var(--gold-soft); border-color: var(--gold-line); color: var(--hv2-gold); }
.bpk-badge { margin-top: auto; font-size: 0.72rem; font-weight: 800; color: var(--hv2-gold); text-align: center; padding: 7px 0; }
.bpk-empty { grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 20px; font-size: 0.85rem; background: var(--bg-alt); border: 1px dashed var(--border-color); border-radius: 12px; }
@media (max-width: 480px) {
    .bpk-sec-cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .bpk-box { max-height: 88vh; }
}

/* Jelvény-kitűző modal (profil.html) — a korábbi beállítások-oldali picker stílusa,
   globálissá téve, hogy modalban is újrahasználható legyen. */
.set-pin-cat { margin-bottom: 20px; }
.set-pin-cat:last-child { margin-bottom: 0; }
.set-pin-cat-h { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.set-pin-cat-ic { width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; font-size: 0.7rem; }
.set-pin-cat-ic i { margin-right: 0; }
.set-pin-cat-h b { font-size: 0.9rem; font-weight: 800; color: var(--text-dark); }
.set-pin-cat-n { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--text-muted); }
.set-pin-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.set-chip {
    display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem; letter-spacing: 0.04em; border: 1px solid var(--border-color); border-radius: 99px;
    padding: 5px 12px; color: var(--text-muted); cursor: pointer; transition: 0.15s; background: none;
}
.set-chip:hover { border-color: var(--hover-khaki); }
.set-chip.selected { box-shadow: 0 0 0 2px var(--hv2-gold, var(--primary-brown)) inset; font-weight: 700; }

.set-chip--tier1 { color: var(--hv2-gold); border-color: var(--gold-line); background: var(--gold-soft); }
.set-chip--tier2 { color: var(--hv2-gold); border-color: var(--gold-line); background: var(--gold-soft); font-weight: 700; }
.set-chip--tier3 {
    color: var(--hv2-gold); border-color: var(--hv2-gold); background: var(--gold-soft);
    box-shadow: 0 0 9px rgba(241,196,15,.4); font-weight: 800;
}
.set-chip--tier4 {
    color: var(--hv2-gold); border-color: var(--hv2-gold); background: var(--gold-soft);
    box-shadow: 0 0 16px rgba(241,196,15,.65); font-weight: 800;
}

.set-pin-cat-ic.set-chip--gold   { color: var(--hv2-gold); background: var(--gold-soft); }
.set-pin-cat-ic.set-chip--rust   { color: #c4704a; background: rgba(196,112,74,.14); }
.set-pin-cat-ic.set-chip--fire   { color: #d9701f; background: rgba(245,136,60,.15); }
.set-pin-cat-ic.set-chip--slate  { color: #5f7488; background: rgba(126,147,166,.15); }
.set-pin-cat-ic.set-chip--moss   { color: var(--moss-2); background: var(--moss-soft); }
.set-pin-cat-ic.set-chip--plat   { color: #7e8a94; background: rgba(150,160,170,.16); }
.set-pin-cat-ic.set-chip--violet { color: #9b84b8; background: rgba(155,132,184,.15); }
.set-pin-cat-ic.set-chip--aqua   { color: #2f8fa8; background: rgba(63,153,176,.14); }
.set-pin-cat-ic.set-chip--amber  { color: #b8791f; background: rgba(201,153,46,.14); }
.set-pin-empty { font-size: 0.85rem; color: var(--text-muted); padding: 20px; text-align: center; background: var(--bg-alt); border: 1px dashed var(--border-color); border-radius: 12px; }

.pf-hi { position: relative; }
.pf-hi-edit-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--border-color);
    color: var(--text-muted); font-size: 0.62rem; cursor: pointer; flex: none; vertical-align: middle;
}
.pf-hi-edit-btn i.fa-solid { margin-right: 0; }
.pf-hi-edit-btn:hover { color: var(--hv2-gold); border-color: var(--gold-line); }

/* .set-save globálisan is elérhető kell legyen, mivel a jelvény-kitűző modal a profil.html-en
   nyílik meg, nem a beállítások oldalon (ahol ez a class eredetileg, oldal-szinten volt csak
   definiálva). */
.set-save {
    display: inline-flex; align-items: center; gap: 8px; background: var(--primary-brown); color: #fff;
    border: none; padding: 11px 20px; border-radius: 10px; font-weight: 800; font-size: 0.9rem;
    cursor: pointer; margin-top: 6px; transition: .2s;
}
.set-save:hover { filter: brightness(0.9); }
.set-save:disabled { opacity: 0.7; cursor: default; }

.profile-ring-halo.is-elite {
    animation: profileRingPulse 3.2s ease-in-out infinite;
}
@keyframes profileRingPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--halo-soft), 0 0 14px var(--halo-glow); }
    50%      { box-shadow: 0 0 0 6px var(--halo-soft), 0 0 26px var(--halo-glow); }
}
@media (prefers-reduced-motion: reduce) {
    .profile-ring-halo.is-elite { animation: none; }
}

/* ================= Tagok oldal (horgásztársak) ================= */
.tg-sec-head { display: flex; align-items: center; gap: 10px; margin: 34px 0 16px; }
.tg-sec-head:first-child { margin-top: 0; }
.tg-sec-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--gold-soft); color: var(--hv2-gold); display: flex; align-items: center; justify-content: center; flex: none; font-size: 0.85rem; }
.tg-sec-ic i { margin-right: 0; }
.tg-sec-head h2 { font-size: 1.15rem; font-weight: 800; color: var(--text-dark); margin: 0; }
.tg-sec-n { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; color: var(--text-muted); }

.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.tg-card {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; min-height: 84px;
    border-radius: 14px; text-decoration: none; color: inherit;
    background: var(--bg-alt);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 20px -6px rgba(0, 0, 0, 0.08),
        0 24px 48px -16px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tg-card:hover { transform: translateY(-3px); }
@media (min-width: 640px) {
    [data-theme="dark"] .tg-card {
        border-color: rgba(255, 255, 255, 0.045);
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
            0 2px 4px rgba(0, 0, 0, 0.2),
            0 12px 28px -8px rgba(0, 0, 0, 0.35),
            0 32px 60px -16px rgba(0, 0, 0, 0.4);
    }
}
.tg-card > .profile-headbg { z-index: 0; }
.tg-card .tg-ring, .tg-card .tg-info { position: relative; z-index: 1; }

.tg-ring { flex: none; display: flex; }
.tg-info { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.tg-name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1rem; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-online { width: 8px; height: 8px; border-radius: 50%; background: #bdc3c7; flex: none; }
.tg-online.is-on { background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,0.2); animation: tgPulseDot 2s infinite; }
@keyframes tgPulseDot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(46,204,113,0.2); }
    50% { box-shadow: 0 0 0 5px rgba(46,204,113,0.32); }
}
.tg-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tg-badges i { margin-right: 0; }