:root{--primary:#6366f1;--primary-dark:#4f46e5;--primary-light:#818cf8;--secondary:#8b5cf6;--accent:#ec4899;--success:#10b981;--warning:#f59e0b;--error:#ef4444;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--gray-950:#030712;--gradient-primary:linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);--gradient-dark:linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 100%);--gradient-card:linear-gradient(145deg, #1a1a2e 0%, #141420 100%);--gradient-glow:radial-gradient(circle at center, rgba(99, 102, 241, 0.15) 0%, transparent 70%);--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-mono:'JetBrains Mono','Fira Code',Consolas,monospace;--container-max:1280px;--section-padding:120px;--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-2xl:32px;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1);--shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1);--shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1);--shadow-glow:0 0 60px rgba(99, 102, 241, 0.3);--shadow-glow-lg:0 0 100px rgba(99, 102, 241, 0.4);--transition-fast:150ms ease;--transition-base:250ms ease;--transition-slow:350ms ease;--transition-bounce:500ms cubic-bezier(0.68, -0.55, 0.265, 1.55)}*,::after,::before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--gray-100);background:var(--gray-950);overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}button{font-family:inherit;cursor:pointer;border:none;background:0 0}ol,ul{list-style:none}.bg-gradient{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--gradient-dark);z-index:-3}.bg-grid{position:fixed;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(99,102,241,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.03) 1px,transparent 1px);background-size:60px 60px;z-index:-2}.bg-glow{position:fixed;width:800px;height:800px;border-radius:50%;filter:blur(120px);opacity:.4;z-index:-1;animation:glowFloat 20s ease-in-out infinite}.bg-glow-1{top:-200px;left:-200px;background:radial-gradient(circle,rgba(99,102,241,.4) 0,transparent 70%);animation-delay:0s}.bg-glow-2{top:50%;right:-300px;background:radial-gradient(circle,rgba(139,92,246,.3) 0,transparent 70%);animation-delay:-7s}.bg-glow-3{bottom:-200px;left:30%;background:radial-gradient(circle,rgba(236,72,153,.25) 0,transparent 70%);animation-delay:-14s}@keyframes glowFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}.container{max-width:var(--container-max);margin:0 auto;padding:0 24px}.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:20px 0;transition:all var(--transition-base)}.navbar.scrolled{background:rgba(3,7,18,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.05);padding:12px 0}.navbar .container{display:flex;align-items:center;justify-content:space-between;position:relative}.logo{display:flex;align-items:center;gap:12px;font-size:28px;font-weight:800}.logo-icon{display:inline-flex;align-items:center;justify-content:center;font-size:24px;line-height:1}.logo-text{color:#fff}.logo-highlight{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav-links{display:flex;align-items:center;gap:36px;position:absolute;left:50%;transform:translateX(-50%)}.nav-links a{font-size:18px;font-weight:500;color:var(--gray-400);transition:color var(--transition-fast);position:relative}.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--gradient-primary);transition:width var(--transition-base)}.nav-links a:hover{color:#fff}.nav-links a:hover::after{width:100%}.nav-actions{display:flex;align-items:center;gap:16px}.nav-user-menu{position:relative}.nav-user-btn{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-full);color:#fff;cursor:pointer;transition:all var(--transition-fast)}.nav-user-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}.nav-user-avatar{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);border-radius:50%;font-size:12px;font-weight:600}.nav-user-name{font-size:14px;font-weight:500;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-user-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:linear-gradient(145deg,#1a1a2e 0,#141420 100%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);box-shadow:0 10px 40px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-10px);transition:all var(--transition-fast);z-index:1000}.nav-user-dropdown.active{opacity:1;visibility:visible;transform:translateY(0)}.nav-user-dropdown a{display:block;padding:10px 16px;font-size:14px;color:var(--gray-300);transition:all var(--transition-fast)}.nav-user-dropdown a:hover{background:rgba(255,255,255,.05);color:#fff}.nav-dropdown-divider{height:1px;background:rgba(255,255,255,.1);margin:4px 0}.mobile-menu-btn{display:none;flex-direction:column;gap:5px;padding:8px}.mobile-menu-btn span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:all var(--transition-base)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;font-size:16px;font-weight:600;border-radius:var(--radius-lg);transition:all var(--transition-base);position:relative;overflow:hidden}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 15px rgba(99,102,241,.4)}.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(99,102,241,.5)}.btn-primary:hover::before{left:100%}.btn-outline{background:0 0;color:#fff;border:1px solid rgba(255,255,255,.2)}.btn-outline:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.3)}.btn-ghost{background:0 0;color:var(--gray-400)}.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.05)}.btn-white{background:#fff;color:var(--gray-900)}.btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,255,255,.2)}.btn-ghost-white{background:0 0;color:#fff;border:1px solid rgba(255,255,255,.3)}.btn-ghost-white:hover{background:rgba(255,255,255,.1)}.btn-lg{padding:16px 32px;font-size:16px}.btn-block{width:100%}.btn svg{width:18px;height:18px}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes typing{from{width:0}to{width:100%}}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fade-in{animation:fadeIn .6s ease forwards;opacity:0}.animate-fade-in-up{animation:fadeInUp .6s ease forwards;opacity:0}.animate-fade-in-down{animation:fadeInDown .6s ease forwards;opacity:0}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.delay-5{animation-delay:.5s}.delay-6{animation-delay:.6s}[data-aos]{opacity:0;transition:all .6s ease}[data-aos=fade-up]{transform:translateY(40px)}[data-aos=fade-down]{transform:translateY(-40px)}[data-aos=fade-left]{transform:translateX(40px)}[data-aos=fade-right]{transform:translateX(-40px)}[data-aos].aos-animate{opacity:1;transform:translate(0,0)}.hero{padding:180px 0 80px;text-align:center;position:relative}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);border-radius:var(--radius-full);font-size:13px;font-weight:500;color:var(--primary-light);margin-bottom:24px}.badge-dot{width:6px;height:6px;background:var(--success);border-radius:50%;animation:pulse 2s ease-in-out infinite}.hero-title{font-size:clamp(48px, 7vw, 84px);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:24px}.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:22px;color:var(--gray-300);max-width:700px;margin:0 auto 40px;line-height:1.6}.hero-cta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:40px}.hero-quick-try{max-width:600px;margin:0 auto 40px}.quick-try-input{display:flex;align-items:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:8px 8px 8px 20px;gap:12px;transition:all var(--transition-normal)}.quick-try-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.2)}.quick-try-input svg{width:20px;height:20px;color:var(--gray-500);flex-shrink:0}.quick-try-input input{flex:1;background:0 0;border:none;color:#fff;font-size:15px;padding:8px 0;outline:0;min-width:0}.quick-try-input input::placeholder{color:var(--gray-500)}.quick-try-input .btn{padding:12px 24px;white-space:nowrap;flex-shrink:0}.quick-try-input .btn svg{width:18px;height:18px;color:#fff}.quick-try-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:13px;color:var(--gray-500)}.hint-badge{background:linear-gradient(135deg,var(--success),#059669);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px}@media (max-width:600px){.quick-try-input{flex-direction:column;padding:16px}.quick-try-input svg:first-child{display:none}.quick-try-input input{width:100%;text-align:center}.quick-try-input .btn{width:100%;justify-content:center}}.hero-stats{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:48px;padding-top:32px}.stat{text-align:center}.stat-value{font-size:36px;font-weight:800;color:#fff}.stat-suffix{font-size:24px;font-weight:600;color:var(--primary-light)}.stat-label{display:block;font-size:13px;color:var(--gray-500);margin-top:4px}.stat-divider{width:1px;height:40px;background:linear-gradient(180deg,transparent,var(--gray-700),transparent)}.hero-visual{display:flex;align-items:flex-start;justify-content:center;gap:24px;margin-top:60px;padding:0 20px;perspective:1000px}.code-window{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl),var(--shadow-glow);transform:rotateY(-5deg) rotateX(2deg);transition:transform var(--transition-slow);max-width:600px;flex:1}.code-window:hover{transform:rotateY(0) rotateX(0)}.code-header{display:flex;align-items:center;gap:12px;padding:16px 20px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.05)}.code-dots{display:flex;gap:8px}.dot{width:12px;height:12px;border-radius:50%}.dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}.code-title{font-size:13px;color:var(--gray-500);font-family:var(--font-mono)}.code-body{padding:24px;overflow-x:auto}.code-body pre{margin:0}.code-body code{font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--gray-300)}.code-prompt{color:var(--success)}.code-cmd{color:var(--primary-light)}.code-flag{color:var(--accent)}.code-string{color:var(--warning)}.code-success{color:var(--success);font-weight:500}.screenshot-preview{position:relative;transform:rotateY(5deg) rotateX(2deg);transition:transform var(--transition-slow);width:280px;flex:0 0 280px}.screenshot-preview:hover{transform:rotateY(0) rotateX(0)}@media (max-width:1400px){.screenshot-preview{width:260px;flex:0 0 260px}}@media (max-width:1200px){.screenshot-preview{width:240px;flex:0 0 240px}}.preview-browser{background:var(--gray-900);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl),var(--shadow-glow)}.browser-bar{display:flex;align-items:center;gap:16px;padding:12px 16px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.05)}.browser-dots{display:flex;gap:6px}.browser-dots span{width:10px;height:10px;border-radius:50%;background:var(--gray-700)}.browser-url{flex:1;padding:6px 12px;background:rgba(0,0,0,.3);border-radius:var(--radius-md);font-size:12px;color:var(--gray-500);font-family:var(--font-mono)}.browser-content{aspect-ratio:4/3;background:var(--gray-800);display:flex;align-items:stretch;justify-content:stretch;overflow:hidden;max-height:200px}.preview-placeholder{padding:32px;width:100%;display:flex;flex-direction:column;justify-content:center}.preview-skeleton{height:12px;background:linear-gradient(90deg,var(--gray-700) 25%,var(--gray-600) 50%,var(--gray-700) 75%);background-size:200% 100%;border-radius:var(--radius-sm);margin-bottom:12px;animation:shimmer 1.5s infinite}.preview-skeleton.short{width:60%}.preview-skeleton.medium{width:80%}.hero-preview-result{width:100%;height:100%;background:linear-gradient(180deg,#0d1117 0,#161b22 100%);padding:0;display:flex;flex-direction:column}.preview-header-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.08)}.preview-header-logo{width:32px;height:32px;background:linear-gradient(135deg,var(--primary) 0,var(--secondary) 100%);border-radius:8px}.preview-header-nav{display:flex;gap:24px}.preview-header-nav span{width:48px;height:8px;background:rgba(255,255,255,.15);border-radius:4px}.preview-header-btn{width:72px;height:28px;background:var(--primary);border-radius:6px}.preview-hero-section{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:12px}.preview-hero-text{width:200px;height:24px;background:linear-gradient(90deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.1) 100%);border-radius:6px}.preview-hero-subtext{width:160px;height:10px;background:rgba(255,255,255,.08);border-radius:4px}.preview-hero-buttons{display:flex;gap:12px;margin-top:8px}.preview-hero-buttons span:first-child{width:80px;height:28px;background:var(--gradient-primary);border-radius:6px}.preview-hero-buttons span:last-child{width:80px;height:28px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:6px}.preview-cards{display:flex;gap:12px;padding:16px;background:rgba(0,0,0,.2)}.preview-card{flex:1;height:60px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px}.preview-badge{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:10px 20px;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.4);border-radius:var(--radius-full);font-size:13px;font-weight:500;color:var(--success);white-space:nowrap;backdrop-filter:blur(10px)}.preview-badge svg{width:16px;height:16px}.trusted{padding:80px 0;text-align:center}.trusted-label{font-size:13px;color:var(--gray-500);text-transform:uppercase;letter-spacing:.1em;margin-bottom:32px}.trusted-logos{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;opacity:.4}.logo-item{width:32px;height:32px;color:var(--gray-400);transition:all var(--transition-base)}.logo-item:hover{color:#fff;transform:scale(1.1)}.logo-item svg{width:100%;height:100%}section{position:relative}.section-header{text-align:center;margin-bottom:60px}.section-badge{display:inline-block;padding:10px 24px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);border-radius:var(--radius-full);font-size:15px;font-weight:600;color:var(--primary-light);text-transform:uppercase;letter-spacing:.05em;margin-bottom:20px}.section-title{font-size:clamp(36px, 5vw, 56px);font-weight:800;line-height:1.2;margin-bottom:16px}.section-subtitle{font-size:18px;color:var(--gray-400);max-width:600px;margin:0 auto}.features{padding:var(--section-padding) 0}.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.feature-card{padding:32px;background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);transition:all var(--transition-base)}.feature-card:hover{transform:translateY(-4px);border-color:rgba(99,102,241,.3);box-shadow:var(--shadow-glow)}.feature-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);margin-bottom:20px}.feature-icon svg{width:28px;height:28px;stroke:white}.gradient-1{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.gradient-2{background:linear-gradient(135deg,#8b5cf6,#ec4899)}.gradient-3{background:linear-gradient(135deg,#ec4899,#f59e0b)}.gradient-4{background:linear-gradient(135deg,#10b981,#6366f1)}.gradient-5{background:linear-gradient(135deg,#f59e0b,#ef4444)}.gradient-6{background:linear-gradient(135deg,#06b6d4,#10b981)}.gradient-7{background:linear-gradient(135deg,#8b5cf6,#06b6d4)}.gradient-8{background:linear-gradient(135deg,#ef4444,#f59e0b)}.feature-card h3{font-size:18px;font-weight:700;margin-bottom:12px}.feature-card p{font-size:14px;color:var(--gray-400);line-height:1.6}.how-it-works{padding:var(--section-padding) 0;background:linear-gradient(180deg,transparent,rgba(99,102,241,.03),transparent)}.steps{max-width:800px;margin:0 auto}.step{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;padding:32px;background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);margin-bottom:24px}.step-number{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);border-radius:var(--radius-lg);font-size:24px;font-weight:800;color:#fff}.step-content h3{font-size:20px;font-weight:700;margin-bottom:8px}.step-content p{font-size:15px;color:var(--gray-400)}.step-visual{min-width:200px}.api-key-demo{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:16px}.key-label{font-size:11px;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;display:block}.key-value{display:flex;align-items:center;gap:8px}.key-value code{font-family:var(--font-mono);font-size:13px;color:var(--warning)}.copy-btn{padding:6px;color:var(--gray-500);transition:color var(--transition-fast)}.copy-btn:hover{color:#fff}.copy-btn svg{width:16px;height:16px}.mini-code{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:16px 20px}.mini-code code{font-family:var(--font-mono);font-size:14px;color:var(--primary-light)}.result-preview{display:flex;align-items:center;gap:12px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);border-radius:var(--radius-md);padding:16px 20px}.result-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--success);border-radius:50%;color:#fff}.result-icon svg{width:18px;height:18px}.result-preview span{font-size:18px;font-weight:700;color:var(--success)}.step-connector{display:flex;justify-content:center;height:60px;margin:-12px 0}.step-connector svg{width:24px;height:60px}.demo{padding:var(--section-padding) 0}.demo-container{display:grid;grid-template-columns:360px 1fr;gap:24px;margin-bottom:32px}.demo-controls{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);padding:20px}.demo-input-group{margin-bottom:16px}.demo-input-group label{display:block;font-size:13px;font-weight:600;color:var(--gray-400);margin-bottom:8px}.input-with-icon{position:relative}.input-with-icon svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--gray-500)}.input-with-icon input{width:100%;padding:12px 14px 12px 44px;background:linear-gradient(145deg,#0d0d14 0,#0a0a0f 100%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);font-size:14px;font-weight:500;color:#fff;transition:all var(--transition-fast)}.input-with-icon input:hover{border-color:rgba(99,102,241,.3)}.input-with-icon input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.15);background:linear-gradient(145deg,#0f0f18 0,#0d0d14 100%)}.input-with-icon input::placeholder{color:var(--gray-500);font-weight:400}.demo-options{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}.option-group label{display:block;font-size:13px;font-weight:600;color:var(--gray-400);margin-bottom:8px}.option-buttons{display:flex;flex-wrap:wrap;gap:8px}.option-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;flex:1 1 auto;min-width:0;background:linear-gradient(145deg,rgba(20,20,35,.9) 0,rgba(15,15,25,.95) 100%);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);font-size:13px;font-weight:500;color:var(--gray-400);transition:all var(--transition-fast);white-space:nowrap}.option-btn:hover{border-color:rgba(99,102,241,.3);background:linear-gradient(145deg,rgba(25,25,45,.95) 0,#141423 100%);color:#fff}.option-btn.active{background:linear-gradient(145deg,rgba(99,102,241,.2) 0,rgba(79,70,229,.15) 100%);border-color:var(--primary);color:#fff;box-shadow:0 0 20px rgba(99,102,241,.15)}.option-btn svg{width:18px;height:18px;opacity:.7}.option-btn.active svg,.option-btn:hover svg{opacity:1}.option-group select{width:100%;padding:10px 14px;background:linear-gradient(145deg,#0d0d14 0,#0a0a0f 100%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);font-size:14px;font-weight:500;color:#fff;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px;transition:all var(--transition-fast)}.option-group select:hover{border-color:rgba(99,102,241,.3)}.option-group select:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.1)}.option-group select option{background:#141420;color:#fff;padding:12px}.checkbox-group{display:flex;flex-wrap:wrap;gap:16px}.checkbox{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--gray-300);cursor:pointer;white-space:nowrap;padding:10px 16px;border-radius:var(--radius-lg);transition:all var(--transition-fast);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);user-select:none}.checkbox:hover{background:rgba(255,255,255,.05);border-color:rgba(99,102,241,.3)}.checkbox input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{width:20px;height:20px;min-width:20px;background:rgba(15,15,25,.8);border:2px solid rgba(255,255,255,.15);border-radius:6px;position:relative;transition:all var(--transition-fast);flex-shrink:0;display:flex;align-items:center;justify-content:center}.checkbox:hover .checkmark{border-color:var(--primary);background:rgba(99,102,241,.1)}.checkbox input:checked~.checkmark{background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);border-color:var(--primary);box-shadow:0 2px 8px rgba(99,102,241,.4)}.checkbox input:checked~.checkmark::after{content:'';position:absolute;left:5px;top:2px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox:has(input:checked){background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.25);color:#fff}.demo-btn{width:100%;padding:16px 24px}.demo-result{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column}.result-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.06)}.result-title{font-size:14px;font-weight:600;color:var(--gray-400)}.result-meta{display:flex;gap:12px}.meta-item{font-size:12px;color:var(--gray-500);font-family:var(--font-mono)}.result-frame{flex:1;display:flex;align-items:center;justify-content:center;min-height:300px;position:relative;background:rgba(0,0,0,.2)}.result-placeholder{text-align:center;color:var(--gray-600)}.result-placeholder svg{width:64px;height:64px;margin-bottom:16px;opacity:.5}.result-placeholder p{font-size:14px}.result-loading{position:absolute;display:none;flex-direction:column;align-items:center;gap:16px}.result-loading.active{display:flex}.spinner{width:40px;height:40px;border:3px solid rgba(99,102,241,.2);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}.result-loading p{font-size:14px;color:var(--gray-400)}#resultImage{display:none;max-width:100%;max-height:400px;object-fit:contain;border-radius:var(--radius-md)}#resultImage.visible{display:block}.result-actions{display:none;gap:12px;padding:16px 24px;border-top:1px solid rgba(255,255,255,.06)}.result-actions.visible{display:flex}.demo-code{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);overflow:hidden}.code-tabs{display:flex;gap:4px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.2)}.code-tab{padding:8px 16px;font-size:13px;font-weight:500;color:var(--gray-500);border-radius:var(--radius-md);transition:all var(--transition-fast)}.code-tab:hover{color:#fff;background:rgba(255,255,255,.05)}.code-tab.active{color:#fff;background:rgba(99,102,241,.2)}.code-content{position:relative;padding:24px;overflow-x:auto}.code-content pre{margin:0}.code-content code{font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--gray-300)}.copy-code-btn{position:absolute;top:16px;right:16px;padding:8px;color:var(--gray-500);background:rgba(0,0,0,.3);border-radius:var(--radius-md);transition:all var(--transition-fast)}.copy-code-btn:hover{color:#fff;background:rgba(255,255,255,.1)}.copy-code-btn svg{width:18px;height:18px}.pricing{padding:var(--section-padding) 0;background:linear-gradient(180deg,transparent,rgba(99,102,241,.03),transparent)}.pricing .section-header{text-align:center;width:100%}.pricing .section-subtitle{margin-left:auto;margin-right:auto;text-align:center}.pricing-toggle{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:48px}.toggle-label{font-size:14px;color:var(--gray-400)}.save-badge{display:inline-block;padding:2px 8px;background:rgba(16,185,129,.2);border-radius:var(--radius-full);font-size:11px;font-weight:600;color:var(--success);margin-left:8px}.toggle{position:relative;width:56px;height:28px}.toggle input{display:none}.toggle-slider{position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-base)}.toggle-slider::after{content:'';position:absolute;top:4px;left:4px;width:20px;height:20px;background:#fff;border-radius:50%;transition:all var(--transition-base)}.toggle input:checked+.toggle-slider{background:var(--primary)}.toggle input:checked+.toggle-slider::after{transform:translateX(28px)}.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.pricing-card{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);padding:32px;position:relative;transition:all var(--transition-base);display:flex;flex-direction:column}.pricing-card>.btn,.pricing-card>a.btn{margin-top:auto}.pricing-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.1)}.pricing-card.popular{border-color:var(--primary);box-shadow:var(--shadow-glow)}.popular-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:6px 16px;background:var(--gradient-primary);border-radius:var(--radius-full);font-size:12px;font-weight:600;color:#fff;white-space:nowrap}.pricing-header{margin-bottom:24px}.plan-name{font-size:20px;font-weight:700;margin-bottom:8px}.plan-desc{font-size:14px;color:var(--gray-500)}.pricing-price{margin-bottom:24px}.price-amount{font-size:48px;font-weight:800}.price-period{font-size:16px;color:var(--gray-500)}.pricing-features{margin-bottom:32px}.pricing-features li{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:14px;color:var(--gray-300);border-bottom:1px solid rgba(255,255,255,.05)}.pricing-features li:last-child{border-bottom:none}.pricing-features li svg{width:20px;height:20px;flex-shrink:0}.pricing-features li:not(.disabled) svg{color:var(--success)}.pricing-features li.disabled{color:var(--gray-600)}.pricing-features li.disabled svg{color:var(--gray-600)}.pricing-features strong{color:#fff}.pricing-card.enterprise .pricing-price{display:flex;align-items:baseline}.docs{padding:var(--section-padding) 0}.docs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.docs-card{padding:32px;background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);transition:all var(--transition-base)}.docs-card:hover{transform:translateY(-4px);border-color:rgba(99,102,241,.3)}.docs-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(99,102,241,.1);border-radius:var(--radius-lg);margin-bottom:20px}.docs-icon svg{width:24px;height:24px;color:var(--primary-light)}.docs-card h3{font-size:18px;font-weight:700;margin-bottom:8px}.docs-card p{font-size:14px;color:var(--gray-400);margin-bottom:16px}.docs-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--primary-light);transition:all var(--transition-fast)}.docs-link:hover{gap:12px;color:#fff}.docs-link svg{width:16px;height:16px}.sdks{padding:var(--section-padding) 0;background:linear-gradient(180deg,transparent 0,rgba(99,102,241,.03) 50%,transparent 100%)}.sdks-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.sdk-card{background:var(--gradient-card);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:28px;transition:all var(--transition-base);display:flex;flex-direction:column;gap:20px}.sdk-card:hover{border-color:rgba(99,102,241,.3);transform:translateY(-4px);box-shadow:var(--shadow-glow)}.sdk-header{display:flex;align-items:center;gap:16px}.sdk-icon{width:48px;height:48px;border-radius:var(--radius-md);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sdk-icon svg{width:28px;height:28px;fill:var(--gray-300)}.sdk-info h3{font-size:18px;font-weight:600;color:#fff;margin-bottom:4px}.sdk-package{font-family:var(--font-mono);font-size:13px;color:var(--primary-light);background:rgba(99,102,241,.1);padding:2px 8px;border-radius:var(--radius-sm)}.sdk-install{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md);padding:12px 16px}.sdk-install code{font-family:var(--font-mono);font-size:13px;color:var(--gray-300);flex:1;user-select:all}.sdk-install .copy-btn{background:rgba(255,255,255,.05);border:none;border-radius:var(--radius-sm);padding:6px;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center}.sdk-install .copy-btn:hover{background:rgba(255,255,255,.1)}.sdk-install .copy-btn svg{width:16px;height:16px;stroke:var(--gray-400)}.sdk-example{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.04);border-radius:var(--radius-md);padding:16px;overflow-x:auto;flex:1}.sdk-example code{font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--gray-300);white-space:pre}.sdk-example .code-keyword{color:#c792ea}.sdk-example .code-string{color:#c3e88d}.sdk-example .code-variable{color:#82aaff}.sdk-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--primary-light);transition:all var(--transition-fast);margin-top:auto}.sdk-link:hover{color:#fff;gap:10px}.sdk-card.sdk-coming-soon{opacity:.5;cursor:default}.sdk-card.sdk-coming-soon:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.08)}.sdk-card.sdk-coming-soon .sdk-install{color:var(--gray-500);font-style:italic}.cta{padding:var(--section-padding) 0;position:relative;overflow:hidden}.cta::before{content:'';position:absolute;inset:0;background:var(--gradient-primary);opacity:.1}.cta .container{position:relative;display:flex;align-items:center;justify-content:space-between;gap:60px}.cta-content{max-width:500px}.cta-content h2{font-size:40px;font-weight:800;margin-bottom:16px}.cta-content p{font-size:18px;color:var(--gray-400);margin-bottom:32px}.cta-buttons{display:flex;gap:16px}.cta-visual{position:relative;width:400px;height:300px}.floating-card{position:absolute;display:flex;align-items:center;gap:12px;padding:16px 24px;background:rgba(255,255,255,.05);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);font-size:14px;font-weight:500;white-space:nowrap;animation:float 4s ease-in-out infinite}.card-icon{font-size:20px}.floating-card.card-1{top:20px;left:0;animation-delay:0s}.floating-card.card-2{top:100px;right:0;animation-delay:-1.3s}.floating-card.card-3{bottom:40px;left:40px;animation-delay:-2.6s}.footer{padding:80px 0 40px;border-top:1px solid rgba(255,255,255,.05)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px}.footer-brand p{font-size:14px;color:var(--gray-500);margin:16px 0 24px;max-width:280px}.social-links{display:flex;gap:12px}.social-links a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border-radius:var(--radius-md);color:var(--gray-400);transition:all var(--transition-fast)}.social-links a:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateY(-2px)}.social-links svg{width:18px;height:18px}.footer-links h4{font-size:14px;font-weight:600;color:#fff;margin-bottom:20px}.footer-links ul li{margin-bottom:12px}.footer-links a{font-size:14px;color:var(--gray-500);transition:color var(--transition-fast)}.footer-links a:hover{color:#fff}.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:32px;border-top:1px solid rgba(255,255,255,.05)}.footer-bottom p{font-size:14px;color:var(--gray-600)}.footer-status{display:flex;align-items:center;gap:8px}.status-dot{width:8px;height:8px;background:var(--success);border-radius:50%;animation:pulse 2s ease-in-out infinite}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);display:flex;align-items:center;gap:12px;padding:16px 24px;background:var(--gray-800);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);opacity:0;transition:all var(--transition-base);z-index:9999}.toast.visible{transform:translateX(-50%) translateY(0);opacity:1}.toast-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--success);border-radius:50%;color:#fff}.toast-icon svg{width:14px;height:14px}.toast-message{font-size:14px;font-weight:500}@media (max-width:1200px){.docs-grid,.features-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}.hero-visual{flex-direction:column;align-items:center}.code-window{transform:none;max-width:100%}.screenshot-preview{transform:none;width:100%;max-width:320px;flex:none}.footer-grid{grid-template-columns:repeat(3,1fr)}.footer-brand{grid-column:span 3}}@media (max-width:992px){.demo-container{grid-template-columns:1fr}.step{grid-template-columns:auto 1fr}.step-visual{grid-column:span 2;margin-top:16px}.cta .container{flex-direction:column;text-align:center}.cta-buttons{justify-content:center}.cta-visual{display:none}}@media (max-width:768px){:root{--section-padding:80px}.nav-links{display:none}.nav-actions .btn-ghost{display:none}.mobile-menu-btn{display:flex}.hero{padding:140px 0 60px}.hero-stats{flex-direction:column;gap:24px}.stat-divider{display:none}.docs-grid,.features-grid,.pricing-grid,.sdks-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:repeat(2,1fr)}.footer-brand{grid-column:span 2}.footer-bottom{flex-direction:column;gap:16px;text-align:center}}@media (max-width:480px){.hero-cta{flex-direction:column}.hero-cta .btn{width:100%}.code-window{font-size:12px}.option-buttons{flex-direction:column}.option-btn{width:100%;justify-content:center}}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:linear-gradient(180deg,#0a0a0f 0,#0d0d14 50%,#0a0a0f 100%)}.auth-page .bg-grid{opacity:.3}.auth-page .bg-glow{opacity:.2}.auth-container{width:100%;max-width:440px}.auth-card{background:linear-gradient(145deg,#18182a 0,#12121c 100%);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);padding:40px;box-shadow:0 8px 40px rgba(0,0,0,.4)}.auth-header{text-align:center;margin-bottom:32px}.auth-header .logo{display:inline-flex;margin-bottom:24px}.auth-header h1{font-size:24px;font-weight:700;margin-bottom:8px}.auth-header p{font-size:14px;color:var(--gray-500)}.auth-form .form-group{margin-bottom:20px}.auth-form label{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500;color:var(--gray-400);margin-bottom:8px}.auth-form input[type=email],.auth-form input[type=password],.auth-form input[type=text]{width:100%;padding:14px 16px;background:#0d0d14;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);font-size:14px;color:#fff;transition:all var(--transition-fast)}.auth-form input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.2)}.auth-form input::placeholder{color:var(--gray-600)}.password-input{position:relative}.password-input input{padding-right:48px}.toggle-password{position:absolute;right:12px;top:50%;transform:translateY(-50%);padding:6px;color:var(--gray-500);transition:color var(--transition-fast)}.toggle-password:hover{color:#fff}.toggle-password svg{width:20px;height:20px}.password-strength{height:4px;background:rgba(255,255,255,.1);border-radius:2px;margin-top:8px;overflow:hidden}.strength-bar{height:100%;width:0;border-radius:2px;transition:all var(--transition-base)}.strength-bar.weak{background:var(--error)}.strength-bar.fair{background:var(--warning)}.strength-bar.good{background:#10b981}.strength-bar.strong{background:var(--success)}.password-hint{display:block;font-size:12px;color:var(--gray-600);margin-top:6px}.forgot-link{font-size:12px;color:var(--primary-light);transition:color var(--transition-fast)}.forgot-link:hover{color:#fff}.checkbox-group{display:flex;flex-wrap:wrap;gap:16px}.checkbox-group .checkbox{font-size:13px;color:var(--gray-400)}.checkbox-group .checkbox a{color:var(--primary-light)}.checkbox-group .checkbox a:hover{color:#fff}.auth-error{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);margin-top:16px;font-size:14px;color:var(--error)}.auth-error svg{width:18px;height:18px;flex-shrink:0}.auth-divider{display:flex;align-items:center;gap:16px;margin:24px 0}.auth-divider::after,.auth-divider::before{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}.auth-divider span{font-size:12px;color:var(--gray-600);text-transform:uppercase;letter-spacing:.05em}.social-auth{display:flex;gap:12px}.social-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);font-size:14px;font-weight:500;color:var(--gray-300);transition:all var(--transition-fast)}.social-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}.social-btn svg{width:20px;height:20px}.social-btn.github{color:#fff}.social-btn.github:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}.auth-footer{text-align:center;margin-top:24px;font-size:14px;color:var(--gray-500)}.auth-footer a{color:var(--primary-light);font-weight:500}.auth-footer a:hover{color:#fff}.auth-features{margin-top:32px;display:flex;flex-direction:column;gap:12px}.feature-item{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--gray-400)}.feature-item svg{width:18px;height:18px;color:var(--success)}.page-hero{padding:160px 0 80px;text-align:center}.page-hero.compact{padding:140px 0 60px}.page-hero .hero-title{font-size:clamp(36px, 6vw, 64px)}.page-hero .hero-subtitle{margin-bottom:0}.legal-content{padding:0 0 80px}.legal-document{display:grid;grid-template-columns:240px 1fr;gap:60px;max-width:1100px;margin:0 auto}.legal-nav{position:sticky;top:100px;align-self:start}.legal-nav h4{font-size:12px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}.legal-nav ul{display:flex;flex-direction:column;gap:8px}.legal-nav a{display:block;padding:8px 12px;font-size:14px;color:var(--gray-400);border-radius:var(--radius-md);transition:all var(--transition-fast)}.legal-nav a:hover{color:#fff;background:rgba(255,255,255,.05)}.legal-body{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);padding:48px}.legal-body section{margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.06)}.legal-body section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.legal-body h2{font-size:24px;font-weight:700;margin-bottom:20px;color:#fff}.legal-body h3{font-size:18px;font-weight:600;margin:24px 0 12px;color:var(--gray-200)}.legal-body p{font-size:15px;line-height:1.8;color:var(--gray-400);margin-bottom:16px}.legal-body ol,.legal-body ul{margin:16px 0;padding-left:24px}.legal-body ul{list-style:disc}.legal-body ol{list-style:decimal}.legal-body li{font-size:15px;line-height:1.8;color:var(--gray-400);margin-bottom:8px}.legal-body a{color:var(--primary-light)}.legal-body a:hover{color:#fff}.legal-body strong{color:var(--gray-200);font-weight:600}.cookie-table,.gdpr-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}.cookie-table td,.cookie-table th,.gdpr-table td,.gdpr-table th{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06)}.cookie-table th,.gdpr-table th{background:rgba(99,102,241,.1);color:var(--gray-200);font-weight:600}.cookie-table td,.gdpr-table td{color:var(--gray-400)}.cookie-table code{background:rgba(0,0,0,.3);padding:2px 6px;border-radius:4px;font-family:var(--font-mono);font-size:12px;color:var(--warning)}.rights-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:24px 0}.right-card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:20px}.right-card h3{font-size:16px;margin:0 0 8px 0;color:#fff}.right-card p{font-size:14px;margin:0}.about-content{padding:0 0 80px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:80px}.about-text h2{font-size:36px;font-weight:700;margin-bottom:20px}.about-text p{font-size:16px;line-height:1.8;color:var(--gray-400);margin-bottom:16px}.about-visual{display:flex;justify-content:center}.stats-section,.team-section,.values-section{margin-bottom:80px}.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.value-card{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);padding:32px;text-align:center;transition:all var(--transition-base)}.value-card:hover{transform:translateY(-4px);border-color:rgba(99,102,241,.3)}.value-icon{font-size:48px;margin-bottom:20px}.value-card h3{font-size:20px;font-weight:700;margin-bottom:12px}.value-card p{font-size:14px;color:var(--gray-400);line-height:1.6}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.stat-card{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);padding:32px;text-align:center}.stat-card .stat-value{font-size:48px;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-card .stat-label{font-size:14px;color:var(--gray-500);margin-top:8px}.blog-content{padding:0 0 80px}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:60px}.blog-card{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition-base)}.blog-card:hover{transform:translateY(-4px);border-color:rgba(99,102,241,.3);box-shadow:var(--shadow-glow)}.blog-image{aspect-ratio:16/9;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:48px}.blog-card-content{padding:24px}.blog-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px}.blog-tag{padding:4px 12px;background:rgba(99,102,241,.1);border-radius:var(--radius-full);font-size:12px;font-weight:500;color:var(--primary-light)}.blog-date{font-size:13px;color:var(--gray-500)}.blog-card h3{font-size:22px;font-weight:700;margin-bottom:12px;line-height:1.4}.blog-card h3 a{transition:color var(--transition-fast)}.blog-card h3 a:hover{color:var(--primary-light)}.blog-card p{font-size:14px;color:var(--gray-400);line-height:1.6;margin-bottom:16px}.blog-read-more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--primary-light);transition:all var(--transition-fast)}.blog-read-more:hover{gap:10px;color:#fff}.blog-read-more svg{width:16px;height:16px}.newsletter-section{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);padding:48px;text-align:center}.newsletter-section h3{font-size:24px;font-weight:700;margin-bottom:12px}.newsletter-section p{font-size:16px;color:var(--gray-400);margin-bottom:24px}.newsletter-form{display:flex;gap:12px;max-width:480px;margin:0 auto}.newsletter-form input{flex:1;padding:14px 20px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);font-size:14px;color:#fff}.newsletter-form input:focus{outline:0;border-color:var(--primary)}.contact-section{padding:80px 0}.contact-content{padding:0 0 80px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}.contact-form-container h2{font-size:24px;font-weight:700;margin-bottom:24px}.contact-info{display:flex;flex-direction:column;gap:20px}.info-card{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:24px;transition:all var(--transition-base)}.info-card:hover{border-color:rgba(99,102,241,.3);transform:translateY(-2px)}.info-card .info-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);margin-bottom:16px}.info-card .info-icon svg{width:24px;height:24px;color:#fff}.info-card .info-icon.gradient-1{background:linear-gradient(135deg,#6366f1 0,#8b5cf6 100%)}.info-card .info-icon.gradient-2{background:linear-gradient(135deg,#ec4899 0,#f43f5e 100%)}.info-card .info-icon.gradient-3{background:linear-gradient(135deg,#3b82f6 0,#06b6d4 100%)}.info-card .info-icon.gradient-4{background:linear-gradient(135deg,#10b981 0,#34d399 100%)}.info-card h3{font-size:18px;font-weight:600;margin-bottom:4px}.info-card p{font-size:14px;color:var(--gray-400);margin-bottom:8px}.info-card a{color:var(--primary-light);font-weight:500;transition:color var(--transition-fast)}.info-card a:hover{color:#fff}.contact-info h2{font-size:28px;font-weight:700;margin-bottom:16px}.contact-info>p{font-size:16px;color:var(--gray-400);margin-bottom:32px}.contact-methods{display:flex;flex-direction:column;gap:24px}.contact-method{display:flex;align-items:flex-start;gap:16px}.contact-method-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(99,102,241,.1);border-radius:var(--radius-lg);flex-shrink:0}.contact-method-icon svg{width:24px;height:24px;color:var(--primary-light)}.contact-method h4{font-size:16px;font-weight:600;margin-bottom:4px}.contact-method p{font-size:14px;color:var(--gray-400)}.contact-method a{color:var(--primary-light)}.contact-form-card{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);padding:40px}.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-form .form-group{margin-bottom:20px}.contact-form label{display:block;font-size:13px;font-weight:500;color:var(--gray-400);margin-bottom:8px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:14px 16px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);font-size:14px;color:#fff;transition:all var(--transition-fast)}.contact-form textarea{min-height:120px;resize:vertical}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.2)}.faq-section{margin-top:80px}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}.faq-item{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);padding:24px}.faq-item h4{font-size:16px;font-weight:600;margin-bottom:8px}.faq-item p{font-size:14px;color:var(--gray-400);line-height:1.6}.careers-content{padding:0 0 80px}.careers-intro{max-width:800px;margin:0 auto 60px;text-align:center}.careers-intro p{font-size:18px;color:var(--gray-400);line-height:1.8}.benefits-section{margin-bottom:80px}.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}.benefit-card{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);padding:32px;text-align:center;transition:all var(--transition-base)}.benefit-card:hover{transform:translateY(-4px);border-color:rgba(99,102,241,.3)}.benefit-icon{font-size:40px;margin-bottom:16px}.benefit-card h4{font-size:16px;font-weight:600;margin-bottom:8px}.benefit-card p{font-size:14px;color:var(--gray-400)}.positions-section{margin-bottom:80px}.positions-list{display:flex;flex-direction:column;gap:16px;margin-top:40px}.position-card{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);padding:24px 32px;transition:all var(--transition-base)}.position-card:hover{border-color:rgba(99,102,241,.3);transform:translateX(4px)}.position-info h4{font-size:18px;font-weight:600;margin-bottom:8px}.position-meta{display:flex;gap:16px}.position-meta span{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--gray-400)}.position-meta svg{width:16px;height:16px}.changelog-content{padding:0 0 80px}.changelog-list{max-width:800px;margin:0 auto}.changelog-item{display:grid;grid-template-columns:120px 1fr;gap:40px;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.06)}.changelog-item:first-child{padding-top:0}.changelog-item:last-child{border-bottom:none}.changelog-date{position:sticky;top:100px}.version-tag{display:inline-block;padding:6px 12px;background:var(--gradient-primary);border-radius:var(--radius-full);font-size:14px;font-weight:600;margin-bottom:8px}.changelog-date span{display:block;font-size:14px;color:var(--gray-500)}.changelog-details h3{font-size:24px;font-weight:700;margin-bottom:16px}.changelog-details p{font-size:15px;color:var(--gray-400);margin-bottom:20px;line-height:1.7}.change-list{margin-top:20px}.change-list h4{font-size:14px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}.change-list h4::before{content:'';width:8px;height:8px;border-radius:50%}.change-list.added h4::before{background:var(--success)}.change-list.improved h4::before{background:var(--primary)}.change-list.fixed h4::before{background:var(--warning)}.change-list ul{list-style:disc;padding-left:20px}.change-list li{font-size:14px;color:var(--gray-400);margin-bottom:8px}.status-content{padding:0 0 80px}.status-overview{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);padding:32px;margin-bottom:40px;display:flex;align-items:center;justify-content:space-between}.status-indicator{display:flex;align-items:center;gap:16px}.status-dot-large{width:16px;height:16px;border-radius:50%;background:var(--success);animation:pulse 2s ease-in-out infinite}.status-dot-large.degraded{background:var(--warning)}.status-dot-large.down{background:var(--error)}.status-text h2{font-size:24px;font-weight:700;margin-bottom:4px}.status-text p{font-size:14px;color:var(--gray-500)}.status-uptime{text-align:right}.uptime-value{font-size:36px;font-weight:800;color:var(--success)}.uptime-label{font-size:14px;color:var(--gray-500)}.uptime-section{margin-bottom:60px}.uptime-chart{display:flex;gap:2px;height:40px;margin-top:24px}.uptime-bar{flex:1;background:var(--success);border-radius:2px;transition:all var(--transition-fast);cursor:pointer}.uptime-bar:hover{transform:scaleY(1.2)}.uptime-bar.degraded{background:var(--warning)}.uptime-bar.down{background:var(--error)}.uptime-legend{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--gray-500)}.services-section{margin-bottom:60px}.services-list{display:flex;flex-direction:column;gap:12px;margin-top:24px}.service-item{display:flex;align-items:center;justify-content:space-between;background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:20px 24px}.service-info{display:flex;align-items:center;gap:12px}.service-status{width:10px;height:10px;border-radius:50%;background:var(--success)}.service-status.degraded{background:var(--warning)}.service-status.down{background:var(--error)}.service-name{font-size:16px;font-weight:500}.service-uptime{font-size:14px;color:var(--gray-500);font-family:var(--font-mono)}.incidents-section h3{font-size:20px;font-weight:700;margin-bottom:24px}.incidents-list{display:flex;flex-direction:column;gap:16px}.incident-item{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:24px}.incident-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}.incident-title{font-size:16px;font-weight:600}.incident-status{padding:4px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:500}.incident-status.resolved{background:rgba(16,185,129,.1);color:var(--success)}.incident-status.monitoring{background:rgba(245,158,11,.1);color:var(--warning)}.incident-date{font-size:13px;color:var(--gray-500);margin-bottom:12px}.incident-description{font-size:14px;color:var(--gray-400);line-height:1.6}.dashboard-page{min-height:100vh;display:flex;background:linear-gradient(180deg,#0a0a0f 0,#0d0d14 50%,#0a0a0f 100%);padding-top:0}.dashboard-page::before{display:none!important}.dashboard-page::after{display:none!important}.dashboard-page .sidebar{width:260px;min-width:260px;background:linear-gradient(180deg,#12121a 0,#0e0e16 100%);border-right:1px solid rgba(255,255,255,.08);position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;z-index:100;overflow-y:auto}.sidebar-header{padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.06)}.sidebar-header .logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700}.sidebar-header .logo-icon{font-size:22px}.sidebar-header .logo-highlight{color:var(--primary-light)}.dashboard-page .sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px}.dashboard-page .nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:14px;font-weight:500;color:var(--gray-400);border-radius:var(--radius-md);transition:all var(--transition-fast);text-decoration:none}.dashboard-page .nav-item:hover{color:#fff;background:rgba(255,255,255,.05)}.dashboard-page .nav-item.active{color:#fff;background:rgba(99,102,241,.2)}.dashboard-page .nav-item svg{width:20px;height:20px;flex-shrink:0}.sidebar-footer{padding:16px 12px;border-top:1px solid rgba(255,255,255,.06);margin-top:auto}.dashboard-main{flex:1;margin-left:260px;min-height:100vh;display:flex;flex-direction:column}.dashboard-header{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;background:rgba(10,10,15,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:50}.header-title h1{font-size:24px;font-weight:700;margin:0}.mobile-menu-toggle{display:none;padding:8px;color:var(--gray-400);background:0 0;border:none;cursor:pointer}.mobile-menu-toggle svg{width:24px;height:24px}.header-actions{display:flex;align-items:center;gap:16px}.user-menu{position:relative}.user-btn{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast)}.user-btn:hover{background:rgba(255,255,255,.1)}.user-avatar{width:32px;height:32px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff}.user-name{font-size:14px;font-weight:500;color:#fff}.user-btn svg{width:16px;height:16px;color:var(--gray-400)}.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:linear-gradient(145deg,#1a1a2e 0,#141420 100%);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all var(--transition-fast);z-index:100;box-shadow:0 10px 40px rgba(0,0,0,.4)}.user-dropdown.active{opacity:1;visibility:visible;transform:translateY(0)}.user-dropdown a{display:block;padding:10px 14px;font-size:14px;color:var(--gray-300);border-radius:var(--radius-md);transition:all var(--transition-fast)}.user-dropdown a:hover{background:rgba(255,255,255,.05);color:#fff}.dropdown-divider{height:1px;background:rgba(255,255,255,.06);margin:8px 0}.dashboard-section{display:none;padding:32px}.dashboard-section.active{display:block}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px}.stat-card{background:linear-gradient(145deg,#18182a 0,#13131f 100%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:24px;box-shadow:0 4px 20px rgba(0,0,0,.25)}.stat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.stat-label{font-size:13px;color:var(--gray-300);font-weight:500}.stat-badge{font-size:11px;padding:4px 8px;background:rgba(99,102,241,.15);color:var(--primary-light);border-radius:var(--radius-full);font-weight:500}.stat-value{font-size:36px;font-weight:800;color:#fff;margin-bottom:8px}.stat-value.success{color:var(--success)}.stat-progress{display:flex;flex-direction:column;gap:8px}.progress-bar{height:6px;background:rgba(255,255,255,.1);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:var(--radius-full);transition:width .5s ease}.progress-text{font-size:13px;color:var(--gray-400)}.stat-detail{font-size:13px;color:var(--gray-400)}.stat-detail a{color:var(--primary-light);font-weight:500}.stat-detail a:hover{text-decoration:underline}.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}.card{background:linear-gradient(145deg,#18182a 0,#13131f 100%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.25)}.card-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.06)}.card-header h3{font-size:16px;font-weight:600;margin:0}.card-link{font-size:13px;color:var(--primary-light);font-weight:500}.card-link:hover{text-decoration:underline}.card-body{padding:24px}.quick-start-code{position:relative;background:#0d0d14;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px}.quick-start-code pre{margin:0;overflow-x:auto}.quick-start-code code{font-family:var(--font-mono);font-size:13px;color:var(--gray-300);line-height:1.6}.quick-start-code .copy-btn{position:absolute;top:12px;right:12px;padding:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);color:var(--gray-400);cursor:pointer;transition:all var(--transition-fast)}.quick-start-code .copy-btn:hover{background:rgba(255,255,255,.1);color:#fff}.quick-start-code .copy-btn svg{width:16px;height:16px}.quick-links{display:flex;gap:12px}.quick-link{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md);font-size:13px;color:var(--gray-300);transition:all var(--transition-fast)}.quick-link:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.1)}.quick-link svg{width:16px;height:16px}.plan-info{display:flex;align-items:center;gap:16px}.plan-badge{padding:8px 16px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:var(--radius-md);font-size:14px;font-weight:600;color:#fff}.plan-details{flex:1}.plan-quota{font-size:15px;font-weight:500;color:#fff;margin-bottom:4px}.plan-reset{font-size:13px;color:var(--gray-400)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.section-header h2{font-size:20px;font-weight:700;margin:0 0 4px 0}.section-header p{font-size:14px;color:var(--gray-400);margin:0}.keys-list{display:flex;flex-direction:column;gap:12px}.key-card{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;background:linear-gradient(145deg,#1a1a2e 0,#151523 100%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);box-shadow:0 2px 10px rgba(0,0,0,.2)}.key-info{flex:1}.key-name{font-size:15px;font-weight:600;color:#fff;margin-bottom:6px}.key-value code{font-family:var(--font-mono);font-size:13px;color:var(--gray-400);background:rgba(0,0,0,.3);padding:4px 10px;border-radius:var(--radius-sm)}.key-meta{font-size:12px;color:var(--gray-500);margin-top:8px}.key-actions{display:flex;gap:8px}.key-actions button{padding:8px;color:var(--gray-400);background:0 0;border:none;cursor:pointer;transition:color var(--transition-fast)}.key-actions button:hover{color:var(--error)}.key-actions svg{width:18px;height:18px}.empty-state{text-align:center;padding:60px 40px;background:linear-gradient(145deg,#18182a 0,#13131f 100%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);box-shadow:0 4px 20px rgba(0,0,0,.25)}.empty-state svg{width:64px;height:64px;color:var(--gray-500);margin-bottom:20px}.empty-state h3{font-size:18px;font-weight:600;margin-bottom:8px}.empty-state p{font-size:14px;color:var(--gray-400);margin-bottom:24px}.loading-placeholder{text-align:center;padding:40px;color:var(--gray-400)}.billing-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.current-plan{text-align:center}.current-plan .plan-name{font-size:24px;font-weight:700;margin-bottom:8px}.current-plan .plan-price{font-size:36px;font-weight:800;margin-bottom:20px}.current-plan .plan-price span{font-size:14px;font-weight:400;color:var(--gray-400)}.current-plan .plan-features{text-align:left}.current-plan .feature{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;color:var(--gray-300)}.current-plan .feature svg{width:18px;height:18px;color:var(--success)}.plan-usage-summary{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}.plan-usage-summary .usage-label{font-size:12px;color:var(--gray-400);margin-bottom:8px}.plan-usage-summary .usage-bar{height:8px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}.plan-usage-summary .usage-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:4px;transition:width .3s ease}.plan-usage-summary .usage-text{font-size:13px;color:var(--gray-300);margin-top:8px;text-align:center}.plans-options{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.plan-option{position:relative;padding:16px 20px;background:linear-gradient(145deg,#151523 0,#0f0f1a 100%);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast)}.plan-option:hover{border-color:rgba(99,102,241,.3);background:rgba(99,102,241,.05)}.plan-option.popular{border-color:var(--primary)}.plan-option.selected{border-color:var(--primary);background:rgba(99,102,241,.1);box-shadow:0 0 20px rgba(99,102,241,.2)}.plan-option.selected::after{content:'';position:absolute;top:12px;left:12px;width:18px;height:18px;background:var(--primary);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:12px;background-repeat:no-repeat;background-position:center}.popular-tag{position:absolute;top:-10px;right:16px;padding:4px 10px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:var(--radius-full);font-size:11px;font-weight:600;color:#fff}.plan-option-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.plan-option-name{font-size:15px;font-weight:600}.plan-option-price{font-size:15px;font-weight:600;color:var(--primary-light)}.plan-option-quota{font-size:13px;color:var(--gray-400)}.settings-grid{display:flex;flex-direction:column;gap:24px}.danger-zone .card-header h3{color:var(--error)}.danger-item{display:flex;align-items:center;justify-content:space-between;gap:20px}.danger-item h4{font-size:15px;font-weight:600;margin-bottom:4px}.danger-item p{font-size:13px;color:var(--gray-400);margin:0}.form-hint{font-size:12px;color:var(--gray-500);margin-top:6px;display:block}.status-badge{display:inline-block;padding:4px 10px;border-radius:var(--radius-full);font-size:12px;font-weight:500}.status-badge.success{background:rgba(16,185,129,.15);color:var(--success)}.status-badge.error{background:rgba(239,68,68,.15);color:var(--error)}.key-created-notice{display:flex;align-items:center;gap:12px;padding:16px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);border-radius:var(--radius-lg);margin-bottom:20px}.key-created-notice svg{width:24px;height:24px;color:var(--warning);flex-shrink:0}.key-created-notice p{font-size:14px;color:var(--warning);margin:0}.new-key-display{display:flex;align-items:center;gap:12px;padding:16px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);margin-bottom:20px}.new-key-display code{flex:1;font-family:var(--font-mono);font-size:14px;color:var(--primary-light);word-break:break-all}.new-key-display .copy-btn{padding:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);color:var(--gray-400);cursor:pointer;transition:all var(--transition-fast)}.new-key-display .copy-btn:hover{background:rgba(255,255,255,.1);color:#fff}.new-key-display .copy-btn svg{width:16px;height:16px}.toast{position:fixed;bottom:24px;right:24px;display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--gray-800);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);box-shadow:0 20px 40px rgba(0,0,0,.4);transform:translateY(100px);opacity:0;transition:all .3s ease;z-index:10000}.toast.active{transform:translateY(0);opacity:1}.toast.error{border-color:rgba(239,68,68,.3)}.toast.error .toast-icon{color:var(--error)}.toast-icon{color:var(--success)}.toast-icon svg{width:20px;height:20px}.toast-message{font-size:14px;color:#fff}@media (max-width:1200px){.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.billing-grid{grid-template-columns:1fr}}@media (max-width:992px){.dashboard-page .sidebar{transform:translateX(-100%);transition:transform .3s ease}.dashboard-page .sidebar.open{transform:translateX(0)}.dashboard-main{margin-left:0}.mobile-menu-toggle{display:block}}@media (max-width:768px){.stats-grid{grid-template-columns:1fr}.dashboard-section{padding:20px}.dashboard-header{padding:16px 20px}.quick-links{flex-direction:column}.key-card{flex-direction:column;align-items:flex-start;gap:16px}.key-actions{width:100%;justify-content:flex-end}}.usage-table-container{overflow-x:auto;background:linear-gradient(145deg,#18182a 0,#13131f 100%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);box-shadow:0 4px 20px rgba(0,0,0,.25)}.dashboard-section.active{display:block}.stats-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:32px}.stat-card{background:linear-gradient(145deg,#18182a 0,#13131f 100%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:24px;box-shadow:0 4px 20px rgba(0,0,0,.25)}.stat-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.stat-card-label{font-size:13px;color:var(--gray-500)}.stat-card-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(99,102,241,.1);border-radius:var(--radius-md)}.stat-card-icon svg{width:20px;height:20px;color:var(--primary-light)}.stat-card-value{font-size:32px;font-weight:800;margin-bottom:4px}.stat-card-change{font-size:13px;color:var(--success)}.stat-card-change.negative{color:var(--error)}.dashboard-card{background:var(--gradient-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);padding:24px;margin-bottom:24px}.dashboard-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.dashboard-card-header h3{font-size:18px;font-weight:600}.api-keys-list{display:flex;flex-direction:column;gap:12px}.api-key-item{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg)}.api-key-info{display:flex;align-items:center;gap:16px}.api-key-name{font-size:15px;font-weight:500}.api-key-value{font-family:var(--font-mono);font-size:13px;color:var(--gray-500);background:rgba(0,0,0,.3);padding:4px 10px;border-radius:var(--radius-sm)}.api-key-actions{display:flex;gap:8px}.api-key-actions button{padding:8px;color:var(--gray-500);transition:color var(--transition-fast)}.api-key-actions button:hover{color:#fff}.api-key-actions svg{width:18px;height:18px}.usage-table{width:100%;border-collapse:collapse}.usage-table td,.usage-table th{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06)}.usage-table th{font-size:13px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}.usage-table td{font-size:14px;color:var(--gray-300)}.usage-table code{font-family:var(--font-mono);font-size:12px;color:var(--warning)}.settings-form{max-width:500px}.settings-form .form-group{margin-bottom:24px}.settings-form label{display:block;font-size:14px;font-weight:500;color:var(--gray-400);margin-bottom:8px}.settings-form input{width:100%;padding:12px 16px;background:#0d0d14;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);font-size:14px;color:#fff}.settings-form input::placeholder{color:var(--gray-500)}.settings-form input:disabled{opacity:.6;cursor:not-allowed}.settings-form input:focus{outline:0;border-color:var(--primary)}.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.plan-card{background:linear-gradient(145deg,#18182a 0,#13131f 100%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:24px;box-shadow:0 4px 20px rgba(0,0,0,.25);text-align:center;transition:all var(--transition-base)}.plan-card:hover{border-color:rgba(99,102,241,.3)}.plan-card.current{border-color:var(--primary);background:rgba(99,102,241,.1)}.plan-card h4{font-size:18px;font-weight:600;margin-bottom:8px}.plan-card .plan-price{font-size:32px;font-weight:800;margin-bottom:16px}.plan-card .plan-price span{font-size:14px;font-weight:400;color:var(--gray-500)}.plan-card ul{text-align:left;margin-bottom:20px}.plan-card li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray-400);padding:6px 0}.plan-card li svg{width:16px;height:16px;color:var(--success)}.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:10000;padding:20px}.modal.active{display:flex}.modal-content{background:linear-gradient(145deg,#1a1a2e 0,#141420 100%);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);padding:32px;max-width:480px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5)}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.modal-header h3{font-size:20px;font-weight:700}.modal-close{padding:8px;color:var(--gray-500);transition:color var(--transition-fast)}.modal-close:hover{color:#fff}.modal-close svg{width:20px;height:20px}.modal-body{margin-bottom:24px}.modal-footer{display:flex;gap:12px;justify-content:flex-end}.modal-sm{max-width:420px}.modal-form .form-group{margin-bottom:24px}.modal-form .form-group label{display:block;font-size:14px;font-weight:600;color:var(--gray-200);margin-bottom:10px}.modal-form .form-group input{width:100%;padding:14px 16px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);font-size:15px;color:#fff;transition:all var(--transition-fast)}.modal-form .form-group input::placeholder{color:var(--gray-500)}.modal-form .form-group input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.2);background:rgba(0,0,0,.5)}.modal-form .form-hint{font-size:12px;color:var(--gray-500);margin-top:8px}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}.key-card{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;background:linear-gradient(145deg,#1e1e32 0,#171728 100%);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);box-shadow:0 4px 20px rgba(0,0,0,.25);gap:16px;transition:all var(--transition-fast)}.key-card:hover{border-color:rgba(99,102,241,.2);box-shadow:0 6px 24px rgba(0,0,0,.3)}.key-info{flex:1;min-width:0}.key-name{font-weight:600;font-size:15px;color:var(--white);margin-bottom:8px}.key-value-row{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.3);border-radius:var(--radius-md);padding:4px;border:1px solid rgba(255,255,255,.06)}.key-full{font-family:var(--font-mono);font-size:12px;color:#a5b4fc;background:0 0;padding:8px 12px;border-radius:var(--radius-sm);word-break:break-all;flex:1;min-width:200px;letter-spacing:.3px;border:none}.copy-key-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;background:var(--primary);border:none;border-radius:var(--radius-sm);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;text-transform:uppercase;letter-spacing:.5px}.copy-key-btn:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,.4)}.copy-key-btn.copied{background:var(--success);color:#fff}.copy-key-btn svg{width:14px;height:14px}.key-meta{font-size:12px;color:var(--gray-500);margin-top:10px}.key-actions{display:flex;align-items:center;gap:8px}.btn-delete-key{padding:10px;background:0 0;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);color:var(--gray-500);cursor:pointer;transition:all var(--transition-fast)}.btn-delete-key:hover{background:rgba(239,68,68,.15);border-color:var(--error);color:var(--error)}.btn-delete-key svg{width:18px;height:18px}.upgrade-card{border:1px solid rgba(99,102,241,.3);background:linear-gradient(145deg,rgba(99,102,241,.05) 0,#141420 100%)}.upgrade-cta-badge{padding:4px 12px;background:var(--gradient-primary);border-radius:var(--radius-full);font-size:11px;font-weight:600;color:#fff}.plan-option-features{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}.plan-option-features li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gray-400);padding:4px 0}.plan-option-features li::before{content:'✓';color:var(--success);font-size:11px}.btn-upgrade-cta{margin-top:8px;animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 4px 15px rgba(99,102,241,.4)}50%{box-shadow:0 4px 25px rgba(99,102,241,.6)}}.view-pricing-link{display:block;text-align:center;margin-top:16px;font-size:13px;color:var(--gray-400);transition:color var(--transition-fast)}.view-pricing-link:hover{color:var(--primary-light)}@media (max-width:1200px){.stats-cards{grid-template-columns:repeat(2,1fr)}.plans-grid{grid-template-columns:repeat(2,1fr)}.benefits-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:992px){.legal-document{grid-template-columns:1fr}.legal-nav{position:static;margin-bottom:32px}.about-grid{grid-template-columns:1fr;gap:40px}.contact-grid{grid-template-columns:1fr;gap:40px}.contact-section{padding:60px 0}.contact-form-card{padding:24px}.info-card{padding:20px}.dashboard-sidebar{display:none}.dashboard-main{margin-left:0}.rights-grid{grid-template-columns:1fr}}@media (max-width:768px){.auth-card{padding:24px}.legal-body{padding:24px}.blog-grid{grid-template-columns:1fr}.values-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.benefits-grid{grid-template-columns:1fr}.faq-grid{grid-template-columns:1fr}.changelog-item{grid-template-columns:1fr;gap:16px}.changelog-date{position:static}.status-overview{flex-direction:column;text-align:center;gap:24px}.status-indicator{flex-direction:column}.status-uptime{text-align:center}.stats-cards{grid-template-columns:1fr}.plans-grid{grid-template-columns:1fr}.newsletter-form{flex-direction:column}.position-card{flex-direction:column;align-items:flex-start;gap:16px}}@media (max-width:480px){.social-auth{flex-direction:column}.contact-form .form-row{grid-template-columns:1fr}}.admin-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:4px 8px;background:linear-gradient(135deg,var(--accent),var(--primary));border-radius:var(--radius-full);color:#fff;margin-left:12px}.admin-avatar{background:linear-gradient(135deg,#f59e0b,#ef4444)!important}.admin-stats{grid-template-columns:repeat(4,1fr)}.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px}.admin-card{background:linear-gradient(145deg,#1a1a2e 0,#141420 100%);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);padding:24px}.admin-card.full-width{grid-column:span 2}.admin-card h3{font-size:16px;font-weight:600;margin:0 0 16px 0;color:var(--gray-200)}.system-status{display:flex;flex-direction:column;gap:12px}.status-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}.status-item:last-child{border-bottom:none}.status-label{color:var(--gray-400);font-size:14px}.status-value{font-weight:500;font-size:14px}.status-value.success{color:var(--success)}.status-value.error{color:var(--error)}.status-value.loading{color:var(--gray-400)}.section-header-row{display:flex;gap:16px;margin-bottom:24px}.search-box{display:flex;align-items:center;gap:12px;padding:10px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);flex:1;max-width:400px}.search-box svg{width:18px;height:18px;color:var(--gray-400)}.search-box input{flex:1;background:0 0;border:none;color:#fff;font-size:14px;outline:0}.search-box input::placeholder{color:var(--gray-500)}.filter-select{padding:10px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:#fff;font-size:14px;cursor:pointer;outline:0}.filter-select option{background:#1a1a2e;color:#fff}.table-container{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;font-size:14px}.data-table td,.data-table th{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.05)}.data-table th{font-weight:600;color:var(--gray-400);font-size:12px;text-transform:uppercase;letter-spacing:.5px}.data-table td{color:var(--gray-200)}.data-table tr:hover td{background:rgba(255,255,255,.02)}.data-table td.loading{text-align:center;color:var(--gray-400);padding:32px}.plan-badge{display:inline-block;padding:4px 10px;border-radius:var(--radius-full);font-size:12px;font-weight:500;text-transform:capitalize}.plan-badge.plan-free{background:rgba(107,114,128,.2);color:var(--gray-300)}.plan-badge.plan-starter{background:rgba(99,102,241,.2);color:var(--primary-light)}.plan-badge.plan-pro{background:rgba(236,72,153,.2);color:var(--accent)}.plan-badge.plan-business{background:rgba(245,158,11,.2);color:#f59e0b}.status-badge{display:inline-block;padding:4px 10px;border-radius:var(--radius-full);font-size:12px;font-weight:500}.status-badge.active{background:rgba(16,185,129,.2);color:var(--success)}.status-badge.inactive{background:rgba(239,68,68,.2);color:var(--error)}.btn-sm{padding:6px 12px;font-size:12px}.pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}#pageInfo{color:var(--gray-400);font-size:14px}.positive{color:var(--success)}.negative{color:var(--error)}.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all var(--transition-fast)}.modal.active{opacity:1;visibility:visible}.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}.modal-content{position:relative;width:90%;max-width:480px;background:linear-gradient(145deg,#1a1a2e 0,#141420 100%);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);padding:24px;transform:translateY(20px);transition:transform var(--transition-fast)}.modal.active .modal-content{transform:translateY(0)}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.modal-header h3{font-size:18px;font-weight:600;margin:0}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:none;border-radius:50%;color:var(--gray-400);font-size:20px;cursor:pointer;transition:all var(--transition-fast)}.modal-close:hover{background:rgba(255,255,255,.1);color:#fff}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--gray-200)}.checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary)}@media (max-width:1024px){.admin-stats{grid-template-columns:repeat(2,1fr)}.admin-grid{grid-template-columns:1fr}.admin-card.full-width{grid-column:span 1}}@media (max-width:768px){.admin-stats{grid-template-columns:1fr}.section-header-row{flex-direction:column}.search-box{max-width:none}}.storage-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.storage-stats{display:flex;flex-direction:column;gap:16px}.storage-usage-display{display:flex;flex-direction:column;gap:8px}.storage-usage-bar{height:12px;background:rgba(255,255,255,.1);border-radius:var(--radius-full);overflow:hidden}.storage-usage-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:var(--radius-full);transition:width .3s ease}.storage-usage-text{font-size:14px;color:var(--gray-400)}.storage-note{font-size:13px;color:var(--gray-500);padding:12px;background:rgba(255,255,255,.03);border-radius:var(--radius-md)}.s3-status{display:flex;align-items:center;gap:8px;margin-bottom:16px}.s3-bucket-name{font-family:var(--font-mono);font-size:13px;color:var(--gray-400)}.card-description{font-size:14px;color:var(--gray-400);margin-bottom:16px}.storage-gallery-card{margin-top:0}.storage-gallery-card .card-header{display:flex;justify-content:space-between;align-items:center}.file-count{font-size:13px;color:var(--gray-500);font-weight:400}.storage-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;min-height:200px}.storage-file-item{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:all .2s ease}.storage-file-item:hover{border-color:var(--primary);transform:translateY(-2px)}.storage-file-thumb{width:100%;height:120px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.2);overflow:hidden}.storage-file-thumb img{width:100%;height:100%;object-fit:cover}.storage-file-placeholder{font-size:14px;font-weight:600;color:var(--gray-500);padding:8px 16px;background:rgba(255,255,255,.05);border-radius:var(--radius-sm)}.storage-file-info{padding:12px;display:flex;justify-content:space-between;align-items:center}.storage-file-format{font-size:11px;font-weight:600;color:var(--primary);text-transform:uppercase}.storage-file-size{font-size:12px;color:var(--gray-500)}.storage-pagination{display:flex;justify-content:center;margin-top:24px}.file-preview-container{display:flex;justify-content:center;align-items:center;max-height:60vh;overflow:hidden;margin-bottom:24px;background:rgba(0,0,0,.3);border-radius:var(--radius-md)}.file-preview-container img{max-width:100%;max-height:60vh;object-fit:contain}.file-preview-actions{display:flex;gap:12px;justify-content:center}.modal-description{font-size:14px;color:var(--gray-400);margin-bottom:20px}.modal-lg .modal-content{max-width:800px}.status-badge.success{background:rgba(16,185,129,.1);color:var(--success)}@media (max-width:768px){.storage-grid{grid-template-columns:1fr}.storage-gallery{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.storage-file-thumb{height:90px}}.storage-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.storage-vault-toggle{display:flex;align-items:center;gap:12px;padding:12px 20px;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.3);border-radius:12px}.storage-vault-toggle.active{background:linear-gradient(135deg,rgba(0,212,255,.15),rgba(139,92,246,.15));border-color:var(--primary)}.vault-toggle-info{display:flex;flex-direction:column;gap:2px}.vault-toggle-title{font-weight:600;font-size:14px;color:var(--text-primary)}.vault-toggle-subtitle{font-size:12px;color:var(--text-secondary)}.vault-switch{width:44px;height:24px;background:rgba(255,255,255,.1);border-radius:12px;position:relative;cursor:pointer;transition:background .2s}.vault-switch.active{background:var(--primary)}.vault-switch::after{content:'';position:absolute;width:20px;height:20px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform .2s}.vault-switch.active::after{transform:translateX(20px)}.storage-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}.storage-overview-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px}.storage-overview-card h3{font-size:16px;font-weight:600;margin-bottom:20px;display:flex;align-items:center;gap:8px}.storage-overview-card h3 svg{width:20px;height:20px;color:var(--primary)}.storage-meter{margin-bottom:16px}.storage-meter-bar{height:8px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden;margin-bottom:8px}.storage-meter-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:4px;transition:width .3s}.storage-meter-text{display:flex;justify-content:space-between;font-size:13px;color:var(--text-secondary)}.storage-meter-text strong{color:var(--text-primary)}.s3-config-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px}.s3-config-card h3{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}.s3-config-card h3 svg{width:20px;height:20px;color:var(--secondary)}.s3-config-card p{font-size:14px;color:var(--text-secondary);margin-bottom:16px;line-height:1.5}.s3-status-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}.s3-status-badge{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500}.s3-status-badge.not-configured{background:rgba(156,163,175,.15);color:var(--text-secondary)}.s3-status-badge.configured{background:rgba(16,185,129,.15);color:var(--success)}.btn-configure-s3{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(0,212,255,.2));border:1px solid rgba(139,92,246,.3);border-radius:8px;color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.btn-configure-s3:hover{background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(0,212,255,.3));border-color:var(--primary)}.btn-configure-s3 svg{width:16px;height:16px}.gallery-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;overflow:hidden}.gallery-card-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border-color)}.gallery-card-header h3{font-size:16px;font-weight:600}.gallery-file-count{font-size:13px;color:var(--text-secondary)}.gallery-body{padding:24px}.gallery-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center}.gallery-empty-icon{width:80px;height:80px;background:rgba(139,92,246,.1);border-radius:20px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}.gallery-empty-icon svg{width:36px;height:36px;color:var(--secondary);opacity:.6}.gallery-empty h4{font-size:18px;font-weight:600;margin-bottom:8px}.gallery-empty p{font-size:14px;color:var(--text-secondary);max-width:300px}.gallery-empty code{background:rgba(139,92,246,.15);padding:2px 8px;border-radius:4px;font-size:13px}.billing-compact-grid{display:grid;grid-template-columns:350px 1fr;gap:24px;align-items:start}.current-plan-compact{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px}.plan-header-compact{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.plan-name-badge{display:flex;align-items:center;gap:12px}.plan-name-badge .badge{padding:6px 14px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:20px;font-weight:600;font-size:14px}.plan-price-compact{font-size:28px;font-weight:700}.plan-price-compact span{font-size:14px;font-weight:400;color:var(--text-secondary)}.plan-usage-compact{background:rgba(255,255,255,.03);border-radius:12px;padding:16px;margin-bottom:16px}.plan-usage-header{display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px}.plan-usage-header span:first-child{color:var(--text-secondary)}.plan-usage-header span:last-child{font-weight:500}.plan-usage-bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}.plan-usage-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:3px}.plan-features-compact{display:flex;flex-direction:column;gap:8px}.plan-feature-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary)}.plan-feature-item svg{width:16px;height:16px;color:var(--success)}.upgrade-options-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px}.upgrade-options-card h3{font-size:18px;font-weight:600;margin-bottom:20px}.upgrade-plans-row{display:flex;gap:16px;margin-bottom:20px}.upgrade-plan-option{flex:1;padding:20px;background:rgba(255,255,255,.02);border:2px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s;position:relative}.upgrade-plan-option:hover{border-color:rgba(139,92,246,.5)}.upgrade-plan-option.selected{border-color:var(--primary);background:rgba(139,92,246,.05)}.popular-badge{position:absolute;top:-10px;right:16px;padding:4px 10px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:10px;font-size:11px;font-weight:600}.upgrade-plan-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.upgrade-plan-name{font-weight:600;font-size:16px}.upgrade-plan-price{font-weight:700;color:var(--primary)}.upgrade-plan-quota{font-size:13px;color:var(--text-secondary);margin-bottom:12px}.upgrade-plan-features{list-style:none;padding:0;margin:0}.upgrade-plan-features li{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);margin-bottom:6px}.upgrade-plan-features li::before{content:'✓';color:var(--success);font-size:11px}@media (max-width:900px){.billing-compact-grid{grid-template-columns:1fr}.upgrade-plans-row{flex-direction:column}.storage-cards-grid{grid-template-columns:1fr}}
/* FAQ Section Styles - Added 2026-02-03 */
.faq-section {
    padding: var(--section-padding) 0;
}

.faq-section .faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.faq-section .faq-item {
    background: var(--gradient-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all var(--transition-base);
}

.faq-section .faq-item:hover {
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
}

.faq-section .faq-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: white;
}

.faq-section .faq-item p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-400);
    margin: 0;
}

