:root {
            --bg: #07090f;
            --bg2: #0c1018;
            --bg3: #111720;
            --bg4: #182030;
            --bg5: #1e2840;
            --orange: #e8610a;
            --orange2: #ff7a2a;
            --orange-d: #b84d08;
            --og15: rgba(232, 97, 10, .15);
            --og10: rgba(232, 97, 10, .10);
            --og06: rgba(232, 97, 10, .06);
            --og40: rgba(232, 97, 10, .40);
            --text: #dce6f0;
            --text2: #8a96a6;
            --text3: #526070;
            --border: rgba(255, 255, 255, .07);
            --border2: rgba(255, 255, 255, .12);
            --green: #22c55e;
            --red: #ef4444;
            --blue: #60a5fa;
            --gold: #f59e0b;
            --r: 10px;
            --r2: 14px;
            --fd: 'Syne', sans-serif;
            --fb: 'DM Sans', sans-serif;
            --sh: 0 4px 32px rgba(0, 0, 0, .5);
        }


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

        html {
            scroll-behavior: smooth;
        }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: var(--fb);
            font-size: 15px;
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* grain overlay */
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 999;
            opacity: .5;
        }

        /* ══ SCROLLBAR ══ */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg2);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--bg5);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--orange-d);
        }

        /* ══ NAV ══ */
        nav {
            position: sticky;
            top: 0;
            z-index: 200;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2.5rem;
            height: 62px;
            background: rgba(7, 9, 15, .88);
            backdrop-filter: blur(24px) saturate(1.4);
            border-bottom: 1px solid var(--border);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: .65rem;
            text-decoration: none;
            flex-shrink: 0;
        }

        .logo-flame {
            height: 32px;
            width: auto;
            object-fit: contain;
            filter: brightness(2) contrast(1.25) grayscale(1) drop-shadow(0 0 10px rgba(255, 107, 53, .3));
            transition: filter .3s ease, transform .3s ease;
        }

        .logo-text {
            font-family: 'Outfit', var(--fd), sans-serif;
            font-weight: 800;
            font-size: 1.5rem;
            letter-spacing: -0.6px;
            color: #fff;
        }

        .logo-text b {
            color: rgb(255, 107, 53);
            font-weight: 800;
        }

        .nav-links {
            display: flex;
            gap: .15rem;
            list-style: none;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--text2);
            font-size: .85rem;
            font-weight: 500;
            padding: .38rem .9rem;
            border-radius: 7px;
            transition: color .18s, background .18s;
        }

        .nav-links a:hover {
            color: var(--text);
            background: var(--bg3);
        }

        .nav-links a.active {
            color: var(--orange);
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: .75rem;
        }

        .nav-user {
            display: flex;
            align-items: center;
            gap: .5rem;
            background: var(--bg3);
            border: 1px solid var(--border);
            padding: .35rem .8rem .35rem .45rem;
            border-radius: 999px;
            cursor: pointer;
            transition: border-color .2s;
            text-decoration: none;
            color: var(--text);
        }

        .nav-user:hover {
            border-color: var(--border2);
        }

        .nav-user-av {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--orange), var(--orange2));
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--fd);
            font-weight: 800;
            font-size: .62rem;
            color: #fff;
        }

        .nav-user span {
            font-size: .82rem;
            font-weight: 500;
        }

        .btn-admin {
            display: flex;
            align-items: center;
            gap: .45rem;
            background: transparent;
            border: 1px solid var(--border2);
            color: var(--text);
            padding: .4rem 1rem;
            border-radius: 8px;
            font-size: .83rem;
            font-weight: 500;
            cursor: pointer;
            transition: border-color .2s, background .2s;
            text-decoration: none;
        }

        .btn-admin:hover {
            border-color: var(--orange);
            background: var(--og06);
        }

        /* ══ HERO ══ */
        .hero {
            position: relative;
            overflow: hidden;
            padding: 3.5rem 2.5rem 0;
        }

        /* animated mesh background */
        .hero-mesh {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(ellipse 60% 80% at 10% 50%, rgba(232, 97, 10, .07) 0%, transparent 70%),
                radial-gradient(ellipse 40% 60% at 90% 20%, rgba(232, 97, 10, .05) 0%, transparent 70%);
        }

        /* grid lines decoration */
        .hero-grid {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(var(--border) 1px, transparent 1px),
                linear-gradient(90deg, var(--border) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .4) 40%, transparent 100%);
        }

        .hero-inner {
            position: relative;
            z-index: 1;
            max-width: 1300px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 2rem;
            align-items: end;
        }

        .hero-label {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: var(--og10);
            border: 1px solid var(--og40);
            color: var(--orange);
            font-size: .7rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            padding: .32rem .9rem;
            border-radius: 999px;
            margin-bottom: 1.1rem;
        }

        .hero-label::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--orange);
            animation: blink 1.8s infinite;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: .3
            }
        }

        .hero h1 {
            font-family: var(--fd);
            font-weight: 800;
            font-size: clamp(2.2rem, 4.5vw, 3.6rem);
            line-height: 1.05;
            letter-spacing: -.03em;
            margin-bottom: .8rem;
        }

        .hero h1 em {
            font-style: normal;
            color: var(--orange);
        }

        .hero-desc {
            color: var(--text2);
            font-size: 1rem;
            font-weight: 300;
            max-width: 480px;
            margin-bottom: 1.8rem;
            line-height: 1.65;
        }

        /* LIVE STRIP */
        .live-strip {
            display: flex;
            align-items: center;
            gap: 1rem;
            background: var(--bg2);
            border: 1px solid var(--border);
            padding: .55rem 1rem;
            border-radius: var(--r);
            width: fit-content;
            margin-bottom: 2rem;
        }

        .live-dot {
            width: 8px;
            height: 8px;
            background: var(--green);
            border-radius: 50%;
            animation: blink 2s infinite;
            flex-shrink: 0;
        }

        .live-strip span {
            font-size: .8rem;
            color: var(--text2);
        }

        .live-strip strong {
            color: var(--green);
            font-weight: 600;
        }

        .live-avatars {
            display: flex;
        }

        .live-avatar {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1.5px solid var(--bg2);
            margin-left: -5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--fd);
            font-size: .52rem;
            font-weight: 800;
            color: #fff;
        }

        /* STATS CARDS */
        .hero-stats {
            display: flex;
            flex-direction: column;
            gap: .75rem;
            flex-shrink: 0;
        }

        .stat-card {
            background: var(--bg3);
            border: 1px solid var(--border);
            border-radius: var(--r);
            padding: .9rem 1.4rem;
            min-width: 140px;
            text-align: right;
            position: relative;
            overflow: hidden;
            transition: border-color .25s;
        }

        .stat-card:hover {
            border-color: var(--og40);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 3px;
            height: 100%;
            background: linear-gradient(to bottom, var(--orange), transparent);
            opacity: 0;
            transition: opacity .25s;
        }

        .stat-card:hover::before {
            opacity: 1;
        }

        .stat-n {
            font-family: var(--fd);
            font-weight: 800;
            font-size: 1.8rem;
            color: var(--orange);
            line-height: 1;
            counter-reset: num;
        }

        .stat-l {
            font-size: .72rem;
            color: var(--text3);
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-top: .2rem;
        }

        .stat-d {
            font-size: .72rem;
            color: var(--green);
            margin-top: .15rem;
        }

        /* ══ HERO BOTTOM TAB BAR ══ */
        .tab-bar {
            border-top: 1px solid var(--border);
            margin-top: 0;
            background: transparent;
        }

        .tab-bar-inner {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 2.5rem;
            display: flex;
            gap: 0;
            overflow-x: auto;
            scrollbar-width: none;
        }

        .tab-bar-inner::-webkit-scrollbar {
            display: none;
        }

        .tab {
            display: flex;
            align-items: center;
            gap: .5rem;
            padding: .9rem 1.1rem;
            font-size: .85rem;
            font-weight: 500;
            color: var(--text2);
            border-bottom: 2px solid transparent;
            cursor: pointer;
            white-space: nowrap;
            transition: color .18s, border-color .18s;
            background: none;
            border-top: none;
            border-left: none;
            border-right: none;
            font-family: var(--fb);
        }

        .tab:hover {
            color: var(--text);
        }

        .tab.active {
            color: var(--orange);
            border-bottom-color: var(--orange);
        }

        .tab-count {
            background: var(--bg4);
            color: var(--text3);
            font-size: .68rem;
            padding: .1rem .45rem;
            border-radius: 999px;
        }

        .tab.active .tab-count {
            background: var(--og15);
            color: var(--orange);
        }

        /* ══ TOOLBAR ══ */
        .toolbar {
            position: sticky;
            top: 62px;
            z-index: 150;
            background: rgba(11, 16, 24, .92);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--border);
        }

        .toolbar-inner {
            max-width: 1300px;
            margin: 0 auto;
            padding: .7rem 2.5rem;
            display: flex;
            align-items: center;
            gap: .75rem;
        }

        .search-wrap {
            display: flex;
            align-items: center;
            gap: .55rem;
            background: var(--bg3);
            border: 1px solid var(--border);
            padding: .5rem .9rem;
            border-radius: 8px;
            flex: 1;
            max-width: 400px;
            transition: border-color .2s, box-shadow .2s;
        }

        .search-wrap:focus-within {
            border-color: var(--og40);
            box-shadow: 0 0 0 3px var(--og06);
        }

        .search-wrap svg {
            color: var(--text3);
            flex-shrink: 0;
        }

        .search-wrap input {
            background: none;
            border: none;
            outline: none;
            color: var(--text);
            font-family: var(--fb);
            font-size: .875rem;
            flex: 1;
        }

        .search-wrap input::placeholder {
            color: var(--text3);
        }

        .toolbar-sep {
            flex: 1;
        }

        .sort-wrap {
            display: flex;
            align-items: center;
            gap: .5rem;
            background: var(--bg3);
            border: 1px solid var(--border);
            padding: .45rem .85rem;
            border-radius: 8px;
        }

        .sort-wrap svg {
            color: var(--text3);
        }

        .sort-wrap select {
            background: none;
            border: none;
            outline: none;
            color: var(--text2);
            font-family: var(--fb);
            font-size: .82rem;
            cursor: pointer;
        }

        .sort-wrap select option {
            background: var(--bg3);
        }

        .btn-new {
            display: flex;
            align-items: center;
            gap: .5rem;
            background: var(--orange);
            border: none;
            color: #fff;
            font-family: var(--fd);
            font-weight: 700;
            font-size: .875rem;
            padding: .55rem 1.3rem;
            border-radius: 8px;
            cursor: pointer;
            letter-spacing: .02em;
            white-space: nowrap;
            transition: background .18s, transform .15s, box-shadow .18s;
            box-shadow: 0 4px 16px rgba(232, 97, 10, .3);
        }

        .btn-new:hover {
            background: var(--orange2);
            transform: translateY(-1px);
            box-shadow: 0 6px 24px rgba(232, 97, 10, .45);
        }

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

        /* ══ LAYOUT ══ */
        .layout {
            position: relative;
            z-index: 1;
            max-width: 1300px;
            margin: 0 auto;
            padding: 1.75rem 2.5rem 5rem;
            display: grid;
            grid-template-columns: 200px 1fr 220px;
            gap: 1.5rem;
        }

        /* ══ LEFT SIDEBAR ══ */
        .sidebar-l {
            position: sticky;
            top: 116px;
            height: fit-content;
        }

        .side-title {
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--text3);
            padding: .25rem .5rem;
            margin-bottom: .4rem;
        }

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

        .cat-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: .52rem .75rem;
            border-radius: 8px;
            cursor: pointer;
            transition: background .15s, color .15s;
            font-size: .84rem;
            color: var(--text2);
            background: none;
            border: none;
            font-family: var(--fb);
            text-align: left;
            gap: .5rem;
        }

        .cat-btn:hover {
            background: var(--bg3);
            color: var(--text);
        }

        .cat-btn.active {
            background: var(--og10);
            color: var(--orange);
            box-shadow: inset 2px 0 0 var(--orange);
        }

        .cat-left {
            display: flex;
            align-items: center;
            gap: .6rem;
        }

        .cat-emoji {
            font-size: .9rem;
        }

        .cat-pill {
            font-size: .65rem;
            background: var(--bg4);
            color: var(--text3);
            padding: .12rem .45rem;
            border-radius: 999px;
            flex-shrink: 0;
        }

        .cat-btn.active .cat-pill {
            background: var(--og15);
            color: var(--orange);
        }

        /* activity bar */
        .cat-activity {
            height: 3px;
            border-radius: 2px;
            background: var(--bg4);
            margin: .1rem .75rem .35rem;
            overflow: hidden;
        }

        .cat-activity-fill {
            height: 100%;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--orange), var(--orange2));
            transition: width .6s ease;
        }

        /* ══ MAIN CONTENT ══ */
        .main {}

        /* PINNED THREAD */
        .pinned-wrap {
            background: linear-gradient(135deg, rgba(232, 97, 10, .08), rgba(232, 97, 10, .04));
            border: 1px solid var(--og40);
            border-radius: var(--r2);
            padding: 1.1rem 1.25rem;
            margin-bottom: 1.25rem;
            position: relative;
            overflow: hidden;
        }

        .pinned-wrap::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: linear-gradient(to bottom, var(--orange), transparent);
        }

        .pinned-label {
            display: flex;
            align-items: center;
            gap: .4rem;
            font-size: .68rem;
            font-weight: 700;
            color: var(--orange);
            letter-spacing: .1em;
            text-transform: uppercase;
            margin-bottom: .6rem;
        }

        .pinned-title {
            font-family: var(--fd);
            font-weight: 700;
            font-size: .95rem;
            color: var(--text);
            margin-bottom: .35rem;
            line-height: 1.3;
        }

        .pinned-meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: .75rem;
            color: var(--text3);
        }

        .pinned-meta span {
            display: flex;
            align-items: center;
            gap: .3rem;
        }

        /* THREAD LIST */
        .thread-list {
            display: flex;
            flex-direction: column;
        }

        .thread {
            display: grid;
            grid-template-columns: 40px 1fr 110px;
            gap: 1rem;
            align-items: start;
            padding: 1rem 1.1rem;
            border: 1px solid var(--border);
            border-bottom: none;
            background: var(--bg2);
            transition: background .15s, border-color .15s;
            text-decoration: none;
            color: inherit;
            position: relative;
        }

        .thread:first-child {
            border-radius: var(--r2) var(--r2) 0 0;
        }

        .thread:last-child {
            border-bottom: 1px solid var(--border);
            border-radius: 0 0 var(--r2) var(--r2);
        }

        .thread:hover {
            background: var(--bg3);
        }

        .thread:hover .thread-title {
            color: #fff;
        }

        /* new indicator */
        .thread.is-new::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 50%;
            background: var(--orange);
            border-radius: 0 2px 2px 0;
        }

        .thread.is-new {
            border-left-color: var(--og40);
        }

        /* Avatar */
        .av {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--fd);
            font-weight: 800;
            font-size: .85rem;
            flex-shrink: 0;
            cursor: default;
        }

        .av-a {
            background: linear-gradient(135deg, #e8610a, #ff9a56);
            color: #fff;
        }

        .av-b {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            color: #fff;
        }

        .av-c {
            background: linear-gradient(135deg, #22c55e, #4ade80);
            color: #fff;
        }

        .av-d {
            background: linear-gradient(135deg, #a855f7, #c084fc);
            color: #fff;
        }

        .av-e {
            background: linear-gradient(135deg, #ef4444, #f87171);
            color: #fff;
        }

        .av-f {
            background: linear-gradient(135deg, #14b8a6, #2dd4bf);
            color: #fff;
        }

        .av-g {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            color: #fff;
        }

        .av-h {
            background: linear-gradient(135deg, #ec4899, #f472b6);
            color: #fff;
        }

        /* Thread body */
        .thread-body {}

        .thread-top {
            display: flex;
            align-items: flex-start;
            gap: .5rem;
            margin-bottom: .3rem;
            flex-wrap: wrap;
        }

        .thread-title {
            font-family: var(--fd);
            font-weight: 700;
            font-size: .92rem;
            line-height: 1.3;
            color: var(--text);
            transition: color .15s;
            flex: 1;
            min-width: 0;
        }

        /* Status badges */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: .28rem;
            font-size: .63rem;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            padding: .18rem .52rem;
            border-radius: 4px;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .b-solved {
            background: rgba(34, 197, 94, .1);
            color: var(--green);
            border: 1px solid rgba(34, 197, 94, .2);
        }

        .b-open {
            background: rgba(239, 68, 68, .1);
            color: var(--red);
            border: 1px solid rgba(239, 68, 68, .2);
        }

        .b-hot {
            background: rgba(245, 158, 11, .1);
            color: var(--gold);
            border: 1px solid rgba(245, 158, 11, .2);
        }

        .b-pin {
            background: var(--og10);
            color: var(--orange);
            border: 1px solid var(--og40);
        }

        .b-new {
            background: rgba(96, 165, 250, .1);
            color: var(--blue);
            border: 1px solid rgba(96, 165, 250, .2);
        }

        .thread-excerpt {
            font-size: .8rem;
            color: var(--text2);
            margin-bottom: .55rem;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .thread-meta {
            display: flex;
            align-items: center;
            gap: .9rem;
            font-size: .73rem;
            color: var(--text3);
        }

        .thread-meta span {
            display: flex;
            align-items: center;
            gap: .3rem;
        }

        .cat-tag {
            font-size: .65rem;
            font-weight: 600;
            padding: .14rem .48rem;
            border-radius: 4px;
            border: 1px solid var(--border);
            color: var(--text3);
        }

        /* participanst avatars */
        .participants {
            display: flex;
            margin-top: .45rem;
        }

        .p-av {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1.5px solid var(--bg2);
            margin-left: -4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--fd);
            font-size: .48rem;
            font-weight: 800;
            color: #fff;
        }

        .p-av:first-child {
            margin-left: 0;
        }

        /* Thread stats */
        .thread-stats {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: .4rem;
            flex-shrink: 0;
        }

        .replies-count {
            display: flex;
            align-items: center;
            gap: .35rem;
            font-size: .8rem;
            color: var(--text2);
        }

        .replies-count strong {
            font-family: var(--fd);
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--text);
        }

        .views-count {
            font-size: .72rem;
            color: var(--text3);
            display: flex;
            align-items: center;
            gap: .28rem;
        }

        .last-reply {
            font-size: .7rem;
            color: var(--text3);
            text-align: right;
            line-height: 1.35;
        }

        .last-reply strong {
            color: var(--text2);
            display: block;
            font-size: .72rem;
        }

        /* ══ RIGHT SIDEBAR ══ */
        .sidebar-r {
            position: sticky;
            top: 116px;
            height: fit-content;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .widget {
            background: var(--bg3);
            border: 1px solid var(--border);
            border-radius: var(--r2);
            padding: 1.1rem 1.1rem;
            overflow: hidden;
        }

        .widget-title {
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--text3);
            margin-bottom: .9rem;
            display: flex;
            align-items: center;
            gap: .4rem;
        }

        /* online users */
        .online-grid {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
        }

        .on-av {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--fd);
            font-size: .68rem;
            font-weight: 800;
            color: #fff;
            position: relative;
            cursor: default;
            transition: transform .15s;
        }

        .on-av:hover {
            transform: scale(1.15);
            z-index: 2;
        }

        .on-dot {
            position: absolute;
            bottom: 1px;
            right: 1px;
            width: 9px;
            height: 9px;
            background: var(--green);
            border-radius: 50%;
            border: 2px solid var(--bg3);
        }

        /* top users */
        .top-user {
            display: flex;
            align-items: center;
            gap: .7rem;
            margin-bottom: .7rem;
        }

        .top-user:last-child {
            margin-bottom: 0;
        }

        .top-rank {
            font-family: var(--fd);
            font-weight: 800;
            font-size: .8rem;
            color: var(--text3);
            width: 16px;
            flex-shrink: 0;
            text-align: center;
        }

        .top-rank.gold-rank {
            color: var(--gold);
        }

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

        .top-name {
            font-size: .82rem;
            font-weight: 600;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .top-replies {
            font-size: .7rem;
            color: var(--text3);
        }

        .top-bar {
            width: 100%;
            height: 3px;
            background: var(--bg4);
            border-radius: 2px;
            margin-top: .3rem;
            overflow: hidden;
        }

        .top-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--orange), var(--orange2));
            border-radius: 2px;
        }

        /* recent activity */
        .activity-item {
            display: flex;
            gap: .7rem;
            padding: .6rem 0;
            border-bottom: 1px solid var(--border);
            align-items: flex-start;
        }

        .activity-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .activity-icon {
            width: 28px;
            height: 28px;
            border-radius: 7px;
            background: var(--bg4);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: .85rem;
        }

        .activity-text {
            font-size: .77rem;
            color: var(--text2);
            line-height: 1.4;
        }

        .activity-text strong {
            color: var(--text);
        }

        .activity-time {
            font-size: .68rem;
            color: var(--text3);
            margin-top: .15rem;
            display: block;
        }

        /* tag cloud */
        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
        }

        .tag {
            font-size: .72rem;
            padding: .25rem .6rem;
            border-radius: 6px;
            border: 1px solid var(--border);
            color: var(--text2);
            cursor: pointer;
            transition: border-color .18s, color .18s, background .18s;
        }

        .tag:hover {
            border-color: var(--og40);
            color: var(--orange);
            background: var(--og06);
        }

        /* ══ PAGINATION ══ */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: .4rem;
            margin-top: 1.5rem;
        }

        .pg {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg3);
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: .82rem;
            color: var(--text2);
            cursor: pointer;
            font-family: var(--fb);
            transition: all .18s;
        }

        .pg:hover {
            border-color: var(--og40);
            color: var(--text);
        }

        .pg.active {
            background: var(--orange);
            border-color: var(--orange);
            color: #fff;
            font-weight: 700;
        }

        .pg.wide {
            width: auto;
            padding: 0 1rem;
            gap: .4rem;
        }

        /* ══ MODAL ══ */
        .overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .75);
            backdrop-filter: blur(8px);
            z-index: 300;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .overlay.open {
            display: flex;
        }

        .modal {
            background: var(--bg3);
            border: 1px solid var(--border2);
            border-radius: 16px;
            width: 100%;
            max-width: 660px;
            box-shadow: var(--sh), 0 0 80px rgba(232, 97, 10, .08);
            animation: mIn .25s cubic-bezier(.34, 1.56, .64, 1);
        }

        @keyframes mIn {
            from {
                opacity: 0;
                transform: scale(.94)translateY(12px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .modal-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.4rem 1.6rem 1rem;
            border-bottom: 1px solid var(--border);
        }

        .modal-head h3 {
            font-family: var(--fd);
            font-weight: 700;
            font-size: 1.15rem;
        }

        .modal-close {
            background: var(--bg4);
            border: none;
            color: var(--text2);
            width: 32px;
            height: 32px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .18s, color .18s;
        }

        .modal-close:hover {
            background: var(--bg5);
            color: var(--text);
        }

        .modal-body {
            padding: 1.4rem 1.6rem;
        }

        .fl {
            margin-bottom: 1.1rem;
        }

        .fl-label {
            display: block;
            font-size: .75rem;
            font-weight: 600;
            color: var(--text2);
            margin-bottom: .4rem;
            letter-spacing: .05em;
            text-transform: uppercase;
        }

        .fl-input,
        .fl-select,
        .fl-ta {
            width: 100%;
            background: var(--bg2);
            border: 1px solid var(--border);
            color: var(--text);
            font-family: var(--fb);
            font-size: .9rem;
            padding: .65rem 1rem;
            border-radius: 8px;
            outline: none;
            transition: border-color .2s, box-shadow .2s;
        }

        .fl-input:focus,
        .fl-select:focus,
        .fl-ta:focus {
            border-color: var(--og40);
            box-shadow: 0 0 0 3px var(--og06);
        }

        .fl-input::placeholder,
        .fl-ta::placeholder {
            color: var(--text3);
        }

        .fl-select option {
            background: var(--bg3);
        }

        .fl-ta {
            min-height: 150px;
            resize: vertical;
            line-height: 1.6;
        }

        /* mini toolbar for textarea */
        .editor-bar {
            display: flex;
            gap: .3rem;
            padding: .5rem .75rem;
            background: var(--bg2);
            border: 1px solid var(--border);
            border-bottom: none;
            border-radius: 8px 8px 0 0;
        }

        .fl-ta {
            border-radius: 0 0 8px 8px;
        }

        .ed-btn {
            background: none;
            border: 1px solid transparent;
            color: var(--text2);
            width: 30px;
            height: 28px;
            border-radius: 5px;
            cursor: pointer;
            font-size: .8rem;
            font-family: var(--fd);
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s, color .15s, border-color .15s;
        }

        .ed-btn:hover {
            background: var(--bg4);
            color: var(--text);
            border-color: var(--border);
        }

        .modal-tags {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
            margin-top: .6rem;
        }

        .modal-tag {
            font-size: .75rem;
            padding: .25rem .65rem;
            border-radius: 6px;
            border: 1px solid var(--border);
            color: var(--text2);
            cursor: pointer;
            transition: all .18s;
        }

        .modal-tag:hover,
        .modal-tag.sel {
            border-color: var(--orange);
            color: var(--orange);
            background: var(--og06);
        }

        .modal-foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.6rem 1.4rem;
            border-top: 1px solid var(--border);
        }

        .modal-hint {
            font-size: .75rem;
            color: var(--text3);
        }

        .modal-actions {
            display: flex;
            gap: .65rem;
        }

        .btn-cancel {
            background: none;
            border: 1px solid var(--border);
            color: var(--text2);
            font-family: var(--fb);
            font-size: .875rem;
            padding: .55rem 1.2rem;
            border-radius: 8px;
            cursor: pointer;
            transition: background .18s;
        }

        .btn-cancel:hover {
            background: var(--bg4);
        }

        .btn-post {
            background: var(--orange);
            border: none;
            color: #fff;
            font-family: var(--fd);
            font-weight: 700;
            font-size: .875rem;
            padding: .55rem 1.5rem;
            border-radius: 8px;
            cursor: pointer;
            letter-spacing: .02em;
            transition: background .18s, transform .15s;
            box-shadow: 0 4px 14px rgba(232, 97, 10, .35);
        }

        .btn-post:hover {
            background: var(--orange2);
            transform: translateY(-1px);
        }

        /* ══ EMPTY STATE ══ */
        .empty {
            text-align: center;
            padding: 4rem 2rem;
            display: none;
        }

        .empty.show {
            display: block;
        }

        .empty-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            opacity: .4;
        }

        .empty p {
            color: var(--text2);
            font-size: .9rem;
        }

        /* ══ TOAST ══ */
        .toast {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 400;
            background: var(--bg3);
            border: 1px solid var(--green);
            color: var(--text);
            padding: .8rem 1.3rem;
            border-radius: 10px;
            font-size: .875rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: .6rem;
            box-shadow: var(--sh);
            transform: translateY(80px);
            opacity: 0;
            transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .35s;
        }

        .toast.show {
            transform: translateY(0);
            opacity: 1;
        }

        /* ══ FOOTER ══ */
        footer {
            border-top: 1px solid var(--border);
            padding: 1.5rem 2.5rem;
            text-align: center;
            font-size: .78rem;
            color: var(--text3);
            position: relative;
            z-index: 1;
        }

        footer a {
            color: var(--orange);
            text-decoration: none;
        }

        /* ══ ANIMATIONS ══ */
        .fade-up {
            opacity: 0;
            transform: translateY(14px);
            animation: fu .5s ease forwards;
        }

        @keyframes fu {
            to {
                opacity: 1;
                transform: none;
            }
        }

        .fd1 {
            animation-delay: .04s
        }

        .fd2 {
            animation-delay: .09s
        }

        .fd3 {
            animation-delay: .14s
        }

        .fd4 {
            animation-delay: .19s
        }

        .fd5 {
            animation-delay: .24s
        }

        .fd6 {
            animation-delay: .29s
        }

        .fd7 {
            animation-delay: .34s
        }

        .fd8 {
            animation-delay: .39s
        }

        /* ══ RESPONSIVE ══ */
        @media(max-width:1100px) {
            .layout {
                grid-template-columns: 180px 1fr
            }

            .sidebar-r {
                display: none
            }
        }

        @media(max-width:860px) {
            .layout {
                grid-template-columns: 1fr
            }

            .sidebar-l {
                display: none
            }

            .thread {
                grid-template-columns: 36px 1fr
            }

            .thread-stats {
                display: none
            }
        }

        @media(max-width:600px) {
            nav {
                padding: 0 1rem
            }

            .toolbar-inner,
            .tab-bar-inner {
                padding-left: 1rem;
                padding-right: 1rem
            }

            .layout {
                padding: 1.25rem 1rem 4rem
            }

            .hero {
                padding: 3rem 1rem 0
            }

            .nav-links {
                display: none
            }

            .hero-stats {
                flex-direction: row;
                flex-wrap: wrap
            }
        }

        /* ══════════════════════════════════════════
   MEJORAS CSS — Estilo retimbrasur.com
   Colocar después de todos los estilos base
══════════════════════════════════════════ */

        /* ── TOKENS EXTENDIDOS ── */
        :root {
            --glow-sm: 0 0 12px rgba(232, 97, 10, .25);
            --glow-md: 0 0 24px rgba(232, 97, 10, .3);
            --glow-lg: 0 0 40px rgba(232, 97, 10, .2);
            --glow-red: 0 0 18px rgba(239, 68, 68, .45);
            --glow-red-lg: 0 0 32px rgba(239, 68, 68, .35);
            --transition-smooth: cubic-bezier(.23, 1, .32, 1);
            --sh-elevated: 0 8px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
        }

        /* ── TIPOGRAFÍA REFINADA ── */
        body {
            font-size: 14.5px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            letter-spacing: .01em;
        }

        .hero h1 {
            letter-spacing: -.04em;
            text-shadow: 0 2px 30px rgba(232, 97, 10, .12);
        }

        .hero-desc {
            font-size: .95rem;
            line-height: 1.7;
            font-weight: 400;
            letter-spacing: .015em;
        }

        .hero-label {
            font-size: .65rem;
            letter-spacing: .14em;
            border: 1px solid rgba(232, 97, 10, .35);
            box-shadow: var(--glow-sm);
        }

        .widget-title {
            font-size: .66rem;
            letter-spacing: .14em;
            font-weight: 800;
        }

        .side-title {
            font-weight: 800;
            letter-spacing: .14em;
        }

        .thread-title {
            font-size: .93rem;
            letter-spacing: -.01em;
        }

        .stat-n {
            font-size: 1.9rem;
            text-shadow: 0 0 20px rgba(232, 97, 10, .25);
        }

        /* ── LOGO HOVER — Réplica de retimbrasur.com ──
   Normal: llama gris/blanca (grayscale+brightness+contrast) + drop-shadow naranja tenue
   Hover grupo: scale(1.05)
   Hover llama: grayscale(0) → vuelve color naranja real + glow intensificado
── */
        .logo {
            transition: transform .3s ease;
        }

        .logo:hover {
            transform: scale(1.05);
        }

        .logo:hover .logo-flame {
            filter: brightness(1) contrast(1) grayscale(0) drop-shadow(0 0 10px rgba(255, 107, 53, .5)) drop-shadow(0 0 22px rgba(255, 107, 53, .25));
            transform: scale(1.05);
        }

        .logo-text {
            transition: text-shadow .3s ease;
        }

        .logo:hover .logo-text {
            text-shadow: 0 0 12px rgba(255, 107, 53, .3);
        }

        /* ── NAV REFINAMIENTO ── */
        nav {
            height: 60px;
            border-bottom: 1px solid rgba(255, 255, 255, .05);
            box-shadow: 0 1px 24px rgba(0, 0, 0, .35);
        }

        .nav-links a {
            font-weight: 500;
            letter-spacing: .02em;
            transition: color .25s var(--transition-smooth),
                background .25s var(--transition-smooth),
                transform .2s var(--transition-smooth);
        }

        .nav-links a:hover {
            transform: translateY(-1px);
            color: #fff;
        }

        .nav-links a.active {
            text-shadow: 0 0 12px rgba(232, 97, 10, .35);
        }

        .nav-user {
            transition: border-color .25s, box-shadow .25s, transform .2s var(--transition-smooth);
        }

        .nav-user:hover {
            border-color: var(--og40);
            box-shadow: var(--glow-sm);
            transform: translateY(-1px);
        }

        .btn-admin {
            transition: border-color .25s, background .25s, box-shadow .25s, transform .2s var(--transition-smooth);
        }

        .btn-admin:hover {
            transform: translateY(-1px);
            box-shadow: var(--glow-sm);
        }

        /* ── HERO GLOW REFORZADO ── */
        .hero-mesh {
            background:
                radial-gradient(ellipse 55% 75% at 10% 50%, rgba(232, 97, 10, .09) 0%, transparent 70%),
                radial-gradient(ellipse 35% 55% at 90% 20%, rgba(232, 97, 10, .065) 0%, transparent 70%),
                radial-gradient(ellipse 30% 40% at 50% 100%, rgba(232, 97, 10, .04) 0%, transparent 60%);
        }

        /* ── STAT CARDS ── */
        .stat-card {
            border-radius: var(--r2);
            transition: border-color .3s, box-shadow .3s, transform .25s var(--transition-smooth);
        }

        .stat-card:hover {
            box-shadow: var(--glow-sm);
            transform: translateY(-2px);
        }

        /* ── BOTONES PRINCIPALES ── */
        .btn-new {
            letter-spacing: .03em;
            transition: background .2s, transform .2s var(--transition-smooth), box-shadow .3s;
            position: relative;
            overflow: hidden;
        }

        .btn-new::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, .15) 0%, transparent 50%);
            opacity: 0;
            transition: opacity .3s;
        }

        .btn-new:hover::after {
            opacity: 1;
        }

        .btn-new:hover {
            box-shadow: 0 6px 28px rgba(232, 97, 10, .5), var(--glow-md);
        }

        .btn-post {
            transition: background .2s, transform .2s var(--transition-smooth), box-shadow .3s;
            position: relative;
            overflow: hidden;
        }

        .btn-post::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, .12) 0%, transparent 50%);
            opacity: 0;
            transition: opacity .3s;
        }

        .btn-post:hover::after {
            opacity: 1;
        }

        .btn-post:hover {
            box-shadow: 0 6px 22px rgba(232, 97, 10, .45), var(--glow-md);
        }

        /* ── THREADS ── */
        .thread {
            transition: background .2s var(--transition-smooth),
                border-color .2s,
                box-shadow .25s,
                transform .2s var(--transition-smooth);
        }

        .thread:hover {
            box-shadow: inset 0 0 0 1px rgba(232, 97, 10, .08), 0 2px 16px rgba(0, 0, 0, .2);
            transform: translateX(2px);
        }

        .thread:hover .thread-title {
            text-shadow: 0 0 8px rgba(255, 255, 255, .08);
        }

        .thread.is-new::before {
            box-shadow: 0 0 8px rgba(232, 97, 10, .4);
        }

        /* ── BADGES GLOW ── */
        .b-solved {
            box-shadow: 0 0 8px rgba(34, 197, 94, .1);
        }

        .b-open {
            box-shadow: 0 0 8px rgba(239, 68, 68, .1);
        }

        .b-hot {
            box-shadow: 0 0 8px rgba(245, 158, 11, .1);
        }

        .b-pin {
            box-shadow: 0 0 8px rgba(232, 97, 10, .15);
        }

        .b-new {
            box-shadow: 0 0 8px rgba(96, 165, 250, .1);
        }

        /* ── PINNED THREAD ── */
        .pinned-wrap {
            transition: box-shadow .3s, border-color .3s, transform .25s var(--transition-smooth);
        }

        .pinned-wrap:hover {
            box-shadow: 0 0 30px rgba(232, 97, 10, .1), var(--glow-sm);
            border-color: rgba(232, 97, 10, .5);
            transform: translateY(-1px);
        }

        .pinned-wrap::before {
            box-shadow: 0 0 10px rgba(232, 97, 10, .3);
        }

        /* ── SIDEBAR CATEGORÍAS ── */
        .cat-btn {
            transition: background .2s var(--transition-smooth),
                color .2s,
                transform .15s var(--transition-smooth),
                box-shadow .2s;
            border-radius: 8px;
        }

        .cat-btn:hover {
            transform: translateX(3px);
        }

        .cat-btn.active {
            box-shadow: 0 0 12px rgba(232, 97, 10, .1);
        }

        /* ── WIDGETS ── */
        .widget {
            transition: border-color .3s, box-shadow .3s, transform .25s var(--transition-smooth);
            border-radius: 14px;
        }

        .widget:hover {
            border-color: rgba(255, 255, 255, .1);
            box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
        }

        /* ── ONLINE AVATARS ── */
        .on-av {
            transition: transform .25s var(--transition-smooth), box-shadow .25s;
        }

        .on-av:hover {
            transform: scale(1.2);
            box-shadow: 0 0 14px rgba(0, 0, 0, .3);
        }

        /* ── TAG CLOUD ── */
        .tag {
            transition: border-color .2s, color .2s, background .2s, transform .2s var(--transition-smooth), box-shadow .2s;
        }

        .tag:hover {
            transform: translateY(-1px) scale(1.03);
            box-shadow: var(--glow-sm);
        }

        /* ── PAGINATION ── */
        .pg {
            transition: all .2s var(--transition-smooth);
        }

        .pg:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
        }

        .pg.active {
            box-shadow: 0 2px 14px rgba(232, 97, 10, .4);
        }

        /* ── SEARCH FOCUS GLOW ── */
        .search-wrap:focus-within {
            box-shadow: 0 0 0 3px var(--og06), var(--glow-sm);
        }

        /* ── SORT ── */
        .sort-wrap {
            transition: border-color .2s, box-shadow .2s;
        }

        .sort-wrap:hover {
            border-color: rgba(255, 255, 255, .15);
        }

        /* ── MODAL REFINAMIENTO ── */
        .modal {
            box-shadow: var(--sh-elevated), 0 0 80px rgba(232, 97, 10, .08);
            border-radius: 18px;
        }

        .modal-close {
            transition: background .2s, color .2s, transform .2s var(--transition-smooth);
        }

        .modal-close:hover {
            transform: rotate(90deg) scale(1.1);
        }

        /* ── INPUT FOCUS ── */
        .fl-input:focus,
        .fl-select:focus,
        .fl-ta:focus {
            box-shadow: 0 0 0 3px var(--og06), 0 0 16px rgba(232, 97, 10, .1);
        }

        /* ── MODAL TAGS ── */
        .modal-tag {
            transition: all .2s var(--transition-smooth);
        }

        .modal-tag:hover,
        .modal-tag.sel {
            transform: translateY(-1px);
            box-shadow: 0 0 10px rgba(232, 97, 10, .15);
        }

        /* ── ACTIVITY ITEMS ── */
        .activity-item {
            transition: background .2s, transform .15s var(--transition-smooth);
            padding-left: .3rem;
            padding-right: .3rem;
            border-radius: 6px;
            margin: 0 -.3rem;
        }

        .activity-item:hover {
            background: rgba(255, 255, 255, .03);
            transform: translateX(2px);
        }

        /* ── TOP USERS ── */
        .top-user {
            transition: transform .15s var(--transition-smooth);
            padding: .25rem .3rem;
            border-radius: 6px;
            margin: 0 -.3rem;
        }

        .top-user:hover {
            transform: translateX(3px);
            background: rgba(255, 255, 255, .02);
        }

        /* ── LIVE STRIP PULSE ── */
        .live-strip {
            transition: border-color .3s, box-shadow .3s;
        }

        .live-strip:hover {
            border-color: rgba(34, 197, 94, .25);
            box-shadow: 0 0 16px rgba(34, 197, 94, .08);
        }

        /* ── TABS ── */
        .tab {
            transition: color .2s, border-color .2s, background .2s var(--transition-smooth);
            border-radius: 0;
            position: relative;
        }

        .tab:hover {
            background: rgba(255, 255, 255, .03);
        }

        .tab.active {
            text-shadow: 0 0 10px rgba(232, 97, 10, .3);
        }

        /* ── TOAST GLOW ── */
        .toast {
            box-shadow: var(--sh-elevated), 0 0 20px rgba(34, 197, 94, .15);
        }

        /* ── FOOTER ── */
        footer a {
            transition: color .2s, text-shadow .2s;
        }

        footer a:hover {
            color: var(--orange2);
            text-shadow: 0 0 10px rgba(232, 97, 10, .3);
        }

        /* ── EDITOR BUTTONS ── */
        .ed-btn {
            transition: background .15s, color .15s, border-color .15s, transform .15s var(--transition-smooth);
        }

        .ed-btn:hover {
            transform: scale(1.08);
        }

        /* ── AVATAR HOVER ── */
        .av {
            transition: transform .2s var(--transition-smooth), box-shadow .25s;
        }

        .thread:hover .av {
            transform: scale(1.05);
            box-shadow: 0 0 12px rgba(0, 0, 0, .3);
        }

        /* ── REPLIES COUNT ── */
        .replies-count strong {
            transition: color .2s;
        }

        .thread:hover .replies-count strong {
            color: var(--orange);
        }

        /* ── CANCEL BUTTON ── */
        .btn-cancel {
            transition: background .2s, border-color .2s, transform .2s var(--transition-smooth);
        }

        .btn-cancel:hover {
            transform: translateY(-1px);
            border-color: rgba(255, 255, 255, .15);
        }

        /* ── LIVE AVATARS ── */
        .live-avatar {
            transition: transform .2s var(--transition-smooth);
        }

        .live-strip:hover .live-avatar {
            transform: scale(1.1);
        }

        /* ── GLOBAL SELECTION ── */
        ::selection {
            background: rgba(232, 97, 10, .3);
            color: #fff;
        }

        /* ── KEYFRAMES ADICIONALES ── */
        @keyframes subtlePulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(232, 97, 10, .2);
            }

            50% {
                box-shadow: 0 0 0 4px rgba(232, 97, 10, .05);
            }
        }

        .hero-label {
            animation: subtlePulse 3s ease-in-out infinite;
        }

        /* ── Accesibilidad y reducción de movimiento ── */
        .skip-link {
            position: absolute;
            left: -999px;
            top: auto;
            width: 1px;
            height: 1px;
            overflow: hidden
        }

        .skip-link:focus {
            left: 16px;
            top: 16px;
            width: auto;
            height: auto;
            z-index: 9999;
            background: #ff6b35;
            color: #fff;
            padding: 10px 14px;
            border-radius: 10px;
            font-weight: 700;
            text-decoration: none
        }

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: .001ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
                transition-duration: .001ms !important
            }

            .ticker-inner {
                animation: none !important;
                transform: none !important;
                white-space: normal;
                flex-wrap: wrap
            }
        }

        @media(max-width:600px) {
            .logo-text {
                display: inline-block;
                font-size: 1.08rem
            }
        }


        /* ══════════════════════════════════════════
           UNIFICACIÓN VISUAL CON NOTICIAS/RIPCI
        ══════════════════════════════════════════ */
        :root {
            --bg: #020617;
            --bg2: #0f172a;
            --bg3: rgba(15, 23, 42, .72);
            --bg4: #1e293b;
            --bg5: #334155;
            --orange: #ff6b35;
            --orange2: #ea580c;
            --orange-d: #ea580c;
            --og15: rgba(255, 107, 53, .15);
            --og10: rgba(255, 107, 53, .10);
            --og06: rgba(255, 107, 53, .06);
            --og40: rgba(255, 107, 53, .40);
            --text: #e2e8f0;
            --text2: #94a3b8;
            --text3: #64748b;
            --border: rgba(255, 255, 255, .08);
            --border2: rgba(255, 255, 255, .12);
            --blue: #60a5fa;
            --green: #4ade80;
            --gold: #facc15;
            --fd: 'Outfit', Inter, sans-serif;
            --fb: 'Outfit', Inter, sans-serif;
            --sh: 0 20px 40px rgba(0, 0, 0, .4)
        }

        body {
            background: #020617;
            color: #e2e8f0;
            font-family: 'Outfit', Inter, sans-serif
        }

        body::after {
            display: none
        }

        .text-brand-inline {
            color: #ff6b35;
            margin-right: .35rem
        }

        nav {
            height: 80px;
            padding: 0 2.5rem;
            background: rgba(2, 6, 23, .82);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            box-shadow: none
        }

        .logo {
            gap: .75rem
        }

        .logo-flame {
            height: 36px;
            filter: grayscale(1) brightness(.8) contrast(.9)
        }

        .logo-text {
            font-family: 'Outfit', Inter, sans-serif;
            font-size: 1.18rem;
            letter-spacing: -.03em
        }

        .logo:hover .logo-flame {
            filter: grayscale(0) brightness(1.2) saturate(1.5) drop-shadow(0 0 12px rgba(255, 69, 58, .8)) drop-shadow(0 0 24px rgba(255, 118, 74, .45))
        }

        .nav-links {
            gap: 2rem
        }

        .nav-links a {
            color: #cbd5e1;
            font-weight: 500;
            font-size: 1rem;
            padding: 0;
            background: transparent;
            border-radius: 0
        }

        .nav-links a:hover {
            color: #fff;
            background: transparent;
            transform: none
        }

        .nav-links a.active {
            color: #ff6b35;
            font-weight: 700;
            border-bottom: 1px solid #ff6b35;
            padding-bottom: 2px
        }

        .nav-user {
            background: rgba(15, 23, 42, .72);
            border-color: rgba(255, 255, 255, .08)
        }

        .btn-admin,
        .btn-new,
        .btn-post {
            background: #ff6b35;
            border-color: #ff6b35;
            color: #fff;
            border-radius: 12px;
            font-family: 'Outfit', Inter, sans-serif;
            font-weight: 700;
            box-shadow: 0 8px 22px rgba(255, 107, 53, .24)
        }

        .btn-admin:hover,
        .btn-new:hover,
        .btn-post:hover {
            background: #ea580c;
            border-color: #ea580c;
            box-shadow: 0 10px 30px rgba(255, 107, 53, .32)
        }

        .hero {
            padding: 4rem 2.5rem 0;
            position: relative;
            z-index: 1
        }

        .hero-grid {
            display: none
        }

        .hero-mesh {
            background: none
        }

        .hero-label {
            background: rgba(255, 107, 53, .10);
            border: 1px solid rgba(255, 107, 53, .20);
            color: #ff6b35;
            box-shadow: none
        }

        .hero h1 {
            font-family: 'Outfit', Inter, sans-serif;
            color: #fff;
            text-shadow: none
        }

        .hero h1 em {
            color: #ff6b35
        }

        .hero-desc {
            color: #94a3b8;
            font-weight: 400
        }

        .live-strip,
        .stat-card,
        .toolbar,
        .tab-bar,
        .widget,
        .pinned-wrap,
        .thread,
        .modal,
        .sort-wrap,
        .search-wrap {
            background: rgba(15, 23, 42, .62);
            border: 1px solid rgba(255, 255, 255, .08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px)
        }

        .stat-card,
        .widget,
        .pinned-wrap,
        .modal {
            border-radius: 16px
        }

        .thread {
            border-color: rgba(255, 255, 255, .08)
        }

        .thread:hover,
        .widget:hover,
        .stat-card:hover,
        .pinned-wrap:hover {
            background: rgba(30, 41, 59, .72);
            border-color: rgba(255, 107, 53, .25);
            box-shadow: 0 20px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(255, 107, 53, .06)
        }

        .toolbar {
            position: sticky;
            top: 80px;
            background: rgba(2, 6, 23, .86);
            border-bottom: 1px solid rgba(255, 255, 255, .06)
        }

        .tab-bar {
            border-top: 1px solid rgba(255, 255, 255, .06);
            border-bottom: 1px solid rgba(255, 255, 255, .04);
            background: rgba(2, 6, 23, .42)
        }

        .tab {
            border-bottom: 2px solid transparent;
            color: #94a3b8;
            font-family: 'Outfit', Inter, sans-serif
        }

        .tab i,
        .cat-emoji i,
        .widget-title i,
        .activity-icon i {
            color: #ff6b35
        }

        .tab.active {
            color: #ff6b35;
            border-bottom-color: #ff6b35;
            text-shadow: none
        }

        .tab-count,
        .cat-pill {
            background: rgba(255, 255, 255, .06);
            color: #94a3b8
        }

        .tab.active .tab-count,
        .cat-btn.active .cat-pill {
            background: rgba(255, 107, 53, .15);
            color: #ff6b35
        }

        .layout {
            position: relative;
            z-index: 1
        }

        .cat-btn {
            color: #94a3b8;
            border-radius: 12px
        }

        .cat-btn:hover {
            background: rgba(255, 255, 255, .06);
            color: #e2e8f0
        }

        .cat-btn.active {
            background: rgba(255, 107, 53, .12);
            color: #ff6b35;
            box-shadow: inset 2px 0 0 #ff6b35
        }

        .cat-activity-fill,
        .top-bar-fill {
            background: linear-gradient(90deg, #ff6b35, #ea580c)
        }

        .pinned-wrap::before,
        .thread.is-new::before {
            background: linear-gradient(to bottom, #ff6b35, transparent)
        }

        .pinned-label,
        .stat-n,
        .thread:hover .replies-count strong,
        footer a {
            color: #ff6b35
        }

        .thread-title,
        .pinned-title,
        .modal-head h3 {
            font-family: 'Outfit', Inter, sans-serif
        }

        .badge {
            border-radius: 999px;
            font-family: 'Outfit', Inter, sans-serif
        }

        .b-solved {
            background: rgba(34, 197, 94, .12);
            color: #4ade80;
            border-color: rgba(34, 197, 94, .3)
        }

        .b-open {
            background: rgba(239, 68, 68, .15);
            color: #f87171;
            border-color: rgba(239, 68, 68, .3)
        }

        .b-hot {
            background: rgba(234, 179, 8, .12);
            color: #facc15;
            border-color: rgba(234, 179, 8, .3)
        }

        .b-pin {
            background: rgba(255, 107, 53, .15);
            color: #ff6b35;
            border-color: rgba(255, 107, 53, .3)
        }

        .b-new {
            background: rgba(59, 130, 246, .15);
            color: #60a5fa;
            border-color: rgba(59, 130, 246, .3)
        }

        .search-wrap input,
        .sort-wrap select,
        .fl-input,
        .fl-select,
        .fl-ta {
            font-family: 'Outfit', Inter, sans-serif
        }

        .activity-icon {
            color: #ff6b35;
            background: rgba(255, 107, 53, .10);
            border: 1px solid rgba(255, 107, 53, .15)
        }

        .tag {
            border-radius: 999px;
            background: rgba(255, 255, 255, .04)
        }

        footer {
            background: rgba(15, 23, 42, .5);
            border-top: 1px solid rgba(255, 255, 255, .05)
        }

        @media(max-width:1100px) {
            nav {
                padding: 0 1.25rem
            }

            .nav-links {
                display: none
            }

            .toolbar {
                top: 80px
            }
        }

        @media(max-width:600px) {

            html,
            body {
                width: 100%;
                max-width: 100%;
                overflow-x: hidden;
            }

            body {
                font-size: 14px;
            }

            nav {
                height: 62px;
                padding: 0 1rem;
            }

            .logo-text,
            .nav-user {
                display: none;
            }

            .hero {
                padding: 2rem 1.25rem 0;
            }

            .hero-inner {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                text-align: center;
            }

            .hero-label {
                font-size: .62rem;
                padding: .25rem .75rem;
            }

            h1 {
                font-size: 2.25rem;
            }

            .hero-desc {
                font-size: .95rem;
            }

            .live-strip {
                justify-content: center;
                flex-wrap: wrap;
            }

            .thread,
            .thread-card,
            .pinned-wrap,
            .widget,
            .modal,
            .toolbar-inner,
            .layout {
                max-width: 100%;
            }

            .hero-stats {
                grid-template-columns: 1fr;
                gap: .75rem;
                width: 100%;
            }

            .stat-card {
                padding: 1rem;
            }

            .tab-bar {
                padding: 0 1rem;
            }

            .toolbar {
                position: relative;
                top: 0;
                padding: 1.25rem 1rem;
                border-top: 1px solid var(--border);
            }

            .toolbar-inner {
                flex-direction: column;
                gap: 1rem;
            }

            .search-wrap {
                width: 100%;
                max-width: none;
            }

            .toolbar-sep {
                display: none;
            }

            .sort-wrap {
                width: 100%;
            }

            .sort-wrap select {
                width: 100%;
            }

            .btn-new {
                width: 100%;
                justify-content: center;
                padding: .75rem;
            }

            .layout {
                grid-template-columns: 1fr;
                padding: 0 1rem 3rem;
                gap: 0;
            }

            .sidebar-l {
                display: none;
                /* Las categorías ya están en el tab-bar superior */
            }

            .pinned-wrap {
                padding: 1.25rem;
                margin-bottom: 1.5rem;
            }

            .pinned-title {
                font-size: 1.1rem;
            }

            .thread-card {
                padding: 1.25rem;
                flex-direction: column;
                gap: 1rem;
            }

            .th-main {
                gap: .75rem;
            }

            .th-title {
                font-size: 1rem;
            }

            .th-stats {
                width: 100%;
                justify-content: flex-start;
                padding-top: .75rem;
                border-top: 1px solid var(--border);
            }

            .modal {
                width: 95%;
                padding: 1.5rem;
                max-height: 90vh;
                margin: 5vh auto;
            }

            .modal-head h3 {
                font-size: 1.25rem;
            }

            .editor-bar {
                flex-wrap: wrap;
                gap: .25rem;
            }

            .modal-foot {
                flex-direction: column-reverse;
                gap: .75rem;
            }

            .modal-foot button {
                width: 100%;
            }
        }

/* Fase 2A: limpieza técnica del foro */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.forum-beta-notice {
    max-width: 1180px;
    margin: 1.25rem auto 0;
    padding: .8rem 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 1px solid rgba(245, 158, 11, .25);
    border-radius: 14px;
    background: rgba(245, 158, 11, .06);
    color: #f59e0b;
    font-size: .9rem;
    font-weight: 600;
}

.thread {
    width: 100%;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.thread:focus-visible,
.modal-tag:focus-visible,
.tab:focus-visible,
.cat-btn:focus-visible,
.btn-new:focus-visible,
.btn-cancel:focus-visible,
.btn-post:focus-visible,
.modal-close:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

.modal-tag {
    font: inherit;
    cursor: pointer;
}

/* Fase 4C.4 · Pulido visual conservador del foro beta */
.forum-beta-notice {
  position: relative;
  box-shadow: 0 14px 34px rgba(245, 158, 11, .08);
}

.forum-beta-notice::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 5px rgba(245, 158, 11, .12);
  flex: 0 0 auto;
}

.thread-card,
.thread,
.pinned-wrap,
.sidebar-card,
.hero-card,
.stat-card,
.modal {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.thread:hover,
.pinned-wrap:hover,
.sidebar-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 107, 53, .22);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .30);
}

