:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: rgba(255, 255, 255, .04);--bg-card-hover: rgba(255, 255, 255, .07);--bg-glass: rgba(255, 255, 255, .06);--border-subtle: rgba(255, 255, 255, .08);--border-accent: rgba(99, 102, 241, .4);--text-primary: #f0f0f5;--text-secondary: #8b8b9e;--text-muted: #5a5a6e;--accent: #6366f1;--accent-light: #818cf8;--accent-glow: rgba(99, 102, 241, .3);--success: #10b981;--danger: #ef4444;--warning: #f59e0b;--radius: 12px;--radius-lg: 16px;--radius-xl: 24px;--shadow-glow: 0 0 40px rgba(99, 102, 241, .15)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}.landing{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;position:relative;overflow:hidden}.landing:before{content:"";position:absolute;top:-200px;left:50%;transform:translate(-50%);width:600px;height:600px;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);pointer-events:none;animation:pulse-glow 4s ease-in-out infinite}@keyframes pulse-glow{0%,to{opacity:.4;transform:translate(-50%) scale(1)}50%{opacity:.7;transform:translate(-50%) scale(1.1)}}.landing-content{position:relative;z-index:1;text-align:center;max-width:640px;width:100%}.logo{font-size:.85rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--accent-light);margin-bottom:1rem}.landing h1{font-size:3rem;font-weight:800;letter-spacing:-1px;line-height:1.15;margin-bottom:.75rem;background:linear-gradient(135deg,#fff,#c7c7e0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.landing .subtitle{font-size:1.1rem;color:var(--text-secondary);line-height:1.6;margin-bottom:2.5rem}.url-bar{display:flex;align-items:center;gap:0;background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:6px;transition:border-color .3s,box-shadow .3s;box-shadow:0 4px 24px #0003}.url-bar:focus-within{border-color:var(--border-accent);box-shadow:var(--shadow-glow),0 4px 24px #0003}.url-bar input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-size:1rem;font-family:inherit;padding:12px 20px}.url-bar input::placeholder{color:var(--text-muted)}.url-bar .browse-btn{display:flex;align-items:center;gap:8px;padding:12px 28px;background:var(--accent);color:#fff;border:none;border-radius:20px;font-size:.95rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s;white-space:nowrap}.url-bar .browse-btn:hover:not(:disabled){background:var(--accent-light);transform:translateY(-1px);box-shadow:0 4px 16px var(--accent-glow)}.url-bar .browse-btn:active:not(:disabled){transform:translateY(0)}.url-bar .browse-btn:disabled{opacity:.5;cursor:not-allowed}.country-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:1.5rem}.country-row label{font-size:.85rem;color:var(--text-secondary)}.country-select{background:var(--bg-glass);border:1px solid var(--border-subtle);color:var(--text-primary);font-family:inherit;font-size:.85rem;padding:8px 16px;border-radius:var(--radius);outline:none;cursor:pointer;transition:border-color .2s}.country-select:focus{border-color:var(--border-accent)}.country-select option{background:var(--bg-secondary);color:var(--text-primary)}.status-bar{margin-top:1.25rem;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.85rem;color:var(--text-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted)}.status-dot.connected{background:var(--success);box-shadow:0 0 8px #10b98180;animation:dot-pulse 2s ease-in-out infinite}.status-dot.connecting{background:var(--warning);animation:dot-pulse 1s ease-in-out infinite}.status-dot.error{background:var(--danger)}@keyframes dot-pulse{0%,to{opacity:1}50%{opacity:.4}}.browser-view{height:100%;display:flex;flex-direction:column;background:var(--bg-primary)}.browser-toolbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);flex-shrink:0}.toolbar-brand{font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent-light);flex-shrink:0;cursor:pointer;transition:color .2s}.toolbar-brand:hover{color:var(--accent)}.toolbar-url-bar{flex:1;display:flex;align-items:center;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:4px;gap:0}.toolbar-url-bar input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-size:.85rem;font-family:inherit;padding:8px 12px}.toolbar-url-bar input::placeholder{color:var(--text-muted)}.toolbar-go-btn{padding:8px 20px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:.8rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s}.toolbar-go-btn:hover{background:var(--accent-light)}.toolbar-info{display:flex;align-items:center;gap:8px;flex-shrink:0}.toolbar-info .vpn-badge{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#10b9811f;border:1px solid rgba(16,185,129,.25);border-radius:8px;font-size:.75rem;font-weight:500;color:var(--success)}.toolbar-disconnect{padding:8px 16px;background:#ef44441f;border:1px solid rgba(239,68,68,.25);border-radius:8px;color:var(--danger);font-size:.75rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s}.toolbar-disconnect:hover{background:#ef444433}.browser-content{flex:1;position:relative;overflow:hidden}.browser-content iframe{width:100%;height:100%;border:none;background:#fff}.browser-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:var(--bg-primary);z-index:10}.spinner{width:40px;height:40px;border:3px solid var(--border-subtle);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.browser-loading p{color:var(--text-secondary);font-size:.9rem}.browser-error{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:var(--bg-primary);z-index:10}.browser-error p{color:var(--text-secondary);font-size:.95rem;max-width:400px;text-align:center}.browser-error button{padding:10px 24px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s}.browser-error button:hover{background:var(--accent-light)}