/* Payable — yagona CSS fayli.
   Har bir sahifa uslubi body[data-page="..."] bilan cheklangan (spetsifiklik o'zgarmaydi: :where). */

/* ── umumiy @keyframes ── */
@keyframes fadeInPage {
            to { opacity: 1; }
        }
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeUp-2 {
            from { opacity:0; transform:translateY(22px); }
            to   { opacity:1; transform:translateY(0); }
        }
@keyframes fadeUp-3 { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp-4 { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp-5 {
            from { opacity:0; transform:translateY(16px); }
            to   { opacity:1; transform:translateY(0); }
        }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bi{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes td{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes sh-2{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes fadeIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes popUp{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes bubIn{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes tdot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes heartPop {
            0%{transform:scale(1)} 40%{transform:scale(1.4)} 70%{transform:scale(0.9)} 100%{transform:scale(1)}
        }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes fadeInUpProfile {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
@keyframes popAnim {
            0%   { transform: scale(1); }
            40%  { transform: scale(1.45); }
            70%  { transform: scale(0.88); }
            100% { transform: scale(1); }
        }
@keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-24px)
            }

            to {
                opacity: 1;
                transform: translateX(0)
            }
        }
@keyframes scrollTrack {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
@keyframes creatorRiseIn {
            from { opacity: 0; filter: blur(13px); transform: translateY(38px) scale(.975); }
            to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
        }
@keyframes meshFlow { to { background-position: 46px 46px, 46px 46px; } }
@keyframes slideInLeft { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }
@keyframes modalIn{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
@keyframes pulse-2{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes slideInRight { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }

/* ── about ── */
:root:where(:has(body[data-page="about"])) { 
            --primary: #4b68ff; 
            --bg: #f4f5f0; 
            --nav-height: 65px;
        }
        :where(html:has(body[data-page="about"])), :where(body[data-page="about"]), :where(body[data-page="about"]) * { box-sizing: border-box; margin: 0; padding: 0; }
        
        html:where(:has(body[data-page="about"])) { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
        
        body:where([data-page="about"]) { 
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif; 
            background: var(--bg); 
            color: #101615; 
            padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 10px));
            padding-left: 0;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
            opacity: 0;
            animation: fadeInPage 0.5s ease-out forwards;
        }

        @media (min-width: 768px) {
            body:where([data-page="about"]) { 
                padding-left: 72px; 
                padding-bottom: 0; 
                transition: padding-left 0.6s cubic-bezier(0.35, 0, 0.65, 1) !important, opacity 0.4s ease;
            }
            body:where([data-page="about"]):has(.sidebar:hover) {
                padding-left: 220px;
            }
        }

        /* ── BACK BUTTON ── */
        :where(body[data-page="about"]) .back-btn {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 10px 20px; background: white;
            border: 1.5px solid #dde2dc; border-radius: 999px;
            font-size: 13px; font-weight: 800; color: #4d5654;
            text-decoration: none; cursor: pointer;
            transition: all 0.25s; margin-bottom: 24px;
        }
        :where(body[data-page="about"]) .back-btn:hover { border-color: #4b68ff; color: #4b68ff; transform: translateX(-4px); }

        :where(body[data-page="about"]) .hero-gradient {
            background: radial-gradient(circle at top right, #e6eaff, transparent 60%),
                        radial-gradient(circle at bottom left, #f5f3ff, transparent 60%);
        }
        :where(body[data-page="about"]) .footer-bg { background: white; border-top: 1px solid #eceee6; }

        /* KARTALAR UCHUN STIL */
        :where(body[data-page="about"]) .scard {
            background: white;
            border-radius: 16px;
            border: 1px solid #eceee6;
            transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
            animation: fadeUp-2 0.5s ease both;
        }
        :where(body[data-page="about"]) .scard:hover {
            box-shadow: 0 8px 32px -8px rgba(75, 104, 255, 0.18);
            border-color: rgba(75, 104, 255, 0.3);
            transform: translateY(-4px);
        }

        /* ── Sidebar ── */
        :where(body[data-page="about"]) .sidebar {
            position: fixed; left: 0; top: 0; bottom: 0; width: 72px;
            background: white; border-right: 1px solid #eceee6;
            display: none; flex-direction: column; align-items: center;
            padding: 24px 0; z-index: 50; transition: width 0.6s cubic-bezier(0.35, 0, 0.65, 1); overflow: hidden;
            box-shadow: 4px 0 24px rgba(0,0,0,0.02);
        }
        @media (min-width: 768px) { :where(body[data-page="about"]) .sidebar { display: flex; } }
        :where(body[data-page="about"]) .sidebar:hover { width: 220px; }
        :where(body[data-page="about"]) .sidebar-logo {
            display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 900;
            letter-spacing: -0.05em; color: #4b68ff; padding: 0 20px; margin-bottom: 32px;
            white-space: nowrap; width: 100%; text-decoration: none;
        }
        :where(body[data-page="about"]) .sidebar-logo img { flex-shrink: 0; }
        :where(body[data-page="about"]) .sidebar-logo span { opacity: 0; transition: opacity 0.2s, transform 0.2s; transform: translateX(-10px); }
        :where(body[data-page="about"]) .sidebar:hover .sidebar-logo span { opacity: 1; transform: translateX(0); }
        
        :where(body[data-page="about"]) .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 10px; }
        :where(body[data-page="about"]) .sidebar-link {
            display: flex; align-items: center; gap: 14px; padding: 12px 14px;
            border-radius: 12px; color: #697371; font-size: 14px; font-weight: 700;
            text-decoration: none; white-space: nowrap; transition: all 0.2s;
        }
        :where(body[data-page="about"]) .sidebar-link:hover, :where(body[data-page="about"]) .sidebar-link.active { background: #eef0ff; color: #4b68ff; }
        :where(body[data-page="about"]) .sidebar-link svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="about"]) .sidebar-link span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="about"]) .sidebar:hover .sidebar-link span { opacity: 1; }
        
        :where(body[data-page="about"]) .sidebar-bottom { width: 100%; padding: 0 10px; display: flex; flex-direction: column; gap: 8px; }
        :where(body[data-page="about"]) .sidebar-btn {
            display: flex; align-items: center; gap: 12px; padding: 12px 14px;
            border-radius: 12px; font-size: 14px; font-weight: 700; white-space: nowrap;
            cursor: pointer; border: none; transition: all 0.2s; width: 100%;
        }
        :where(body[data-page="about"]) .sidebar-btn.signin { background: transparent; color: #697371; }
        :where(body[data-page="about"]) .sidebar-btn.signin:hover { background: #eceee6; color: #4b68ff; }
        :where(body[data-page="about"]) .sidebar-btn.start { background: #4b68ff; color: white; box-shadow: 0 4px 12px rgba(75,104,255,0.3); }
        :where(body[data-page="about"]) .sidebar-btn.start:hover { background: #3854e8; transform: translateY(-1px); }
        :where(body[data-page="about"]) .sidebar-btn svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="about"]) .sidebar-btn span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="about"]) .sidebar:hover .sidebar-btn span { opacity: 1; }

        /* ── Bottom Nav ── */
        :where(body[data-page="about"]) .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-height);
            background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(221, 226, 220, 0.8);
            display: flex; justify-content: space-around; align-items: center; z-index: 100;
            padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 24px rgba(0,0,0,0.04);
        }
        @media (min-width: 768px) { :where(body[data-page="about"]) .bottom-nav { display: none; } }
        :where(body[data-page="about"]) .bottom-nav-item {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            flex: 1; height: 100%; gap: 5px; color: #8b9390; text-decoration: none;
            position: relative; transition: color 0.3s ease;
        }
        :where(body[data-page="about"]) .bottom-nav-item.active { color: var(--primary); }
        :where(body[data-page="about"]) .bottom-nav-item svg { width: 22px; height: 22px; transition: transform 0.3s, stroke-width 0.3s; }
        :where(body[data-page="about"]) .bottom-nav-item.active svg { transform: translateY(-2px); stroke-width: 2.5; }
        :where(body[data-page="about"]) .bottom-nav-item span { font-size: 10px; font-weight: 700; transition: opacity 0.3s, transform 0.3s; }
        :where(body[data-page="about"]) .bottom-nav-indicator {
            position: absolute; top: 0; width: 32px; height: 3px; background: var(--primary);
            border-radius: 0 0 4px 4px; opacity: 0; transform: scaleX(0); transition: opacity 0.3s, transform 0.3s;
        }
        :where(body[data-page="about"]) .bottom-nav-item.active .bottom-nav-indicator { opacity: 1; transform: scaleX(1); }
    
        /* Site Switcher */
        :where(body[data-page="about"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="about"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="about"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="about"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="about"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="about"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="about"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="about"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="about"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="about"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="about"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="about"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="about"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="about"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="about"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── add-project ── */
:root:where(:has(body[data-page="add-project"])) {
            --primary: #4b68ff;
            --primary-dark: #3854e8;
            --bg: #f4f5f0;
            --border: #dde2dc;
            --text: #101615;
            --muted: #697371;
            --nav-height: 65px;
        }
        :where(html:has(body[data-page="add-project"])), :where(body[data-page="add-project"]), :where(body[data-page="add-project"]) * { box-sizing: border-box; margin: 0; padding: 0; }
        body:where([data-page="add-project"]) {
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            background: var(--bg); color: var(--text); min-height: 100vh;
            opacity: 0; transition: opacity 0.5s ease, padding-left 0.4s cubic-bezier(0.4,0,0.2,1);
            padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 10px));
            -webkit-tap-highlight-color: transparent; overflow-x: hidden;
        }
        body:where([data-page="add-project"]).loaded { opacity: 1; }
        @media (min-width: 768px) {
            body:where([data-page="add-project"]) { padding-left: 72px; padding-bottom: 0; }
            body:where([data-page="add-project"]):has(.sidebar:hover) { padding-left: 220px; }
        }

        /* Sidebar */
        :where(body[data-page="add-project"]) .sidebar {
            position: fixed; left: 0; top: 0; bottom: 0; width: 72px;
            background: white; border-right: 1px solid #eceee6;
            display: none; flex-direction: column; align-items: center;
            padding: 24px 0; z-index: 50;
            transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
            overflow: hidden;
        }
        @media (min-width: 768px) { :where(body[data-page="add-project"]) .sidebar { display: flex; } }
        :where(body[data-page="add-project"]) .sidebar:hover { width: 220px; box-shadow: 4px 0 24px rgba(0,0,0,0.04); }
        :where(body[data-page="add-project"]) .sidebar-logo {
            display: flex; align-items: center; gap: 12px;
            font-size: 20px; font-weight: 900; letter-spacing: -0.05em;
            color: #4b68ff; padding: 0 20px; margin-bottom: 32px;
            white-space: nowrap; width: 100%; text-decoration: none;
        }
        :where(body[data-page="add-project"]) .sidebar-logo img { flex-shrink: 0; }
        :where(body[data-page="add-project"]) .sidebar-logo span { opacity: 0; transition: opacity 0.2s, transform 0.2s; transform: translateX(-10px); }
        :where(body[data-page="add-project"]) .sidebar:hover .sidebar-logo span { opacity: 1; transform: translateX(0); }
        :where(body[data-page="add-project"]) .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 10px; }
        :where(body[data-page="add-project"]) .sidebar-link {
            display: flex; align-items: center; gap: 14px; padding: 12px 14px;
            border-radius: 12px; color: #697371; font-size: 14px; font-weight: 700;
            text-decoration: none; white-space: nowrap; transition: all 0.2s;
        }
        :where(body[data-page="add-project"]) .sidebar-link:hover, :where(body[data-page="add-project"]) .sidebar-link.active { background: #eef0ff; color: #4b68ff; }
        :where(body[data-page="add-project"]) .sidebar-link svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="add-project"]) .sidebar-link span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="add-project"]) .sidebar:hover .sidebar-link span { opacity: 1; }
        :where(body[data-page="add-project"]) .sidebar-bottom { width: 100%; padding: 0 10px; }
        :where(body[data-page="add-project"]) .sidebar-btn {
            display: flex; align-items: center; gap: 12px; padding: 12px 14px;
            border-radius: 12px; font-size: 14px; font-weight: 700; white-space: nowrap;
            cursor: pointer; border: none; transition: all 0.2s; width: 100%;
            background: transparent; color: #ef4444;
        }
        :where(body[data-page="add-project"]) .sidebar-btn:hover { background: #fff1f2; }
        :where(body[data-page="add-project"]) .sidebar-btn svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="add-project"]) .sidebar-btn span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="add-project"]) .sidebar:hover .sidebar-btn span { opacity: 1; }

        /* Bottom Nav */
        :where(body[data-page="add-project"]) .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-height);
            background: rgba(255,255,255,0.95); backdrop-filter: blur(16px);
            border-top: 1px solid rgba(221,226,220,0.8);
            display: flex; justify-content: space-around; align-items: center; z-index: 100;
            padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 24px rgba(0,0,0,0.04);
        }
        @media (min-width: 768px) { :where(body[data-page="add-project"]) .bottom-nav { display: none; } }
        :where(body[data-page="add-project"]) .bottom-nav-item {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            flex: 1; height: 100%; gap: 5px; color: #8b9390; text-decoration: none;
            position: relative; transition: color 0.3s;
        }
        :where(body[data-page="add-project"]) .bottom-nav-item.active { color: var(--primary); }
        :where(body[data-page="add-project"]) .bottom-nav-item svg { width: 22px; height: 22px; }
        :where(body[data-page="add-project"]) .bottom-nav-item.active svg { transform: translateY(-2px); stroke-width: 2.5; }
        :where(body[data-page="add-project"]) .bottom-nav-item span { font-size: 10px; font-weight: 700; }
        :where(body[data-page="add-project"]) .bottom-nav-indicator {
            position: absolute; top: 0; width: 32px; height: 3px;
            background: var(--primary); border-radius: 0 0 4px 4px;
            opacity: 0; transform: scaleX(0); transition: opacity 0.3s, transform 0.3s;
        }
        :where(body[data-page="add-project"]) .bottom-nav-item.active .bottom-nav-indicator { opacity: 1; transform: scaleX(1); }

        /* Layout: ikki ustun — desktop */
        :where(body[data-page="add-project"]) .page-layout {
            display: flex; min-height: 100vh; gap: 0;
        }

        /* Chap panel — branding (desktop) */
        :where(body[data-page="add-project"]) .brand-panel {
            display: none;
            width: 380px; flex-shrink: 0;
            background: #2a3fb8;
            position: sticky; top: 0; height: 100vh;
            flex-direction: column; justify-content: space-between;
            padding: 48px 40px; overflow: hidden;
        }
        @media (min-width: 900px) { :where(body[data-page="add-project"]) .brand-panel { display: flex; } }
        
        :where(body[data-page="add-project"]) .brand-logo-row {
            display: flex; align-items: center; gap: 12px;
            position: relative; z-index: 1;
        }
        :where(body[data-page="add-project"]) .brand-logo-img {
            width: 44px; height: 44px; border-radius: 14px;
            background: #ffffff;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        :where(body[data-page="add-project"]) .brand-name { font-size: 24px; font-weight: 900; color: white; letter-spacing: -0.5px; }
        :where(body[data-page="add-project"]) .brand-tagline { font-size: 12px; color: rgba(255,255,255,0.6); font-weight: 600; margin-top: 2px; }
        :where(body[data-page="add-project"]) .brand-middle { position: relative; z-index: 1; }
        :where(body[data-page="add-project"]) .brand-title {
            font-size: 32px; font-weight: 900; color: white;
            line-height: 1.2; letter-spacing: -0.8px; margin-bottom: 16px;
        }
        :where(body[data-page="add-project"]) .brand-desc { font-size: 14px; color: rgba(255,255,255,0.65); font-weight: 600; line-height: 1.6; }
        :where(body[data-page="add-project"]) .brand-features { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
        :where(body[data-page="add-project"]) .brand-feature {
            display: flex; align-items: center; gap: 12px;
            font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.85);
        }
        :where(body[data-page="add-project"]) .brand-feature-dot {
            width: 28px; height: 28px; border-radius: 8px;
            background: #2f49d4;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        :where(body[data-page="add-project"]) .brand-bottom { position: relative; z-index: 1; }
        :where(body[data-page="add-project"]) .brand-copyright { font-size: 11px; color: rgba(255,255,255,0.35); font-weight: 600; }

        /* O'ng panel — form */
        :where(body[data-page="add-project"]) .form-panel {
            flex: 1; min-width: 0;
            padding: 36px 24px 100px;
        }
        @media (min-width: 900px) { :where(body[data-page="add-project"]) .form-panel { padding: 48px 48px 80px; } }
        @media (min-width: 1400px) { :where(body[data-page="add-project"]) .form-panel { max-width: 760px; margin: 0 auto; } }

        :where(body[data-page="add-project"]) .page-header {
            display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
            animation: fadeUp-3 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        :where(body[data-page="add-project"]) .back-btn {
            width: 40px; height: 40px; border-radius: 12px;
            background: white; border: 1.5px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all 0.2s; flex-shrink: 0;
            text-decoration: none; color: var(--muted);
        }
        :where(body[data-page="add-project"]) .back-btn:hover { border-color: var(--primary); color: var(--primary); }

        /* Author pill */
        :where(body[data-page="add-project"]) .author-pill {
            display: flex; align-items: center; gap: 12px;
            background: white; border: 1.5px solid var(--border);
            border-radius: 16px; padding: 14px 18px; margin-bottom: 20px; width: 100%;
            animation: fadeUp-3 0.5s 0.05s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        :where(body[data-page="add-project"]) .author-avatar {
            width: 44px; height: 44px; border-radius: 13px;
            object-fit: cover; background: #e6eaff; flex-shrink: 0;
        }
        :where(body[data-page="add-project"]) .author-name { font-size: 15px; font-weight: 800; color: var(--text); }
        :where(body[data-page="add-project"]) .author-tag { font-size: 12px; color: var(--primary); font-weight: 700; }

        /* Form card */
        :where(body[data-page="add-project"]) .form-card {
            background: white; border-radius: 24px; border: 1px solid var(--border);
            padding: 28px 32px; margin-bottom: 16px; width: 100%;
            animation: fadeUp-3 0.5s 0.1s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        :where(body[data-page="add-project"]) .section-label {
            font-size: 10px; font-weight: 800; color: var(--muted);
            text-transform: uppercase; letter-spacing: 0.12em;
            margin-bottom: 16px; margin-top: 24px; padding-top: 24px;
            border-top: 1px solid var(--border);
            display: flex; align-items: center; gap: 6px;
        }
        :where(body[data-page="add-project"]) .section-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }
        :where(body[data-page="add-project"]) .field-label {
            font-size: 11px; font-weight: 800; color: var(--muted);
            text-transform: uppercase; letter-spacing: 0.1em;
            margin-bottom: 6px; display: block;
        }
        :where(body[data-page="add-project"]) .field-input {
            width: 100%; background: #f4f5f0; border: 1.5px solid var(--border);
            border-radius: 12px; padding: 13px 14px;
            font-family: inherit; font-weight: 700; font-size: 14px; color: var(--text);
            outline: none; transition: all 0.2s; resize: none;
        }
        :where(body[data-page="add-project"]) .field-input:focus { background: white; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(75,104,255,0.08); }

        /* Tab switcher: URL / Fayl */
        :where(body[data-page="add-project"]) .tab-switcher {
            display: flex; gap: 4px;
            background: #eceee6; border-radius: 10px; padding: 4px;
            margin-bottom: 12px;
        }
        :where(body[data-page="add-project"]) .tab-btn {
            flex: 1; padding: 8px 12px; border-radius: 8px; border: none;
            font-family: inherit; font-size: 12px; font-weight: 800;
            cursor: pointer; transition: all 0.2s; color: var(--muted); background: transparent;
        }
        :where(body[data-page="add-project"]) .tab-btn.active { background: white; color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

        /* File upload area */
        :where(body[data-page="add-project"]) .file-drop {
            border: 2px dashed var(--border); border-radius: 12px;
            padding: 28px 20px; text-align: center; cursor: pointer;
            transition: all 0.2s; background: #f4f5f0;
        }
        :where(body[data-page="add-project"]) .file-drop:hover, :where(body[data-page="add-project"]) .file-drop.dragover { border-color: var(--primary); background: #eef0ff; }
        :where(body[data-page="add-project"]) .file-drop input { display: none; }

        /* Warning box */
        :where(body[data-page="add-project"]) .warning-box {
            display: none;
            background: #fff7ed; border: 1.5px solid #fed7aa;
            border-radius: 14px; padding: 16px 18px; margin-top: 12px;
            animation: fadeUp-3 0.3s ease both;
        }
        :where(body[data-page="add-project"]) .warning-box.show { display: flex; gap: 12px; align-items: flex-start; }
        :where(body[data-page="add-project"]) .warning-icon {
            width: 32px; height: 32px; border-radius: 9px;
            background: #ffedd5; display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; margin-top: 1px;
        }
        :where(body[data-page="add-project"]) .warning-title { font-size: 13px; font-weight: 900; color: #9a3412; margin-bottom: 4px; }
        :where(body[data-page="add-project"]) .warning-text { font-size: 12px; font-weight: 600; color: #c2410c; line-height: 1.5; }

        /* Image preview */
        :where(body[data-page="add-project"]) .img-preview-wrap {
            margin-top: 10px; border-radius: 12px; overflow: hidden;
            border: 1.5px solid var(--border); display: none; aspect-ratio: 16/9; background: #eceee6;
        }
        :where(body[data-page="add-project"]) .img-preview-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

        /* File preview pill */
        :where(body[data-page="add-project"]) .file-pill {
            display: none; align-items: center; gap: 10px;
            background: #f0fdf4; border: 1.5px solid #bbf7d0;
            border-radius: 12px; padding: 10px 14px; margin-top: 10px;
        }
        :where(body[data-page="add-project"]) .file-pill.show { display: flex; }
        :where(body[data-page="add-project"]) .file-pill-name { font-size: 12px; font-weight: 800; color: #15803d; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        :where(body[data-page="add-project"]) .file-pill-remove { cursor: pointer; color: #dc2626; background: none; border: none; padding: 2px; flex-shrink: 0; }

        /* Submit */
        :where(body[data-page="add-project"]) .submit-section {
            display: flex; gap: 10px; width: 100%;
            animation: fadeUp-3 0.5s 0.15s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        :where(body[data-page="add-project"]) .btn-submit {
            flex: 1; background: var(--primary); color: white;
            padding: 15px 24px; border-radius: 14px;
            font-family: inherit; font-weight: 900; font-size: 15px;
            border: none; cursor: pointer; transition: all 0.3s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        :where(body[data-page="add-project"]) .btn-submit:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(75,104,255,0.4); }
        :where(body[data-page="add-project"]) .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        :where(body[data-page="add-project"]) .btn-cancel {
            background: #eceee6; color: var(--muted);
            padding: 15px 20px; border-radius: 14px;
            font-family: inherit; font-weight: 800; font-size: 14px;
            border: none; cursor: pointer; transition: all 0.2s;
            display: flex; align-items: center; gap: 6px; text-decoration: none;
        }
        :where(body[data-page="add-project"]) .btn-cancel:hover { background: #dde2dc; color: var(--text); }

        /* Toast */
        :where(body[data-page="add-project"]) .toast {
            position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
            background: #101615; color: white; padding: 14px 24px; border-radius: 14px;
            font-weight: 800; font-size: 13px; z-index: 300; opacity: 0;
            transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
            display: flex; align-items: center; gap: 8px; white-space: nowrap;
            box-shadow: 0 16px 40px -8px rgba(0,0,0,0.3); pointer-events: none;
        }
        :where(body[data-page="add-project"]) .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
        :where(body[data-page="add-project"]) .toast.success { background: #059669; }
        :where(body[data-page="add-project"]) .toast.error { background: #dc2626; }
        @media (min-width: 768px) { :where(body[data-page="add-project"]) .toast { bottom: 32px; } }

        :where(body[data-page="add-project"]) .spinner {
            width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.4);
            border-top-color: white; border-radius: 50%;
            animation: spin 0.7s linear infinite; flex-shrink: 0;
        }

        /* Upload progress */
        :where(body[data-page="add-project"]) .upload-progress {
            height: 4px; background: #dde2dc; border-radius: 99px; margin-top: 8px; display: none;
        }
        :where(body[data-page="add-project"]) .upload-progress-bar {
            height: 100%; background: linear-gradient(90deg, #4b68ff, #8b5cf6);
            border-radius: 99px; width: 0%; transition: width 0.3s ease;
        }

        /* ── Login-style redesign: chap forma / o'ng video panel ── */
        body[data-page="add-project"] { padding: 0; }
        @media (min-width: 768px) { body[data-page="add-project"], body[data-page="add-project"]:has(.sidebar:hover) { padding-left: 0; } }
        body[data-page="add-project"] .page-layout { min-height: 100vh; background: #fff; }
        body[data-page="add-project"] .form-panel { width: 100%; background: #fff; padding: 32px 20px 56px; display: flex; justify-content: center; }
        @media (min-width: 1024px) { body[data-page="add-project"] .form-panel { padding: 48px 48px 64px; } }
        body[data-page="add-project"] .form-inner { width: 100%; max-width: 520px; animation: slideInLeft 0.8s cubic-bezier(0.34,1.56,0.64,1) both; }
        body[data-page="add-project"] .wordmark { display: block; margin-bottom: 28px; font-size: 32px; font-weight: 900; letter-spacing: -0.03em; color: #0f172a; text-decoration: none; }
        body[data-page="add-project"] .wordmark span { color: #4b68ff; }
        body[data-page="add-project"] .page-title { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; }
        body[data-page="add-project"] .page-sub { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 2px; }
        body[data-page="add-project"] .back-btn { background: #eceee6; border-color: transparent; border-radius: 10px; }
        body[data-page="add-project"] .author-pill { background: #eceee6; border-color: transparent; border-radius: 10px; }
        body[data-page="add-project"] .form-card { background: transparent; border: none; border-radius: 0; padding: 0; margin-bottom: 20px; display: flex; flex-direction: column; gap: 14px; }
        body[data-page="add-project"] .form-card > div { margin-bottom: 0 !important; }
        body[data-page="add-project"] .field-input { background: #eceee6; border: 1.5px solid transparent; border-radius: 10px; padding: 16px 20px; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
        body[data-page="add-project"] .field-input:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(75,104,255,0.1); }
        body[data-page="add-project"] .tab-switcher { border-radius: 10px; padding: 5px; }
        body[data-page="add-project"] .tab-btn { border-radius: 8px; padding: 11px 12px; }
        body[data-page="add-project"] .file-drop { border-radius: 10px; background: #eceee6; border-color: #cfd5cc; }
        body[data-page="add-project"] .warning-box, body[data-page="add-project"] .file-pill, body[data-page="add-project"] .img-preview-wrap { border-radius: 10px; }
        body[data-page="add-project"] .btn-submit { background: var(--primary); border-radius: 10px; padding: 19px 24px; font-weight: 800; box-shadow: 0 10px 24px -8px rgba(75,104,255,0.45); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); }
        body[data-page="add-project"] .btn-cancel { border-radius: 10px; padding: 19px 22px; }
        body[data-page="add-project"] .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
        body[data-page="add-project"] .input-pill { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 10px; background: #eceee6; border: 1.5px solid transparent; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
        body[data-page="add-project"] .input-pill:focus-within { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(75,104,255,0.1); }
        body[data-page="add-project"] .input-pill.pill-top { align-items: flex-start; }
        body[data-page="add-project"] .input-pill.pill-top .pill-icon { margin-top: 2px; }
        body[data-page="add-project"] .pill-icon { width: 20px; height: 20px; flex-shrink: 0; color: #94a3b8; }
        body[data-page="add-project"] .pill-input { flex: 1; min-width: 0; width: 100%; background: transparent; border: none; outline: none; resize: none; font-family: inherit; font-size: 14px; font-weight: 700; color: #334155; appearance: none; -moz-appearance: textfield; }
        body[data-page="add-project"] .pill-input::placeholder { color: #94a3b8; font-weight: 700; }
        body[data-page="add-project"] .pill-suffix { font-size: 12px; font-weight: 800; color: var(--muted); }
        body[data-page="add-project"] .section-label { margin-top: 28px; padding-top: 0; border-top: none; }

        /* O'ng video panel */
        body[data-page="add-project"] .brand-panel { display: none; position: relative; width: 50%; height: 100vh; position: sticky; top: 0; padding: 0; overflow: hidden; background: #000; isolation: isolate; flex-shrink: 0; }
        @media (min-width: 1024px) { body[data-page="add-project"] .brand-panel { display: block; } }
        body[data-page="add-project"] video.bg-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; }
        body[data-page="add-project"] .video-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(56,84,232,0.85) 0%, rgba(16,22,21,0.9) 100%); z-index: 1; mix-blend-mode: multiply; }
        body[data-page="add-project"] .live-mesh {
            position: absolute; inset: -15%; z-index: 2; opacity: 0.52;
            background-image: linear-gradient(rgba(147,197,253,0.24) 1px, transparent 1px), linear-gradient(90deg, rgba(147,197,253,0.24) 1px, transparent 1px);
            background-size: 46px 46px;
            -webkit-mask-image: radial-gradient(ellipse 68% 58% at 50% 48%, #000 15%, transparent 78%);
            mask-image: radial-gradient(ellipse 68% 58% at 50% 48%, #000 15%, transparent 78%);
            transform: perspective(650px) rotateX(62deg) scale(1.55) translateY(11%);
            transform-origin: center bottom; animation: meshFlow 10s linear infinite; pointer-events: none;
        }
        @media (prefers-reduced-motion: reduce) { body[data-page="add-project"] .live-mesh { animation: none; } }
        body[data-page="add-project"] .content-wrap { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 64px; text-align: right; align-items: flex-end; }
        body[data-page="add-project"] .content-wrap .max-w-md { max-width: 28rem; }
        body[data-page="add-project"] .brand-title { font-size: 48px; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 24px; }
        body[data-page="add-project"] .brand-title span { color: #60a5fa; }
        body[data-page="add-project"] .brand-desc { font-size: 18px; font-weight: 500; line-height: 1.6; color: #cbd5e1; }

    
        /* Site Switcher */
        :where(body[data-page="add-project"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="add-project"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="add-project"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="add-project"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="add-project"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="add-project"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="add-project"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="add-project"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="add-project"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="add-project"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="add-project"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="add-project"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="add-project"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="add-project"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="add-project"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── analytics ── */
:root:where(:has(body[data-page="analytics"])) {
            --primary: #4b68ff;
            --primary-dark: #3854e8;
            --bg: #f4f5f0;
            --border: #dde2dc;
            --text: #101615;
            --muted: #697371;
            --nav-height: 65px;
        }
        :where(html:has(body[data-page="analytics"])), :where(body[data-page="analytics"]), :where(body[data-page="analytics"]) * { box-sizing: border-box; margin: 0; padding: 0; }
        body:where([data-page="analytics"]) {
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            background: var(--bg); color: var(--text); min-height: 100vh;
            opacity: 0; transition: opacity 0.5s ease, padding-left 0.4s cubic-bezier(0.4,0,0.2,1);
            padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 10px));
            -webkit-tap-highlight-color: transparent; overflow-x: hidden;
        }
        body:where([data-page="analytics"]).loaded { opacity: 1; }
        @media (min-width: 768px) {
            body:where([data-page="analytics"]) { padding-left: 72px; padding-bottom: 0; }
            body:where([data-page="analytics"]):has(.sidebar:hover) { padding-left: 220px; }
        }

        /* ── Sidebar ── */
        :where(body[data-page="analytics"]) .sidebar {
            position: fixed; left: 0; top: 0; bottom: 0; width: 72px;
            background: white; border-right: 1px solid #eceee6;
            display: none; flex-direction: column; align-items: center;
            padding: 24px 0; z-index: 50;
            transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
            overflow: hidden;
        }
        @media (min-width: 768px) { :where(body[data-page="analytics"]) .sidebar { display: flex; } }
        :where(body[data-page="analytics"]) .sidebar:hover { width: 220px; box-shadow: 4px 0 24px rgba(0,0,0,0.04); }
        :where(body[data-page="analytics"]) .sidebar-logo {
            display: flex; align-items: center; gap: 12px;
            font-size: 20px; font-weight: 900; letter-spacing: -0.05em;
            color: #4b68ff; padding: 0 20px; margin-bottom: 32px;
            white-space: nowrap; width: 100%; text-decoration: none;
        }
        :where(body[data-page="analytics"]) .sidebar-logo img { flex-shrink: 0; }
        :where(body[data-page="analytics"]) .sidebar-logo span { opacity: 0; transition: opacity 0.2s, transform 0.2s; transform: translateX(-10px); }
        :where(body[data-page="analytics"]) .sidebar:hover .sidebar-logo span { opacity: 1; transform: translateX(0); }
        :where(body[data-page="analytics"]) .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 10px; }
        :where(body[data-page="analytics"]) .sidebar-link {
            display: flex; align-items: center; gap: 14px; padding: 12px 14px;
            border-radius: 12px; color: #697371; font-size: 14px; font-weight: 700;
            text-decoration: none; white-space: nowrap; transition: all 0.2s;
        }
        :where(body[data-page="analytics"]) .sidebar-link:hover, :where(body[data-page="analytics"]) .sidebar-link.active { background: #eef0ff; color: #4b68ff; }
        :where(body[data-page="analytics"]) .sidebar-link svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="analytics"]) .sidebar-link span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="analytics"]) .sidebar:hover .sidebar-link span { opacity: 1; }
        :where(body[data-page="analytics"]) .sidebar-bottom { width: 100%; padding: 0 10px; display: flex; flex-direction: column; gap: 6px; }
        :where(body[data-page="analytics"]) .sidebar-btn {
            display: flex; align-items: center; gap: 12px; padding: 12px 14px;
            border-radius: 12px; font-size: 14px; font-weight: 700; white-space: nowrap;
            cursor: pointer; border: none; transition: all 0.2s; width: 100%;
            background: transparent; color: #ffffff;
        }
        :where(body[data-page="analytics"]) .sidebar-btn:hover { background: #fff1f2; }
        :where(body[data-page="analytics"]) .sidebar-btn svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="analytics"]) .sidebar-btn span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="analytics"]) .sidebar:hover .sidebar-btn span { opacity: 1; }

        /* ── Bottom Nav ── */
        :where(body[data-page="analytics"]) .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-height);
            background: rgba(255,255,255,0.95); backdrop-filter: blur(16px);
            border-top: 1px solid rgba(221,226,220,0.8);
            display: flex; justify-content: space-around; align-items: center; z-index: 100;
            padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 24px rgba(0,0,0,0.04);
        }
        @media (min-width: 768px) { :where(body[data-page="analytics"]) .bottom-nav { display: none; } }
        :where(body[data-page="analytics"]) .bottom-nav-item {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            flex: 1; height: 100%; gap: 5px; color: #8b9390; text-decoration: none;
            position: relative; transition: color 0.3s;
        }
        :where(body[data-page="analytics"]) .bottom-nav-item.active { color: var(--primary); }
        :where(body[data-page="analytics"]) .bottom-nav-item svg { width: 22px; height: 22px; transition: transform 0.3s; }
        :where(body[data-page="analytics"]) .bottom-nav-item.active svg { transform: translateY(-2px); stroke-width: 2.5; }
        :where(body[data-page="analytics"]) .bottom-nav-item span { font-size: 10px; font-weight: 700; }
        :where(body[data-page="analytics"]) .bottom-nav-indicator {
            position: absolute; top: 0; width: 32px; height: 3px;
            background: var(--primary); border-radius: 0 0 4px 4px;
            opacity: 0; transform: scaleX(0); transition: opacity 0.3s, transform 0.3s;
        }
        :where(body[data-page="analytics"]) .bottom-nav-item.active .bottom-nav-indicator { opacity: 1; transform: scaleX(1); }

        /* ── Page layout ── */
        :where(body[data-page="analytics"]) .page-layout { display: flex; min-height: 100vh; }

        /* ── Brand panel (chap) ── */
        :where(body[data-page="analytics"]) .brand-panel {
            display: none;
            width: 320px; flex-shrink: 0;
            background: #2f49d4;
            position: sticky; top: 0; height: 100vh;
            flex-direction: column; justify-content: space-between;
            padding: 48px 36px; overflow: hidden;
        }
        @media (min-width: 900px) { :where(body[data-page="analytics"]) .brand-panel { display: flex; } }
        :where(body[data-page="analytics"]) .brand-logo-row {
            display: flex; align-items: center; gap: 12px; position: relative; z-index: 1;
        }
        :where(body[data-page="analytics"]) .brand-logo-img {
            width: 44px; height: 44px; border-radius: 14px; background: #ffffff;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        :where(body[data-page="analytics"]) .brand-name { font-size: 22px; font-weight: 900; color: white; letter-spacing: -0.5px; }
        :where(body[data-page="analytics"]) .brand-tagline { font-size: 11px; color: rgba(255,255,255,0.6); font-weight: 600; margin-top: 2px; }
        :where(body[data-page="analytics"]) .brand-middle { position: relative; z-index: 1; }
        :where(body[data-page="analytics"]) .brand-title {
            font-size: 28px; font-weight: 900; color: white;
            line-height: 1.25; letter-spacing: -0.8px; margin-bottom: 14px;
        }
        :where(body[data-page="analytics"]) .brand-desc { font-size: 13px; color: rgba(255,255,255,0.65); font-weight: 600; line-height: 1.6; }

        /* Kpi mini stats brand panel ichida */
        :where(body[data-page="analytics"]) .brand-stats { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
        :where(body[data-page="analytics"]) .brand-stat-item {
            display: flex; align-items: center; gap: 14px;
            background: #2f49d4; border-radius: 14px; padding: 14px 16px;
        }
        :where(body[data-page="analytics"]) .brand-stat-icon {
            width: 32px; height: 32px; border-radius: 9px; background: #2a3fb8;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        :where(body[data-page="analytics"]) .brand-stat-num { font-size: 18px; font-weight: 900; color: white; line-height: 1; }
        :where(body[data-page="analytics"]) .brand-stat-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.6); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.08em; }

        :where(body[data-page="analytics"]) .brand-bottom { position: relative; z-index: 1; }
        :where(body[data-page="analytics"]) .brand-copyright { font-size: 11px; color: rgba(255,255,255,0.3); font-weight: 600; }

        /* ── Content panel (o'ng) ── */
        :where(body[data-page="analytics"]) .content-panel {
            flex: 1; min-width: 0;
            padding: 36px 20px 100px;
            overflow-y: auto;
        }
        @media (min-width: 900px) { :where(body[data-page="analytics"]) .content-panel { padding: 40px 40px 80px; } }
        @media (min-width: 1500px) { :where(body[data-page="analytics"]) .content-panel { max-width: 1400px; margin: 0 auto; } }

        /* ── Page header row ── */
        :where(body[data-page="analytics"]) .page-header-row {
            display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
            animation: fadeUp-4 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        :where(body[data-page="analytics"]) .back-btn {
            width: 40px; height: 40px; border-radius: 12px;
            background: white; border: 1.5px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all 0.2s; flex-shrink: 0;
            text-decoration: none; color: var(--muted); border: none;
        }
        :where(body[data-page="analytics"]) .back-btn:hover { border-color: var(--primary); color: var(--primary); background: #eef0ff; }

        /* ── KPI grid ── */
        :where(body[data-page="analytics"]) .kpi-grid {
            display: grid; grid-template-columns: repeat(2, 1fr);
            gap: 12px; margin-bottom: 20px;
            animation: fadeUp-4 0.5s 0.06s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        @media (min-width: 640px) { :where(body[data-page="analytics"]) .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
        :where(body[data-page="analytics"]) .kpi-card {
            background: white; border-radius: 18px; border: 1px solid var(--border);
            padding: 18px 16px;
        }
        :where(body[data-page="analytics"]) .kpi-icon {
            width: 34px; height: 34px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
        }
        :where(body[data-page="analytics"]) .kpi-num { font-size: 24px; font-weight: 900; color: var(--text); line-height: 1; }
        :where(body[data-page="analytics"]) .kpi-label { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }
        :where(body[data-page="analytics"]) .kpi-badge {
            font-size: 10px; font-weight: 800; margin-top: 7px;
            display: inline-flex; align-items: center; gap: 3px;
            padding: 3px 8px; border-radius: 20px;
        }
        :where(body[data-page="analytics"]) .kpi-badge.blue { background: #eef0ff; color: #3854e8; }
        :where(body[data-page="analytics"]) .kpi-badge.green { background: #ecfdf5; color: #16a34a; }
        :where(body[data-page="analytics"]) .kpi-badge.yellow { background: #fef9c3; color: #ca8a04; }
        :where(body[data-page="analytics"]) .kpi-badge.purple { background: #f5f3ff; color: #7c3aed; }

        /* ── Chart card ── */
        :where(body[data-page="analytics"]) .chart-card {
            background: white; border-radius: 20px; border: 1px solid var(--border);
            padding: 22px 24px; margin-bottom: 16px;
            animation: fadeUp-4 0.5s 0.1s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        :where(body[data-page="analytics"]) .card-title {
            font-size: 14px; font-weight: 900; color: var(--text);
            display: flex; align-items: center; gap: 8px; margin-bottom: 3px;
        }
        :where(body[data-page="analytics"]) .card-sub { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 18px; }

        /* ── Projects table ── */
        :where(body[data-page="analytics"]) .proj-table {
            background: white; border-radius: 20px; border: 1px solid var(--border);
            overflow: hidden; margin-bottom: 16px;
            animation: fadeUp-4 0.5s 0.14s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        :where(body[data-page="analytics"]) .proj-table-header {
            padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
        }
        :where(body[data-page="analytics"]) .proj-row {
            display: flex; align-items: center; gap: 12px;
            padding: 13px 22px; border-bottom: 1px solid #f4f5f0;
            transition: background 0.2s; cursor: pointer;
        }
        :where(body[data-page="analytics"]) .proj-row:last-child { border-bottom: none; }
        :where(body[data-page="analytics"]) .proj-row:hover { background: #f4f5f0; }
        :where(body[data-page="analytics"]) .proj-thumb {
            width: 42px; height: 42px; border-radius: 10px;
            object-fit: cover; flex-shrink: 0; background: #eceee6;
        }
        :where(body[data-page="analytics"]) .proj-title-txt { font-size: 13px; font-weight: 800; color: var(--text); }
        :where(body[data-page="analytics"]) .proj-type-txt { font-size: 10px; font-weight: 700; color: var(--muted); margin-top: 2px; }
        :where(body[data-page="analytics"]) .proj-views-num {
            margin-left: auto; display: flex; align-items: center; gap: 5px;
            font-size: 13px; font-weight: 800; color: #4b68ff; flex-shrink: 0;
        }
        :where(body[data-page="analytics"]) .views-bar-wrap { width: 70px; height: 5px; background: #eceee6; border-radius: 99px; overflow: hidden; margin-top: 5px; margin-left: auto; }
        :where(body[data-page="analytics"]) .views-bar { height: 100%; background: linear-gradient(90deg, #4b68ff, #4b68ff); border-radius: 99px; transition: width 0.8s ease; }

        /* Add project btn */
        :where(body[data-page="analytics"]) .add-proj-btn {
            background: #eef0ff; color: #3854e8; border-radius: 12px;
            padding: 8px 14px; font-weight: 800; font-size: 12px;
            text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
            transition: all 0.2s;
        }
        :where(body[data-page="analytics"]) .add-proj-btn:hover { background: #e6eaff; }
    
        /* Site Switcher */
        :where(body[data-page="analytics"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="analytics"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="analytics"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="analytics"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="analytics"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="analytics"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="analytics"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="analytics"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="analytics"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="analytics"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="analytics"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="analytics"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="analytics"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="analytics"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="analytics"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── boglanish ── */
:where(html:has(body[data-page="boglanish"])),:where(body[data-page="boglanish"]),:where(body[data-page="boglanish"]) *{box-sizing:border-box;margin:0;padding:0}
        :root:where(:has(body[data-page="boglanish"])){
            --primary:#3854e8;--primary-dark:#2f49d4;
            --bg:#f4f5f0;--border:#dde2dc;
            --text:#101615;--muted:#697371;
            --nav-h:65px;
        }
        html:where(:has(body[data-page="boglanish"])),body:where([data-page="boglanish"]){height:100%;overflow:hidden}
        body:where([data-page="boglanish"]){
            font-family:'Gilroy','Plus Jakarta Sans',sans-serif;
            background:var(--bg);color:var(--text);
            opacity:0;transition:opacity .4s ease,padding-left .4s cubic-bezier(.4,0,.2,1);
            -webkit-tap-highlight-color:transparent;
        }
        body:where([data-page="boglanish"]).loaded{opacity:1}
        @media(min-width:768px){
            body:where([data-page="boglanish"]){padding-left:72px}
            body:where([data-page="boglanish"]):has(.sidebar:hover){padding-left:220px}
        }
        /* Sidebar */
        :where(body[data-page="boglanish"]) .sidebar{position:fixed;left:0;top:0;bottom:0;width:72px;background:#fff;border-right:1px solid #eceee6;display:none;flex-direction:column;align-items:center;padding:24px 0;z-index:50;transition:width .4s cubic-bezier(.4,0,.2,1);overflow:hidden}
        @media(min-width:768px){:where(body[data-page="boglanish"]) .sidebar{display:flex}}
        :where(body[data-page="boglanish"]) .sidebar:hover{width:220px;box-shadow:4px 0 24px rgba(0,0,0,.04)}
        :where(body[data-page="boglanish"]) .sb-logo{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:900;letter-spacing:-.05em;color:var(--primary);padding:0 20px;margin-bottom:32px;white-space:nowrap;width:100%;text-decoration:none}
        :where(body[data-page="boglanish"]) .sb-logo img{flex-shrink:0}
        :where(body[data-page="boglanish"]) .sb-logo span,:where(body[data-page="boglanish"]) .sb-link span,:where(body[data-page="boglanish"]) .sb-btn span{opacity:0;transition:opacity .2s,transform .2s;transform:translateX(-8px)}
        :where(body[data-page="boglanish"]) .sidebar:hover .sb-logo span,:where(body[data-page="boglanish"]) .sidebar:hover .sb-link span,:where(body[data-page="boglanish"]) .sidebar:hover .sb-btn span{opacity:1;transform:translateX(0)}
        :where(body[data-page="boglanish"]) .sb-nav{flex:1;display:flex;flex-direction:column;gap:4px;width:100%;padding:0 10px}
        :where(body[data-page="boglanish"]) .sb-link{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:12px;color:#697371;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:all .2s}
        :where(body[data-page="boglanish"]) .sb-link:hover,:where(body[data-page="boglanish"]) .sb-link.active{background:#eef0ff;color:var(--primary)}
        :where(body[data-page="boglanish"]) .sb-link svg{flex-shrink:0;width:20px;height:20px}
        :where(body[data-page="boglanish"]) .sb-bottom{width:100%;padding:0 10px;display:flex;flex-direction:column;gap:8px}
        :where(body[data-page="boglanish"]) .sb-btn{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;border:none;width:100%;background:transparent;color:#ef4444;transition:all .2s}
        :where(body[data-page="boglanish"]) .sb-btn:hover{background:#fff1f2}
        :where(body[data-page="boglanish"]) .sb-btn svg{flex-shrink:0;width:20px;height:20px}
        :where(body[data-page="boglanish"]) .sb-btn.signin{color:#697371}:where(body[data-page="boglanish"]) .sb-btn.signin:hover{background:#eceee6;color:var(--primary)}
        :where(body[data-page="boglanish"]) .sb-btn.start{background:var(--primary);color:white;border-radius:12px}:where(body[data-page="boglanish"]) .sb-btn.start:hover{background:var(--primary-dark)}
        /* Bottom nav */
        :where(body[data-page="boglanish"]) .bnav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-top:1px solid rgba(221,226,220,.8);display:flex;justify-content:space-around;align-items:center;z-index:100;padding-bottom:env(safe-area-inset-bottom,0px)}
        @media(min-width:768px){:where(body[data-page="boglanish"]) .bnav{display:none}}
        :where(body[data-page="boglanish"]) .bnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;height:100%;gap:4px;color:#8b9390;text-decoration:none;position:relative;transition:color .25s}
        :where(body[data-page="boglanish"]) .bnav-item.active{color:var(--primary)}
        :where(body[data-page="boglanish"]) .bnav-item svg{width:22px;height:22px}
        :where(body[data-page="boglanish"]) .bnav-item span{font-size:10px;font-weight:700}
        /* Layout */
        :where(body[data-page="boglanish"]) .wrap{display:flex;height:100vh;overflow:hidden;width:100%}
        @media(max-width:767px){:where(body[data-page="boglanish"]) .wrap{height:calc(100vh - var(--nav-h))}}
        /* Left */
        :where(body[data-page="boglanish"]) .left{width:290px;flex-shrink:0;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}
        @media(max-width:900px){:where(body[data-page="boglanish"]) .left{width:240px}}
        @media(max-width:767px){
            :where(body[data-page="boglanish"]) .left{position:absolute;inset:0;width:85%;max-width:300px;z-index:20;
            transform:translateX(-100%);transition:transform .3s ease;box-shadow:4px 0 24px rgba(0,0,0,.1)}
            :where(body[data-page="boglanish"]) .left.show{transform:translateX(0)}
        }
        /* Freelancer card */
        :where(body[data-page="boglanish"]) .fl-card{padding:24px 18px;text-align:center;border-bottom:1px solid var(--border)}
        :where(body[data-page="boglanish"]) .fl-ava-wrap{position:relative;display:inline-block;margin-bottom:12px}
        :where(body[data-page="boglanish"]) .fl-ava{width:76px;height:76px;border-radius:50%;background:#3854e8;display:flex;align-items:center;justify-content:center;color:white;font-size:24px;font-weight:900;margin:0 auto;overflow:hidden}
        :where(body[data-page="boglanish"]) .fl-ava img{width:100%;height:100%;object-fit:cover;display:block}
        :where(body[data-page="boglanish"]) .fl-verified{position:absolute;bottom:2px;right:2px;width:20px;height:20px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid white}
        :where(body[data-page="boglanish"]) .fl-name{font-size:16px;font-weight:900;margin-bottom:3px}
        :where(body[data-page="boglanish"]) .fl-role{font-size:11px;color:var(--primary);font-weight:700;margin-bottom:10px}
        :where(body[data-page="boglanish"]) .fl-stats{display:flex;justify-content:center;gap:18px;margin-bottom:12px}
        :where(body[data-page="boglanish"]) .fl-sn{font-size:15px;font-weight:900;color:var(--text)}
        :where(body[data-page="boglanish"]) .fl-sl{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
        :where(body[data-page="boglanish"]) .fl-skills{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:12px}
        :where(body[data-page="boglanish"]) .fl-skill{background:#eceee6;color:var(--muted);font-size:10px;font-weight:800;padding:3px 7px;border-radius:5px}
        :where(body[data-page="boglanish"]) .fl-rate{font-size:12px;font-weight:800;color:var(--primary);margin-bottom:12px}
        :where(body[data-page="boglanish"]) .fl-tg{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:700;color:var(--muted);text-decoration:none;transition:color .2s}
        :where(body[data-page="boglanish"]) .fl-tg:hover{color:var(--primary)}
        /* Job info */
        :where(body[data-page="boglanish"]) .job-box{padding:14px 16px;border-bottom:1px solid var(--border)}
        :where(body[data-page="boglanish"]) .job-box-lbl{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
        :where(body[data-page="boglanish"]) .job-badge{display:inline-flex;align-items:center;gap:6px;background:#eef0ff;border:1px solid #cfd6ff;color:var(--primary);font-size:11px;font-weight:800;padding:6px 12px;border-radius:10px;text-decoration:none}
        /* Back btn */
        :where(body[data-page="boglanish"]) .back-btn{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;transition:color .2s}
        :where(body[data-page="boglanish"]) .back-btn:hover{color:var(--primary)}
        /* Right */
        :where(body[data-page="boglanish"]) .right{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
        /* Chat header */
        :where(body[data-page="boglanish"]) .ch{background:#fff;border-bottom:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0}
        :where(body[data-page="boglanish"]) .ch-back{display:none;width:34px;height:34px;border-radius:10px;background:#eceee6;border:none;cursor:pointer;color:var(--muted);align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
        @media(max-width:767px){:where(body[data-page="boglanish"]) .ch-back{display:flex}}
        :where(body[data-page="boglanish"]) .ch-ava{width:36px;height:36px;border-radius:50%;overflow:hidden;background:#3854e8;display:flex;align-items:center;justify-content:center;color:white;font-size:12px;font-weight:900;flex-shrink:0}
        :where(body[data-page="boglanish"]) .ch-ava img{width:100%;height:100%;object-fit:cover}
        :where(body[data-page="boglanish"]) .ch-name{font-size:14px;font-weight:900;color:var(--text)}
        :where(body[data-page="boglanish"]) .ch-online{font-size:11px;color:#10b981;font-weight:600;display:flex;align-items:center;gap:4px;margin-top:1px}
        :where(body[data-page="boglanish"]) .ch-dot{width:6px;height:6px;border-radius:50%;background:#10b981}
        /* Auth wall */
        :where(body[data-page="boglanish"]) .auth-wall{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:32px;color:var(--muted)}
        :where(body[data-page="boglanish"]) .auth-wall-ico{width:64px;height:64px;border-radius:20px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
        /* Messages */
        :where(body[data-page="boglanish"]) .msg-area{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 16px 8px;display:flex;flex-direction:column;gap:2px}
        :where(body[data-page="boglanish"]) .msg-area::-webkit-scrollbar{width:3px}
        :where(body[data-page="boglanish"]) .msg-area::-webkit-scrollbar-thumb{background:#dde2dc;border-radius:99px}
        :where(body[data-page="boglanish"]) .date-div{display:flex;align-items:center;gap:10px;margin:8px 0;color:var(--muted)}
        :where(body[data-page="boglanish"]) .date-div span{font-size:11px;font-weight:700;white-space:nowrap}
        :where(body[data-page="boglanish"]) .date-div::before,:where(body[data-page="boglanish"]) .date-div::after{content:'';flex:1;height:1px;background:var(--border)}
        :where(body[data-page="boglanish"]) .mr{display:flex;align-items:flex-end;gap:6px;margin-bottom:1px}
        :where(body[data-page="boglanish"]) .mr.mine{flex-direction:row-reverse}
        :where(body[data-page="boglanish"]) .mr.mine+.mr:not(.mine),:where(body[data-page="boglanish"]) .mr:not(.mine)+.mr.mine{margin-top:6px}
        :where(body[data-page="boglanish"]) .m-ava{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0;margin-bottom:2px;background:#3854e8;display:flex;align-items:center;justify-content:center;color:white;font-size:9px;font-weight:900}
        :where(body[data-page="boglanish"]) .m-ava img{width:100%;height:100%;object-fit:cover}
        :where(body[data-page="boglanish"]) .mc{display:flex;flex-direction:column;max-width:min(72%,640px)}
        :where(body[data-page="boglanish"]) .mr.mine .mc{align-items:flex-end}
        :where(body[data-page="boglanish"]) .bub{padding:9px 13px;font-size:14px;font-weight:600;line-height:1.55;
            overflow-wrap:break-word;word-break:normal;white-space:normal;
            animation:bi .2s cubic-bezier(.34,1.56,.64,1) both}
        :where(body[data-page="boglanish"]) .bub.theirs{background:#fff;color:var(--text);border-radius:18px 18px 18px 4px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
        :where(body[data-page="boglanish"]) .bub.mine{background:var(--primary);color:#fff;border-radius:18px 18px 4px 18px}
        :where(body[data-page="boglanish"]) .mt{font-size:10px;font-weight:600;color:var(--muted);margin:2px 6px 4px}
        /* Input */
        :where(body[data-page="boglanish"]) .ia{background:#fff;border-top:1px solid var(--border);padding:10px 12px;display:flex;align-items:flex-end;gap:8px;flex-shrink:0}
        :where(body[data-page="boglanish"]) .iw{flex:1;background:#f4f5f0;border:1.5px solid var(--border);border-radius:14px;padding:9px 12px;transition:all .2s;min-height:42px;display:flex;align-items:flex-end}
        :where(body[data-page="boglanish"]) .iw:focus-within{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px rgba(56,84,232,.08)}
        :where(body[data-page="boglanish"]) .mi{width:100%;background:none;border:none;outline:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--text);resize:none;max-height:110px;line-height:1.5;display:block}
        :where(body[data-page="boglanish"]) .mi::placeholder{color:var(--muted)}
        :where(body[data-page="boglanish"]) .send-btn{width:42px;height:42px;border-radius:12px;background:var(--primary);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
        :where(body[data-page="boglanish"]) .send-btn:hover:not(:disabled){background:var(--primary-dark);transform:scale(1.05)}
        :where(body[data-page="boglanish"]) .send-btn:disabled{opacity:.4;cursor:not-allowed}
        /* Typing */
        :where(body[data-page="boglanish"]) .typing-row{display:none;align-items:flex-end;gap:6px;padding:2px 16px 4px}
        :where(body[data-page="boglanish"]) .typing-row.show{display:flex}
        :where(body[data-page="boglanish"]) .tb{background:#fff;padding:8px 12px;border-radius:18px 18px 18px 4px;box-shadow:0 1px 4px rgba(0,0,0,.06);display:flex;gap:3px;align-items:center}
        :where(body[data-page="boglanish"]) .td{width:5px;height:5px;border-radius:50%;background:#8b9390;animation:td 1.2s infinite}
        :where(body[data-page="boglanish"]) .td:nth-child(2){animation-delay:.2s}:where(body[data-page="boglanish"]) .td:nth-child(3){animation-delay:.4s}
        /* Skeleton */
        :where(body[data-page="boglanish"]) .sk{background:linear-gradient(90deg,#eceee6 25%,#dde2dc 50%,#eceee6 75%);background-size:200% 100%;animation:sh 1.4s infinite;border-radius:8px}
        /* Toast */
        :where(body[data-page="boglanish"]) .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(14px);background:#1b2321;color:#fff;padding:10px 18px;border-radius:11px;font-weight:700;font-size:13px;z-index:400;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);white-space:nowrap}
        :where(body[data-page="boglanish"]) .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
        :where(body[data-page="boglanish"]) .toast.ok{background:#059669}
        :where(body[data-page="boglanish"]) .toast.err{background:#dc2626}
        @media(min-width:768px){:where(body[data-page="boglanish"]) .toast{bottom:22px}}
        /* Mobile overlay */
        :where(body[data-page="boglanish"]) .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:15}
        @media(max-width:767px){:where(body[data-page="boglanish"]) .overlay.show{display:block}}
        /* ── Xabar tahrirlash/o'chirish ── */
        :where(body[data-page="boglanish"]) .msg-actions{display:none;align-items:center;gap:3px;margin-bottom:4px;animation:fadeIn .15s ease}
        :where(body[data-page="boglanish"]) .mr:hover .msg-actions,:where(body[data-page="boglanish"]) .mr:focus-within .msg-actions{display:flex}
        :where(body[data-page="boglanish"]) .mr.mine .msg-actions{flex-direction:row-reverse}
        :where(body[data-page="boglanish"]) .msg-act-btn{width:26px;height:26px;border-radius:8px;border:none;cursor:pointer;
            display:flex;align-items:center;justify-content:center;
            background:rgba(255,255,255,.9);backdrop-filter:blur(4px);
            box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all .2s;color:var(--muted)}
        :where(body[data-page="boglanish"]) .msg-act-btn:hover{transform:scale(1.1)}
        :where(body[data-page="boglanish"]) .msg-act-btn.edit:hover{background:#eef0ff;color:var(--primary)}
        :where(body[data-page="boglanish"]) .msg-act-btn.del:hover{background:#fff1f2;color:#dc2626}
        /* Edit mode */
        :where(body[data-page="boglanish"]) .edit-area{background:#fff;border:2px solid var(--primary);border-radius:12px;
            padding:8px 12px;font-family:inherit;font-size:14px;font-weight:600;
            color:var(--text);outline:none;resize:none;width:100%;
            box-shadow:0 0 0 3px rgba(56,84,232,.1);min-width:160px}
        :where(body[data-page="boglanish"]) .edit-btns{display:flex;gap:6px;margin-top:6px}
        :where(body[data-page="boglanish"]) .edit-save{background:var(--primary);color:white;border:none;border-radius:8px;
            padding:5px 12px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer}
        :where(body[data-page="boglanish"]) .edit-cancel{background:#eceee6;color:var(--muted);border:none;border-radius:8px;
            padding:5px 10px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer}
        :where(body[data-page="boglanish"]) .edited-mark{font-size:9px;color:var(--muted);font-weight:600;margin-left:4px;opacity:.7}

        /* ── Emoji picker ── */
        :where(body[data-page="boglanish"]) .emoji-btn{width:36px;height:36px;border-radius:10px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:background .2s;flex-shrink:0}
        :where(body[data-page="boglanish"]) .emoji-btn:hover{background:#eceee6}
        :where(body[data-page="boglanish"]) .emoji-wrap{position:relative;flex-shrink:0}
        :where(body[data-page="boglanish"]) .emoji-panel{
            position:absolute;bottom:52px;right:0;
            z-index:300;border-radius:18px;
            box-shadow:0 8px 40px rgba(0,0,0,.18);
            border:1px solid var(--border);
            background:white;padding:12px;
            display:none;width:300px;
        }
        :where(body[data-page="boglanish"]) .emoji-panel.open{display:block;animation:popUp .25s cubic-bezier(.34,1.56,.64,1) both}
        :where(body[data-page="boglanish"]) .emoji-cats{display:flex;gap:4px;margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:8px}
        :where(body[data-page="boglanish"]) .emoji-cat-btn{padding:4px 8px;border:none;background:none;cursor:pointer;font-size:16px;border-radius:8px;transition:background .2s}
        :where(body[data-page="boglanish"]) .emoji-cat-btn:hover,:where(body[data-page="boglanish"]) .emoji-cat-btn.active{background:#eef0ff}
        :where(body[data-page="boglanish"]) .emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:220px;overflow-y:auto}
        :where(body[data-page="boglanish"]) .emoji-grid::-webkit-scrollbar{width:3px}
        :where(body[data-page="boglanish"]) .emoji-grid::-webkit-scrollbar-thumb{background:#dde2dc;border-radius:99px}
        :where(body[data-page="boglanish"]) .e-btn{width:34px;height:34px;border:none;background:none;cursor:pointer;font-size:20px;border-radius:8px;transition:background .15s;display:flex;align-items:center;justify-content:center}
        :where(body[data-page="boglanish"]) .e-btn:hover{background:#eceee6}
        @media(max-width:480px){:where(body[data-page="boglanish"]) .emoji-panel{width:260px;right:-40px}}

    
        /* Site Switcher */
        :where(body[data-page="boglanish"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="boglanish"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="boglanish"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="boglanish"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="boglanish"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="boglanish"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="boglanish"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="boglanish"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="boglanish"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="boglanish"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="boglanish"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="boglanish"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="boglanish"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="boglanish"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="boglanish"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── chat ── */
:where(html:has(body[data-page="chat"])),:where(body[data-page="chat"]),:where(body[data-page="chat"]) *{box-sizing:border-box;margin:0;padding:0}
        :root:where(:has(body[data-page="chat"])){
            --primary:#3854e8;--primary-dark:#2f49d4;
            --bg:#f4f5f0;--border:#dde2dc;
            --text:#101615;--muted:#697371;
            --nav-h:65px;
        }
        html:where(:has(body[data-page="chat"])),body:where([data-page="chat"]){height:100%;overflow:hidden}
        body:where([data-page="chat"]){
            font-family:'Gilroy','Plus Jakarta Sans',sans-serif;
            background:var(--bg);color:var(--text);
            opacity:0;transition:opacity .4s ease;
            -webkit-tap-highlight-color:transparent;
        }
        body:where([data-page="chat"]).loaded{opacity:1}
        @media(min-width:768px){
            body:where([data-page="chat"]){padding-left:72px}
            body:where([data-page="chat"]):has(.sidebar:hover){padding-left:220px}
        body:where([data-page="chat"]){transition:padding-left .4s cubic-bezier(.4,0,.2,1)}
        }

        /* ── Sidebar ── */
        :where(body[data-page="chat"]) .sidebar{
            position:fixed;left:0;top:0;bottom:0;width:72px;
            background:#fff;border-right:1px solid #eceee6;
            display:none;flex-direction:column;align-items:center;
            padding:24px 0;z-index:50;
            transition:width .4s cubic-bezier(.4,0,.2,1);overflow:hidden;
        }
        @media(min-width:768px){:where(body[data-page="chat"]) .sidebar{display:flex}}
        :where(body[data-page="chat"]) .sidebar:hover{width:220px;box-shadow:4px 0 24px rgba(0,0,0,.04)}
        :where(body[data-page="chat"]) .sb-logo{
            display:flex;align-items:center;gap:12px;font-size:20px;font-weight:900;
            letter-spacing:-.05em;color:var(--primary);padding:0 20px;margin-bottom:32px;
            white-space:nowrap;width:100%;text-decoration:none;
        }
        :where(body[data-page="chat"]) .sb-logo img{flex-shrink:0}
        :where(body[data-page="chat"]) .sb-logo span,:where(body[data-page="chat"]) .sb-link span,:where(body[data-page="chat"]) .sb-btn span{opacity:0;transition:opacity .2s,transform .2s;transform:translateX(-8px)}
        :where(body[data-page="chat"]) .sidebar:hover .sb-logo span,
        :where(body[data-page="chat"]) .sidebar:hover .sb-link span,
        :where(body[data-page="chat"]) .sidebar:hover .sb-btn span{opacity:1;transform:translateX(0)}
        :where(body[data-page="chat"]) .sb-nav{flex:1;display:flex;flex-direction:column;gap:4px;width:100%;padding:0 10px}
        :where(body[data-page="chat"]) .sb-link{
            display:flex;align-items:center;gap:14px;padding:11px 14px;
            border-radius:12px;color:#697371;font-size:14px;font-weight:700;
            text-decoration:none;white-space:nowrap;transition:all .2s;
        }
        :where(body[data-page="chat"]) .sb-link:hover,:where(body[data-page="chat"]) .sb-link.active{background:#eef0ff;color:var(--primary)}
        :where(body[data-page="chat"]) .sb-link svg{flex-shrink:0;width:20px;height:20px}
        :where(body[data-page="chat"]) .sb-bottom{width:100%;padding:0 10px}
        :where(body[data-page="chat"]) .sb-btn{
            display:flex;align-items:center;gap:12px;padding:11px 14px;
            border-radius:12px;font-size:14px;font-weight:700;white-space:nowrap;
            cursor:pointer;border:none;width:100%;background:transparent;color:#ef4444;transition:all .2s;
        }
        :where(body[data-page="chat"]) .sb-btn:hover{background:#fff1f2}
        :where(body[data-page="chat"]) .sb-btn svg{flex-shrink:0;width:20px;height:20px}

        /* ── Bottom nav ── */
        :where(body[data-page="chat"]) .bnav{
            position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);
            background:rgba(255,255,255,.96);backdrop-filter:blur(16px);
            border-top:1px solid rgba(221,226,220,.8);
            display:flex;justify-content:space-around;align-items:center;
            z-index:100;padding-bottom:env(safe-area-inset-bottom,0px);
            box-shadow:0 -4px 24px rgba(0,0,0,.04);
        }
        @media(min-width:768px){:where(body[data-page="chat"]) .bnav{display:none}}
        :where(body[data-page="chat"]) .bnav-item{
            display:flex;flex-direction:column;align-items:center;justify-content:center;
            flex:1;height:100%;gap:4px;color:#8b9390;text-decoration:none;
            position:relative;transition:color .25s;border:none;background:transparent;cursor:pointer;
        }
        :where(body[data-page="chat"]) .bnav-item.active{color:var(--primary)}
        :where(body[data-page="chat"]) .bnav-item svg{width:22px;height:22px}
        :where(body[data-page="chat"]) .bnav-item span{font-size:10px;font-weight:700}
        :where(body[data-page="chat"]) .bnav-dot{
            position:absolute;top:0;width:28px;height:3px;
            background:var(--primary);border-radius:0 0 4px 4px;
            opacity:0;transform:scaleX(0);transition:opacity .25s,transform .25s;
        }
        :where(body[data-page="chat"]) .bnav-item.active .bnav-dot{opacity:1;transform:scaleX(1)}

        /* ── Layout ── */
        :where(body[data-page="chat"]) .chat-wrap{
            display:flex;height:100vh;
            transition:all .4s cubic-bezier(.4,0,.2,1);
        }
        @media(max-width:767px){
            :where(body[data-page="chat"]) .chat-wrap{height:calc(100vh - var(--nav-h))}
        }

        /* ── Sol panel (suhbatlar) ── */
        :where(body[data-page="chat"]) .left-panel{
            width:340px;flex-shrink:0;background:#fff;
            border-right:1px solid var(--border);
            display:flex;flex-direction:column;
        }
        @media(max-width:900px){:where(body[data-page="chat"]) .left-panel{width:280px}}
        @media(max-width:767px){
            :where(body[data-page="chat"]) .left-panel{
                position:absolute;inset:0;width:100%;z-index:20;
                transform:translateX(0);transition:transform .3s ease;
            }
            :where(body[data-page="chat"]) .left-panel.slide-out{transform:translateX(-100%)}
        }
        :where(body[data-page="chat"]) .lp-head{
            padding:18px 16px 14px;border-bottom:1px solid var(--border);flex-shrink:0;
        }
        :where(body[data-page="chat"]) .lp-title{font-size:20px;font-weight:900;letter-spacing:-.4px;margin-bottom:12px}
        :where(body[data-page="chat"]) .lp-search{
            display:flex;align-items:center;gap:8px;
            background:#f4f5f0;border:1.5px solid var(--border);
            border-radius:12px;padding:9px 13px;transition:all .2s;
        }
        :where(body[data-page="chat"]) .lp-search:focus-within{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px rgba(56,84,232,.08)}
        :where(body[data-page="chat"]) .lp-search input{
            flex:1;background:none;border:none;outline:none;
            font-family:inherit;font-size:13px;font-weight:600;color:var(--text);
        }
        :where(body[data-page="chat"]) .lp-search input::placeholder{color:var(--muted)}
        :where(body[data-page="chat"]) .conv-list{flex:1;overflow-y:auto;padding:6px}
        :where(body[data-page="chat"]) .conv-list::-webkit-scrollbar{width:3px}
        :where(body[data-page="chat"]) .conv-list::-webkit-scrollbar-thumb{background:#dde2dc;border-radius:99px}

        :where(body[data-page="chat"]) .conv-item{
            display:flex;align-items:center;gap:11px;
            padding:11px 12px;border-radius:14px;cursor:pointer;
            transition:background .15s;position:relative;
        }
        :where(body[data-page="chat"]) .conv-item:hover{background:#f4f5f0}
        :where(body[data-page="chat"]) .conv-item.active{background:#eef0ff}
        :where(body[data-page="chat"]) .c-ava{
            width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;
        }
        :where(body[data-page="chat"]) .c-ava-ph{
            width:44px;height:44px;border-radius:50%;flex-shrink:0;
            background:linear-gradient(135deg,#3854e8,#4b68ff);
            display:flex;align-items:center;justify-content:center;
            color:#fff;font-weight:900;font-size:15px;
        }
        :where(body[data-page="chat"]) .c-info{flex:1;min-width:0}
        :where(body[data-page="chat"]) .c-name{font-size:14px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :where(body[data-page="chat"]) .c-proj{font-size:11px;font-weight:600;color:var(--primary);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :where(body[data-page="chat"]) .c-last{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :where(body[data-page="chat"]) .c-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
        :where(body[data-page="chat"]) .c-time{font-size:11px;color:var(--muted);font-weight:600}
        :where(body[data-page="chat"]) .c-badge{
            background:var(--primary);color:#fff;
            font-size:10px;font-weight:900;min-width:18px;height:18px;
            border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 5px;
        }
        :where(body[data-page="chat"]) .conv-empty{
            flex:1;display:flex;flex-direction:column;align-items:center;
            justify-content:center;gap:10px;padding:32px;text-align:center;color:var(--muted);
        }

        /* ── O'ng panel (chat) ── */
        :where(body[data-page="chat"]) .right-panel{
            flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);overflow:hidden;
        }

        /* Empty state */
        :where(body[data-page="chat"]) .chat-empty{
            flex:1;display:flex;flex-direction:column;align-items:center;
            justify-content:center;gap:14px;color:var(--muted);text-align:center;padding:40px;
        }
        :where(body[data-page="chat"]) .chat-empty-ico{
            width:68px;height:68px;border-radius:22px;background:#fff;
            border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
        }

        /* Chat header */
        :where(body[data-page="chat"]) .chat-head{
            background:#fff;border-bottom:1px solid var(--border);
            padding:13px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0;
        }
        :where(body[data-page="chat"]) .ch-back{
            display:none;width:36px;height:36px;border-radius:10px;
            background:#eceee6;border:none;cursor:pointer;color:var(--muted);
            align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;
        }
        @media(max-width:767px){:where(body[data-page="chat"]) .ch-back{display:flex}}
        :where(body[data-page="chat"]) .ch-back:hover{background:#dde2dc;color:var(--text)}
        :where(body[data-page="chat"]) .ch-ava{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#e6eaff;flex-shrink:0}
        :where(body[data-page="chat"]) .ch-ava-ph{
            width:38px;height:38px;border-radius:50%;
            background:linear-gradient(135deg,#3854e8,#4b68ff);
            display:flex;align-items:center;justify-content:center;
            color:#fff;font-weight:900;font-size:13px;flex-shrink:0;
        }
        :where(body[data-page="chat"]) .ch-info{flex:1;min-width:0}
        :where(body[data-page="chat"]) .ch-name{font-size:15px;font-weight:900;color:var(--text)}
        :where(body[data-page="chat"]) .ch-sub{font-size:12px;font-weight:600;color:var(--primary);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :where(body[data-page="chat"]) .ch-proj-btn{
            display:flex;align-items:center;gap:6px;
            background:#eef0ff;color:var(--primary);border:none;border-radius:10px;
            padding:7px 12px;font-family:inherit;font-size:12px;font-weight:800;
            cursor:pointer;transition:all .2s;text-decoration:none;flex-shrink:0;white-space:nowrap;
        }
        :where(body[data-page="chat"]) .ch-proj-btn:hover{background:#e6eaff}

        /* Messages */
        :where(body[data-page="chat"]) .msg-area{
            flex:1;overflow-y:auto;overflow-x:hidden;
            padding:16px 18px 8px;
            display:flex;flex-direction:column;gap:2px;
        }
        :where(body[data-page="chat"]) .msg-area::-webkit-scrollbar{width:3px}
        :where(body[data-page="chat"]) .msg-area::-webkit-scrollbar-thumb{background:#dde2dc;border-radius:99px}

        :where(body[data-page="chat"]) .date-div{
            display:flex;align-items:center;gap:10px;
            margin:10px 0;color:var(--muted);
        }
        :where(body[data-page="chat"]) .date-div span{font-size:11px;font-weight:700;white-space:nowrap}
        :where(body[data-page="chat"]) .date-div::before,:where(body[data-page="chat"]) .date-div::after{content:'';flex:1;height:1px;background:var(--border)}

        :where(body[data-page="chat"]) .msg-row{display:flex;align-items:flex-end;gap:6px;margin-bottom:1px}
        :where(body[data-page="chat"]) .msg-row.mine{flex-direction:row-reverse}
        :where(body[data-page="chat"]) .msg-row.mine+.msg-row:not(.mine),:where(body[data-page="chat"]) .msg-row:not(.mine)+.msg-row.mine{margin-top:8px}

        :where(body[data-page="chat"]) .m-ava{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#e6eaff;flex-shrink:0;margin-bottom:2px}
        :where(body[data-page="chat"]) .m-ava-ph{
            width:26px;height:26px;border-radius:50%;
            background:linear-gradient(135deg,#3854e8,#4b68ff);
            display:flex;align-items:center;justify-content:center;
            color:#fff;font-weight:900;font-size:9px;flex-shrink:0;margin-bottom:2px;
        }
        :where(body[data-page="chat"]) .m-col{display:flex;flex-direction:column}
        :where(body[data-page="chat"]) .msg-row.mine .m-col{align-items:flex-end}

        :where(body[data-page="chat"]) .bubble{
            max-width:min(72%,640px);padding:9px 13px;
            font-size:14px;font-weight:600;line-height:1.5;
            word-break:break-word;
            animation:bubIn .2s cubic-bezier(.34,1.56,.64,1) both;
        }
        :where(body[data-page="chat"]) .bubble.theirs{
            background:#fff;color:var(--text);
            border-radius:18px 18px 18px 4px;
            box-shadow:0 1px 4px rgba(0,0,0,.06);
        }
        :where(body[data-page="chat"]) .bubble.mine{
            background:var(--primary);color:#fff;
            border-radius:18px 18px 4px 18px;
        }
        :where(body[data-page="chat"]) .m-time{font-size:10px;font-weight:600;color:var(--muted);margin:2px 6px 4px}

        /* Typing */
        :where(body[data-page="chat"]) .typing-row{display:none;align-items:flex-end;gap:6px;padding:2px 0 6px}
        :where(body[data-page="chat"]) .typing-row.show{display:flex}
        :where(body[data-page="chat"]) .typing-bub{
            background:#fff;padding:9px 13px;
            border-radius:18px 18px 18px 4px;
            box-shadow:0 1px 4px rgba(0,0,0,.06);
            display:flex;gap:3px;align-items:center;
        }
        :where(body[data-page="chat"]) .t-dot{width:5px;height:5px;border-radius:50%;background:#8b9390;animation:tdot 1.2s infinite}
        :where(body[data-page="chat"]) .t-dot:nth-child(2){animation-delay:.2s}
        :where(body[data-page="chat"]) .t-dot:nth-child(3){animation-delay:.4s}

        /* Input */
        :where(body[data-page="chat"]) .inp-area{
            background:#fff;border-top:1px solid var(--border);
            padding:12px 14px;display:flex;align-items:flex-end;gap:8px;flex-shrink:0;
        }
        :where(body[data-page="chat"]) .inp-wrap{
            flex:1;background:#f4f5f0;border:1.5px solid var(--border);
            border-radius:16px;padding:9px 13px;transition:all .2s;
        }
        :where(body[data-page="chat"]) .inp-wrap:focus-within{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px rgba(56,84,232,.08)}
        :where(body[data-page="chat"]) .msg-inp{
            width:100%;background:none;border:none;outline:none;
            font-family:inherit;font-size:14px;font-weight:600;color:var(--text);
            resize:none;max-height:110px;line-height:1.5;display:block;
        }
        :where(body[data-page="chat"]) .msg-inp::placeholder{color:var(--muted)}
        :where(body[data-page="chat"]) .send-btn{
            width:40px;height:40px;border-radius:12px;
            background:var(--primary);border:none;cursor:pointer;
            display:flex;align-items:center;justify-content:center;
            transition:all .2s;flex-shrink:0;
        }
        :where(body[data-page="chat"]) .send-btn:hover:not(:disabled){background:var(--primary-dark);transform:scale(1.05)}
        :where(body[data-page="chat"]) .send-btn:disabled{opacity:.4;cursor:not-allowed}
        :where(body[data-page="chat"]) .send-btn:active:not(:disabled){transform:scale(.95)}

        /* Skel */
        :where(body[data-page="chat"]) .skel{background:linear-gradient(90deg,#eceee6 25%,#dde2dc 50%,#eceee6 75%);background-size:200% 100%;animation:shim 1.4s infinite;border-radius:10px}

        /* Toast */
        :where(body[data-page="chat"]) .toast{
            position:fixed;bottom:80px;left:50%;
            transform:translateX(-50%) translateY(16px);
            background:#1b2321;color:#fff;padding:11px 18px;
            border-radius:12px;font-weight:700;font-size:13px;
            z-index:400;opacity:0;pointer-events:none;
            transition:all .3s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;
        }
        :where(body[data-page="chat"]) .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
        :where(body[data-page="chat"]) .toast.err{background:#dc2626}
        @media(min-width:768px){:where(body[data-page="chat"]) .toast{bottom:24px}}
    
        /* Site Switcher */
        :where(body[data-page="chat"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="chat"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="chat"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="chat"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="chat"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="chat"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="chat"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="chat"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="chat"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="chat"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="chat"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="chat"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="chat"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="chat"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="chat"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── comments ── */
:where(html:has(body[data-page="comments"])), :where(body[data-page="comments"]), :where(body[data-page="comments"]) * { box-sizing: border-box; margin: 0; padding: 0; }
        body:where([data-page="comments"]) {
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            background: #f4f5f0;
            color: #101615;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        @media (min-width: 900px) {
            body:where([data-page="comments"]) { max-width: 640px; margin: 0 auto; border-left: 1px solid #eceee6; border-right: 1px solid #eceee6; }
        }

        /* ── CUSTOM SCROLLBAR ── */
        :where(body[data-page="comments"]) .comments-wrap::-webkit-scrollbar {
            width: 5px;
        }
        :where(body[data-page="comments"]) .comments-wrap::-webkit-scrollbar-track {
            background: transparent;
        }
        :where(body[data-page="comments"]) .comments-wrap::-webkit-scrollbar-thumb {
            background: #c3c9c0;
            border-radius: 99px;
        }
        :where(body[data-page="comments"]) .comments-wrap::-webkit-scrollbar-thumb:hover {
            background: #8b9390;
        }

        /* ── TOP BAR ── */
        :where(body[data-page="comments"]) .topbar {
            position: sticky; top: 0; z-index: 50;
            background: rgba(255,255,255,0.85);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(236, 238, 230, 0.8);
            padding: 0 16px;
            height: 60px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        :where(body[data-page="comments"]) .back-btn {
            width: 38px; height: 38px;
            border-radius: 50%;
            border: 1px solid #eceee6;
            background: white;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            color: #697371;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
            text-decoration: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        :where(body[data-page="comments"]) .back-btn:hover { background: #f4f5f0; color: #4b68ff; border-color: #dde2dc; transform: scale(1.03); }
        :where(body[data-page="comments"]) .back-btn svg { width: 18px; height: 18px; }
        :where(body[data-page="comments"]) .topbar-title {
            flex: 1;
            font-size: 16px; font-weight: 800;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            color: #101615;
            letter-spacing: -0.01em;
        }
        :where(body[data-page="comments"]) .topbar-count {
            font-size: 12px; font-weight: 700;
            color: #4b68ff;
            background: #eef0ff;
            padding: 4px 10px;
            border-radius: 99px;
            flex-shrink: 0;
        }

        /* ── PROJECT PREVIEW ── */
        :where(body[data-page="comments"]) .project-card {
            margin: 16px;
            background: white;
            border-radius: 16px;
            border: 1px solid #eceee6;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px;
            text-decoration: none;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 12px rgba(16, 22, 21, 0.015);
        }
        :where(body[data-page="comments"]) .project-card:hover {
            border-color: #dde2dc;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(75, 104, 255, 0.08);
        }
        :where(body[data-page="comments"]) .project-thumb {
            width: 64px; height: 48px;
            border-radius: 10px;
            object-fit: cover;
            background: #eceee6;
            flex-shrink: 0;
            border: 1px solid #eceee6;
        }
        :where(body[data-page="comments"]) .project-info { flex: 1; min-width: 0; }
        :where(body[data-page="comments"]) .project-name {
            font-size: 14px; font-weight: 800; color: #101615;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            margin-bottom: 3px;
        }
        :where(body[data-page="comments"]) .project-author {
            font-size: 12px; font-weight: 600; color: #8b9390;
        }
        :where(body[data-page="comments"]) .project-price {
            font-size: 14px; font-weight: 900; color: #4b68ff;
            flex-shrink: 0;
            background: #f0fdf4;
            color: #16a34a;
            padding: 4px 10px;
            border-radius: 8px;
        }

        /* ── LIKE SECTION ── */
        :where(body[data-page="comments"]) .like-section {
            margin: 0 16px 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        :where(body[data-page="comments"]) .like-big-btn {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 22px;
            border-radius: 999px;
            border: 1px solid #dde2dc;
            background: white;
            font-size: 13px; font-weight: 800;
            color: #697371;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            font-family: inherit;
            box-shadow: 0 2px 6px rgba(0,0,0,0.01);
        }
        :where(body[data-page="comments"]) .like-big-btn svg { width: 16px; height: 16px; transition: transform 0.2s; }
        :where(body[data-page="comments"]) .like-big-btn:hover { border-color: #f43f5e; color: #f43f5e; background: #fff1f2; transform: translateY(-1px); }
        :where(body[data-page="comments"]) .like-big-btn.liked {
            border-color: #f43f5e; color: #f43f5e; background: #fff1f2;
            box-shadow: 0 4px 12px rgba(244, 63, 94, 0.15);
        }
        :where(body[data-page="comments"]) .like-big-btn.liked svg { fill: #f43f5e; stroke: #f43f5e; transform: scale(1.15); }
        :where(body[data-page="comments"]) .like-big-btn.liked svg { animation: heartPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

        /* ── DIVIDER ── */
        :where(body[data-page="comments"]) .section-label {
            padding: 20px 16px 12px;
            font-size: 12px; font-weight: 800;
            color: #697371; text-transform: uppercase; letter-spacing: 0.08em;
            display: flex; align-items: center; gap: 6px;
        }

        /* ── COMMENTS LIST ── */
        :where(body[data-page="comments"]) .comments-wrap {
            flex: 1;
            overflow-y: auto;
            padding: 0 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding-bottom: 110px;
        }

        :where(body[data-page="comments"]) .comment-item {
            display: flex; gap: 12px;
            animation: fadeUp-5 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
        }
        :where(body[data-page="comments"]) .comment-avatar {
            width: 38px; height: 38px;
            border-radius: 50%; object-fit: cover;
            border: 2px solid #eef0ff; flex-shrink: 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        :where(body[data-page="comments"]) .comment-bubble {
            background: white;
            border: 1px solid #eceee6;
            border-radius: 16px; padding: 12px 16px;
            flex: 1; min-width: 0;
            box-shadow: 0 2px 8px rgba(16, 22, 21, 0.01);
            transition: border-color 0.2s;
        }
        :where(body[data-page="comments"]) .comment-bubble:hover {
            border-color: #dde2dc;
        }
        :where(body[data-page="comments"]) .comment-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 5px;
        }
        :where(body[data-page="comments"]) .comment-name { font-size: 13px; font-weight: 800; color: #101615; }
        :where(body[data-page="comments"]) .comment-time { font-size: 11px; color: #8b9390; font-weight: 600; }
        :where(body[data-page="comments"]) .comment-text { font-size: 14px; color: #333c3a; line-height: 1.6; word-break: break-word; }
        
        :where(body[data-page="comments"]) .comment-delete-btn {
            background: #f4f5f0; border: 1px solid #eceee6; cursor: pointer;
            color: #8b9390; width: 28px; height: 28px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0; align-self: flex-start; margin-left: 2px;
        }
        :where(body[data-page="comments"]) .comment-delete-btn:hover { color: #f43f5e; background: #fff1f2; border-color: #fee2e2; transform: scale(1.05); }

        :where(body[data-page="comments"]) .no-comments {
            text-align: center; padding: 64px 0;
            color: #8b9390; font-size: 14px; font-weight: 700;
            line-height: 1.5;
        }
        :where(body[data-page="comments"]) .no-comments svg {
            width: 54px; height: 54px;
            margin: 0 auto 16px; display: block;
            stroke: #c3c9c0;
            background: white;
            padding: 12px;
            border-radius: 50%;
            border: 1px solid #eceee6;
            box-shadow: 0 4px 10px rgba(0,0,0,0.01);
        }

        /* ── INPUT BAR (sticky bottom) ── */
        :where(body[data-page="comments"]) .input-bar {
            position: fixed; bottom: 0; left: 0; right: 0;
            background: rgba(255,255,255,0.85);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-top: 1px solid rgba(236, 238, 230, 0.8);
            padding: 12px 16px;
            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
            display: flex; gap: 12px; align-items: flex-end;
            z-index: 100;
            box-shadow: 0 -4px 20px rgba(16, 22, 21, 0.02);
        }
        :where(body[data-page="comments"]) .comment-input {
            flex: 1; background: #eceee6;
            border: 1.5px solid transparent;
            border-radius: 16px; padding: 12px 16px;
            font-size: 14px; font-weight: 500;
            font-family: inherit; outline: none;
            resize: none; min-height: 46px; max-height: 120px;
            line-height: 1.5;
            transition: all 0.2s;
        }
        :where(body[data-page="comments"]) .comment-input:focus { background: white; border-color: #4b68ff; box-shadow: 0 0 0 4px rgba(75, 104, 255, 0.1); }
        :where(body[data-page="comments"]) .comment-input::placeholder { color: #8b9390; }

        :where(body[data-page="comments"]) .send-btn {
            width: 46px; height: 46px;
            border-radius: 50%; border: none;
            background: #4b68ff; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 14px rgba(75,104,255,0.35);
        }
        :where(body[data-page="comments"]) .send-btn:hover { background: #3854e8; transform: scale(1.04) translateY(-1px); box-shadow: 0 6px 20px rgba(75,104,255,0.45); }
        :where(body[data-page="comments"]) .send-btn:active { transform: scale(0.98); }
        :where(body[data-page="comments"]) .send-btn:disabled { background: #dde2dc; cursor: not-allowed; transform: none; box-shadow: none; }
        :where(body[data-page="comments"]) .send-btn svg { width: 18px; height: 18px; color: white; }

        :where(body[data-page="comments"]) .login-prompt-bar {
            flex: 1; text-align: center;
            font-size: 14px; font-weight: 600;
            color: #8b9390; padding: 12px 0;
        }
        :where(body[data-page="comments"]) .login-prompt-bar a { color: #4b68ff; font-weight: 800; text-decoration: none; transition: color 0.2s; }
        :where(body[data-page="comments"]) .login-prompt-bar a:hover { color: #3854e8; text-decoration: underline; }

        /* ── SPINNER ── */
        :where(body[data-page="comments"]) .spinner {
            width: 26px; height: 26px;
            border: 2.5px solid #dde2dc;
            border-top-color: #4b68ff;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
            margin: 64px auto;
        }

/* ── cowork ── */
:where(html:has(body[data-page="cowork"])),:where(body[data-page="cowork"]),:where(body[data-page="cowork"]) *{box-sizing:border-box;margin:0;padding:0}
        :root:where(:has(body[data-page="cowork"])){--primary:#3854e8;--primary-dark:#2f49d4;--bg:#f4f5f0;--border:#dde2dc;--text:#101615;--muted:#697371;--nav-h:65px}
        html:where(:has(body[data-page="cowork"])),body:where([data-page="cowork"]){height:100%;overflow:hidden}
        body:where([data-page="cowork"]){font-family:'Gilroy','Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);opacity:0;transition:opacity .4s ease;-webkit-tap-highlight-color:transparent}
        body:where([data-page="cowork"]).loaded{opacity:1}
        @media(min-width:768px){
            body:where([data-page="cowork"]){transition:padding-left .4s cubic-bezier(.4,0,.2,1)}
        }
        /* Sidebar */
        :where(body[data-page="cowork"]) .sidebar{position:fixed;left:0;top:0;bottom:0;width:72px;background:#fff;border-right:1px solid #eceee6;display:none;flex-direction:column;align-items:center;padding:24px 0;z-index:50;transition:width .4s cubic-bezier(.4,0,.2,1);overflow:hidden}
        @media(min-width:768px){:where(body[data-page="cowork"]) .sidebar{display:flex}}
        :where(body[data-page="cowork"]) .sidebar:hover{width:220px;box-shadow:4px 0 24px rgba(0,0,0,.04)}
        :where(body[data-page="cowork"]) .sidebar-logo{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:900;letter-spacing:-.05em;color:var(--primary);padding:0 20px;margin-bottom:32px;white-space:nowrap;width:100%;text-decoration:none}
        :where(body[data-page="cowork"]) .sidebar-logo img{flex-shrink:0}
        :where(body[data-page="cowork"]) .sidebar-logo span,:where(body[data-page="cowork"]) .sidebar-link span,:where(body[data-page="cowork"]) .sidebar-btn span{opacity:0;transition:opacity .2s,transform .2s;transform:translateX(-8px)}
        :where(body[data-page="cowork"]) .sidebar:hover .sidebar-logo span,:where(body[data-page="cowork"]) .sidebar:hover .sidebar-link span,:where(body[data-page="cowork"]) .sidebar:hover .sidebar-btn span{opacity:1;transform:translateX(0)}
        :where(body[data-page="cowork"]) .sidebar-nav{flex:1;display:flex;flex-direction:column;gap:6px;width:100%;padding:0 10px}
        :where(body[data-page="cowork"]) .sidebar-link{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;color:#697371;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:all .2s}
        :where(body[data-page="cowork"]) .sidebar-link:hover,:where(body[data-page="cowork"]) .sidebar-link.active{background:#eef0ff;color:var(--primary)}
        :where(body[data-page="cowork"]) .sidebar-link svg{flex-shrink:0;width:20px;height:20px}
        :where(body[data-page="cowork"]) .sidebar-bottom{width:100%;padding:0 10px}
        :where(body[data-page="cowork"]) .sidebar-btn{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;border:none;transition:all .2s;width:100%;background:transparent;color:#697371}
        :where(body[data-page="cowork"]) .sidebar-btn:hover{background:#eceee6;color:var(--primary)}
        :where(body[data-page="cowork"]) .sidebar-btn svg{flex-shrink:0;width:20px;height:20px}
        :where(body[data-page="cowork"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .2s,margin-bottom .3s}
        :where(body[data-page="cowork"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px}
        :where(body[data-page="cowork"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px}
        :where(body[data-page="cowork"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s;white-space:nowrap;min-height:28px}
        :where(body[data-page="cowork"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0}
        :where(body[data-page="cowork"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%)}
        :where(body[data-page="cowork"]) .sw-text{font-size:12px;font-weight:800}
        :where(body[data-page="cowork"]) .sw-payable.sw-active{background:#eef0ff}:where(body[data-page="cowork"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px}
        :where(body[data-page="cowork"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390}:where(body[data-page="cowork"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4}
        :where(body[data-page="cowork"]) .sw-gelica.sw-active{background:#fdf2f8}:where(body[data-page="cowork"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px}
        :where(body[data-page="cowork"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390}:where(body[data-page="cowork"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4}
        /* Bottom nav */
        :where(body[data-page="cowork"]) .bnav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-top:1px solid rgba(221,226,220,.8);display:flex;justify-content:space-around;align-items:center;z-index:100;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -4px 24px rgba(0,0,0,.04)}
        @media(min-width:768px){:where(body[data-page="cowork"]) .bnav{display:none}}
        :where(body[data-page="cowork"]) .bnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;height:100%;gap:4px;color:#8b9390;text-decoration:none;position:relative;transition:color .25s}
        :where(body[data-page="cowork"]) .bnav-item.active{color:var(--primary)}
        :where(body[data-page="cowork"]) .bnav-item svg{width:22px;height:22px}
        :where(body[data-page="cowork"]) .bnav-item span{font-size:10px;font-weight:700}
        :where(body[data-page="cowork"]) .bnav-dot{position:absolute;top:0;width:28px;height:3px;background:var(--primary);border-radius:0 0 4px 4px;opacity:0;transform:scaleX(0);transition:opacity .25s,transform .25s}
        :where(body[data-page="cowork"]) .bnav-item.active .bnav-dot{opacity:1;transform:scaleX(1)}
        /* Layout */
        :where(body[data-page="cowork"]) .cw-wrap{position:fixed;inset:0;left:88px;display:flex;transition:left .4s cubic-bezier(.4,0,.2,1)}
        @media(max-width:767px){:where(body[data-page="cowork"]) .cw-wrap{left:0;bottom:var(--nav-h)}}
        @media(min-width:768px){body:where([data-page="cowork"]):has(.sidebar:hover) .cw-wrap{left:248px}}
        /* Left panel */
        :where(body[data-page="cowork"]) .left-panel{width:320px;flex-shrink:0;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column}
        @media(max-width:900px){:where(body[data-page="cowork"]) .left-panel{width:280px}}
        @media(max-width:767px){:where(body[data-page="cowork"]) .left-panel{position:absolute;inset:0;width:100%;z-index:20;transition:transform .3s ease}}
        @media(max-width:767px){:where(body[data-page="cowork"]) .left-panel.slide-out{transform:translateX(-100%)}}
        :where(body[data-page="cowork"]) .lp-head{padding:16px 14px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
        :where(body[data-page="cowork"]) .lp-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
        :where(body[data-page="cowork"]) .lp-title{font-size:19px;font-weight:900;letter-spacing:-.4px}
        :where(body[data-page="cowork"]) .lp-actions{display:flex;gap:6px}
        :where(body[data-page="cowork"]) .lp-btn{width:34px;height:34px;border-radius:10px;background:#eceee6;border:none;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:all .2s}
        :where(body[data-page="cowork"]) .lp-btn:hover{background:#eef0ff;color:var(--primary)}
        :where(body[data-page="cowork"]) .lp-search{display:flex;align-items:center;gap:8px;background:#f4f5f0;border:1.5px solid var(--border);border-radius:12px;padding:8px 12px;transition:all .2s}
        :where(body[data-page="cowork"]) .lp-search:focus-within{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px rgba(56,84,232,.08)}
        :where(body[data-page="cowork"]) .lp-search input{flex:1;background:none;border:none;outline:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--text)}
        :where(body[data-page="cowork"]) .lp-search input::placeholder{color:var(--muted)}
        :where(body[data-page="cowork"]) .lp-tabs{display:flex;padding:8px 14px 0;border-bottom:1px solid var(--border)}
        :where(body[data-page="cowork"]) .lp-tab{padding:8px 14px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap}
        :where(body[data-page="cowork"]) .lp-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
        :where(body[data-page="cowork"]) .room-list{flex:1;overflow-y:auto;padding:4px}
        :where(body[data-page="cowork"]) .room-list::-webkit-scrollbar{width:3px}
        :where(body[data-page="cowork"]) .room-list::-webkit-scrollbar-thumb{background:#dde2dc;border-radius:99px}
        :where(body[data-page="cowork"]) .room-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:14px;cursor:pointer;transition:background .15s}
        :where(body[data-page="cowork"]) .room-item:hover{background:#f4f5f0}
        :where(body[data-page="cowork"]) .room-item.active{background:#eef0ff}
        :where(body[data-page="cowork"]) .r-ava{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
        :where(body[data-page="cowork"]) .r-ava-ph{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:14px}
        :where(body[data-page="cowork"]) .r-group{background:linear-gradient(135deg,#4b68ff,#8b5cf6)}
        :where(body[data-page="cowork"]) .r-dm{background:linear-gradient(135deg,#3854e8,#4b68ff)}
        :where(body[data-page="cowork"]) .r-info{flex:1;min-width:0}
        :where(body[data-page="cowork"]) .r-name{font-size:14px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :where(body[data-page="cowork"]) .r-last{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :where(body[data-page="cowork"]) .r-time{font-size:11px;color:var(--muted);font-weight:600;flex-shrink:0}
        :where(body[data-page="cowork"]) .r-group-tag{display:inline-flex;align-items:center;gap:3px;background:#eceee6;color:#697371;font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;margin-top:2px}
        :where(body[data-page="cowork"]) .room-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px;text-align:center;color:var(--muted)}
        /* Right panel */
        :where(body[data-page="cowork"]) .right-panel{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
        :where(body[data-page="cowork"]) .cw-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);text-align:center;padding:40px}
        :where(body[data-page="cowork"]) .cw-empty-ico{width:68px;height:68px;border-radius:22px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
        /* Chat header */
        :where(body[data-page="cowork"]) .chat-head{background:#fff;border-bottom:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;gap:11px;flex-shrink:0}
        :where(body[data-page="cowork"]) .ch-back{display:none;width:34px;height:34px;border-radius:10px;background:#eceee6;border:none;cursor:pointer;color:var(--muted);align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
        @media(max-width:767px){:where(body[data-page="cowork"]) .ch-back{display:flex}}
        :where(body[data-page="cowork"]) .ch-ava{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
        :where(body[data-page="cowork"]) .ch-ava-ph{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:12px;flex-shrink:0}
        :where(body[data-page="cowork"]) .ch-info{flex:1;min-width:0}
        :where(body[data-page="cowork"]) .ch-name{font-size:15px;font-weight:900;color:var(--text)}
        :where(body[data-page="cowork"]) .ch-sub{font-size:12px;font-weight:600;color:var(--muted);margin-top:1px}
        :where(body[data-page="cowork"]) .ch-btn{width:34px;height:34px;border-radius:10px;background:#eceee6;border:none;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:all .2s}
        :where(body[data-page="cowork"]) .ch-btn:hover{background:#eef0ff;color:var(--primary)}
        /* Messages */
        :where(body[data-page="cowork"]) .msg-area{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 16px 6px;display:flex;flex-direction:column;gap:2px}
        :where(body[data-page="cowork"]) .msg-area::-webkit-scrollbar{width:3px}
        :where(body[data-page="cowork"]) .msg-area::-webkit-scrollbar-thumb{background:#dde2dc;border-radius:99px}
        :where(body[data-page="cowork"]) .date-div{display:flex;align-items:center;gap:10px;margin:10px 0;color:var(--muted)}
        :where(body[data-page="cowork"]) .date-div span{font-size:11px;font-weight:700;white-space:nowrap}
        :where(body[data-page="cowork"]) .date-div::before,:where(body[data-page="cowork"]) .date-div::after{content:'';flex:1;height:1px;background:var(--border)}
        :where(body[data-page="cowork"]) .msg-row{display:flex;align-items:flex-end;gap:6px;margin-bottom:1px}
        :where(body[data-page="cowork"]) .msg-row.mine{flex-direction:row-reverse}
        :where(body[data-page="cowork"]) .msg-row.mine+.msg-row:not(.mine),:where(body[data-page="cowork"]) .msg-row:not(.mine)+.msg-row.mine{margin-top:8px}
        :where(body[data-page="cowork"]) .m-ava{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-bottom:2px}
        :where(body[data-page="cowork"]) .m-ava-ph{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:9px;flex-shrink:0;margin-bottom:2px;background:linear-gradient(135deg,#3854e8,#4b68ff)}
        :where(body[data-page="cowork"]) .m-col{display:flex;flex-direction:column}
        :where(body[data-page="cowork"]) .msg-row.mine .m-col{align-items:flex-end}
        :where(body[data-page="cowork"]) .m-sender{font-size:11px;font-weight:700;color:var(--primary);margin-bottom:3px;padding:0 2px}
        :where(body[data-page="cowork"]) .msg-row.mine .m-sender{display:none}
        :where(body[data-page="cowork"]) .bubble{max-width:min(72%,640px);padding:9px 13px;font-size:14px;font-weight:600;line-height:1.5;overflow-wrap:break-word;word-break:normal;white-space:pre-wrap;animation:bubIn .2s cubic-bezier(.34,1.56,.64,1) both}
        :where(body[data-page="cowork"]) .bubble.theirs{background:#fff;color:var(--text);border-radius:18px 18px 18px 4px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
        :where(body[data-page="cowork"]) .bubble.mine{background:var(--primary);color:#fff;border-radius:18px 18px 4px 18px}
        :where(body[data-page="cowork"]) .m-time{font-size:10px;font-weight:600;color:var(--muted);margin:2px 6px 4px}
        /* File bubble */
        :where(body[data-page="cowork"]) .file-bub{display:flex;align-items:center;gap:10px;padding:10px 13px;max-width:260px;border-radius:14px;cursor:pointer;text-decoration:none;animation:bubIn .2s cubic-bezier(.34,1.56,.64,1) both}
        :where(body[data-page="cowork"]) .file-bub.theirs{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);border-radius:18px 18px 18px 4px}
        :where(body[data-page="cowork"]) .file-bub.mine{background:var(--primary);border-radius:18px 18px 4px 18px}
        :where(body[data-page="cowork"]) .file-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
        :where(body[data-page="cowork"]) .file-bub.theirs .file-ico{background:#eef0ff}
        :where(body[data-page="cowork"]) .file-bub.mine .file-ico{background:rgba(255,255,255,.2)}
        :where(body[data-page="cowork"]) .file-nm{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
        :where(body[data-page="cowork"]) .file-bub.theirs .file-nm{color:var(--text)}
        :where(body[data-page="cowork"]) .file-bub.mine .file-nm{color:#fff}
        :where(body[data-page="cowork"]) .file-sz{font-size:11px;font-weight:600;margin-top:1px}
        :where(body[data-page="cowork"]) .file-bub.theirs .file-sz{color:var(--muted)}
        :where(body[data-page="cowork"]) .file-bub.mine .file-sz{color:rgba(255,255,255,.7)}
        :where(body[data-page="cowork"]) .file-caption{font-size:12px;font-weight:500;margin-top:4px;opacity:.85;word-break:break-word;white-space:pre-wrap}
        :where(body[data-page="cowork"]) .file-bub.theirs .file-caption{color:var(--muted)}
        :where(body[data-page="cowork"]) .file-bub.mine .file-caption{color:rgba(255,255,255,.9)}
        /* Image bubble */
        :where(body[data-page="cowork"]) .img-bub{max-width:240px;border-radius:14px;overflow:hidden;cursor:pointer;animation:bubIn .2s cubic-bezier(.34,1.56,.64,1) both}
        :where(body[data-page="cowork"]) .img-bub img{width:100%;display:block}
        /* Input */
        :where(body[data-page="cowork"]) .inp-area{background:#fff;border-top:1px solid var(--border);padding:10px 12px;display:flex;align-items:flex-end;gap:8px;flex-shrink:0}
        :where(body[data-page="cowork"]) .inp-wrap{flex:1;background:#f4f5f0;border:1.5px solid var(--border);border-radius:16px;padding:9px 12px;transition:all .2s}
        :where(body[data-page="cowork"]) .inp-wrap:focus-within{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px rgba(56,84,232,.08)}
        :where(body[data-page="cowork"]) .msg-inp{width:100%;background:none;border:none;outline:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--text);resize:none;max-height:110px;line-height:1.5;display:block}
        :where(body[data-page="cowork"]) .msg-inp::placeholder{color:var(--muted)}
        :where(body[data-page="cowork"]) .attach-btn{width:40px;height:40px;border-radius:12px;background:#eceee6;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;color:var(--muted)}
        :where(body[data-page="cowork"]) .attach-btn:hover{background:#eef0ff;color:var(--primary)}
        :where(body[data-page="cowork"]) .send-btn{width:40px;height:40px;border-radius:12px;background:var(--primary);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
        :where(body[data-page="cowork"]) .send-btn:hover:not(:disabled){background:var(--primary-dark);transform:scale(1.05)}
        :where(body[data-page="cowork"]) .send-btn:disabled{opacity:.4;cursor:not-allowed}
        /* Upload bar */
        :where(body[data-page="cowork"]) .upload-bar{background:#eef0ff;border-top:1px solid var(--border);padding:8px 16px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--primary)}
        :where(body[data-page="cowork"]) .upload-prog{flex:1;height:4px;background:#e6eaff;border-radius:99px;overflow:hidden}
        :where(body[data-page="cowork"]) .upload-prog-fill{height:100%;background:var(--primary);border-radius:99px;transition:width .3s}
        /* Modals */
        :where(body[data-page="cowork"]) .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .25s}
        :where(body[data-page="cowork"]) .modal-overlay.open{opacity:1;pointer-events:all}
        :where(body[data-page="cowork"]) .modal-box{background:#fff;border-radius:20px;width:100%;max-width:420px;padding:24px;transform:translateY(20px) scale(.97);transition:transform .25s;max-height:80vh;overflow-y:auto}
        :where(body[data-page="cowork"]) .modal-overlay.open .modal-box{transform:none}
        :where(body[data-page="cowork"]) .modal-title{font-size:18px;font-weight:900;letter-spacing:-.4px;margin-bottom:16px}
        :where(body[data-page="cowork"]) .modal-label{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px;margin-top:14px;display:block}
        :where(body[data-page="cowork"]) .modal-input{width:100%;border:1.5px solid var(--border);border-radius:12px;padding:10px 13px;font-family:inherit;font-size:14px;font-weight:600;color:var(--text);outline:none;transition:all .2s;box-sizing:border-box}
        :where(body[data-page="cowork"]) .modal-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(56,84,232,.08)}
        :where(body[data-page="cowork"]) .modal-btn{width:100%;padding:12px;border-radius:12px;background:var(--primary);color:#fff;border:none;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:all .2s;margin-top:14px;display:block}
        :where(body[data-page="cowork"]) .modal-btn:hover{background:var(--primary-dark)}
        :where(body[data-page="cowork"]) .modal-btn.cancel{background:#eceee6;color:var(--muted)}
        :where(body[data-page="cowork"]) .modal-btn.cancel:hover{background:#dde2dc;color:var(--text)}
        :where(body[data-page="cowork"]) .usr-list{border:1.5px solid var(--border);border-radius:12px;margin-top:8px;max-height:200px;overflow-y:auto;display:none}
        :where(body[data-page="cowork"]) .usr-list.show{display:block}
        :where(body[data-page="cowork"]) .usr-row{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;transition:background .15s}
        :where(body[data-page="cowork"]) .usr-row:hover{background:#f4f5f0}
        :where(body[data-page="cowork"]) .usr-row.sel{background:#eef0ff}
        :where(body[data-page="cowork"]) .usr-ava{width:32px;height:32px;border-radius:50%;flex-shrink:0;object-fit:cover}
        :where(body[data-page="cowork"]) .usr-ava-ph{width:32px;height:32px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#3854e8,#4b68ff);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:900}
        :where(body[data-page="cowork"]) .usr-name{font-size:13px;font-weight:700;color:var(--text)}
        :where(body[data-page="cowork"]) .usr-un{font-size:11px;font-weight:600;color:var(--muted)}
        :where(body[data-page="cowork"]) .sel-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
        :where(body[data-page="cowork"]) .sel-tag{display:inline-flex;align-items:center;gap:5px;background:#eef0ff;color:var(--primary);border-radius:8px;padding:4px 10px;font-size:12px;font-weight:700}
        :where(body[data-page="cowork"]) .sel-tag-rm{background:none;border:none;color:var(--primary);cursor:pointer;font-size:14px;line-height:1;padding:0 0 0 2px}
        /* Members modal */
        :where(body[data-page="cowork"]) .mp-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px}
        :where(body[data-page="cowork"]) .mp-ava{width:34px;height:34px;border-radius:50%;flex-shrink:0;object-fit:cover}
        :where(body[data-page="cowork"]) .mp-ava-ph{width:34px;height:34px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#3854e8,#4b68ff);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:900}
        :where(body[data-page="cowork"]) .mp-role{font-size:10px;font-weight:700;color:var(--primary);background:#eef0ff;padding:2px 7px;border-radius:6px;margin-left:auto;flex-shrink:0}
        /* Skel */
        :where(body[data-page="cowork"]) .skel{background:linear-gradient(90deg,#eceee6 25%,#dde2dc 50%,#eceee6 75%);background-size:200% 100%;animation:shim 1.4s infinite;border-radius:10px}
        /* Toast */
        :where(body[data-page="cowork"]) .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(16px);background:#1b2321;color:#fff;padding:11px 18px;border-radius:12px;font-weight:700;font-size:13px;z-index:400;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);white-space:nowrap}
        :where(body[data-page="cowork"]) .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
        :where(body[data-page="cowork"]) .toast.err{background:#dc2626}
        @media(min-width:768px){:where(body[data-page="cowork"]) .toast{bottom:24px}}
        /* Image viewer */
        :where(body[data-page="cowork"]) .img-viewer{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:500;display:none;align-items:center;justify-content:center}
        :where(body[data-page="cowork"]) .img-viewer.open{display:flex}
        :where(body[data-page="cowork"]) .img-viewer img{max-width:90vw;max-height:90vh;border-radius:12px}
        :where(body[data-page="cowork"]) .iv-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1}

        /* Emoji picker */
        :where(body[data-page="cowork"]) .emoji-btn{width:40px;height:40px;border-radius:12px;background:#eceee6;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;font-size:18px}
        :where(body[data-page="cowork"]) .emoji-btn:hover{background:#eef0ff}
        :where(body[data-page="cowork"]) .emoji-picker{position:absolute;bottom:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.12);width:320px;max-height:300px;z-index:150;display:none;flex-direction:column;overflow:hidden}
        :where(body[data-page="cowork"]) .emoji-picker.open{display:flex}
        :where(body[data-page="cowork"]) .emoji-cats{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid var(--border);flex-shrink:0}
        :where(body[data-page="cowork"]) .emoji-cat{padding:6px 10px;border-radius:8px;border:none;background:none;cursor:pointer;font-size:16px;transition:background .15s}
        :where(body[data-page="cowork"]) .emoji-cat:hover,:where(body[data-page="cowork"]) .emoji-cat.active{background:#eef0ff}
        :where(body[data-page="cowork"]) .emoji-grid{flex:1;overflow-y:auto;padding:8px;display:flex;flex-wrap:wrap;gap:2px}
        :where(body[data-page="cowork"]) .emoji-grid::-webkit-scrollbar{width:3px}
        :where(body[data-page="cowork"]) .emoji-grid::-webkit-scrollbar-thumb{background:#dde2dc;border-radius:99px}
        :where(body[data-page="cowork"]) .em{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;font-size:20px;transition:background .15s;flex-shrink:0}
        :where(body[data-page="cowork"]) .em:hover{background:#eceee6}

        /* File preview (before send) */
        :where(body[data-page="cowork"]) .file-preview-bar{background:#fff;border-top:1px solid var(--border);padding:10px 14px;display:none;align-items:center;gap:12px;flex-shrink:0}
        :where(body[data-page="cowork"]) .fp-thumb{width:48px;height:48px;border-radius:10px;object-fit:cover;flex-shrink:0}
        :where(body[data-page="cowork"]) .fp-ico{width:48px;height:48px;border-radius:10px;background:#eef0ff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
        :where(body[data-page="cowork"]) .fp-info{flex:1;min-width:0}
        :where(body[data-page="cowork"]) .fp-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :where(body[data-page="cowork"]) .fp-size{font-size:11px;font-weight:600;color:var(--muted);margin-top:1px}
        :where(body[data-page="cowork"]) .fp-caption{width:100%;margin-top:6px;border:1.5px solid var(--border);border-radius:10px;padding:7px 10px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text);outline:none;transition:border-color .2s;resize:none;max-height:70px}
        :where(body[data-page="cowork"]) .fp-caption:focus{border-color:var(--primary)}
        :where(body[data-page="cowork"]) .fp-cancel{width:30px;height:30px;border-radius:8px;background:#fee2e2;border:none;cursor:pointer;color:#ef4444;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}

        /* File bubble hover */
        :where(body[data-page="cowork"]) .file-bub{position:relative}
        :where(body[data-page="cowork"]) .file-bub:hover .file-hover{opacity:1}
        :where(body[data-page="cowork"]) .file-hover{position:absolute;inset:0;border-radius:14px;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;pointer-events:none}
        :where(body[data-page="cowork"]) .file-bub.mine:hover .file-hover{background:rgba(0,0,0,.12)}

        /* Rate limit warning */
        :where(body[data-page="cowork"]) .rate-warn{background:#fef3c7;border-top:1px solid #fde68a;padding:8px 16px;font-size:12px;font-weight:700;color:#92400e;text-align:center;display:none}

/* ── creator-profile ── */
:root:where(:has(body[data-page="creator-profile"])) { --blue: #4b68ff; --blue-dark: #3854e8; --bg: #f4f5f0; }
        html:where(:has(body[data-page="creator-profile"])) { scroll-behavior: smooth; }
        :where(html:has(body[data-page="creator-profile"])), :where(body[data-page="creator-profile"]), :where(body[data-page="creator-profile"]) * { box-sizing: border-box; margin: 0; padding: 0; }
        body:where([data-page="creator-profile"]) { font-family: 'Gilroy','Plus Jakarta Sans',sans-serif; background: var(--bg); color: #101615; }

        /* ── SIDEBAR ── */
        :where(body[data-page="creator-profile"]) .sidebar {
            position: fixed; left: 0; top: 0; bottom: 0;
            width: 72px; background: white;
            border-right: 1px solid #eceee6;
            display: flex; flex-direction: column; align-items: center;
            padding: 24px 0; z-index: 100;
            transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            overflow: hidden;
        }
        :where(body[data-page="creator-profile"]) .sidebar:hover { width: 220px; }
        :where(body[data-page="creator-profile"]) .sidebar-logo {
            display: flex; align-items: center; gap: 10px;
            font-size: 20px; font-weight: 900; letter-spacing: -0.05em;
            color: #4b68ff; padding: 0 20px; margin-bottom: 32px;
            white-space: nowrap; width: 100%; text-decoration: none;
        }
        :where(body[data-page="creator-profile"]) .sidebar-logo svg { flex-shrink: 0; }
        :where(body[data-page="creator-profile"]) .sidebar-logo span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="creator-profile"]) .sidebar:hover .sidebar-logo span { opacity: 1; }
        :where(body[data-page="creator-profile"]) .sidebar-nav {
            flex: 1; display: flex; flex-direction: column;
            gap: 4px; width: 100%; padding: 0 10px;
        }
        :where(body[data-page="creator-profile"]) .sidebar-link {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 10px; border-radius: 12px;
            color: #697371; font-size: 14px; font-weight: 700;
            text-decoration: none; white-space: nowrap; transition: all 0.2s;
        }
        :where(body[data-page="creator-profile"]) .sidebar-link:hover, :where(body[data-page="creator-profile"]) .sidebar-link.active { background: #eef0ff; color: #4b68ff; }
        :where(body[data-page="creator-profile"]) .sidebar-link svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="creator-profile"]) .sidebar-link span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="creator-profile"]) .sidebar:hover .sidebar-link span { opacity: 1; }
        :where(body[data-page="creator-profile"]) .sidebar-bottom { width: 100%; padding: 0 10px; display: flex; flex-direction: column; gap: 8px; }
        :where(body[data-page="creator-profile"]) .sidebar-btn {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 10px; border-radius: 12px;
            font-size: 14px; font-weight: 700; white-space: nowrap;
            cursor: pointer; border: none; transition: all 0.2s; width: 100%;
        }
        :where(body[data-page="creator-profile"]) .sidebar-btn.signin { background: transparent; color: #697371; }
        :where(body[data-page="creator-profile"]) .sidebar-btn.signin:hover { background: #eceee6; color: #4b68ff; }
        :where(body[data-page="creator-profile"]) .sidebar-btn.start { background: #4b68ff; color: white; box-shadow: 0 4px 12px rgba(75,104,255,0.3); }
        :where(body[data-page="creator-profile"]) .sidebar-btn.start:hover { background: #3854e8; }
        :where(body[data-page="creator-profile"]) .sidebar-btn svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="creator-profile"]) .sidebar-btn span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="creator-profile"]) .sidebar:hover .sidebar-btn span { opacity: 1; }
        body:where([data-page="creator-profile"]) { padding-left: 72px; }
        /* CLS: profil render bo'lguncha footer viewport tashqarisida tursin */
        :where(body[data-page="creator-profile"]) main { min-height: calc(100vh - 80px); }
        @media (max-width: 768px) { :where(body[data-page="creator-profile"]) .sidebar { display: none; } body:where([data-page="creator-profile"]) { padding-left: 0; } }

        /* ── LOADER ── */
        :where(body[data-page="creator-profile"]) .loader-ring {
            width: 48px; height: 48px;
            border: 4px solid #e6eaff; border-top-color: #4b68ff;
            border-radius: 50%; animation: spin 0.8s linear infinite;
        }

        /* ── SKELETON ── */
        :where(body[data-page="creator-profile"]) .skel {
            background: linear-gradient(90deg,#eceee6 25%,#dde2dc 50%,#eceee6 75%);
            background-size: 200% 100%;
            animation: shimmer 1.4s infinite;
        }

        /* ── BACK BUTTON ── */
        :where(body[data-page="creator-profile"]) .back-btn {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 10px 20px; background: white;
            border: 1.5px solid #dde2dc; border-radius: 999px;
            font-size: 13px; font-weight: 800; color: #4d5654;
            text-decoration: none; cursor: pointer;
            transition: all 0.25s; margin-bottom: 28px;
        }
        :where(body[data-page="creator-profile"]) .back-btn:hover { border-color: #4b68ff; color: #4b68ff; transform: translateX(-3px); }

        /* ── HERO BANNER ── */
        :where(body[data-page="creator-profile"]) .profile-hero {
            background: linear-gradient(135deg, #e6eaff 0%, #ede9fe 100%);
            border-radius: 24px;
            padding: 40px;
            margin-bottom: 28px;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.8);
        }
        :where(body[data-page="creator-profile"]) .profile-hero::before {
            content: '';
            position: absolute; top: -40px; right: -40px;
            width: 200px; height: 200px;
            background: rgba(75,104,255,0.12);
            border-radius: 50%;
        }
        :where(body[data-page="creator-profile"]) .profile-hero::after {
            content: '';
            position: absolute; bottom: -30px; left: 30%;
            width: 140px; height: 140px;
            background: rgba(139,92,246,0.08);
            border-radius: 50%;
        }

        /* ── AVATAR ── */
        :where(body[data-page="creator-profile"]) .profile-avatar {
            width: 110px; height: 110px;
            border-radius: 24px; object-fit: cover;
            border: 4px solid white;
            box-shadow: 0 8px 28px rgba(75,104,255,0.22);
            flex-shrink: 0; transition: transform 0.4s ease;
        }
        :where(body[data-page="creator-profile"]) .profile-avatar:hover { transform: scale(1.05) rotate(-2deg); }

        /* ── STAT CHIPS ── */
        :where(body[data-page="creator-profile"]) .stat-chip {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: 4px;
            background: white; border-radius: 16px;
            padding: 18px 24px; flex: 1;
            border: 1.5px solid rgba(75,104,255,0.1);
            box-shadow: 0 2px 12px rgba(75,104,255,0.06);
            transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
        }
        :where(body[data-page="creator-profile"]) .stat-chip:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(75,104,255,0.14);
            border-color: #4b68ff;
        }
        :where(body[data-page="creator-profile"]) .stat-chip-val { font-size: 24px; font-weight: 900; color: #4b68ff; }
        :where(body[data-page="creator-profile"]) .stat-chip-lbl { font-size: 10px; font-weight: 800; color: #8b9390; text-transform: uppercase; letter-spacing: 0.08em; }

        /* ── CONTACT ROW ── */
        :where(body[data-page="creator-profile"]) .contact-row {
            display: flex; align-items: center; gap: 14px;
            padding: 14px 16px; border-radius: 14px;
            background: #f4f5f0; border: 1px solid #eceee6;
            text-decoration: none; color: #101615;
            transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
        }
        :where(body[data-page="creator-profile"]) .contact-row:hover {
            background: white; border-color: #4b68ff;
            transform: translateX(4px);
            box-shadow: 0 6px 20px rgba(75,104,255,0.1);
        }
        :where(body[data-page="creator-profile"]) .contact-icon {
            width: 40px; height: 40px; border-radius: 12px;
            background: #e6eaff; display: flex; align-items: center;
            justify-content: center; color: #4b68ff; flex-shrink: 0;
            transition: transform 0.3s ease;
        }
        :where(body[data-page="creator-profile"]) .contact-row:hover .contact-icon { transform: scale(1.1); }

        /* ── PROJECT CARD ── */
        :where(body[data-page="creator-profile"]) .pcard {
            background: white; border-radius: 16px;
            border: 1.5px solid #eceee6; overflow: hidden;
            cursor: pointer; position: relative;
            transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
            animation: fadeUp 0.45s ease both;
        }
        :where(body[data-page="creator-profile"]) .pcard:hover {
            box-shadow: 0 10px 36px -8px rgba(75,104,255,0.24), 0 2px 8px rgba(75,104,255,0.08);
            border-color: #4b68ff; transform: translateY(-5px); z-index: 10;
        }

        :where(body[data-page="creator-profile"]) .pcard-img-wrap { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #eef0ff; }
        :where(body[data-page="creator-profile"]) .pcard-img-wrap img {
            width: 100%; height: 100%; object-fit: cover; display: block;
            transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
        }
        :where(body[data-page="creator-profile"]) .pcard:hover .pcard-img-wrap img { transform: scale(1.09); }

        :where(body[data-page="creator-profile"]) .pcard-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(10,20,60,0.55) 0%, transparent 55%);
        }

        /* Hover preview */
        :where(body[data-page="creator-profile"]) .pcard-preview {
            position: absolute; inset: 0;
            background: rgba(56,84,232,0.95);
            display: flex; flex-direction: column;
            justify-content: center; align-items: center;
            gap: 10px; opacity: 0; transition: opacity 0.3s;
            border-radius: inherit; z-index: 5; padding: 20px; text-align: center;
        }
        :where(body[data-page="creator-profile"]) .pcard:hover .pcard-preview { opacity: 1; }
        :where(body[data-page="creator-profile"]) .pcard-preview-title { font-size: 15px; font-weight: 800; color: white; line-height: 1.3; }
        :where(body[data-page="creator-profile"]) .pcard-preview-price { font-size: 20px; font-weight: 900; color: white; }
        :where(body[data-page="creator-profile"]) .pcard-preview-btn {
            background: white; color: #4b68ff;
            font-size: 12px; font-weight: 800;
            padding: 9px 22px; border-radius: 999px;
            transition: transform 0.2s; margin-top: 4px;
        }
        :where(body[data-page="creator-profile"]) .pcard-preview-btn:hover { transform: scale(1.06); }

        :where(body[data-page="creator-profile"]) .pcard-type-badge {
            position: absolute; bottom: 12px; left: 14px;
            background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
            padding: 4px 12px; border-radius: 999px;
            font-size: 10px; font-weight: 800; color: #4b68ff;
            text-transform: uppercase; letter-spacing: 0.06em;
        }

        :where(body[data-page="creator-profile"]) .pcard-body { padding: 18px 20px 20px; }
        :where(body[data-page="creator-profile"]) .pcard-title {
            font-size: 14px; font-weight: 800; color: #101615;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            margin-bottom: 10px; transition: color 0.2s;
        }
        :where(body[data-page="creator-profile"]) .pcard:hover .pcard-title { color: #4b68ff; }
        :where(body[data-page="creator-profile"]) .pcard-meta { display: flex; justify-content: space-between; align-items: center; }
        :where(body[data-page="creator-profile"]) .pcard-price { font-size: 15px; font-weight: 900; color: #4b68ff; }
        :where(body[data-page="creator-profile"]) .pcard-views {
            display: flex; align-items: center; gap: 4px;
            font-size: 11px; font-weight: 700; color: #8b9390;
        }

        /* ── SECTION CARD ── */
        :where(body[data-page="creator-profile"]) .section-card {
            background: white; border-radius: 20px;
            border: 1px solid #eceee6; padding: 28px 32px;
            box-shadow: 0 2px 12px rgba(75,104,255,0.04);
            transition: all 0.4s ease;
        }
        :where(body[data-page="creator-profile"]) .section-card:hover {
            box-shadow: 0 10px 36px rgba(75,104,255,0.08);
            border-color: rgba(75,104,255,0.1);
        }

        /* ── EMPTY STATE ── */
        :where(body[data-page="creator-profile"]) .empty-state { text-align: center; padding: 64px 0; color: #c3c9c0; }
        :where(body[data-page="creator-profile"]) .empty-state svg { margin: 0 auto 16px; }
        :where(body[data-page="creator-profile"]) .empty-state p { font-size: 15px; font-weight: 700; }

        /* ── BADGE ── */
        :where(body[data-page="creator-profile"]) .badge-pill {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 5px 14px; border-radius: 999px;
            font-size: 11px; font-weight: 800;
            text-transform: uppercase; letter-spacing: 0.06em;
        }
        :where(body[data-page="creator-profile"]) .badge-blue { background: #e6eaff; color: #4b68ff; }
        :where(body[data-page="creator-profile"]) .badge-green { background: #dcfce7; color: #16a34a; }
        :where(body[data-page="creator-profile"]) .badge-violet { background: #ede9fe; color: #7c3aed; }

        /* ── FOOTER ── */
        :where(body[data-page="creator-profile"]) .footer-bg { background: white; border-top: 1px solid #eceee6; }

        /* ── TRUST CARD ── */
        :where(body[data-page="creator-profile"]) .trust-card {
            background: linear-gradient(135deg, #4b68ff 0%, #4b68ff 100%);
            border-radius: 20px; padding: 28px; color: white;
            position: relative; overflow: hidden;
        }
        :where(body[data-page="creator-profile"]) .trust-card::before {
            content: ''; position: absolute; top: -20px; right: -20px;
            width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%;
        }

        /* ── NEW ANIMATIONS ── */
        :where(body[data-page="creator-profile"]) .animate-profile { animation: fadeInUpProfile 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }
        :where(body[data-page="creator-profile"]) .delay-100 { animation-delay: 100ms; }
        :where(body[data-page="creator-profile"]) .delay-200 { animation-delay: 200ms; }
        :where(body[data-page="creator-profile"]) .delay-300 { animation-delay: 300ms; }
    
        /* Site Switcher */
        :where(body[data-page="creator-profile"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="creator-profile"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="creator-profile"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="creator-profile"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="creator-profile"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="creator-profile"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="creator-profile"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="creator-profile"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="creator-profile"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="creator-profile"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="creator-profile"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="creator-profile"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="creator-profile"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="creator-profile"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="creator-profile"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── creators ── */
:root:where(:has(body[data-page="creators"])) { 
            --primary: #4b68ff; 
            --bg: #f4f5f0; 
            --nav-height: 65px;
        }
        :where(html:has(body[data-page="creators"])), :where(body[data-page="creators"]), :where(body[data-page="creators"]) * { box-sizing: border-box; margin: 0; padding: 0; }
        
        /* Faqat kompyuterda zoom */
        
        html:where(:has(body[data-page="creators"])) { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
        
        body:where([data-page="creators"]) { 
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif; 
            background: var(--bg); 
            color: #101615; 
            padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 10px));
            padding-left: 0;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;

            /* Sahifa yuklanishidagi silliq effekt */
            opacity: 0;
            transition: opacity 0.6s ease-in;
        }

        body:where([data-page="creators"]).loaded {
            opacity: 1;
        }

        /* Sidebar hover bo'lganda sahifaning silliq qisqarishi */
        @media (min-width: 768px) {
            body:where([data-page="creators"]) { 
                padding-left: 72px; 
                padding-bottom: 0; 
                /* Body tezligi sidebar bilan to'liq bir xillashtirildi */
                transition: padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease-in !important;
            }
            body:where([data-page="creators"]):has(.sidebar:hover) {
                padding-left: 220px !important;
            }
        }

        /* INPUT */
        :where(body[data-page="creators"]) .input-pill {
            background: rgba(255, 255, 255, 0.28);
            border: 1.5px solid rgba(255, 255, 255, 0.45);
            -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
            transition: all 0.3s;
        }
        :where(body[data-page="creators"]) .input-pill:focus-within {
            background: rgba(255, 255, 255, 0.48);
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(75,104,255,0.1);
        }
        @media (min-width: 768px) {
        }

        /* CREATOR CARD */
        :where(body[data-page="creators"]) .ccard {
            background: white;
            border-radius: 16px;
            border: 1px solid #eceee6;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
            animation: fadeUp 0.45s ease both;
        }
        @media (hover: hover) {
            :where(body[data-page="creators"]) .ccard:hover {
                box-shadow: 0 8px 32px -8px rgba(75, 104, 255, 0.22), 0 2px 8px rgba(75,104,255,0.08);
                border-color: #4b68ff;
                transform: translateY(-4px);
                z-index: 10;
            }
        }

        :where(body[data-page="creators"]) .ccard-photo-wrap {
            position: relative;
            aspect-ratio: 3/4;
            overflow: hidden;
            background: #eef0ff;
        }
        :where(body[data-page="creators"]) .ccard-photo-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
            display: block;
        }
        @media (hover: hover) { :where(body[data-page="creators"]) .ccard:hover .ccard-photo-wrap img { transform: scale(1.08); } }
        
        :where(body[data-page="creators"]) .ccard-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(10,25,70,0.7) 0%, transparent 60%);
        }
        :where(body[data-page="creators"]) .ccard-class-badge {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(8px);
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 9px;
            font-weight: 800;
            color: #4b68ff;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        @media (min-width: 768px) {
            :where(body[data-page="creators"]) .ccard-class-badge { bottom: 12px; left: 14px; font-size: 10px; padding: 4px 12px; }
        }

        /* HOVER PREVIEW */
        :where(body[data-page="creators"]) .ccard-preview {
            position: absolute;
            inset: 0;
            background: rgba(56,84,232,0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8px;
            opacity: 0;
            transition: opacity 0.3s ease;
            border-radius: inherit;
            z-index: 5;
            padding: 16px;
            text-align: center;
            pointer-events: none;
        }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .ccard-preview { gap: 10px; padding: 24px; } }

        @media (hover: hover) {
            :where(body[data-page="creators"]) .ccard:hover .ccard-preview { opacity: 1; pointer-events: auto; }
        }
        :where(body[data-page="creators"]) .ccard.active-preview .ccard-preview { opacity: 1; pointer-events: auto; z-index: 20; }

        :where(body[data-page="creators"]) .ccard-preview-avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid rgba(255,255,255,0.4);
            margin-bottom: 2px;
        }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .ccard-preview-avatar { width: 64px; height: 64px; margin-bottom: 4px; } }

        :where(body[data-page="creators"]) .ccard-preview-name { font-size: 14px; font-weight: 800; color: white; line-height: 1.2; }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .ccard-preview-name { font-size: 16px; line-height: 1.3; } }

        :where(body[data-page="creators"]) .ccard-preview-class {
            font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.75);
            background: rgba(255,255,255,0.15); padding: 3px 10px; border-radius: 999px;
        }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .ccard-preview-class { font-size: 11px; padding: 3px 12px; } }

        :where(body[data-page="creators"]) .ccard-preview-stats { display: flex; gap: 16px; margin-top: 2px; }
        :where(body[data-page="creators"]) .ccard-preview-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
        :where(body[data-page="creators"]) .ccard-preview-stat-val { font-size: 16px; font-weight: 900; color: white; }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .ccard-preview-stat-val { font-size: 18px; } }
        :where(body[data-page="creators"]) .ccard-preview-stat-lbl { font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.08em; }

        :where(body[data-page="creators"]) .ccard-preview-btn {
            margin-top: 6px; background: white; color: #4b68ff; font-size: 11px; font-weight: 800;
            padding: 8px 18px; border-radius: 999px; display: flex; align-items: center; gap: 6px; transition: transform 0.2s;
        }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .ccard-preview-btn { font-size: 12px; padding: 9px 22px; } }
        @media (hover: hover) { :where(body[data-page="creators"]) .ccard-preview-btn:hover { transform: scale(1.05); } }

        /* Card body */
        :where(body[data-page="creators"]) .ccard-body { padding: 14px 16px 16px; }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .ccard-body { padding: 18px 20px 20px; } }

        :where(body[data-page="creators"]) .ccard-name {
            font-size: 14px; font-weight: 800; color: #101615; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; transition: color 0.2s;
        }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .ccard-name { font-size: 15px; } }
        @media (hover: hover) { :where(body[data-page="creators"]) .ccard:hover .ccard-name { color: #4b68ff; } }

        :where(body[data-page="creators"]) .ccard-meta { display: flex; justify-content: space-between; align-items: center; }
        :where(body[data-page="creators"]) .ccard-projects { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #4b68ff; }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .ccard-projects { font-size: 12px; gap: 5px; } }
        :where(body[data-page="creators"]) .ccard-sinf { font-size: 10px; font-weight: 700; color: #8b9390; background: #f4f5f0; padding: 3px 8px; border-radius: 999px; }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .ccard-sinf { font-size: 11px; padding: 3px 10px; } }

        /* SORT select */
        :where(body[data-page="creators"]) .custom-select-wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }
        @media (min-width: 640px) { :where(body[data-page="creators"]) .custom-select-wrap { width: auto; } }
        :where(body[data-page="creators"]) .custom-select-wrap select {
            appearance: none; -webkit-appearance: none; background: white;
            border: 1.5px solid #dde2dc; border-radius: 999px;
            padding: 12px 40px 12px 20px; font-size: 13px; font-weight: 700;
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            color: #101615; outline: none; cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s;
            width: 100%; min-width: 160px;
        }
        @media (min-width: 640px) { :where(body[data-page="creators"]) .custom-select-wrap select { padding: 14px 44px 14px 20px; min-width: 180px; } }
        :where(body[data-page="creators"]) .custom-select-wrap select:hover { border-color: #4b68ff; }
        :where(body[data-page="creators"]) .custom-select-wrap select:focus { border-color: #4b68ff; box-shadow: 0 0 0 4px rgba(75,104,255,0.1); }
        :where(body[data-page="creators"]) .custom-select-wrap .select-arrow { position: absolute; right: 16px; pointer-events: none; color: #697371; display: flex; align-items: center; }
        :where(body[data-page="creators"]) .custom-select-wrap select:focus ~ .select-arrow { color: #4b68ff; }

        /* LOAD MORE */
        :where(body[data-page="creators"]) .load-more-btn {
            background: white; border: 2px solid #dde2dc; border-radius: 999px;
            padding: 12px 32px; font-size: 13px; font-weight: 800; color: #4d5654;
            cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px;
        }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .load-more-btn { padding: 14px 40px; font-size: 14px; } }
        :where(body[data-page="creators"]) .load-more-btn:hover { border-color: #4b68ff; color: #4b68ff; box-shadow: 0 8px 20px -6px rgba(75,104,255,0.2); }
        :where(body[data-page="creators"]) .load-more-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        :where(body[data-page="creators"]) .load-more-btn.hidden { display: none !important; }

        /* Skeleton */
        :where(body[data-page="creators"]) .skel {
            background: linear-gradient(90deg,#eceee6 25%,#dde2dc 50%,#eceee6 75%);
            background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 12px;
        }

        /* Hero */
        :where(body[data-page="creators"]) .hero-gradient {
            background: transparent;
        }
        :where(body[data-page="creators"]) .creators-visual {
            display: flow-root;
            background-image: url('https://img1.teletype.in/files/c3/35/c3358a7b-7959-47ba-b9ac-6b627e7830c5.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center calc(50% - 180px);
            background-attachment: fixed;
            border-radius: 16px;
            margin-bottom: 24px;
        }

        /* Footer */
        :where(body[data-page="creators"]) .footer-bg { background: white; border-top: 1px solid #eceee6; }

        /* Spinner */
        :where(body[data-page="creators"]) .spinner {
            width: 18px; height: 18px; border: 2.5px solid #dde2dc;
            border-top-color: #4b68ff; border-radius: 50%; animation: spin 0.7s linear infinite;
        }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .spinner { width: 20px; height: 20px; } }

        /* ── Sidebar ── */
        :where(body[data-page="creators"]) .sidebar {
            position: fixed; left: 0; top: 0; bottom: 0; width: 72px;
            background: white; border-right: 1px solid #eceee6;
            display: none; flex-direction: column; align-items: center;
            padding: 24px 0; z-index: 50; 
            /* Sidebar tezligi body bilan to'liq bir xillashtirildi */
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
            overflow: hidden;
        }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .sidebar { display: flex; } }
        :where(body[data-page="creators"]) .sidebar:hover { width: 220px; box-shadow: 4px 0 24px rgba(0,0,0,0.02); }
        :where(body[data-page="creators"]) .sidebar-logo {
            display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 900;
            letter-spacing: -0.05em; color: #4b68ff; padding: 0 20px; margin-bottom: 32px;
            white-space: nowrap; width: 100%; text-decoration: none;
        }
        :where(body[data-page="creators"]) .sidebar-logo img { flex-shrink: 0; }
        :where(body[data-page="creators"]) .sidebar-logo span { opacity: 0; transition: opacity 0.2s, transform 0.2s; transform: translateX(-10px); }
        :where(body[data-page="creators"]) .sidebar:hover .sidebar-logo span { opacity: 1; transform: translateX(0); }
        
        :where(body[data-page="creators"]) .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 10px; }
        :where(body[data-page="creators"]) .sidebar-link {
            display: flex; align-items: center; gap: 14px; padding: 12px 14px;
            border-radius: 12px; color: #697371; font-size: 14px; font-weight: 700;
            text-decoration: none; white-space: nowrap; transition: all 0.2s;
        }
        :where(body[data-page="creators"]) .sidebar-link:hover, :where(body[data-page="creators"]) .sidebar-link.active { background: #eef0ff; color: #4b68ff; }
        :where(body[data-page="creators"]) .sidebar-link svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="creators"]) .sidebar-link span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="creators"]) .sidebar:hover .sidebar-link span { opacity: 1; }
        
        :where(body[data-page="creators"]) .sidebar-bottom { width: 100%; padding: 0 10px; display: flex; flex-direction: column; gap: 8px; }
        :where(body[data-page="creators"]) .sidebar-btn {
            display: flex; align-items: center; gap: 12px; padding: 12px 14px;
            border-radius: 12px; font-size: 14px; font-weight: 700; white-space: nowrap;
            cursor: pointer; border: none; transition: all 0.2s; width: 100%;
        }
        :where(body[data-page="creators"]) .sidebar-btn.signin { background: transparent; color: #697371; }
        :where(body[data-page="creators"]) .sidebar-btn.signin:hover { background: #eceee6; color: #4b68ff; }
        :where(body[data-page="creators"]) .sidebar-btn.start { background: #4b68ff; color: white; box-shadow: 0 4px 12px rgba(75,104,255,0.3); }
        :where(body[data-page="creators"]) .sidebar-btn.start:hover { background: #3854e8; transform: translateY(-1px); }
        :where(body[data-page="creators"]) .sidebar-btn svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="creators"]) .sidebar-btn span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="creators"]) .sidebar:hover .sidebar-btn span { opacity: 1; }

        /* ── Bottom Nav ── */
        :where(body[data-page="creators"]) .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-height);
            background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(221, 226, 220, 0.8);
            display: flex; justify-content: space-around; align-items: center; z-index: 100;
            padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 24px rgba(0,0,0,0.04);
        }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .bottom-nav { display: none; } }
        :where(body[data-page="creators"]) .bottom-nav-item {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            flex: 1; height: 100%; gap: 5px; color: #8b9390; text-decoration: none;
            position: relative; transition: color 0.3s ease;
        }
        :where(body[data-page="creators"]) .bottom-nav-item.active { color: var(--primary); }
        :where(body[data-page="creators"]) .bottom-nav-item svg { width: 22px; height: 22px; transition: transform 0.3s, stroke-width 0.3s; }
        :where(body[data-page="creators"]) .bottom-nav-item.active svg { transform: translateY(-2px); stroke-width: 2.5; }
        :where(body[data-page="creators"]) .bottom-nav-item span { font-size: 10px; font-weight: 700; transition: opacity 0.3s, transform 0.3s; }
        :where(body[data-page="creators"]) .bottom-nav-indicator {
            position: absolute; top: 0; width: 32px; height: 3px; background: var(--primary);
            border-radius: 0 0 4px 4px; opacity: 0; transform: scaleX(0); transition: opacity 0.3s, transform 0.3s;
        }
        :where(body[data-page="creators"]) .bottom-nav-item.active .bottom-nav-indicator { opacity: 1; transform: scaleX(1); }

        /* USER MODAL STYLE UPDATES */
        :where(body[data-page="creators"]) .user-modal-backdrop {
            position: fixed; inset: 0; background: rgba(16, 22, 21, 0.55); backdrop-filter: blur(6px);
            z-index: 200; display: flex; align-items: center; justify-content: center;
            padding: 16px; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s;
        }
        :where(body[data-page="creators"]) .user-modal-backdrop.open { opacity: 1; pointer-events: all; visibility: visible; transition: opacity 0.3s, visibility 0s; }
        :where(body[data-page="creators"]) .user-modal {
            background: white; border-radius: 20px; width: 100%; max-width: 860px; max-height: 90vh;
            overflow: hidden; display: flex; flex-direction: column;
            transform: translateY(32px) scale(0.97); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
            box-shadow: 0 32px 80px -16px rgba(75,104,255,0.18), 0 8px 24px rgba(0,0,0,0.1);
        }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .user-modal { border-radius: 24px; padding: 20px; } }
        :where(body[data-page="creators"]) .user-modal-backdrop.open .user-modal { transform: translateY(0) scale(1); }
        :where(body[data-page="creators"]) .user-modal-header {
            background: linear-gradient(135deg, #eef0ff 0%, #f5f3ff 100%);
            padding: 20px 24px; display: flex; align-items: center; gap: 16px;
            border-bottom: 1px solid #dde2dc; flex-shrink: 0;
        }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .user-modal-header { padding: 28px 32px 24px; gap: 20px; } }
        
        :where(body[data-page="creators"]) .user-modal-avatar {
            width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
            border: 3px solid white; box-shadow: 0 4px 16px rgba(75,104,255,0.2); flex-shrink: 0;
        }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .user-modal-avatar { width: 72px; height: 72px; } }
        
        :where(body[data-page="creators"]) .user-modal-info { flex: 1; min-width: 0; }
        :where(body[data-page="creators"]) .user-modal-name { font-size: 18px; font-weight: 900; color: #101615; margin-bottom: 4px; }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .user-modal-name { font-size: 22px; } }
        
        :where(body[data-page="creators"]) .user-modal-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        :where(body[data-page="creators"]) .user-modal-badge { background: #4b68ff; color: white; font-size: 10px; font-weight: 800; padding: 3px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
        :where(body[data-page="creators"]) .user-modal-stat { font-size: 11px; font-weight: 700; color: #697371; display: flex; align-items: center; gap: 4px; }
        
        :where(body[data-page="creators"]) .user-modal-close {
            width: 36px; height: 36px; border-radius: 50%; background: white; border: 1.5px solid #dde2dc;
            display: flex; align-items: center; justify-content: center; cursor: pointer; color: #697371;
            transition: all 0.2s; flex-shrink: 0;
        }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .user-modal-close { width: 40px; height: 40px; } }
        :where(body[data-page="creators"]) .user-modal-close:hover { background: #fee2e2; border-color: #fca5a5; color: #ef4444; }
        
        :where(body[data-page="creators"]) .user-modal-body { overflow-y: auto; padding: 20px 24px; flex: 1; }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .user-modal-body { padding: 28px 32px; } }
        
        :where(body[data-page="creators"]) .user-modal-section-title { font-size: 12px; font-weight: 800; color: #8b9390; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
        
        :where(body[data-page="creators"]) .modal-projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
        @media (min-width: 640px) { :where(body[data-page="creators"]) .modal-projects-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } }
        
        :where(body[data-page="creators"]) .modal-pcard { background: #f4f5f0; border: 1.5px solid #dde2dc; border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.3s; animation: fadeUp 0.4s ease both; }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .modal-pcard { border-radius: 14px; } }
        :where(body[data-page="creators"]) .modal-pcard:hover { border-color: #4b68ff; box-shadow: 0 8px 24px -8px rgba(75,104,255,0.22); transform: translateY(-3px); }
        :where(body[data-page="creators"]) .modal-pcard-img { aspect-ratio: 16/9; overflow: hidden; background: #e6eaff; position: relative; }
        :where(body[data-page="creators"]) .modal-pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        :where(body[data-page="creators"]) .modal-pcard:hover .modal-pcard-img img { transform: scale(1.07); }
        :where(body[data-page="creators"]) .modal-pcard-body { padding: 12px 14px; }
        :where(body[data-page="creators"]) .modal-pcard-title { font-size: 12px; font-weight: 800; color: #101615; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        @media (min-width: 768px) { :where(body[data-page="creators"]) .modal-pcard-title { font-size: 13px; } }
        :where(body[data-page="creators"]) .modal-pcard:hover .modal-pcard-title { color: #4b68ff; }
        :where(body[data-page="creators"]) .modal-pcard-footer { display: flex; justify-content: space-between; align-items: center; }
        :where(body[data-page="creators"]) .modal-pcard-price { font-size: 13px; font-weight: 900; color: #4b68ff; }
        :where(body[data-page="creators"]) .modal-pcard-type { font-size: 9px; font-weight: 800; color: #8b9390; background: #dde2dc; padding: 2px 6px; border-radius: 999px; text-transform: uppercase; }
        
        :where(body[data-page="creators"]) .modal-empty { text-align: center; padding: 40px 0; color: #c3c9c0; }
        :where(body[data-page="creators"]) .modal-empty svg { margin: 0 auto 12px; }
        :where(body[data-page="creators"]) .modal-empty p { font-size: 13px; font-weight: 700; }
        :where(body[data-page="creators"]) .modal-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
        @media (min-width: 640px) { :where(body[data-page="creators"]) .modal-skel-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } }
    
        /* Site Switcher */
        :where(body[data-page="creators"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="creators"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="creators"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="creators"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="creators"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="creators"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="creators"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="creators"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="creators"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="creators"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="creators"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="creators"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="creators"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="creators"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="creators"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── edit-project ── */
:root:where(:has(body[data-page="edit-project"])) {
            --primary: #3854e8; --primary-dark: #2f49d4;
            --bg: #f4f5f0; --border: #dde2dc;
            --text: #101615; --muted: #697371; --nav-height: 65px;
        }
        :where(html:has(body[data-page="edit-project"])), :where(body[data-page="edit-project"]), :where(body[data-page="edit-project"]) * { box-sizing: border-box; margin: 0; padding: 0; }
        body:where([data-page="edit-project"]) {
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            background: var(--bg); color: var(--text); min-height: 100vh;
            opacity: 0; transition: opacity 0.5s ease, padding-left 0.4s cubic-bezier(0.4,0,0.2,1);
            padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 10px));
            -webkit-tap-highlight-color: transparent; overflow-x: hidden;
        }
        body:where([data-page="edit-project"]).loaded { opacity: 1; }
        @media (min-width: 768px) {
            body:where([data-page="edit-project"]) { padding-left: 72px; padding-bottom: 0; }
            body:where([data-page="edit-project"]):has(.sidebar:hover) { padding-left: 220px; }
        }
        :where(body[data-page="edit-project"]) .sidebar {
            position: fixed; left: 0; top: 0; bottom: 0; width: 72px;
            background: white; border-right: 1px solid #eceee6;
            display: none; flex-direction: column; align-items: center;
            padding: 24px 0; z-index: 50;
            transition: width 0.4s cubic-bezier(0.4,0,0.2,1); overflow: hidden;
        }
        @media (min-width: 768px) { :where(body[data-page="edit-project"]) .sidebar { display: flex; } }
        :where(body[data-page="edit-project"]) .sidebar:hover { width: 220px; box-shadow: 4px 0 24px rgba(0,0,0,0.04); }
        :where(body[data-page="edit-project"]) .sidebar-logo { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 900; letter-spacing: -0.05em; color: var(--primary); padding: 0 20px; margin-bottom: 32px; white-space: nowrap; width: 100%; text-decoration: none; }
        :where(body[data-page="edit-project"]) .sidebar-logo img { flex-shrink: 0; }
        :where(body[data-page="edit-project"]) .sidebar-logo span { opacity: 0; transition: opacity 0.2s, transform 0.2s; transform: translateX(-10px); }
        :where(body[data-page="edit-project"]) .sidebar:hover .sidebar-logo span { opacity: 1; transform: translateX(0); }
        :where(body[data-page="edit-project"]) .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 10px; }
        :where(body[data-page="edit-project"]) .sidebar-link { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; color: #697371; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: all 0.2s; }
        :where(body[data-page="edit-project"]) .sidebar-link:hover, :where(body[data-page="edit-project"]) .sidebar-link.active { background: #eef0ff; color: var(--primary); }
        :where(body[data-page="edit-project"]) .sidebar-link svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="edit-project"]) .sidebar-link span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="edit-project"]) .sidebar:hover .sidebar-link span { opacity: 1; }
        :where(body[data-page="edit-project"]) .sidebar-bottom { width: 100%; padding: 0 10px; }
        :where(body[data-page="edit-project"]) .sidebar-btn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; border: none; transition: all 0.2s; width: 100%; background: transparent; color: #ef4444; }
        :where(body[data-page="edit-project"]) .sidebar-btn:hover { background: #fff1f2; }
        :where(body[data-page="edit-project"]) .sidebar-btn svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="edit-project"]) .sidebar-btn span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="edit-project"]) .sidebar:hover .sidebar-btn span { opacity: 1; }

        :where(body[data-page="edit-project"]) .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-height); background: rgba(255,255,255,0.95); backdrop-filter: blur(16px); border-top: 1px solid rgba(221,226,220,0.8); display: flex; justify-content: space-around; align-items: center; z-index: 100; padding-bottom: env(safe-area-inset-bottom, 0px); }
        @media (min-width: 768px) { :where(body[data-page="edit-project"]) .bottom-nav { display: none; } }
        :where(body[data-page="edit-project"]) .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; height: 100%; gap: 5px; color: #8b9390; text-decoration: none; position: relative; transition: color 0.3s; }
        :where(body[data-page="edit-project"]) .bottom-nav-item.active { color: var(--primary); }
        :where(body[data-page="edit-project"]) .bottom-nav-item svg { width: 22px; height: 22px; }
        :where(body[data-page="edit-project"]) .bottom-nav-item span { font-size: 10px; font-weight: 700; }

        :where(body[data-page="edit-project"]) .page-layout { display: flex; min-height: 100vh; }
        :where(body[data-page="edit-project"]) .brand-panel { display: none; width: 380px; flex-shrink: 0; background: #3854e8; position: sticky; top: 0; height: 100vh; flex-direction: column; justify-content: space-between; padding: 48px 40px; }
        @media (min-width: 900px) { :where(body[data-page="edit-project"]) .brand-panel { display: flex; } }
        :where(body[data-page="edit-project"]) .brand-logo-row { display: flex; align-items: center; gap: 12px; }
        :where(body[data-page="edit-project"]) .brand-logo-img { width: 44px; height: 44px; border-radius: 14px; background: #2f49d4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        :where(body[data-page="edit-project"]) .brand-name { font-size: 24px; font-weight: 900; color: white; letter-spacing: -0.5px; }
        :where(body[data-page="edit-project"]) .brand-tagline { font-size: 12px; color: rgba(255,255,255,0.6); font-weight: 600; margin-top: 2px; }
        :where(body[data-page="edit-project"]) .brand-middle { }
        :where(body[data-page="edit-project"]) .brand-title { font-size: 30px; font-weight: 900; color: white; line-height: 1.2; letter-spacing: -0.8px; margin-bottom: 14px; }
        :where(body[data-page="edit-project"]) .brand-desc { font-size: 13px; color: rgba(255,255,255,0.65); font-weight: 600; line-height: 1.6; }
        :where(body[data-page="edit-project"]) .brand-features { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
        :where(body[data-page="edit-project"]) .brand-feature { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.85); }
        :where(body[data-page="edit-project"]) .brand-feature-dot { width: 28px; height: 28px; border-radius: 8px; background: #2f49d4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        :where(body[data-page="edit-project"]) .brand-copyright { font-size: 11px; color: rgba(255,255,255,0.35); font-weight: 600; }

        :where(body[data-page="edit-project"]) .form-panel { flex: 1; min-width: 0; padding: 36px 24px 100px; }
        @media (min-width: 900px) { :where(body[data-page="edit-project"]) .form-panel { padding: 48px 48px 80px; } }
        @media (min-width: 1400px) { :where(body[data-page="edit-project"]) .form-panel { max-width: 760px; margin: 0 auto; } }

        :where(body[data-page="edit-project"]) .page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; animation: fadeUp-3 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
        :where(body[data-page="edit-project"]) .back-btn { width: 40px; height: 40px; border-radius: 12px; background: white; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; text-decoration: none; color: var(--muted); }
        :where(body[data-page="edit-project"]) .back-btn:hover { border-color: var(--primary); color: var(--primary); }

        :where(body[data-page="edit-project"]) .form-card { background: white; border-radius: 24px; border: 1px solid var(--border); padding: 28px 32px; margin-bottom: 16px; width: 100%; animation: fadeUp-3 0.5s 0.08s cubic-bezier(0.34,1.56,0.64,1) both; }
        :where(body[data-page="edit-project"]) .section-label { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
        :where(body[data-page="edit-project"]) .section-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }
        :where(body[data-page="edit-project"]) .field-label { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; display: block; }
        :where(body[data-page="edit-project"]) .field-input { width: 100%; background: #f4f5f0; border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 14px; font-family: inherit; font-weight: 700; font-size: 14px; color: var(--text); outline: none; transition: all 0.2s; resize: none; }
        :where(body[data-page="edit-project"]) .field-input:focus { background: white; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(56,84,232,0.08); }

        :where(body[data-page="edit-project"]) .img-preview-wrap { margin-top: 10px; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--border); display: none; aspect-ratio: 16/9; background: #eceee6; }
        :where(body[data-page="edit-project"]) .img-preview-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

        :where(body[data-page="edit-project"]) .submit-section { display: flex; gap: 10px; width: 100%; animation: fadeUp-3 0.5s 0.15s cubic-bezier(0.34,1.56,0.64,1) both; }
        :where(body[data-page="edit-project"]) .btn-submit { flex: 1; background: var(--primary); color: white; padding: 15px 24px; border-radius: 14px; font-family: inherit; font-weight: 900; font-size: 15px; border: none; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
        :where(body[data-page="edit-project"]) .btn-submit:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(56,84,232,0.4); }
        :where(body[data-page="edit-project"]) .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        :where(body[data-page="edit-project"]) .btn-cancel { background: #eceee6; color: var(--muted); padding: 15px 20px; border-radius: 14px; font-family: inherit; font-weight: 800; font-size: 14px; border: none; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; text-decoration: none; }
        :where(body[data-page="edit-project"]) .btn-cancel:hover { background: #dde2dc; color: var(--text); }
        :where(body[data-page="edit-project"]) .btn-danger { background: #fff1f2; color: #dc2626; padding: 15px 20px; border-radius: 14px; font-family: inherit; font-weight: 800; font-size: 14px; border: 1.5px solid #fecaca; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
        :where(body[data-page="edit-project"]) .btn-danger:hover { background: #fee2e2; }

        :where(body[data-page="edit-project"]) .toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: #101615; color: white; padding: 14px 24px; border-radius: 14px; font-weight: 800; font-size: 13px; z-index: 300; opacity: 0; transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); display: flex; align-items: center; gap: 8px; white-space: nowrap; box-shadow: 0 16px 40px -8px rgba(0,0,0,0.3); pointer-events: none; }
        :where(body[data-page="edit-project"]) .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
        :where(body[data-page="edit-project"]) .toast.success { background: #059669; }
        :where(body[data-page="edit-project"]) .toast.error { background: #dc2626; }
        @media (min-width: 768px) { :where(body[data-page="edit-project"]) .toast { bottom: 32px; } }

        :where(body[data-page="edit-project"]) .spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.4); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }

        /* Delete confirm modal */
        :where(body[data-page="edit-project"]) .modal-backdrop { position: fixed; inset: 0; background: rgba(16,22,21,0.5); backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
        :where(body[data-page="edit-project"]) .modal-backdrop.open { opacity: 1; pointer-events: all; }
        :where(body[data-page="edit-project"]) .modal { background: white; border-radius: 20px; padding: 28px; width: 100%; max-width: 380px; transform: translateY(20px) scale(0.97); transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); }
        :where(body[data-page="edit-project"]) .modal-backdrop.open .modal { transform: translateY(0) scale(1); }
    
        /* Site Switcher */
        :where(body[data-page="edit-project"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="edit-project"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="edit-project"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="edit-project"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="edit-project"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="edit-project"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="edit-project"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="edit-project"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="edit-project"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="edit-project"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="edit-project"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="edit-project"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="edit-project"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="edit-project"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="edit-project"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── explore ── */
:root:where(:has(body[data-page="explore"])) { 
            --primary: #4b68ff; 
            --bg: #f4f5f0; 
            --nav-height: 65px;
        }
        :where(html:has(body[data-page="explore"])), :where(body[data-page="explore"]), :where(body[data-page="explore"]) * { box-sizing: border-box; margin: 0; padding: 0; }
        
        
        html:where(:has(body[data-page="explore"])) { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
        
        body:where([data-page="explore"]) { 
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif; 
            background: var(--bg);
            color: #101615; 
            padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 10px));
            padding-left: 0;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
            opacity: 0;
            transition: opacity 0.6s ease-in;
        }
        body:where([data-page="explore"]).loaded { opacity: 1; }

        @media (min-width: 768px) {
            body:where([data-page="explore"]) { 
                padding-left: 72px; 
                padding-bottom: 0; 
                transition: padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease-in !important;
            }
            body:where([data-page="explore"]):has(.sidebar:hover) { padding-left: 220px !important; }
        }

        :where(body[data-page="explore"]) .input-pill {
            background: rgba(255, 255, 255, 0.28);
            border: 1.5px solid rgba(255, 255, 255, 0.45);
            -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
            transition: all 0.3s;
        }
        :where(body[data-page="explore"]) .input-pill:focus-within {
            background: rgba(255, 255, 255, 0.48);
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(75,104,255,0.1);
        }

        :where(body[data-page="explore"]) .cat-pill {
            flex-shrink: 0;
            padding: 10px 20px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            border: 1.5px solid #dde2dc;
            background: white;
            color: #697371;
            cursor: pointer;
            transition: all 0.25s;
            white-space: nowrap;
        }
        @media (min-width: 768px) { :where(body[data-page="explore"]) .cat-pill { font-size: 13px; } }
        :where(body[data-page="explore"]) .cat-pill:hover { border-color: #4b68ff; color: #4b68ff; }
        :where(body[data-page="explore"]) .cat-pill.active {
            background: #4b68ff;
            color: white;
            border-color: #4b68ff;
            box-shadow: 0 8px 20px -6px rgba(75,104,255,0.4);
        }

        /* PROJECT CARD */
        :where(body[data-page="explore"]) .pcard {
            background: white;
            border-radius: 12px;
            border: 1px solid #eceee6;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
            animation: fadeUp 0.45s ease both;
        }
        :where(body[data-page="explore"]) .pcard.active-preview {
            box-shadow: 0 8px 32px -8px rgba(75, 104, 255, 0.22), 0 2px 8px rgba(75,104,255,0.08);
            border-color: #4b68ff;
            z-index: 10;
        }

        :where(body[data-page="explore"]) .pcard-img-wrap {
            position: relative;
            aspect-ratio: 16/10;
            overflow: hidden;
            background: #eceee6;
        }
        :where(body[data-page="explore"]) .pcard-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
            display: block;
        }
        :where(body[data-page="explore"]) .pcard.active-preview .pcard-img-wrap img { transform: scale(1.08); }
        :where(body[data-page="explore"]) .pcard-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.52) 0%, transparent 55%);
        }
        :where(body[data-page="explore"]) .pcard-type {
            position: absolute;
            bottom: 12px;
            left: 14px;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(8px);
            padding: 4px 12px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800;
            color: #4b68ff;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        /* HOVER PREVIEW PANEL */
        :where(body[data-page="explore"]) .pcard-preview {
            position: absolute;
            inset: 0;
            background: #4b68ff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;
            opacity: 0;
            transition: opacity 0.3s ease;
            border-radius: inherit;
            z-index: 5;
            padding: 24px;
            text-align: center;
            pointer-events: none;
        }
        /* Preview faqat rasmga bosish bilan chiqadi — hover yo'q */
        :where(body[data-page="explore"]) .pcard.active-preview .pcard-preview { opacity: 1; pointer-events: auto; z-index: 20; }

        :where(body[data-page="explore"]) .preview-title { font-size: 18px; font-weight: 800; color: white; line-height: 1.3; }
        :where(body[data-page="explore"]) .preview-desc { font-size: 12px; color: rgba(255,255,255,0.75); font-weight: 500; line-height: 1.6; max-width: 220px; }
        :where(body[data-page="explore"]) .preview-price { font-size: 22px; font-weight: 900; color: white; margin-top: 4px; }
        :where(body[data-page="explore"]) .preview-btn {
            margin-top: 8px;
            background: white;
            color: #4b68ff;
            font-size: 12px;
            font-weight: 800;
            padding: 10px 24px;
            border-radius: 999px;
            transition: transform 0.2s;
        }
        @media (hover: hover) { :where(body[data-page="explore"]) .preview-btn:hover { transform: scale(1.05); } }
        :where(body[data-page="explore"]) .preview-author { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
        :where(body[data-page="explore"]) .preview-author img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.3); }
        :where(body[data-page="explore"]) .preview-author span { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.85); }

        /* Card body */
        :where(body[data-page="explore"]) .pcard-body { padding: 16px 18px 14px; }
        @media (min-width: 768px) { :where(body[data-page="explore"]) .pcard-body { padding: 20px 22px 16px; } }
        
        :where(body[data-page="explore"]) .pcard-title {
            font-size: 15px;
            font-weight: 800;
            color: #101615;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 10px;
            transition: color 0.2s;
        }
        :where(body[data-page="explore"]) .pcard.active-preview .pcard-title { color: #4b68ff; }
        
        :where(body[data-page="explore"]) .pcard-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
        :where(body[data-page="explore"]) .pcard-price { font-size: 14px; font-weight: 900; color: #4b68ff; }
        @media (min-width: 768px) { :where(body[data-page="explore"]) .pcard-price { font-size: 15px; } }
        :where(body[data-page="explore"]) .pcard-price span { font-size: 10px; opacity: 0.4; font-weight: 600; }
        :where(body[data-page="explore"]) .pcard-views { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #8b9390; }

        /* ── LIKE & COMMENT ROW ── */
        :where(body[data-page="explore"]) .pcard-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 18px 12px;
            border-top: 1px solid #eceee6;
        }
        @media (min-width: 768px) { :where(body[data-page="explore"]) .pcard-actions { padding: 10px 22px 14px; } }

        :where(body[data-page="explore"]) .action-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            border-radius: 999px;
            border: 1.5px solid #dde2dc;
            background: transparent;
            font-size: 11px;
            font-weight: 800;
            color: #697371;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
        }
        :where(body[data-page="explore"]) .action-btn svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform 0.2s; }
        :where(body[data-page="explore"]) .action-btn:hover { border-color: #4b68ff; color: #4b68ff; background: #eef0ff; }

        /* Like button */
        :where(body[data-page="explore"]) .action-btn.liked {
            border-color: #22c55e;
            color: #22c55e;
            background: #f0fdf4;
        }
        :where(body[data-page="explore"]) .action-btn.liked:hover { background: #dcfce7; }
        :where(body[data-page="explore"]) .action-btn.liked svg { fill: #22c55e; stroke: #22c55e; transform: scale(1.15); }

        /* Dislike button */
        :where(body[data-page="explore"]) .action-btn.disliked {
            border-color: #f43f5e;
            color: #f43f5e;
            background: #fff1f2;
        }
        :where(body[data-page="explore"]) .action-btn.disliked:hover { background: #ffe4e6; }
        :where(body[data-page="explore"]) .action-btn.disliked svg { fill: #f43f5e; stroke: #f43f5e; transform: scale(1.15); }

        /* Save button */
        :where(body[data-page="explore"]) .action-btn.saved {
            border-color: #f59e0b;
            color: #f59e0b;
            background: #fffbeb;
        }
        :where(body[data-page="explore"]) .action-btn.saved:hover { background: #fef3c7; }
        :where(body[data-page="explore"]) .action-btn.saved svg { fill: #f59e0b; stroke: #f59e0b; transform: scale(1.15); }

        /* Animatsiyalar */
        :where(body[data-page="explore"]) .action-btn.liked svg,
        :where(body[data-page="explore"]) .action-btn.disliked svg,
        :where(body[data-page="explore"]) .action-btn.saved svg { animation: popAnim 0.35s ease; }

        /* Save tugmasi — o'ng tomonga itarish */
        :where(body[data-page="explore"]) .action-btn.save-btn { margin-left: auto; }

        :where(body[data-page="explore"]) .pcard-author { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid #f4f5f0; }
        :where(body[data-page="explore"]) .pcard-author img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #e6eaff; }
        @media (min-width: 768px) { :where(body[data-page="explore"]) .pcard-author img { width: 32px; height: 32px; } }
        :where(body[data-page="explore"]) .pcard-author-name { font-size: 11px; font-weight: 800; color: #1b2321; }
        @media (min-width: 768px) { :where(body[data-page="explore"]) .pcard-author-name { font-size: 12px; } }
        :where(body[data-page="explore"]) .pcard-author-class { font-size: 9px; color: #8b9390; font-weight: 600; }
        @media (min-width: 768px) { :where(body[data-page="explore"]) .pcard-author-class { font-size: 10px; } }

        /* SORT select */
        :where(body[data-page="explore"]) .custom-select-wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }
        @media (min-width: 640px) { :where(body[data-page="explore"]) .custom-select-wrap { width: auto; } }
        :where(body[data-page="explore"]) .custom-select-wrap select {
            appearance: none; -webkit-appearance: none; background: white;
            border: 1.5px solid #dde2dc; border-radius: 999px;
            padding: 12px 40px 12px 20px; font-size: 13px; font-weight: 700;
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            color: #101615; outline: none; cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s;
            width: 100%; min-width: 160px;
        }
        @media (min-width: 640px) { :where(body[data-page="explore"]) .custom-select-wrap select { padding: 14px 44px 14px 20px; min-width: 180px; } }
        :where(body[data-page="explore"]) .custom-select-wrap select:hover { border-color: #4b68ff; }
        :where(body[data-page="explore"]) .custom-select-wrap select:focus { border-color: #4b68ff; box-shadow: 0 0 0 4px rgba(75,104,255,0.1); }
        :where(body[data-page="explore"]) .custom-select-wrap .select-arrow { position: absolute; right: 16px; pointer-events: none; color: #697371; display: flex; align-items: center; }
        :where(body[data-page="explore"]) .custom-select-wrap select:focus ~ .select-arrow { color: #4b68ff; }

        /* SORT dropdown (native select yashirin, ko'rinadigani — tugma + ro'yxat) */
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd { position: relative; display: flex; }
        @media (min-width: 640px) { :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd { flex: 0 0 auto; width: 256px; } }
        @media (min-width: 640px) { :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd--class { width: 216px; } }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-native {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none;
        }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-btn {
            display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px;
            padding: 6px 14px 6px 6px; text-align: left; cursor: pointer;
            border: 1px solid var(--line, #dde2dc); border-radius: 12px; background: #f7f8f5; color: var(--ink, #101615);
            font-family: inherit; transition: border-color .2s, background-color .2s, box-shadow .2s;
        }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-btn:hover { border-color: #b7c1bc; background: #fff; }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd.open .sort-dd-btn,
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-btn:focus-visible {
            background: #fff; border-color: var(--primary, #4b68ff); box-shadow: 0 0 0 4px rgba(75,104,255,.12); outline: 0;
        }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-ico {
            flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
            background: var(--ink, #101615); color: #fff;
        }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-ico svg { width: 15px; height: 15px; }
        @media (min-width: 640px) { :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-ico { width: 40px; height: 40px; border-radius: 10px; } }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-cap { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #697371); }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-val { font-size: 14px; font-weight: 700; color: var(--ink, #101615); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted, #697371); transition: transform .2s; }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd.open .sort-dd-chev { transform: rotate(180deg); color: var(--primary, #4b68ff); }

        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-list {
            position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
            margin: 0; padding: 6px; list-style: none; background: #fff;
            border: 1px solid var(--line, #dde2dc); border-radius: 14px;
            box-shadow: 0 24px 48px -12px rgba(13,20,18,.22), 0 4px 12px rgba(13,20,18,.06);
            transform-origin: top center; animation: sortDdIn .16s ease-out;
            max-height: min(380px, 62vh); overflow-y: auto; overscroll-behavior: contain;
        }
        @media (max-width: 767px) {
            :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-list { max-height: min(380px, calc(100dvh - 260px)); scroll-margin-top: 12px; }
            :where(html:not(.in-frame)) :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-list { scroll-margin-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
        }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-count { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted-soft, #8b9390); }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-list[hidden] { display: none; }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-list:focus { outline: 0; }
        @keyframes sortDdIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-group {
            padding: 10px 10px 4px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-soft, #8b9390);
        }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-group:first-child { padding-top: 6px; }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-list [role="option"] {
            display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 9px;
            font-size: 14px; font-weight: 600; color: #3b4442; cursor: pointer; transition: background-color .15s, color .15s;
        }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-list [role="option"] > svg:first-child { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted, #697371); }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-list [role="option"] span:not(.sort-dd-count) { flex: 1; min-width: 0; }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-list [role="option"].is-active { background: #f2f4ee; color: var(--ink, #101615); }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-list [role="option"][aria-selected="true"] { color: var(--primary, #4b68ff); font-weight: 700; }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-list [role="option"][aria-selected="true"] > svg:first-child { color: var(--primary, #4b68ff); }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-tick { width: 16px; height: 16px; flex: 0 0 auto; visibility: hidden; }
        :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-list [aria-selected="true"] .sort-dd-tick { visibility: visible; }
        @media (prefers-reduced-motion: reduce) {
            :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-list { animation: none; }
            :where(body[data-page="explore"], body[data-page="creators"]) .sort-dd-chev { transition: none; }
        }

        :where(body[data-page="explore"]) .load-more-btn {
            background: white; border: 2px solid #dde2dc; border-radius: 999px;
            padding: 12px 32px; font-size: 13px; font-weight: 800; color: #4d5654;
            cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px;
        }
        @media (min-width: 768px) { :where(body[data-page="explore"]) .load-more-btn { padding: 14px 40px; font-size: 14px; } }
        :where(body[data-page="explore"]) .load-more-btn:hover { border-color: #4b68ff; color: #4b68ff; box-shadow: 0 8px 20px -6px rgba(75,104,255,0.2); }
        :where(body[data-page="explore"]) .load-more-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        :where(body[data-page="explore"]) .load-more-btn.hidden { display: none !important; }

        :where(body[data-page="explore"]) .skel {
            background: linear-gradient(90deg,#eceee6 25%,#dde2dc 50%,#eceee6 75%);
            background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 12px;
        }

        :where(body[data-page="explore"]) .hero-gradient {
            background: transparent;
        }
        :where(body[data-page="explore"]) .explore-visual {
            display: flow-root;
            background-image: url('https://img2.teletype.in/files/5a/c6/5ac681eb-03a2-4d2e-94a9-3910110499e1.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center calc(50% - 180px);
            background-attachment: fixed;
            border-radius: 16px;
            margin-bottom: 24px;
        }
        :where(body[data-page="explore"]) .footer-bg { background: white; border-top: 1px solid #eceee6; }

        :where(body[data-page="explore"]) .spinner {
            width: 18px; height: 18px; border: 2.5px solid #dde2dc;
            border-top-color: #4b68ff; border-radius: 50%; animation: spin 0.7s linear infinite;
        }

        /* ── Sidebar ── */
        :where(body[data-page="explore"]) .sidebar {
            position: fixed; left: 0; top: 0; bottom: 0; width: 72px;
            background: white; border-right: 1px solid #eceee6;
            display: none; flex-direction: column; align-items: center;
            padding: 24px 0; z-index: 50; 
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
            overflow: hidden;
        }
        @media (min-width: 768px) { :where(body[data-page="explore"]) .sidebar { display: flex; } }
        :where(body[data-page="explore"]) .sidebar:hover { width: 220px; box-shadow: 4px 0 24px rgba(0,0,0,0.02); }
        :where(body[data-page="explore"]) .sidebar-logo {
            display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 900;
            letter-spacing: -0.05em; color: #4b68ff; padding: 0 20px; margin-bottom: 32px;
            white-space: nowrap; width: 100%; text-decoration: none;
        }
        :where(body[data-page="explore"]) .sidebar-logo img { flex-shrink: 0; }
        :where(body[data-page="explore"]) .sidebar-logo span { opacity: 0; transition: opacity 0.2s, transform 0.2s; transform: translateX(-10px); }
        :where(body[data-page="explore"]) .sidebar:hover .sidebar-logo span { opacity: 1; transform: translateX(0); }
        :where(body[data-page="explore"]) .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 10px; }
        :where(body[data-page="explore"]) .sidebar-link {
            display: flex; align-items: center; gap: 14px; padding: 12px 14px;
            border-radius: 12px; color: #697371; font-size: 14px; font-weight: 700;
            text-decoration: none; white-space: nowrap; transition: all 0.2s;
        }
        :where(body[data-page="explore"]) .sidebar-link:hover, :where(body[data-page="explore"]) .sidebar-link.active { background: #eef0ff; color: #4b68ff; }
        :where(body[data-page="explore"]) .sidebar-link svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="explore"]) .sidebar-link span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="explore"]) .sidebar:hover .sidebar-link span { opacity: 1; }
        :where(body[data-page="explore"]) .sidebar-bottom { width: 100%; padding: 0 10px; display: flex; flex-direction: column; gap: 8px; }
        :where(body[data-page="explore"]) .sidebar-btn {
            display: flex; align-items: center; gap: 12px; padding: 12px 14px;
            border-radius: 12px; font-size: 14px; font-weight: 700; white-space: nowrap;
            cursor: pointer; border: none; transition: all 0.2s; width: 100%;
        }
        :where(body[data-page="explore"]) .sidebar-btn.signin { background: transparent; color: #697371; }
        :where(body[data-page="explore"]) .sidebar-btn.signin:hover { background: #eceee6; color: #4b68ff; }
        :where(body[data-page="explore"]) .sidebar-btn.start { background: #4b68ff; color: white; box-shadow: 0 4px 12px rgba(75,104,255,0.3); }
        :where(body[data-page="explore"]) .sidebar-btn.start:hover { background: #3854e8; transform: translateY(-1px); }
        :where(body[data-page="explore"]) .sidebar-btn svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="explore"]) .sidebar-btn span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="explore"]) .sidebar:hover .sidebar-btn span { opacity: 1; }

        /* Bottom Nav */
        :where(body[data-page="explore"]) .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-height);
            background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(221, 226, 220, 0.8);
            display: flex; justify-content: space-around; align-items: center; z-index: 100;
            padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 24px rgba(0,0,0,0.04);
        }
        @media (min-width: 768px) { :where(body[data-page="explore"]) .bottom-nav { display: none; } }
        :where(body[data-page="explore"]) .bottom-nav-item {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            flex: 1; height: 100%; gap: 5px; color: #8b9390; text-decoration: none;
            position: relative; transition: color 0.3s ease;
        }
        :where(body[data-page="explore"]) .bottom-nav-item.active { color: var(--primary); }
        :where(body[data-page="explore"]) .bottom-nav-item svg { width: 22px; height: 22px; transition: transform 0.3s, stroke-width 0.3s; }
        :where(body[data-page="explore"]) .bottom-nav-item.active svg { transform: translateY(-2px); stroke-width: 2.5; }
        :where(body[data-page="explore"]) .bottom-nav-item span { font-size: 10px; font-weight: 700; }
        :where(body[data-page="explore"]) .bottom-nav-indicator {
            position: absolute; top: 0; width: 32px; height: 3px; background: var(--primary);
            border-radius: 0 0 4px 4px; opacity: 0; transform: scaleX(0); transition: opacity 0.3s, transform 0.3s;
        }
        :where(body[data-page="explore"]) .bottom-nav-item.active .bottom-nav-indicator { opacity: 1; transform: scaleX(1); }

        /* Site Switcher */
        :where(body[data-page="explore"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="explore"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="explore"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="explore"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="explore"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="explore"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="explore"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="explore"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="explore"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="explore"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="explore"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="explore"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="explore"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="explore"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="explore"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

        /* ══════════════════════════════════════
           COMMENT MODAL
        ══════════════════════════════════════ */
        :where(body[data-page="explore"]) .modal-overlay {
            position: fixed; inset: 0; background: rgba(16,22,21,0.45);
            backdrop-filter: blur(4px); z-index: 9999;
            display: flex; align-items: flex-end;
            opacity: 0; pointer-events: none; visibility: hidden;
            transition: opacity 0.3s, visibility 0s linear 0.3s;
        }
        @media (min-width: 640px) {
            :where(body[data-page="explore"]) .modal-overlay { align-items: center; justify-content: center; }
        }
        :where(body[data-page="explore"]) .modal-overlay.open { opacity: 1; pointer-events: all; visibility: visible; transition: opacity 0.3s, visibility 0s; }

        :where(body[data-page="explore"]) .modal-box {
            background: white;
            border-radius: 24px 24px 0 0;
            width: 100%;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            transform: translateY(40px);
            transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
            overflow: hidden;
        }
        @media (min-width: 640px) {
            :where(body[data-page="explore"]) .modal-box {
                border-radius: 20px;
                max-width: 480px;
                max-height: 70vh;
                transform: scale(0.95) translateY(10px);
            }
        }
        :where(body[data-page="explore"]) .modal-overlay.open .modal-box {
            transform: translateY(0);
        }
        @media (min-width: 640px) {
            :where(body[data-page="explore"]) .modal-overlay.open .modal-box { transform: scale(1) translateY(0); }
        }

        :where(body[data-page="explore"]) .modal-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 20px 20px 16px;
            border-bottom: 1px solid #eceee6;
            flex-shrink: 0;
        }
        :where(body[data-page="explore"]) .modal-title {
            font-size: 15px; font-weight: 800; color: #101615;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            max-width: calc(100% - 48px);
        }
        :where(body[data-page="explore"]) .modal-close {
            width: 32px; height: 32px; border-radius: 50%; border: none;
            background: #eceee6; cursor: pointer; display: flex;
            align-items: center; justify-content: center; flex-shrink: 0;
            transition: background 0.2s;
        }
        :where(body[data-page="explore"]) .modal-close:hover { background: #dde2dc; }
        :where(body[data-page="explore"]) .modal-close svg { width: 16px; height: 16px; color: #697371; }

        :where(body[data-page="explore"]) .comments-list {
            flex: 1; overflow-y: auto; padding: 16px 20px;
            display: flex; flex-direction: column; gap: 12px;
        }
        :where(body[data-page="explore"]) .comment-item {
            display: flex; gap: 10px;
            animation: fadeUp 0.3s ease both;
        }
        :where(body[data-page="explore"]) .comment-avatar {
            width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
            border: 2px solid #e6eaff; flex-shrink: 0;
        }
        :where(body[data-page="explore"]) .comment-bubble {
            background: #f4f5f0; border-radius: 12px; padding: 10px 14px;
            flex: 1; min-width: 0;
        }
        :where(body[data-page="explore"]) .comment-name { font-size: 11px; font-weight: 800; color: #1b2321; margin-bottom: 3px; }
        :where(body[data-page="explore"]) .comment-text { font-size: 13px; color: #3b4442; line-height: 1.5; word-break: break-word; }
        :where(body[data-page="explore"]) .comment-time { font-size: 10px; color: #8b9390; font-weight: 600; margin-top: 4px; }

        :where(body[data-page="explore"]) .comment-delete-btn {
            background: none; border: none; cursor: pointer;
            color: #c3c9c0; font-size: 10px; padding: 2px 4px;
            border-radius: 4px; transition: color 0.2s;
            align-self: flex-start; margin-top: 6px; flex-shrink: 0;
        }
        :where(body[data-page="explore"]) .comment-delete-btn:hover { color: #f43f5e; }

        :where(body[data-page="explore"]) .no-comments {
            text-align: center; padding: 32px 0; color: #c3c9c0;
            font-size: 13px; font-weight: 700;
        }
        :where(body[data-page="explore"]) .no-comments svg { width: 36px; height: 36px; margin: 0 auto 10px; display: block; }

        :where(body[data-page="explore"]) .comment-input-wrap {
            padding: 12px 16px;
            border-top: 1px solid #eceee6;
            display: flex; gap: 10px; align-items: flex-end;
            flex-shrink: 0;
        }
        :where(body[data-page="explore"]) .comment-input {
            flex: 1; background: #eceee6; border: 1.5px solid transparent;
            border-radius: 12px; padding: 10px 14px;
            font-size: 13px; font-weight: 500; font-family: inherit;
            outline: none; resize: none; min-height: 40px; max-height: 100px;
            line-height: 1.4; transition: border-color 0.2s, background 0.2s;
        }
        :where(body[data-page="explore"]) .comment-input:focus { background: white; border-color: #4b68ff; }
        :where(body[data-page="explore"]) .comment-input::placeholder { color: #8b9390; }

        :where(body[data-page="explore"]) .comment-send-btn {
            width: 40px; height: 40px; border-radius: 50%; border: none;
            background: #4b68ff; cursor: pointer; display: flex;
            align-items: center; justify-content: center; flex-shrink: 0;
            transition: background 0.2s, transform 0.2s;
        }
        :where(body[data-page="explore"]) .comment-send-btn:hover { background: #3854e8; transform: scale(1.05); }
        :where(body[data-page="explore"]) .comment-send-btn:disabled { background: #dde2dc; cursor: not-allowed; transform: none; }
        :where(body[data-page="explore"]) .comment-send-btn svg { width: 16px; height: 16px; color: white; }

        :where(body[data-page="explore"]) .login-prompt {
            padding: 24px; text-align: center; color: #8b9390;
            font-size: 13px; font-weight: 600;
        }
        :where(body[data-page="explore"]) .login-prompt a {
            color: #4b68ff; font-weight: 800; text-decoration: none;
        }
        :where(body[data-page="explore"]) .login-prompt a:hover { text-decoration: underline; }

/* ── freelance-login ── */
:root:where(:has(body[data-page="freelance-login"])) { --primary: #3854e8; --primary-dark: #2f49d4; }
        :where(html:has(body[data-page="freelance-login"])), :where(body[data-page="freelance-login"]), :where(body[data-page="freelance-login"]) * { box-sizing: border-box; margin: 0; padding: 0; }
        body:where([data-page="freelance-login"]) {
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            background: #f4f5f0; min-height: 100vh;
            display: flex; align-items: stretch;
        }

        /* ── Chap — brand panel ── */
        :where(body[data-page="freelance-login"]) .brand {
            display: none;
            width: 45%;
            flex-shrink: 0;
            background:  #2f49d4 ;
            position: relative;
            overflow: hidden;
            flex-direction: column;
            justify-content: space-between;
            padding: 56px 52px;
        }
        @media (min-width: 1024px) { :where(body[data-page="freelance-login"]) .brand { display: flex; } }

        :where(body[data-page="freelance-login"]) .brand::before {
            content: '';
            position: absolute;
            width: 320px; height: 320px;
            border-radius: 50%;
            background: rgba(255,255,255,.06);
            top: -80px; right: -80px;
        }
        :where(body[data-page="freelance-login"]) .brand::after {
            content: '';
            position: absolute;
            width: 200px; height: 200px;
            border-radius: 50%;
            background: rgba(255,255,255,.04);
            bottom: -60px; left: 20%;
        }

        :where(body[data-page="freelance-login"]) .brand-logo {
            display: flex; align-items: center; gap: 12px;
            text-decoration: none; position: relative; z-index: 1;
        }
        :where(body[data-page="freelance-login"]) .brand-logo span {
            font-size: 22px; font-weight: 900;
            color: white; letter-spacing: -.5px;
        }

        :where(body[data-page="freelance-login"]) .brand-mid { position: relative; z-index: 1; }
        :where(body[data-page="freelance-login"]) .brand-badge {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(255,255,255,.15);
            border: 1px solid rgba(255,255,255,.25);
            color: white; font-size: 10px; font-weight: 800;
            padding: 5px 12px; border-radius: 99px;
            margin-bottom: 20px; letter-spacing: .07em; text-transform: uppercase;
        }
        :where(body[data-page="freelance-login"]) .brand-title {
            font-size: 36px; font-weight: 900;
            color: white; line-height: 1.15;
            letter-spacing: -.8px; margin-bottom: 14px;
        }
        :where(body[data-page="freelance-login"]) .brand-desc {
            font-size: 14px; color: rgba(255,255,255,.7);
            font-weight: 600; line-height: 1.65;
        }
        :where(body[data-page="freelance-login"]) .brand-perks {
            margin-top: 28px;
            display: flex; flex-direction: column; gap: 10px;
        }
        :where(body[data-page="freelance-login"]) .brand-perk {
            display: flex; align-items: center; gap: 10px;
            font-size: 13px; font-weight: 700;
            color: rgba(255,255,255,.85);
        }
        :where(body[data-page="freelance-login"]) .brand-perk-dot {
            width: 26px; height: 26px; border-radius: 7px;
            background: rgba(255,255,255,.15);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        :where(body[data-page="freelance-login"]) .brand-copy {
            font-size: 11px; color: rgba(255,255,255,.35);
            font-weight: 600; position: relative; z-index: 1;
        }

        /* ── O'ng — forma ── */
        :where(body[data-page="freelance-login"]) .form-side {
            flex: 1;
            display: flex; align-items: flex-start;
            justify-content: center;
            padding: 40px 24px;
            overflow-y: auto;
        }
        @media (min-width: 640px) { :where(body[data-page="freelance-login"]) .form-side { padding: 48px 40px; } }

        :where(body[data-page="freelance-login"]) .form-wrap {
            width: 100%; max-width: 500px;
        }

        :where(body[data-page="freelance-login"]) .form-head { margin-bottom: 28px; }
        :where(body[data-page="freelance-login"]) .form-head h1 {
            font-size: 28px; font-weight: 900;
            color: #101615; letter-spacing: -.5px; margin-bottom: 6px;
        }
        @media (min-width: 640px) { :where(body[data-page="freelance-login"]) .form-head h1 { font-size: 34px; } }
        :where(body[data-page="freelance-login"]) .form-head p { font-size: 14px; color: #697371; font-weight: 600; }

        :where(body[data-page="freelance-login"]) .signin-link {
            font-size: 13px; font-weight: 700;
            color: #697371; margin-bottom: 28px; display: block;
        }
        :where(body[data-page="freelance-login"]) .signin-link a {
            color: var(--primary); font-weight: 800;
            text-decoration: underline; text-decoration-thickness: 2px;
            text-underline-offset: 3px;
        }

        /* Qadamlar indikatori */
        :where(body[data-page="freelance-login"]) .steps {
            display: flex; align-items: center; gap: 8px;
            margin-bottom: 28px;
        }
        :where(body[data-page="freelance-login"]) .step-item {
            display: flex; align-items: center; gap: 6px;
            font-size: 11px; font-weight: 800;
            color: #8b9390;
        }
        :where(body[data-page="freelance-login"]) .step-item.active { color: var(--primary); }
        :where(body[data-page="freelance-login"]) .step-item.done { color: #10b981; }
        :where(body[data-page="freelance-login"]) .step-num {
            width: 24px; height: 24px; border-radius: 50%;
            background: #dde2dc; color: #697371;
            display: flex; align-items: center; justify-content: center;
            font-size: 10px; font-weight: 900;
        }
        :where(body[data-page="freelance-login"]) .step-item.active .step-num { background: var(--primary); color: white; }
        :where(body[data-page="freelance-login"]) .step-item.done .step-num { background: #10b981; color: white; }
        :where(body[data-page="freelance-login"]) .step-line { flex: 1; height: 2px; background: #dde2dc; border-radius: 99px; }
        :where(body[data-page="freelance-login"]) .step-line.done { background: #10b981; }

        /* Form fields */
        :where(body[data-page="freelance-login"]) .field { margin-bottom: 14px; }
        :where(body[data-page="freelance-login"]) .field-label {
            display: block;
            font-size: 10px; font-weight: 800;
            color: #697371; text-transform: uppercase;
            letter-spacing: .1em; margin-bottom: 5px;
        }
        :where(body[data-page="freelance-login"]) .field-input {
            width: 100%;
            background: #eceee6; border: 1.5px solid transparent;
            border-radius: 14px; padding: 13px 16px;
            font-family: inherit; font-size: 14px;
            font-weight: 700; color: #101615;
            outline: none; transition: all .25s;
            resize: none;
        }
        :where(body[data-page="freelance-login"]) .field-input:focus {
            background: white;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(56,84,232,.09);
        }
        :where(body[data-page="freelance-login"]) .field-input::placeholder { color: #8b9390; }
        :where(body[data-page="freelance-login"]) .field-hint { font-size: 11px; color: #8b9390; font-weight: 600; margin-top: 4px; }

        /* Skills tags */
        :where(body[data-page="freelance-login"]) .skills-wrap {
            display: flex; flex-wrap: wrap; gap: 7px;
            padding: 10px; background: #eceee6;
            border: 1.5px solid transparent; border-radius: 14px;
            cursor: text; transition: all .25s;
            min-height: 52px;
        }
        :where(body[data-page="freelance-login"]) .skills-wrap:focus-within { background: white; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(56,84,232,.09); }
        :where(body[data-page="freelance-login"]) .skill-tag {
            display: inline-flex; align-items: center; gap: 5px;
            background: var(--primary); color: white;
            font-size: 12px; font-weight: 800;
            padding: 4px 10px; border-radius: 99px;
        }
        :where(body[data-page="freelance-login"]) .skill-tag button { background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
        :where(body[data-page="freelance-login"]) .skill-input { background: none; border: none; outline: none; font-family: inherit; font-size: 13px; font-weight: 600; color: #101615; min-width: 80px; flex: 1; }
        :where(body[data-page="freelance-login"]) .skill-input::placeholder { color: #8b9390; }

        /* Category select */
        :where(body[data-page="freelance-login"]) .cat-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        :where(body[data-page="freelance-login"]) .cat-btn {
            padding: 12px 10px;
            background: #eceee6; border: 1.5px solid transparent;
            border-radius: 12px; text-align: center;
            cursor: pointer; transition: all .2s;
            font-family: inherit; font-size: 12px; font-weight: 800; color: #697371;
            display: flex; flex-direction: column; align-items: center; gap: 7px;
        }
        :where(body[data-page="freelance-login"]) .cat-btn:hover { border-color: #cfd6ff; background: #eef0ff; color: var(--primary); }
        :where(body[data-page="freelance-login"]) .cat-btn.active { border-color: var(--primary); background: #eef0ff; color: var(--primary); }
        :where(body[data-page="freelance-login"]) .cat-btn-ico { display: block; }

        /* Submit btn */
        :where(body[data-page="freelance-login"]) .btn-submit {
            width: 100%; padding: 15px;
            background: var(--primary); color: white;
            border: none; border-radius: 14px;
            font-family: inherit; font-size: 15px; font-weight: 900;
            cursor: pointer; transition: all .3s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            margin-top: 24px;
        }
        :where(body[data-page="freelance-login"]) .btn-submit:hover:not(:disabled) {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 12px 28px -6px rgba(56,84,232,.4);
        }
        :where(body[data-page="freelance-login"]) .btn-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }

        /* Steps content */
        :where(body[data-page="freelance-login"]) .step-content { display: none; }
        :where(body[data-page="freelance-login"]) .step-content.active { display: block; }

        /* Nav buttons */
        :where(body[data-page="freelance-login"]) .step-nav {
            display: flex; gap: 10px; margin-top: 20px;
        }
        :where(body[data-page="freelance-login"]) .btn-back {
            padding: 13px 20px;
            background: #eceee6; color: #697371;
            border: none; border-radius: 12px;
            font-family: inherit; font-size: 14px; font-weight: 800;
            cursor: pointer; transition: all .2s;
        }
        :where(body[data-page="freelance-login"]) .btn-back:hover { background: #dde2dc; }
        :where(body[data-page="freelance-login"]) .btn-next {
            flex: 1; padding: 13px;
            background: var(--primary); color: white;
            border: none; border-radius: 12px;
            font-family: inherit; font-size: 14px; font-weight: 900;
            cursor: pointer; transition: all .3s;
            display: flex; align-items: center; justify-content: center; gap: 7px;
        }
        :where(body[data-page="freelance-login"]) .btn-next:hover { background: var(--primary-dark); transform: translateY(-1px); }

        /* Message */
        :where(body[data-page="freelance-login"]) .msg-box {
            padding: 12px 16px; border-radius: 10px;
            font-weight: 700; font-size: 13px;
            text-align: center; margin-top: 14px;
            display: none;
        }
        :where(body[data-page="freelance-login"]) .msg-box.err { background: #fff1f2; color: #e11d48; }
        :where(body[data-page="freelance-login"]) .msg-box.ok  { background: #ecfdf5; color: #059669; }

/* ── freelance-signin ── */
:root:where(:has(body[data-page="freelance-signin"])) {
            --primary: #3854e8;
            --primary-dark: #2f49d4;
        }

        :where(html:has(body[data-page="freelance-signin"])), :where(body[data-page="freelance-signin"]), :where(body[data-page="freelance-signin"]) * {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        body:where([data-page="freelance-signin"]) {
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            background: #f4f5f0;
            min-height: 100vh;
            display: flex;
            align-items: stretch;
        }

        /* ── O'ng — brand ── */
        :where(body[data-page="freelance-signin"]) .brand {
            display: none;
            width: 45%;
            flex-shrink: 0;
            background: #2a3fb8;
            position: relative;
            overflow: hidden;
            flex-direction: column;
            justify-content: space-between;
            padding: 56px 52px;
        }

        @media(min-width:1024px) {
            :where(body[data-page="freelance-signin"]) .brand {
                display: flex
            }
        }

        :where(body[data-page="freelance-signin"]) .brand::before {
            content: '';
            position: absolute;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .06);
            top: -70px;
            right: -70px
        }

        :where(body[data-page="freelance-signin"]) .brand::after {
            content: '';
            position: absolute;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .04);
            bottom: -50px;
            left: 25%
        }

        :where(body[data-page="freelance-signin"]) .brand-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            position: relative;
            z-index: 1
        }

        :where(body[data-page="freelance-signin"]) .brand-logo span {
            font-size: 22px;
            font-weight: 900;
            color: rgb(255, 255, 255);
            letter-spacing: -.5px
        }

        :where(body[data-page="freelance-signin"]) .brand-mid {
            position: relative;
            z-index: 1
        }

        :where(body[data-page="freelance-signin"]) .brand-title {
            font-size: 38px;
            font-weight: 900;
            color: white;
            line-height: 1.15;
            letter-spacing: -.8px;
            margin-bottom: 14px
        }

        :where(body[data-page="freelance-signin"]) .brand-desc {
            font-size: 14px;
            color: rgba(255, 255, 255, .7);
            font-weight: 600;
            line-height: 1.65
        }

        :where(body[data-page="freelance-signin"]) .brand-box {
            margin-top: 28px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 16px;
            padding: 20px;
        }

        :where(body[data-page="freelance-signin"]) .brand-box-title {
            font-size: 12px;
            font-weight: 800;
            color: rgba(255, 255, 255, .5);
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-bottom: 12px
        }

        :where(body[data-page="freelance-signin"]) .brand-stat {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px
        }

        :where(body[data-page="freelance-signin"]) .brand-stat:last-child {
            margin-bottom: 0
        }

        :where(body[data-page="freelance-signin"]) .brand-stat-ico {
            width: 32px;
            height: 32px;
            border-radius: 9px;
            background: rgba(255, 255, 255, .12);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

        :where(body[data-page="freelance-signin"]) .brand-stat-num {
            font-size: 16px;
            font-weight: 900;
            color: white
        }

        :where(body[data-page="freelance-signin"]) .brand-stat-lbl {
            font-size: 10px;
            color: rgba(255, 255, 255, .6);
            font-weight: 700;
            margin-top: 1px
        }

        :where(body[data-page="freelance-signin"]) .brand-copy {
            font-size: 11px;
            color: rgba(255, 255, 255, .35);
            font-weight: 600;
            position: relative;
            z-index: 1
        }

        /* ── Chap — forma ── */
        :where(body[data-page="freelance-signin"]) .form-side {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 24px;
        }

        @media(min-width:640px) {
            :where(body[data-page="freelance-signin"]) .form-side {
                padding: 48px 40px
            }
        }

        :where(body[data-page="freelance-signin"]) .form-wrap {
            width: 100%;
            max-width: 420px
        }

        :where(body[data-page="freelance-signin"]) .form-head {
            margin-bottom: 28px
        }

        :where(body[data-page="freelance-signin"]) .form-head h1 {
            font-size: 28px;
            font-weight: 900;
            color: #101615;
            letter-spacing: -.5px;
            margin-bottom: 6px
        }

        @media(min-width:640px) {
            :where(body[data-page="freelance-signin"]) .form-head h1 {
                font-size: 34px
            }
        }

        :where(body[data-page="freelance-signin"]) .form-head p {
            font-size: 14px;
            color: #697371;
            font-weight: 600
        }

        :where(body[data-page="freelance-signin"]) .reg-link {
            font-size: 13px;
            font-weight: 700;
            color: #697371;
            margin-bottom: 28px;
            display: block
        }

        :where(body[data-page="freelance-signin"]) .reg-link a {
            color: var(--primary);
            font-weight: 800;
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 3px
        }

        :where(body[data-page="freelance-signin"]) .field {
            margin-bottom: 16px
        }

        :where(body[data-page="freelance-signin"]) .field-label {
            display: block;
            font-size: 10px;
            font-weight: 800;
            color: #697371;
            text-transform: uppercase;
            letter-spacing: .1em;
            margin-bottom: 5px
        }

        :where(body[data-page="freelance-signin"]) .field-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            background: #eceee6;
            border: 1.5px solid transparent;
            border-radius: 14px;
            padding: 13px 16px;
            transition: all .25s;
        }

        :where(body[data-page="freelance-signin"]) .field-wrap:focus-within {
            background: white;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(56, 84, 232, .09)
        }

        :where(body[data-page="freelance-signin"]) .field-wrap svg {
            flex-shrink: 0;
            color: #8b9390
        }

        :where(body[data-page="freelance-signin"]) .field-wrap input {
            flex: 1;
            background: none;
            border: none;
            outline: none;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            color: #101615;
        }

        :where(body[data-page="freelance-signin"]) .field-wrap input::placeholder {
            color: #8b9390
        }

        :where(body[data-page="freelance-signin"]) .eye-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: #8b9390;
            padding: 0;
            display: flex;
            align-items: center;
            transition: color .2s
        }

        :where(body[data-page="freelance-signin"]) .eye-btn:hover {
            color: #697371
        }

        :where(body[data-page="freelance-signin"]) .btn-submit {
            width: 100%;
            padding: 15px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 14px;
            font-family: inherit;
            font-size: 15px;
            font-weight: 900;
            cursor: pointer;
            transition: all .3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 8px;
        }

        :where(body[data-page="freelance-signin"]) .btn-submit:hover:not(:disabled) {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 12px 28px -6px rgba(56, 84, 232, .4)
        }

        :where(body[data-page="freelance-signin"]) .btn-submit:disabled {
            opacity: .5;
            cursor: not-allowed;
            transform: none
        }

        :where(body[data-page="freelance-signin"]) .divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 20px 0;
            color: #8b9390
        }

        :where(body[data-page="freelance-signin"]) .divider::before,
        :where(body[data-page="freelance-signin"]) .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #dde2dc
        }

        :where(body[data-page="freelance-signin"]) .divider span {
            font-size: 12px;
            font-weight: 700
        }

        :where(body[data-page="freelance-signin"]) .btn-register {
            width: 100%;
            padding: 13px;
            background: white;
            color: var(--primary);
            border: 1.5px solid #cfd6ff;
            border-radius: 14px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            transition: all .25s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            text-decoration: none;
        }

        :where(body[data-page="freelance-signin"]) .btn-register:hover {
            background: #eef0ff;
            border-color: var(--primary)
        }

        :where(body[data-page="freelance-signin"]) .msg-box {
            padding: 12px 16px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 13px;
            text-align: center;
            margin-top: 14px;
            display: none
        }

        :where(body[data-page="freelance-signin"]) .msg-box.err {
            background: #fff1f2;
            color: #e11d48
        }

        :where(body[data-page="freelance-signin"]) .msg-box.ok {
            background: #ecfdf5;
            color: #059669
        }

        :where(body[data-page="freelance-signin"]) .form-wrap {
            animation: slideIn .6s cubic-bezier(.34, 1.56, .64, 1) both
        }

/* ── freelance ── */
:root:where(:has(body[data-page="freelance"])){
            --primary:#3854e8; --primary-dark:#2f49d4;
            --bg:#f4f5f0; --border:#dde2dc;
            --text:#101615; --muted:#697371;
            --nav-h:65px;
        }
        :where(html:has(body[data-page="freelance"])),:where(body[data-page="freelance"]),:where(body[data-page="freelance"]) *{box-sizing:border-box;margin:0;padding:0}
        html:where(:has(body[data-page="freelance"])){scroll-behavior:smooth;-webkit-text-size-adjust:100%}
        body:where([data-page="freelance"]){
            font-family:'Gilroy','Plus Jakarta Sans',sans-serif;
            background:var(--bg);color:var(--text);
            padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,10px));
            overflow-x:hidden;opacity:0;
            transition:padding-left .4s cubic-bezier(.4,0,.2,1),opacity .5s ease;
            -webkit-tap-highlight-color:transparent;
        }
        body:where([data-page="freelance"]).loaded{opacity:1}
        @media(min-width:768px){
            body:where([data-page="freelance"]){padding-left:72px;padding-bottom:0}
            body:where([data-page="freelance"]):has(.sidebar:hover){padding-left:220px}
        }

        /* ── Sidebar ── */
        :where(body[data-page="freelance"]) .sidebar{position:fixed;left:0;top:0;bottom:0;width:72px;background:#fff;border-right:1px solid #eceee6;display:none;flex-direction:column;align-items:center;padding:24px 0;z-index:50;transition:width .4s cubic-bezier(.4,0,.2,1);overflow:hidden}
        @media(min-width:768px){:where(body[data-page="freelance"]) .sidebar{display:flex}}
        :where(body[data-page="freelance"]) .sidebar:hover{width:220px;box-shadow:4px 0 24px rgba(0,0,0,.04)}
        :where(body[data-page="freelance"]) .sidebar-logo{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:900;letter-spacing:-.05em;color:var(--primary);padding:0 20px;margin-bottom:32px;white-space:nowrap;width:100%;text-decoration:none}
        :where(body[data-page="freelance"]) .sidebar-logo img{flex-shrink:0}
        :where(body[data-page="freelance"]) .sidebar-logo span,:where(body[data-page="freelance"]) .sidebar-link span,:where(body[data-page="freelance"]) .sidebar-btn span{opacity:0;transition:opacity .2s,transform .2s;transform:translateX(-8px)}
        :where(body[data-page="freelance"]) .sidebar:hover .sidebar-logo span,:where(body[data-page="freelance"]) .sidebar:hover .sidebar-link span,:where(body[data-page="freelance"]) .sidebar:hover .sidebar-btn span{opacity:1;transform:translateX(0)}
        :where(body[data-page="freelance"]) .sidebar-nav{flex:1;display:flex;flex-direction:column;gap:6px;width:100%;padding:0 10px}
        :where(body[data-page="freelance"]) .sidebar-link{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;color:#697371;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:all .2s}
        :where(body[data-page="freelance"]) .sidebar-link:hover,:where(body[data-page="freelance"]) .sidebar-link.active{background:#eef0ff;color:var(--primary)}
        :where(body[data-page="freelance"]) .sidebar-link svg{flex-shrink:0;width:20px;height:20px}
        :where(body[data-page="freelance"]) .sidebar-bottom{width:100%;padding:0 10px;display:flex;flex-direction:column;gap:8px}
        :where(body[data-page="freelance"]) .sidebar-btn{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;border:none;transition:all .2s;width:100%;background:transparent;color:#ef4444}
        :where(body[data-page="freelance"]) .sidebar-btn:hover{background:#fff1f2}
        :where(body[data-page="freelance"]) .sidebar-btn svg{flex-shrink:0;width:20px;height:20px}
        :where(body[data-page="freelance"]) .sidebar-btn.signin{color:#697371}:where(body[data-page="freelance"]) .sidebar-btn.signin:hover{background:#eceee6;color:var(--primary)}
        :where(body[data-page="freelance"]) .sidebar-btn.start{background:var(--primary);color:white;border-radius:12px}:where(body[data-page="freelance"]) .sidebar-btn.start:hover{background:var(--primary-dark)}

        /* ── Bottom nav ── */
        :where(body[data-page="freelance"]) .bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-top:1px solid rgba(221,226,220,.8);display:flex;justify-content:space-around;align-items:center;z-index:100;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -4px 24px rgba(0,0,0,.04)}
        @media(min-width:768px){:where(body[data-page="freelance"]) .bottom-nav{display:none}}
        :where(body[data-page="freelance"]) .bnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;height:100%;gap:5px;color:#8b9390;text-decoration:none;position:relative;transition:color .3s}
        :where(body[data-page="freelance"]) .bnav-item.active{color:var(--primary)}
        :where(body[data-page="freelance"]) .bnav-item svg{width:22px;height:22px}:where(body[data-page="freelance"]) .bnav-item.active svg{transform:translateY(-2px);stroke-width:2.5}
        :where(body[data-page="freelance"]) .bnav-item span{font-size:10px;font-weight:700}
        :where(body[data-page="freelance"]) .bnav-dot{position:absolute;top:0;width:32px;height:3px;background:var(--primary);border-radius:0 0 4px 4px;opacity:0;transform:scaleX(0);transition:opacity .3s,transform .3s}
        :where(body[data-page="freelance"]) .bnav-item.active .bnav-dot{opacity:1;transform:scaleX(1)}

        /* ── Hero — oq fon, ko'k matn ── */
        :where(body[data-page="freelance"]) .hero{
            background:white url('https://img3.teletype.in/files/20/a0/20a0b21f-059c-4941-9268-83ae25b904c6.png') right center/contain no-repeat;
            padding:52px 28px 44px;position:relative;overflow:hidden;
        }
        :where(body[data-page="freelance"]) .hero::before{content:none}
        @media(max-width:768px){:where(body[data-page="freelance"]) .hero{padding:32px 18px 28px;background-size:0}}
        :where(body[data-page="freelance"]) .hero-circ1{display:none}
        :where(body[data-page="freelance"]) .hero::after{content:none}
        :where(body[data-page="freelance"]) .hero-inner{position:relative;z-index:2}
        :where(body[data-page="freelance"]) .hero-badge{display:inline-flex;align-items:center;gap:6px;background:#eef0ff;border:1px solid #cfd6ff;color:var(--primary);font-size:11px;font-weight:800;padding:5px 13px;border-radius:99px;margin-bottom:18px;letter-spacing:.06em;text-transform:uppercase}
        :where(body[data-page="freelance"]) .hero-title{font-size:52px;font-weight:900;color: black;letter-spacing:-.8px;line-height:1.1;margin-bottom:14px;max-width:55%}
        @media(max-width:768px){:where(body[data-page="freelance"]) .hero-title{font-size:26px;max-width:100%}}
        :where(body[data-page="freelance"]) .hero-sub{font-size:16px;color:var(--muted);font-weight:600;line-height:1.6;margin-bottom:28px;max-width:52%}
        @media(max-width:768px){:where(body[data-page="freelance"]) .hero-sub{max-width:100%}}
        :where(body[data-page="freelance"]) .hero-actions{display:flex;gap:10px;flex-wrap:wrap}
        :where(body[data-page="freelance"]) .btn-white{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:white;padding:13px 26px;border-radius:12px;font-weight:800;font-size:14px;border:none;cursor:pointer;transition:all .25s;text-decoration:none;box-shadow:0 4px 16px rgba(56,84,232,.25)}
        :where(body[data-page="freelance"]) .btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(56,84,232,.35);background:var(--primary-dark)}
        :where(body[data-page="freelance"]) .btn-outline-w{display:inline-flex;align-items:center;gap:8px;background:white;color:var(--primary);padding:13px 26px;border-radius:12px;font-weight:800;font-size:14px;border:1.5px solid #cfd6ff;cursor:pointer;transition:all .25s;text-decoration:none}
        :where(body[data-page="freelance"]) .btn-outline-w:hover{background:#eef0ff;border-color:var(--primary)}
        :where(body[data-page="freelance"]) .hero-stats{display:flex;gap:28px;margin-top:36px;padding-top:28px;border-top:none}
        @media(max-width:640px){:where(body[data-page="freelance"]) .hero-stats{gap:16px}}
        :where(body[data-page="freelance"]) .hs-num{font-size:24px;font-weight:900;color:var(--primary)}
        :where(body[data-page="freelance"]) .hs-lbl{font-size:10px;color:var(--muted);font-weight:700;margin-top:3px;text-transform:uppercase;letter-spacing:.08em}

        /* ── Main — to'liq kenglik ── */
        :where(body[data-page="freelance"]) .main{padding:28px 20px 80px}
        @media(max-width:768px){:where(body[data-page="freelance"]) .main{padding:20px 14px 80px}}
        @media(min-width:1500px){:where(body[data-page="freelance"]) .main{max-width:1500px;margin:0 auto}}

        /* ── Tabs ── */
        :where(body[data-page="freelance"]) .tabs-wrap{display:flex;gap:4px;background:white;border:1px solid var(--border);border-radius:14px;padding:4px;margin-bottom:24px;animation:fadeUp-4 .5s both}
        :where(body[data-page="freelance"]) .tab-btn{flex:1;padding:10px 14px;border-radius:10px;border:none;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:all .22s;color:var(--muted);background:transparent;display:flex;align-items:center;justify-content:center;gap:6px}
        :where(body[data-page="freelance"]) .tab-btn.active{background:var(--primary);color:white;box-shadow:0 4px 12px rgba(56,84,232,.28)}
        :where(body[data-page="freelance"]) .tab-btn svg{width:15px;height:15px}

        /* ── Filters ── */
        :where(body[data-page="freelance"]) .filters{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;animation:fadeUp-4 .5s .04s both}
        :where(body[data-page="freelance"]) .filter-pill{display:flex;align-items:center;gap:5px;padding:8px 14px;background:white;border:1.5px solid var(--border);border-radius:99px;font-size:12px;font-weight:800;color:var(--muted);cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}
        :where(body[data-page="freelance"]) .filter-pill:hover,:where(body[data-page="freelance"]) .filter-pill.active{border-color:var(--primary);color:var(--primary);background:#eef0ff}
        :where(body[data-page="freelance"]) .search-box{flex:1;min-width:180px;max-width:280px;display:flex;align-items:center;gap:8px;background:white;border:1.5px solid var(--border);border-radius:11px;padding:8px 13px;transition:all .2s}
        :where(body[data-page="freelance"]) .search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(56,84,232,.08)}
        :where(body[data-page="freelance"]) .search-box input{flex:1;background:none;border:none;outline:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--text)}
        :where(body[data-page="freelance"]) .search-box input::placeholder{color:var(--muted)}

        /* ── Jobs grid — 4 ustun ── */
        :where(body[data-page="freelance"]) .jobs-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:14px;
            animation:fadeUp-4 .5s .08s both;
        }
        @media(max-width:1200px){:where(body[data-page="freelance"]) .jobs-grid{grid-template-columns:repeat(3,1fr)}}
        @media(max-width:860px){:where(body[data-page="freelance"]) .jobs-grid{grid-template-columns:repeat(2,1fr)}}
        @media(max-width:540px){:where(body[data-page="freelance"]) .jobs-grid{grid-template-columns:1fr}}

        /* ── Freelancers grid — 4 ustun ── */
        :where(body[data-page="freelance"]) .fl-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:14px;
            animation:fadeUp-4 .5s .08s both;
        }
        @media(max-width:1200px){:where(body[data-page="freelance"]) .fl-grid{grid-template-columns:repeat(3,1fr)}}
        @media(max-width:860px){:where(body[data-page="freelance"]) .fl-grid{grid-template-columns:repeat(2,1fr)}}
        @media(max-width:540px){:where(body[data-page="freelance"]) .fl-grid{grid-template-columns:1fr}}

        /* ── Job card — gradient yo'q ── */
        :where(body[data-page="freelance"]) .job-card{background:white;border:1px solid var(--border);border-radius:18px;padding:20px;transition:all .28s;cursor:pointer;position:relative;overflow:hidden}
        :where(body[data-page="freelance"]) .job-card:hover{transform:translateY(-3px);border-color:#cfd6ff;box-shadow:0 12px 32px -10px rgba(56,84,232,.14)}
        :where(body[data-page="freelance"]) .job-cat{display:inline-flex;align-items:center;background:#eef0ff;color:var(--primary);font-size:9px;font-weight:900;padding:3px 9px;border-radius:99px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em}
        :where(body[data-page="freelance"]) .job-title{font-size:15px;font-weight:900;color:var(--text);margin-bottom:7px;line-height:1.3}
        :where(body[data-page="freelance"]) .job-desc{font-size:11px;color:var(--muted);font-weight:600;line-height:1.55;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        :where(body[data-page="freelance"]) .job-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}
        :where(body[data-page="freelance"]) .job-tag{background:#f4f5f0;border:1px solid var(--border);color:var(--muted);font-size:9px;font-weight:800;padding:2px 7px;border-radius:5px}
        :where(body[data-page="freelance"]) .job-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border)}
        :where(body[data-page="freelance"]) .job-budget{font-size:15px;font-weight:900;color:var(--primary)}
        :where(body[data-page="freelance"]) .job-budget sup{font-size:9px;font-weight:700;color:var(--muted)}
        :where(body[data-page="freelance"]) .job-deadline{display:flex;align-items:center;gap:3px;font-size:10px;font-weight:700;color:var(--muted)}
        :where(body[data-page="freelance"]) .job-deadline svg{width:11px;height:11px}
        :where(body[data-page="freelance"]) .job-poster{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
        :where(body[data-page="freelance"]) .j-ava{width:28px;height:28px;border-radius:50%;background:#3854e8;display:flex;align-items:center;justify-content:center;color:white;font-size:11px;font-weight:900;flex-shrink:0}
        :where(body[data-page="freelance"]) .j-name{font-size:11px;font-weight:800;color:var(--text)}
        :where(body[data-page="freelance"]) .j-time{font-size:10px;font-weight:600;color:var(--muted)}
        :where(body[data-page="freelance"]) .j-apply{margin-left:auto;background:var(--primary);color:white;border:none;border-radius:8px;padding:7px 13px;font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:4px}
        :where(body[data-page="freelance"]) .j-apply:hover{background:var(--primary-dark)}
        :where(body[data-page="freelance"]) .j-apply:disabled{opacity:.5;cursor:not-allowed}
        :where(body[data-page="freelance"]) .urgent-badge{position:absolute;top:14px;right:14px;background:#fef2f2;color:#dc2626;font-size:9px;font-weight:900;padding:3px 7px;border-radius:99px;border:1px solid #fecaca;text-transform:uppercase;letter-spacing:.05em}

        /* ── Freelancer card — gradient yo'q ── */
        :where(body[data-page="freelance"]) .fl-card{background:white;border:1px solid var(--border);border-radius:18px;padding:22px;text-align:center;transition:all .28s}
        :where(body[data-page="freelance"]) .fl-card:hover{transform:translateY(-3px);border-color:#cfd6ff;box-shadow:0 12px 32px -10px rgba(56,84,232,.14)}
        :where(body[data-page="freelance"]) .fl-ava-ph{width:64px;height:64px;border-radius:50%;background:#3854e8;display:flex;align-items:center;justify-content:center;color:white;font-size:20px;font-weight:900;margin:0 auto 12px}
        :where(body[data-page="freelance"]) .fl-ava{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0 auto 12px;display:block;border:2px solid var(--border)}
        :where(body[data-page="freelance"]) .fl-name{font-size:15px;font-weight:900;color:var(--text);margin-bottom:3px}
        :where(body[data-page="freelance"]) .fl-role{font-size:11px;color:var(--primary);font-weight:700;margin-bottom:10px}
        :where(body[data-page="freelance"]) .fl-skills{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
        :where(body[data-page="freelance"]) .fl-skill{background:#eceee6;color:var(--muted);font-size:9px;font-weight:800;padding:3px 7px;border-radius:5px}
        :where(body[data-page="freelance"]) .fl-stats{display:flex;justify-content:center;gap:18px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:12px}
        :where(body[data-page="freelance"]) .fl-sn{font-size:15px;font-weight:900;color:var(--text)}
        :where(body[data-page="freelance"]) .fl-sl{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
        :where(body[data-page="freelance"]) .fl-rate{font-size:12px;font-weight:900;color:var(--primary);margin-bottom:12px}
        :where(body[data-page="freelance"]) .fl-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;background:var(--primary);color:white;border:none;border-radius:10px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:all .25s;text-decoration:none}
        :where(body[data-page="freelance"]) .fl-btn:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 6px 16px -4px rgba(56,84,232,.4)}

        /* ── Section head ── */
        :where(body[data-page="freelance"]) .sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;animation:fadeUp-4 .5s .04s both}
        :where(body[data-page="freelance"]) .sec-title{font-size:17px;font-weight:900;display:flex;align-items:center;gap:7px}
        :where(body[data-page="freelance"]) .sec-count{font-size:11px;color:var(--muted);font-weight:700;background:#eceee6;padding:3px 9px;border-radius:99px}

        /* ── Modal ── */
        :where(body[data-page="freelance"]) .modal-bg{position:fixed;inset:0;background:rgba(16,22,21,.5);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}
        :where(body[data-page="freelance"]) .modal-bg.open{opacity:1;pointer-events:all}
        :where(body[data-page="freelance"]) .modal{background:white;border-radius:22px;padding:28px;width:100%;max-width:500px;transform:translateY(18px) scale(.97);transition:all .3s cubic-bezier(.34,1.56,.64,1);max-height:90vh;overflow-y:auto}
        :where(body[data-page="freelance"]) .modal-bg.open .modal{transform:translateY(0) scale(1)}
        :where(body[data-page="freelance"]) .modal-title{font-size:20px;font-weight:900;margin-bottom:5px}
        :where(body[data-page="freelance"]) .modal-sub{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:20px}
        :where(body[data-page="freelance"]) .fgrp{margin-bottom:14px}
        :where(body[data-page="freelance"]) .flbl{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px;display:block}
        :where(body[data-page="freelance"]) .finp{width:100%;background:#f4f5f0;border:1.5px solid var(--border);border-radius:11px;padding:11px 13px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text);outline:none;transition:all .2s;resize:none}
        :where(body[data-page="freelance"]) .finp:focus{background:white;border-color:var(--primary);box-shadow:0 0 0 3px rgba(56,84,232,.08)}
        :where(body[data-page="freelance"]) .m-acts{display:flex;gap:10px;margin-top:20px}
        :where(body[data-page="freelance"]) .btn-cancel{flex:1;background:#eceee6;color:var(--muted);border:none;border-radius:11px;padding:12px;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:all .2s}
        :where(body[data-page="freelance"]) .btn-cancel:hover{background:#dde2dc;color:var(--text)}
        :where(body[data-page="freelance"]) .btn-post{flex:2;background:var(--primary);color:white;border:none;border-radius:11px;padding:12px;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:7px}
        :where(body[data-page="freelance"]) .btn-post:hover{background:var(--primary-dark)}
        :where(body[data-page="freelance"]) .btn-post:disabled{opacity:.5;cursor:not-allowed}

        /* ── Skeleton ── */
        :where(body[data-page="freelance"]) .sk{background:#eceee6;border-radius:8px;animation:sh-2 1.4s infinite}

        /* ── Empty ── */
        :where(body[data-page="freelance"]) .empty-state{text-align:center;padding:48px 20px;color:var(--muted);grid-column:1/-1}
        :where(body[data-page="freelance"]) .empty-ico{width:60px;height:60px;background:white;border:1px solid var(--border);border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}

        /* Toast */
        :where(body[data-page="freelance"]) .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(14px);background:#1b2321;color:#fff;padding:10px 18px;border-radius:11px;font-weight:700;font-size:13px;z-index:400;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);white-space:nowrap}
        :where(body[data-page="freelance"]) .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
        :where(body[data-page="freelance"]) .toast.ok{background:#059669}
        :where(body[data-page="freelance"]) .toast.err{background:#dc2626}
        @media(min-width:768px){:where(body[data-page="freelance"]) .toast{bottom:22px}}
    
        /* Site Switcher */
        :where(body[data-page="freelance"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="freelance"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="freelance"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="freelance"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="freelance"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="freelance"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="freelance"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="freelance"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="freelance"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="freelance"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="freelance"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="freelance"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="freelance"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="freelance"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="freelance"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── index ── */
:root:where(:has(body[data-page="index"])) {
            --primary: #3b82f6;
            --primary-dark: #2563eb;
            --bg: #f8fafc;
            --text-main: #0f172a;
            --nav-height: 65px;
        }

        html:where(:has(body[data-page="index"])) {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }

        body:where([data-page="index"]) {
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            background-color: var(--bg);
            color: var(--text-main);
            user-select: none;
            -webkit-user-select: none;
            padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 10px));
            padding-left: 0;
            overflow-x: hidden;
            opacity: 0;
            transition: opacity 0.6s ease-in;
        }

        body:where([data-page="index"]).loaded {
            opacity: 1;
        }

        @media (min-width: 768px) {
            body:where([data-page="index"]) {
                padding-left: 72px;
                padding-bottom: 0;
                transition: padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease-in !important;
            }

            body:where([data-page="index"]):has(.sidebar:hover) {
                padding-left: 220px !important;
            }
        }

        /* YONIB CHIQISH (BITTA-BITTA) ANIMATSIYASI */
        :where(body[data-page="index"]) .reveal-on-scroll {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
            will-change: opacity, transform;
        }
        
        :where(body[data-page="index"]) .reveal-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }

        :where(body[data-page="index"]) .glass-nav {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        :where(body[data-page="index"]) .bento-card {
            background: white;
            border-radius: 6px;
            border: 1px solid #f1f5f9;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        :where(body[data-page="index"]) .bento-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px -15px rgba(59, 130, 246, 0.12);
            cursor: pointer;
            border-color: #e2e8f0;
        }

        :where(body[data-page="index"]) .hero-gradient {
            background: radial-gradient(circle at top right, #dbeafe, transparent),
                radial-gradient(circle at bottom left, #f5f3ff, transparent);
            background-color: white;
        }

        :where(body[data-page="index"]) .footer-bg {
            background: white;
            border-top: 1px solid #f1f5f9;
        }

        :where(body[data-page="index"]) .input-pill {
            background: #f1f5f9;
            border: 1px solid transparent;
            transition: 0.3s ease;
        }

        :where(body[data-page="index"]) .input-pill:focus-within {
            background: white;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        }

        :where(body[data-page="index"]) .custom-select-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            width: 100%;
        }

        @media (min-width: 640px) {
            :where(body[data-page="index"]) .custom-select-wrap {
                width: auto;
            }
        }

        :where(body[data-page="index"]) .custom-select-wrap select {
            appearance: none;
            -webkit-appearance: none;
            background: white;
            border: 1.5px solid #e2e8f0;
            border-radius: 999px;
            padding: 12px 40px 12px 20px;
            font-size: 13px;
            font-weight: 700;
            font-family: inherit;
            color: var(--text-main);
            outline: none;
            cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s;
            width: 100%;
            min-width: 140px;
            text-align: left;
        }

        @media (min-width: 640px) {
            :where(body[data-page="index"]) .custom-select-wrap select {
                min-width: 160px;
                padding: 14px 40px 14px 20px;
            }
        }

        :where(body[data-page="index"]) .custom-select-wrap select:hover,
        :where(body[data-page="index"]) .custom-select-wrap select:focus {
            border-color: var(--primary);
        }

        :where(body[data-page="index"]) .custom-select-wrap select:focus {
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        }

        :where(body[data-page="index"]) .custom-select-wrap .select-arrow {
            position: absolute;
            right: 16px;
            pointer-events: none;
            color: #64748b;
            display: flex;
            align-items: center;
            transition: color 0.2s;
        }

        :where(body[data-page="index"]) .custom-select-wrap select:focus~.select-arrow {
            color: var(--primary);
        }

        :where(body[data-page="index"]) .dev-track-wrapper {
            overflow: hidden;
            width: 100%;
            position: relative;
            -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
            mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        }

        :where(body[data-page="index"]) .dev-track {
            display: flex;
            gap: 12px;
            width: max-content;
            animation: scrollTrack 70s linear infinite;
            padding: 10px 0 20px 0;
        }

        @media (min-width: 768px) {
            :where(body[data-page="index"]) .dev-track {
                gap: 16px;
                animation-duration: 90s;
            }
        }

        :where(body[data-page="index"]) .dev-track:hover {
            animation-play-state: paused;
        }

        /* Sidebar ochiq turganda karusel aynan kelgan joyida kutadi. */
        body:where([data-page="index"]):has(.sidebar:hover) .dev-track {
            animation-play-state: paused;
        }

        :where(body[data-page="index"]) .dev-card {
            flex-shrink: 0;
            position: relative;
            border-radius: 6px;
            overflow: hidden;
            width: 140px;
            height: 190px;
            cursor: pointer;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            background: white;
            text-decoration: none;
            display: block;
        }

        @media (min-width: 768px) {
            :where(body[data-page="index"]) .dev-card {
                width: 160px;
                height: 210px;
            }
        }

        @media (min-width: 1280px) {
            :where(body[data-page="index"]) .dev-card {
                width: 185px;
                height: 245px;
            }
        }

        :where(body[data-page="index"]) .dev-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 12px 30px -8px rgba(59, 130, 246, 0.25), 0 4px 12px rgba(59, 130, 246, 0.1);
            z-index: 10;
        }

        :where(body[data-page="index"]) .dev-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.6s ease;
        }

        :where(body[data-page="index"]) .dev-card:hover .dev-photo {
            transform: scale(1.08);
        }

        :where(body[data-page="index"]) .dev-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(10, 25, 70, 0.9) 0%, rgba(37, 99, 235, 0.3) 45%, transparent 75%);
        }

        :where(body[data-page="index"]) .dev-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px;
        }

        @media (min-width: 768px) {
            :where(body[data-page="index"]) .dev-info {
                padding: 14px;
            }
        }

        :where(body[data-page="index"]) .dev-name {
            font-size: 11px;
            font-weight: 800;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            line-height: 1.25;
            margin-bottom: 6px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        }

        :where(body[data-page="index"]) .dev-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        :where(body[data-page="index"]) .dev-class {
            font-size: 8px;
            font-weight: 700;
            color: white;
            background: rgba(255, 255, 255, 0.25);
            padding: 2px 6px;
            border-radius: 999px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            backdrop-filter: blur(4px);
        }

        @media (min-width: 768px) {
            :where(body[data-page="index"]) .dev-class {
                font-size: 9px;
                padding: 3px 8px;
            }
        }

        :where(body[data-page="index"]) .dev-projects {
            font-size: 8px;
            font-weight: 700;
            color: white;
            background: var(--primary);
            padding: 2px 6px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            gap: 3px;
        }

        @media (min-width: 768px) {
            :where(body[data-page="index"]) .dev-projects {
                font-size: 9px;
                padding: 3px 8px;
                gap: 4px;
            }
        }

        :where(body[data-page="index"]) .dev-preview {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--primary-dark);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            gap: 6px;
            opacity: 0;
            transform: translateY(15px);
            transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            border-radius: 6px;
            z-index: 5;
            padding: 14px 12px;
        }

        :where(body[data-page="index"]) .dev-card:hover .dev-preview {
            opacity: 1;
            transform: translateY(0);
        }

        :where(body[data-page="index"]) .dev-preview-name {
            font-size: 11px;
            font-weight: 800;
            color: white;
            line-height: 1.3;
            text-transform: uppercase;
        }

        @media (min-width: 768px) {
            :where(body[data-page="index"]) .dev-preview-name {
                font-size: 12px;
            }
        }

        :where(body[data-page="index"]) .dev-preview-class {
            font-size: 8px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.9);
            background: rgba(255, 255, 255, 0.2);
            padding: 2px 6px;
            border-radius: 999px;
        }

        :where(body[data-page="index"]) .dev-preview-count {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 9px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.85);
            margin-top: 2px;
        }

        :where(body[data-page="index"]) .dev-preview-btn {
            margin-top: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: white;
            color: var(--primary);
            border-radius: 50%;
            align-self: flex-end;
            transition: transform 0.2s;
        }

        @media (min-width: 768px) {
            :where(body[data-page="index"]) .dev-preview-btn {
                width: 28px;
                height: 28px;
                margin-top: 4px;
            }
        }

        :where(body[data-page="index"]) .dev-card:hover .dev-preview-btn {
            transform: scale(1.1) rotate(-45deg);
        }

        :where(body[data-page="index"]) .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: 72px;
            background: white;
            border-right: 1px solid #f1f5f9;
            display: none;
            flex-direction: column;
            align-items: center;
            padding: 24px 0;
            z-index: 50;
            gap: 0;
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02);
        }

        @media (min-width: 768px) {
            :where(body[data-page="index"]) .sidebar {
                display: flex;
            }
        }

        :where(body[data-page="index"]) .sidebar:hover {
            width: 220px;
        }


        :where(body[data-page="index"]) .sidebar-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 20px;
            font-weight: 900;
            letter-spacing: -0.05em;
            color: var(--primary);
            padding: 0 20px;
            margin-bottom: 32px;
            white-space: nowrap;
            width: 100%;
        }

        :where(body[data-page="index"]) .sidebar-logo img {
            flex-shrink: 0;
        }

        :where(body[data-page="index"]) .sidebar-logo span {
            opacity: 0;
            transition: opacity 0.2s, transform 0.2s;
            transform: translateX(-10px);
        }

        :where(body[data-page="index"]) .sidebar:hover .sidebar-logo span {
            opacity: 1;
            transform: translateX(0);
        }

        :where(body[data-page="index"]) .sidebar-nav {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
            padding: 0 10px;
        }

        :where(body[data-page="index"]) .sidebar-link {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 14px;
            border-radius: 6px;
            color: #64748b;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            transition: all 0.2s ease;
        }

        :where(body[data-page="index"]) .sidebar-link:hover,
        :where(body[data-page="index"]) .sidebar-link.active {
            background: #eff6ff;
            color: var(--primary);
        }

        :where(body[data-page="index"]) .sidebar-link svg {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
        }

        :where(body[data-page="index"]) .sidebar-link span {
            opacity: 0;
            transition: opacity 0.2s;
        }

        :where(body[data-page="index"]) .sidebar:hover .sidebar-link span {
            opacity: 1;
        }

        :where(body[data-page="index"]) .sidebar-bottom {
            width: 100%;
            padding: 0 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        :where(body[data-page="index"]) .sidebar-btn {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 700;
            white-space: nowrap;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            width: 100%;
        }

        :where(body[data-page="index"]) .sidebar-btn.signin {
            background: transparent;
            color: #64748b;
        }

        :where(body[data-page="index"]) .sidebar-btn.signin:hover {
            background: #f1f5f9;
            color: var(--primary);
        }

        :where(body[data-page="index"]) .sidebar-btn.start {
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        :where(body[data-page="index"]) .sidebar-btn.start:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
        }

        :where(body[data-page="index"]) .sidebar-btn svg {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
        }

        :where(body[data-page="index"]) .sidebar-btn span {
            opacity: 0;
            transition: opacity 0.2s;
        }

        :where(body[data-page="index"]) .sidebar:hover .sidebar-btn span {
            opacity: 1;
        }

        :where(body[data-page="index"]) .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: var(--nav-height);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-top: 1px solid rgba(226, 232, 240, 0.8);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 100;
            padding-bottom: env(safe-area-inset-bottom, 0px);
            box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.04);
        }

        @media (min-width: 768px) {
            :where(body[data-page="index"]) .bottom-nav {
                display: none;
            }
        }

        :where(body[data-page="index"]) .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            height: 100%;
            gap: 5px;
            color: #94a3b8;
            text-decoration: none;
            position: relative;
            transition: color 0.3s ease;
        }

        :where(body[data-page="index"]) .bottom-nav-item.active {
            color: var(--primary);
        }

        :where(body[data-page="index"]) .bottom-nav-item svg {
            width: 22px;
            height: 22px;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), stroke-width 0.3s;
        }

        :where(body[data-page="index"]) .bottom-nav-item.active svg {
            transform: translateY(-2px);
            stroke-width: 2.5;
        }

        :where(body[data-page="index"]) .bottom-nav-item span {
            font-size: 10px;
            font-weight: 700;
            transition: opacity 0.3s, transform 0.3s;
        }

        :where(body[data-page="index"]) .bottom-nav-indicator {
            position: absolute;
            top: 0;
            width: 32px;
            height: 3px;
            background: var(--primary);
            border-radius: 0 0 4px 4px;
            opacity: 0;
            transform: scaleX(0);
            transition: opacity 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        :where(body[data-page="index"]) .bottom-nav-item.active .bottom-nav-indicator {
            opacity: 1;
            transform: scaleX(1);
        }

        @media (max-width: 639px) {
            :where(body[data-page="index"]) #projectsGrid>div:nth-child(n+4) {
                display: none !important;
            }
        }
    
        /* Site Switcher */
        :where(body[data-page="index"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="index"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="index"]) .switcher-box{display:flex;background:#f1f5f9;border-radius: 6px;padding:3px;gap:2px;}
        :where(body[data-page="index"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius: 6px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="index"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="index"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="index"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="index"]) .sw-payable.sw-active{background:#eff6ff;}
        :where(body[data-page="index"]) .sw-payable.sw-active .sw-text{color:#3b82f6;font-size:13px;}
        :where(body[data-page="index"]) .sw-payable:not(.sw-active) .sw-text{color:#94a3b8;}
        :where(body[data-page="index"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="index"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="index"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="index"]) .sw-gelica:not(.sw-active) .sw-text{color:#94a3b8;}
        :where(body[data-page="index"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

        /* 2026 visual refresh */
        :root:where(:has(body[data-page="index"])) {
            --primary: #4b68ff;
            --primary-dark: #3854e8;
            --accent: #dfff56;
            --ink: #101615;
            --muted: #697371;
            --line: #dde2dc;
            --paper: #f4f5f0;
            --surface: #ffffff;
            --nav-height: 72px;
        }

        :where(html:has(body[data-page="index"])), :where(body[data-page="index"]), :where(body[data-page="index"]) *, :where(html:has(body[data-page="index"]))::before, :where(body[data-page="index"])::before, :where(body[data-page="index"]) *::before, :where(html:has(body[data-page="index"]))::after, :where(body[data-page="index"])::after, :where(body[data-page="index"]) *::after { box-sizing: border-box; }

        body:where([data-page="index"]) {
            font-family: 'Manrope', sans-serif;
            background:
                radial-gradient(circle at 78% 6%, rgba(75, 104, 255, .09), transparent 27rem),
                var(--paper);
            color: var(--ink);
        }

        @media (min-width: 768px) {
            body:where([data-page="index"]) { padding-left: 88px; }
            body:where([data-page="index"]):has(.sidebar:hover) { padding-left: 248px !important; }
        }

        :where(body[data-page="index"])::selection, :where(body[data-page="index"]) *::selection { background: var(--accent); color: var(--ink); }

        :where(body[data-page="index"]) .sidebar {
            width: 88px;
            padding: 26px 14px 18px;
            background: rgba(15, 21, 20, .97);
            border-right: 0;
            box-shadow: none;
        }

        :where(body[data-page="index"]) .sidebar:hover { width: 248px; }

        :where(body[data-page="index"]) .sidebar-logo {
            gap: 13px;
            padding: 0 8px;
            margin-bottom: 30px;
            color: white;
            font-size: 19px;
            letter-spacing: -.045em;
        }

        :where(body[data-page="index"]) .brand-mark {
            width: 44px;
            height: 44px;
            border-radius: 6px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            background: var(--accent);
            color: var(--ink);
            font-size: 21px;
            font-weight: 800;
            letter-spacing: -.08em;
            box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
        }
        :where(body[data-page="index"]) .sidebar-logo .brand-mark { opacity: 1; transform: none; }

        :where(body[data-page="index"]) .sidebar-nav { gap: 7px; padding: 0; }

        :where(body[data-page="index"]) .sidebar-link {
            min-height: 52px;
            padding: 14px 18px;
            border-radius: 6px;
            gap: 17px;
            color: #8c9693;
            font-size: 13px;
        }

        :where(body[data-page="index"]) .sidebar-link:hover,
        :where(body[data-page="index"]) .sidebar-link.active { background: #202826; color: white; }

        :where(body[data-page="index"]) .sidebar-link.active::before {
            content: '';
            position: absolute;
            left: 5px;
            width: 3px;
            height: 20px;
            border-radius: 4px;
            background: var(--accent);
        }

        :where(body[data-page="index"]) .sidebar-link { position: relative; }
        :where(body[data-page="index"]) .sidebar-link svg { width: 19px; height: 19px; }
        :where(body[data-page="index"]) .sidebar-bottom { padding: 0; gap: 7px; }

        :where(body[data-page="index"]) .sidebar-btn {
            min-height: 50px;
            padding: 13px 17px;
            border-radius: 6px;
            gap: 16px;
            font-size: 13px;
        }

        :where(body[data-page="index"]) .sidebar-btn.signin { color: #aab3b0; }
        :where(body[data-page="index"]) .sidebar-btn.signin:hover { background: #202826; color: white; }
        :where(body[data-page="index"]) .sidebar-btn.start,
        :where(body[data-page="index"]) #sbProfile .sidebar-btn.start { background: var(--accent) !important; color: var(--ink); box-shadow: none; }
        :where(body[data-page="index"]) .sidebar-btn.start:hover { background: #d5f344; }

        :where(body[data-page="index"]) .site-switcher { padding: 0; }
        :where(body[data-page="index"]) .switcher-box { background: #202826; border-radius: 6px; padding: 4px; }
        :where(body[data-page="index"]) .sw-payable.sw-active { background: var(--accent); }
        :where(body[data-page="index"]) .sw-payable.sw-active .sw-text { color: var(--ink); }

        :where(body[data-page="index"]) .bottom-nav {
            height: var(--nav-height);
            left: 10px;
            right: 10px;
            bottom: 10px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,.12);
            background: rgba(15, 21, 20, .94);
            box-shadow: 0 16px 40px rgba(13,20,18,.24);
            overflow: hidden;
        }

        :where(body[data-page="index"]) .bottom-nav-item { color: #7f8986; gap: 4px; }
        :where(body[data-page="index"]) .bottom-nav-item.active { color: white; }
        :where(body[data-page="index"]) .bottom-nav-item.active::after {
            content: '';
            position: absolute;
            bottom: 8px;
            width: 5px;
            height: 5px;
            border-radius: 99px;
            background: var(--accent);
        }
        :where(body[data-page="index"]) .bottom-nav-indicator { display: none; }
        :where(body[data-page="index"]) .bottom-nav-item span { font-size: 9px; }

        :where(body[data-page="index"]) .page-shell { max-width: 1680px; margin: 0 auto; padding: 24px 28px 0; }

        :where(body[data-page="index"]) .mobile-head {
            display: none;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        :where(body[data-page="index"]) .mobile-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.04em; }
        :where(body[data-page="index"]) .mobile-brand .brand-mark { width: 38px; height: 38px; border-radius: 6px; font-size: 18px; }

        :where(body[data-page="index"]) .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 14px;
            color: #bcc4c1;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .15em;
            text-transform: uppercase;
        }

        :where(body[data-page="index"]) .eyebrow-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 0 5px rgba(223,255,86,.12); }

        :where(body[data-page="index"]) .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr);
            gap: 14px;
            margin-bottom: 14px;
        }

        :where(body[data-page="index"]) .hero-panel {
            min-height: 430px;
            padding: clamp(28px, 4vw, 56px);
            border-radius: 6px;
            background:
                radial-gradient(circle at 88% 0%, rgba(75,104,255,.9), transparent 31%),
                linear-gradient(135deg, #111817 0%, #101615 70%);
            color: white;
            position: relative;
            overflow: hidden;
            isolation: isolate;
        }

        :where(body[data-page="index"]) .hero-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            opacity: .13;
            background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
            background-size: 44px 44px;
            mask-image: linear-gradient(to right, black, transparent 85%);
        }

        :where(body[data-page="index"]) .hero-copy { max-width: 780px; position: relative; z-index: 2; }

        :where(body[data-page="index"]) .hero-title {
            max-width: 760px;
            margin: 0 0 18px;
            font-size: clamp(38px, 5vw, 72px);
            line-height: .96;
            letter-spacing: -.075em;
            font-weight: 700;
        }

        :where(body[data-page="index"]) .hero-title .accent-word { color: var(--accent); }

        :where(body[data-page="index"]) .hero-description {
            max-width: 590px;
            margin: 0 0 24px;
            color: #aeb8b4;
            font-size: clamp(14px, 1.2vw, 17px);
            line-height: 1.72;
            font-weight: 500;
        }

        :where(body[data-page="index"]) .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

        :where(body[data-page="index"]) .primary-cta, :where(body[data-page="index"]) .secondary-cta {
            min-height: 48px;
            padding: 0 23px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 800;
            transition: transform .2s, background .2s, border-color .2s;
        }

        :where(body[data-page="index"]) .primary-cta { background: var(--accent); color: var(--ink); }
        :where(body[data-page="index"]) .primary-cta:hover { transform: translateY(-2px); background: #e8ff81; }
        :where(body[data-page="index"]) .secondary-cta { color: white; border: 1px solid #39413f; background: rgba(255,255,255,.04); }
        :where(body[data-page="index"]) .secondary-cta:hover { border-color: #69726f; background: rgba(255,255,255,.08); }

        :where(body[data-page="index"]) .hero-trust {
            position: absolute;
            right: 26px;
            bottom: 24px;
            display: flex;
            align-items: center;
            gap: 11px;
            color: #79827f;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .1em;
        }

        :where(body[data-page="index"]) .trust-avatars { display: flex; }
        :where(body[data-page="index"]) .trust-avatar { width: 29px; height: 29px; border: 2px solid #141a19; border-radius: 50%; margin-left: -8px; display: grid; place-items: center; color: white; font-size: 9px; font-weight: 800; }
        :where(body[data-page="index"]) .trust-avatar:first-child { margin-left: 0; }
        :where(body[data-page="index"]) .trust-avatar:nth-child(1) { background: #4b68ff; }
        :where(body[data-page="index"]) .trust-avatar:nth-child(2) { background: #e473a8; }
        :where(body[data-page="index"]) .trust-avatar:nth-child(3) { background: #eaa64c; }

        :where(body[data-page="index"]) .hero-side { display: grid; grid-template-rows: 1.15fr .85fr; gap: 14px; }

        :where(body[data-page="index"]) .metric-card, :where(body[data-page="index"]) .mini-metrics {
            border: 1px solid rgba(16,22,21,.08);
            border-radius: 6px;
            background: var(--surface);
            overflow: hidden;
        }

        :where(body[data-page="index"]) .metric-card { padding: 26px; display: flex; flex-direction: column; position: relative; }
        :where(body[data-page="index"]) .metric-card::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 190px; height: 190px; border-radius: 50%; background: #edf0ff; }
        :where(body[data-page="index"]) .metric-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
        :where(body[data-page="index"]) .metric-label { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
        :where(body[data-page="index"]) .trend-pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 999px; background: #eff8c9; color: #405000; font-size: 12px; font-weight: 800; }
        :where(body[data-page="index"]) .metric-value { margin-top: auto; position: relative; z-index: 1; }
        :where(body[data-page="index"]) .metric-value strong { display: block; font-size: clamp(33px, 3.2vw, 54px); line-height: 1; letter-spacing: -.06em; font-weight: 800; }
        :where(body[data-page="index"]) .metric-value span { display: block; margin-top: 12px; color: #8b9390; font-size: 14px; font-weight: 800; }
        :where(body[data-page="index"]) .metric-graph { height: 58px; margin-top: 20px; display: flex; align-items: flex-end; gap: 6px; position: relative; z-index: 1; }
        :where(body[data-page="index"]) .metric-graph i { flex: 1; min-width: 7px; border-radius: 4px 4px 2px 2px; background: #dbe0ff; }
        :where(body[data-page="index"]) .metric-graph i:nth-child(4n), :where(body[data-page="index"]) .metric-graph i:nth-child(7n) { background: var(--primary); }

        :where(body[data-page="index"]) .mini-metrics { display: grid; grid-template-columns: 1fr 1fr; }
        :where(body[data-page="index"]) .mini-stat { padding: 22px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
        :where(body[data-page="index"]) .mini-stat + .mini-stat { border-left: 1px solid var(--line); }
        :where(body[data-page="index"]) .mini-icon { width: 39px; height: 39px; border-radius: 6px; display: grid; place-items: center; color: var(--ink); background: var(--accent); }
        :where(body[data-page="index"]) .mini-stat:nth-child(2) .mini-icon { background: #e6eaff; color: var(--primary); }
        :where(body[data-page="index"]) .mini-stat strong { display: block; margin-top: 24px; font-size: clamp(29px, 2.5vw, 42px); line-height: 1; letter-spacing: -.05em; font-weight: 800; }
        :where(body[data-page="index"]) .mini-stat p { margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }

        :where(body[data-page="index"]) .custom-select-wrap select { min-width: 154px; border: 1px solid var(--line); border-radius: 6px; padding: 13px 38px 13px 15px; background: #f7f8f5; color: #3b4442; font-size: 11px; }
        :where(body[data-page="index"]) .custom-select-wrap select:hover, :where(body[data-page="index"]) .custom-select-wrap select:focus { border-color: #b7c1bc; box-shadow: none; }

        :where(body[data-page="index"]) .section-block { margin-bottom: 92px; overflow: hidden; }
        :where(body[data-page="index"]) .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 2px 30px; }
        :where(body[data-page="index"]) .section-kicker { display: block; margin-bottom: 10px; color: var(--primary); font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
        :where(body[data-page="index"]) .section-title { margin: 0; color: var(--ink); font-size: clamp(27px, 3vw, 42px); line-height: 1.08; letter-spacing: -.055em; font-weight: 700; }
        :where(body[data-page="index"]) .section-description { max-width: 430px; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
        :where(body[data-page="index"]) .text-link { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .03em; }
        :where(body[data-page="index"]) .text-link .arrow-box { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: var(--ink); color: white; transition: transform .2s, background .2s; }
        :where(body[data-page="index"]) .text-link:hover .arrow-box { transform: translateX(3px); background: var(--primary); }

        :where(body[data-page="index"]) .dev-track-wrapper { overflow: visible; mask-image: none; }
        :where(body[data-page="index"]) .dev-track {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-template-rows: repeat(2, 190px);
            gap: 14px;
            width: 100%;
            padding: 0;
            animation: none;
        }
        :where(body[data-page="index"]) .dev-card {
            width: 100%;
            height: 100%;
            border-radius: 6px;
            box-shadow: none;
            border: 1px solid rgba(16,22,21,.08);
            transition: opacity .38s ease, filter .38s ease, transform .38s ease, box-shadow .3s ease;
            will-change: opacity, filter, transform;
        }
        :where(body[data-page="index"]) .dev-card:first-child { grid-column: span 2; grid-row: span 2; }
        :where(body[data-page="index"]) .dev-card:first-child .dev-name { font-size: 29px; max-width: 250px; }
        :where(body[data-page="index"]) .dev-card:nth-child(n+6) { display: none; }
        :where(body[data-page="index"]) .dev-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(17,25,22,.12); }
        :where(body[data-page="index"]) .dev-overlay { background: linear-gradient(to top, rgba(9,14,13,.92), rgba(9,14,13,0) 70%); }
        :where(body[data-page="index"]) .dev-info { padding: 19px; }
        :where(body[data-page="index"]) .dev-name { font-size: 18px; line-height: 1.12; letter-spacing: -.03em; }
        :where(body[data-page="index"]) .dev-class { background: var(--accent); color: var(--ink); }
        :where(body[data-page="index"]) .dev-preview { background: rgba(16,22,21,.86); }

        :where(body[data-page="index"]) .dev-card.is-leaving {
            opacity: 0;
            filter: blur(12px);
            transform: translateY(-16px) scale(.985);
            pointer-events: none;
        }

        :where(body[data-page="index"]) .dev-card.is-entering {
            animation: creatorRiseIn .72s cubic-bezier(.2, .78, .2, 1) both;
        }

        @media (prefers-reduced-motion: reduce) {
            :where(body[data-page="index"]) .dev-card.is-entering { animation: none; }
            :where(body[data-page="index"]) .dev-card.is-leaving { transition: none; }
        }

        :where(body[data-page="index"]) #projectsGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
        :where(body[data-page="index"]) .bento-card { border-radius: 6px; border-color: rgba(16,22,21,.08); box-shadow: none; }
        :where(body[data-page="index"]) .bento-card:hover { transform: translateY(-5px); border-color: rgba(75,104,255,.32); box-shadow: 0 20px 46px rgba(20,31,27,.09); }
        :where(body[data-page="index"]) .bento-card > div:first-child { border-radius: 12px; margin: 7px 7px 0; }

        :where(body[data-page="index"]) .projects-cta { display: flex; justify-content: center; margin-top: 36px; }

        :where(body[data-page="index"]) .footer-bg { padding: 0 28px 28px; border: 0; background: transparent; }
        :where(body[data-page="index"]) .footer-shell { max-width: 1680px; margin: 0 auto; padding: 54px; border-radius: 6px; background: var(--ink); color: white; }
        :where(body[data-page="index"]) .footer-grid { display: grid; grid-template-columns: 1.2fr 1.8fr; gap: 70px; padding-bottom: 50px; }
        :where(body[data-page="index"]) .footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; font-size: 22px; font-weight: 800; letter-spacing: -.05em; }
        :where(body[data-page="index"]) .footer-copy { max-width: 410px; color: #909b97; font-size: 13px; line-height: 1.75; }
        :where(body[data-page="index"]) .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
        :where(body[data-page="index"]) .footer-links h4 { margin: 0 0 18px; color: #68716e; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
        :where(body[data-page="index"]) .footer-links ul { display: grid; gap: 12px; }
        :where(body[data-page="index"]) .footer-links a { color: #c3cbc8; font-size: 12px; font-weight: 600; transition: color .2s; }
        :where(body[data-page="index"]) .footer-links a:hover { color: var(--accent); }
        :where(body[data-page="index"]) .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 26px; border-top: 1px solid #29312f; }
        :where(body[data-page="index"]) .footer-bottom p { color: #68716e; font-size: 10px; font-weight: 600; }
        :where(body[data-page="index"]) .socials { display: flex; gap: 8px; }
        :where(body[data-page="index"]) .socials a { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 6px; background: #202826; color: #9da7a3; transition: background .2s, color .2s; }
        :where(body[data-page="index"]) .socials a:hover { background: var(--accent); color: var(--ink); }

        @media (max-width: 1180px) {
            :where(body[data-page="index"]) .hero-grid { grid-template-columns: 1.35fr .9fr; }
            :where(body[data-page="index"]) .hero-panel { min-height: 400px; }
            :where(body[data-page="index"]) #projectsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            :where(body[data-page="index"]) .dev-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            :where(body[data-page="index"]) .dev-card:nth-child(n+4) { display: none; }
        }

        @media (max-width: 920px) {
            :where(body[data-page="index"]) .page-shell { padding: 20px 18px 0; }
            :where(body[data-page="index"]) .hero-grid { grid-template-columns: minmax(0, 1fr); }
            :where(body[data-page="index"]) .hero-grid > *, :where(body[data-page="index"]) .hero-side, :where(body[data-page="index"]) .metric-card, :where(body[data-page="index"]) .mini-metrics { min-width: 0; width: 100%; }
            :where(body[data-page="index"]) .hero-panel { min-height: 400px; }
            :where(body[data-page="index"]) .hero-side { grid-template-columns: 1.2fr .8fr; grid-template-rows: none; }
            :where(body[data-page="index"]) #projectsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            :where(body[data-page="index"]) .footer-bg { padding: 0 18px 20px; }
            :where(body[data-page="index"]) .footer-shell { padding: 42px 34px; }
            :where(body[data-page="index"]) .footer-grid { grid-template-columns: 1fr; gap: 46px; }
        }

        @media (max-width: 767px) {
            body:where([data-page="index"]) { padding-bottom: 94px; }
            :where(body[data-page="index"]) .mobile-head { display: flex; }
            :where(body[data-page="index"]) .page-shell { padding: 14px 12px 0; }
            :where(body[data-page="index"]) .hero-panel, :where(body[data-page="index"]) .metric-card, :where(body[data-page="index"]) .mini-metrics { border-radius: 6px; }
            :where(body[data-page="index"]) .hero-panel { min-height: 440px; padding: 30px 22px; }
            :where(body[data-page="index"]) .hero-title { font-size: clamp(38px, 10.7vw, 50px); letter-spacing: -.065em; }
            :where(body[data-page="index"]) .hero-description { max-width: 92%; }
            :where(body[data-page="index"]) .hero-actions { flex-direction: column; align-items: stretch; width: min(100%, 320px); }
            :where(body[data-page="index"]) .hero-trust { right: auto; left: 24px; bottom: 25px; }
            :where(body[data-page="index"]) .hero-side { grid-template-columns: 1fr; }
            :where(body[data-page="index"]) .metric-card { min-height: 250px; padding: 22px; }
            :where(body[data-page="index"]) .metric-value strong { font-size: clamp(26px, 7.2vw, 33px); white-space: nowrap; }
            :where(body[data-page="index"]) .mini-stat { padding: 22px; }
            :where(body[data-page="index"]) .custom-select-wrap { flex: 1; }
            :where(body[data-page="index"]) .custom-select-wrap select { width: 100%; min-width: 0; }
            :where(body[data-page="index"]) .section-block { margin-bottom: 68px; }
            :where(body[data-page="index"]) .section-head { align-items: flex-end; margin-bottom: 23px; }
            :where(body[data-page="index"]) .section-description { display: none; }
            :where(body[data-page="index"]) .text-link > span:first-child { display: none; }
            :where(body[data-page="index"]) .dev-track { grid-template-columns: 1fr 1fr; grid-template-rows: 290px 205px 205px; gap: 10px; }
            :where(body[data-page="index"]) .dev-card { width: 100%; height: 100%; border-radius: 6px; }
            :where(body[data-page="index"]) .dev-card:first-child { grid-column: 1 / -1; grid-row: auto; }
            :where(body[data-page="index"]) .dev-card:first-child .dev-name { font-size: 24px; }
            :where(body[data-page="index"]) .dev-card:nth-child(n+4) { display: block; }
            :where(body[data-page="index"]) .dev-card:nth-child(n+6) { display: none; }
            :where(body[data-page="index"]) #projectsGrid { grid-template-columns: 1fr; gap: 13px; }
            :where(body[data-page="index"]) #projectsGrid > div:nth-child(n+4), :where(body[data-page="index"]) #projectsGrid > a:nth-child(n+4) { display: none !important; }
            :where(body[data-page="index"]) .footer-bg { padding: 0 12px 14px; }
            :where(body[data-page="index"]) .footer-shell { padding: 35px 24px 30px; border-radius: 6px; }
            :where(body[data-page="index"]) .footer-links { grid-template-columns: 1fr 1fr; }
            :where(body[data-page="index"]) .footer-bottom { align-items: flex-start; }
        }

/* ── login ── */
:root:where(:has(body[data-page="login"])) { --primary: #4b68ff; --primary-dark: #3854e8; --bg: #f4f5f0; }
        body:where([data-page="login"]) { font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif; background-color: var(--bg); overflow: hidden; height: 100vh; }
        :where(body[data-page="login"]) .brand-section { position: relative; height: 100%; overflow: hidden; display: none; background: #000; isolation: isolate; }
        @media (min-width: 1024px) { :where(body[data-page="login"]) .brand-section { display: block; } }
        :where(body[data-page="login"]) video.bg-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; }
        :where(body[data-page="login"]) .video-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(56,84,232,0.85) 0%, rgba(16,22,21,0.9) 100%); z-index: 1; mix-blend-mode: multiply; }
        :where(body[data-page="login"]) .live-mesh {
            position: absolute;
            inset: -15%;
            z-index: 2;
            opacity: 0.52;
            background-image:
                linear-gradient(rgba(147,197,253,0.24) 1px, transparent 1px),
                linear-gradient(90deg, rgba(147,197,253,0.24) 1px, transparent 1px);
            background-size: 46px 46px;
            -webkit-mask-image: radial-gradient(ellipse 68% 58% at 50% 48%, #000 15%, transparent 78%);
            mask-image: radial-gradient(ellipse 68% 58% at 50% 48%, #000 15%, transparent 78%);
            transform: perspective(650px) rotateX(62deg) scale(1.55) translateY(11%);
            transform-origin: center bottom;
            animation: meshFlow 10s linear infinite;
            pointer-events: none;
        }
        @media (prefers-reduced-motion: reduce) {
            :where(body[data-page="login"]) .live-mesh { animation: none; }
        }
        :where(body[data-page="login"]) .content-wrap { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 64px; text-align: right; align-items: flex-end; }
        :where(body[data-page="login"]) .input-pill { background: #eceee6; border: 1.5px solid transparent; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
        :where(body[data-page="login"]) .input-pill:focus-within { background: white; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(75,104,255,0.1); }
        :where(body[data-page="login"]) .btn-primary { background: var(--primary); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); }
        :where(body[data-page="login"]) .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 12px 24px -6px rgba(75,104,255,0.4); }
        :where(body[data-page="login"]) .animate-slide-in { animation: slideInLeft 0.8s cubic-bezier(0.34,1.56,0.64,1) both; }
    /* ── SCHOOL MODAL ── */
    :where(body[data-page="login"]) .modal-bg{position:fixed;inset:0;background:rgba(16,22,21,.55);backdrop-filter:blur(4px);z-index:1000;display:none;align-items:center;justify-content:center;padding:16px}
    :where(body[data-page="login"]) .modal-bg.open{display:flex}
    :where(body[data-page="login"]) .modal{background:#fff;border-radius:24px;width:100%;max-width:440px;padding:32px 28px;box-shadow:0 24px 64px rgba(16,22,21,.18);animation:modalIn .35s cubic-bezier(.34,1.56,.64,1)}
    :where(body[data-page="login"]) .modal-step{display:none}:where(body[data-page="login"]) .modal-step.active{display:block}
    :where(body[data-page="login"]) .progress-dots{display:flex;gap:6px;margin-bottom:24px;justify-content:center}
    :where(body[data-page="login"]) .prog-dot{width:7px;height:7px;border-radius:50%;background:#dde2dc;transition:all .3s}
    :where(body[data-page="login"]) .prog-dot.done{background:#4b68ff}:where(body[data-page="login"]) .prog-dot.current{background:#4b68ff;width:20px;border-radius:4px}
    :where(body[data-page="login"]) .modal h2{font-size:20px;font-weight:800;color:#101615;margin-bottom:6px;text-align:center}
    :where(body[data-page="login"]) .modal p{font-size:13px;color:#697371;text-align:center;margin-bottom:22px}
    :where(body[data-page="login"]) .choice-row{display:flex;gap:10px}
    :where(body[data-page="login"]) .choice-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;border-radius:16px;border:2px solid #dde2dc;background:#f4f5f0;cursor:pointer;transition:all .2s;font-size:13px;font-weight:700;color:#4d5654;text-align:center;line-height:1.3}
    :where(body[data-page="login"]) .choice-btn:hover,:where(body[data-page="login"]) .choice-btn.selected{border-color:#4b68ff;background:#eef0ff;color:#3854e8}
    :where(body[data-page="login"]) .choice-btn .icon{font-size:28px;line-height:1}
    :where(body[data-page="login"]) .modal-select{width:100%;padding:11px 14px;border:1.5px solid #dde2dc;border-radius:12px;font-size:13px;font-weight:600;color:#101615;background:#f4f5f0;outline:none;appearance:none;cursor:pointer;font-family:inherit;margin-bottom:14px;transition:border-color .2s}
    :where(body[data-page="login"]) .modal-select:focus{border-color:#4b68ff}
    :where(body[data-page="login"]) .type-row{display:flex;gap:10px;margin-bottom:18px}
    :where(body[data-page="login"]) .type-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;border-radius:12px;border:1.5px solid #dde2dc;background:#f4f5f0;cursor:pointer;transition:all .2s;font-size:13px;font-weight:700;color:#4d5654}
    :where(body[data-page="login"]) .type-btn:hover,:where(body[data-page="login"]) .type-btn.selected{border-color:#4b68ff;background:#eef0ff;color:#3854e8}
    :where(body[data-page="login"]) .school-search{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1.5px solid #dde2dc;border-radius:12px;margin-bottom:10px;transition:border-color .2s}
    :where(body[data-page="login"]) .school-search:focus-within{border-color:#4b68ff}
    :where(body[data-page="login"]) .school-search input{border:none;outline:none;background:transparent;font-size:13px;font-weight:500;color:#101615;width:100%;font-family:inherit}
    :where(body[data-page="login"]) .school-search input::placeholder{color:#8b9390}
    :where(body[data-page="login"]) .school-list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin-bottom:12px;border:1px solid #dde2dc;border-radius:12px;padding:6px}
    :where(body[data-page="login"]) .school-item{padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .15s;font-size:13px;font-weight:600;color:#101615;display:flex;align-items:center;gap:8px}
    :where(body[data-page="login"]) .school-item:hover{background:#eceee6}:where(body[data-page="login"]) .school-item.selected{background:#eef0ff;color:#3854e8}
    :where(body[data-page="login"]) .school-item .s-type{font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;margin-left:auto;flex-shrink:0}
    :where(body[data-page="login"]) .s-type.davlat{background:#e6eaff;color:#3854e8}:where(body[data-page="login"]) .s-type.xususiy{background:#fce7f3;color:#be185d}
    :where(body[data-page="login"]) .school-empty,:where(body[data-page="login"]) .school-loading{text-align:center;color:#8b9390;font-size:13px;padding:20px}
    :where(body[data-page="login"]) .add-school-btn{display:none;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;border:1.5px dashed #dde2dc;background:transparent;color:#697371;font-size:12px;font-weight:700;cursor:pointer;width:100%;transition:all .2s;font-family:inherit}
    :where(body[data-page="login"]) .add-school-btn:hover{border-color:#4b68ff;color:#3854e8;background:#eef0ff}
    :where(body[data-page="login"]) .new-school-input{width:100%;padding:10px 14px;border:1.5px solid #dde2dc;border-radius:10px;font-size:13px;font-weight:600;outline:none;font-family:inherit;margin-bottom:8px;transition:border-color .2s}
    :where(body[data-page="login"]) .new-school-input:focus{border-color:#4b68ff}
    :where(body[data-page="login"]) .modal-btn-row{display:flex;gap:10px;margin-top:20px}
    :where(body[data-page="login"]) .modal-btn{flex:1;padding:12px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;border:none;font-family:inherit}
    :where(body[data-page="login"]) .modal-btn.back{background:#eceee6;color:#4d5654}:where(body[data-page="login"]) .modal-btn.back:hover{background:#dde2dc}
    :where(body[data-page="login"]) .modal-btn.next{background:#3854e8;color:#fff}:where(body[data-page="login"]) .modal-btn.next:hover{background:#2f49d4}
    :where(body[data-page="login"]) .modal-btn.next:disabled{background:#a9b6ff;cursor:not-allowed}:where(body[data-page="login"]) .modal-btn.next.loading{opacity:.65;pointer-events:none}
    :where(body[data-page="login"]) .done-icon{width:64px;height:64px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:28px}
    :where(body[data-page="login"]) .done-school{background:#eceee6;border-radius:12px;padding:12px 16px;text-align:center;margin-bottom:8px}
    :where(body[data-page="login"]) .done-school .name{font-size:15px;font-weight:800;color:#101615}
    :where(body[data-page="login"]) .done-school .meta{font-size:12px;color:#697371;margin-top:3px}
    :where(body[data-page="login"]) .pending-icon{width:64px;height:64px;background:#fef9c3;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:28px}
    :where(body[data-page="login"]) .pending-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:20px;background:#fef9c3;color:#92400e;font-size:12px;font-weight:700;margin:8px auto;width:100%;justify-content:center}
    :where(body[data-page="login"]) .skip-link{display:block;text-align:center;margin-top:16px;font-size:12px;font-weight:700;color:#8b9390;cursor:pointer;transition:color .2s}
    :where(body[data-page="login"]) .skip-link:hover{color:#697371}

/* ── project-detail ── */
:root:where(:has(body[data-page="project-detail"])) { --blue: #4b68ff; --blue-light: #eef0ff; --bg: #f4f5f0; }
        html:where(:has(body[data-page="project-detail"])) { scroll-behavior: smooth; }
        :where(html:has(body[data-page="project-detail"])), :where(body[data-page="project-detail"]), :where(body[data-page="project-detail"]) * { box-sizing: border-box; margin: 0; padding: 0; }
        body:where([data-page="project-detail"]) { font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: #101615; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

        /* SIDEBAR — O'ZGARISH: 0.6s -> 0.4s, nav-wrap va main-wrapper bilan bir xil */
        :where(body[data-page="project-detail"]) .sidebar {
            position: fixed; left: 0; top: 0; bottom: 0; width: 72px;
            background: white; border-right: 1px solid #eceee6;
            display: flex; flex-direction: column; align-items: center; padding: 24px 0;
            z-index: 100;
            transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            overflow: hidden;
        }
        :where(body[data-page="project-detail"]) .sidebar:hover { width: 240px; box-shadow: 10px 0 30px rgba(75, 104, 255, 0.05); }

        /* NAV-WRAP — sidebar bilan bir xil transition */
        :where(body[data-page="project-detail"]) .nav-wrap {
            position: fixed; top: 0; right: 0; left: 88px; height: 72px;
            background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(24px);
            border-bottom: 1px solid rgba(75, 104, 255, 0.06);
            box-shadow: 0 4px 30px rgba(75, 104, 255, 0.03);
            display: flex; align-items: center; z-index: 50;
            transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* MAIN WRAPPER — sidebar bilan bir xil transition */
        :where(body[data-page="project-detail"]) .main-wrapper {
            margin-left: 88px; padding-top: 72px;
            transition: margin-left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            min-height: 100vh; display: flex; flex-direction: column;
        }

        /* CSS ~ SELECTORLAR OLIB TASHLANDI — JS boshqaradi */

        :where(body[data-page="project-detail"]) .info-card, :where(body[data-page="project-detail"]) .desc-card, :where(body[data-page="project-detail"]) .sidebar-card, :where(body[data-page="project-detail"]) .hero-img-wrap, :where(body[data-page="project-detail"]) .trust-card {
            border-radius: 24px; padding: 32px;
            transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
            box-shadow: 0 4px 24px rgba(75, 104, 255, 0.03);
            border: 1px solid rgba(75, 104, 255, 0.04);
            background: white; position: relative;
        }
        :where(body[data-page="project-detail"]) .info-card:hover, :where(body[data-page="project-detail"]) .desc-card:hover, :where(body[data-page="project-detail"]) .sidebar-card:hover, :where(body[data-page="project-detail"]) .hero-img-wrap:hover, :where(body[data-page="project-detail"]) .trust-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 48px rgba(75, 104, 255, 0.08);
            border-color: rgba(75, 104, 255, 0.08);
        }

        :where(body[data-page="project-detail"]) .hero-img-wrap { padding: 0; overflow: hidden; background: var(--blue-light); }
        :where(body[data-page="project-detail"]) .hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; display: block; }
        :where(body[data-page="project-detail"]) .img-badge { position: absolute; top: 24px; left: 24px; background: rgba(75, 104, 255, 0.95); backdrop-filter: blur(12px); color: white; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 18px; border-radius: 999px; }
        :where(body[data-page="project-detail"]) .img-views { position: absolute; top: 24px; right: 24px; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); color: #4b68ff; font-size: 12px; font-weight: 800; padding: 8px 18px; border-radius: 999px; display: flex; align-items: center; gap: 6px; }
        :where(body[data-page="project-detail"]) .info-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--blue); margin-bottom: 6px; }
        :where(body[data-page="project-detail"]) .info-value { font-size: 16px; font-weight: 700; color: #101615; }
        :where(body[data-page="project-detail"]) .stat-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--blue-light); border-radius: 20px; padding: 22px 14px; flex: 1; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); border: 1px solid transparent; }
        :where(body[data-page="project-detail"]) .stat-chip-val { font-size: 20px; font-weight: 900; color: var(--blue); }
        :where(body[data-page="project-detail"]) .stat-chip-lbl { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #8d9fff; }
        :where(body[data-page="project-detail"]) .stat-chip:hover { transform: translateY(-4px); background: #e6eaff; box-shadow: 0 10px 24px rgba(75,104,255,0.1); border-color: rgba(75,104,255,0.08); }
        :where(body[data-page="project-detail"]) .tag-pill { background: var(--blue-light); color: var(--blue); font-size: 11px; font-weight: 800; padding: 6px 14px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
        :where(body[data-page="project-detail"]) .btn-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px; background: var(--blue); color: white; border-radius: 18px; font-size: 15px; font-weight: 800; text-decoration: none; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 8px 24px rgba(75,104,255,0.3); cursor: pointer; border: none; }
        :where(body[data-page="project-detail"]) .btn-primary:hover { background: #3854e8; transform: translateY(-3px); box-shadow: 0 14px 32px rgba(75,104,255,0.45); }
        :where(body[data-page="project-detail"]) .contact-row { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 18px; background: var(--bg); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); text-decoration: none; color: #101615; border: 1px solid transparent; }
        :where(body[data-page="project-detail"]) .contact-row:hover { background: white; transform: translateX(6px); box-shadow: 0 8px 24px rgba(75,104,255,0.08); border-color: rgba(75,104,255,0.05); }
        :where(body[data-page="project-detail"]) .contact-icon { width: 42px; height: 42px; border-radius: 12px; background: white; display: flex; align-items: center; justify-content: center; color: var(--blue); box-shadow: 0 4px 12px rgba(75,104,255,0.1); flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
        :where(body[data-page="project-detail"]) .contact-row:hover .contact-icon { transform: scale(1.1); }
        :where(body[data-page="project-detail"]) .author-wrap { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--bg); border-radius: 20px; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); border: 1px solid transparent; }
        :where(body[data-page="project-detail"]) .author-wrap:hover { background: white; box-shadow: 0 12px 30px rgba(75,104,255,0.08); border-color: rgba(75,104,255,0.05); transform: translateY(-2px); }
        :where(body[data-page="project-detail"]) .author-avatar { width: 60px; height: 60px; border-radius: 16px; object-fit: cover; flex-shrink: 0; box-shadow: 0 4px 14px rgba(75,104,255,0.15); }
        :where(body[data-page="project-detail"]) .trust-card { background: linear-gradient(135deg, #4b68ff 0%, #6d84ff 100%); color: white; border: none; overflow: hidden; }
        :where(body[data-page="project-detail"]) .trust-card::before { content: ''; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; background: rgba(255,255,255,0.1); border-radius: 50%; transition: transform 0.8s ease; }
        :where(body[data-page="project-detail"]) .trust-card::after { content: ''; position: absolute; bottom: -20px; left: -20px; width: 80px; height: 80px; background: rgba(255,255,255,0.08); border-radius: 50%; transition: transform 0.8s ease; }
        :where(body[data-page="project-detail"]) .trust-card:hover::before { transform: scale(1.2); }
        :where(body[data-page="project-detail"]) .trust-card:hover::after { transform: scale(1.3); }
        :where(body[data-page="project-detail"]) .desc-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 180px; height: 180px; background: radial-gradient(circle at bottom right, rgba(75,104,255,0.05), transparent); pointer-events: none; }
        :where(body[data-page="project-detail"]) .divider { height: 1px; background: linear-gradient(to right, transparent, rgba(75,104,255,0.1), transparent); margin: 24px 0; }
        :where(body[data-page="project-detail"]) .sticky-sidebar { position: sticky; top: 88px; }
        :where(body[data-page="project-detail"]) .footer-bg { background: white; border-top: 1px solid rgba(75,104,255,0.06); margin-top: auto; }
        :where(body[data-page="project-detail"]) .loader-ring { width: 48px; height: 48px; border: 4px solid #eef0ff; border-top-color: #4b68ff; border-radius: 50%; animation: spin 0.8s linear infinite; }
        :where(body[data-page="project-detail"]) .price-badge { font-size: 38px; font-weight: 900; color: var(--blue); letter-spacing: -0.03em; line-height: 1; }

        :where(body[data-page="project-detail"]) .sidebar-logo { display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 900; letter-spacing: -0.05em; color: #4b68ff; padding: 0 24px; margin-bottom: 32px; white-space: nowrap; width: 100%; }
        :where(body[data-page="project-detail"]) .sidebar-logo span { opacity: 0; transition: opacity 0.3s; display: inline-block; }
        :where(body[data-page="project-detail"]) .sidebar:hover .sidebar-logo span { opacity: 1; }
        :where(body[data-page="project-detail"]) .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 12px; }
        :where(body[data-page="project-detail"]) .sidebar-link { display: flex; align-items: center; gap: 16px; padding: 14px 12px; border-radius: 14px; color: #697371; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: all 0.2s; }
        :where(body[data-page="project-detail"]) .sidebar-link:hover, :where(body[data-page="project-detail"]) .sidebar-link.active { background: #eef0ff; color: #4b68ff; }
        :where(body[data-page="project-detail"]) .sidebar-link svg { flex-shrink: 0; width: 22px; height: 22px; }
        :where(body[data-page="project-detail"]) .sidebar-link span { opacity: 0; transition: opacity 0.3s; }
        :where(body[data-page="project-detail"]) .sidebar:hover .sidebar-link span { opacity: 1; }
        :where(body[data-page="project-detail"]) .sidebar-bottom { width: 100%; padding: 0 12px; display: flex; flex-direction: column; gap: 10px; }
        :where(body[data-page="project-detail"]) .sidebar-btn { display: flex; align-items: center; gap: 16px; padding: 14px 12px; border-radius: 14px; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; border: none; transition: all 0.2s; width: 100%; }
        :where(body[data-page="project-detail"]) .sidebar-btn.signin { background: transparent; color: #697371; }
        :where(body[data-page="project-detail"]) .sidebar-btn.signin:hover { background: #eceee6; color: #4b68ff; }
        :where(body[data-page="project-detail"]) .sidebar-btn.start { background: #4b68ff; color: white; box-shadow: 0 4px 12px rgba(75,104,255,0.3); }
        :where(body[data-page="project-detail"]) .sidebar-btn.start:hover { background: #3854e8; }
        :where(body[data-page="project-detail"]) .sidebar-btn svg { flex-shrink: 0; width: 22px; height: 22px; }
        :where(body[data-page="project-detail"]) .sidebar-btn span { opacity: 0; transition: opacity 0.3s; }
        :where(body[data-page="project-detail"]) .sidebar:hover .sidebar-btn span { opacity: 1; }
        :where(body[data-page="project-detail"]) .device-btn.active { background-color: #4b68ff !important; color: white !important; }
        :where(body[data-page="project-detail"]) .custom-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; width: 100%; }
        @media (min-width: 1024px) { :where(body[data-page="project-detail"]) .custom-grid { grid-template-columns: 7fr 3fr; gap: 2rem; } }
        @media (max-width: 768px) { :where(body[data-page="project-detail"]) .sidebar { display: none; } :where(body[data-page="project-detail"]) .main-wrapper { margin-left: 0 !important; } :where(body[data-page="project-detail"]) .nav-wrap { left: 0 !important; } }
    
        /* Site Switcher */
        :where(body[data-page="project-detail"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="project-detail"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="project-detail"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="project-detail"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="project-detail"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="project-detail"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="project-detail"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="project-detail"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="project-detail"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="project-detail"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="project-detail"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="project-detail"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="project-detail"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="project-detail"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="project-detail"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── requests ── */
:where(html:has(body[data-page="requests"])),:where(body[data-page="requests"]),:where(body[data-page="requests"]) *{box-sizing:border-box;margin:0;padding:0}
        :root:where(:has(body[data-page="requests"])){
            --primary:#3854e8;--primary-dark:#2f49d4;
            --bg:#f4f5f0;--border:#dde2dc;
            --text:#101615;--muted:#697371;
            --nav-h:65px;
        }
        body:where([data-page="requests"]){
            font-family:'Gilroy','Plus Jakarta Sans',sans-serif;
            background:var(--bg);color:var(--text);
            padding-bottom:calc(var(--nav-h) + 10px);
            opacity:0;transition:opacity .4s ease,padding-left .4s cubic-bezier(.4,0,.2,1);
            -webkit-tap-highlight-color:transparent;
        }
        body:where([data-page="requests"]).loaded{opacity:1}
        @media(min-width:768px){
            body:where([data-page="requests"]){padding-left:72px;padding-bottom:0}
            body:where([data-page="requests"]):has(.sidebar:hover){padding-left:220px}
        }
        /* Sidebar */
        :where(body[data-page="requests"]) .sidebar{position:fixed;left:0;top:0;bottom:0;width:72px;background:#fff;border-right:1px solid #eceee6;display:none;flex-direction:column;align-items:center;padding:24px 0;z-index:50;transition:width .4s cubic-bezier(.4,0,.2,1);overflow:hidden}
        @media(min-width:768px){:where(body[data-page="requests"]) .sidebar{display:flex}}
        :where(body[data-page="requests"]) .sidebar:hover{width:220px;box-shadow:4px 0 24px rgba(0,0,0,.04)}
        :where(body[data-page="requests"]) .sb-logo{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:900;letter-spacing:-.05em;color:var(--primary);padding:0 20px;margin-bottom:32px;white-space:nowrap;width:100%;text-decoration:none}
        :where(body[data-page="requests"]) .sb-logo img{flex-shrink:0}
        :where(body[data-page="requests"]) .sb-logo span,:where(body[data-page="requests"]) .sb-link span,:where(body[data-page="requests"]) .sb-btn span{opacity:0;transition:opacity .2s,transform .2s;transform:translateX(-8px)}
        :where(body[data-page="requests"]) .sidebar:hover .sb-logo span,:where(body[data-page="requests"]) .sidebar:hover .sb-link span,:where(body[data-page="requests"]) .sidebar:hover .sb-btn span{opacity:1;transform:translateX(0)}
        :where(body[data-page="requests"]) .sb-nav{flex:1;display:flex;flex-direction:column;gap:4px;width:100%;padding:0 10px}
        :where(body[data-page="requests"]) .sb-link{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:12px;color:#697371;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:all .2s}
        :where(body[data-page="requests"]) .sb-link:hover,:where(body[data-page="requests"]) .sb-link.active{background:#eef0ff;color:var(--primary)}
        :where(body[data-page="requests"]) .sb-link svg{flex-shrink:0;width:20px;height:20px}
        :where(body[data-page="requests"]) .sb-bottom{width:100%;padding:0 10px;display:flex;flex-direction:column;gap:8px}
        :where(body[data-page="requests"]) .sb-btn{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;border:none;width:100%;background:transparent;color:#ef4444;transition:all .2s}
        :where(body[data-page="requests"]) .sb-btn:hover{background:#fff1f2}
        :where(body[data-page="requests"]) .sb-btn svg{flex-shrink:0;width:20px;height:20px}
        :where(body[data-page="requests"]) .sb-btn.signin{color:#697371}:where(body[data-page="requests"]) .sb-btn.signin:hover{background:#eceee6;color:var(--primary)}
        :where(body[data-page="requests"]) .sb-btn.start{background:var(--primary);color:white;border-radius:12px}:where(body[data-page="requests"]) .sb-btn.start:hover{background:var(--primary-dark)}
        /* Bottom nav */
        :where(body[data-page="requests"]) .bnav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-top:1px solid rgba(221,226,220,.8);display:flex;justify-content:space-around;align-items:center;z-index:100;padding-bottom:env(safe-area-inset-bottom,0px)}
        @media(min-width:768px){:where(body[data-page="requests"]) .bnav{display:none}}
        :where(body[data-page="requests"]) .bnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;height:100%;gap:4px;color:#8b9390;text-decoration:none;position:relative;transition:color .25s}
        :where(body[data-page="requests"]) .bnav-item.active{color:var(--primary)}
        :where(body[data-page="requests"]) .bnav-item svg{width:22px;height:22px}
        :where(body[data-page="requests"]) .bnav-item span{font-size:10px;font-weight:700}
        /* Page */
        :where(body[data-page="requests"]) .page{max-width:900px;margin:0 auto;padding:28px 20px 60px}
        @media(max-width:768px){:where(body[data-page="requests"]) .page{padding:20px 14px 80px}}
        /* Header */
        :where(body[data-page="requests"]) .pg-head{display:flex;align-items:center;gap:14px;margin-bottom:28px}
        :where(body[data-page="requests"]) .pg-back{width:38px;height:38px;border-radius:11px;background:white;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);text-decoration:none;transition:all .2s;flex-shrink:0}
        :where(body[data-page="requests"]) .pg-back:hover{background:#eef0ff;color:var(--primary);border-color:#cfd6ff}
        :where(body[data-page="requests"]) .pg-title{font-size:24px;font-weight:900;letter-spacing:-.4px;flex:1}
        :where(body[data-page="requests"]) .pg-count{background:#eef0ff;color:var(--primary);font-size:12px;font-weight:900;padding:4px 12px;border-radius:99px}
        /* Job section */
        :where(body[data-page="requests"]) .job-section{background:white;border:1px solid var(--border);border-radius:18px;margin-bottom:16px;overflow:hidden;transition:all .3s}
        :where(body[data-page="requests"]) .job-section-head{padding:18px 20px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .2s}
        :where(body[data-page="requests"]) .job-section-head:hover{background:#f4f5f0}
        :where(body[data-page="requests"]) .job-icon{width:40px;height:40px;border-radius:12px;background:#eef0ff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
        :where(body[data-page="requests"]) .job-info{flex:1;min-width:0}
        :where(body[data-page="requests"]) .job-name{font-size:15px;font-weight:900;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :where(body[data-page="requests"]) .job-meta{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;display:flex;align-items:center;gap:8px}
        :where(body[data-page="requests"]) .job-stat{display:inline-flex;align-items:center;gap:4px}
        :where(body[data-page="requests"]) .pending-badge{background:#fff7ed;color:#ea580c;border:1px solid #fed7aa;font-size:10px;font-weight:900;padding:2px 8px;border-radius:99px}
        :where(body[data-page="requests"]) .accepted-badge{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;font-size:10px;font-weight:900;padding:2px 8px;border-radius:99px}
        :where(body[data-page="requests"]) .chevron{width:20px;height:20px;color:var(--muted);transition:transform .3s;flex-shrink:0}
        :where(body[data-page="requests"]) .job-section.open .chevron{transform:rotate(180deg)}
        /* Applications list */
        :where(body[data-page="requests"]) .apps-list{border-top:1px solid var(--border);display:none}
        :where(body[data-page="requests"]) .job-section.open .apps-list{display:block}
        /* Application card */
        :where(body[data-page="requests"]) .app-card{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;gap:14px;align-items:flex-start;transition:background .2s}
        :where(body[data-page="requests"]) .app-card:last-child{border-bottom:none}
        :where(body[data-page="requests"]) .app-card:hover{background:#f7f8ff}
        :where(body[data-page="requests"]) .app-ava{width:44px;height:44px;border-radius:50%;background:#3854e8;display:flex;align-items:center;justify-content:center;color:white;font-size:15px;font-weight:900;flex-shrink:0;overflow:hidden}
        :where(body[data-page="requests"]) .app-ava img{width:100%;height:100%;object-fit:cover}
        :where(body[data-page="requests"]) .app-body{flex:1;min-width:0}
        :where(body[data-page="requests"]) .app-name{font-size:14px;font-weight:900;color:var(--text);margin-bottom:4px}
        :where(body[data-page="requests"]) .app-offer{display:flex;gap:12px;margin-bottom:8px}
        :where(body[data-page="requests"]) .app-offer-item{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:800}
        :where(body[data-page="requests"]) .app-offer-item.price{color:var(--primary)}
        :where(body[data-page="requests"]) .app-offer-item.time{color:var(--muted)}
        :where(body[data-page="requests"]) .app-cover{font-size:12px;font-weight:600;color:var(--muted);line-height:1.55;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
        :where(body[data-page="requests"]) .app-actions{display:flex;gap:8px}
        :where(body[data-page="requests"]) .btn-confirm{display:flex;align-items:center;gap:6px;background:var(--primary);color:white;border:none;border-radius:10px;padding:9px 18px;font-family:inherit;font-size:12px;font-weight:900;cursor:pointer;transition:all .25s}
        :where(body[data-page="requests"]) .btn-confirm:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 6px 16px -4px rgba(56,84,232,.4)}
        :where(body[data-page="requests"]) .btn-confirm:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
        :where(body[data-page="requests"]) .btn-chat{display:flex;align-items:center;gap:6px;background:#eceee6;color:var(--muted);border:none;border-radius:10px;padding:9px 14px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:all .2s;text-decoration:none}
        :where(body[data-page="requests"]) .btn-chat:hover{background:#eef0ff;color:var(--primary)}
        :where(body[data-page="requests"]) .status-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:900;padding:5px 10px;border-radius:99px}
        :where(body[data-page="requests"]) .status-chip.accepted{background:#f0fdf4;color:#16a34a}
        :where(body[data-page="requests"]) .status-chip.rejected{background:#fff1f2;color:#dc2626}
        :where(body[data-page="requests"]) .status-chip.pending{background:#fff7ed;color:#ea580c}
        /* Empty */
        :where(body[data-page="requests"]) .empty{text-align:center;padding:64px 24px;color:var(--muted)}
        :where(body[data-page="requests"]) .empty-ico{width:72px;height:72px;background:white;border:1px solid var(--border);border-radius:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
        /* Skeleton */
        :where(body[data-page="requests"]) .sk{background:linear-gradient(90deg,#eceee6 25%,#dde2dc 50%,#eceee6 75%);background-size:200% 100%;animation:sh 1.4s infinite;border-radius:8px}
        /* Toast */
        :where(body[data-page="requests"]) .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(14px);background:#1b2321;color:#fff;padding:10px 18px;border-radius:11px;font-weight:700;font-size:13px;z-index:400;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);white-space:nowrap}
        :where(body[data-page="requests"]) .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
        :where(body[data-page="requests"]) .toast.ok{background:#059669}
        :where(body[data-page="requests"]) .toast.err{background:#dc2626}
        @media(min-width:768px){:where(body[data-page="requests"]) .toast{bottom:22px}}
    
        /* Site Switcher */
        :where(body[data-page="requests"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="requests"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="requests"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="requests"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="requests"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="requests"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="requests"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="requests"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="requests"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="requests"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="requests"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="requests"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="requests"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="requests"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="requests"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── saved ── */
:root:where(:has(body[data-page="saved"])) { --primary: #4b68ff; --bg: #f4f5f0; --nav-height: 65px; }
        :where(html:has(body[data-page="saved"])), :where(body[data-page="saved"]), :where(body[data-page="saved"]) * { box-sizing: border-box; margin: 0; padding: 0; }
        body:where([data-page="saved"]) {
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            background: var(--bg); color: #101615;
            padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 10px));
            overflow-x: hidden; -webkit-tap-highlight-color: transparent;
            opacity: 0; transition: opacity 0.5s ease;
        }
        body:where([data-page="saved"]).loaded { opacity: 1; }
        @media (min-width: 768px) {
            body:where([data-page="saved"]) { padding-left: 72px; padding-bottom: 0;
                   transition: padding-left 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.5s ease !important; }
            body:where([data-page="saved"]):has(.sidebar:hover) { padding-left: 220px !important; }
        }

        /* Sidebar */
        :where(body[data-page="saved"]) .sidebar { position:fixed; left:0; top:0; bottom:0; width:72px; background:white; border-right:1px solid #eceee6; display:none; flex-direction:column; align-items:center; padding:24px 0; z-index:50; transition:width 0.4s cubic-bezier(0.4,0,0.2,1); overflow:hidden; }
        @media (min-width:768px) { :where(body[data-page="saved"]) .sidebar { display:flex; } }
        :where(body[data-page="saved"]) .sidebar:hover { width:220px; box-shadow:4px 0 24px rgba(0,0,0,0.02); }
        :where(body[data-page="saved"]) .sidebar-logo { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:900; letter-spacing:-0.05em; color:#4b68ff; padding:0 20px; margin-bottom:32px; white-space:nowrap; width:100%; text-decoration:none; }
        :where(body[data-page="saved"]) .sidebar-logo img { flex-shrink:0; }
        :where(body[data-page="saved"]) .sidebar-logo span { opacity:0; transition:opacity 0.2s,transform 0.2s; transform:translateX(-10px); }
        :where(body[data-page="saved"]) .sidebar:hover .sidebar-logo span { opacity:1; transform:translateX(0); }
        :where(body[data-page="saved"]) .sidebar-nav { flex:1; display:flex; flex-direction:column; gap:6px; width:100%; padding:0 10px; }
        :where(body[data-page="saved"]) .sidebar-link { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px; color:#697371; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; transition:all 0.2s; }
        :where(body[data-page="saved"]) .sidebar-link:hover, :where(body[data-page="saved"]) .sidebar-link.active { background:#eef0ff; color:#4b68ff; }
        :where(body[data-page="saved"]) .sidebar-link svg { flex-shrink:0; width:20px; height:20px; }
        :where(body[data-page="saved"]) .sidebar-link span { opacity:0; transition:opacity 0.2s; }
        :where(body[data-page="saved"]) .sidebar:hover .sidebar-link span { opacity:1; }
        :where(body[data-page="saved"]) .sidebar-bottom { width:100%; padding:0 10px; display:flex; flex-direction:column; gap:8px; }
        :where(body[data-page="saved"]) .sidebar-btn { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer; border:none; transition:all 0.2s; width:100%; }
        :where(body[data-page="saved"]) .sidebar-btn.signin { background:transparent; color:#697371; }
        :where(body[data-page="saved"]) .sidebar-btn.signin:hover { background:#eceee6; color:#4b68ff; }
        :where(body[data-page="saved"]) .sidebar-btn.start { background:#4b68ff; color:white; box-shadow:0 4px 12px rgba(75,104,255,0.3); }
        :where(body[data-page="saved"]) .sidebar-btn.start:hover { background:#3854e8; }
        :where(body[data-page="saved"]) .sidebar-btn svg { flex-shrink:0; width:20px; height:20px; }
        :where(body[data-page="saved"]) .sidebar-btn span { opacity:0; transition:opacity 0.2s; }
        :where(body[data-page="saved"]) .sidebar:hover .sidebar-btn span { opacity:1; }

        /* Bottom Nav */
        :where(body[data-page="saved"]) .bottom-nav { position:fixed; bottom:0; left:0; right:0; height:var(--nav-height); background:rgba(255,255,255,0.95); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid rgba(221,226,220,0.8); display:flex; justify-content:space-around; align-items:center; z-index:100; padding-bottom:env(safe-area-inset-bottom,0px); box-shadow:0 -4px 24px rgba(0,0,0,0.04); }
        @media (min-width:768px) { :where(body[data-page="saved"]) .bottom-nav { display:none; } }
        :where(body[data-page="saved"]) .bottom-nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; height:100%; gap:5px; color:#8b9390; text-decoration:none; position:relative; transition:color 0.3s; }
        :where(body[data-page="saved"]) .bottom-nav-item.active { color:var(--primary); }
        :where(body[data-page="saved"]) .bottom-nav-item svg { width:22px; height:22px; }
        :where(body[data-page="saved"]) .bottom-nav-item.active svg { transform:translateY(-2px); stroke-width:2.5; }
        :where(body[data-page="saved"]) .bottom-nav-item span { font-size:10px; font-weight:700; }
        :where(body[data-page="saved"]) .bottom-nav-indicator { position:absolute; top:0; width:32px; height:3px; background:var(--primary); border-radius:0 0 4px 4px; opacity:0; transform:scaleX(0); transition:opacity 0.3s,transform 0.3s; }
        :where(body[data-page="saved"]) .bottom-nav-item.active .bottom-nav-indicator { opacity:1; transform:scaleX(1); }

        /* Site Switcher */
        :where(body[data-page="saved"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="saved"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="saved"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="saved"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s;white-space:nowrap;min-height:28px;}
        :where(body[data-page="saved"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="saved"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="saved"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="saved"]) .sw-payable.sw-active{background:#eef0ff;} :where(body[data-page="saved"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="saved"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;} :where(body[data-page="saved"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="saved"]) .sw-gelica.sw-active{background:#fdf2f8;} :where(body[data-page="saved"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="saved"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;} :where(body[data-page="saved"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

        /* ── Page ── */
        :where(body[data-page="saved"]) .page-header {
            padding: 28px 20px 0;
        }
        @media (min-width: 640px) { :where(body[data-page="saved"]) .page-header { padding: 36px 32px 0; } }
        @media (min-width: 1500px) { :where(body[data-page="saved"]) .page-header { max-width: 1500px; margin: 0 auto; } }

        :where(body[data-page="saved"]) .header-top {
            display: flex; align-items: center; gap: 14px; margin-bottom: 6px;
        }
        :where(body[data-page="saved"]) .header-icon {
            width: 44px; height: 44px; border-radius: 14px;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 6px 16px rgba(245,158,11,0.3);
            flex-shrink: 0;
        }
        :where(body[data-page="saved"]) .header-icon svg { width: 22px; height: 22px; color: white; }
        :where(body[data-page="saved"]) .header-title { font-size: 28px; font-weight: 900; letter-spacing: -0.5px; }
        @media (min-width: 640px) { :where(body[data-page="saved"]) .header-title { font-size: 34px; } }
        :where(body[data-page="saved"]) .header-sub { font-size: 13px; font-weight: 600; color: #697371; margin-bottom: 24px; padding-left: 58px; }

        /* ── Grid ── */
        :where(body[data-page="saved"]) .grid-wrap {
            padding: 0 20px 40px;
        }
        @media (min-width: 640px) { :where(body[data-page="saved"]) .grid-wrap { padding: 0 32px 60px; } }
        @media (min-width: 1500px) { :where(body[data-page="saved"]) .grid-wrap { max-width: 1500px; margin: 0 auto; } }

        :where(body[data-page="saved"]) .saved-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 16px;
        }
        @media (min-width: 480px) { :where(body[data-page="saved"]) .saved-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 768px) { :where(body[data-page="saved"]) .saved-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 1200px) { :where(body[data-page="saved"]) .saved-grid { grid-template-columns: repeat(4, 1fr); } }

        /* ── Saved Card ── */
        :where(body[data-page="saved"]) .scard {
            background: white; border-radius: 14px;
            border: 1px solid #eceee6; overflow: hidden;
            cursor: pointer; position: relative;
            transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
            animation: fadeUp-3 0.4s ease both;
        }
        :where(body[data-page="saved"]) .scard:hover {
            box-shadow: 0 8px 28px -8px rgba(75,104,255,0.2);
            border-color: #4b68ff; transform: translateY(-2px);
        }

        :where(body[data-page="saved"]) .scard-img {
            position: relative; aspect-ratio: 16/10; overflow: hidden; background: #eceee6;
        }
        :where(body[data-page="saved"]) .scard-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; display:block; }
        :where(body[data-page="saved"]) .scard:hover .scard-img img { transform: scale(1.06); }
        :where(body[data-page="saved"]) .scard-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 55%); }
        :where(body[data-page="saved"]) .scard-type {
            position:absolute; bottom:10px; left:12px;
            background:rgba(255,255,255,0.92); backdrop-filter:blur(8px);
            padding:3px 10px; border-radius:999px;
            font-size:9px; font-weight:800; color:#4b68ff;
            text-transform:uppercase; letter-spacing:0.06em;
        }
        /* O'chirish tugmasi */
        :where(body[data-page="saved"]) .scard-remove {
            position: absolute; top: 10px; right: 10px;
            width: 30px; height: 30px; border-radius: 50%;
            background: rgba(0,0,0,0.45); backdrop-filter: blur(6px);
            border: none; cursor: pointer; display: flex;
            align-items: center; justify-content: center;
            opacity: 0; transition: opacity 0.2s, background 0.2s;
            z-index: 5;
        }
        :where(body[data-page="saved"]) .scard:hover .scard-remove { opacity: 1; }
        :where(body[data-page="saved"]) .scard-remove:hover { background: rgba(239,68,68,0.85); }
        :where(body[data-page="saved"]) .scard-remove svg { width: 14px; height: 14px; color: white; }

        :where(body[data-page="saved"]) .scard-body { padding: 14px 16px 16px; }
        :where(body[data-page="saved"]) .scard-title {
            font-size: 14px; font-weight: 800; color: #101615;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            margin-bottom: 8px;
        }
        :where(body[data-page="saved"]) .scard-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
        :where(body[data-page="saved"]) .scard-price { font-size: 14px; font-weight: 900; color: #4b68ff; }
        :where(body[data-page="saved"]) .scard-price span { font-size: 10px; opacity: 0.4; font-weight: 600; }
        :where(body[data-page="saved"]) .scard-views { display:flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#8b9390; }
        :where(body[data-page="saved"]) .scard-author { display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid #f4f5f0; }
        :where(body[data-page="saved"]) .scard-author img { width:26px; height:26px; border-radius:50%; object-fit:cover; border:2px solid #e6eaff; }
        :where(body[data-page="saved"]) .scard-author-name { font-size:11px; font-weight:800; color:#1b2321; }
        :where(body[data-page="saved"]) .scard-author-class { font-size:9px; color:#8b9390; font-weight:600; }

        /* ── Empty state ── */
        :where(body[data-page="saved"]) .empty-state {
            text-align: center; padding: 80px 20px;
            display: flex; flex-direction: column; align-items: center; gap: 16px;
        }
        :where(body[data-page="saved"]) .empty-icon {
            width: 80px; height: 80px; border-radius: 24px;
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 8px 24px rgba(245,158,11,0.2);
        }
        :where(body[data-page="saved"]) .empty-icon svg { width: 36px; height: 36px; color: #f59e0b; }
        :where(body[data-page="saved"]) .empty-title { font-size: 20px; font-weight: 900; color: #1b2321; }
        :where(body[data-page="saved"]) .empty-sub { font-size: 14px; font-weight: 600; color: #8b9390; max-width: 280px; line-height: 1.6; }
        :where(body[data-page="saved"]) .empty-btn {
            display: inline-flex; align-items: center; gap: 8px;
            background: #4b68ff; color: white;
            padding: 12px 28px; border-radius: 999px;
            font-weight: 800; font-size: 14px; text-decoration: none;
            transition: all 0.2s; border: none; cursor: pointer;
            box-shadow: 0 6px 16px rgba(75,104,255,0.3);
        }
        :where(body[data-page="saved"]) .empty-btn:hover { background: #3854e8; transform: translateY(-1px); }

        /* ── Login state ── */
        :where(body[data-page="saved"]) .login-state {
            text-align: center; padding: 80px 20px;
            display: flex; flex-direction: column; align-items: center; gap: 16px;
        }

        /* Skeleton */
        :where(body[data-page="saved"]) .skel { background:linear-gradient(90deg,#eceee6 25%,#dde2dc 50%,#eceee6 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:10px; }

        /* Count badge */
        :where(body[data-page="saved"]) .count-badge {
            display: inline-flex; align-items: center; justify-content: center;
            background: #f59e0b; color: white;
            font-size: 11px; font-weight: 900;
            min-width: 22px; height: 22px; padding: 0 6px;
            border-radius: 999px; margin-left: 8px;
        }

/* ── signup ── */
:root:where(:has(body[data-page="signup"])) { --primary: #4b68ff; --primary-dark: #3854e8; }
        body:where([data-page="signup"]) { font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif; background: #f4f5f0; overflow: hidden; height: 100vh; }
        :where(body[data-page="signup"]) .brand-section { position: relative; height: 100%; overflow: hidden; display: none; background: #000; }
        @media (min-width: 1024px) { :where(body[data-page="signup"]) .brand-section { display: block; } }
        :where(body[data-page="signup"]) video.bg-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; }
        :where(body[data-page="signup"]) .video-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(56,84,232,0.85) 0%, rgba(16,22,21,0.9) 100%); z-index: 1; mix-blend-mode: multiply; }
        :where(body[data-page="signup"]) .content-wrap { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 64px; }
        :where(body[data-page="signup"]) .input-pill { background: #eceee6; border: 1.5px solid transparent; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
        :where(body[data-page="signup"]) .input-pill:focus-within { background: white; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(75,104,255,0.1); }
        :where(body[data-page="signup"]) .btn-primary { background: var(--primary); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); }
        :where(body[data-page="signup"]) .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 12px 24px -6px rgba(75,104,255,0.4); }
        :where(body[data-page="signup"]) .animate-slide-in { animation: slideInRight 0.8s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ── sorovlar ── */
:where(html:has(body[data-page="sorovlar"])),:where(body[data-page="sorovlar"]),:where(body[data-page="sorovlar"]) *{box-sizing:border-box;margin:0;padding:0}
        :root:where(:has(body[data-page="sorovlar"])){
            --primary:#3854e8;--primary-dark:#2f49d4;
            --teal:#0d9488;--teal-dark:#0f766e;
            --bg:#f4f5f0;--border:#dde2dc;
            --text:#101615;--muted:#697371;
            --nav-h:65px;
        }
        html:where(:has(body[data-page="sorovlar"])),body:where([data-page="sorovlar"]){height:100%;overflow:hidden}
        body:where([data-page="sorovlar"]){
            font-family:'Gilroy','Plus Jakarta Sans',sans-serif;
            background:var(--bg);color:var(--text);
            opacity:0;transition:opacity .4s ease;
            -webkit-tap-highlight-color:transparent;
        }
        body:where([data-page="sorovlar"]).loaded{opacity:1}
        @media(min-width:768px){
            body:where([data-page="sorovlar"]){padding-left:72px}
            body:where([data-page="sorovlar"]):has(.sidebar:hover){padding-left:220px}
        body:where([data-page="sorovlar"]){transition:padding-left .4s cubic-bezier(.4,0,.2,1)}
        }

        /* ── Sidebar ── */
        :where(body[data-page="sorovlar"]) .sidebar{position:fixed;left:0;top:0;bottom:0;width:72px;background:#fff;border-right:1px solid #eceee6;display:none;flex-direction:column;align-items:center;padding:24px 0;z-index:50;transition:width .4s cubic-bezier(.4,0,.2,1);overflow:hidden}
        @media(min-width:768px){:where(body[data-page="sorovlar"]) .sidebar{display:flex}}
        :where(body[data-page="sorovlar"]) .sidebar:hover{width:220px;box-shadow:4px 0 24px rgba(0,0,0,.04)}
        :where(body[data-page="sorovlar"]) .sb-logo{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:900;letter-spacing:-.05em;color:var(--primary);padding:0 20px;margin-bottom:32px;white-space:nowrap;width:100%;text-decoration:none}
        :where(body[data-page="sorovlar"]) .sb-logo img{flex-shrink:0}
        :where(body[data-page="sorovlar"]) .sb-logo span,:where(body[data-page="sorovlar"]) .sb-link span,:where(body[data-page="sorovlar"]) .sb-btn span{opacity:0;transition:opacity .2s,transform .2s;transform:translateX(-8px)}
        :where(body[data-page="sorovlar"]) .sidebar:hover .sb-logo span,:where(body[data-page="sorovlar"]) .sidebar:hover .sb-link span,:where(body[data-page="sorovlar"]) .sidebar:hover .sb-btn span{opacity:1;transform:translateX(0)}
        :where(body[data-page="sorovlar"]) .sb-nav{flex:1;display:flex;flex-direction:column;gap:4px;width:100%;padding:0 10px}
        :where(body[data-page="sorovlar"]) .sb-link{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:12px;color:#697371;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:all .2s}
        :where(body[data-page="sorovlar"]) .sb-link:hover,:where(body[data-page="sorovlar"]) .sb-link.active{background:#eef0ff;color:var(--primary)}
        :where(body[data-page="sorovlar"]) .sb-link.teal-active{background:#f0fdfa;color:var(--teal)}
        :where(body[data-page="sorovlar"]) .sb-link svg{flex-shrink:0;width:20px;height:20px}
        :where(body[data-page="sorovlar"]) .sb-bottom{width:100%;padding:0 10px}
        :where(body[data-page="sorovlar"]) .sb-btn{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;border:none;width:100%;background:transparent;color:#ef4444;transition:all .2s}
        :where(body[data-page="sorovlar"]) .sb-btn:hover{background:#fff1f2}
        :where(body[data-page="sorovlar"]) .sb-btn svg{flex-shrink:0;width:20px;height:20px}

        /* ── Bottom nav ── */
        :where(body[data-page="sorovlar"]) .bnav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-top:1px solid rgba(221,226,220,.8);display:flex;justify-content:space-around;align-items:center;z-index:100;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -4px 24px rgba(0,0,0,.04)}
        @media(min-width:768px){:where(body[data-page="sorovlar"]) .bnav{display:none}}
        :where(body[data-page="sorovlar"]) .bnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;height:100%;gap:4px;color:#8b9390;text-decoration:none;position:relative;transition:color .25s;border:none;background:transparent;cursor:pointer}
        :where(body[data-page="sorovlar"]) .bnav-item.active{color:var(--teal)}
        :where(body[data-page="sorovlar"]) .bnav-item svg{width:22px;height:22px}
        :where(body[data-page="sorovlar"]) .bnav-item span{font-size:10px;font-weight:700}
        :where(body[data-page="sorovlar"]) .bnav-dot{position:absolute;top:0;width:28px;height:3px;background:var(--teal);border-radius:0 0 4px 4px;opacity:0;transform:scaleX(0);transition:opacity .25s,transform .25s}
        :where(body[data-page="sorovlar"]) .bnav-item.active .bnav-dot{opacity:1;transform:scaleX(1)}

        /* ── Layout ── */
        :where(body[data-page="sorovlar"]) .wrap{display:flex;height:100vh;width:100%;overflow:hidden}
        @media(max-width:767px){:where(body[data-page="sorovlar"]) .wrap{height:calc(100vh - var(--nav-h));width:100%;overflow:hidden}}

        /* ── Left panel ── */
        :where(body[data-page="sorovlar"]) .lp{width:340px;flex-shrink:0;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column}
        @media(max-width:900px){:where(body[data-page="sorovlar"]) .lp{width:280px}}
        @media(max-width:767px){
            :where(body[data-page="sorovlar"]) .lp{position:absolute;inset:0;width:100%;z-index:20;transform:translateX(0);transition:transform .3s ease}
            :where(body[data-page="sorovlar"]) .lp.out{transform:translateX(-100%)}
        }

        :where(body[data-page="sorovlar"]) .lp-head{padding:18px 16px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
        :where(body[data-page="sorovlar"]) .lp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
        :where(body[data-page="sorovlar"]) .lp-title{font-size:20px;font-weight:900;letter-spacing:-.4px;display:flex;align-items:center;gap:8px}
        :where(body[data-page="sorovlar"]) .lp-badge-total{background:var(--teal);color:#fff;font-size:11px;font-weight:900;padding:2px 8px;border-radius:99px}
        :where(body[data-page="sorovlar"]) .lp-back{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:700;text-decoration:none;transition:color .2s}
        :where(body[data-page="sorovlar"]) .lp-back:hover{color:var(--primary)}
        :where(body[data-page="sorovlar"]) .lp-search{display:flex;align-items:center;gap:8px;background:#f4f5f0;border:1.5px solid var(--border);border-radius:12px;padding:9px 13px;transition:all .2s}
        :where(body[data-page="sorovlar"]) .lp-search:focus-within{background:#fff;border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.1)}
        :where(body[data-page="sorovlar"]) .lp-search input{flex:1;background:none;border:none;outline:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--text)}
        :where(body[data-page="sorovlar"]) .lp-search input::placeholder{color:var(--muted)}

        :where(body[data-page="sorovlar"]) .conv-list{flex:1;overflow-y:auto;padding:6px}
        :where(body[data-page="sorovlar"]) .conv-list::-webkit-scrollbar{width:3px}
        :where(body[data-page="sorovlar"]) .conv-list::-webkit-scrollbar-thumb{background:#dde2dc;border-radius:99px}

        :where(body[data-page="sorovlar"]) .ci{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:14px;cursor:pointer;transition:background .15s;position:relative}
        :where(body[data-page="sorovlar"]) .ci:hover{background:#f4f5f0}
        :where(body[data-page="sorovlar"]) .ci.active{background:#f0fdfa}
        :where(body[data-page="sorovlar"]) .ci-ava{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
        :where(body[data-page="sorovlar"]) .ci-ava-ph{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#0d9488,#0ea5e9);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:15px;overflow:hidden;}
        :where(body[data-page="sorovlar"]) .ci-info{flex:1;min-width:0}
        :where(body[data-page="sorovlar"]) .ci-name{font-size:14px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :where(body[data-page="sorovlar"]) .ci-proj{font-size:11px;font-weight:600;color:var(--teal);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :where(body[data-page="sorovlar"]) .ci-last{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :where(body[data-page="sorovlar"]) .ci-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
        :where(body[data-page="sorovlar"]) .ci-time{font-size:11px;color:var(--muted);font-weight:600}
        :where(body[data-page="sorovlar"]) .ci-badge{background:var(--teal);color:#fff;font-size:10px;font-weight:900;min-width:18px;height:18px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 5px}

        /* ── Right panel ── */
        :where(body[data-page="sorovlar"]) .rp{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}

        :where(body[data-page="sorovlar"]) .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);text-align:center;padding:40px}
        :where(body[data-page="sorovlar"]) .empty-ico{width:72px;height:72px;border-radius:24px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}

        /* Chat header */
        :where(body[data-page="sorovlar"]) .ch{background:#fff;border-bottom:1px solid var(--border);padding:13px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0}
        :where(body[data-page="sorovlar"]) .ch-back{display:none;width:36px;height:36px;border-radius:10px;background:#eceee6;border:none;cursor:pointer;color:var(--muted);align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
        @media(max-width:767px){:where(body[data-page="sorovlar"]) .ch-back{display:flex}}
        :where(body[data-page="sorovlar"]) .ch-back:hover{background:#dde2dc;color:var(--text)}
        :where(body[data-page="sorovlar"]) .ch-ava{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#e6eaff;flex-shrink:0}
        :where(body[data-page="sorovlar"]) .ch-ava-ph{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#0d9488,#0ea5e9);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:13px;flex-shrink:0}
        :where(body[data-page="sorovlar"]) .ch-info{flex:1;min-width:0}
        :where(body[data-page="sorovlar"]) .ch-name{font-size:15px;font-weight:900;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :where(body[data-page="sorovlar"]) .ch-sub{font-size:12px;font-weight:600;color:var(--teal);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :where(body[data-page="sorovlar"]) .ch-proj{display:flex;align-items:center;gap:6px;background:#f0fdfa;color:var(--teal);border:none;border-radius:10px;padding:7px 12px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;text-decoration:none;flex-shrink:0;white-space:nowrap}
        :where(body[data-page="sorovlar"]) .ch-proj:hover{background:#ccfbf1}

        /* Messages */
        :where(body[data-page="sorovlar"]) .ma{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 18px 8px;display:flex;flex-direction:column;gap:2px}
        :where(body[data-page="sorovlar"]) .ma::-webkit-scrollbar{width:3px}
        :where(body[data-page="sorovlar"]) .ma::-webkit-scrollbar-thumb{background:#dde2dc;border-radius:99px}

        :where(body[data-page="sorovlar"]) .dd{display:flex;align-items:center;gap:10px;margin:10px 0;color:var(--muted)}
        :where(body[data-page="sorovlar"]) .dd span{font-size:11px;font-weight:700;white-space:nowrap}
        :where(body[data-page="sorovlar"]) .dd::before,:where(body[data-page="sorovlar"]) .dd::after{content:'';flex:1;height:1px;background:var(--border)}

        :where(body[data-page="sorovlar"]) .mr{display:flex;align-items:flex-end;gap:6px;margin-bottom:1px}
        :where(body[data-page="sorovlar"]) .mr.mine{flex-direction:row-reverse}
        :where(body[data-page="sorovlar"]) .mr.mine+.mr:not(.mine),:where(body[data-page="sorovlar"]) .mr:not(.mine)+.mr.mine{margin-top:8px}

        :where(body[data-page="sorovlar"]) .ma-v{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-bottom:2px}
        :where(body[data-page="sorovlar"]) .ma-v-ph{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#0d9488,#0ea5e9);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:9px;flex-shrink:0;margin-bottom:2px}
        :where(body[data-page="sorovlar"]) .mc{display:flex;flex-direction:column;max-width:min(72%,640px)}
        :where(body[data-page="sorovlar"]) .mr.mine .mc{align-items:flex-end}

        :where(body[data-page="sorovlar"]) .bub{max-width:72%;padding:9px 13px;font-size:14px;font-weight:600;line-height:1.5;word-break:break-word;animation:bi .2s cubic-bezier(.34,1.56,.64,1) both}
        :where(body[data-page="sorovlar"]) .bub.theirs{background:#fff;color:var(--text);border-radius:18px 18px 18px 4px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
        :where(body[data-page="sorovlar"]) .bub.mine{background:var(--teal);color:#fff;border-radius:18px 18px 4px 18px}
        :where(body[data-page="sorovlar"]) .mt{font-size:10px;font-weight:600;color:var(--muted);margin:2px 6px 4px}

        /* Typing */
        :where(body[data-page="sorovlar"]) .tr{display:none;align-items:flex-end;gap:6px;padding:2px 0 6px}
        :where(body[data-page="sorovlar"]) .tr.show{display:flex}
        :where(body[data-page="sorovlar"]) .tb{background:#fff;padding:9px 13px;border-radius:18px 18px 18px 4px;box-shadow:0 1px 4px rgba(0,0,0,.06);display:flex;gap:3px;align-items:center}
        :where(body[data-page="sorovlar"]) .td{width:5px;height:5px;border-radius:50%;background:#8b9390;animation:td 1.2s infinite}
        :where(body[data-page="sorovlar"]) .td:nth-child(2){animation-delay:.2s}
        :where(body[data-page="sorovlar"]) .td:nth-child(3){animation-delay:.4s}

        /* Input */
        :where(body[data-page="sorovlar"]) .ia{background:#fff;border-top:1px solid var(--border);padding:12px 14px;display:flex;align-items:flex-end;gap:8px;flex-shrink:0}
        :where(body[data-page="sorovlar"]) .iw{flex:1;background:#f4f5f0;border:1.5px solid var(--border);border-radius:16px;padding:9px 13px;transition:all .2s}
        :where(body[data-page="sorovlar"]) .iw:focus-within{background:#fff;border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.1)}
        :where(body[data-page="sorovlar"]) .mi{width:100%;background:none;border:none;outline:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--text);resize:none;max-height:110px;line-height:1.5;display:block}
        :where(body[data-page="sorovlar"]) .mi::placeholder{color:var(--muted)}
        :where(body[data-page="sorovlar"]) .sb2{width:40px;height:40px;border-radius:12px;background:var(--teal);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
        :where(body[data-page="sorovlar"]) .sb2:hover:not(:disabled){background:var(--teal-dark);transform:scale(1.05)}
        :where(body[data-page="sorovlar"]) .sb2:disabled{opacity:.4;cursor:not-allowed}

        /* Skel */
        :where(body[data-page="sorovlar"]) .sk{background:linear-gradient(90deg,#eceee6 25%,#dde2dc 50%,#eceee6 75%);background-size:200% 100%;animation:sh 1.4s infinite;border-radius:10px}

        /* Toast */
        :where(body[data-page="sorovlar"]) .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(16px);background:#1b2321;color:#fff;padding:11px 18px;border-radius:12px;font-weight:700;font-size:13px;z-index:400;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);white-space:nowrap}
        :where(body[data-page="sorovlar"]) .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
        :where(body[data-page="sorovlar"]) .toast.err{background:#dc2626}
        @media(min-width:768px){:where(body[data-page="sorovlar"]) .toast{bottom:24px}}

        /* New request badge */
        :where(body[data-page="sorovlar"]) .new-req{
            position:absolute;top:10px;right:12px;
            background:var(--teal);color:#fff;
            font-size:9px;font-weight:900;
            padding:2px 6px;border-radius:99px;
            animation:pulse-2 2s infinite;
        }

        :where(body[data-page="sorovlar"]) .conv-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px;text-align:center;color:var(--muted)}
    
        /* Site Switcher */
        :where(body[data-page="sorovlar"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="sorovlar"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="sorovlar"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="sorovlar"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="sorovlar"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="sorovlar"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="sorovlar"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="sorovlar"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="sorovlar"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="sorovlar"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="sorovlar"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="sorovlar"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="sorovlar"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="sorovlar"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="sorovlar"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── stats ── */
:root:where(:has(body[data-page="stats"])) {
            --primary: #4b68ff;
            --bg: #f4f5f0;
            --nav-height: 65px
        }

        :where(html:has(body[data-page="stats"])), :where(body[data-page="stats"]), :where(body[data-page="stats"]) * {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        html:where(:has(body[data-page="stats"])) {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%
        }

        /* Body o'zgarishlari: Opacity fade-in effekti qo'shildi */
        body:where([data-page="stats"]) {
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            background: var(--bg);
            color: #101615;
            padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 10px));
            padding-left: 0;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
            opacity: 0;
            transition: opacity 0.6s ease-in
        }

        body:where([data-page="stats"]).loaded {
            opacity: 1
        }

        /* Body padding va transition silliqlandi */
        @media(min-width:768px) {
            body:where([data-page="stats"]) {
                padding-left: 72px;
                padding-bottom: 0;
                transition: padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease-in !important
            }

            body:where([data-page="stats"]):has(.sidebar:hover) {
                padding-left: 220px !important
            }
        }

        :where(body[data-page="stats"]) .hero-gradient {
            background: transparent
        }

        :where(body[data-page="stats"]) .stats-visual {
            display: flow-root;
            background-image: url('https://img4.teletype.in/files/3f/a6/3fa64be6-7e78-4b32-a573-808f5e629a12.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center calc(50% - 180px);
            background-attachment: fixed;
            border-radius: 16px;
            margin-bottom: 40px
        }

        :where(body[data-page="stats"]) .footer-bg {
            background: white;
            border-top: 1px solid #eceee6
        }

        :where(body[data-page="stats"]) .scard {
            background: white;
            border-radius: 12px;
            border: 1px solid #eceee6;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            animation: fadeUp-2 0.5s ease both
        }

        @media(hover:hover) {
            :where(body[data-page="stats"]) .scard:hover {
                transform: translateY(-5px);
                box-shadow: 0 20px 40px -12px rgba(75, 104, 255, 0.15);
                border-color: #4b68ff
            }
        }

        :where(body[data-page="stats"]) .stat-num {
            font-size: 24px;
            font-weight: 900;
            color: #101615;
            line-height: 1.2
        }

        @media(min-width:640px) {
            :where(body[data-page="stats"]) .stat-num {
                font-size: 34px;
                line-height: 1
            }
        }

        :where(body[data-page="stats"]) .stat-label {
            font-size: 10px;
            font-weight: 700;
            color: #8b9390;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            margin-top: 4px
        }

        @media(min-width:640px) {
            :where(body[data-page="stats"]) .stat-label {
                font-size: 11px;
                margin-top: 6px
            }
        }

        :where(body[data-page="stats"]) .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px
        }

        @media(min-width:640px) {
            :where(body[data-page="stats"]) .stat-icon {
                width: 48px;
                height: 48px;
                border-radius: 16px;
                margin-bottom: 18px
            }
        }

        :where(body[data-page="stats"]) .stat-icon svg {
            width: 18px;
            height: 18px
        }

        @media(min-width:640px) {
            :where(body[data-page="stats"]) .stat-icon svg {
                width: 22px;
                height: 22px
            }
        }

        :where(body[data-page="stats"]) .stat-change {
            font-size: 10px;
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 999px;
            margin-top: 8px;
            display: inline-block;
            background: #f0fdf4;
            color: #22c55e
        }

        @media(min-width:640px) {
            :where(body[data-page="stats"]) .stat-change {
                font-size: 11px;
                padding: 3px 10px;
                margin-top: 10px
            }
        }

        :where(body[data-page="stats"]) .rank-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid #f4f5f0;
            cursor: pointer;
            transition: padding-left 0.2s
        }

        @media(min-width:640px) {
            :where(body[data-page="stats"]) .rank-row {
                gap: 12px;
                padding: 12px 0
            }
        }

        :where(body[data-page="stats"]) .rank-row:last-child {
            border-bottom: none
        }

        @media(hover:hover) {
            :where(body[data-page="stats"]) .rank-row:hover {
                padding-left: 6px
            }
        }

        :where(body[data-page="stats"]) .rank-icon-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 8px;
            flex-shrink: 0
        }

        :where(body[data-page="stats"]) .rank-icon-wrap.r1 {
            background: #fef9c3
        }

        :where(body[data-page="stats"]) .rank-icon-wrap.r2 {
            background: #eceee6
        }

        :where(body[data-page="stats"]) .rank-icon-wrap.r3 {
            background: #fff7ed
        }

        :where(body[data-page="stats"]) .rank-icon-wrap.rn {
            background: #f4f5f0;
            font-size: 10px;
            font-weight: 900;
            color: #8b9390
        }

        :where(body[data-page="stats"]) .rank-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #e6eaff;
            flex-shrink: 0
        }

        @media(min-width:640px) {
            :where(body[data-page="stats"]) .rank-avatar {
                width: 38px;
                height: 38px
            }
        }

        :where(body[data-page="stats"]) .rank-name {
            font-size: 12px;
            font-weight: 800;
            color: #101615
        }

        @media(min-width:640px) {
            :where(body[data-page="stats"]) .rank-name {
                font-size: 13px
            }
        }

        :where(body[data-page="stats"]) .rank-sub {
            font-size: 9px;
            font-weight: 600;
            color: #8b9390;
            margin-top: 1px
        }

        :where(body[data-page="stats"]) .rank-badge {
            margin-left: auto;
            font-size: 10px;
            font-weight: 800;
            color: #4b68ff;
            background: #eef0ff;
            padding: 3px 10px;
            border-radius: 999px;
            white-space: nowrap;
            flex-shrink: 0
        }

        :where(body[data-page="stats"]) .proj-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid #f4f5f0;
            cursor: pointer;
            transition: padding-left 0.2s
        }

        @media(min-width:640px) {
            :where(body[data-page="stats"]) .proj-row {
                gap: 12px;
                padding: 12px 0
            }
        }

        :where(body[data-page="stats"]) .proj-row:last-child {
            border-bottom: none
        }

        @media(hover:hover) {
            :where(body[data-page="stats"]) .proj-row:hover {
                padding-left: 6px
            }
        }

        :where(body[data-page="stats"]) .proj-thumb {
            width: 44px;
            height: 34px;
            border-radius: 8px;
            object-fit: cover;
            background: #eef0ff;
            flex-shrink: 0
        }

        @media(min-width:640px) {
            :where(body[data-page="stats"]) .proj-thumb {
                width: 52px;
                height: 38px;
                border-radius: 10px
            }
        }

        :where(body[data-page="stats"]) .proj-title {
            font-size: 12px;
            font-weight: 800;
            color: #101615;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 120px
        }

        @media(min-width:640px) {
            :where(body[data-page="stats"]) .proj-title {
                font-size: 13px;
                max-width: 130px
            }
        }

        :where(body[data-page="stats"]) .proj-type {
            font-size: 9px;
            font-weight: 700;
            color: #4b68ff;
            background: #eef0ff;
            padding: 2px 6px;
            border-radius: 999px;
            margin-top: 3px;
            display: inline-block
        }

        :where(body[data-page="stats"]) .proj-val {
            margin-left: auto;
            font-size: 10px;
            font-weight: 800;
            color: #8b9390;
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0
        }

        :where(body[data-page="stats"]) .section-title {
            font-size: 15px;
            font-weight: 900;
            display: flex;
            align-items: center;
            gap: 8px
        }

        @media(min-width:640px) {
            :where(body[data-page="stats"]) .section-title {
                font-size: 18px;
                gap: 10px
            }
        }

        :where(body[data-page="stats"]) .skel {
            background: linear-gradient(90deg, #eceee6 25%, #dde2dc 50%, #eceee6 75%);
            background-size: 200% 100%;
            animation: shimmer 1.4s infinite;
            border-radius: 10px
        }

        /* Sidebar o'zgarishlari: Tezlik moslashtirildi */
        :where(body[data-page="stats"]) .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: 72px;
            background: white;
            border-right: 1px solid #eceee6;
            display: none;
            flex-direction: column;
            align-items: center;
            padding: 24px 0;
            z-index: 50;
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden
        }

        @media(min-width:768px) {
            :where(body[data-page="stats"]) .sidebar {
                display: flex
            }
        }

        :where(body[data-page="stats"]) .sidebar:hover {
            width: 220px;
            box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02)
        }

        :where(body[data-page="stats"]) .sidebar-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 20px;
            font-weight: 900;
            letter-spacing: -0.05em;
            color: #4b68ff;
            padding: 0 20px;
            margin-bottom: 32px;
            white-space: nowrap;
            width: 100%;
            text-decoration: none
        }

        :where(body[data-page="stats"]) .sidebar-logo img {
            flex-shrink: 0
        }

        :where(body[data-page="stats"]) .sidebar-logo span {
            opacity: 0;
            transition: opacity 0.2s, transform 0.2s;
            transform: translateX(-10px)
        }

        :where(body[data-page="stats"]) .sidebar:hover .sidebar-logo span {
            opacity: 1;
            transform: translateX(0)
        }

        :where(body[data-page="stats"]) .sidebar-nav {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
            padding: 0 10px
        }

        :where(body[data-page="stats"]) .sidebar-link {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 14px;
            border-radius: 12px;
            color: #697371;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            transition: all 0.2s
        }

        :where(body[data-page="stats"]) .sidebar-link:hover,
        :where(body[data-page="stats"]) .sidebar-link.active {
            background: #eef0ff;
            color: #4b68ff
        }

        :where(body[data-page="stats"]) .sidebar-link svg {
            flex-shrink: 0;
            width: 20px;
            height: 20px
        }

        :where(body[data-page="stats"]) .sidebar-link span {
            opacity: 0;
            transition: opacity 0.2s
        }

        :where(body[data-page="stats"]) .sidebar:hover .sidebar-link span {
            opacity: 1
        }

        :where(body[data-page="stats"]) .sidebar-bottom {
            width: 100%;
            padding: 0 10px;
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        :where(body[data-page="stats"]) .sidebar-btn {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 700;
            white-space: nowrap;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            width: 100%
        }

        :where(body[data-page="stats"]) .sidebar-btn.signin {
            background: transparent;
            color: #697371
        }

        :where(body[data-page="stats"]) .sidebar-btn.signin:hover {
            background: #eceee6;
            color: #4b68ff
        }

        :where(body[data-page="stats"]) .sidebar-btn.start {
            background: #4b68ff;
            color: white;
            box-shadow: 0 4px 12px rgba(75, 104, 255, 0.3)
        }

        :where(body[data-page="stats"]) .sidebar-btn.start:hover {
            background: #3854e8;
            transform: translateY(-1px)
        }

        :where(body[data-page="stats"]) .sidebar-btn svg {
            flex-shrink: 0;
            width: 20px;
            height: 20px
        }

        :where(body[data-page="stats"]) .sidebar-btn span {
            opacity: 0;
            transition: opacity 0.2s
        }

        :where(body[data-page="stats"]) .sidebar:hover .sidebar-btn span {
            opacity: 1
        }

        :where(body[data-page="stats"]) .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: var(--nav-height);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-top: 1px solid rgba(221, 226, 220, 0.8);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 100;
            padding-bottom: env(safe-area-inset-bottom, 0px);
            box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.04)
        }

        @media(min-width:768px) {
            :where(body[data-page="stats"]) .bottom-nav {
                display: none
            }
        }

        :where(body[data-page="stats"]) .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            height: 100%;
            gap: 5px;
            color: #8b9390;
            text-decoration: none;
            position: relative;
            transition: color 0.3s ease
        }

        :where(body[data-page="stats"]) .bottom-nav-item.active {
            color: var(--primary)
        }

        :where(body[data-page="stats"]) .bottom-nav-item svg {
            width: 22px;
            height: 22px;
            transition: transform 0.3s, stroke-width 0.3s
        }

        :where(body[data-page="stats"]) .bottom-nav-item.active svg {
            transform: translateY(-2px);
            stroke-width: 2.5
        }

        :where(body[data-page="stats"]) .bottom-nav-item span {
            font-size: 10px;
            font-weight: 700
        }

        :where(body[data-page="stats"]) .bottom-nav-indicator {
            position: absolute;
            top: 0;
            width: 32px;
            height: 3px;
            background: var(--primary);
            border-radius: 0 0 4px 4px;
            opacity: 0;
            transform: scaleX(0);
            transition: opacity 0.3s, transform 0.3s
        }

        :where(body[data-page="stats"]) .bottom-nav-item.active .bottom-nav-indicator {
            opacity: 1;
            transform: scaleX(1)
        }
    
        /* Site Switcher */
        :where(body[data-page="stats"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="stats"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="stats"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="stats"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="stats"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="stats"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="stats"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="stats"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="stats"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="stats"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="stats"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="stats"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="stats"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="stats"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="stats"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── support ── */
:root:where(:has(body[data-page="support"])) { 
            --primary: #4b68ff; 
            --bg: #f4f5f0; 
            --nav-height: 65px;
        }
        :where(html:has(body[data-page="support"])), :where(body[data-page="support"]), :where(body[data-page="support"]) * { box-sizing: border-box; margin: 0; padding: 0; }
        
        
        html:where(:has(body[data-page="support"])) { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
        
        body:where([data-page="support"]) { 
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif; 
            background: var(--bg); 
            color: #101615; 
            padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 10px));
            padding-left: 0;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
            
            /* Sahifa yuklanishidagi silliq effekt */
            opacity: 0;
            transition: opacity 0.6s ease-in;
        }

        body:where([data-page="support"]).loaded {
            opacity: 1;
        }

        /* ================== SIDEBAR SMOOTH TRANSITION ================== */
        @media (min-width: 768px) {
            body:where([data-page="support"]) { 
                padding-left: 72px; 
                padding-bottom: 0; 
                /* Body tezligi sidebar bilan to'liq bir xillashtirildi */
                transition: padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease-in !important;
            }
            body:where([data-page="support"]):has(.sidebar:hover) {
                padding-left: 220px !important;
            }
        }

        :where(body[data-page="support"]) .glass-nav {
            background: rgba(255,255,255,0.85);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.6);
        }
        :where(body[data-page="support"]) .hero-gradient {
            background: transparent;
        }
        :where(body[data-page="support"]) .support-visual {
            display: flow-root;
            background-color: #f4f5f0;
            background-image: url('https://img1.teletype.in/files/c5/a3/c5a3b029-ad98-4adb-b50d-f3b715c0b630.png');
            background-size: 90% auto;
            background-repeat: no-repeat;
            background-position: center calc(50% - 180px);
            background-attachment: fixed;
            border-radius: 16px;
            margin-bottom: 40px;
        }
        :where(body[data-page="support"]) .footer-bg { background: white; border-top: 1px solid #eceee6; }

        /* CARD */
        :where(body[data-page="support"]) .scard {
            background: white;
            border-radius: 12px;
            border: 1px solid #eceee6;
            transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
            animation: fadeUp-2 0.5s ease both;
        }
        :where(body[data-page="support"]) .scard:hover {
            box-shadow: 0 8px 32px -8px rgba(75, 104, 255, 0.18);
            border-color: rgba(75, 104, 255, 0.3);
        }

        /* CONTACT CARDS */
        :where(body[data-page="support"]) .contact-card {
            background: white;
            border-radius: 16px;
            border: 1px solid #eceee6;
            padding: 24px;
            display: flex;
            align-items: center;
            gap: 18px;
            cursor: pointer;
            transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
            text-decoration: none;
            animation: fadeUp-2 0.5s ease both;
        }
        :where(body[data-page="support"]) .contact-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px -8px rgba(75, 104, 255, 0.15);
            border-color: rgba(75, 104, 255, 0.3);
        }
        :where(body[data-page="support"]) .contact-icon {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        :where(body[data-page="support"]) .contact-label { font-size: 11px; font-weight: 700; color: #8b9390; text-transform: uppercase; letter-spacing: 0.07em; }
        :where(body[data-page="support"]) .contact-val   { font-size: 15px; font-weight: 800; color: #101615; margin-top: 2px; }
        :where(body[data-page="support"]) .contact-arrow { margin-left: auto; color: #c3c9c0; flex-shrink: 0; transition: transform 0.2s; }
        :where(body[data-page="support"]) .contact-card:hover .contact-arrow { transform: translateX(4px); color: #4b68ff; }

        /* FAQ ACCORDION */
        :where(body[data-page="support"]) .faq-item {
            border-bottom: 1px solid #eceee6;
            animation: fadeUp-2 0.5s ease both;
        }
        :where(body[data-page="support"]) .faq-item:last-child { border-bottom: none; }
        :where(body[data-page="support"]) .faq-btn {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 22px 0;
            background: none;
            border: none;
            cursor: pointer;
            text-align: left;
            gap: 16px;
        }
        :where(body[data-page="support"]) .faq-q {
            font-size: 15px;
            font-weight: 800;
            color: #101615;
            transition: color 0.2s;
        }
        :where(body[data-page="support"]) .faq-btn:hover .faq-q { color: #4b68ff; }
        :where(body[data-page="support"]) .faq-icon {
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            transition: all 0.3s;
        }
        :where(body[data-page="support"]) .faq-item.open .faq-icon {
            transform: rotate(45deg);
            color: #4b68ff;
        }
        :where(body[data-page="support"]) .faq-item.open .faq-q { color: #4b68ff; }
        :where(body[data-page="support"]) .faq-answer {
            font-size: 14px;
            font-weight: 500;
            color: #697371;
            line-height: 1.75;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.3s;
            padding-bottom: 0;
        }
        :where(body[data-page="support"]) .faq-item.open .faq-answer {
            max-height: 300px;
            padding-bottom: 20px;
        }

        /* FORM */
        :where(body[data-page="support"]) .form-input {
            width: 100%;
            background: #f4f5f0;
            border: 1.5px solid #dde2dc;
            border-radius: 14px;
            padding: 14px 18px;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            color: #101615;
            outline: none;
            transition: all 0.3s;
        }
        :where(body[data-page="support"]) .form-input:focus {
            background: white;
            border-color: #4b68ff;
            box-shadow: 0 0 0 4px rgba(75,104,255,0.1);
        }
        :where(body[data-page="support"]) .form-input::placeholder { color: #8b9390; font-weight: 500; }
        :where(body[data-page="support"]) .form-label { font-size: 12px; font-weight: 800; color: #4d5654; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
        :where(body[data-page="support"]) .form-btn {
            width: 100%;
            background: #4b68ff;
            color: white;
            border: none;
            border-radius: 14px;
            padding: 16px;
            font-size: 15px;
            font-weight: 800;
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 8px 24px -6px rgba(75,104,255,0.45);
        }
        :where(body[data-page="support"]) .form-btn:hover { background: #3854e8; transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(75,104,255,0.5); }
        :where(body[data-page="support"]) .form-btn:active { transform: translateY(0); }

        /* SUCCESS toast */
        :where(body[data-page="support"]) .toast {
            position: fixed; bottom: 32px; right: 32px;
            background: #101615; color: white;
            padding: 16px 24px; border-radius: 16px;
            font-size: 14px; font-weight: 700;
            display: flex; align-items: center; gap: 10px;
            transform: translateY(80px); opacity: 0;
            transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
            z-index: 999;
            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3);
        }
        :where(body[data-page="support"]) .toast.show { transform: translateY(0); opacity: 1; }

        /* Section title */
        :where(body[data-page="support"]) .section-title { font-size: 20px; font-weight: 900; display: flex; align-items: center; gap: 10px; color: #101615; }

        /* ── Sidebar ── */
        :where(body[data-page="support"]) .sidebar {
            position: fixed; left: 0; top: 0; bottom: 0; width: 72px;
            background: white; border-right: 1px solid #eceee6;
            display: none; flex-direction: column; align-items: center;
            padding: 24px 0; z-index: 50; 
            /* Sidebar tezligi moslashtirildi */
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            box-shadow: 4px 0 24px rgba(0,0,0,0.02);
        }
        @media (min-width: 768px) { :where(body[data-page="support"]) .sidebar { display: flex; } }
        :where(body[data-page="support"]) .sidebar:hover { width: 220px; }
        
        :where(body[data-page="support"]) .sidebar-logo {
            display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 900;
            letter-spacing: -0.05em; color: #4b68ff; padding: 0 20px; margin-bottom: 32px;
            white-space: nowrap; width: 100%; text-decoration: none;
        }
        :where(body[data-page="support"]) .sidebar-logo img { flex-shrink: 0; }
        :where(body[data-page="support"]) .sidebar-logo span { opacity: 0; transition: opacity 0.2s, transform 0.2s; transform: translateX(-10px); }
        :where(body[data-page="support"]) .sidebar:hover .sidebar-logo span { opacity: 1; transform: translateX(0); }
        
        :where(body[data-page="support"]) .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 10px; }
        :where(body[data-page="support"]) .sidebar-link {
            display: flex; align-items: center; gap: 14px; padding: 12px 14px;
            border-radius: 12px; color: #697371; font-size: 14px; font-weight: 700;
            text-decoration: none; white-space: nowrap; transition: all 0.2s;
        }
        :where(body[data-page="support"]) .sidebar-link:hover, :where(body[data-page="support"]) .sidebar-link.active { background: #eef0ff; color: #4b68ff; }
        :where(body[data-page="support"]) .sidebar-link svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="support"]) .sidebar-link span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="support"]) .sidebar:hover .sidebar-link span { opacity: 1; }
        
        :where(body[data-page="support"]) .sidebar-bottom { width: 100%; padding: 0 10px; display: flex; flex-direction: column; gap: 8px; }
        :where(body[data-page="support"]) .sidebar-btn {
            display: flex; align-items: center; gap: 12px; padding: 12px 14px;
            border-radius: 12px; font-size: 14px; font-weight: 700; white-space: nowrap;
            cursor: pointer; border: none; transition: all 0.2s; width: 100%;
        }
        :where(body[data-page="support"]) .sidebar-btn.signin { background: transparent; color: #697371; }
        :where(body[data-page="support"]) .sidebar-btn.signin:hover { background: #eceee6; color: #4b68ff; }
        :where(body[data-page="support"]) .sidebar-btn.start { background: #4b68ff; color: white; box-shadow: 0 4px 12px rgba(75,104,255,0.3); }
        :where(body[data-page="support"]) .sidebar-btn.start:hover { background: #3854e8; transform: translateY(-1px); }
        :where(body[data-page="support"]) .sidebar-btn svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="support"]) .sidebar-btn span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="support"]) .sidebar:hover .sidebar-btn span { opacity: 1; }

        /* ── Bottom Nav ── */
        :where(body[data-page="support"]) .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-height);
            background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(221, 226, 220, 0.8);
            display: flex; justify-content: space-around; align-items: center; z-index: 100;
            padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 24px rgba(0,0,0,0.04);
        }
        @media (min-width: 768px) { :where(body[data-page="support"]) .bottom-nav { display: none; } }
        :where(body[data-page="support"]) .bottom-nav-item {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            flex: 1; height: 100%; gap: 5px; color: #8b9390; text-decoration: none;
            position: relative; transition: color 0.3s ease;
        }
        :where(body[data-page="support"]) .bottom-nav-item.active { color: var(--primary); }
        :where(body[data-page="support"]) .bottom-nav-item svg { width: 22px; height: 22px; transition: transform 0.3s, stroke-width 0.3s; }
        :where(body[data-page="support"]) .bottom-nav-item.active svg { transform: translateY(-2px); stroke-width: 2.5; }
        :where(body[data-page="support"]) .bottom-nav-item span { font-size: 10px; font-weight: 700; transition: opacity 0.3s, transform 0.3s; }
        :where(body[data-page="support"]) .bottom-nav-indicator {
            position: absolute; top: 0; width: 32px; height: 3px; background: var(--primary);
            border-radius: 0 0 4px 4px; opacity: 0; transform: scaleX(0); transition: opacity 0.3s, transform 0.3s;
        }
        :where(body[data-page="support"]) .bottom-nav-item.active .bottom-nav-indicator { opacity: 1; transform: scaleX(1); }
    
        /* Site Switcher */
        :where(body[data-page="support"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="support"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="support"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="support"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-height:28px;}
        :where(body[data-page="support"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="support"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="support"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="support"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="support"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="support"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="support"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="support"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="support"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="support"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="support"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ── user-profile ── */
:root:where(:has(body[data-page="user-profile"])) {
            --primary: #3854e8; --primary-dark: #2f49d4;
            --bg: #f4f5f0; --border: #dde2dc;
            --text: #101615; --muted: #697371; --nav-height: 65px;
        }
        :where(html:has(body[data-page="user-profile"])), :where(body[data-page="user-profile"]), :where(body[data-page="user-profile"]) * { box-sizing: border-box; margin: 0; padding: 0; }
        body:where([data-page="user-profile"]) {
            font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
            background: var(--bg); color: var(--text); min-height: 100vh;
            opacity: 0; transition: opacity 0.5s ease, padding-left 0.4s cubic-bezier(0.4,0,0.2,1);
            padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 10px));
            -webkit-tap-highlight-color: transparent; overflow-x: hidden;
        }
        body:where([data-page="user-profile"]).loaded { opacity: 1; }
        @media (min-width: 768px) {
            body:where([data-page="user-profile"]) { padding-left: 72px; padding-bottom: 0; }
            body:where([data-page="user-profile"]):has(.sidebar:hover) { padding-left: 220px; }
        }
        @media (min-width: 900px) {
            body:where([data-page="user-profile"]) { height: auto; overflow: visible; }
        }

        /* ── Sidebar ── */
        :where(body[data-page="user-profile"]) .sidebar {
            position: fixed; left: 0; top: 0; bottom: 0; width: 72px;
            background: white; border-right: 1px solid #eceee6;
            display: none; flex-direction: column; align-items: center;
            padding: 24px 0; z-index: 50;
            transition: width 0.4s cubic-bezier(0.4,0,0.2,1); overflow: hidden;
        }
        @media (min-width: 768px) { :where(body[data-page="user-profile"]) .sidebar { display: flex; } }
        :where(body[data-page="user-profile"]) .sidebar:hover { width: 220px; box-shadow: 4px 0 24px rgba(0,0,0,0.04); }
        :where(body[data-page="user-profile"]) .sidebar-logo {
            display: flex; align-items: center; gap: 12px;
            font-size: 20px; font-weight: 900; letter-spacing: -0.05em;
            color: var(--primary); padding: 0 20px; margin-bottom: 32px;
            white-space: nowrap; width: 100%; text-decoration: none;
        }
        :where(body[data-page="user-profile"]) .sidebar-logo img { flex-shrink: 0; }
        :where(body[data-page="user-profile"]) .sidebar-logo span { opacity: 0; transition: opacity 0.2s, transform 0.2s; transform: translateX(-10px); }
        :where(body[data-page="user-profile"]) .sidebar:hover .sidebar-logo span { opacity: 1; transform: translateX(0); }
        :where(body[data-page="user-profile"]) .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 10px; }
        :where(body[data-page="user-profile"]) .sidebar-link {
            display: flex; align-items: center; gap: 14px; padding: 12px 14px;
            border-radius: 8px; color: #697371; font-size: 14px; font-weight: 700;
            text-decoration: none; white-space: nowrap; transition: all 0.2s;
        }
        :where(body[data-page="user-profile"]) .sidebar-link:hover, :where(body[data-page="user-profile"]) .sidebar-link.active { background: #eef0ff; color: var(--primary); }
        :where(body[data-page="user-profile"]) .sidebar-link svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="user-profile"]) .sidebar-link span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="user-profile"]) .sidebar:hover .sidebar-link span { opacity: 1; }
        :where(body[data-page="user-profile"]) .sidebar-back {
            display: flex; align-items: center; gap: 14px; padding: 12px 14px;
            border-radius: 8px; color: #697371; font-size: 14px; font-weight: 700;
            white-space: nowrap; transition: all 0.2s; cursor: pointer;
            border: none; background: transparent; width: 100%;
        }
        :where(body[data-page="user-profile"]) .sidebar-back:hover { background: #eceee6; color: var(--text); }
        :where(body[data-page="user-profile"]) .sidebar-back svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="user-profile"]) .sidebar-back span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="user-profile"]) .sidebar:hover .sidebar-back span { opacity: 1; }
        :where(body[data-page="user-profile"]) .sidebar-bottom { width: 100%; padding: 0 10px; display: flex; flex-direction: column; gap: 6px; }
        :where(body[data-page="user-profile"]) .sidebar-btn {
            display: flex; align-items: center; gap: 12px; padding: 12px 14px;
            border-radius: 8px; font-size: 14px; font-weight: 700; white-space: nowrap;
            cursor: pointer; border: none; transition: all 0.2s; width: 100%;
            background: transparent; color: #ef4444;
        }
        :where(body[data-page="user-profile"]) .sidebar-btn:hover { background: #fff1f2; }
        :where(body[data-page="user-profile"]) .sidebar-btn svg { flex-shrink: 0; width: 20px; height: 20px; }
        :where(body[data-page="user-profile"]) .sidebar-btn span { opacity: 0; transition: opacity 0.2s; }
        :where(body[data-page="user-profile"]) .sidebar:hover .sidebar-btn span { opacity: 1; }

        /* ── Bottom Nav ── */
        :where(body[data-page="user-profile"]) .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-height);
            background: rgba(255,255,255,0.95); backdrop-filter: blur(16px);
            border-top: 1px solid rgba(221,226,220,0.8);
            display: flex; justify-content: space-around; align-items: center; z-index: 100;
            padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 24px rgba(0,0,0,0.04);
        }
        @media (min-width: 768px) { :where(body[data-page="user-profile"]) .bottom-nav { display: none; } }
        :where(body[data-page="user-profile"]) .bottom-nav-item {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            flex: 1; height: 100%; gap: 5px; color: #8b9390; text-decoration: none;
            position: relative; transition: color 0.3s; border: none; background: transparent; cursor: pointer;
        }
        :where(body[data-page="user-profile"]) .bottom-nav-item.active { color: var(--primary); }
        :where(body[data-page="user-profile"]) .bottom-nav-item svg { width: 22px; height: 22px; transition: transform 0.3s; }
        :where(body[data-page="user-profile"]) .bottom-nav-item.active svg { transform: translateY(-2px); stroke-width: 2.5; }
        :where(body[data-page="user-profile"]) .bottom-nav-item span { font-size: 10px; font-weight: 700; }
        :where(body[data-page="user-profile"]) .bottom-nav-indicator {
            position: absolute; top: 0; width: 32px; height: 3px;
            background: var(--primary); border-radius: 0 0 4px 4px;
            opacity: 0; transform: scaleX(0); transition: opacity 0.3s, transform 0.3s;
        }
        :where(body[data-page="user-profile"]) .bottom-nav-item.active .bottom-nav-indicator { opacity: 1; transform: scaleX(1); }

        /* ── Layout ── */
        :where(body[data-page="user-profile"]) .main-content { max-width: 100%; margin: 0 auto; padding: 36px 24px 80px; }

        /* ── Profile / QR layout ── */
        @media (min-width: 900px) {
            :where(body[data-page="user-profile"]) .main-content {
                padding: 28px 28px 40px;
            }
            :where(body[data-page="user-profile"]) .desktop-grid {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 24px;
                align-items: start;
                transition: grid-template-columns 0.35s ease;
            }
            :where(body[data-page="user-profile"]) .desktop-grid.qr-open {
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            }
            :where(body[data-page="user-profile"]) .desktop-left {
                min-width: 0;
                display: flex;
                flex-direction: column;
            }
            :where(body[data-page="user-profile"]) .desktop-left .logout-btn {
                margin-top: auto;
                margin-bottom: 0;
            }
            :where(body[data-page="user-profile"]) .desktop-left #analyticsCard,
            :where(body[data-page="user-profile"]) .desktop-left #sorovlarCard {
                min-height: 80px;
            }
            :where(body[data-page="user-profile"]) .desktop-right {
                display: none;
                flex-direction: column;
                min-width: 0;
            }
            :where(body[data-page="user-profile"]) .desktop-grid.qr-open .desktop-right {
                display: flex;
            }
        }
        :where(body[data-page="user-profile"]) .projects-full {
            margin-top: 24px;
        }
        @media (max-width: 899px) {
            :where(body[data-page="user-profile"]) .desktop-grid { display: block; }
            :where(body[data-page="user-profile"]) .desktop-right { display: none; margin-top: 20px; }
            :where(body[data-page="user-profile"]) .desktop-grid.qr-open .desktop-right { display: block; }
        }

        /* ── Profile card — compact for left col ── */
        :where(body[data-page="user-profile"]) .profile-card {
            background: white;
            border-radius: 8px;
            border: 1px solid var(--border);
            padding: 24px 28px;
            margin-bottom: 20px;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.02);
            animation: fadeUp 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
        }

        /* Chap: avatar */
        :where(body[data-page="user-profile"]) .avatar-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            align-self: stretch;
            justify-content: center;
            gap: 10px;
            flex-shrink: 0;
        }
        :where(body[data-page="user-profile"]) .avatar-container {
            width: 88px;
            height: 88px;
            border-radius: 50%;
            border: 3px solid #dde2dc;
            padding: 3px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            cursor: pointer;
            transition: border-color 0.2s;
        }
        :where(body[data-page="user-profile"]) .avatar-container:hover { border-color: var(--primary); }
        :where(body[data-page="user-profile"]) .avatar-inner {
            width: 100%; height: 100%; border-radius: 50%;
            overflow: hidden; background: #f4f5f0; position: relative;
        }
        :where(body[data-page="user-profile"]) .avatar-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
        :where(body[data-page="user-profile"]) .avatar-overlay {
            position: absolute; inset: 0; background: rgba(56,84,232,0.75);
            display: flex; align-items: center; justify-content: center;
            opacity: 0; transition: opacity 0.2s; border-radius: 50%;
        }
        :where(body[data-page="user-profile"]) .avatar-container:hover .avatar-overlay { opacity: 1; }

        /* O'rta: info — FLEX:1 to take remaining space */
        :where(body[data-page="user-profile"]) .profile-info-mid {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 4px;
        }
        :where(body[data-page="user-profile"]) .profile-brand {
            display: flex; align-items: center; gap: 8px;
            font-size: 12px; font-weight: 900; color: var(--primary);
            margin-bottom: 8px; letter-spacing: 0.05em; text-transform: uppercase;
        }
        :where(body[data-page="user-profile"]) .profile-name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
        :where(body[data-page="user-profile"]) .profile-name { font-size: 24px; font-weight: 900; color: #101615; letter-spacing: -0.5px; }
        :where(body[data-page="user-profile"]) .edit-btn {
            background: none; border: none; cursor: pointer; color: #8b9390;
            display: none; align-items: center; justify-content: center;
            padding: 6px; border-radius: 8px; transition: all 0.2s;
        }
        :where(body[data-page="user-profile"]) .edit-btn:hover { color: var(--primary); background: #eef0ff; }
        :where(body[data-page="user-profile"]) .profile-subtitle { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
        :where(body[data-page="user-profile"]) .profile-actions-row {
            display: flex; align-items: stretch; gap: 10px;
            width: 100%; max-width: 390px;
        }
        :where(body[data-page="user-profile"]) .profile-actions-row #ownerActions { flex: 1; min-width: 0; }
        :where(body[data-page="user-profile"]) .profile-actions-row #ownerActions .btn-primary { width: 100%; justify-content: center; }
        :where(body[data-page="user-profile"]) .qr-toggle-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            flex: 1; width: auto; min-height: 40px; padding: 10px 15px;
            border: 1.5px solid #cfd6ff; border-radius: 8px;
            background: #eef0ff; color: var(--primary);
            font-family: inherit; font-size: 12px; font-weight: 900;
            cursor: pointer; transition: all 0.2s;
        }
        :where(body[data-page="user-profile"]) .qr-toggle-btn:hover { background: #e6eaff; border-color: var(--primary); transform: translateY(-1px); }
        :where(body[data-page="user-profile"]) .qr-toggle-btn[aria-expanded="true"] { background: var(--primary); border-color: var(--primary); color: white; }
        :where(body[data-page="user-profile"]) .qr-toggle-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

        /* O'ng: QR — desktop da ko'rinmaydi, alohida katta cardda */

        /* ── QR CARD — o'ng kolonna ── */
        :where(body[data-page="user-profile"]) .qr-main-card {
            background: white;
            border-radius: 10px;
            border: 1px solid var(--border);
            padding: 24px 20px;
            animation: fadeUp 0.6s 0.08s cubic-bezier(0.34,1.56,0.64,1) both;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
        }
        :where(body[data-page="user-profile"]) .qr-card-header {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }
        :where(body[data-page="user-profile"]) .qr-card-title {
            font-size: 13px; font-weight: 900; color: var(--text);
            text-transform: uppercase; letter-spacing: 0.08em;
            display: flex; align-items: center; gap: 8px;
        }
        :where(body[data-page="user-profile"]) .qr-card-title-dot {
            width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
        }
        :where(body[data-page="user-profile"]) .qr-card-subtitle {
            font-size: 11px; font-weight: 600; color: var(--muted);
        }

        /* Katta QR box — DOIM KVADRAT */
        :where(body[data-page="user-profile"]) .qr-big-wrap {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        :where(body[data-page="user-profile"]) .qr-big-box {
            background: white;
            border: 2.5px solid #dde2dc;
            border-radius: 10px;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: border-color 0.25s, box-shadow 0.25s;
            overflow: hidden;
        }
        :where(body[data-page="user-profile"]) .qr-big-box:hover {
            border-color: var(--primary);
            box-shadow: 0 8px 32px rgba(56,84,232,0.13);
        }
        :where(body[data-page="user-profile"]) #qrCanvasBig {
            position: relative;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        :where(body[data-page="user-profile"]) #qrCanvasBig canvas,
        :where(body[data-page="user-profile"]) #qrCanvasBig img {
            display: block !important;
            border-radius: 4px;
        }

        /* QR Logo editor */
        :where(body[data-page="user-profile"]) .qr-logo-editor {
            width: 100%;
            background: #f4f5f0;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            padding: 16px 18px;
            margin-bottom: 16px;
        }
        :where(body[data-page="user-profile"]) .qr-logo-editor-title {
            font-size: 10px; font-weight: 900; color: var(--muted);
            text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px;
            display: flex; align-items: center; gap: 6px;
        }
        :where(body[data-page="user-profile"]) .qr-logo-editor-title svg { color: var(--primary); }
        :where(body[data-page="user-profile"]) .qr-logo-tabs {
            display: flex; gap: 6px; margin-bottom: 12px;
        }
        :where(body[data-page="user-profile"]) .qr-logo-tab {
            flex: 1; padding: 7px 10px; border-radius: 8px;
            border: 1.5px solid transparent; background: white;
            font-size: 11px; font-weight: 800; cursor: pointer;
            transition: all 0.2s; font-family: inherit; color: var(--muted);
            display: flex; align-items: center; justify-content: center; gap: 5px;
        }
        :where(body[data-page="user-profile"]) .qr-logo-tab.active { border-color: var(--primary); color: var(--primary); background: #eef0ff; }
        :where(body[data-page="user-profile"]) .qr-logo-tab:not(.active):hover { background: #eceee6; color: var(--text); }
        :where(body[data-page="user-profile"]) .qr-logo-tab svg { width: 13px; height: 13px; }

        :where(body[data-page="user-profile"]) .qr-url-input-wrap { display: flex; gap: 8px; align-items: center; }
        :where(body[data-page="user-profile"]) .qr-url-input {
            flex: 1; background: white; border: 1.5px solid #dde2dc;
            border-radius: 10px; padding: 9px 13px;
            font-family: inherit; font-weight: 600; font-size: 12px; color: var(--text);
            outline: none; transition: all 0.2s;
        }
        :where(body[data-page="user-profile"]) .qr-url-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(56,84,232,0.1); }
        :where(body[data-page="user-profile"]) .qr-url-input::placeholder { color: #c3c9c0; }
        :where(body[data-page="user-profile"]) .qr-url-apply {
            padding: 9px 14px; border-radius: 10px; border: none;
            background: var(--primary); color: white;
            font-size: 11px; font-weight: 800; cursor: pointer;
            transition: all 0.2s; font-family: inherit; white-space: nowrap;
        }
        :where(body[data-page="user-profile"]) .qr-url-apply:hover { background: var(--primary-dark); transform: translateY(-1px); }

        /* QR Actions row */
        :where(body[data-page="user-profile"]) .qr-actions-row {
            width: 100%;
            display: flex;
            gap: 8px;
            margin-bottom: 0;
        }
        :where(body[data-page="user-profile"]) .qr-action-btn {
            flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
            padding: 11px 14px; border-radius: 10px;
            border: 1.5px solid #dde2dc; background: white;
            font-size: 11px; font-weight: 800; color: #697371;
            cursor: pointer; transition: all 0.2s; font-family: inherit;
            white-space: nowrap;
        }
        :where(body[data-page="user-profile"]) .qr-action-btn:hover { border-color: var(--primary); color: var(--primary); background: #eef0ff; }
        :where(body[data-page="user-profile"]) .qr-action-btn.primary-btn {
            background: var(--primary); color: white; border-color: var(--primary);
        }
        :where(body[data-page="user-profile"]) .qr-action-btn.primary-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
        :where(body[data-page="user-profile"]) .qr-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

        /* QR size slider row */
        :where(body[data-page="user-profile"]) .qr-size-row {
            width: 100%;
            display: flex; align-items: center; gap: 10px;
            margin-bottom: 14px; padding: 0 2px;
        }
        :where(body[data-page="user-profile"]) .qr-size-label { font-size: 10px; font-weight: 800; color: var(--muted); white-space: nowrap; }
        :where(body[data-page="user-profile"]) .qr-size-slider {
            flex: 1;
            -webkit-appearance: none; appearance: none;
            height: 4px; border-radius: 4px;
            background: #dde2dc; outline: none; cursor: pointer;
        }
        :where(body[data-page="user-profile"]) .qr-size-slider::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none;
            width: 16px; height: 16px; border-radius: 50%;
            background: var(--primary); cursor: pointer;
            box-shadow: 0 2px 8px rgba(56,84,232,0.35);
        }
        :where(body[data-page="user-profile"]) .qr-size-val { font-size: 11px; font-weight: 900; color: var(--primary); min-width: 38px; text-align: right; }

        /* QR URL display */
        :where(body[data-page="user-profile"]) .qr-url-display {
            width: 100%;
            background: #f4f5f0;
            border: 1.5px solid var(--border);
            border-radius: 10px;
            padding: 10px 14px;
            margin-bottom: 14px;
        }
        :where(body[data-page="user-profile"]) .qr-url-display-label {
            font-size: 10px; font-weight: 800; color: var(--muted);
            text-transform: uppercase; letter-spacing: 0.08em;
            display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
        }
        :where(body[data-page="user-profile"]) .qr-url-display-val {
            font-size: 11px; font-weight: 600; color: #4d5654;
            word-break: break-all; line-height: 1.5;
        }

        /* QR Divider */
        :where(body[data-page="user-profile"]) .qr-divider {
            width: 100%; height: 1px;
            background: var(--border);
            margin: 14px 0;
        }

        /* QR Color row */
        :where(body[data-page="user-profile"]) .qr-color-row {
            width: 100%;
            display: flex; align-items: center; gap: 12px;
            margin-bottom: 0;
        }
        :where(body[data-page="user-profile"]) .qr-color-presets {
            display: flex; gap: 7px; align-items: center;
        }
        :where(body[data-page="user-profile"]) .qr-color-dot {
            width: 22px; height: 22px; border-radius: 50%;
            border: 2.5px solid transparent; cursor: pointer;
            transition: all 0.2s; padding: 0;
            outline: none;
        }
        :where(body[data-page="user-profile"]) .qr-color-dot:hover { transform: scale(1.15); }
        :where(body[data-page="user-profile"]) .qr-color-dot.active {
            border-color: white;
            box-shadow: 0 0 0 2.5px var(--primary), 0 2px 8px rgba(0,0,0,0.15);
        }

        /* QR Tip */
        :where(body[data-page="user-profile"]) .qr-tip {
            width: 100%;
            display: flex; align-items: center; gap: 7px;
            font-size: 11px; font-weight: 600; color: #8b9390;
            margin-top: 14px;
            padding: 10px 14px;
            background: #f4f5f0; border-radius: 10px;
            border: 1.5px solid var(--border);
        }
        :where(body[data-page="user-profile"]) .qr-tip svg { flex-shrink: 0; color: var(--primary); }

        /* Eski kichik QR yashirilgan: endi QR tugma orqali katta kartada ochiladi */
        :where(body[data-page="user-profile"]) .qr-section {
            flex-shrink: 0;
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            width: 130px;
        }
        @media (max-width: 899px) {
            :where(body[data-page="user-profile"]) .qr-section { display: none; }
            :where(body[data-page="user-profile"]) .qr-main-card { display: flex; width: 100%; }
        }
        @media (min-width: 900px) {
            :where(body[data-page="user-profile"]) .qr-section { display: none !important; }
            :where(body[data-page="user-profile"]) .qr-main-card { display: flex; width: 100%; }
        }
        :where(body[data-page="user-profile"]) .qr-box {
            background: white;
            border: 2px solid #dde2dc;
            border-radius: 8px;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: border-color 0.2s, box-shadow 0.2s;
            width: 110px;
            height: 110px;
            overflow: hidden;
        }
        :where(body[data-page="user-profile"]) .qr-box:hover { border-color: var(--primary); box-shadow: 0 4px 20px rgba(56,84,232,0.12); }
        :where(body[data-page="user-profile"]) #qrCanvas {
            width: 94px !important;
            height: 94px !important;
            position: relative;
            flex-shrink: 0;
        }
        :where(body[data-page="user-profile"]) #qrCanvas canvas,
        :where(body[data-page="user-profile"]) #qrCanvas img {
            display: block !important;
            width: 94px !important;
            height: 94px !important;
            border-radius: 3px;
        }
        :where(body[data-page="user-profile"]) .qr-label {
            font-size: 10px; font-weight: 800; color: #8b9390;
            text-transform: uppercase; letter-spacing: 0.1em; text-align: center;
        }
        :where(body[data-page="user-profile"]) .qr-size-ctrl { display: none; }
        :where(body[data-page="user-profile"]) .qr-download { display: none; }

        /* Mobil: vertikal stack */
        @media (max-width: 640px) {
            :where(body[data-page="user-profile"]) .profile-card {
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 20px 16px;
                gap: 14px;
            }
            :where(body[data-page="user-profile"]) .profile-info-mid { align-items: center; }
            :where(body[data-page="user-profile"]) .profile-name-row { justify-content: center; }
            :where(body[data-page="user-profile"]) .profile-actions-row { max-width: 100%; }
            :where(body[data-page="user-profile"]) .qr-toggle-btn { width: auto; }
            :where(body[data-page="user-profile"]) .avatar-container { width: 80px; height: 80px; }
            :where(body[data-page="user-profile"]) .qr-section { display: none; width: 100%; }
            :where(body[data-page="user-profile"]) .qr-box { width: 110px; height: 110px; }
            :where(body[data-page="user-profile"]) #qrCanvas { width: 90px !important; height: 90px !important; }
            :where(body[data-page="user-profile"]) #qrCanvas canvas, :where(body[data-page="user-profile"]) #qrCanvas img { width: 90px !important; height: 90px !important; }
        }

        /* ── Stats ── */
        :where(body[data-page="user-profile"]) .stats-row {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 12px; margin-bottom: 20px;
            animation: fadeUp 0.6s 0.1s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        :where(body[data-page="user-profile"]) .stat-card { background: white; border-radius: 8px; border: 1px solid var(--border); padding: 20px; text-align: center; }
        :where(body[data-page="user-profile"]) .stat-num { font-size: 28px; font-weight: 900; color: var(--text); }
        :where(body[data-page="user-profile"]) .stat-label { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }

        :where(body[data-page="user-profile"]) .analytics-card {
            background: var(--primary); border-radius: 8px; padding: 18px 20px;
            margin-bottom: 12px; cursor: pointer; text-decoration: none;
            display: flex; align-items: center; justify-content: space-between;
            position: relative; overflow: hidden;
            animation: fadeUp 0.6s 0.12s cubic-bezier(0.34,1.56,0.64,1) both;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        :where(body[data-page="user-profile"]) .analytics-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(56,84,232,0.35); }
        :where(body[data-page="user-profile"]) .analytics-card::before { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.06); top: -40px; right: -20px; }
        :where(body[data-page="user-profile"]) .analytics-card-left { position: relative; z-index: 1; }
        :where(body[data-page="user-profile"]) .analytics-card-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
        :where(body[data-page="user-profile"]) .analytics-card-title { font-size: 15px; font-weight: 900; color: white; }
        :where(body[data-page="user-profile"]) .analytics-card-sub { font-size: 11px; color: rgba(255,255,255,0.65); font-weight: 600; margin-top: 2px; }
        :where(body[data-page="user-profile"]) .analytics-card-arrow { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; flex-shrink: 0; }

        /* ── Logout ── */
        :where(body[data-page="user-profile"]) .logout-btn {
            display: flex; align-items: center; gap: 10px;
            padding: 14px 20px; border-radius: 8px;
            border: 1.5px solid #fecaca; background: #fff5f5;
            font-size: 14px; font-weight: 800; color: #ef4444;
            cursor: pointer; transition: all 0.2s; width: 100%;
            font-family: inherit; margin-bottom: 20px;
            animation: fadeUp 0.6s 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        :where(body[data-page="user-profile"]) .logout-btn:hover { background: #fee2e2; border-color: #ef4444; transform: translateY(-1px); }
        :where(body[data-page="user-profile"]) .logout-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

        :where(body[data-page="user-profile"]) .projects-section { animation: fadeUp 0.6s 0.2s cubic-bezier(0.34,1.56,0.64,1) both; }
        :where(body[data-page="user-profile"]) .project-card { background: white; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s; cursor: pointer; }
        :where(body[data-page="user-profile"]) .project-card:hover { transform: translateY(-4px); border-color: #cfd6ff; box-shadow: 0 16px 40px -12px rgba(56,84,232,0.15); }

        /* Loyihalar gridi — full kenglik, max 5 ta */
        :where(body[data-page="user-profile"]) #userProjectsGrid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
        }
        @media (max-width: 1100px) {
            :where(body[data-page="user-profile"]) #userProjectsGrid { grid-template-columns: repeat(4, 1fr); }
        }
        @media (max-width: 899px) {
            :where(body[data-page="user-profile"]) #userProjectsGrid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
        }
        @media (max-width: 600px) {
            :where(body[data-page="user-profile"]) #userProjectsGrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
        }

        :where(body[data-page="user-profile"]) .btn-primary {
            background: var(--primary); color: white; padding: 12px 24px; border-radius: 8px;
            font-weight: 800; font-size: 14px; border: none; cursor: pointer; transition: all 0.3s;
            display: inline-flex; align-items: center; gap: 8px;
            text-decoration: none; white-space: nowrap; width: fit-content;
        }
        :where(body[data-page="user-profile"]) .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 8px 20px -4px rgba(56,84,232,0.4); }

        :where(body[data-page="user-profile"]) .modal-backdrop {
            position: fixed; inset: 0; background: rgba(16,22,21,0.5);
            backdrop-filter: blur(4px); z-index: 200;
            display: flex; align-items: center; justify-content: center;
            padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s;
        }
        :where(body[data-page="user-profile"]) .modal-backdrop.open { opacity: 1; pointer-events: all; }
        :where(body[data-page="user-profile"]) .modal {
            background: white; border-radius: 8px; padding: 28px;
            width: 100%; max-width: 460px;
            transform: translateY(20px) scale(0.97);
            transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
            max-height: 90vh; overflow-y: auto;
        }
        :where(body[data-page="user-profile"]) .modal-backdrop.open .modal { transform: translateY(0) scale(1); }
        :where(body[data-page="user-profile"]) .modal-title { font-size: 20px; font-weight: 900; margin-bottom: 20px; }
        :where(body[data-page="user-profile"]) .field-label { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; margin-left: 4px; }
        :where(body[data-page="user-profile"]) .field-input {
            width: 100%; background: #eceee6; border: 1.5px solid transparent;
            border-radius: 8px; padding: 13px 16px;
            font-family: inherit; font-weight: 700; font-size: 14px; color: var(--text);
            outline: none; transition: all 0.2s;
        }
        :where(body[data-page="user-profile"]) .field-input:focus { background: white; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(56,84,232,0.1); }
        :where(body[data-page="user-profile"]) .modal-btn-ghost {
            background: #eceee6; color: var(--muted); padding: 10px 20px; border-radius: 8px;
            font-weight: 800; font-size: 14px; border: none; cursor: pointer;
            transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; justify-content: center;
        }
        :where(body[data-page="user-profile"]) .modal-btn-ghost:hover { background: #dde2dc; color: var(--text); }
        :where(body[data-page="user-profile"]) .msg-box { padding: 12px 16px; border-radius: 8px; font-weight: 700; font-size: 13px; text-align: center; margin-top: 12px; }

        /* Site Switcher */
        :where(body[data-page="user-profile"]) .site-switcher{width:100%;padding:0 12px;flex-shrink:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-bottom .3s;}
        :where(body[data-page="user-profile"]) .sidebar:hover .site-switcher{max-height:60px;opacity:1;margin-bottom:16px;}
        :where(body[data-page="user-profile"]) .switcher-box{display:flex;background:#eceee6;border-radius:10px;padding:3px;gap:2px;}
        :where(body[data-page="user-profile"]) .sw-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-decoration:none;cursor:pointer;padding:6px 4px;transition:all .25s;white-space:nowrap;min-height:28px;}
        :where(body[data-page="user-profile"]) .sw-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0;}
        :where(body[data-page="user-profile"]) .sw-logo-gelica{filter:invert(28%) sepia(85%) saturate(2250%) hue-rotate(314deg) brightness(90%) contrast(92%);}
        :where(body[data-page="user-profile"]) .sw-text{font-size:12px;font-weight:800;letter-spacing:-.01em;}
        :where(body[data-page="user-profile"]) .sw-payable.sw-active{background:#eef0ff;}
        :where(body[data-page="user-profile"]) .sw-payable.sw-active .sw-text{color:#4b68ff;font-size:13px;}
        :where(body[data-page="user-profile"]) .sw-payable:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="user-profile"]) .sw-payable:not(.sw-active) .sw-logo{opacity:.4;}
        :where(body[data-page="user-profile"]) .sw-gelica.sw-active{background:#fdf2f8;}
        :where(body[data-page="user-profile"]) .sw-gelica.sw-active .sw-text{color:#ec4899;font-size:13px;}
        :where(body[data-page="user-profile"]) .sw-gelica:not(.sw-active) .sw-text{color:#8b9390;}
        :where(body[data-page="user-profile"]) .sw-gelica:not(.sw-active) .sw-logo{opacity:.4;}

/* ══ tema: 2026 ══ */
/* ==========================================================================
   PAYABLE — 2026 VISUAL SYSTEM
   Asosiy sahifa (index.html) uslubi. Bu fayl har bir sahifada </head> dan
   oldin, sahifaning o'z \3c style> bloklaridan KEYIN ulanadi — shuning uchun
   eski ko'k/oq dizayn ustidan yozadi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENLAR
   Eski sahifalardagi barcha o'zgaruvchi nomlari qayta e'lon qilinadi, shunda
   sahifaning o'z CSS'i yangi palitrani avtomatik oladi.
   -------------------------------------------------------------------------- */
:root:where(:has(body[data-theme~="2026"])) {
    --primary: #4b68ff;
    --primary-dark: #3854e8;
    --accent: #dfff56;
    --accent-dark: #d5f344;

    --ink: #101615;
    --panel: #151c1a;
    --panel-soft: #202826;

    --muted: #697371;
    --muted-soft: #8b9390;
    --line: #dde2dc;
    --paper: #f4f5f0;
    --surface: #ffffff;

    /* eski nomlar — moslik uchun */
    --bg: #f4f5f0;
    --text: #101615;
    --text-main: #101615;
    --border: #dde2dc;
    --blue: #4b68ff;
    --blue-dark: #3854e8;
    --blue-light: #eef0ff;
    --teal: #4b68ff;
    --teal-dark: #3854e8;

    --nav-height: 72px;
    --nav-h: 72px;
    --nh: 72px;
}

:where(html:has(body[data-theme~="2026"])), :where(body[data-theme~="2026"]), :where(body[data-theme~="2026"]) *, :where(html:has(body[data-theme~="2026"]))::before, :where(body[data-theme~="2026"])::before, :where(body[data-theme~="2026"]) *::before, :where(html:has(body[data-theme~="2026"]))::after, :where(body[data-theme~="2026"])::after, :where(body[data-theme~="2026"]) *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   2. ASOS — fon, shrift, tipografiya
   -------------------------------------------------------------------------- */
body:where([data-theme~="2026"]) {
    font-family: 'Manrope', 'Gilroy', 'Plus Jakarta Sans', sans-serif !important;
    background:
        radial-gradient(circle at 78% 6%, rgba(75, 104, 255, .09), transparent 27rem),
        var(--paper) !important;
    color: var(--ink);
}

/* Bo'shliqlar faqat chrome (sidebar / pastki nav) bor sahifalarda */
body:where([data-theme~="2026"]):has(.bottom-nav),
body:where([data-theme~="2026"]):has(.bnav) { padding-bottom: 94px; }

@media (min-width: 768px) {
    body:where([data-theme~="2026"]):has(.sidebar) {
        padding-left: 88px;
        padding-bottom: 0;
    }

    body:where([data-theme~="2026"]):has(.sidebar:hover) { padding-left: 248px !important; }
}

:where(body[data-theme~="2026"])::selection, :where(body[data-theme~="2026"]) *::selection { background: var(--accent); color: var(--ink); }

:where(body[data-theme~="2026"]) h1, :where(body[data-theme~="2026"]) h2, :where(body[data-theme~="2026"]) h3, :where(body[data-theme~="2026"]) .section-title, :where(body[data-theme~="2026"]) .brand-title {
    letter-spacing: -.055em;
    color: var(--ink);
}

:where(body[data-theme~="2026"]) h1 { letter-spacing: -.07em; }

/* --------------------------------------------------------------------------
   3. SIDEBAR (qora) — .sidebar-* va .sb-* nomlari
   -------------------------------------------------------------------------- */
:where(body[data-theme~="2026"]) .sidebar {
    width: 88px;
    padding: 26px 14px 18px;
    background: rgba(15, 21, 20, .97);
    border-right: 0;
    box-shadow: none;
    transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

:where(body[data-theme~="2026"]) .sidebar:hover { width: 248px; }

:where(body[data-theme~="2026"]) .sidebar-logo,
:where(body[data-theme~="2026"]) .sb-logo {
    gap: 13px;
    padding: 0 8px;
    margin-bottom: 30px;
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -.045em;
    text-decoration: none;
}

/* Logotip plitkasi — asosiy sahifadagi "P." belgisi */
:where(body[data-theme~="2026"]) .brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--accent);
    color: var(--ink);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.08em;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
}

:where(body[data-theme~="2026"]) .sidebar-logo .brand-mark,
:where(body[data-theme~="2026"]) .sb-logo .brand-mark { opacity: 1; transform: none; }

/* Agar sahifada hali <img> logotip bo'lsa — u ham plitkaga o'xshaydi */
:where(body[data-theme~="2026"]) .sidebar-logo > img,
:where(body[data-theme~="2026"]) .sb-logo > img {
    width: 44px;
    height: 44px;
    padding: 9px;
    border-radius: 14px;
    background: var(--accent);
    object-fit: contain;
    flex-shrink: 0;
}

:where(body[data-theme~="2026"]) .sidebar-logo > svg,
:where(body[data-theme~="2026"]) .sb-logo > svg { color: var(--accent); }

:where(body[data-theme~="2026"]) .sidebar-nav,
:where(body[data-theme~="2026"]) .sb-nav { gap: 7px; padding: 0; }

:where(body[data-theme~="2026"]) .sidebar-link,
:where(body[data-theme~="2026"]) .sb-link {
    position: relative;
    min-height: 52px;
    padding: 14px 18px;
    border-radius: 13px;
    gap: 17px;
    color: #8c9693;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

:where(body[data-theme~="2026"]) .sidebar-link:hover,
:where(body[data-theme~="2026"]) .sidebar-link.active,
:where(body[data-theme~="2026"]) .sb-link:hover,
:where(body[data-theme~="2026"]) .sb-link.active {
    background: var(--panel-soft);
    color: #fff;
}

:where(body[data-theme~="2026"]) .sidebar-link.active::before,
:where(body[data-theme~="2026"]) .sb-link.active::before {
    content: '';
    position: absolute;
    left: 5px;
    width: 3px;
    height: 20px;
    border-radius: 4px;
    background: var(--accent);
}

:where(body[data-theme~="2026"]) .sidebar-link svg,
:where(body[data-theme~="2026"]) .sb-link svg { width: 19px; height: 19px; }

:where(body[data-theme~="2026"]) .sidebar-bottom,
:where(body[data-theme~="2026"]) .sb-bottom { padding: 0; gap: 7px; display: flex; flex-direction: column; }

:where(body[data-theme~="2026"]) .sidebar-btn,
:where(body[data-theme~="2026"]) .sb-btn {
    min-height: 50px;
    padding: 13px 17px;
    border-radius: 12px;
    gap: 16px;
    font-size: 13px;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s;
}

/* Kirish tugmasi */
:where(body[data-theme~="2026"]) .sidebar-btn.signin,
:where(body[data-theme~="2026"]) .sb-btn.signin,
:where(body[data-theme~="2026"]) #sbSignin button {
    background: transparent !important;
    color: #aab3b0 !important;
}

:where(body[data-theme~="2026"]) .sidebar-btn.signin:hover,
:where(body[data-theme~="2026"]) .sb-btn.signin:hover,
:where(body[data-theme~="2026"]) #sbSignin button:hover {
    background: var(--panel-soft) !important;
    color: #fff !important;
}

/* A'zo bo'lish / Profil — asosiy sahifadagidek laym.
   id orqali nishonlanadi, chunki sahifalarda klass nomlari turlicha va
   inline style qo'llangan. */
:where(body[data-theme~="2026"]) .sidebar-btn.start,
:where(body[data-theme~="2026"]) .sb-btn.start,
:where(body[data-theme~="2026"]) #sbSignup button,
:where(body[data-theme~="2026"]) #sbProfile button {
    background: var(--accent) !important;
    color: var(--ink) !important;
    border-radius: 12px;
    box-shadow: none !important;
}

:where(body[data-theme~="2026"]) .sidebar-btn.start:hover,
:where(body[data-theme~="2026"]) .sb-btn.start:hover,
:where(body[data-theme~="2026"]) #sbSignup button:hover,
:where(body[data-theme~="2026"]) #sbProfile button:hover { background: var(--accent-dark) !important; }

/* Modifikatorsiz .sb-btn (chiqish tugmasi) o'z qizil rangini saqlaydi */
:where(body[data-theme~="2026"]) .sb-btn:not(.signin):not(.start):hover { background: rgba(239, 68, 68, .14) !important; }

/* pc.js qo'shadigan elementlar (inline style bilan) — laym rangga keltiriladi */
:where(body[data-theme~="2026"]) #_pc_profil {
    background: var(--accent) !important;
    color: var(--ink) !important;
}

:where(body[data-theme~="2026"]) #_pc_nb {
    background: var(--accent) !important;
    color: var(--ink) !important;
    box-shadow: 0 10px 28px rgba(13, 20, 18, .28) !important;
}

:where(body[data-theme~="2026"]) #_pc_nb svg { stroke: var(--ink) !important; }

/* --------------------------------------------------------------------------
   4. SAYT ALMASHTIRGICH (Payable / Gelica)
   -------------------------------------------------------------------------- */
:where(body[data-theme~="2026"]) .site-switcher { padding: 0; }

:where(body[data-theme~="2026"]) .switcher-box {
    background: var(--panel-soft);
    border-radius: 13px;
    padding: 4px;
}

:where(body[data-theme~="2026"]) .sw-payable.sw-active { background: var(--accent); }
:where(body[data-theme~="2026"]) .sw-payable.sw-active .sw-text { color: var(--ink); }
:where(body[data-theme~="2026"]) .sw-payable:not(.sw-active) .sw-text { color: #7f8986; }
:where(body[data-theme~="2026"]) .sw-gelica.sw-active { background: #2a2130; }
:where(body[data-theme~="2026"]) .sw-gelica:not(.sw-active) .sw-text { color: #7f8986; }

/* --------------------------------------------------------------------------
   5. PASTKI NAVIGATSIYA (suzuvchi qora panel) — .bottom-nav-* va .bnav-*
   -------------------------------------------------------------------------- */
:where(body[data-theme~="2026"]) .bottom-nav,
:where(body[data-theme~="2026"]) .bnav {
    position: fixed;
    height: var(--nav-height);
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(15, 21, 20, .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 40px rgba(13, 20, 18, .24);
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
}

@media (min-width: 768px) {
    :where(body[data-theme~="2026"]) .bottom-nav,
    :where(body[data-theme~="2026"]) .bnav { display: none; }
}

:where(body[data-theme~="2026"]) .bottom-nav-item,
:where(body[data-theme~="2026"]) .bnav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    gap: 4px;
    color: #7f8986;
    text-decoration: none;
}

:where(body[data-theme~="2026"]) .bottom-nav-item.active,
:where(body[data-theme~="2026"]) .bnav-item.active { color: #fff; }

:where(body[data-theme~="2026"]) .bottom-nav-item.active::after,
:where(body[data-theme~="2026"]) .bnav-item.active::after {
    content: '';
    position: absolute;
    bottom: 8px;
    width: 5px;
    height: 5px;
    border-radius: 99px;
    background: var(--accent);
}

:where(body[data-theme~="2026"]) .bottom-nav-indicator,
:where(body[data-theme~="2026"]) .bnav-dot { display: none !important; }

:where(body[data-theme~="2026"]) .bottom-nav-item span,
:where(body[data-theme~="2026"]) .bnav-item span { font-size: 9px; font-weight: 700; }

:where(body[data-theme~="2026"]) .bottom-nav-item svg,
:where(body[data-theme~="2026"]) .bnav-item svg { width: 21px; height: 21px; }

/* --------------------------------------------------------------------------
   6. HERO PANEL — sahifa sarlavhasi bloki (asosiy sahifadagi qora panel)
   -------------------------------------------------------------------------- */
:where(body[data-theme~="2026"]) .hero-gradient {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 0 !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 88% 0%, rgba(75, 104, 255, .9), transparent 31%),
        linear-gradient(135deg, #111817 0%, #101615 70%) !important;
    color: #fff !important;
    box-shadow: none !important;
}

:where(body[data-theme~="2026"]) .hero-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .13;
    background-image:
        linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to right, black, transparent 85%);
    mask-image: linear-gradient(to right, black, transparent 85%);
}

:where(body[data-theme~="2026"]) .hero-gradient h1,
:where(body[data-theme~="2026"]) .hero-gradient h2 {
    color: #fff !important;
    letter-spacing: -.075em;
    line-height: .98;
}

:where(body[data-theme~="2026"]) .hero-gradient .text-blue-600,
:where(body[data-theme~="2026"]) .hero-gradient .text-blue-500,
:where(body[data-theme~="2026"]) .hero-gradient .text-blue-400,
:where(body[data-theme~="2026"]) .hero-gradient h1 span,
:where(body[data-theme~="2026"]) .hero-gradient h2 span { color: var(--accent) !important; }

:where(body[data-theme~="2026"]) .hero-gradient .text-slate-900,
:where(body[data-theme~="2026"]) .hero-gradient .text-slate-800,
:where(body[data-theme~="2026"]) .hero-gradient .text-slate-700,
:where(body[data-theme~="2026"]) .hero-gradient strong,
:where(body[data-theme~="2026"]) .hero-gradient b { color: #fff !important; }

:where(body[data-theme~="2026"]) .hero-gradient p,
:where(body[data-theme~="2026"]) .hero-gradient .text-slate-500,
:where(body[data-theme~="2026"]) .hero-gradient .text-slate-400,
:where(body[data-theme~="2026"]) .hero-gradient .text-slate-300 { color: #aeb8b4 !important; }

/* Hero ichidagi raqamlar (statistika) */
:where(body[data-theme~="2026"]) .hero-gradient .font-black,
:where(body[data-theme~="2026"]) .hero-gradient .font-\[900\] { color: #fff !important; }

/* Hero ichidagi bezak ikonkalari */
:where(body[data-theme~="2026"]) .hero-gradient > i[data-lucide],
:where(body[data-theme~="2026"]) .hero-gradient .text-blue-100,
:where(body[data-theme~="2026"]) .hero-gradient .text-blue-200 { color: rgba(255, 255, 255, .07) !important; }

/* Hero ichidagi chegaralar */
:where(body[data-theme~="2026"]) .hero-gradient .border-white,
:where(body[data-theme~="2026"]) .hero-gradient .border-slate-100,
:where(body[data-theme~="2026"]) .hero-gradient .border-slate-200 { border-color: rgba(255, 255, 255, .14) !important; }

/* --------------------------------------------------------------------------
   6b. HERO YONIDAGI O'LCHOV BOKSLARI (asosiy sahifadagi uchta boksdan ikkitasi)
   -------------------------------------------------------------------------- */
:where(body[data-theme~="2026"]) .hero-side {
    display: grid;
    grid-template-rows: 1.15fr .85fr;
    gap: 14px;
}

:where(body[data-theme~="2026"]) .metric-card,
:where(body[data-theme~="2026"]) .mini-metrics {
    border: 1px solid rgba(16, 22, 21, .08);
    border-radius: 26px;
    background: var(--surface);
    overflow: hidden;
}

:where(body[data-theme~="2026"]) .metric-card {
    padding: 26px;
    display: flex;
    flex-direction: column;
    position: relative;
}

:where(body[data-theme~="2026"]) .metric-card::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: #edf0ff;
}

:where(body[data-theme~="2026"]) .metric-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

:where(body[data-theme~="2026"]) .metric-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

:where(body[data-theme~="2026"]) .trend-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eff8c9;
    color: #405000;
    font-size: 10px;
    font-weight: 800;
}

:where(body[data-theme~="2026"]) .metric-value { margin-top: auto; position: relative; z-index: 1; }
:where(body[data-theme~="2026"]) .metric-value strong { display: block; font-size: clamp(31px, 3.2vw, 52px); line-height: 1; letter-spacing: -.06em; color: var(--ink); }
:where(body[data-theme~="2026"]) .metric-value span { display: block; margin-top: 12px; color: #8b9390; font-size: 12px; font-weight: 600; }

:where(body[data-theme~="2026"]) .metric-graph {
    height: 58px;
    margin-top: 20px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    position: relative;
    z-index: 1;
}

:where(body[data-theme~="2026"]) .metric-graph i { flex: 1; min-width: 7px; border-radius: 4px 4px 2px 2px; background: #dbe0ff; }
:where(body[data-theme~="2026"]) .metric-graph i:nth-child(4n), :where(body[data-theme~="2026"]) .metric-graph i:nth-child(7n) { background: var(--primary); }

:where(body[data-theme~="2026"]) .mini-metrics { display: grid; grid-template-columns: 1fr 1fr; }

:where(body[data-theme~="2026"]) .mini-stat {
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

:where(body[data-theme~="2026"]) .mini-stat + .mini-stat { border-left: 1px solid var(--line); }

:where(body[data-theme~="2026"]) .mini-icon {
    width: 39px;
    height: 39px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: var(--ink);
    background: var(--accent);
}

:where(body[data-theme~="2026"]) .mini-stat:nth-child(2) .mini-icon { background: #e6eaff; color: var(--primary); }
:where(body[data-theme~="2026"]) .mini-stat strong { display: block; margin-top: 24px; font-size: clamp(27px, 2.5vw, 40px); line-height: 1; letter-spacing: -.05em; color: var(--ink); }
:where(body[data-theme~="2026"]) .mini-stat p { margin-top: 8px; color: var(--muted); font-size: 11px; font-weight: 700; }

@media (max-width: 920px) {
    :where(body[data-theme~="2026"]) .hero-side { grid-template-columns: 1.2fr .8fr; grid-template-rows: none; }
    :where(body[data-theme~="2026"]) .hero-side, :where(body[data-theme~="2026"]) .metric-card, :where(body[data-theme~="2026"]) .mini-metrics { min-width: 0; width: 100%; }
}

@media (max-width: 767px) {
    :where(body[data-theme~="2026"]) .hero-side { grid-template-columns: 1fr; }
    :where(body[data-theme~="2026"]) .metric-card, :where(body[data-theme~="2026"]) .mini-metrics { border-radius: 20px; }
    :where(body[data-theme~="2026"]) .metric-card { min-height: 250px; padding: 22px; }
    :where(body[data-theme~="2026"]) .metric-value strong { font-size: clamp(24px, 7.2vw, 31px); white-space: nowrap; }
    :where(body[data-theme~="2026"]) .mini-stat { padding: 18px; }
}

/* Xarita sahifasi sarlavhasi — boshqa sahifalardagidek qora panel */
:where(body[data-theme~="2026"]) .map-hero {
    padding: 24px 26px;
    margin-bottom: 14px;
}

:where(body[data-theme~="2026"]) .map-hero .page-head { margin-bottom: 18px; }
:where(body[data-theme~="2026"]) .map-hero .page-head h1 { color: #fff !important; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.05em; }
:where(body[data-theme~="2026"]) .map-hero .page-head p { color: #aeb8b4 !important; }

:where(body[data-theme~="2026"]) .map-hero .page-icon {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .14);
}

:where(body[data-theme~="2026"]) .map-hero .page-icon svg { stroke: var(--accent) !important; }

:where(body[data-theme~="2026"]) .map-hero .stat-card {
    background: rgba(255, 255, 255, .05) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

:where(body[data-theme~="2026"]) .map-hero .stat-val { color: #fff; }
:where(body[data-theme~="2026"]) .map-hero .stat-lbl { color: #79827f !important; }

@media (max-width: 767px) {
    :where(body[data-theme~="2026"]) .map-hero { padding: 18px 16px; }
}

/* Hero ortidagi eski foto fon olib tashlanadi — asosiy sahifadagidek
   hero qog'oz fonida yolg'iz qora panel bo'lib turadi. */
:where(body[data-theme~="2026"]) .explore-visual,
:where(body[data-theme~="2026"]) .creators-visual,
:where(body[data-theme~="2026"]) .stats-visual,
:where(body[data-theme~="2026"]) .support-visual {
    background-image: none !important;
    background-color: transparent !important;
}

/* freelance.html o'z hero'si — xuddi shu qora panelga keltiriladi */
:where(body[data-theme~="2026"]) .hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin: 14px 14px 0;
    border-radius: 26px;
    background:
        radial-gradient(circle at 88% 0%, rgba(75, 104, 255, .9), transparent 31%),
        linear-gradient(135deg, #111817 0%, #101615 70%) !important;
    color: #fff;
}

:where(body[data-theme~="2026"]) .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .13;
    background-image:
        linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to right, black, transparent 85%);
    mask-image: linear-gradient(to right, black, transparent 85%);
}

:where(body[data-theme~="2026"]) .hero .hero-title { color: #fff; letter-spacing: -.075em; line-height: .98; }
:where(body[data-theme~="2026"]) .hero .hero-sub { color: #aeb8b4; }
:where(body[data-theme~="2026"]) .hero .hero-badge { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: var(--accent); }
:where(body[data-theme~="2026"]) .hero .hs-num { color: #fff; }
:where(body[data-theme~="2026"]) .hero .hs-lbl { color: #79827f; }

/* Hero ichidagi tugmalar — asosiy sahifadagi juftlik: laym + shaffof */
:where(body[data-theme~="2026"]) .hero .btn-white {
    background: var(--accent) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}

:where(body[data-theme~="2026"]) .hero .btn-white:hover { background: var(--accent-dark) !important; }

:where(body[data-theme~="2026"]) .hero .btn-outline-w {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid #39413f !important;
    color: #fff !important;
}

:where(body[data-theme~="2026"]) .hero .btn-outline-w:hover { background: rgba(255, 255, 255, .08) !important; border-color: #69726f !important; }

/* Hero ichidagi inline-style havolalar ham ikkilamchi ko'rinishga keladi */
:where(body[data-theme~="2026"]) .hero .hero-actions > a {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid #39413f !important;
    color: #fff !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

:where(body[data-theme~="2026"]) .hero .hero-actions > a:hover {
    background: rgba(255, 255, 255, .08) !important;
    border-color: #69726f !important;
}

/* --------------------------------------------------------------------------
   7. YUZALAR VA KARTALAR
   -------------------------------------------------------------------------- */
:where(body[data-theme~="2026"]) .bento-card,
:where(body[data-theme~="2026"]) .scard,
:where(body[data-theme~="2026"]) .card,
:where(body[data-theme~="2026"]) .qr-main-card,
:where(body[data-theme~="2026"]) .msg-box,
:where(body[data-theme~="2026"]) .form-wrap {
    border-radius: 18px;
    border: 1px solid rgba(16, 22, 21, .08);
    background: var(--surface);
    box-shadow: none;
}

:where(body[data-theme~="2026"]) .bento-card:hover,
:where(body[data-theme~="2026"]) .scard:hover {
    transform: translateY(-5px);
    border-color: rgba(75, 104, 255, .32);
    box-shadow: 0 20px 46px rgba(20, 31, 27, .09);
}

:where(body[data-theme~="2026"]) .bento-card > div:first-child { border-radius: 13px; }

:where(body[data-theme~="2026"]) .glass-nav {
    background: rgba(244, 245, 240, .82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    border-radius: 16px;
}

:where(body[data-theme~="2026"]) .back-btn {
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-weight: 800;
    font-size: 12px;
    transition: background .2s, border-color .2s, transform .2s;
}

:where(body[data-theme~="2026"]) .back-btn:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* Modallar */
:where(body[data-theme~="2026"]) .modal,
:where(body[data-theme~="2026"]) .modal-box {
    border-radius: 22px;
    border: 1px solid rgba(16, 22, 21, .08);
    background: var(--surface);
    box-shadow: 0 30px 80px rgba(13, 20, 18, .28);
}

:where(body[data-theme~="2026"]) .modal-bg { background: rgba(12, 17, 16, .55); backdrop-filter: blur(6px); }
:where(body[data-theme~="2026"]) .modal-title { letter-spacing: -.045em; color: var(--ink); }

/* Toast */
:where(body[data-theme~="2026"]) .toast {
    border-radius: 14px;
    background: var(--ink);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 18px 40px rgba(13, 20, 18, .3);
    font-weight: 700;
}

/* Skeletonlar */
:where(body[data-theme~="2026"]) .skel,
:where(body[data-theme~="2026"]) .skeleton {
    background: linear-gradient(90deg, #eceee6 25%, #e3e6dd 37%, #eceee6 63%);
    border-radius: 12px;
}

:where(body[data-theme~="2026"]) .spinner { border-top-color: var(--primary) !important; }

/* --------------------------------------------------------------------------
   8. FORMALAR
   -------------------------------------------------------------------------- */
:where(body[data-theme~="2026"]) .input-pill,
:where(body[data-theme~="2026"]) .field-input,
:where(body[data-theme~="2026"]) .school-search,
:where(body[data-theme~="2026"]) .new-school-input,
:where(body[data-theme~="2026"]) .modal-select {
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #f7f8f5;
    color: var(--ink);
    font-family: inherit;
}

:where(body[data-theme~="2026"]) .input-pill:focus-within,
:where(body[data-theme~="2026"]) .field-input:focus,
:where(body[data-theme~="2026"]) .school-search:focus,
:where(body[data-theme~="2026"]) .new-school-input:focus,
:where(body[data-theme~="2026"]) .modal-select:focus {
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(75, 104, 255, .12);
    outline: 0;
}

:where(body[data-theme~="2026"]) .field-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

:where(body[data-theme~="2026"]) input, :where(body[data-theme~="2026"]) textarea, :where(body[data-theme~="2026"]) select { font-family: inherit; }

:where(body[data-theme~="2026"]) input::placeholder,
:where(body[data-theme~="2026"]) textarea::placeholder { color: #9ba3a0; }

:where(body[data-theme~="2026"]) .custom-select-wrap select {
    min-width: 154px;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 13px 38px 13px 15px;
    background: #f7f8f5;
    color: #3b4442;
    font-size: 11px;
    font-weight: 700;
}

:where(body[data-theme~="2026"]) .custom-select-wrap select:hover,
:where(body[data-theme~="2026"]) .custom-select-wrap select:focus {
    border-color: #b7c1bc;
    box-shadow: none;
}

:where(body[data-theme~="2026"]) .custom-select-wrap .select-arrow { color: var(--muted); }

/* --------------------------------------------------------------------------
   9. TUGMALAR
   -------------------------------------------------------------------------- */
/* Asosiy harakat tugmasi — asosiy sahifadagidek laym rangda */
:where(body[data-theme~="2026"]) .btn-primary,
:where(body[data-theme~="2026"]) .btn-submit,
:where(body[data-theme~="2026"]) .btn-post,
:where(body[data-theme~="2026"]) .btn-confirm,
:where(body[data-theme~="2026"]) .btn-next,
:where(body[data-theme~="2026"]) .form-btn,
:where(body[data-theme~="2026"]) .primary-btn,
:where(body[data-theme~="2026"]) .send-btn,
:where(body[data-theme~="2026"]) .empty-btn,
:where(body[data-theme~="2026"]) .edit-save,
:where(body[data-theme~="2026"]) .j-apply,
:where(body[data-theme~="2026"]) .fl-btn,
:where(body[data-theme~="2026"]) .qr-url-apply,
:where(body[data-theme~="2026"]) .add-school-btn,
:where(body[data-theme~="2026"]) .modal-btn.primary {
    border-radius: 12px;
    background: var(--accent) !important;
    color: var(--ink) !important;
    border: 0;
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow: none !important;
    transition: background .2s, transform .2s;
}

:where(body[data-theme~="2026"]) .btn-primary:hover,
:where(body[data-theme~="2026"]) .btn-submit:hover,
:where(body[data-theme~="2026"]) .btn-post:hover,
:where(body[data-theme~="2026"]) .btn-confirm:hover,
:where(body[data-theme~="2026"]) .btn-next:hover,
:where(body[data-theme~="2026"]) .form-btn:hover,
:where(body[data-theme~="2026"]) .primary-btn:hover,
:where(body[data-theme~="2026"]) .send-btn:hover,
:where(body[data-theme~="2026"]) .empty-btn:hover,
:where(body[data-theme~="2026"]) .edit-save:hover,
:where(body[data-theme~="2026"]) .j-apply:hover,
:where(body[data-theme~="2026"]) .fl-btn:hover,
:where(body[data-theme~="2026"]) .qr-url-apply:hover,
:where(body[data-theme~="2026"]) .add-school-btn:hover,
:where(body[data-theme~="2026"]) .modal-btn.primary:hover {
    background: var(--accent-dark) !important;
    transform: translateY(-2px);
}

/* Laym tugmalar ichidagi ikonka va matn siyoh rangida */
:where(body[data-theme~="2026"]) .btn-primary svg, :where(body[data-theme~="2026"]) .btn-submit svg, :where(body[data-theme~="2026"]) .form-btn svg, :where(body[data-theme~="2026"]) .primary-btn svg, :where(body[data-theme~="2026"]) .send-btn svg, :where(body[data-theme~="2026"]) .btn-post svg, :where(body[data-theme~="2026"]) .btn-confirm svg, :where(body[data-theme~="2026"]) .btn-next svg, :where(body[data-theme~="2026"]) .empty-btn svg, :where(body[data-theme~="2026"]) .edit-save svg, :where(body[data-theme~="2026"]) .fl-btn svg, :where(body[data-theme~="2026"]) .j-apply svg { color: var(--ink); }

:where(body[data-theme~="2026"]) .primary-cta {
    border-radius: 12px;
    background: var(--accent);
    color: var(--ink);
    font-weight: 800;
}

:where(body[data-theme~="2026"]) .primary-cta:hover { background: #e8ff81; transform: translateY(-2px); }

:where(body[data-theme~="2026"]) .secondary-cta {
    border-radius: 12px;
    color: #fff;
    border: 1px solid #39413f;
    background: rgba(255, 255, 255, .04);
}

:where(body[data-theme~="2026"]) .secondary-cta:hover { border-color: #69726f; background: rgba(255, 255, 255, .08); }

:where(body[data-theme~="2026"]) .type-btn,
:where(body[data-theme~="2026"]) .choice-btn {
    border-radius: 13px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-weight: 700;
    transition: border-color .2s, background .2s, transform .2s;
}

:where(body[data-theme~="2026"]) .type-btn:hover,
:where(body[data-theme~="2026"]) .choice-btn:hover,
:where(body[data-theme~="2026"]) .type-btn.active,
:where(body[data-theme~="2026"]) .choice-btn.active {
    border-color: var(--primary);
    background: #eef0ff;
}

:where(body[data-theme~="2026"]) .skip-link { color: var(--muted); font-weight: 700; }
:where(body[data-theme~="2026"]) .skip-link:hover { color: var(--primary); }

/* --------------------------------------------------------------------------
   10. BO'LIM SARLAVHALARI VA MATN HAVOLALARI (asosiy sahifa primitivlari)
   -------------------------------------------------------------------------- */
:where(body[data-theme~="2026"]) .page-shell { max-width: 1680px; margin: 0 auto; padding: 24px 28px 0; }

:where(body[data-theme~="2026"]) .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: #bcc4c1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

:where(body[data-theme~="2026"]) .eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--accent);
    box-shadow: 0 0 0 5px rgba(223, 255, 86, .12);
}

:where(body[data-theme~="2026"]) .section-block { margin-bottom: 92px; }

:where(body[data-theme~="2026"]) .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 2px 30px;
}

:where(body[data-theme~="2026"]) .section-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

:where(body[data-theme~="2026"]) .section-title {
    margin: 0;
    font-size: clamp(27px, 3vw, 42px);
    line-height: 1.08;
    letter-spacing: -.055em;
    font-weight: 700;
}

:where(body[data-theme~="2026"]) .section-description { max-width: 430px; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

:where(body[data-theme~="2026"]) .text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
}

:where(body[data-theme~="2026"]) .text-link .arrow-box {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    transition: transform .2s, background .2s;
}

:where(body[data-theme~="2026"]) .text-link:hover .arrow-box { transform: translateX(3px); background: var(--primary); }

/* --------------------------------------------------------------------------
   10b. IJODKORLAR TO'RI (bento) — asosiy sahifadagi karusel o'rniga
   Birinchi karta 2x2 bo'lib kattalashadi, qolgan 4 tasi yonida turadi.
   Kartalar vaqti-vaqti bilan yangilanadi (is-leaving / is-entering).
   -------------------------------------------------------------------------- */
:where(body[data-theme~="2026"]) .dev-track-wrapper {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

:where(body[data-theme~="2026"]) .dev-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 190px);
    gap: 14px;
    width: 100%;
    padding: 0;
    animation: none;
}

:where(body[data-theme~="2026"]) .dev-card {
    width: 100%;
    height: 100%;
    flex-shrink: 1;
    border-radius: 18px;
    box-shadow: none;
    border: 1px solid rgba(16, 22, 21, .08);
    transition: opacity .38s ease, filter .38s ease, transform .38s ease, box-shadow .3s ease;
    will-change: opacity, filter, transform;
}

:where(body[data-theme~="2026"]) .dev-card:first-child { grid-column: span 2; grid-row: span 2; }
:where(body[data-theme~="2026"]) .dev-card:first-child .dev-name { font-size: 29px; max-width: 250px; }
:where(body[data-theme~="2026"]) .dev-card:nth-child(n+6) { display: none; }

:where(body[data-theme~="2026"]) .dev-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(17, 25, 22, .12);
}

:where(body[data-theme~="2026"]) .dev-overlay { background: linear-gradient(to top, rgba(9, 14, 13, .92), rgba(9, 14, 13, 0) 70%); }
:where(body[data-theme~="2026"]) .dev-info { padding: 19px; }
:where(body[data-theme~="2026"]) .dev-name { font-size: 18px; line-height: 1.12; letter-spacing: -.03em; }
:where(body[data-theme~="2026"]) .dev-class { background: var(--accent); color: var(--ink); }
:where(body[data-theme~="2026"]) .dev-preview { background: rgba(16, 22, 21, .86); }

:where(body[data-theme~="2026"]) .dev-card.is-leaving {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(-16px) scale(.985);
    pointer-events: none;
}

:where(body[data-theme~="2026"]) .dev-card.is-entering { animation: creatorRiseIn .72s cubic-bezier(.2, .78, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
    :where(body[data-theme~="2026"]) .dev-card.is-entering { animation: none; }
    :where(body[data-theme~="2026"]) .dev-card.is-leaving { transition: none; }
}

@media (max-width: 1180px) {
    :where(body[data-theme~="2026"]) .dev-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    :where(body[data-theme~="2026"]) .dev-card:nth-child(n+4) { display: none; }
}

@media (max-width: 767px) {
    :where(body[data-theme~="2026"]) .dev-track { grid-template-columns: 1fr 1fr; grid-template-rows: 290px 205px 205px; gap: 10px; }
    :where(body[data-theme~="2026"]) .dev-card { width: 100%; height: 100%; border-radius: 16px; }
    :where(body[data-theme~="2026"]) .dev-card:first-child { grid-column: 1 / -1; grid-row: auto; }
    :where(body[data-theme~="2026"]) .dev-card:first-child .dev-name { font-size: 24px; }
    :where(body[data-theme~="2026"]) .dev-card:nth-child(n+4) { display: block; }
    :where(body[data-theme~="2026"]) .dev-card:nth-child(n+6) { display: none; }
}

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
:where(body[data-theme~="2026"]) .footer-bg {
    padding: 0 28px 28px;
    border: 0;
    background: transparent;
}

:where(body[data-theme~="2026"]) .footer-shell {
    max-width: 1680px;
    margin: 0 auto;
    padding: 54px;
    border-radius: 26px;
    background: var(--ink);
    color: #fff;
}

/* Eski footer tuzilmasi (footer-shell'siz) ham qora panelga aylanadi */
:where(body[data-theme~="2026"]) .footer-bg > div:first-child:not(.footer-shell) {
    border-radius: 26px;
    background: var(--ink);
    color: #fff;
    padding: 46px 42px;
}

:where(body[data-theme~="2026"]) .footer-bg h3,
:where(body[data-theme~="2026"]) .footer-bg h4,
:where(body[data-theme~="2026"]) .footer-bg .font-black,
:where(body[data-theme~="2026"]) .footer-bg .font-extrabold { color: #fff; }

:where(body[data-theme~="2026"]) .footer-bg a:not(.socials a) { color: #c3cbc8; transition: color .2s; }
:where(body[data-theme~="2026"]) .footer-bg a:not(.socials a):hover { color: var(--accent); }
:where(body[data-theme~="2026"]) .footer-bg p { color: #909b97; }

:where(body[data-theme~="2026"]) .socials a {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--panel-soft);
    color: #9da7a3;
    transition: background .2s, color .2s;
}

:where(body[data-theme~="2026"]) .socials a:hover { background: var(--accent); color: var(--ink); }

/* --------------------------------------------------------------------------
   12. TAILWIND UTILITY MOSLASHTIRISHLARI
   Sahifalardagi eski ko'k/slate utility klasslari yangi palitraga ko'chiriladi.
   -------------------------------------------------------------------------- */
:where(body[data-theme~="2026"]) .text-blue-600, :where(body[data-theme~="2026"]) .text-blue-500 { color: var(--primary) !important; }
:where(body[data-theme~="2026"]) .text-blue-700, :where(body[data-theme~="2026"]) .text-blue-800, :where(body[data-theme~="2026"]) .text-blue-900 { color: var(--primary-dark) !important; }
:where(body[data-theme~="2026"]) .text-blue-400 { color: #8d9fff !important; }
:where(body[data-theme~="2026"]) .text-blue-100, :where(body[data-theme~="2026"]) .text-blue-200 { color: #dfe4ff !important; }
:where(body[data-theme~="2026"]) .hover\:text-blue-600:hover, :where(body[data-theme~="2026"]) .hover\:text-blue-700:hover, :where(body[data-theme~="2026"]) .hover\:text-blue-500:hover { color: var(--primary) !important; }

:where(body[data-theme~="2026"]) .bg-blue-600 { background-color: var(--primary) !important; }
:where(body[data-theme~="2026"]) .bg-blue-500 { background-color: var(--primary) !important; }
:where(body[data-theme~="2026"]) .bg-blue-50 { background-color: #eef0ff !important; }
:where(body[data-theme~="2026"]) .hover\:bg-blue-50:hover { background-color: #eef0ff !important; }
:where(body[data-theme~="2026"]) .border-blue-100 { border-color: #dfe4ff !important; }
:where(body[data-theme~="2026"]) .hover\:border-blue-100:hover { border-color: #dfe4ff !important; }

:where(body[data-theme~="2026"]) .text-slate-900, :where(body[data-theme~="2026"]) .text-slate-800 { color: var(--ink) !important; }
:where(body[data-theme~="2026"]) .text-slate-700, :where(body[data-theme~="2026"]) .text-slate-600 { color: #4d5654 !important; }
:where(body[data-theme~="2026"]) .text-slate-500 { color: var(--muted) !important; }
:where(body[data-theme~="2026"]) .text-slate-400 { color: var(--muted-soft) !important; }
:where(body[data-theme~="2026"]) .text-slate-300, :where(body[data-theme~="2026"]) .text-slate-200 { color: #c3c9c0 !important; }
:where(body[data-theme~="2026"]) .hover\:text-slate-600:hover { color: #4d5654 !important; }

:where(body[data-theme~="2026"]) .bg-slate-50 { background-color: #f7f8f5 !important; }
:where(body[data-theme~="2026"]) .bg-slate-100 { background-color: #eceee6 !important; }
:where(body[data-theme~="2026"]) .bg-slate-200 { background-color: #dde2dc !important; }
:where(body[data-theme~="2026"]) .hover\:bg-slate-50:hover { background-color: #f7f8f5 !important; }

:where(body[data-theme~="2026"]) .border-slate-50, :where(body[data-theme~="2026"]) .border-slate-100 { border-color: #eceee6 !important; }
:where(body[data-theme~="2026"]) .border-slate-200 { border-color: var(--line) !important; }

/* Oq chegaralar — qog'oz fonida ko'rinmaydi, nozik chiziqqa aylantiramiz */
:where(body[data-theme~="2026"]) main .border-white,
:where(body[data-theme~="2026"]) section .border-white { border-color: rgba(16, 22, 21, .08) !important; }

/* Burchak radiuslari — yangi tizim yumshoqroq */
:where(body[data-theme~="2026"]) .rounded-\[16px\], :where(body[data-theme~="2026"]) .rounded-2xl { border-radius: 18px !important; }
:where(body[data-theme~="2026"]) .rounded-\[24px\] { border-radius: 26px !important; }

/* --------------------------------------------------------------------------
   13. KIRISH / RO'YXATDAN O'TISH SAHIFALARI (sidebar'siz)
   -------------------------------------------------------------------------- */
/* Chap/o'ng brend paneli — asosiy sahifadagi qora hero bilan bir xil.
   .live-mesh va .content-wrap panel ICHIDA joylashgan, shuning uchun
   ularning foniga tegilmaydi. */
:where(body[data-theme~="2026"]) .brand-section,
:where(body[data-theme~="2026"]) .brand {
    background:
        radial-gradient(circle at 88% 0%, rgba(75, 104, 255, .9), transparent 34%),
        linear-gradient(135deg, #111817 0%, #101615 70%) !important;
    color: #fff;
}

:where(body[data-theme~="2026"]) .brand .brand-badge {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: var(--accent) !important;
}

:where(body[data-theme~="2026"]) .brand .brand-title { color: #fff !important; }
:where(body[data-theme~="2026"]) .brand .brand-desc { color: #aeb8b4 !important; }

:where(body[data-theme~="2026"]) .brand-title { color: #fff !important; letter-spacing: -.07em; }
:where(body[data-theme~="2026"]) .brand-desc { color: #aeb8b4 !important; }

/* Qora paneldagi urg'u so'zi — asosiy sahifadagidek laym */
:where(body[data-theme~="2026"]) .brand-section h1 span,
:where(body[data-theme~="2026"]) .brand-section h2 span,
:where(body[data-theme~="2026"]) .brand-section .brand-title span,
:where(body[data-theme~="2026"]) .brand-section .text-blue-400,
:where(body[data-theme~="2026"]) .brand-section .text-blue-500,
:where(body[data-theme~="2026"]) .brand-section .text-blue-600 { color: var(--accent) !important; }

:where(body[data-theme~="2026"]) .brand-section .text-slate-300,
:where(body[data-theme~="2026"]) .brand-section .text-slate-400,
:where(body[data-theme~="2026"]) .brand-section p { color: #aeb8b4 !important; }

:where(body[data-theme~="2026"]) .progress-dots .prog-dot { background: var(--line); }
:where(body[data-theme~="2026"]) .progress-dots .prog-dot.active { background: var(--accent); }

:where(body[data-theme~="2026"]) .pending-badge { background: #eef0ff; color: var(--primary-dark); border-radius: 999px; font-weight: 800; }
:where(body[data-theme~="2026"]) .pending-icon, :where(body[data-theme~="2026"]) .done-icon { border-radius: 16px; }

:where(body[data-theme~="2026"]) .school-item {
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
}

:where(body[data-theme~="2026"]) .school-item:hover,
:where(body[data-theme~="2026"]) .school-item.selected { border-color: var(--primary); background: #eef0ff; }

/* --------------------------------------------------------------------------
   14. MOSLASHUVCHANLIK
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
    :where(body[data-theme~="2026"]) .page-shell { padding: 20px 18px 0; }
    :where(body[data-theme~="2026"]) .footer-bg { padding: 0 18px 20px; }
    :where(body[data-theme~="2026"]) .footer-shell { padding: 42px 34px; }
}

@media (max-width: 767px) {
    body:where([data-theme~="2026"]) { padding-bottom: 94px !important; }
    :where(body[data-theme~="2026"]) .hero-gradient { border-radius: 20px !important; }
    :where(body[data-theme~="2026"]) .section-block { margin-bottom: 68px; }
    :where(body[data-theme~="2026"]) .section-description { display: none; }
    :where(body[data-theme~="2026"]) .footer-bg { padding: 0 12px 14px; }
    :where(body[data-theme~="2026"]) .footer-shell,
    :where(body[data-theme~="2026"]) .footer-bg > div:first-child:not(.footer-shell) { padding: 35px 24px 30px; border-radius: 20px; }
}

/* ── creator-profile (tema ustidan) ── */
:where(body[data-page="creator-profile"]) .filter-pill {
    padding: 8px 18px; border-radius: 999px; font-size: 12px; font-weight: 800;
    border: 1.5px solid #dde2dc; background: white; color: #697371;
    cursor: pointer; transition: all 0.25s; white-space: nowrap;
}
:where(body[data-page="creator-profile"]) .filter-pill:hover { border-color: #4b68ff; color: #4b68ff; }
:where(body[data-page="creator-profile"]) .filter-pill.active { background: #4b68ff; color: white; border-color: #4b68ff; box-shadow: 0 6px 16px -4px rgba(75,104,255,0.4); }

/* ── stats (tema ustidan) ── */
/* ── STATISTIKA: 2026 dizayn ─────────────────────────────────
           Har bir boks o'z urg'u rangiga ega: sarlavha ikonkasi plitka
           ko'rinishida, karta ustiga kelganda shu rang bilan jonlanadi. */

        :where(body[data-page="stats"]) .scard {
            border-radius: 18px;
            border: 1px solid rgba(16, 22, 21, .08);
            background: var(--surface, #fff);
            box-shadow: none;
            position: relative;
            overflow: hidden;
            --acc: #4b68ff;
            --acc-soft: #eef0ff;
        }

        :where(body[data-page="stats"]) .scard::before {
            content: '';
            position: absolute;
            inset: 0 0 auto 0;
            height: 3px;
            background: var(--acc);
            opacity: 0;
            transition: opacity .3s ease;
        }

        :where(body[data-page="stats"]) .scard:hover {
            transform: translateY(-5px);
            border-color: color-mix(in srgb, var(--acc) 34%, transparent);
            box-shadow: 0 20px 44px rgba(20, 31, 27, .10);
        }

        :where(body[data-page="stats"]) .scard:hover::before { opacity: 1; }

        /* Sarlavha — ikonka plitkada */
        :where(body[data-page="stats"]) .section-title {
            display: flex;
            align-items: center;
            gap: 11px;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: -.035em;
            color: var(--ink, #101615);
        }

        @media (min-width: 640px) { :where(body[data-page="stats"]) .section-title { font-size: 19px; } }

        :where(body[data-page="stats"]) .section-title > i,
        :where(body[data-page="stats"]) .section-title > svg {
            width: 34px;
            height: 34px;
            padding: 8px;
            border-radius: 10px;
            flex: 0 0 auto;
            background: var(--acc-soft);
            color: var(--acc) !important;
            stroke-width: 2.2;
        }

        /* Urg'u ranglari */
        :where(body[data-page="stats"]) .acc-indigo  { --acc: #4b68ff; --acc-soft: #eef0ff; }
        :where(body[data-page="stats"]) .acc-lime    { --acc: #7d9400; --acc-soft: #f2ffc7; }
        :where(body[data-page="stats"]) .acc-emerald { --acc: #059669; --acc-soft: #e9fbf3; }
        :where(body[data-page="stats"]) .acc-amber   { --acc: #d97706; --acc-soft: #fff5e6; }
        :where(body[data-page="stats"]) .acc-violet  { --acc: #7c3aed; --acc-soft: #f3edff; }
        :where(body[data-page="stats"]) .acc-rose    { --acc: #e11d48; --acc-soft: #ffecf0; }
        :where(body[data-page="stats"]) .acc-cyan    { --acc: #0891b2; --acc-soft: #e6f8fd; }

        /* Kartaning o'z urg'usini sarlavhadan oladi */
        :where(body[data-page="stats"]) .scard:has(.acc-indigo)  { --acc: #4b68ff; }
        :where(body[data-page="stats"]) .scard:has(.acc-lime)    { --acc: #7d9400; }
        :where(body[data-page="stats"]) .scard:has(.acc-emerald) { --acc: #059669; }
        :where(body[data-page="stats"]) .scard:has(.acc-amber)   { --acc: #d97706; }
        :where(body[data-page="stats"]) .scard:has(.acc-violet)  { --acc: #7c3aed; }
        :where(body[data-page="stats"]) .scard:has(.acc-rose)    { --acc: #e11d48; }
        :where(body[data-page="stats"]) .scard:has(.acc-cyan)    { --acc: #0891b2; }

        /* ── Yuqoridagi uchta boks ──────────────────────────────── */
        :where(body[data-page="stats"]) #statCards .scard {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            min-height: 168px;
        }

        @media (min-width: 640px) { :where(body[data-page="stats"]) #statCards .scard { min-height: 186px; } }

        :where(body[data-page="stats"]) #statCards .stat-num {
            font-size: clamp(27px, 2.7vw, 40px);
            line-height: 1;
            letter-spacing: -.055em;
        }

        :where(body[data-page="stats"]) #statCards .stat-icon { margin-bottom: 16px; }

        :where(body[data-page="stats"]) .stat-change {
            background: #f1f6e2;
            color: #4e6000;
            font-weight: 800;
        }

        /* ── "Jami ko'rishlar" boksi ────────────────────────────── */
        :where(body[data-page="stats"]) .views-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 18px;
        }

        :where(body[data-page="stats"]) .views-total {
            font-size: clamp(30px, 3vw, 44px);
            font-weight: 900;
            line-height: 1;
            letter-spacing: -.06em;
            color: var(--ink, #101615);
        }

        :where(body[data-page="stats"]) .views-sub {
            margin-top: 7px;
            color: var(--muted, #697371);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        :where(body[data-page="stats"]) .views-avg {
            flex: 0 0 auto;
            padding: 7px 12px;
            border-radius: 999px;
            background: #eef0ff;
            color: #3854e8;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }

        /* ── Ro'yxatli kartalar ─────────────────────────────────── */
        :where(body[data-page="stats"]) .rank-row { border-bottom: 1px solid #f0f1ec; }
        :where(body[data-page="stats"]) .rank-row:last-child { border-bottom: 0; }
        :where(body[data-page="stats"]) .rank-badge,
        :where(body[data-page="stats"]) .proj-val {
            background: var(--acc-soft, #eef0ff);
            color: var(--acc, #4b68ff);
            font-weight: 800;
        }

/* --------------------------------------------------------------------------
   15. SIDEBAR MOTION STABILITY
   Keep the auth actions pinned while the switcher opens. The old flex
   min-size made the full navigation refuse to shrink, which pushed the
   login/signup actions below the viewport during every hover animation.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    :where(body[data-theme~="2026"], body[data-page="index"]) .sidebar {
        contain: layout paint;
        will-change: width;
    }

    :where(body[data-theme~="2026"], body[data-page="index"]) .sidebar-nav,
    :where(body[data-theme~="2026"], body[data-page="index"]) .sb-nav {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }

    :where(body[data-theme~="2026"], body[data-page="index"]) .sidebar-nav::-webkit-scrollbar,
    :where(body[data-theme~="2026"], body[data-page="index"]) .sb-nav::-webkit-scrollbar {
        display: none;
    }

    :where(body[data-theme~="2026"], body[data-page="index"]) .sidebar-bottom,
    :where(body[data-theme~="2026"], body[data-page="index"]) .sb-bottom {
        flex: 0 0 auto;
        margin-top: auto;
    }

    :where(body[data-theme~="2026"], body[data-page="index"]) .sidebar-bottom > a,
    :where(body[data-theme~="2026"], body[data-page="index"]) .sb-bottom > a,
    :where(body[data-theme~="2026"], body[data-page="index"]) .sidebar-btn,
    :where(body[data-theme~="2026"], body[data-page="index"]) .sb-btn {
        overflow: hidden;
    }

    /* Do not reveal long labels before the sidebar is wide enough for them. */
    :where(body[data-theme~="2026"], body[data-page="index"]) .sidebar-btn > span,
    :where(body[data-theme~="2026"], body[data-page="index"]) .sb-btn > span {
        transform: translateX(-6px);
        transition: opacity .14s ease, transform .18s ease;
        transition-delay: 0s;
    }

    :where(body[data-theme~="2026"], body[data-page="index"]) .sidebar:hover .sidebar-btn > span,
    :where(body[data-theme~="2026"], body[data-page="index"]) .sidebar:hover .sb-btn > span {
        transform: translateX(0);
        transition-delay: .12s;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(body[data-theme~="2026"], body[data-page="index"]) .sidebar,
    :where(body[data-theme~="2026"], body[data-page="index"]) .site-switcher,
    :where(body[data-theme~="2026"], body[data-page="index"]) .sidebar-btn > span,
    :where(body[data-theme~="2026"], body[data-page="index"]) .sb-btn > span {
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}

/* --------------------------------------------------------------------------
   16. SIDEBAR DOIM OCHIQ (torroq) — hover talab qilinmaydi, Gelica switcher yo'q
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    body[data-page] .sidebar,
    body[data-page] .sidebar:hover { width: 188px !important; padding-left: 12px !important; padding-right: 12px !important; }

    body[data-page] .site-switcher { display: none !important; }

    body[data-page] .sidebar span,
    body[data-page] .sidebar:hover span {
        opacity: 1 !important;
        transform: none !important;
        transition-delay: 0s !important;
    }

    body[data-page] .sidebar-logo,
    body[data-page] .sidebar-link,
    body[data-page] .sidebar-btn { padding-left: 12px !important; padding-right: 12px !important; gap: 12px !important; }

    body[data-page]:has(.sidebar),
    body[data-page]:has(.sidebar:hover) { padding-left: 188px !important; }

    body[data-page="cowork"]:has(.sidebar) .cw-wrap,
    body[data-page="cowork"]:has(.sidebar:hover) .cw-wrap { left: 188px !important; }
}

/* --------------------------------------------------------------------------
   17. INDEX ICHIDA SAHIFALAR (iframe) — sidebar faqat index'da, qolganlari o'ng tomonda
   -------------------------------------------------------------------------- */
.page-frame { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; background: #fff; z-index: 10; }
.page-frame[hidden] { display: none; }
@media (min-width: 768px) { .page-frame { left: 188px; width: calc(100% - 188px); } }
@media (max-width: 767px) { .page-frame { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); height: calc(100% - 80px - env(safe-area-inset-bottom, 0px)); } }
body.frame-open .page-shell, body.frame-open .footer-bg { display: none !important; }

html.in-frame .sidebar,
html.in-frame .bottom-nav,
html.in-frame .bnav { display: none !important; }
html.in-frame body[data-page],
html.in-frame body[data-page]:has(.sidebar),
html.in-frame body[data-page]:has(.sidebar:hover),
html.in-frame body[data-theme~="2026"]:has(.sidebar),
html.in-frame body[data-theme~="2026"]:has(.sidebar:hover) { padding-left: 0 !important; padding-bottom: 0 !important; }
html.in-frame body[data-page="cowork"] .cw-wrap,
html.in-frame body[data-page="cowork"]:has(.sidebar) .cw-wrap,
html.in-frame body[data-page="cowork"]:has(.sidebar:hover) .cw-wrap { left: 0 !important; }

/* Sidebar: chap tomondagi chiziq (indikator) yo'q */
body .sidebar .sidebar-link::before,
body .sidebar .sidebar-link::after,
body .sidebar .sb-link::before,
body .sidebar .sb-link::after { content: none !important; display: none !important; }

/* Statistika: box ustidagi chiziq hover'da chiqmasin */
body[data-page="stats"] .scard::before,
body[data-page="stats"] .scard:hover::before { content: none !important; display: none !important; }

/* Login: yupqaroq border, label'lar input ichida (placeholder) */
body[data-page="login"] .input-pill { border-width: 1px !important; }
body[data-page="login"] .input-pill:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(75,104,255,0.08) !important; }

/* Login: modal ichidagi input va tugmalar borderi yupqaroq */
body[data-page="login"] .choice-btn,
body[data-page="login"] .type-btn,
body[data-page="login"] .modal-select,
body[data-page="login"] .school-search,
body[data-page="login"] .new-school-input,
body[data-page="login"] .school-list { border-width: 1px !important; border-color: #e8ebe6; }
body[data-page="login"] .add-school-btn { border-width: 1px !important; border-color: #e8ebe6; }
body[data-page="login"] .choice-btn:hover, body[data-page="login"] .choice-btn.selected,
body[data-page="login"] .type-btn:hover, body[data-page="login"] .type-btn.selected,
body[data-page="login"] .modal-select:focus, body[data-page="login"] .school-search:focus-within,
body[data-page="login"] .new-school-input:focus, body[data-page="login"] .add-school-btn:hover { border-color: #4b68ff; }

/* Login: border-radius kichikroq (input va tugmalar) */
body[data-page="login"] .input-pill,
body[data-page="login"] .btn-primary,
body[data-page="login"] #loginForm button,
body[data-page="login"] .choice-btn,
body[data-page="login"] .type-btn,
body[data-page="login"] .modal-select,
body[data-page="login"] .school-search,
body[data-page="login"] .school-list,
body[data-page="login"] .new-school-input,
body[data-page="login"] .add-school-btn,
body[data-page="login"] .modal-btn { border-radius: 8px !important; }
body[data-page="login"] .school-item { border-radius: 6px !important; }

/* ── index: barcha qutilar uchun bir xil kichik radius (2026 tema qatlamidan keyin) ── */
body[data-page="index"] .hero,
body[data-page="index"] .hero-panel,
body[data-page="index"] .metric-card,
body[data-page="index"] .mini-metrics,
body[data-page="index"] .bento-card,
body[data-page="index"] .dev-card,
body[data-page="index"] .footer-shell,
body[data-page="index"] .footer-bg > div:first-child,
body[data-page="index"] .input-pill,
body[data-page="index"] .switcher-box,
body[data-page="index"] .sw-opt,
body[data-page="index"] .mini-icon,
body[data-page="index"] .text-link .arrow-box,
body[data-page="index"] .socials a,
body[data-page="index"] .primary-cta,
body[data-page="index"] .secondary-cta,
body[data-page="index"] .hero-actions > a,
body[data-page="index"] .custom-select-wrap select,
body[data-page="index"] .bnav { border-radius: 15px !important; }
body[data-page="index"] .bento-card > div:first-child { border-radius: 8px !important; }

/* index: chap sidebar — 8px (bo'limlar, hover va active holatlari bilan) */
body[data-page="index"] .sidebar .sidebar-logo,
body[data-page="index"] .sidebar .sidebar-logo .brand-mark,
body[data-page="index"] .sidebar .sidebar-link,
body[data-page="index"] .sidebar .sidebar-link:hover,
body[data-page="index"] .sidebar .sidebar-link.active,
body[data-page="index"] .sidebar .sidebar-btn,
body[data-page="index"] .sidebar .sidebar-btn:hover,
body[data-page="index"] .sidebar .sidebar-btn.signin,
body[data-page="index"] .sidebar .sidebar-btn.start,
body[data-page="index"] .sidebar #sbProfile button { border-radius: 8px !important; }

/* Login: ID rejimida "Orqaga qaytish" — to'q kulrang fon */
body[data-page="login"] #idModeBtn.id-back { background: #dde0d8 !important; color: #101615 !important; box-shadow: none !important; transform: none; }
body[data-page="login"] #idModeBtn.id-back:hover { background: #d0d4cb !important; transform: none; }

/* Signup: login sahifasi bilan bir xil dizayn (yupqa border, kichik radius) */
body[data-page="signup"] .input-pill { border-width: 1px !important; }
body[data-page="signup"] .input-pill:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(75,104,255,0.08) !important; }
body[data-page="signup"] .input-pill,
body[data-page="signup"] .btn-primary,
body[data-page="signup"] #signupForm button { border-radius: 8px !important; }

/* Signup: login bilan bir xil brend panel (mesh, tekislash, animatsiya) */
        :where(body[data-page="signup"]) .brand-section { position: relative; height: 100%; overflow: hidden; display: none; background: #000; isolation: isolate; }
        @media (min-width: 1024px) { :where(body[data-page="signup"]) .brand-section { display: block; } }
        :where(body[data-page="signup"]) video.bg-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; }
        :where(body[data-page="signup"]) .video-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(56,84,232,0.85) 0%, rgba(16,22,21,0.9) 100%); z-index: 1; mix-blend-mode: multiply; }
        :where(body[data-page="signup"]) .live-mesh {
            position: absolute;
            inset: -15%;
            z-index: 2;
            opacity: 0.52;
            background-image:
                linear-gradient(rgba(147,197,253,0.24) 1px, transparent 1px),
                linear-gradient(90deg, rgba(147,197,253,0.24) 1px, transparent 1px);
            background-size: 46px 46px;
            -webkit-mask-image: radial-gradient(ellipse 68% 58% at 50% 48%, #000 15%, transparent 78%);
            mask-image: radial-gradient(ellipse 68% 58% at 50% 48%, #000 15%, transparent 78%);
            transform: perspective(650px) rotateX(62deg) scale(1.55) translateY(11%);
            transform-origin: center bottom;
            animation: meshFlow 10s linear infinite;
            pointer-events: none;
        }
        @media (prefers-reduced-motion: reduce) {
            :where(body[data-page="signup"]) .live-mesh { animation: none; }
        }
        :where(body[data-page="signup"]) .content-wrap { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 64px; text-align: right; align-items: flex-end; }
        :where(body[data-page="signup"]) .input-pill { background: #eceee6; border: 1.5px solid transparent; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
        :where(body[data-page="signup"]) .input-pill:focus-within { background: white; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(75,104,255,0.1); }
        :where(body[data-page="signup"]) .btn-primary { background: var(--primary); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); }
        :where(body[data-page="signup"]) .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 12px 24px -6px rgba(75,104,255,0.4); }
        :where(body[data-page="signup"]) .animate-slide-in { animation: slideInLeft 0.8s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Login/Signup: o'ng panelda faqat sarlavha, markazda */
body[data-page="login"] .brand-section .content-wrap,
body[data-page="signup"] .brand-section .content-wrap { justify-content: center !important; align-items: center !important; text-align: center !important; }
body[data-page="login"] .brand-section h2,
body[data-page="signup"] .brand-section h2 { margin: 0 !important; max-width: 520px; text-align: center; }
body[data-page="login"] .brand-section p,
body[data-page="signup"] .brand-section p { text-align: center; margin: 0 auto; }
body[data-page="login"] .brand-section h2,
body[data-page="signup"] .brand-section h2 { margin: 0 0 24px !important; }

/* index: ijodkorlar — chapda 2 ta katta rasm, o'ngda 5 tadan 10 ta kichik */
body[data-page="index"] .dev-track { grid-template-columns: 1.6fr 1.6fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: repeat(2, 230px); }
body[data-page="index"] .dev-card:nth-child(-n+2) { grid-column: auto; grid-row: span 2; }
body[data-page="index"] .dev-card:nth-child(-n+2) .dev-name { font-size: 24px; max-width: 220px; }
body[data-page="index"] .dev-card:nth-child(n+6) { display: block; }
body[data-page="index"] .dev-card:nth-child(n+13) { display: none; }
@media (max-width: 1180px) {
    body[data-page="index"] .dev-track { grid-template-columns: 1.3fr 1.3fr 1fr 1fr; grid-template-rows: repeat(5, 160px); }
    body[data-page="index"] .dev-card:nth-child(-n+2) { grid-row: span 5; }
    body[data-page="index"] .dev-card:nth-child(n+4) { display: block; }
    body[data-page="index"] .dev-card:nth-child(n+13) { display: none; }
}
@media (max-width: 767px) {
    body[data-page="index"] .dev-track { grid-template-columns: 1fr 1fr; grid-template-rows: 300px repeat(5, 225px); gap: 10px; }
    body[data-page="index"] .dev-card:nth-child(-n+2) { grid-column: auto; grid-row: auto; }
    body[data-page="index"] .dev-card:nth-child(-n+2) .dev-name { font-size: 20px; }
    body[data-page="index"] .dev-card:nth-child(n+13) { display: none; }
}

/* index: ijodkorlar sarlavhasi olib tashlandi — "Barcha ijodkorlar" havolasi o'ngda */
body[data-page="index"] .section-block:has(#devTrack) .section-head { justify-content: flex-end; margin-bottom: 14px; }

/* Login/Signup: sahifa almashganda animatsiya (splash) yo'q — oddiy va tez */
body[data-page="login"], body[data-page="signup"] { opacity: 1 !important; animation: none !important; }
body[data-page="login"] .animate-slide-in,
body[data-page="signup"] .animate-slide-in { animation: none !important; opacity: 1 !important; transform: none !important; }
body[data-page="login"] .live-mesh,
body[data-page="signup"] .live-mesh { animation: none !important; }

/* iframe yuklanayotganda ko'rsatkich */
body.frame-loading::after { content: ''; position: fixed; z-index: 11; width: 34px; height: 34px; top: 50%; left: 50%; margin: -17px 0 0 -17px; border: 3px solid #e5e7eb; border-top-color: #6366f1; border-radius: 50%; animation: spin .7s linear infinite; }
@media (min-width: 768px) { body.frame-loading::after { left: calc(50% + 94px); } }

/* --------------------------------------------------------------------------
   18. BREND LOGO + GLOBAL MOBIL / A11Y QOIDALARI (10-agent)
   -------------------------------------------------------------------------- */
/* "P." brend belgisi — matn o'rniga SVG (shrift yuklanishiga bog'liq emas) */
body .brand-mark {
    font-size: 0 !important;
    color: transparent !important;
    letter-spacing: 0 !important;
    background-image: url("../img/mark-ink.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 82% 82% !important;
    -webkit-user-select: none;
    user-select: none;
}

/* Eski tashqi (teletype — 410 Gone) logotip rasmlari — mahalliy SVG bilan almashtiriladi */
img[src*="4b95b9b1-af31-4ce0-94c7-afa1dbcb40ac"] { content: url("../img/favicon.svg"); object-fit: contain; }
.sidebar-logo > img[src*="4b95b9b1-af31-4ce0-94c7-afa1dbcb40ac"],
.sb-logo > img[src*="4b95b9b1-af31-4ce0-94c7-afa1dbcb40ac"],
.sidebar-logo > img[src$="img/favicon.svg"],
.sb-logo > img[src$="img/favicon.svg"] { content: url("../img/mark-ink.svg"); }

/* Matn o'lchami: telefon burilganda avtomatik kattalashmasin; uzun so'z/URL sig'sin */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body[data-page]) { overflow-wrap: break-word; }

/* Media elementlar konteynerdan chiqmasin */
:where(img, video, iframe, canvas) { max-width: 100%; }

/* Klaviatura fokus indikatori (WCAG 2.4.11) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--primary, #4b68ff);
    outline-offset: 2px;
}

/* iOS: 16px dan kichik input fokusda sahifani zoom qiladi */
@media (max-width: 767px), (pointer: coarse) {
    body[data-page] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
    body[data-page] textarea,
    body[data-page] select { font-size: 16px !important; }
}

/* Mobil: asosiy tugmalar va kichik ikon-havolalar uchun tap target >= 40px */
@media (max-width: 767px) {
    :where(body[data-theme~="2026"]) :is(.btn-primary, .btn-submit, .btn-post, .btn-confirm, .btn-next, .form-btn, .primary-btn, .empty-btn, .edit-save, .j-apply, .fl-btn, .add-school-btn, .modal-btn, .back-btn, .primary-cta, .secondary-cta) { min-height: 40px; }
    :where(body[data-theme~="2026"]) .socials a { width: 40px; height: 40px; }
}

/* Harakatni kamaytirish: animatsiya/o'tishlar deyarli o'chiriladi, yuklanish spinnerlari aylanishda qoladi */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
    .spinner, .spin, .loader-ring, .map-loader, .geo-spin, .animate-spin, body.frame-loading::after {
        animation-duration: 1s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ==========================================================================
   18. SHELL (1-agent) — yagona sidebar, pastki nav, "Menyu" oynasi, iframe holatlari.
   Barcha sahifalarda markup bir xil: .sidebar > .sidebar-logo + .sidebar-nav + .sidebar-bottom,
   nav.bottom-nav > .bottom-nav-item (5 ta). Sahifaga xos eski qoidalardan ustun turadi.
   ========================================================================== */

/* Oq ekran qolmasin: core.js body.loaded qo'shadi; JS xato bo'lsa ham 1.6s dan keyin CSS ko'rsatadi */
@keyframes payableReveal { to { opacity: 1; } }
body[data-page]:not(.loaded) { animation: payableReveal .3s ease 1.6s forwards; }
body[data-page].loaded { opacity: 1; }

/* ── Sidebar (kompyuter) ── */
body[data-page] .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    display: none; flex-direction: column; align-items: stretch;
    width: 188px; padding: 22px 12px 16px;
    background: rgba(15, 21, 20, .97); border-right: 0; box-shadow: none;
    overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
}
body[data-page] .sidebar::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { body[data-page] .sidebar { display: flex; } }

body[data-page] .sidebar .sidebar-logo,
body[data-page] .sidebar .sb-logo {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 0 8px; margin: 0 0 26px; color: #fff; text-decoration: none;
    font-size: 19px; font-weight: 900; letter-spacing: -.045em; white-space: nowrap;
}
body[data-page] .sidebar .brand-mark {
    width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto;
    background: #dfff56; color: #101615; font-size: 20px; font-weight: 800; letter-spacing: -.08em;
}

body[data-page] .sidebar .sidebar-nav {
    display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; width: 100%; padding: 0; margin: 0;
}
body[data-page] .sidebar .sidebar-link {
    position: relative; display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 10px 12px; border-radius: 8px;
    color: #8c9693; background: transparent; text-decoration: none;
    font-size: 13.5px; font-weight: 700; white-space: nowrap;
    transition: background .2s, color .2s;
}
body[data-page] .sidebar .sidebar-link svg { width: 19px; height: 19px; flex: 0 0 auto; }
body[data-page] .sidebar .sidebar-link:hover { background: #202826; color: #fff; }
body[data-page] .sidebar .sidebar-link.active { background: #202826; color: #fff; }
body[data-page] .sidebar .sidebar-link.active svg { color: #dfff56; }

body[data-page] .sidebar .sidebar-bottom {
    display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0; margin-top: 12px;
}
body[data-page] .sidebar .sidebar-btn {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px;
    padding: 11px 12px; border: 0; border-radius: 8px; cursor: pointer;
    font-size: 13.5px; font-weight: 700; white-space: nowrap; text-decoration: none; overflow: hidden;
    transition: background .2s, color .2s;
}
body[data-page] .sidebar .sidebar-btn[hidden] { display: none !important; }
body[data-page] .sidebar .sidebar-btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
body[data-page] .sidebar .sidebar-btn.signin { background: transparent !important; color: #aab3b0 !important; }
body[data-page] .sidebar .sidebar-btn.signin:hover { background: #202826 !important; color: #fff !important; }
body[data-page] .sidebar .sidebar-btn.start { background: #dfff56 !important; color: #101615 !important; box-shadow: none !important; }
body[data-page] .sidebar .sidebar-btn.start:hover { background: #d5f344 !important; }
body[data-page] .sidebar .sidebar-btn.profile.active { box-shadow: inset 0 0 0 2px #101615 !important; }
body[data-page] .sidebar .sb-avatar {
    width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; background: rgba(16, 22, 21, .12);
}
body[data-page] .sidebar .sb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-page] .sidebar .sb-avatar svg { width: 16px; height: 16px; }
body[data-page] .sidebar #sbProfileName { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Past balandlik (landscape planshet/telefon): sidebar ixcham, havolalar tugmalar ostida qolmasin */
@media (min-width: 768px) and (max-height: 600px) {
    body[data-page] .sidebar { padding-top: 12px; padding-bottom: 10px; }
    body[data-page] .sidebar .sidebar-logo,
    body[data-page] .sidebar .sb-logo { margin-bottom: 12px; }
    body[data-page] .sidebar .sidebar-nav {
        gap: 2px; min-height: 0; overflow-y: auto; padding-bottom: 18px;
        /* Hammasi sig'masa — pastdagi xira chegara ichida scroll borligini bildiradi */
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
    }
    body[data-page] .sidebar .sidebar-link { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
    body[data-page] .sidebar .sidebar-btn { min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
    body[data-page] .sidebar .sidebar-bottom { flex: 0 0 auto; margin-top: 8px; gap: 4px; }
}

/* project-detail to'g'ridan-to'g'ri ochilganda: yuqori nav 188px sidebar ostida qolmasin */
@media (min-width: 768px) {
    html:not(.in-frame) body[data-page="project-detail"] .nav-wrap,
    html:not(.in-frame) body[data-page="project-detail"]:has(.sidebar:hover) .nav-wrap { left: 188px !important; }
}

body[data-page] .sidebar a:focus-visible,
body[data-page] .bottom-nav .bottom-nav-item:focus-visible,
.nav-sheet a:focus-visible, .nav-sheet button:focus-visible,
.frame-error button:focus-visible, .frame-error a:focus-visible {
    outline: 2px solid #dfff56; outline-offset: 2px;
}

/* ── Pastki nav (mobil, 320px gacha sig'adi) ── */
body[data-page] .bottom-nav {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); top: auto;
    z-index: 100; height: 64px; padding: 0 4px; margin: 0;
    display: flex; align-items: stretch; justify-content: space-around; gap: 2px;
    border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(15, 21, 20, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 40px rgba(13, 20, 18, .24); overflow: visible;
}
@media (min-width: 768px) { body[data-page] .bottom-nav { display: none; } }
body[data-page] .bottom-nav .bottom-nav-item {
    position: relative; flex: 1 1 0; min-width: 0; height: 100%; padding: 0 2px; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: #8a9491; background: none; border: 0; border-radius: 12px; font: inherit;
    text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body[data-page] .bottom-nav .bottom-nav-item svg { width: 21px; height: 21px; flex: 0 0 auto; transform: none; }
body[data-page] .bottom-nav .bottom-nav-item span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10px; font-weight: 700; line-height: 1.15; opacity: 1; transform: none;
}
body[data-page] .bottom-nav .bottom-nav-item.active { color: #fff; }
body[data-page] .bottom-nav .bottom-nav-item.active svg { color: #dfff56; }
body[data-page] .bottom-nav .bottom-nav-item::after { content: none !important; }
body[data-page] .bottom-nav .bottom-nav-indicator {
    display: block !important; position: absolute; top: 5px; left: 50%; width: 18px; height: 3px; margin-left: -9px;
    border-radius: 3px; background: transparent; opacity: 1; transform: none;
}
body[data-page] .bottom-nav .bottom-nav-item.active .bottom-nav-indicator { background: #dfff56; }
/* Yangi xabarlar soni — "Menyu" tugmasida */
body[data-page] .bottom-nav [data-nav-more][data-count]::before {
    content: attr(data-count); position: absolute; top: 6px; left: calc(50% + 5px);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
    background: #ef4444; color: #fff; font-size: 9px; font-weight: 800; line-height: 16px; text-align: center;
}
@media (max-width: 340px) {
    body[data-page] .bottom-nav { left: 6px; right: 6px; padding: 0 2px; }
    body[data-page] .bottom-nav .bottom-nav-item span { font-size: 9px; }
}
/* Kontent pastki nav ostida qolmasin (iframe ichida nav yo'q — u yerda 0) */
@media (max-width: 767px) {
    html:not(.in-frame) body[data-page]:has(.bottom-nav) { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ── Mobil "Menyu" oynasi (pc.js yaratadi) ── */
.nav-sheet-backdrop {
    position: fixed; inset: 0; z-index: 140; background: rgba(10, 14, 13, .45);
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.nav-sheet {
    position: fixed; left: 10px; right: 10px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 150;
    max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain;
    padding: 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1);
    background: #151c1a; color: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}
body.nav-sheet-open .nav-sheet { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
body.nav-sheet-open .nav-sheet-backdrop { opacity: 1; pointer-events: auto; }
@media (min-width: 768px) { .nav-sheet, .nav-sheet-backdrop { display: none !important; } }
.nav-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 10px; font-size: 14px; font-weight: 800; }
.nav-sheet-close {
    width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px;
    background: #202826; color: #fff; cursor: pointer;
}
.nav-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nav-sheet-link, .nav-sheet-btn {
    position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px;
    padding: 10px 12px; border-radius: 12px; text-decoration: none; font-size: 13px; font-weight: 700;
}
.nav-sheet-link { background: #1c2422; color: #c9d0cd; }
.nav-sheet-link span, .nav-sheet-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-sheet-link svg, .nav-sheet-btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
.nav-sheet-link.active { background: #dfff56; color: #101615; }
.nav-sheet-auth { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.nav-sheet-btn { font-weight: 800; }
.nav-sheet-btn.signin { background: #1c2422; color: #fff; }
.nav-sheet-btn.start { background: #dfff56; color: #101615; }
.nav-sheet-btn[data-count]::after {
    content: attr(data-count); margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
    background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
}

/* ── Yangi xabarlar tugmasi (pc.js) — faqat kompyuterda; mobilda son "Menyu"da ── */
.pc-notif {
    position: fixed; right: 18px; bottom: 24px; z-index: 9990;
    display: flex; align-items: center; justify-content: center; width: 50px; height: 50px;
    border-radius: 15px; background: #dfff56; color: #101615; text-decoration: none;
    box-shadow: 0 10px 28px rgba(13, 20, 18, .28); transition: transform .25s;
}
.pc-notif:hover { transform: scale(1.08); }
.pc-notif[hidden] { display: none !important; }
.pc-notif-count {
    position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center; border-radius: 99px; border: 2.5px solid #fff;
    background: #ef4444; color: #fff; font-size: 10px; font-weight: 900; line-height: 1;
}
@media (max-width: 767px) { .pc-notif { display: none !important; } }

/* ── index: iframe xato holati ── */
.frame-error {
    position: fixed; z-index: 12; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(92vw, 360px); padding: 24px; border-radius: 16px; border: 1px solid #dde2dc;
    background: #fff; color: #101615; text-align: center; box-shadow: 0 20px 50px rgba(13, 20, 18, .12);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.frame-error[hidden] { display: none !important; }
.frame-error svg { color: #ef4444; }
.frame-error strong { font-size: 16px; font-weight: 800; }
.frame-error p { margin: 0; font-size: 13px; color: #697371; }
.frame-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.frame-error-retry {
    min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
    background: #101615; color: #fff; font-weight: 800; font-size: 14px;
}
.frame-error-direct { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: #3854e8; font-weight: 700; font-size: 14px; }
@media (min-width: 768px) { .frame-error { left: calc(50% + 94px); } }
@media (max-width: 767px) { .frame-error { top: calc(50% - 40px); } }

/* index mobil sarlavhasi: Kirish / Profil tugmasi kamida 40px */
body[data-page="index"] .mobile-head .text-link { min-height: 40px; }


/* project-detail: footer olib tashlandi, burchak radiuslari kichraytirildi (index bilan bir xil: 15px / 8px) */
body[data-page="project-detail"] .footer-bg { display: none !important; }
body[data-page="project-detail"] .info-card,
body[data-page="project-detail"] .desc-card,
body[data-page="project-detail"] .sidebar-card,
body[data-page="project-detail"] .hero-img-wrap,
body[data-page="project-detail"] .trust-card,
body[data-page="project-detail"] .pd-state,
body[data-page="project-detail"] .author-wrap,
body[data-page="project-detail"] #iframeWrapper { border-radius: 15px !important; }
body[data-page="project-detail"] .stat-chip,
body[data-page="project-detail"] .contact-row,
body[data-page="project-detail"] .btn-primary,
body[data-page="project-detail"] .pd-buy,
body[data-page="project-detail"] .pd-btn,
body[data-page="project-detail"] .pd-state-icon,
body[data-page="project-detail"] .author-avatar,
body[data-page="project-detail"] .rounded-2xl,
body[data-page="project-detail"] .rounded-xl,
body[data-page="project-detail"] .pd-toast { border-radius: 8px !important; }
body[data-page="project-detail"] .contact-icon,
body[data-page="project-detail"] .device-btn { border-radius: 6px !important; }
body[data-page="project-detail"] .sidebar .sidebar-link,
body[data-page="project-detail"] .sidebar .sidebar-btn,
body[data-page="project-detail"] .sidebar .sidebar-logo .brand-mark { border-radius: 8px !important; }


/* project-detail: paddinglar kamaytirildi, bo'shliqlar bir xil (16px tashqi, 12px ichki) */
body[data-page="project-detail"] main { padding-top: 16px !important; padding-bottom: 24px !important; }
body[data-page="project-detail"] .custom-grid { gap: 16px !important; }
body[data-page="project-detail"] .custom-grid > div > .space-y-8 > :not([hidden]) ~ :not([hidden]),
body[data-page="project-detail"] .custom-grid > div > .space-y-8 > * ~ *,
body[data-page="project-detail"] .sticky-sidebar > * ~ * { margin-top: 16px !important; margin-bottom: 0 !important; }
body[data-page="project-detail"] .sticky-sidebar { top: 88px; }
body[data-page="project-detail"] .pd-stats { gap: 16px !important; }
body[data-page="project-detail"] .info-card,
body[data-page="project-detail"] .desc-card,
body[data-page="project-detail"] .sidebar-card,
body[data-page="project-detail"] .trust-card { padding: 20px !important; }
body[data-page="project-detail"] .stat-chip { padding: 14px 10px !important; }
body[data-page="project-detail"] .author-wrap { padding: 12px !important; margin-bottom: 16px !important; }
body[data-page="project-detail"] .contact-row { padding: 12px !important; }
body[data-page="project-detail"] .sidebar-card .space-y-4 > * ~ *,
body[data-page="project-detail"] .sidebar-card.space-y-6 > * ~ * { margin-top: 12px !important; }
body[data-page="project-detail"] .info-card .grid { gap: 16px !important; }
body[data-page="project-detail"] .info-card > .flex.mb-8,
body[data-page="project-detail"] .desc-card > .flex.mb-8,
body[data-page="project-detail"] .info-card > .flex.mb-6,
body[data-page="project-detail"] .sidebar-card > .flex.mb-6 { margin-bottom: 16px !important; }
body[data-page="project-detail"] .sidebar-card .price-badge { margin-bottom: 16px !important; }
body[data-page="project-detail"] .sidebar-card h2 { margin-bottom: 12px !important; }
body[data-page="project-detail"] .sidebar-card > span.inline-flex { margin-bottom: 12px !important; }
body[data-page="project-detail"] .pd-buy { margin-bottom: 0 !important; margin-top: 12px; }
body[data-page="project-detail"] .btn-primary { margin-bottom: 0 !important; padding: 14px !important; }
body[data-page="project-detail"] .divider { margin: 16px 0 !important; }
body[data-page="project-detail"] .pd-react-row { margin-top: 16px; gap: 8px; }
body[data-page="project-detail"] .info-card .flex-wrap.mb-6 { margin-bottom: 12px !important; }
body[data-page="project-detail"] .info-card h1 { margin-bottom: 8px !important; }
@media (max-width: 640px) {
    body[data-page="project-detail"] .info-card,
    body[data-page="project-detail"] .desc-card,
    body[data-page="project-detail"] .sidebar-card,
    body[data-page="project-detail"] .trust-card { padding: 16px !important; }
}

/* Sidebar: "Profildan chiqish" tugmasi (profil tagida) */
.sidebar-btn.logout { color: #ef4444; background: transparent; font-family: inherit; box-shadow: none; }
.sidebar-btn.logout:hover { background: #fff1f2; color: #ef4444; }
.sidebar-btn.logout:disabled { opacity: .6; cursor: wait; }
body[data-page="index"] .sidebar-btn.logout:hover { background: rgba(239,68,68,.14); color: #ff6b6b; }

/* Freelance kirish / ro'yxatdan o'tish: 2026 karta ichida ichki oraliq (reset padding:0 ni bekor qiladi) */
body[data-page="freelance-login"] .form-wrap,
body[data-page="freelance-signin"] .form-wrap { padding: 28px 24px; }
@media (max-width: 400px) {
    body[data-page="freelance-login"] .form-wrap,
    body[data-page="freelance-signin"] .form-wrap { padding: 20px 16px; }
}

/* Mobil / sensorli ekran: kichik tugmalar kamida 44px touch target (ikonka o'lchami o'zgarmaydi) */
@media (max-width: 767px), (pointer: coarse) {
    body[data-page="explore"] .modal-close { width: 44px; height: 44px; }
    body[data-page="creators"] .user-modal-close { width: 44px; height: 44px; }
    html body[data-page] .back-btn,
    html body[data-page="requests"] .pg-back,
    html body[data-page="sorovlar"] .lp-back { min-width: 44px; min-height: 44px; }
}