.thread-title,
.pinned-title,
.hero h1 {
  text-wrap: balance;
}

.btn-new,
.btn-admin,
.nav-user,
.tab,
.cat-btn,
.thread,
.modal-close,
.btn-cancel,
.btn-post {
  min-height: 42px;
}

@media (max-width: 768px) {
  .forum-beta-notice {
    width: min(100% - 2rem, 1180px);
    align-items: flex-start;
    font-size: .86rem;
  }

  .thread {
    min-height: 64px;
  }
}

@media (max-width: 520px) {
  .forum-beta-notice {
    border-radius: 16px;
  }

  .hero-inner,
  .layout {
    width: min(100% - 1rem, 1180px);
  }
}


/* Fase 4C.5 · Delimitación elegante de foro beta/demostrativo */
.forum-demo-boundary {
  max-width: 1180px;
  margin: .75rem auto 0;
  padding: .85rem 1rem;
  border: 1px solid rgba(96, 165, 250, .22);
  border-radius: 16px;
  background: rgba(96, 165, 250, .07);
  color: #dbeafe;
  font-size: .9rem;
  line-height: 1.55;
  box-shadow: 0 14px 34px rgba(96, 165, 250, .06);
}

.modal-demo-badge {
  display: inline-flex;
  align-items: center;
  margin-left: .4rem;
  padding: .18rem .48rem;
  border: 1px solid rgba(250, 204, 21, .25);
  border-radius: 999px;
  background: rgba(250, 204, 21, .08);
  color: #fde68a;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.modal-demo-note {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-bottom: 1rem;
  padding: .8rem .9rem;
  border: 1px solid rgba(96, 165, 250, .22);
  border-radius: 14px;
  background: rgba(96, 165, 250, .07);
  color: #dbeafe;
  font-size: .9rem;
  line-height: 1.5;
}