.faq-cta {
    text-align: center;
    padding: 24px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-lg);
}

.faq-cta p {
    font-size: 15px;
    color: var(--gray-300);
    margin: 0;
}

.faq-cta a {
    color: var(--primary-light);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.faq-cta a:hover {
    color: white;
}

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

/* ============================================
   UNIFIED BLOG POST STYLES
   ============================================ */
.blog-hero { padding: 140px 0 40px; text-align: center; }
.blog-hero h1 { font-size: clamp(2rem, 5vw, 2.75rem); max-width: 800px; margin: 0 auto 1rem; line-height: 1.3; }
.blog-hero .blog-meta { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--gray-500); margin-bottom: 2rem; }
.blog-hero-img { width: 100%; max-width: 800px; height: auto; max-height: 400px; object-fit: cover; border-radius: var(--radius-xl); margin: 2rem auto 0; display: block; }
.blog-img-credit { font-size: 0.75rem; color: var(--gray-600); text-align: center; margin-top: 0.5rem; }

/* Blog article content */
.blog-content.article-body { max-width: 720px; margin: 0 auto; padding: 2rem 24px 4rem; }
.blog-content h2 { font-size: 1.75rem; margin: 3rem 0 1rem; color: #fff; }
.blog-content h3 { font-size: 1.25rem; margin: 2rem 0 0.75rem; color: var(--gray-200); }
.blog-content p { line-height: 1.8; color: var(--gray-300); margin-bottom: 1.5rem; }
.blog-content ul, .blog-content ol { margin-bottom: 1.5rem; padding-left: 1.5rem; color: var(--gray-300); }
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li { margin-bottom: 0.5rem; line-height: 1.7; color: var(--gray-300); }
.blog-content strong { color: var(--gray-100); }
.blog-content a { color: var(--primary-light); text-decoration: none; transition: color var(--transition-fast); }
.blog-content a:hover { color: #fff; text-decoration: underline; }
.blog-content img { max-width: 100%; border-radius: var(--radius-lg); margin: 1.5rem 0; }
.blog-content code { background: rgba(99, 102, 241, 0.15); padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.9em; color: var(--primary-light); font-family: var(--font-mono); }
.blog-content pre { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 1.5rem; overflow-x: auto; margin: 1.5rem 0; }
.blog-content pre code { background: none; padding: 0; color: var(--gray-200); display: block; line-height: 1.7; }
.blog-content blockquote { border-left: 4px solid var(--primary); padding: 1rem 1.5rem; margin: 2rem 0; background: rgba(99, 102, 241, 0.05); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.blog-content blockquote p { color: var(--gray-400); font-style: italic; margin-bottom: 0; }
.blog-date { color: var(--gray-500); font-size: 0.9rem; margin-bottom: 2rem; }

/* Blog callout & CTA boxes */
.callout { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08)); border: 1px solid rgba(99, 102, 241, 0.25); border-radius: var(--radius-lg); padding: 1.5rem; margin: 2rem 0; }
.callout h4 { margin: 0 0 0.5rem 0; color: var(--primary-light); font-size: 1rem; }
.callout p { margin-bottom: 0; }
.cta-box { background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1)); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: var(--radius-xl); padding: 2rem; text-align: center; margin: 3rem 0; }
.cta-box h3 { color: #fff; margin: 0 0 0.75rem 0; font-size: 1.5rem; }
.cta-box p { margin: 0 0 1.25rem 0; color: var(--gray-300); }
.cta-box a.btn, .cta-box a { display: inline-block; background: var(--gradient-primary); color: #fff; padding: 12px 32px; border-radius: var(--radius-lg); text-decoration: none; font-weight: 600; transition: all var(--transition-base); }
.cta-box a:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99,102,241,.4); text-decoration: none; }

