:root {
                    --font-main: 'Inter', sans-serif;
                    --bg-primary: #ffffff;
                    --bg-secondary: #f1f5f9;
                    --bg-tertiary: #e2e8f0;
                    --text-primary: #0f172a;
                    --text-secondary: #475569;
                    --text-muted: #64748b;
                    --border-color: #cbd5e1;
                    --accent-primary: #4f46e5;
                    --accent-primary-hover: #4338ca;
                    --accent-secondary: #ec4899;
                    --shadow-color: 220, 13%, 69%;
                }

                html[data-theme='dark'] {
                    --bg-primary: #0b1120;
                    --bg-secondary: #1e293b;
                    --bg-tertiary: #334155;
                    --text-primary: #f1f5f9;
                    --text-secondary: #94a3b8;
                    --text-muted: #64748b;
                    --border-color: #334155;
                    --accent-primary: #6366f1;
                    --accent-primary-hover: #4f46e5;
                    --accent-secondary: #f472b6;
                    --shadow-color: 220, 40%, 2%;
                }

                /* ========================================
                Asosiy Uslublar (Base Styles)
                ========================================
                */
                *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
                html { scroll-behavior: smooth; }
                body {
                    font-family: var(--font-main);
                    background-color: var(--bg-secondary);
                    color: var(--text-primary);
                    min-height: 100vh;
                    display: flex;
                    flex-direction: column;
                    transition: background-color 0.3s ease, color 0.3s ease;
                }
                body.menu-open {
                    overflow: hidden; /* Mobil menyu ochilganda orqa fonni scroll qilishni to'xtatish */
                }
                a { color: inherit; text-decoration: none; }
                ul { list-style: none; }
                img { max-width: 100%; display: block; }

                /* YANGI: SVG Ikonkalar uchun umumiy stil */
                .icon {
                    width: 1.25rem; /* 20px */
                    height: 1.25rem;
                    stroke-width: 2;
                    vertical-align: middle;
                }

                /* ========================================
                Saytning Asosiy Tuzilmasi (Layout)
                ========================================
                */
                .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; }
                .site-header {
                    background-color: var(--bg-primary);
                    border-bottom: 1px solid var(--border-color);
                    padding: 16px 0;
                    position: sticky; top: 0; z-index: 50;
                    box-shadow: 0 2px 4px -1px hsla(var(--shadow-color), .1);
                    transition: background-color 0.3s ease, border-color 0.3s ease;
                }
                .site-header .container { display: flex; justify-content: space-between; align-items: center; }
                .main-layout { display: grid; grid-template-columns: 250px 1fr 280px; gap: 24px; flex-grow: 1; padding-top: 24px; }
                
                .left-sidebar {
                    background-color: var(--bg-primary);
                    border-radius: 12px;
                    padding: 20px;
                    height: fit-content;
                    position: sticky;
                    top: 100px;
                    transition: background-color 0.3s ease;
                }
                .right-sidebar {
                    background-color: var(--bg-primary);
                    border-radius: 12px;
                    padding: 20px;
                    height: fit-content;
                    position: sticky;
                    top: 100px;
                    transition: background-color 0.3s ease;
                }
                
                .site-footer {
                    background-color: var(--bg-primary);
                    color: var(--text-secondary);
                    border-top: 1px solid var(--border-color);
                    padding: 24px 0; margin-top: auto;
                    text-align: center; font-size: 14px;
                    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
                }

                /* Mobil menyu uchun overlay */
                .mobile-menu-overlay {
                    position: fixed;
                    inset: 0;
                    background-color: rgba(0, 0, 0, 0.5);
                    z-index: 99;
                    opacity: 0;
                    visibility: hidden;
                    transition: opacity 0.3s ease, visibility 0.3s ease;
                }
                .mobile-menu-overlay.active {
                    opacity: 1;
                    visibility: visible;
                }

                /* ========================================
                Komponentlar (Components)
                ========================================
                */
                /* Header */
                .logo { font-size: 24px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--accent-primary); }
                .search-bar { position: relative; width: 400px; }
                .search-bar input { width: 100%; padding: 10px 16px 10px 40px; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--bg-secondary); color: var(--text-primary); font-size: 16px; transition: all 0.2s ease; }
                .search-bar input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 20%, transparent); }
                .search-bar .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); width: 18px; height: 18px; }
                .header-actions { display: flex; align-items: center; gap: 16px; }
                .theme-switcher { display: flex; background-color: var(--bg-secondary); border-radius: 8px; padding: 4px; }
                .theme-switcher button { background-color: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 6px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
                .theme-switcher button .icon { width: 18px; height: 18px; }
                .theme-switcher button.active { background-color: var(--bg-primary); color: var(--text-primary); box-shadow: 0 1px 2px 0 hsla(var(--shadow-color), .05); }
                .user-profile { display: flex; align-items: center; gap: 12px; }
                .user-profile img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
                .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text-primary); }
                
                /* Sidebarlar */
                .sidebar-block { margin-bottom: 24px; }
                .sidebar-title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 12px; }
                .nav-list a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; font-weight: 500; margin-bottom: 4px; transition: background-color 0.2s ease, color 0.2s ease; }
                .nav-list a:hover { background-color: var(--bg-secondary); }
                .nav-list a.active { background-color: color-mix(in srgb, var(--accent-primary) 10%, transparent); color: var(--accent-primary); font-weight: 600; }
                .nav-list .icon { color: var(--text-muted); font-size: 18px; }
                .nav-list a:hover .icon, .nav-list a.active .icon { color: var(--accent-primary); }

                /* Asosiy Kontent */
                .main-content .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
                .page-header h1 { font-size: 28px; font-weight: 700; }
                .btn { padding: 10px 20px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; }
                .btn .icon { width: 18px; height: 18px; }
                .btn-primary { background-color: var(--accent-primary); color: white; }
                .btn-primary:hover { background-color: var(--accent-primary-hover); }
                .thread-card { background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; display: flex; gap: 16px; margin-bottom: 16px; transition: all 0.2s ease; }
                .thread-card:hover { border-color: var(--accent-primary); box-shadow: 0 4px 12px -2px hsla(var(--shadow-color), .1); transform: translateY(-2px); }
                .thread-card .author-avatar img { width: 48px; height: 48px; border-radius: 50%; }
                .thread-content { flex-grow: 1; }
                .thread-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
                .thread-title a:hover { color: var(--accent-primary); }
                .thread-meta { font-size: 14px; color: var(--text-secondary); display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
                .thread-meta .tag { background-color: var(--bg-secondary); padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; }
                .thread-meta .tag.pink { background-color: color-mix(in srgb, var(--accent-secondary) 15%, transparent); color: var(--accent-secondary); }
                .thread-stats { display: flex; gap: 24px; align-items: center; text-align: center; color: var(--text-secondary); font-size: 14px; min-width: 150px; }
                .stat-item { display: flex; flex-direction: column; align-items: center; }
                .stat-item .count { font-size: 18px; font-weight: 600; color: var(--text-primary); }

                /* ========================================
                Adaptivlik (Responsiveness)
                ========================================
                */
                @media (max-width: 1200px) {
                    .main-layout { grid-template-columns: 220px 1fr; }
                    .right-sidebar { display: none; }
                    .search-bar { width: 300px; }
                }
                @media (max-width: 992px) {
                    .search-bar { display: none; }
                }
                @media (max-width: 768px) {
                    .main-layout { grid-template-columns: 1fr; }
                    .mobile-menu-toggle { display: block; }
                    .header-actions .user-profile span { display: none; }
                    .container { padding: 0 16px; }
                    .page-header h1 { font-size: 24px; }
                    .thread-card { flex-direction: column; }
                    .thread-stats { margin-top: 16px; justify-content: flex-start; gap: 24px; }
                    
                    .left-sidebar {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 280px;
                        height: 100%;
                        z-index: 100;
                        transform: translateX(-100%);
                        transition: transform 0.3s ease-in-out;
                        border-radius: 0 12px 12px 0;
                        overflow-y: auto;
                    }
                    .left-sidebar.active {
                        transform: translateX(0);
                    }
                }

                /* YANGI: Profil menyusi uchun stillar */
                        .profile-wrapper { position: relative; }
                        .user-profile { display: flex; align-items: center; gap: 12px; cursor: pointer; }
                        .user-profile img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
                        .profile-dropdown {
                            position: absolute;
                            top: calc(100% + 12px);
                            right: 0;
                            width: 220px;
                            background-color: var(--bg-primary);
                            border: 1px solid var(--border-color);
                            border-radius: 12px;
                            box-shadow: var(--shadow-lg);
                            padding: 8px;
                            z-index: 60;
                            opacity: 0;
                            visibility: hidden;
                            transform: translateY(10px);
                            transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
                        }
                        .profile-dropdown.active {
                            opacity: 1;
                            visibility: visible;
                            transform: translateY(0);
                        }
                        .dropdown-item {
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            padding: 10px 12px;
                            border-radius: 8px;
                            font-size: 14px;
                            font-weight: 500;
                            transition: background-color 0.2s ease;
                        }
                        .dropdown-item:hover {
                            background-color: var(--bg-secondary);
                        }
                        .dropdown-item .icon {
                            width: 18px;
                            height: 18px;
                            color: var(--text-secondary);
                        }
                        .dropdown-divider {
                            height: 1px;
                            background-color: var(--border-color);
                            margin: 8px 0;
                        }
                        .dropdown-item.logout {
                            color: #ef4444; /* red-500 */
                        }
                        html[data-theme='dark'] .dropdown-item.logout {
                            color: #f87171; /* red-400 */
                        }
                        .dropdown-item.logout:hover {
                            background-color: color-mix(in srgb, #ef4444 10%, transparent);
                        }
                        html[data-theme='dark'] .dropdown-item.logout:hover {
                            background-color: color-mix(in srgb, #f87171 15%, transparent);
                        }
                        .dropdown-item.logout .icon {
                            color: currentColor;
                        }
                        
.nav-icon {
    font-size: 18px;
}