.btn-post-demo {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

@media (max-width: 768px) {
  .forum-demo-boundary {
    width: min(100% - 2rem, 1180px);
    font-size: .86rem;
  }
}


/* Fase 4C.6 - Ajustes responsive y accesibilidad visual */
.thread, .discussion-card, .modal-content {
  overflow-wrap: anywhere;
}

.thread, .tab, .cat-btn, .btn-new, .btn-cancel, .btn-post, .modal-close {
  touch-action: manipulation;
}

@media (max-width: 640px) {
  .forum-tabs, .category-filters {
    gap: .55rem;
  }

  .tab, .cat-btn {
    min-height: 44px;
  }

  .modal-content {
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
  }
}


        /* Fase 4F.1 · Navegación móvil coherente en foro */
        .forum-nav-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 14px;
            background: rgba(15, 23, 42, .72);
            color: #e2e8f0;
            cursor: pointer;
            transition: border-color .2s ease, color .2s ease, background-color .2s ease, box-shadow .2s ease;
            flex: 0 0 auto;
        }

        .forum-nav-toggle:hover,
        .forum-nav-toggle:focus-visible {
            color: #fff;
            border-color: rgba(255, 107, 53, .35);
            box-shadow: 0 0 0 3px rgba(255,107,53,.12);
            outline: none;
        }

        .forum-mobile-menu {
            display: none;
            width: min(1200px, calc(100% - 40px));
            margin: 0 auto 1rem;
            padding: .5rem 1.1rem 1rem;
            border: 1px solid rgba(255,255,255,.08);
            border-top: 0;
            border-radius: 0 0 18px 18px;
            background: rgba(2, 6, 23, .94);
            box-shadow: 0 18px 34px rgba(0, 0, 0, .22);
        }

        .forum-mobile-menu a {
            display: block;
            padding: .8rem 0;
            color: var(--text2);
            text-decoration: none;
            font-weight: 600;
            border-top: 1px solid rgba(255,255,255,.06);
        }

        .forum-mobile-menu a:first-child {
            border-top: 0;
        }

        .forum-mobile-menu a:hover,
        .forum-mobile-menu a.active {
            color: var(--orange);
        }

        .forum-mobile-menu.hidden {
            display: none;
        }

        @media(max-width:860px) {
            nav {
                gap: .8rem;
            }

            .nav-links,
            .nav-right {
                display: none;
            }

            .forum-nav-toggle {
                display: inline-flex;
            }

            .forum-mobile-menu:not(.hidden) {
                display: grid;
            }
        }

        @media(max-width:600px) {
            nav {
                padding: .9rem 1rem;
            }
        }

        /* Fase 4F.2 · Corrección final de marca visible en móvil */
        @media(max-width:600px) {
            nav .logo {
                min-width: 0;
                gap: .5rem;
            }

            nav .logo-text {
                display: inline-block !important;
                font-size: 1.08rem;
                letter-spacing: -0.4px;
                white-space: nowrap;
            }

            nav .logo-flame {
                height: 30px;
                width: auto;
                flex: 0 0 auto;
            }

            nav .nav-user {
                display: none !important;
            }
        }