/* ============================================
   UNIFIED COMPARISON PAGE STYLES
   ============================================ */
.comparison-hero { padding: 140px 0 60px; text-align: center; }
.comparison-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; }
.comparison-hero p { font-size: 1.25rem; color: var(--gray-400); max-width: 700px; margin: 0 auto 2rem; }
.comparison-table { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); overflow: hidden; margin: 2rem 0; }
.comparison-table table { width: 100%; border-collapse: collapse; }
.comparison-table th, .comparison-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 14px; }
.comparison-table th { background: rgba(99, 102, 241, 0.15); font-weight: 600; color: var(--gray-200); }
.comparison-table td { color: var(--gray-400); }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
.comparison-table tr:hover td { background: rgba(99, 102, 241, 0.05); }
.check { color: var(--success); }
.cross { color: var(--error); }
.partial { color: var(--warning); }
.highlight-row, .highlight-row td { background: rgba(99, 102, 241, 0.08) !important; }
.winner-badge { display: inline-block; background: var(--gradient-primary); color: #fff; padding: 0.2rem 0.65rem; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 600; margin-left: 0.5rem; vertical-align: middle; }
.comparison-section { padding: 4rem 0; max-width: 900px; margin: 0 auto; }
.comparison-section h2 { font-size: 1.75rem; margin-bottom: 1.5rem; }
.comparison-section p { color: var(--gray-400); line-height: 1.8; margin-bottom: 1rem; }
.comparison-section ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.comparison-section li { color: var(--gray-400); margin-bottom: 0.5rem; line-height: 1.7; }
.verdict-card { background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08)); border: 1px solid rgba(99, 102, 241, 0.25); border-radius: var(--radius-xl); padding: 2rem; margin: 3rem 0; }
.verdict-card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: #fff; }
.verdict-card p { color: var(--gray-300); line-height: 1.8; }
.price-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.price-card { background: var(--gradient-card); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); padding: 2rem; text-align: center; transition: all var(--transition-base); }
.price-card:hover { transform: translateY(-4px); border-color: rgba(99,102,241,.3); }
.price-card.featured { border-color: var(--primary); box-shadow: var(--shadow-glow); }
.price-card h4 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.price-card .price { font-size: 2.5rem; font-weight: 700; color: var(--primary-light); }
.price-card .unit { color: var(--gray-500); font-size: 1rem; }
.price-card ul { list-style: none; padding: 0; margin: 1.5rem 0; text-align: left; }
.price-card li { padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--gray-400); font-size: 14px; }
.cta-section { text-align: center; padding: 4rem 0; }

