@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap";@import"https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css";:root{--bg-main: #F8FAFC;--bg-secondary: #EEF2F6;--bg-card: #FFFFFF;--bg-card-hover: #F1F5F9;--text-main: #0F172A;--text-secondary: #1E293B;--text-muted: #475569;--accent-blue: #2563EB;--accent-blue-hover: #1D4ED8;--border-color: #E2E8F0;--border-hover: #CBD5E1;--bg-main-rgb: 248, 250, 252;--glass-bg: rgba(248, 250, 252, .75);--glass-border: rgba(226, 232, 240, .8);--gradient-text: var(--text-main);--gradient-accent: var(--accent-blue);--gradient-glow: transparent}[data-theme=dark]{--bg-main: #0B0F19;--bg-secondary: #131A2C;--bg-card: #182235;--bg-card-hover: #1E293B;--text-main: #F8FAFC;--text-secondary: #E2E8F0;--text-muted: #94A3B8;--accent-blue: #3B82F6;--accent-blue-hover: #60A5FA;--border-color: #1E293B;--border-hover: #334155;--bg-main-rgb: 11, 15, 25;--glass-bg: rgba(11, 15, 25, .75);--glass-border: rgba(30, 41, 59, .8);--gradient-text: var(--text-main);--gradient-accent: var(--accent-blue);--gradient-glow: transparent}:root{--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-xl: 32px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(15, 23, 42, .04);--shadow-md: 0 8px 24px rgba(15, 23, 42, .06);--shadow-lg: 0 16px 40px rgba(15, 23, 42, .1);--shadow-floating: 0 20px 40px rgba(0, 0, 0, .12);--transition-fast: .15s ease;--transition-smooth: .3s cubic-bezier(.25, .8, .25, 1);--transition-theme: background-color .4s ease, border-color .4s ease, box-shadow .4s ease, color .2s ease;--font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background-color:var(--bg-main);color:var(--text-main);min-height:100vh;overflow-x:hidden;overflow-y:scroll;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:var(--transition-theme)}a{text-decoration:none;color:inherit;transition:var(--transition-fast)}button,input,select{font-family:inherit;border:none;outline:none;background:none}button{cursor:pointer}.layout{display:flex;flex-direction:column;min-height:100vh;position:relative}.layout:before{content:"";position:absolute;top:0;left:0;right:0;height:500px;background:var(--gradient-glow);z-index:0;pointer-events:none}.navbar{background:var(--glass-bg);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--glass-border);transition:var(--transition-theme)}.nav-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;width:100%;padding:1.25rem 1.5rem}.logo{font-size:1.4rem;font-weight:800;letter-spacing:-.04em;display:flex;align-items:center;gap:.4rem;color:var(--accent-blue)}.logo-img{width:32px;height:32px;object-fit:contain;transition:transform var(--transition-smooth)}.logo:hover .logo-img{transform:rotate(-10deg) scale(1.08)}.version-badge{font-size:.6rem;font-weight:700;color:var(--text-muted);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-full);padding:.1rem .45rem;letter-spacing:.03em;align-self:center;margin-left:-.15rem}.nav-links{display:flex;align-items:center;gap:1.75rem}.btn-lang-toggle{display:flex;align-items:center;width:24px;height:16px;border-radius:2px;overflow:hidden;border:1px solid var(--border-color);cursor:pointer;transition:transform var(--transition-fast)}.btn-lang-toggle:hover{transform:scale(1.05)}.btn-theme-toggle{color:var(--text-main);font-size:1.25rem;display:flex;align-items:center;cursor:pointer;transition:color var(--transition-fast),transform var(--transition-fast)}.btn-theme-toggle:hover{color:var(--accent-blue);transform:scale(1.08)}.nav-link{font-weight:600;font-size:.95rem;color:var(--text-muted);position:relative;padding:.25rem 0;transition:var(--transition-fast)}.nav-link:hover,.nav-link.active{color:var(--text-main)}.nav-link:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--gradient-accent);border-radius:var(--radius-full);transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.25,.8,.25,1)}.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1);transform-origin:left}.main-content{flex:1;padding:2.5rem 1.5rem 6rem;max-width:1200px;margin:0 auto;width:100%;z-index:2}.footer{text-align:center;padding:3rem 5%;border-top:1px solid var(--border-color);color:var(--text-muted);font-size:.85rem;background:var(--bg-secondary);transition:var(--transition-theme);position:relative;z-index:1}.btn-primary{background:var(--gradient-accent);color:#fff;padding:.65rem 1.4rem;border-radius:var(--radius-full);font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 4px 14px #3b82f633;transition:var(--transition-smooth)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3b82f659}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-secondary);color:var(--text-main);padding:.65rem 1.4rem;border-radius:var(--radius-full);font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid var(--border-color);transition:var(--transition-smooth)}.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translateY(-1px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .6s var(--transition-smooth) both}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.mobile-only{display:none!important}.desktop-only{display:flex!important}.btn-hard-reload{color:var(--text-muted);font-size:1.1rem;display:flex;align-items:center;cursor:pointer;transition:color var(--transition-fast),transform var(--transition-fast)}.btn-hard-reload:hover{color:var(--accent-blue);transform:rotate(45deg)}.btn-menu-toggle{color:var(--text-main);font-size:1.5rem;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.btn-menu-toggle:hover{background-color:var(--bg-secondary);border-color:var(--border-color)}.btn-menu-toggle:active{transform:scale(.95)}.mobile-drawer{position:absolute;top:100%;left:0;right:0;background:var(--bg-card);border-bottom:1px solid var(--border-color);padding:1rem 1.25rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow-lg);z-index:100}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.animate-slide-down{animation:slideDown .3s cubic-bezier(.25,.8,.25,1) forwards}.drawer-links{display:flex;flex-direction:column;gap:.35rem}.drawer-link{display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border-radius:var(--radius-sm);color:var(--text-secondary);font-weight:600;font-size:.95rem;transition:var(--transition-smooth)}.drawer-link:hover,.drawer-link.active{background:var(--bg-secondary);color:var(--accent-blue)}.drawer-icon{font-size:1.15rem;color:var(--text-muted);transition:var(--transition-fast)}.drawer-link:hover .drawer-icon,.drawer-link.active .drawer-icon{color:var(--accent-blue);transform:translate(2px)}.drawer-divider{height:1px;background:var(--border-color);width:100%}.drawer-settings{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:.15rem .5rem}.setting-item{display:flex;align-items:center;gap:.65rem}.setting-label{font-size:.8rem;font-weight:700;color:var(--text-muted)}@media(max-width:768px){.desktop-only{display:none!important}.mobile-only{display:flex!important}.nav-inner{padding:.85rem .75rem}.logo{gap:0}.logo-text{display:none!important}.logo-img{width:36px;height:36px}.main-content{padding:1.25rem 1rem 4rem}}.badge-val-web-app{background-color:#3b82f61f!important;color:#3b82f6!important}[data-theme=light] .badge-val-web-app{background-color:#2563eb1a!important;color:#2563eb!important}.badge-val-desktop-app{background-color:#8b5cf61f!important;color:#8b5cf6!important}[data-theme=light] .badge-val-desktop-app{background-color:#7c3aed1a!important;color:#7c3aed!important}.badge-val-browser-extension{background-color:#f973161f!important;color:#f97316!important}[data-theme=light] .badge-val-browser-extension{background-color:#ea580c1a!important;color:#ea580c!important}.badge-val-mobile-app{background-color:#10b9811f!important;color:#10b981!important}[data-theme=light] .badge-val-mobile-app{background-color:#0596691a!important;color:#059669!important}.update-banner{position:fixed;bottom:1.25rem;left:0;right:0;margin-left:auto;margin-right:auto;z-index:300;display:flex;align-items:center;gap:1rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1rem 1.25rem;box-shadow:0 8px 32px #00000024;width:calc(100% - 2rem);max-width:520px}.update-banner-icon{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:#3b82f61a;color:var(--accent-blue);font-size:1.2rem;display:flex;align-items:center;justify-content:center}.update-banner-text{flex:1;min-width:0}.update-banner-title{font-size:.9rem;font-weight:700;color:var(--text-main);margin-bottom:.15rem}.update-banner-desc{font-size:.78rem;color:var(--text-muted);line-height:1.4}.update-banner-actions{display:flex;gap:.5rem;flex-shrink:0}.btn-update{padding:.45rem 1rem;border-radius:var(--radius-full);background:var(--accent-blue);color:#fff;font-size:.85rem;font-weight:700;cursor:pointer;transition:background .2s}.btn-update:hover{background:var(--accent-blue-hover)}.btn-dismiss{padding:.45rem 1rem;border-radius:var(--radius-full);background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-muted);font-size:.85rem;font-weight:700;cursor:pointer;transition:background .2s,color .2s}.btn-dismiss:hover{background:var(--bg-card-hover);color:var(--text-main)}@media(max-width:480px){.update-banner{flex-wrap:wrap;bottom:.75rem}.update-banner-actions{width:100%}.btn-update,.btn-dismiss{flex:1;text-align:center}}
