@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--primary: #6366f1;--primary-light: #818cf8;--primary-dark: #4f46e5;--primary-glow: rgba(99, 102, 241, .3);--accent: #10b981;--accent-light: #34d399;--accent-dark: #059669;--accent-glow: rgba(16, 185, 129, .3);--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--bg-dark: #0a0a0f;--bg-darker: #050508;--bg-card: rgba(20, 20, 30, .7);--bg-card-hover: rgba(30, 30, 45, .8);--bg-glass: rgba(255, 255, 255, .03);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--text-muted: rgba(255, 255, 255, .4);--border: rgba(255, 255, 255, .08);--border-light: rgba(255, 255, 255, .12);--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);--gradient-accent: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%);--gradient-dark: linear-gradient(180deg, #0a0a0f 0%, #050508 100%);--gradient-mesh: radial-gradient(at 40% 20%, rgba(99, 102, 241, .15) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(139, 92, 246, .1) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(16, 185, 129, .1) 0px, transparent 50%);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--shadow-glow: 0 0 40px var(--primary-glow);--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-dark);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-darker)}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#fff3}::selection{background:var(--primary);color:#fff}a{color:inherit;text-decoration:none;transition:color var(--transition-fast)}button{font-family:inherit;cursor:pointer;border:none;outline:none;background:none}input,textarea,select{font-family:inherit;border:none;outline:none;background:none}.container{max-width:1400px;margin:0 auto;padding:0 24px}.section{padding:100px 0}.text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-gradient-accent{background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass{background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;transition:all var(--transition-normal)}.card:hover{background:var(--bg-card-hover);border-color:var(--border-light);transform:translateY(-2px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;font-size:15px;font-weight:600;border-radius:var(--radius-full);transition:all var(--transition-normal);cursor:pointer}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 20px var(--primary-glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 30px var(--primary-glow)}.btn-secondary{background:var(--bg-glass);color:var(--text-primary);border:1px solid var(--border-light)}.btn-accent{background:var(--gradient-accent);color:#fff;box-shadow:0 4px 20px var(--accent-glow)}.btn-accent:hover{transform:translateY(-2px);box-shadow:0 6px 30px var(--accent-glow)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover{color:var(--text-primary)}.btn-lg{padding:16px 36px;font-size:17px}.btn-sm{padding:8px 18px;font-size:13px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes glow{0%,to{box-shadow:0 0 20px var(--primary-glow)}50%{box-shadow:0 0 40px var(--primary-glow),0 0 60px var(--primary-glow)}}@keyframes ripple{0%{transform:scale(1);opacity:1}to{transform:scale(2.5);opacity:0}}.animate-fadeIn{animation:fadeIn .5s ease forwards}.animate-fadeInUp{animation:fadeInUp .6s ease forwards}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.animate-float{animation:float 3s ease-in-out infinite}.mesh-bg{position:fixed;inset:0;background:var(--gradient-dark);z-index:-2}.mesh-bg:before{content:"";position:absolute;inset:0;background:var(--gradient-mesh);z-index:-1}.noise-overlay{position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");opacity:.03;pointer-events:none;z-index:-1}.grid-pattern{position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:-1}@media(max-width:768px){.container{padding:0 16px}.section{padding:60px 0}.btn{padding:10px 22px;font-size:14px}.btn-lg{padding:14px 28px;font-size:15px}}.app{min-height:100vh;position:relative}main{position:relative;z-index:1}.navbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;transition:all var(--transition-normal)}.navbar.scrolled{background:#0a0a0fd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:12px 0}.navbar-container{display:flex;align-items:center;justify-content:space-between;gap:40px}.navbar-logo{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;color:var(--text-primary);text-decoration:none}.logo-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.navbar-links{display:flex;align-items:center;gap:8px}.nav-link{padding:10px 18px;font-size:15px;font-weight:500;color:var(--text-secondary);text-decoration:none;border-radius:var(--radius-full);transition:all var(--transition-fast)}.nav-link:hover{color:var(--text-primary);background:var(--bg-glass)}.navbar-actions{display:flex;align-items:center;gap:12px}.mobile-menu-btn{display:none;flex-direction:column;gap:5px;padding:8px;background:none;border:none;cursor:pointer;z-index:101}.mobile-menu-btn span{display:block;width:24px;height:2px;background:var(--text-primary);border-radius:var(--radius-full);transition:all var(--transition-fast)}.mobile-menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.mobile-menu-btn.open span:nth-child(2){opacity:0}.mobile-menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}@media(max-width:900px){.navbar-links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:16px;background:var(--bg-dark);opacity:0;visibility:hidden;transition:all var(--transition-normal)}.navbar-links.open{opacity:1;visibility:visible}.nav-link{font-size:20px;padding:16px 32px}.navbar-actions{display:none}.mobile-menu-btn{display:flex}}.hero{min-height:100vh;display:flex;align-items:center;position:relative;padding-top:80px;overflow:hidden}.hero-bg-effects{position:absolute;inset:0;pointer-events:none}.hero-glow-1{position:absolute;top:-20%;left:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(99,102,241,.2) 0%,transparent 70%);filter:blur(60px);animation:float 8s ease-in-out infinite}.hero-glow-2{position:absolute;bottom:-20%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(16,185,129,.15) 0%,transparent 70%);filter:blur(60px);animation:float 10s ease-in-out infinite reverse}.hero-container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}.hero-content{animation:fadeInUp .8s ease forwards}.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;background:#10b9811a;border:1px solid rgba(16,185,129,.2);border-radius:var(--radius-full);font-size:14px;font-weight:500;color:var(--accent);margin-bottom:24px}.badge-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:pulse 2s ease-in-out infinite}.hero-title{font-size:clamp(40px,5vw,64px);font-weight:800;line-height:1.1;margin-bottom:24px;letter-spacing:-.02em}.hero-subtitle{font-size:18px;color:var(--text-secondary);max-width:520px;margin-bottom:32px;line-height:1.7}.hero-features{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:40px}.hero-feature{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--text-secondary)}.feature-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#10b9811a;border-radius:50%;color:var(--accent)}.hero-actions{display:flex;gap:16px;margin-bottom:48px}.hero-stats{display:flex;align-items:center;gap:32px}.stat{display:flex;flex-direction:column;gap:4px}.stat-value{font-size:28px;font-weight:700;color:var(--text-primary)}.stat-label{font-size:14px;color:var(--text-muted)}.stat-divider{width:1px;height:40px;background:var(--border)}.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;animation:fadeIn 1s ease forwards;animation-delay:.3s;opacity:0}.hero-globe{width:100%;max-width:450px;height:auto;animation:spin 60s linear infinite}.pulse-point{animation:pulse 2s ease-in-out infinite}.connection-line{stroke-dasharray:100;stroke-dashoffset:100;animation:drawLine 3s ease forwards infinite}@keyframes drawLine{0%{stroke-dashoffset:100}50%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}.hero-shield{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.shield-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:160px;height:160px;background:radial-gradient(circle,rgba(99,102,241,.4) 0%,transparent 70%);border-radius:50%;animation:glow 3s ease-in-out infinite}.shield-icon{position:relative;z-index:1;animation:float 4s ease-in-out infinite}.hero-scroll-indicator{position:absolute;bottom:40px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-muted);font-size:13px;animation:fadeIn 1s ease forwards;animation-delay:1.5s;opacity:0}.scroll-mouse{width:24px;height:38px;border:2px solid var(--border-light);border-radius:12px;display:flex;justify-content:center;padding-top:8px}.scroll-wheel{width:4px;height:8px;background:var(--text-muted);border-radius:var(--radius-full);animation:scrollWheel 2s ease-in-out infinite}@keyframes scrollWheel{0%,to{opacity:1;transform:translateY(0)}50%{opacity:0;transform:translateY(8px)}}@media(max-width:1024px){.hero-container{grid-template-columns:1fr;text-align:center}.hero-content{order:1}.hero-visual{order:0;margin-bottom:20px}.hero-globe{max-width:300px}.hero-subtitle{margin-left:auto;margin-right:auto}.hero-features,.hero-actions,.hero-stats{justify-content:center}}@media(max-width:640px){.hero-actions{flex-direction:column}.hero-stats{flex-direction:column;gap:20px}.stat-divider{width:60px;height:1px}.hero-scroll-indicator{display:none}}.footer{background:var(--bg-darker);border-top:1px solid var(--border);padding:80px 0 40px}.footer-main{display:grid;grid-template-columns:1.5fr 2fr;gap:60px;margin-bottom:60px}.footer-brand{max-width:320px}.footer-logo{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:700;color:var(--text-primary);text-decoration:none;margin-bottom:20px}.footer-logo .logo-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.footer-tagline{font-size:15px;color:var(--text-secondary);line-height:1.7;margin-bottom:24px}.footer-social{display:flex;gap:12px}.social-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--bg-glass);border:1px solid var(--border);border-radius:50%;color:var(--text-secondary);transition:all var(--transition-fast)}.social-link:hover{background:var(--primary);border-color:var(--primary);color:#fff}.footer-links-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}.footer-heading{font-size:15px;font-weight:600;margin-bottom:20px;color:var(--text-primary)}.footer-link-list{list-style:none;display:flex;flex-direction:column;gap:12px}.footer-link{font-size:14px;color:var(--text-muted);text-decoration:none;transition:color var(--transition-fast)}.footer-link:hover{color:var(--text-primary)}.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:40px;border-top:1px solid var(--border)}.copyright{font-size:14px;color:var(--text-muted)}.footer-badges{display:flex;gap:20px}.footer-badge{font-size:13px;color:var(--text-secondary)}@media(max-width:1024px){.footer-main{grid-template-columns:1fr;gap:48px}.footer-brand{max-width:100%;text-align:center}.footer-social{justify-content:center}.footer-links-grid{grid-template-columns:repeat(2,1fr);text-align:center}.footer-bottom{flex-direction:column;gap:20px;text-align:center}}@media(max-width:640px){.footer-links-grid{grid-template-columns:1fr}.footer-badges{flex-direction:column;gap:8px}}.dashboard{display:flex;min-height:100vh;background:var(--bg-dark)}.sidebar{width:260px;background:var(--bg-darker);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:50}.sidebar-header{padding:24px 20px;border-bottom:1px solid var(--border)}.sidebar-logo{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;color:var(--text-primary)}.sidebar-logo span{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar-nav{flex:1;padding:20px 12px;display:flex;flex-direction:column;gap:4px}.nav-item{display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:15px;font-weight:500;color:var(--text-secondary);background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);width:100%;text-align:left}.nav-item:hover{color:var(--text-primary);background:var(--bg-glass)}.nav-item.active{color:var(--primary-light);background:#6366f11a}.nav-item.logout{color:var(--danger)}.nav-item.logout:hover{background:#ef44441a}.sidebar-footer{padding:20px 12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:4px}.dashboard-main{flex:1;margin-left:260px;padding:32px;overflow-y:auto}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.header-left h1{font-size:28px;font-weight:700;margin-bottom:4px}.header-left p{font-size:15px;color:var(--text-muted)}.status-badge{display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-full);font-size:14px;font-weight:500}.status-dot{width:10px;height:10px;border-radius:50%;animation:pulse 2s ease-in-out infinite}.status-dot.connected{background:var(--success);box-shadow:0 0 10px var(--success)}.status-dot.disconnected{background:var(--danger);box-shadow:0 0 10px var(--danger)}.dashboard-content{display:grid;grid-template-columns:1fr 1fr;gap:32px}.connection-panel{display:flex;flex-direction:column}.connection-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:40px;text-align:center;height:100%;display:flex;flex-direction:column;align-items:center}.connection-visual{position:relative;width:200px;height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:32px}.connection-ring{position:absolute;width:100%;height:100%}.ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--border);opacity:.3}.ring-1{width:100%;height:100%}.ring-2{width:130%;height:130%}.ring-3{width:160%;height:160%}.connection-ring.connected .ring{border-color:var(--success);opacity:.2}.connection-ring.connected .ring-1{animation:ripple 2s ease-out infinite}.connection-ring.connected .ring-2{animation:ripple 2s ease-out infinite .5s}.connection-ring.connected .ring-3{animation:ripple 2s ease-out infinite 1s}.connection-ring.connecting .ring{border-color:var(--warning);animation:pulse 1s ease-in-out infinite}.power-button{width:120px;height:120px;border-radius:50%;background:var(--bg-card-hover);border:3px solid var(--border-light);color:var(--text-muted);cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.power-button:hover{border-color:var(--primary);color:var(--primary);transform:scale(1.05)}.power-button.connected{background:var(--success);border-color:var(--success);color:#fff;box-shadow:0 0 40px #10b98166}.power-button.connecting{background:var(--warning);border-color:var(--warning);color:#fff;animation:pulse 1s ease-in-out infinite}.connection-status h2{font-size:24px;font-weight:700;margin-bottom:8px}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-muted{color:var(--text-muted)}.connection-time{font-size:14px;color:var(--text-secondary);font-feature-settings:"tnum"}.server-selector{width:100%;max-width:320px;margin-top:32px;position:relative}.server-dropdown{width:100%;display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--bg-darker);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast)}.server-dropdown:hover{border-color:var(--border-light)}.server-flag{font-size:28px}.server-info{display:flex;flex-direction:column;align-items:flex-start;flex:1}.server-city{font-size:15px;font-weight:600;color:var(--text-primary)}.server-country{font-size:13px;color:var(--text-muted)}.server-ping .ping-value{font-size:13px;font-weight:600;padding:4px 10px;border-radius:var(--radius-sm)}.ping-value.good{background:#10b9811a;color:var(--success)}.ping-value.medium{background:#f59e0b1a;color:var(--warning)}.ping-value.slow{background:#ef44441a;color:var(--danger)}.server-list{position:absolute;top:100%;left:0;right:0;margin-top:8px;background:var(--bg-darker);border:1px solid var(--border);border-radius:var(--radius-lg);max-height:320px;overflow-y:auto;z-index:100;animation:fadeInUp .2s ease}.server-option{width:100%;display:flex;align-items:center;gap:14px;padding:14px 20px;background:transparent;border:none;cursor:pointer;transition:background var(--transition-fast);text-align:left}.server-option:hover{background:var(--bg-glass)}.server-option.selected{background:#6366f11a}.server-meta{display:flex;align-items:center;gap:12px}.server-load{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted)}.load-indicator{width:8px;height:8px;border-radius:50%}.load-indicator.low{background:var(--success)}.load-indicator.medium{background:var(--warning)}.load-indicator.high{background:var(--danger)}.stats-panel{display:flex;flex-direction:column;gap:24px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.stat-card{display:flex;align-items:center;gap:16px;padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg)}.stat-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md)}.stat-icon.download{background:#10b9811a;color:var(--success)}.stat-icon.upload{background:#6366f11a;color:var(--primary)}.stat-icon.data{background:#8b5cf61a;color:#a78bfa}.stat-details{display:flex;flex-direction:column;gap:2px}.stat-label{font-size:13px;color:var(--text-muted)}.stat-value{font-size:18px;font-weight:700;font-feature-settings:"tnum"}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.action-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast)}.action-card:hover{background:var(--bg-card-hover);border-color:var(--primary);transform:translateY(-2px)}.action-icon{font-size:24px}.action-card span{font-size:13px;color:var(--text-secondary)}.ip-card{padding:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg)}.ip-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.ip-label{font-size:14px;color:var(--text-muted)}.ip-status{font-size:13px;font-weight:500}.ip-status.protected{color:var(--success)}.ip-status.exposed{color:var(--warning)}.ip-value{font-size:24px;font-weight:700;font-family:Monaco,Menlo,monospace;margin-bottom:8px;letter-spacing:.05em}.ip-location{font-size:14px;color:var(--text-secondary)}@media(max-width:1200px){.dashboard-content{grid-template-columns:1fr}}@media(max-width:900px){.sidebar{transform:translate(-100%)}.dashboard-main{margin-left:0}.action-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.dashboard-main{padding:20px}.dashboard-header{flex-direction:column;gap:16px;text-align:center}.stats-grid{grid-template-columns:1fr}}.wg-panel{display:flex;flex-direction:column;gap:1.5rem;padding:1rem;color:#fff;max-width:900px;margin:0 auto}.wg-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:1rem}.wg-title{font-size:1.8rem;font-weight:700;margin:0;background:linear-gradient(to right,#6366f1,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}.wg-subtitle{color:#9ca3af;margin-top:.5rem}.wg-form{background:#111827cc;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:2rem;display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.9rem;font-weight:500;color:#e5e7eb}.wg-form input{padding:.875rem 1rem;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#0000004d;color:#fff;font-size:1rem;outline:none;transition:border-color .2s}.wg-form input:focus{border-color:#6366f1}.inline-form{flex-direction:row;align-items:center;padding:1.5rem;margin-top:1rem;background:#1f293780}.inline-form input{flex:1}.btn-primary{background:#6366f1;color:#fff;border:none;padding:.875rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.btn-primary:hover:not(:disabled){background:#4f46e5}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:transparent;color:#e5e7eb;border:1px solid rgba(255,255,255,.2);padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:background .2s}.btn-secondary:hover{background:#ffffff1a}.wg-error{color:#ef4444;background:#ef44441a;padding:1rem;border-radius:8px;border:1px solid rgba(239,68,68,.2);font-size:.9rem;text-align:center}.clients-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem;margin-top:2rem}.client-card{background:#111827cc;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;transition:transform .2s,box-shadow .2s}.client-card:hover{transform:translateY(-2px);box-shadow:0 4px 20px #0000004d;border-color:#6366f166}.client-header{display:flex;justify-content:space-between;align-items:center}.client-status{display:flex;align-items:center;gap:.75rem}.client-status h3{margin:0;font-size:1.1rem;font-weight:600}.client-ip{background:#6366f133;color:#818cf8;padding:.25rem .5rem;border-radius:4px;font-size:.8rem;font-family:monospace}.client-stats{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;font-size:.85rem;color:#9ca3af;background:#0003;padding:1rem;border-radius:8px}.client-stats .stat:first-child,.client-stats .stat:nth-child(2){display:flex;align-items:center;gap:.5rem}.client-stats .stat:last-child{grid-column:1 / -1;font-size:.75rem;margin-top:.25rem;color:#6b7280}.client-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}.action-btn{flex:1;text-align:center;padding:.6rem;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:all .2s;min-width:80px}.action-btn.download{background:#10b9811a;color:#34d399;border-color:#10b98133}.action-btn.qr{background:#3b82f61a;color:#60a5fa;border-color:#3b82f633}.action-btn.toggle{background:#f59e0b1a;color:#fbbf24;border-color:#f59e0b33}.action-btn.delete{background:#ef44441a;color:#f87171;border-color:#ef444433}.action-btn:hover{filter:brightness(1.2)}.status-dot{width:10px;height:10px;border-radius:50%}.status-dot.connected{background-color:#10b981;box-shadow:0 0 8px #10b981}.status-dot.disconnected{background-color:#ef4444}@media(max-width:768px){.inline-form{flex-direction:column}.inline-form input,.inline-form button{width:100%}}.auth-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:9999}.auth-modal{background:#111827f2;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px #00000080;border-radius:16px;width:100%;max-width:420px;padding:2.5rem;position:relative;animation:authFadeIn .3s cubic-bezier(.16,1,.3,1)}.auth-close{position:absolute;top:1rem;right:1.5rem;background:none;border:none;color:#9ca3af;font-size:2rem;cursor:pointer;line-height:1;transition:color .2s}.auth-close:hover{color:#fff}.auth-header{margin-bottom:2rem;text-align:center}.auth-header h2{font-size:1.75rem;font-weight:700;color:#fff;margin-bottom:.5rem}.auth-header p{color:#9ca3af;font-size:.95rem}.auth-form .form-group{margin-bottom:1.5rem}.auth-form label{display:block;margin-bottom:.5rem;color:#e5e7eb;font-size:.9rem;font-weight:500}.auth-form input{width:100%;padding:.75rem 1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-size:1rem;transition:all .2s ease}.auth-form input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px #6366f133}.auth-submit{width:100%;padding:.875rem;font-size:1rem;font-weight:600;margin-top:1rem}.auth-error{background:#ef44441a;border:1px solid rgba(239,68,68,.2);color:#fca5a5;padding:.75rem 1rem;border-radius:8px;margin-bottom:1.5rem;font-size:.9rem;text-align:center}.auth-footer{margin-top:2rem;text-align:center;color:#9ca3af;font-size:.9rem}.auth-switch-btn{background:none;border:none;color:#818cf8;font-weight:600;cursor:pointer;margin-left:.5rem;padding:0;font-size:.9rem}.auth-switch-btn:hover{color:#6366f1;text-decoration:underline}@keyframes authFadeIn{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}