/* ============================================
   UNIFIED TOOLS PAGE STYLES
   ============================================ */
.tool-container { max-width: 900px; margin: 0 auto; }
.tool-input-section { background: var(--gradient-card); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-xl); padding: 32px; margin-bottom: 32px; }
.tool-input-row { display: flex; gap: 12px; margin-bottom: 20px; }
.tool-input-row input { flex: 1; padding: 14px 18px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); font-size: 15px; color: #fff; transition: all var(--transition-fast); }
.tool-input-row input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.2); }
.tool-input-row input::placeholder { color: var(--gray-500); }
.tool-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tool-options label { font-size: 13px; font-weight: 600; color: var(--gray-400); margin-bottom: 6px; display: block; }
.tool-options select { width: 100%; padding: 10px 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); font-size: 14px; color: #fff; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: all var(--transition-fast); }
.tool-options select:focus { outline: 0; border-color: var(--primary); }
.tool-toggles { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.toggle-chip { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); cursor: pointer; font-size: 14px; color: var(--gray-300); transition: all var(--transition-fast); user-select: none; }
.toggle-chip:hover { background: rgba(255,255,255,.05); border-color: rgba(99,102,241,.3); }
.toggle-chip.active { background: rgba(99,102,241,.1); border-color: var(--primary); color: #fff; }
.tool-result-section { background: var(--gradient-card); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-xl); overflow: hidden; }
.tool-result-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,.06); }
.tool-result-body { padding: 24px; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.tool-result-body img { max-width: 100%; border-radius: var(--radius-lg); }

/* ============================================
   UNIFIED USE-CASE PAGE STYLES  
   ============================================ */
.use-case-hero { padding: 140px 0 60px; text-align: center; }
.use-case-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; }
.use-case-hero p { font-size: 1.25rem; color: var(--gray-400); max-width: 700px; margin: 0 auto; }
.use-case-content { max-width: 900px; margin: 0 auto; padding: 0 24px 80px; }
.use-case-content h2 { font-size: 1.75rem; margin: 3rem 0 1rem; color: #fff; }
.use-case-content h3 { font-size: 1.25rem; margin: 2rem 0 0.75rem; color: var(--gray-200); }
.use-case-content p { line-height: 1.8; color: var(--gray-400); margin-bottom: 1.5rem; }
.use-case-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.use-case-content li { color: var(--gray-400); margin-bottom: 0.5rem; line-height: 1.7; }
.use-case-content pre { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 1.5rem; overflow-x: auto; margin: 1.5rem 0; }
.use-case-content code { font-family: var(--font-mono); font-size: 0.9em; }
.use-case-content pre code { color: var(--gray-200); }
.use-case-content a { color: var(--primary-light); }

/* ============================================
   DOCS PAGES - UNIFIED SIDEBAR + CONTENT
   ============================================ */
.docs-page { display: grid; grid-template-columns: 260px 1fr; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 140px 24px 80px; }
.docs-sidebar { position: sticky; top: 100px; align-self: start; }
.docs-sidebar h4 { font-size: 12px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.docs-sidebar ul { display: flex; flex-direction: column; gap: 4px; }
.docs-sidebar a { display: block; padding: 8px 12px; font-size: 14px; color: var(--gray-400); border-radius: var(--radius-md); transition: all var(--transition-fast); }
.docs-sidebar a:hover, .docs-sidebar a.active { color: #fff; background: rgba(99,102,241,.15); }
.docs-body { min-width: 0; }
.docs-body h1 { font-size: 2.25rem; margin-bottom: 1rem; }
.docs-body h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.docs-body h3 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
.docs-body p { line-height: 1.8; color: var(--gray-400); margin-bottom: 1rem; }
.docs-body pre { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 1.25rem; overflow-x: auto; margin: 1rem 0 1.5rem; }
.docs-body code { font-family: var(--font-mono); font-size: 0.9em; }
.docs-body pre code { color: var(--gray-200); line-height: 1.7; }
.docs-body :not(pre) > code { background: rgba(99, 102, 241, 0.15); padding: 0.15rem 0.5rem; border-radius: 4px; color: var(--primary-light); }
.docs-body table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; }
.docs-body th, .docs-body td { padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; }
.docs-body th { font-weight: 600; color: var(--gray-200); background: rgba(99,102,241,.08); }
.docs-body td { color: var(--gray-400); }

@media (max-width: 768px) {
    .docs-page { grid-template-columns: 1fr; padding-top: 120px; }
    .docs-sidebar { position: static; }
    .comparison-hero h1 { font-size: 2rem; }
    .comparison-table th, .comparison-table td { padding: 0.75rem; font-size: 13px; }
    .tool-input-row { flex-direction: column; }
    .tool-options { grid-template-columns: 1fr; }
}

/* ============================================
   GLOBAL POLISH - SMOOTH TRANSITIONS & HOVER
   ============================================ */
a, button, .btn, input, select, textarea { transition: all var(--transition-fast); }

/* Selection color */
::selection { background: rgba(99, 102, 241, 0.3); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Focus visible for accessibility */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Smooth image loading */
img { transition: opacity 0.3s ease; }



/* ============================================
   LIGHT THEME
   ============================================ */
[data-theme="light"] body {
  color: #111827;
  background: #f5f5f0;
}
[data-theme="light"] .bg-gradient,
[data-theme="light"] .bg-grid,
[data-theme="light"] .bg-glow,
[data-theme="light"] .bg-glow-1,
[data-theme="light"] .bg-glow-2,
[data-theme="light"] .bg-glow-3 {
  display: none;
}
[data-theme="light"] .navbar {
  background: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
[data-theme="light"] .navbar.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
[data-theme="light"] .logo-text { color: #111827; }
[data-theme="light"] .nav-links a { color: #6b7280; }
[data-theme="light"] .nav-links a:hover { color: #111827; }
[data-theme="light"] .hero-title { color: #111827; }
[data-theme="light"] .hero-subtitle { color: #6b7280; }
[data-theme="light"] .stat-value { color: #111827; }
[data-theme="light"] .stat-label { color: #6b7280; }
[data-theme="light"] .feature-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .docs-card,
[data-theme="light"] .sdk-card,
[data-theme="light"] .blog-card,
[data-theme="light"] .value-card,
[data-theme="light"] .benefit-card,
[data-theme="light"] .info-card,
[data-theme="light"] .faq-item {
  background: #fafaf8;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .pricing-card:hover,
[data-theme="light"] .docs-card:hover,
[data-theme="light"] .blog-card:hover {
  border-color: rgba(99,102,241,0.3);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
[data-theme="light"] .feature-card h3,
[data-theme="light"] .pricing-card h3,
[data-theme="light"] .docs-card h3,
[data-theme="light"] .blog-card h3 { color: #111827; }
[data-theme="light"] .feature-card p,
[data-theme="light"] .pricing-card p,
[data-theme="light"] .docs-card p { color: #6b7280; }
[data-theme="light"] .section-title { color: #111827; }
[data-theme="light"] .section-subtitle { color: #6b7280; }
[data-theme="light"] .section-badge { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.15); }
[data-theme="light"] .code-window,
[data-theme="light"] .mini-code,
[data-theme="light"] .quick-start-code,
[data-theme="light"] .sdk-example,
[data-theme="light"] .sdk-install {
  background: #f3f4f6;
  border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .code-body code,
[data-theme="light"] .sdk-example code { color: #374151; }
[data-theme="light"] .code-header { background: rgba(0,0,0,0.03); border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .footer { border-top-color: rgba(0,0,0,0.08); }
[data-theme="light"] .footer-links a { color: #6b7280; }
[data-theme="light"] .footer-links a:hover { color: #111827; }
[data-theme="light"] .footer-links h4 { color: #111827; }
[data-theme="light"] .footer-brand p { color: #6b7280; }
[data-theme="light"] .footer-bottom p { color: #9ca3af; }
[data-theme="light"] .footer-bottom { border-top-color: rgba(0,0,0,0.06); }
[data-theme="light"] .btn-outline { color: #374151; border-color: rgba(0,0,0,0.2); }
[data-theme="light"] .btn-outline:hover { background: rgba(0,0,0,0.04); color: #111827; }
[data-theme="light"] .btn-ghost { color: #6b7280; }
[data-theme="light"] .btn-ghost:hover { color: #111827; background: rgba(0,0,0,0.04); }
[data-theme="light"] .nav-user-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #111827; }
[data-theme="light"] .nav-user-dropdown { background: #fff; border-color: rgba(0,0,0,0.1); box-shadow: 0 10px 40px rgba(0,0,0,0.12); }
[data-theme="light"] .nav-user-dropdown a { color: #374151; }
[data-theme="light"] .nav-user-dropdown a:hover { background: rgba(0,0,0,0.04); color: #111827; }
[data-theme="light"] .input-with-icon input,
[data-theme="light"] .option-group select,
[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea,
[data-theme="light"] .contact-form select {
  background: #fff;
  border-color: rgba(0,0,0,0.15);
  color: #111827;
}
[data-theme="light"] .input-with-icon input:focus,
[data-theme="light"] .contact-form input:focus,
[data-theme="light"] .contact-form textarea:focus {
  background: #fff;
  border-color: var(--primary);
}
[data-theme="light"] .demo-controls,
[data-theme="light"] .demo-result,
[data-theme="light"] .demo-code {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .demo-input-group label { color: #6b7280; }
[data-theme="light"] .option-btn { background: #f9fafb; border-color: rgba(0,0,0,0.1); color: #6b7280; }
[data-theme="light"] .option-btn:hover { background: #f3f4f6; color: #111827; }
[data-theme="light"] .option-btn.active { background: rgba(99,102,241,0.08); border-color: var(--primary); color: #111827; }
[data-theme="light"] .checkbox { background: #f9fafb; border-color: rgba(0,0,0,0.1); color: #374151; }
[data-theme="light"] .checkmark { background: #fff; border-color: rgba(0,0,0,0.2); }
[data-theme="light"] .code-tab { color: #6b7280; }
[data-theme="light"] .code-tab:hover { color: #111827; background: rgba(0,0,0,0.04); }
[data-theme="light"] .code-tab.active { color: #111827; background: rgba(99,102,241,0.1); }
[data-theme="light"] .code-content { background: #f5f5f0; }
[data-theme="light"] .code-content code { color: #374151; }
[data-theme="light"] .code-tabs { background: rgba(0,0,0,0.02); border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .result-header { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .result-title { color: #6b7280; }
[data-theme="light"] .result-frame { background: #f3f4f6; }
[data-theme="light"] .toggle-label { color: #6b7280; }
[data-theme="light"] .price-amount { color: #111827; }
[data-theme="light"] .price-period { color: #6b7280; }
[data-theme="light"] .plan-name { color: #111827; }
[data-theme="light"] .plan-desc { color: #6b7280; }
[data-theme="light"] .pricing-features li { color: #374151; border-bottom-color: rgba(0,0,0,0.04); }
[data-theme="light"] .pricing-features strong { color: #111827; }
[data-theme="light"] .pricing-card.popular { border-color: var(--primary); box-shadow: 0 4px 20px rgba(99,102,241,0.15); }
[data-theme="light"] .step { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .step-content h3 { color: #111827; }
[data-theme="light"] .step-content p { color: #6b7280; }
[data-theme="light"] .api-key-demo { background: #f3f4f6; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .auth-page { background: #f5f5f0; }
[data-theme="light"] .auth-card { background: #fff; border-color: rgba(0,0,0,0.1); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
[data-theme="light"] .auth-header h1 { color: #111827; }
[data-theme="light"] .auth-header p { color: #6b7280; }
[data-theme="light"] .auth-form input { background: #f9fafb; border-color: rgba(0,0,0,0.15); color: #111827; }
[data-theme="light"] .auth-form input:focus { background: #fff; }
[data-theme="light"] .auth-form label { color: #6b7280; }
[data-theme="light"] .social-btn { background: #f9fafb; border-color: rgba(0,0,0,0.1); color: #374151; }
[data-theme="light"] .social-btn:hover { background: #f3f4f6; }
[data-theme="light"] .auth-divider span { color: #9ca3af; }
[data-theme="light"] .auth-divider::before,
[data-theme="light"] .auth-divider::after { background: rgba(0,0,0,0.1); }
[data-theme="light"] .blog-hero h1 { color: #111827; }
[data-theme="light"] .blog-content h2 { color: #111827; }
[data-theme="light"] .blog-content h3 { color: #1f2937; }
[data-theme="light"] .blog-content p { color: #374151; }
[data-theme="light"] .blog-content li { color: #374151; }
[data-theme="light"] .blog-content strong { color: #111827; }
[data-theme="light"] .blog-content pre { background: #f3f4f6; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .blog-content pre code { color: #374151; }
[data-theme="light"] .blog-content code { background: rgba(99,102,241,0.08); color: #6366f1; }
[data-theme="light"] .blog-content blockquote { background: rgba(99,102,241,0.04); }
[data-theme="light"] .blog-content blockquote p { color: #6b7280; }
[data-theme="light"] .blog-card-content { background: #fff; }
[data-theme="light"] .blog-card h3 a { color: #111827; }
[data-theme="light"] .blog-card p { color: #6b7280; }
[data-theme="light"] .dashboard-page { background: #f5f5f0; }
[data-theme="light"] .dashboard-page .sidebar { background: #fff; border-right-color: rgba(0,0,0,0.08); }
[data-theme="light"] .dashboard-page .nav-item { color: #6b7280; }
[data-theme="light"] .dashboard-page .nav-item:hover { color: #111827; background: rgba(0,0,0,0.04); }
[data-theme="light"] .dashboard-page .nav-item.active { color: #111827; background: rgba(99,102,241,0.08); }
[data-theme="light"] .sidebar-header { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .sidebar-footer { border-top-color: rgba(0,0,0,0.06); }
[data-theme="light"] .dashboard-main { background: #f5f5f0; }
[data-theme="light"] .dashboard-header { background: rgba(255,255,255,0.95); border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .dashboard-header h1 { color: #111827; }
[data-theme="light"] .stat-card,
[data-theme="light"] .card,
[data-theme="light"] .dashboard-card,
[data-theme="light"] .admin-card {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .card-header { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .card-header h3 { color: #111827; }
[data-theme="light"] .stat-card-label { color: #6b7280; }
[data-theme="light"] .stat-card-value { color: #111827; }
[data-theme="light"] .key-card { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .key-name { color: #111827; }
[data-theme="light"] .key-full { color: #6366f1; }
[data-theme="light"] .key-meta { color: #9ca3af; }
[data-theme="light"] .key-value-row { background: #f3f4f6; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .empty-state { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .empty-state h3 { color: #111827; }
[data-theme="light"] .empty-state p { color: #6b7280; }
[data-theme="light"] .modal-content { background: #fff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .modal-header h3 { color: #111827; }
[data-theme="light"] .modal-form .form-group label { color: #374151; }
[data-theme="light"] .modal-form .form-group input { background: #f9fafb; border-color: rgba(0,0,0,0.15); color: #111827; }
[data-theme="light"] .toast { background: #fff; border-color: rgba(0,0,0,0.1); box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
[data-theme="light"] .toast-message { color: #111827; }
[data-theme="light"] .legal-body { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .legal-body h2 { color: #111827; }
[data-theme="light"] .legal-body h3 { color: #1f2937; }
[data-theme="light"] .legal-body p { color: #4b5563; }
[data-theme="light"] .legal-body li { color: #4b5563; }
[data-theme="light"] .legal-body section { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .legal-nav a { color: #6b7280; }
[data-theme="light"] .legal-nav a:hover { color: #111827; background: rgba(0,0,0,0.04); }
[data-theme="light"] .usage-table th { color: #6b7280; }
[data-theme="light"] .usage-table td { color: #374151; }
[data-theme="light"] .usage-table td,
[data-theme="light"] .usage-table th { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .data-table th { color: #6b7280; }
[data-theme="light"] .data-table td { color: #374151; }
[data-theme="light"] .data-table td,
[data-theme="light"] .data-table th { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .quick-try-input { background: #fff; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .quick-try-input input { color: #111827; }
[data-theme="light"] .quick-try-input input::placeholder { color: #9ca3af; }
[data-theme="light"] .quick-try-hint { color: #9ca3af; }
[data-theme="light"] .newsletter-section { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .newsletter-section h3 { color: #111827; }
[data-theme="light"] .newsletter-section p { color: #6b7280; }
[data-theme="light"] .newsletter-form input { background: #f9fafb; border-color: rgba(0,0,0,0.12); color: #111827; }
[data-theme="light"] .contact-form-card { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .contact-form label { color: #6b7280; }
[data-theme="light"] .changelog-item { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .changelog-details h3 { color: #111827; }
[data-theme="light"] .changelog-details p { color: #6b7280; }
[data-theme="light"] .change-list li { color: #6b7280; }
[data-theme="light"] .status-overview { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .status-text h2 { color: #111827; }
[data-theme="light"] .service-item { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .service-name { color: #111827; }
[data-theme="light"] .incident-item { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .incident-title { color: #111827; }
[data-theme="light"] .cta::before { opacity: 0.05; }
[data-theme="light"] .cta-content h2 { color: #111827; }
[data-theme="light"] .cta-content p { color: #6b7280; }
[data-theme="light"] .how-it-works { background: linear-gradient(180deg, transparent, rgba(99,102,241,0.02), transparent); }
[data-theme="light"] .pricing { background: linear-gradient(180deg, transparent, rgba(99,102,241,0.02), transparent); }
[data-theme="light"] .storage-overview-card,
[data-theme="light"] .s3-config-card,
[data-theme="light"] .gallery-card { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .current-plan-compact { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .upgrade-options-card { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .upgrade-plan-option { background: #f9fafb; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .upgrade-plan-option:hover { border-color: rgba(99,102,241,0.3); }
[data-theme="light"] .upgrade-plan-option.selected { background: rgba(99,102,241,0.04); border-color: var(--primary); }
[data-theme="light"] .upgrade-plan-name { color: #111827; }
[data-theme="light"] .plan-usage-compact { background: #f3f4f6; }
[data-theme="light"] .settings-form input { background: #f9fafb; border-color: rgba(0,0,0,0.15); color: #111827; }
[data-theme="light"] .settings-form label { color: #6b7280; }
[data-theme="light"] .mobile-menu-btn span { background: #111827; }
[data-theme="light"] .page-hero .hero-title { color: #111827; }
[data-theme="light"] .page-hero .hero-subtitle { color: #6b7280; }

/* Theme toggle button (fixed position) */
.theme-toggle-fixed { display:none !important; /* removed */ 
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
  z-index: 9999;
  transition: all 0.2s ease;
  border: none;
}
.theme-toggle-fixed:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(99,102,241,0.5);
}
.theme-toggle-fixed svg { width: 20px; height: 20px; }
[data-theme="dark"] .theme-toggle-sun { display: block; }
[data-theme="dark"] .theme-toggle-moon { display: none; }
[data-theme="light"] .theme-toggle-sun { display: none; }
[data-theme="light"] .theme-toggle-moon { display: block; }

/* Scrollbar light */
[data-theme="light"] ::-webkit-scrollbar-track { background: #f3f4f6; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #d1d5db; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }


/* ===== LIGHT THEME FIXES (2026-02-20) ===== */

/* Issue 1: Warmer backgrounds */
[data-theme="light"] .dashboard-page { background: #f5f5f0; }
[data-theme="light"] .dashboard-main { background: #f5f5f0; }
[data-theme="light"] .auth-page { background: #f5f5f0; }
[data-theme="light"] .navbar { background: rgba(245,245,240,0.95); }
[data-theme="light"] .navbar.scrolled { background: rgba(245,245,240,0.97); }

/* Issue 2: Card title text visibility */
[data-theme="light"] .feature-card h3,
[data-theme="light"] .step-content h3,
[data-theme="light"] .pricing-header .plan-name,
[data-theme="light"] h3,
[data-theme="light"] h2,
[data-theme="light"] h4 { color: #111827; }
[data-theme="light"] .gradient-text { -webkit-text-fill-color: #4f46e5; color: #4f46e5; }
[data-theme="light"] .code-prompt { color: #059669; }
[data-theme="light"] .code-cmd { color: #4f46e5; }
[data-theme="light"] .code-flag { color: #db2777; }
[data-theme="light"] .code-string { color: #d97706; }
[data-theme="light"] .code-success { color: #059669; }

/* Issue 3: Step cards */
[data-theme="light"] .step { background: #fafaf8; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .step .step-visual * { color: #374151; }
[data-theme="light"] .api-key-demo,
[data-theme="light"] .mini-code,
[data-theme="light"] .result-preview { background: #f0f0ec; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .key-value code { color: #d97706; }
[data-theme="light"] .result-preview span { color: #059669; }

/* Issue 4: Feature card text */
[data-theme="light"] .feature-card p,
[data-theme="light"] .docs-card p,
[data-theme="light"] .sdk-card p,
[data-theme="light"] .blog-card p,
[data-theme="light"] .benefit-card p,
[data-theme="light"] .value-card p,
[data-theme="light"] .plan-desc,
[data-theme="light"] .pricing-features li,
[data-theme="light"] .faq-item p { color: #4b5563; }

/* Issue 6: Dashboard padding */
[data-theme="light"] .dashboard-section { padding-top: 32px; }

/* Issue 8: Additional overrides */
[data-theme="light"] .trusted-logos { opacity: 0.6; }
[data-theme="light"] .trusted-label { color: #9ca3af; }
[data-theme="light"] .hero-badge { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.15); }
[data-theme="light"] .floating-card { background: rgba(255,255,255,0.9); border-color: rgba(0,0,0,0.08); color: #374151; }
[data-theme="light"] .sdk-install code { color: #374151; }
[data-theme="light"] .sdk-info h3 { color: #111827; }
[data-theme="light"] .sdks { background: linear-gradient(180deg, transparent 0, rgba(99,102,241,0.02) 50%, transparent 100%); }
[data-theme="light"] .page-hero { color: #111827; }
[data-theme="light"] .page-hero .hero-title { color: #111827; }
[data-theme="light"] .preview-browser { background: #fafaf8; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .browser-bar { background: rgba(0,0,0,0.03); border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .browser-url { background: rgba(0,0,0,0.04); color: #6b7280; }
[data-theme="light"] .code-window { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
[data-theme="light"] .hero-preview-result { background: linear-gradient(180deg, #f0f0ec 0, #e8e8e4 100%); }
[data-theme="light"] .preview-header-bar { background: rgba(0,0,0,0.03); border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .preview-hero-text { background: linear-gradient(90deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.05) 100%); }
[data-theme="light"] .preview-hero-subtext { background: rgba(0,0,0,0.05); }
[data-theme="light"] .preview-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .preview-badge { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); }
[data-theme="light"] .blog-tag { background: rgba(99,102,241,0.08); color: #4f46e5; }
[data-theme="light"] .blog-date { color: #9ca3af; }
[data-theme="light"] .blog-meta { color: #9ca3af; }
[data-theme="light"] .exit-popup-overlay .exit-popup { background: #fafaf8; border-color: rgba(0,0,0,0.1); }

/* Nav user name visibility in light mode */
[data-theme="light"] .nav-user-name { color: #111827 !important; }
[data-theme="light"] .nav-user-btn { color: #111827 !important; }
[data-theme="light"] .nav-user-btn svg { color: #6b7280 !important; }
[data-theme="light"] .user-name { color: #111827 !important; }
[data-theme="light"] .user-btn { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.1) !important; color: #111827 !important; }
[data-theme="light"] .user-btn svg { color: #6b7280 !important; }

/* Compare table - keep dark header, fix body */
[data-theme="light"] .comparison-table thead,
[data-theme="light"] table thead { background: #1e1e2e !important; }
[data-theme="light"] .comparison-table thead th,
[data-theme="light"] table thead th { color: #fff !important; background: transparent !important; }
[data-theme="light"] .comparison-table tbody td,
[data-theme="light"] table tbody td { background: #fafaf8 !important; color: #374151 !important; }
[data-theme="light"] .comparison-table tbody tr:nth-child(even) td,
[data-theme="light"] table tbody tr:nth-child(even) td { background: #f5f5f0 !important; }


/* ============================================
   LIGHT THEME v2 FIXES
   ============================================ */

/* CRITICAL: Demo animation area has dark bg overlays visible in light mode */
[data-theme="light"] .demo-result,
[data-theme="light"] .result-frame {
  background: #eeeee8 !important;
}
[data-theme="light"] .demo-controls {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.1) !important;
}

[data-theme="light"] .code-window {
  background: #1e1e2e !important;
  border-color: rgba(0,0,0,0.15) !important;
}

[data-theme="light"] .step {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .step-content h3 { color: #111827 !important; }
[data-theme="light"] .step-content p { color: #4b5563 !important; }

[data-theme="light"] .api-key-demo {
  background: #f0f0ea !important;
  border-color: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .key-label { color: #6b7280 !important; }
[data-theme="light"] .key-value code { color: #b45309 !important; }

[data-theme="light"] .mini-code {
  background: #f0f0ea !important;
  border-color: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .mini-code code { color: #4f46e5 !important; }

[data-theme="light"] .result-preview {
  background: rgba(16,185,129,0.08) !important;
  border-color: rgba(16,185,129,0.25) !important;
}
[data-theme="light"] .result-preview span { color: #059669 !important; }

[data-theme="light"] .quick-try-input {
  background: #fff !important;
  border-color: rgba(0,0,0,0.15) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .quick-try-input input { color: #111827 !important; }
[data-theme="light"] .quick-try-input svg { color: #9ca3af !important; }

[data-theme="light"] .stat-header .stat-label { color: #6b7280 !important; }
[data-theme="light"] .stat-card .stat-value { color: #111827 !important; font-weight: 800 !important; }
[data-theme="light"] .stat-card .stat-detail { color: #6b7280 !important; }
[data-theme="light"] .stat-card .stat-detail a { color: #4f46e5 !important; }
[data-theme="light"] .stat-card .progress-text { color: #6b7280 !important; }
[data-theme="light"] .stat-badge { background: rgba(99,102,241,0.1) !important; color: #4f46e5 !important; }

[data-theme="light"] .quick-start-code {
  background: #1e1e2e !important;
  border-color: rgba(0,0,0,0.15) !important;
}
[data-theme="light"] .quick-start-code code { color: #d4d4d8 !important; }
[data-theme="light"] .quick-start-code .copy-btn { color: #9ca3af !important; }

[data-theme="light"] .quick-link {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #6b7280 !important;
}
[data-theme="light"] .quick-link:hover { color: #111827 !important; background: #f0f0ea !important; }

[data-theme="light"] .card-link { color: #4f46e5 !important; }
[data-theme="light"] .plan-quota { color: #111827 !important; }
[data-theme="light"] .plan-reset { color: #6b7280 !important; }
[data-theme="light"] .upgrade-card { border-color: rgba(99,102,241,0.2) !important; }

[data-theme="light"] .pg-container { color: #111827; }
[data-theme="light"] .pg-label { color: #4f46e5 !important; }
[data-theme="light"] .pg-input,
[data-theme="light"] .pg-textarea {
  background: #fff !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: #111827 !important;
}
[data-theme="light"] .pg-check span { color: #374151 !important; }
[data-theme="light"] .pg-chip {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #6b7280 !important;
}
[data-theme="light"] .pg-chip.active {
  background: rgba(99,102,241,0.1) !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
}
[data-theme="light"] .pg-toggle {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #6b7280 !important;
}
[data-theme="light"] .pg-toggle.active {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}
[data-theme="light"] .pg-preset {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #6b7280 !important;
}
[data-theme="light"] .pg-preset.active {
  background: rgba(99,102,241,0.1) !important;
  border-color: #6366f1 !important;
}
[data-theme="light"] .pg-execute-btn { color: #fff !important; }
[data-theme="light"] .pg-hint { color: #9ca3af !important; }
[data-theme="light"] .pg-hint a { color: #4f46e5 !important; }

[data-theme="light"] .pg-status { color: #111827 !important; }
[data-theme="light"] .pg-meta-item { color: #6b7280 !important; }
[data-theme="light"] .pg-preview { background: #f0f0ea !important; }
[data-theme="light"] .pg-preview-empty { color: #6b7280 !important; }
[data-theme="light"] .pg-preview-empty h3 { color: #374151 !important; }

[data-theme="light"] .pg-code-block {
  background: #1e1e2e !important;
  border-color: rgba(0,0,0,0.15) !important;
}
[data-theme="light"] .pg-code-block code { color: #d4d4d8 !important; }
[data-theme="light"] .pg-code-tab { color: #6b7280 !important; }
[data-theme="light"] .pg-code-tab.active { color: #111827 !important; background: rgba(99,102,241,0.1) !important; }
[data-theme="light"] .pg-copy-btn { color: #6b7280 !important; border-color: rgba(0,0,0,0.1) !important; }

[data-theme="light"] .pg-wf-track { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .pg-wf-label { color: #6b7280 !important; }
[data-theme="light"] .pg-wf-time { color: #374151 !important; }

[data-theme="light"] .docs-card {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .docs-icon { background: rgba(99,102,241,0.08) !important; }
[data-theme="light"] .docs-link { color: #4f46e5 !important; }

[data-theme="light"] .ai-section .code-window,
[data-theme="light"] section .code-window {
  background: rgba(15,15,26,0.95) !important;
}
[data-theme="light"] section .code-body code { color: #d4d4d8 !important; }

[data-theme="light"] .bg-glow { display: none !important; }
[data-theme="light"] .bg-glow-1 { display: none !important; }
[data-theme="light"] .bg-glow-2 { display: none !important; }
[data-theme="light"] .bg-glow-3 { display: none !important; }
[data-theme="light"] .bg-gradient { display: none !important; }
[data-theme="light"] .bg-grid { display: none !important; }

[data-theme="light"] .sdk-card {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .sdk-header h3 { color: #111827 !important; }
[data-theme="light"] .sdk-install {
  background: #f0f0ea !important;
  border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .sdk-install code { color: #374151 !important; }
[data-theme="light"] .sdk-example {
  background: #1e1e2e !important;
  border-color: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .sdk-example code { color: #d4d4d8 !important; }

[data-theme="light"] .toggle-slider { background: rgba(0,0,0,0.15) !important; }

[data-theme="light"] .faq-item {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .faq-item h4 { color: #111827 !important; }
[data-theme="light"] .faq-item p { color: #4b5563 !important; }
[data-theme="light"] .faq-cta { background: rgba(99,102,241,0.04) !important; border-color: rgba(99,102,241,0.1) !important; }

[data-theme="light"] .cta { background: rgba(99,102,241,0.03) !important; }
[data-theme="light"] .cta::before { opacity: 0.03 !important; }
[data-theme="light"] .cta-content h2 { color: #111827 !important; }
[data-theme="light"] .cta-content p { color: #4b5563 !important; }

[data-theme="light"] .trusted { background: transparent !important; }

[data-theme="light"] p { color: #4b5563; }
[data-theme="light"] li { color: #4b5563; }
[data-theme="light"] span { color: inherit; }
[data-theme="light"] .text-white,
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:white"] { color: #111827 !important; }

[data-theme="light"] .newsletter-section {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.08) !important;
}

[data-theme="light"] table,
[data-theme="light"] .comparison-table {
  background: #fafaf8 !important;
}
[data-theme="light"] table th {
  background: rgba(99,102,241,0.06) !important;
  color: #111827 !important;
}
[data-theme="light"] table td {
  color: #374151 !important;
  border-color: rgba(0,0,0,0.06) !important;
}

[data-theme="light"] .blog-content.article-body h2 { color: #111827 !important; }
[data-theme="light"] .blog-content.article-body h3 { color: #1f2937 !important; }
[data-theme="light"] .blog-content.article-body p { color: #374151 !important; }
[data-theme="light"] .blog-content.article-body li { color: #374151 !important; }
[data-theme="light"] .blog-content.article-body strong { color: #111827 !important; }
[data-theme="light"] .blog-content.article-body a { color: #4f46e5 !important; }
[data-theme="light"] .blog-content pre {
  background: #1e1e2e !important;
  border-color: rgba(0,0,0,0.15) !important;
}
[data-theme="light"] .blog-content pre code { color: #d4d4d8 !important; }

[data-theme="light"] .tool-card,
[data-theme="light"] .tool-result {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .use-case-card {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .storage-overview-card,
[data-theme="light"] .s3-config-card,
[data-theme="light"] .gallery-card {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .storage-overview-card h3,
[data-theme="light"] .s3-config-card h3 { color: #111827 !important; }
[data-theme="light"] .s3-config-card p { color: #6b7280 !important; }

[data-theme="light"] .settings-form input {
  background: #fff !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: #111827 !important;
}
[data-theme="light"] .settings-form label { color: #374151 !important; }

[data-theme="light"] .current-plan-compact { background: #fafaf8 !important; }
[data-theme="light"] .plan-name-badge .badge { color: #fff !important; }
[data-theme="light"] .plan-price-compact { color: #111827 !important; }
[data-theme="light"] .upgrade-plan-option {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .upgrade-plan-name { color: #111827 !important; }
[data-theme="light"] .upgrade-plan-price { color: #4f46e5 !important; }
[data-theme="light"] .upgrade-plan-quota { color: #6b7280 !important; }

[data-theme="light"] .admin-card { background: #fafaf8 !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .admin-card h3 { color: #111827 !important; }
[data-theme="light"] .status-item { border-bottom-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .status-label { color: #6b7280 !important; }
[data-theme="light"] .status-value { color: #111827 !important; }

[data-theme="light"] .gradient-text {
  -webkit-text-fill-color: #4f46e5 !important;
  color: #4f46e5 !important;
  background: none !important;
}

/* Docs page light theme */
[data-theme="light"] .docs-sidebar,
[data-theme="light"] .docs-nav,
[data-theme="light"] .doc-sidebar {
  background: #fafaf8 !important;
  border-right-color: rgba(0,0,0,0.08) !important;
  color: #374151 !important;
}
[data-theme="light"] .docs-sidebar a,
[data-theme="light"] .docs-nav a,
[data-theme="light"] .doc-sidebar a {
  color: #6b7280 !important;
}
[data-theme="light"] .docs-sidebar a:hover,
[data-theme="light"] .docs-nav a:hover,
[data-theme="light"] .doc-sidebar a:hover {
  color: #111827 !important;
  background: rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .docs-sidebar a.active,
[data-theme="light"] .docs-nav a.active,
[data-theme="light"] .doc-sidebar a.active {
  color: #4f46e5 !important;
  background: rgba(99,102,241,0.08) !important;
}
[data-theme="light"] .docs-sidebar .section-label,
[data-theme="light"] .doc-sidebar .section-label,
[data-theme="light"] .docs-nav .section-label {
  color: #9ca3af !important;
}
[data-theme="light"] .docs-content h1,
[data-theme="light"] .docs-content h2,
[data-theme="light"] .docs-content h3 { color: #111827 !important; }
[data-theme="light"] .docs-content p { color: #374151 !important; }
[data-theme="light"] .docs-content li { color: #374151 !important; }
[data-theme="light"] .docs-content a { color: #4f46e5 !important; }
[data-theme="light"] .docs-content hr { border-color: rgba(0,0,0,0.08) !important; }
/* Docs code blocks stay dark */
[data-theme="light"] .docs-content pre {
  background: #1e1e2e !important;
  border-color: rgba(0,0,0,0.15) !important;
}
[data-theme="light"] .docs-content pre code { color: #d4d4d8 !important; }
[data-theme="light"] .docs-content code:not(pre code) {
  background: rgba(99,102,241,0.08) !important;
  color: #4f46e5 !important;
}
/* Docs code tabs */
[data-theme="light"] .code-tabs {
  background: rgba(0,0,0,0.02) !important;
  border-bottom-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .code-tab { color: #6b7280 !important; }
[data-theme="light"] .code-tab.active { color: #111827 !important; background: rgba(99,102,241,0.1) !important; }
/* Docs success/info boxes */
[data-theme="light"] .callout-success,
[data-theme="light"] .success-box,
[data-theme="light"] .info-box,
[data-theme="light"] .callout {
  background: rgba(16,185,129,0.06) !important;
  border-color: rgba(16,185,129,0.2) !important;
}
[data-theme="light"] .callout-success p,
[data-theme="light"] .success-box p { color: #065f46 !important; }
/* Docs navbar */
[data-theme="light"] .docs-navbar,
[data-theme="light"] .doc-header {
  background: rgba(245,245,240,0.97) !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .docs-navbar a,
[data-theme="light"] .doc-header a { color: #6b7280 !important; }
[data-theme="light"] .docs-navbar a:hover,
[data-theme="light"] .doc-header a:hover { color: #111827 !important; }

/* Playground light theme - response/preview area */
[data-theme="light"] .pg-results {
  background: #fafaf8 !important;
}
[data-theme="light"] .pg-response-bar {
  background: #fafaf8 !important;
  border-bottom-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .pg-preview {
  background: #f0f0ea !important;
  border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .pg-preview-loading p { color: #6b7280 !important; }
[data-theme="light"] .spinner { border-color: rgba(99,102,241,0.2) !important; border-top-color: #6366f1 !important; }
[data-theme="light"] .pg-progress-bar { background: rgba(0,0,0,0.08) !important; }

/* Response bar dots/tabs */
[data-theme="light"] .pg-response-actions button { color: #6b7280 !important; }
[data-theme="light"] .pg-response-actions button:hover { color: #111827 !important; }

/* Divider */
[data-theme="light"] .pg-divider { background: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pg-divider-line { background: rgba(0,0,0,0.15) !important; }

/* Left panel */
[data-theme="light"] .pg-config {
  background: #fafaf8 !important;
  border-right-color: rgba(0,0,0,0.08) !important;
}

/* Waterfall timing bars background */
[data-theme="light"] .pg-waterfall {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.06) !important;
}

/* Header bar */
[data-theme="light"] .pg-response-bar .pg-status { background: rgba(16,185,129,0.1) !important; }

/* Diff overlay */
[data-theme="light"] .pg-diff-overlay { background: rgba(0,0,0,0.5) !important; }

/* History panel */
[data-theme="light"] .pg-history-panel {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .pg-history-item {
  background: #fff !important;
  border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .pg-history-item:hover { background: #f0f0ea !important; }

/* Better navbar spacing to prevent overlap */
.navbar .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
}
.nav-links {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  gap: 28px !important;
}
.nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}
/* Prevent user menu from overlapping nav links */
.nav-user-name {
  max-width: 80px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Testimonials / community feedback - white text on light bg */
[data-theme="light"] .testimonial-name,
[data-theme="light"] .testimonial-role,
[data-theme="light"] .testimonial-source,
[data-theme="light"] .feedback-source,
[data-theme="light"] .community-card h4,
[data-theme="light"] .community-card .source-name,
[data-theme="light"] .social-proof-card h4,
[data-theme="light"] .social-proof-card .source-label { color: #111827 !important; }
[data-theme="light"] .community-card p,
[data-theme="light"] .social-proof-card p,
[data-theme="light"] .testimonial-text { color: #374151 !important; }
[data-theme="light"] .community-card,
[data-theme="light"] .social-proof-card,
[data-theme="light"] .testimonial-card {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Section headings like "Developer Community Feedback" */
[data-theme="light"] .section-header h2,
[data-theme="light"] .section-header .section-title { color: #111827 !important; }
[data-theme="light"] .section-header p,
[data-theme="light"] .section-header .section-subtitle { color: #6b7280 !important; }

/* DOCS PAGE - has its own inline styles, need to override with !important */
[data-theme="light"] body.docs-page,
[data-theme="light"].docs-page { background: #f5f5f0 !important; }

/* Docs sidebar - the left nav panel */
[data-theme="light"] .docs-page aside,
[data-theme="light"] .docs-page .sidebar,
[data-theme="light"] .docs-page nav[class*="sidebar"],
[data-theme="light"] .docs-page [class*="doc-nav"],
[data-theme="light"] .docs-page [class*="docs-sidebar"],
[data-theme="light"] aside[class*="sidebar"] {
  background: #fafaf8 !important;
  border-right: 1px solid rgba(0,0,0,0.08) !important;
  color: #374151 !important;
}

/* Docs sidebar links */
[data-theme="light"] .docs-page aside a,
[data-theme="light"] .docs-page .sidebar a,
[data-theme="light"] .docs-page [class*="nav-item"],
[data-theme="light"] .docs-page [class*="sidebar"] a {
  color: #6b7280 !important;
}
[data-theme="light"] .docs-page aside a:hover,
[data-theme="light"] .docs-page .sidebar a:hover {
  color: #111827 !important;
  background: rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .docs-page aside a.active,
[data-theme="light"] .docs-page .sidebar a.active,
[data-theme="light"] .docs-page [class*="active"] {
  color: #fff !important;
  background: #6366f1 !important;
}

/* Docs sidebar section labels (GETTING STARTED, API REFERENCE, etc) */
[data-theme="light"] .docs-page aside [class*="label"],
[data-theme="light"] .docs-page aside [class*="category"],
[data-theme="light"] .docs-page aside [class*="heading"],
[data-theme="light"] .docs-page aside h3,
[data-theme="light"] .docs-page aside h4 {
  color: #9ca3af !important;
}

/* Docs main content area */
[data-theme="light"] .docs-page main,
[data-theme="light"] .docs-page [class*="content"],
[data-theme="light"] .docs-page [class*="doc-body"] {
  background: #f5f5f0 !important;
  color: #374151 !important;
}

/* Docs header/navbar */
[data-theme="light"] .docs-page header,
[data-theme="light"] .docs-page [class*="doc-header"],
[data-theme="light"] .docs-page [class*="docs-nav"],
[data-theme="light"] .docs-page nav[class*="header"] {
  background: rgba(245,245,240,0.97) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .docs-page header a,
[data-theme="light"] .docs-page [class*="doc-header"] a {
  color: #6b7280 !important;
}
[data-theme="light"] .docs-page header a:hover {
  color: #111827 !important;
}

/* Docs page title */
[data-theme="light"] .docs-page h1 { color: #4f46e5 !important; }
[data-theme="light"] .docs-page h2 { color: #111827 !important; }
[data-theme="light"] .docs-page h3 { color: #1f2937 !important; }

/* Docs description text */
[data-theme="light"] .docs-page [class*="subtitle"],
[data-theme="light"] .docs-page [class*="description"] { color: #6b7280 !important; }

/* Docs hr/dividers */
[data-theme="light"] .docs-page hr { border-color: rgba(0,0,0,0.1) !important; }

/* Success box in docs */
[data-theme="light"] .docs-page [class*="success"],
[data-theme="light"] .docs-page [class*="callout"] {
  background: rgba(16,185,129,0.06) !important;
  border-color: rgba(16,185,129,0.2) !important;
}
[data-theme="light"] .docs-page [class*="success"] h4,
[data-theme="light"] .docs-page [class*="success"] strong { color: #065f46 !important; }
[data-theme="light"] .docs-page [class*="success"] p { color: #065f46 !important; }

/* Dashboard: Try Playground CTA card - make light */
[data-theme="light"] .upgrade-card,
[data-theme="light"] .card:has(.btn-primary),
[data-theme="light"] [class*="playground-cta"],
[data-theme="light"] [class*="try-playground"] {
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08)) !important;
  border-color: rgba(99,102,241,0.15) !important;
}
[data-theme="light"] .upgrade-card h3,
[data-theme="light"] .upgrade-card h2 { color: #111827 !important; }
[data-theme="light"] .upgrade-card p { color: #6b7280 !important; }

/* Dashboard cards with gradient backgrounds */
[data-theme="light"] .card[style*="gradient"],
[data-theme="light"] .dashboard-grid .card:last-child {
  background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.06)) !important;
}

/* Fix: landing page section headers - override dashboard flex layout */
section > .container > .section-header {
  display: block !important;
  text-align: center !important;
  margin-bottom: 60px !important;
}
section > .container > .section-header .section-badge {
  display: inline-block !important;
}
section > .container > .section-header .section-title {
  margin: 16px 0 !important;
}
section > .container > .section-header .section-subtitle {
  max-width: 600px !important;
  margin: 0 auto !important;
}


/* ============================================================
   NAV RESPONSIVE FIXES — 2026-03-11
   Prevents .nav-links from overlapping .nav-actions at medium widths
   ============================================================ */

@media (max-width: 1100px) {
  .nav-links {
    gap: 20px !important;
  }
}

@media (max-width: 960px) {
  .nav-links {
    display: none !important;
  }
  .mobile-menu-btn,
  .hamburger-btn,
  [class*="mobile-menu"] {
    display: flex !important;
  }
}

/* END NAV RESPONSIVE FIXES — 2026-03-11 */

/* ============================================================
   MOBILE NAV OPEN STATE — 2026-03-28
   Applies to all pages using styles.css (blog posts, pricing, contact, etc.)
   When navbar has .active class (added by app.dd242510.js hamburger handler),
   show the nav links as a dropdown.
   ============================================================ */

/* Show nav links when navbar is active (hamburger open) */
@media (max-width: 768px) {
  .navbar.active .nav-links,
  nav.active .nav-links,
  nav.nav.active .nav-links {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: rgba(3, 7, 18, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 16px 20px;
    gap: 4px;
    z-index: 999;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  [data-theme=light] .navbar.active .nav-links,
  [data-theme=light] nav.active .nav-links,
  [data-theme=light] nav.nav.active .nav-links {
    background: rgba(245, 245, 240, 0.97);
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }
  .navbar.active .nav-links a,
  nav.active .nav-links a,
  nav.nav.active .nav-links a {
    padding: 12px 14px;
    font-size: 0.9375rem;
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }
  .navbar.active .nav-links a:hover,
  nav.active .nav-links a:hover {
    background: rgba(99, 102, 241, 0.08);
    color: #fff;
  }
  [data-theme=light] .navbar.active .nav-links a:hover,
  [data-theme=light] nav.active .nav-links a:hover {
    color: #111827;
  }
  /* Hamburger button active (X) state — for pages using styles.css */
  .mobile-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
  .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* nav-mobile-btn (used by blog.html, integrations.html) */
  .nav-mobile-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-mobile-btn.active span:nth-child(2) { opacity: 0; }
  .nav-mobile-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* nav.nav pattern (blog.html, integrations.html) */
  nav.nav.active .nav-links {
    top: 60px;
  }
  /* Touch targets — all nav links/buttons min 44px */
  .nav-links a,
  .nav-actions a,
  .nav-actions button {
    min-height: 44px;
  }
}

/* ============================================================
   BLOG POST RESPONSIVE — 2026-03-28
   All blog posts use .blog-content or inline article styles.
   These ensure readability and no horizontal overflow on mobile.
   ============================================================ */

@media (max-width: 768px) {
  /* Blog content containers */
  .blog-content,
  .blog-post,
  article.blog-content,
  article.blog-post {
    margin: 80px auto !important;
    padding: 0 16px !important;
    max-width: 100% !important;
  }
  .blog-content h1,
  .blog-post h1 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    margin-bottom: 16px !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }
  .blog-content h2,
  .blog-post h2 {
    font-size: clamp(1.2rem, 4.5vw, 1.5rem) !important;
    margin-top: 32px !important;
    margin-bottom: 12px !important;
  }
  .blog-content h3,
  .blog-post h3 {
    font-size: clamp(1rem, 4vw, 1.25rem) !important;
    margin-top: 24px !important;
  }
  .blog-content p,
  .blog-post p {
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  /* Hero images */
  .blog-hero-img,
  .blog-content img,
  .blog-post img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
  }
  /* Code blocks — horizontal scroll, never overflow */
  .blog-content pre,
  .blog-post pre {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 0.78rem !important;
    padding: 14px !important;
    border-radius: 8px !important;
    white-space: pre !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .blog-content pre code,
  .blog-post pre code {
    white-space: pre !important;
  }
  /* Comparison tables */
  .comparison-table,
  .blog-content table,
  .blog-post table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    font-size: 0.8125rem !important;
  }
  /* CTA blocks */
  .blog-cta,
  .blog-content .cta-block {
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }
  /* Prevent container overflow */
  body { overflow-x: hidden; }
}

@media (max-width: 480px) {
  .blog-content,
  .blog-post {
    margin: 72px auto !important;
    padding: 0 14px !important;
  }
  .blog-content h1,
  .blog-post h1 {
    font-size: 1.5rem !important;
  }
  .blog-content pre,
  .blog-post pre {
    font-size: 0.7125rem !important;
  }
}

/* ============================================================
   ADMIN PANEL MOBILE — 2026-03-28
   Admin sidebar needs a toggle button on mobile.
   ============================================================ */

@media (max-width: 768px) {
  /* Admin sidebar: slide-in panel */
  .admin-page .sidebar,
  body .sidebar.admin-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -260px !important;
    height: 100vh !important;
    width: 240px !important;
    z-index: 300 !important;
    transition: left 0.25s ease !important;
    box-shadow: none !important;
  }
  .admin-page .sidebar.mobile-open,
  body .sidebar.admin-sidebar.mobile-open {
    left: 0 !important;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5) !important;
  }
  .admin-page .main-content {
    margin-left: 0 !important;
  }
}