:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0b0e14;color:#e0e0e0}body{overflow-x:hidden}.vpn-app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;max-width:420px;margin:0 auto}.vpn-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:2.5rem}.vpn-logo{font-size:1.1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}.vpn-logo span{color:#3b82f6}.settings-btn{background:#ffffff0f;border:none;color:#fff9;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:1.1rem;transition:background .2s}.settings-btn:hover{background:#ffffff1f}.status-section{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem}.status-label{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:#fff6;margin-bottom:.4rem}.status-text{font-size:1.05rem;font-weight:600;transition:color .3s}.status-text.disconnected{color:#94a3b8}.status-text.connecting{color:#facc15}.status-text.connected{color:#22c55e}.power-ring-wrapper{position:relative;width:200px;height:200px;display:grid;place-items:center;margin-bottom:2.5rem}.power-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:3px solid rgba(255,255,255,.08);transition:border-color .4s,box-shadow .4s}.power-ring.connecting{border-color:#facc1566;box-shadow:0 0 30px #facc1526;animation:pulse-ring 1.5s ease-in-out infinite}.power-ring.connected{border-color:#22c55e80;box-shadow:0 0 40px #22c55e33}@keyframes pulse-ring{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.04);opacity:.7}}.power-btn{position:relative;z-index:1;width:130px;height:130px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#1e293b,#0f172a);box-shadow:0 4px 24px #00000080,inset 0 1px #ffffff0f;transition:transform .15s,box-shadow .3s}.power-btn:hover{transform:scale(1.04)}.power-btn:active{transform:scale(.97)}.power-btn.connecting{background:radial-gradient(circle at 40% 35%,#3b3000,#1c1500)}.power-btn.connected{background:radial-gradient(circle at 40% 35%,#052e16,#021a0d)}.power-icon{width:42px;height:42px;transition:color .3s}.power-icon.disconnected{color:#64748b}.power-icon.connecting{color:#facc15}.power-icon.connected{color:#22c55e}.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;margin-bottom:2rem}.stat-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.07);border-radius:.75rem;padding:1rem;text-align:center}.stat-label{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#ffffff59;margin-bottom:.35rem}.stat-value{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;color:#fff}.server-section{width:100%;margin-bottom:1.5rem}.server-section-title{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#ffffff59;margin-bottom:.65rem}.server-list{display:flex;flex-direction:column;gap:.4rem}.server-item{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;border-radius:.6rem;border:1px solid rgba(255,255,255,.06);background:#ffffff05;cursor:pointer;transition:background .15s,border-color .15s}.server-item:hover{background:#ffffff0d}.server-item.active{border-color:#3b82f680;background:#3b82f614}.server-flag{font-size:1.4rem;line-height:1}.server-info{flex:1}.server-name{font-size:.88rem;font-weight:600;color:#fff}.server-ping{font-size:.7rem;color:#fff6}.server-check{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.15);display:grid;place-items:center;transition:all .15s}.server-item.active .server-check{border-color:#3b82f6;background:#3b82f6}.shield-bar{width:100%;display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border-radius:.6rem;background:#ffffff08;border:1px solid rgba(255,255,255,.06);margin-bottom:1rem}.shield-icon{font-size:1.2rem}.shield-text{font-size:.78rem;color:#ffffff8c}.shield-text strong{color:#e0e0e0}.log-section{width:100%;margin-top:auto}.log-title{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#ffffff4d;margin-bottom:.5rem}.log-list{display:flex;flex-direction:column;gap:.25rem;max-height:140px;overflow-y:auto}.log-entry{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;color:#ffffff59;line-height:1.6}.log-entry .log-time{color:#fff3;margin-right:.4rem}.log-entry.success{color:#22c55eb3}.log-entry.warning{color:#facc15b3}.log-entry.info{color:#60a5fab3}.log-list::-webkit-scrollbar{width:4px}.log-list::-webkit-scrollbar-track{background:transparent}.log-list::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}